feat: add document sharing functionality across various modules

- Introduced ShareDocumentButton component for sharing documents. - Added ShareDocumentDialog for email and WhatsApp sharing options. - Integrated document sharing in estimates, invoices, inspections, job cards, bills, and purchase orders. - Implemented useDocumentShare hook for handling share logic. - Created DocumentShareClient for API interactions related to document sharing. - Updated layouts and actions to include sharing options for relevant entities.
2026-05-14 12:21:01 +04:00
parent 05b55b5721
commit fcbba6247d
22 changed files with 571 additions and 60 deletions
@@ -3,6 +3,7 @@ import { getServerApi } from '@garage/api/server'
 import { BillActions } from '@/modules/bills/bill-actions'
 import { BillProvider, type BillResponse } from '@/modules/bills/bill-context'
 import BillStatusBadge from '@/modules/bills/bill-status-badge'
+import { ShareDocumentButton } from '@/shared/components/share-document-button'
 import { ReceiptIcon } from 'lucide-react'
 import React from 'react'

@@ -26,6 +27,7 @@ export default async function BillDetailLayout(props: {
                actions={
                    <div className="flex space-x-2 items-center">
                        <BillStatusBadge bill={{id, status:data?.status}} />
+                        <ShareDocumentButton type="bill" id={id} />
                        <BillActions billId={id} />
                    </div>
                }
@@ -3,6 +3,7 @@ import { getServerApi } from '@garage/api/server'
 import { PurchaseOrderActions } from '@/modules/purchase-orders/purchase-order-actions'
 import { PurchaseOrderProvider } from '@/modules/purchase-orders/purchase-order-context'
 import { CreateBillFromPOButton } from '@/modules/purchase-orders/create-bill-from-po-button'
+import { ShareDocumentButton } from '@/shared/components/share-document-button'
 import { ClipboardList } from 'lucide-react'
 import React from 'react'

@@ -30,6 +31,7 @@ export default async function layout(props: {
                actions={
                    <div className="flex items-center gap-2">
                        <CreateBillFromPOButton />
+                        <ShareDocumentButton type="purchase_order" id={id} />
                        <PurchaseOrderActions purchaseOrderId={id} />
                    </div>
                }
@@ -4,6 +4,7 @@ import { EstimateActions } from '@/modules/estimates/estimate-actions'
 import { EstimateProvider } from '@/modules/estimates/estimate-context'
 import { CreateInvoiceFromEstimateButton } from '@/modules/estimates/create-invoice-from-estimate-button'
 import { CreateJobCardFromEstimateButton } from '@/modules/estimates/create-job-card-from-estimate-button'
+import { ShareDocumentButton } from '@/shared/components/share-document-button'
 import { FileTextIcon } from 'lucide-react'
 import React from 'react'
 import { formatDate } from '@/shared/utils/formatters'
@@ -40,6 +41,7 @@ export default async function layout(props: {
                    <div className="flex items-center gap-2">
                        <CreateInvoiceFromEstimateButton />
                        <CreateJobCardFromEstimateButton />
+                        <ShareDocumentButton type="estimate" id={id} />
                        <EstimateActions estimateId={id} />
                    </div>
                }
@@ -2,6 +2,7 @@ import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
 import { getServerApi } from '@garage/api/server'
 import { InspectionActions } from '@/modules/inspections/inspection-actions'
 import { InspectionProvider } from '@/modules/inspections/inspection-context'
+import { ShareDocumentButton } from '@/shared/components/share-document-button'
 import React from 'react'

 export default async function layout(props: {
@@ -23,7 +24,12 @@ export default async function layout(props: {
                title={title}
                description={orderNumber ? `Order: ${orderNumber}` : undefined}
                backHref="/sales/inspections"
-                actions={<InspectionActions inspectionId={id} status={status} />}
+                actions={
+                    <div className="flex items-center gap-2">
+                        <ShareDocumentButton type="inspection" id={id} />
+                        <InspectionActions inspectionId={id} status={status} />
+                    </div>
+                }
                tabs={[
                    {
                        href: `/sales/inspections/${id}`,
@@ -5,6 +5,7 @@ import { InvoiceProvider } from '@/modules/invoices/invoice-context'
 import { ReceiptIcon } from 'lucide-react'
 import React from 'react'
 import InvoiceStatusBadge from '@/modules/invoices/invoice-status-badge'
+import { ShareDocumentButton } from '@/shared/components/share-document-button'

 export default async function InvoiceDetailLayout(props: { params: Promise<{ id: string }>, children: React.ReactNode }) {
    const { id } = await props.params
@@ -24,6 +25,7 @@ export default async function InvoiceDetailLayout(props: { params: Promise<{ id:
                    <div className="flex space-x-2 items-center">

                        <InvoiceStatusBadge invoice={{id, status:data?.status}} />
+                        <ShareDocumentButton type="invoice" id={id} />
                        <InvoiceActions invoiceId={id} />
                    </div>
                }
@@ -138,7 +138,7 @@ export default function InvoicesPage() {
                    cell: ({ row }) => {
                        const item = row.original as unknown as InvoiceItem
                        const customerLabel = getCustomerLabel(item)
-                        const subline = item.customer?.phone || item.customer?.company_name || "—"
+                        const phone = item.customer?.phone

                        return (
                            <div className="min-w-[190px]">
@@ -146,12 +146,19 @@ export default function InvoicesPage() {
                                    <Button variant="outline" asChild size="sm" onClick={(e) => e.stopPropagation()}>
                                        <Link href={`/sales/customers/${item.customer.id}`}>
                                            <UserIcon /> {customerLabel}
+                                            {phone && (
+                                                <span className="ms-1 text-muted-foreground">· {phone}</span>
+                                            )}
                                        </Link>
                                    </Button>
                                ) : (
-                                    <p className="font-medium leading-none">{customerLabel}</p>
+                                    <p className="font-medium leading-none">
+                                        {customerLabel}
+                                        {phone && (
+                                            <span className="ms-1 text-muted-foreground">· {phone}</span>
+                                        )}
+                                    </p>
                                )}
-                                <p className="mt-1 text-xs text-muted-foreground">{subline}</p>
                            </div>
                        )
                    },
@@ -12,6 +12,8 @@ import type { AppointmentsClient } from "@garage/api"
 import { CalendarCheck2Icon, ClockIcon } from "lucide-react"
 import { Badge } from "@/shared/components/ui/badge"
 import { useJobCard } from "@/modules/job-cards/job-card-context"
+import { getFullName } from "@/shared/utils/getFullName"
+import { getVehicleLabel } from "@/modules/vehicles/utils/getVehicleLabel"

 const STATUS_COLORS: Record<string, string> = {
    requested: "bg-yellow-100 text-yellow-800",
@@ -42,10 +44,28 @@ export default function JobCardAppointmentsPage({
        router.replace(`${pathname}?${params.toString()}`)
    }, [pathname, router, searchParams])

-    const defaultJobCard = jobCard
-        ? { value: String((jobCard as any).id), label: (jobCard as any).label || (jobCard as any).title || `Job Card` }
+    const jc = jobCard as any
+    const defaultJobCard = jc
+        ? { value: String(jc.id), label: jc.label || jc.title || `Job Card` }
        : null

+    const appointmentDefaults = jc
+        ? {
+              job_card_id: jc.id,
+              job_card_title: jc.title || `Job Card #${jc.id}`,
+              customer_id: jc.customer?.id,
+              customer_name: getFullName(jc.customer),
+              vehicle_id: jc.vehicle?.id,
+              vehicle_name: getVehicleLabel(jc.vehicle),
+              service_writer_id: jc.service_writer?.id,
+              service_writer_name: getFullName(jc.service_writer),
+              technician_id: jc.primary_technician?.id,
+              technician_name: getFullName(jc.primary_technician),
+              department_id: jc.department?.id,
+              department_name: jc.department?.name,
+          }
+        : { job_card: defaultJobCard }
+
    return (
        <ResourcePage<AppointmentsClient>
            routeKey={APPOINTMENT_ROUTES.INDEX}
@@ -59,8 +79,8 @@ export default function JobCardAppointmentsPage({
                        {(resourceId) => (
                            <AppointmentForm
                                resourceId={resourceId}
-                                initialData={selectedItem ?? { job_card: defaultJobCard }}
-                                onSuccess={() => { closeDialog(); invalidateQuery() }}
+                                initialData={selectedItem ?? appointmentDefaults}
+                                onSuccess={() => { closeDialog(); invalidateQuery(); router.refresh() }}
                            />
                        )}
                    </FormDialog>
@@ -10,7 +10,7 @@ import { useAuthApi } from "@/shared/useApi"
 import { confirm } from "@/shared/components/confirm-dialog"
 import { Button } from "@/shared/components/ui/button"
 import { Card, CardContent } from "@/shared/components/ui/card"
-import { JOB_CARD_ROUTES } from "@garage/api"
+import { ApiError, JOB_CARD_ROUTES } from "@garage/api"
 import DashboardPage from "@/base/components/layout/dashboard/dashboard-page"
 import { useJobCard } from "@/modules/job-cards/job-card-context"
 import { CONSTANTS } from "@/config/constants"
@@ -22,6 +22,62 @@ function getFileIcon(mimeType?: string) {
    return FileIcon
 }

+const ALLOWED_HINT = "Allowed: images, PDF, Office docs, audio, video."
+
+function describeAttachmentError(rawMessage: string, filename: string): string {
+    const msg = rawMessage.toLowerCase()
+    if (msg.includes("must be a file of type") || msg.includes("mimes")) {
+        return `${filename}: unsupported file type. ${ALLOWED_HINT}`
+    }
+    if (msg.includes("may not be greater") || msg.includes("max")) {
+        return `${filename}: exceeds 5 MB limit.`
+    }
+    if (msg.includes("must be a file")) {
+        return `${filename}: invalid file.`
+    }
+    return `${filename}: ${rawMessage}`
+}
+
+function showUploadError(err: unknown, files: File[]) {
+    if (!(err instanceof ApiError)) {
+        toast.error("Failed to upload attachment(s)")
+        return
+    }
+
+    const validation = err.validationErrors
+    if (!validation || Object.keys(validation).length === 0) {
+        toast.error(err.payload?.message ?? "Failed to upload attachment(s)")
+        return
+    }
+
+    const messages: string[] = []
+    for (const [key, msgs] of Object.entries(validation)) {
+        const firstMsg = Array.isArray(msgs) ? msgs[0] : String(msgs)
+        if (!firstMsg) continue
+
+        const match = key.match(/^attachments\.(\d+)$/)
+        if (match) {
+            const idx = Number(match[1])
+            const filename = files[idx]?.name ?? `File #${idx + 1}`
+            messages.push(describeAttachmentError(firstMsg, filename))
+        } else if (key === "attachments") {
+            messages.push(firstMsg)
+        } else {
+            messages.push(firstMsg)
+        }
+    }
+
+    if (messages.length === 0) {
+        toast.error(err.payload?.message ?? "Failed to upload attachment(s)")
+        return
+    }
+
+    const shown = messages.slice(0, 3)
+    const extra = messages.length - shown.length
+    shown.forEach((m) => toast.error(m))
+    if (extra > 0) toast.error(`...and ${extra} more`)
+}
+
 export default function JobCardAttachmentsPage() {
    const { id: jobCardId } = useParams<{ id: string }>()
    const api = useAuthApi()
@@ -66,18 +122,19 @@ export default function JobCardAttachmentsPage() {
        const files = e.target.files
        if (!files || files.length === 0) return

+        const fileList = Array.from(files)
        setIsUploading(true)
-        const promise = api.jobCards.addAttachment(jobCardId, Array.from(files))
-        toast.promise(promise, {
-            loading: "Uploading attachment(s)...",
-            success: "Attachment(s) uploaded successfully",
-            error: "Failed to upload attachment(s)",
-        })
+        const loadingToast = toast.loading("Uploading attachment(s)...")

        try {
-            await promise
+            await api.jobCards.addAttachment(jobCardId, fileList)
+            toast.dismiss(loadingToast)
+            toast.success("Attachment(s) uploaded successfully")
            queryClient.invalidateQueries({ queryKey })
            startRefreshTransition(() => router.refresh())
+        } catch (err) {
+            toast.dismiss(loadingToast)
+            showUploadError(err, fileList)
        } finally {
            setIsUploading(false)
            if (fileInputRef.current) {
@@ -16,7 +16,7 @@ export default async function JobCardDetailLayout(props: { params: Promise<{ id:

    const title = jobCard?.title || 'Job Card Details'
    const status = jobCard?.status || 'draft'
-    const docs = jobCard?.documents
+    const attachmentsCount = jobCard?.attachment_files?.length ?? jobCard?.documents?.length ?? 0

    return (
        <JobCardProvider jobCard={{ ...jobCard }}>
@@ -55,7 +55,7 @@ export default async function JobCardDetailLayout(props: { params: Promise<{ id:
                    // TODO: Needs refactor from API side then refactor in frontend
                    {
                        href: `/sales/job-cards/${id}/attachments`,
-                        label: `Attachments (${docs?.length || 0})`
+                        label: `Attachments (${attachmentsCount})`
                    },

                    {