fix bugs phase 2 (excel ) , download sample feature

Co-authored-by: Copilot <copilot@github.com>

apps/dashboard/app/(authenticated)/sales/customers/page.tsx

@@ -6,6 +6,7 @@ import { ColumnHeader } from '@/shared/data-view/table-view'
 import FormDialog from '@/shared/components/form-dialog'
 import { ImportDataButton } from '@/shared/components/import-data-button'
 import { ExportDataButton } from '@/shared/components/export-data-button'
+import { DownloadSampleButton } from '@/shared/components/download-sample-button'
 import { useAuthApi } from '@/shared/useApi'
 import { CustomerForm } from '@/modules/customers/customer-form'
 import { CUSTOMER_ROUTES } from '@garage/api'
@@ -24,6 +25,10 @@ export default function CustomersPage() {
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
                     <div className='flex items-center gap-2'>
+                        <DownloadSampleButton
+                            onDownload={() => api.customers.downloadImportSample()}
+                            fileName='customers-import-sample'
+                        />
                         <ImportDataButton
                             onImport={(file) => api.customers.importData(file)}
                             onSuccess={invalidateQuery}

apps/dashboard/app/(authenticated)/sales/job-cards/[id]/appointments/page.tsx

@@ -1,7 +1,8 @@
 "use client"
 
+import { useEffect } from "react"
 import { use } from "react"
-import { useRouter } from "next/navigation"
+import { usePathname, useRouter, useSearchParams } from "next/navigation"
 import { ResourcePage } from "@/shared/data-view/resource-page"
 import { ColumnHeader } from "@/shared/data-view/table-view"
 import FormDialog from "@/shared/components/form-dialog"
@@ -27,8 +28,20 @@ export default function JobCardAppointmentsPage({
 }) {
     const { id: jobCardId } = use(params)
     const router = useRouter()
+    const pathname = usePathname()
+    const searchParams = useSearchParams()
     const jobCard = useJobCard()
 
+    useEffect(() => {
+        if (searchParams.get("create") !== "1") return
+
+        const params = new URLSearchParams(searchParams.toString())
+        params.delete("create")
+        params.set("dialog", "true")
+
+        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` }
         : null

apps/dashboard/app/(authenticated)/sales/job-cards/[id]/expense-items/page.tsx

@@ -48,7 +48,7 @@ export default function JobCardExpenseItemsPage({
 
     const rows = (data as any)?.data ?? []
 
-    const invalidate = () => queryClient.invalidateQueries({ queryKey }).then(() => router.refresh())
+    const invalidate = () => queryClient.invalidateQueries({ queryKey , refetchType:'all'}).then(() => router.refresh())
 
     async function handleDelete(row: any) {
         const confirmed = await confirm({

apps/dashboard/app/(authenticated)/sales/job-cards/[id]/layout.tsx

@@ -58,15 +58,15 @@ export default async function JobCardDetailLayout(props: { params: Promise<{ id:
                         label: `Attachments (${docs?.length || 0})`
                     },
 
+                    {
+                        href: `/sales/job-cards/${id}/appointments`,
+                        label: `Appointments (${jobCard?.appointments_count || 0})`
+                    },
                     // {
                     //     href: `/sales/job-cards/${id}/inspections`,
                     //     label: `Inspections (${(jobCard as any)?.inspections_count || 0})`
                     // },
 
-                    // {
-                    //     href: `/sales/job-cards/${id}/appointments`,
-                    //     label: `Appointments (${jobCard?.appointments_count || 0})`
-                    // },
 
                     // {
                     //     href: `/sales/job-cards/${id}/tasks`,

apps/dashboard/app/(authenticated)/sales/job-cards/[id]/parts/page.tsx

@@ -25,6 +25,7 @@ import { Ellipsis, Plus } from "lucide-react"
 import type { ColumnDef } from "@tanstack/react-table"
 import { JobCardPartForm } from "@/modules/job-cards/job-card-part-form"
 import { formatDate } from "@/shared/utils/formatters"
+import { JOB_CARD_ROUTES } from "@garage/api"
 
 export default function JobCardPartsPage({
     params,
@@ -35,7 +36,7 @@ export default function JobCardPartsPage({
     const api = useAuthApi()
     const queryClient = useQueryClient()
     const router = useRouter()
-    const queryKey = ["job-card-parts", jobCardId]
+    const queryKey = [JOB_CARD_ROUTES.GET_PARTS, jobCardId]
 
     const [dialogOpen, setDialogOpen] = useState(false)
     const [editItem, setEditItem] = useState<any | null>(null)
@@ -47,7 +48,7 @@ export default function JobCardPartsPage({
 
     const rows = (data as any)?.data ?? []
 
-    const invalidate = () => queryClient.invalidateQueries({ queryKey }).then(() => router.refresh())
+    const invalidate = () => queryClient.invalidateQueries({ queryKey, type: 'all', refetchType: 'all' },).then(() => router.refresh())
 
     async function handleDelete(row: any) {
         const confirmed = await confirm({

apps/dashboard/app/(authenticated)/sales/job-cards/[id]/services/page.tsx

@@ -50,7 +50,7 @@ export default function JobCardServicesPage({
 
     const rows = (data as any)?.data ?? []
 
-    const invalidate = () => queryClient.invalidateQueries({ queryKey }).then(() => router.refresh())
+    const invalidate = () => queryClient.invalidateQueries({ queryKey , refetchType:'all'}).then(() => router.refresh())
 
     async function handleDelete(row: any) {
         const confirmed = await confirm({

apps/dashboard/app/(authenticated)/sales/vehicles/page.tsx

@@ -6,6 +6,7 @@ import { ColumnHeader } from '@/shared/data-view/table-view'
 import FormDialog from '@/shared/components/form-dialog'
 import { ImportDataButton } from '@/shared/components/import-data-button'
 import { ExportDataButton } from '@/shared/components/export-data-button'
+import { DownloadSampleButton } from '@/shared/components/download-sample-button'
 import { useAuthApi } from '@/shared/useApi'
 import { VehicleForm } from '@/modules/vehicles/vehicle-form'
 import { VEHICLE_ROUTES } from '@garage/api'
@@ -24,6 +25,10 @@ export default function VehiclesPage() {
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
                     <div className='flex items-center gap-2'>
+                        <DownloadSampleButton
+                            onDownload={() => api.vehicles.downloadImportSample()}
+                            fileName='vehicles-import-sample'
+                        />
                         <ImportDataButton
                             onImport={(file) => api.vehicles.importData(file)}
                             onSuccess={invalidateQuery}

apps/dashboard/modules/home/nav-groups-links.ts

@@ -0,0 +1,21 @@
+import { navGroups } from "@/config/navGroups"
+
+function normalizeTitle(title: string) {
+    return title.trim().toLowerCase()
+}
+
+const titleToHref = new Map<string, string>()
+
+for (const group of navGroups) {
+    for (const item of group.items) {
+        titleToHref.set(normalizeTitle(item.title), item.href)
+
+        for (const subItem of item.items ?? []) {
+            titleToHref.set(normalizeTitle(subItem.title), subItem.href)
+        }
+    }
+}
+
+export function getNavHrefByTitle(title: string) {
+    return titleToHref.get(normalizeTitle(title))
+}

apps/dashboard/modules/home/sales-purchase-cards.tsx

@@ -1,8 +1,10 @@
 "use client"
 
+import Link from "next/link"
 import { FileText, FileSearch, Receipt, ShoppingCart } from "lucide-react"
 import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
 import type { DashboardData } from "./use-dashboard-data"
+import { getNavHrefByTitle } from "./nav-groups-links"
 
 type Props = { data: DashboardData }
 
@@ -11,15 +13,15 @@ export function SalesPurchaseCards({ data }: Props) {
     const purchase = data.purchase_totals
 
     const salesStats = [
-        { label: "Inspections", value: sales?.inspections ?? 0, icon: FileSearch },
-        { label: "Estimates", value: sales?.estimates ?? 0, icon: FileText },
-        { label: "Invoices", value: sales?.invoices ?? 0, icon: Receipt },
+        { label: "Inspections", value: sales?.inspections ?? 0, icon: FileSearch, href: getNavHrefByTitle("Inspections") },
+        { label: "Estimates", value: sales?.estimates ?? 0, icon: FileText, href: getNavHrefByTitle("Estimates") },
+        { label: "Invoices", value: sales?.invoices ?? 0, icon: Receipt, href: getNavHrefByTitle("Invoices") },
     ]
 
     const purchaseStats = [
-        { label: "Purchase Orders", value: purchase?.purchase_orders ?? 0, icon: ShoppingCart },
-        { label: "Bills", value: purchase?.bills ?? 0, icon: Receipt },
-        { label: "Expenses", value: purchase?.expenses ?? 0, icon: FileText },
+        { label: "Purchase Orders", value: purchase?.purchase_orders ?? 0, icon: ShoppingCart, href: getNavHrefByTitle("Purchase Orders") },
+        { label: "Bills", value: purchase?.bills ?? 0, icon: Receipt, href: getNavHrefByTitle("Bills") },
+        { label: "Expenses", value: purchase?.expenses ?? 0, icon: FileText, href: getNavHrefByTitle("Expenses") },
     ]
 
     return (
@@ -34,16 +36,30 @@ export function SalesPurchaseCards({ data }: Props) {
                 <CardContent>
                     <div className="grid grid-cols-3 gap-2">
                         {salesStats.map((stat) => (
-                            <div
-                                key={stat.label}
-                                className="flex flex-col items-center gap-1 rounded-lg border p-3 text-center"
-                            >
-                                <stat.icon className="h-4 w-4 text-muted-foreground" />
-                                <span className="text-lg font-bold">{stat.value}</span>
-                                <span className="text-[11px] text-muted-foreground leading-tight">
-                                    {stat.label}
-                                </span>
-                            </div>
+                            stat.href ? (
+                                <Link
+                                    key={stat.label}
+                                    href={stat.href}
+                                    className="flex flex-col items-center gap-1 rounded-lg border p-3 text-center transition-colors hover:bg-muted/50"
+                                >
+                                    <stat.icon className="h-4 w-4 text-muted-foreground" />
+                                    <span className="text-lg font-bold">{stat.value}</span>
+                                    <span className="text-[11px] text-muted-foreground leading-tight">
+                                        {stat.label}
+                                    </span>
+                                </Link>
+                            ) : (
+                                <div
+                                    key={stat.label}
+                                    className="flex flex-col items-center gap-1 rounded-lg border p-3 text-center"
+                                >
+                                    <stat.icon className="h-4 w-4 text-muted-foreground" />
+                                    <span className="text-lg font-bold">{stat.value}</span>
+                                    <span className="text-[11px] text-muted-foreground leading-tight">
+                                        {stat.label}
+                                    </span>
+                                </div>
+                            )
                         ))}
                     </div>
                 </CardContent>
@@ -59,16 +75,30 @@ export function SalesPurchaseCards({ data }: Props) {
                 <CardContent>
                     <div className="grid grid-cols-3 gap-2">
                         {purchaseStats.map((stat) => (
-                            <div
-                                key={stat.label}
-                                className="flex flex-col items-center gap-1 rounded-lg border p-3 text-center"
-                            >
-                                <stat.icon className="h-4 w-4 text-muted-foreground" />
-                                <span className="text-lg font-bold">{stat.value}</span>
-                                <span className="text-[11px] text-muted-foreground leading-tight">
-                                    {stat.label}
-                                </span>
-                            </div>
+                            stat.href ? (
+                                <Link
+                                    key={stat.label}
+                                    href={stat.href}
+                                    className="flex flex-col items-center gap-1 rounded-lg border p-3 text-center transition-colors hover:bg-muted/50"
+                                >
+                                    <stat.icon className="h-4 w-4 text-muted-foreground" />
+                                    <span className="text-lg font-bold">{stat.value}</span>
+                                    <span className="text-[11px] text-muted-foreground leading-tight">
+                                        {stat.label}
+                                    </span>
+                                </Link>
+                            ) : (
+                                <div
+                                    key={stat.label}
+                                    className="flex flex-col items-center gap-1 rounded-lg border p-3 text-center"
+                                >
+                                    <stat.icon className="h-4 w-4 text-muted-foreground" />
+                                    <span className="text-lg font-bold">{stat.value}</span>
+                                    <span className="text-[11px] text-muted-foreground leading-tight">
+                                        {stat.label}
+                                    </span>
+                                </div>
+                            )
                         ))}
                     </div>
                 </CardContent>

apps/dashboard/modules/job-cards/job-card-dropdown.tsx

@@ -5,7 +5,7 @@ import { confirm } from '@/shared/components/confirm-dialog';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/shared/components/ui/dropdown-menu'
 import { Button } from '@/shared/components/ui/button'
 import { toast } from 'sonner'
-import { Ellipsis, FileText, Pencil, Printer, Trash2 } from 'lucide-react';
+import { CalendarPlus, Ellipsis, FileText, Pencil, Printer, Trash2 } from 'lucide-react';
 import { useDocumentPrint } from '@/shared/hooks/use-document-print';
 import { useJobCard } from './job-card-context';
 import { useState } from 'react';
@@ -30,6 +30,10 @@ export default function JobCardDropdown({ id }: { id: string }) {
         print("job_card", id, "print")
     }
 
+    const handleCreateAppointment = () => {
+        router.push(`/sales/job-cards/${id}/appointments?create=1`)
+    }
+
     const handleConvertToInvoice = async () => {
         const confirmed = await confirm({
             title: "Convert to Invoice",
@@ -52,7 +56,7 @@ export default function JobCardDropdown({ id }: { id: string }) {
                 toast.info("An invoice already exists for this job card.")
                 router.push(`/sales/invoice/${conflictId}`)
             } else {
-                toast.error("Failed to convert job card to invoice")
+                 toast.error(err?.message || "Failed to convert job card to invoice")
             }
         } finally {
             setIsConverting(false)
@@ -78,38 +82,52 @@ export default function JobCardDropdown({ id }: { id: string }) {
         }
     }
     return (
-
-
-        <DropdownMenu>
-            <DropdownMenuTrigger asChild>
-                <Button variant="outline" size="icon" className="self-stretch h-auto aspect-square">
-                    <Ellipsis className="size-4" />
+        <div className="flex items-center gap-2">
+            {jobCard?.status !== "draft" && (
+                <Button variant="outline" onClick={handleConvertToInvoice} disabled={isConverting}>
+                    <FileText className="size-4" />
+                    {isConverting ? "Converting..." : "Convert to Invoice"}
                 </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent align="end">
-                <DropdownMenuItem onClick={handleEdit}>
-                    <Pencil className="size-4" />
-                    Edit
-                </DropdownMenuItem>
-                <DropdownMenuItem onClick={handlePrint} disabled={isPrinting}>
-                    <Printer className="size-4" />
-                    {isPrinting ? "Printing..." : "Print"}
-                </DropdownMenuItem>
-                {jobCard?.status !== "draft" && (
-                    <>
-                        <DropdownMenuSeparator />
+            )}
+
+            <Button variant="outline" onClick={handleCreateAppointment}>
+                <CalendarPlus className="size-4" />
+                Create Appointment
+            </Button>
+
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="outline" size="icon" className="self-stretch h-auto aspect-square">
+                        <Ellipsis className="size-4" />
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                    <DropdownMenuItem onClick={handleEdit}>
+                        <Pencil className="size-4" />
+                        Edit
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={handlePrint} disabled={isPrinting}>
+                        <Printer className="size-4" />
+                        {isPrinting ? "Printing..." : "Print"}
+                    </DropdownMenuItem>
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem onClick={handleCreateAppointment}>
+                        <CalendarPlus className="size-4" />
+                        Create Appointment
+                    </DropdownMenuItem>
+                    {jobCard?.status !== "draft" && (
                         <DropdownMenuItem onClick={handleConvertToInvoice} disabled={isConverting}>
                             <FileText className="size-4" />
                             {isConverting ? "Converting..." : "Convert to Invoice"}
                         </DropdownMenuItem>
-                    </>
-                )}
-                <DropdownMenuSeparator />
-                <DropdownMenuItem variant="destructive" onClick={handleDelete}>
-                    <Trash2 className="size-4" />
-                    Delete
-                </DropdownMenuItem>
-            </DropdownMenuContent>
-        </DropdownMenu>
+                    )}
+                    <DropdownMenuSeparator />
+                    <DropdownMenuItem variant="destructive" onClick={handleDelete}>
+                        <Trash2 className="size-4" />
+                        Delete
+                    </DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
     )
 }

apps/dashboard/public/assets/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

apps/dashboard/shared/components/download-sample-button.tsx

@@ -0,0 +1,47 @@
+"use client"
+
+import { useState } from "react"
+import { Button } from "@/shared/components/ui/button"
+import { Download, Loader2 } from "lucide-react"
+import { toast } from "sonner"
+
+type DownloadSampleButtonProps = {
+    onDownload: () => Promise<Blob>
+    fileName?: string
+    label?: string
+}
+
+export function DownloadSampleButton({
+    onDownload,
+    fileName = "import-sample",
+    label = "Sample",
+}: DownloadSampleButtonProps) {
+    const [isPending, setIsPending] = useState(false)
+
+    const handleDownload = async () => {
+        setIsPending(true)
+        try {
+            const blob = await onDownload()
+            const url = URL.createObjectURL(blob)
+            const anchor = document.createElement("a")
+            anchor.href = url
+            anchor.download = `${fileName}.xlsx`
+            document.body.appendChild(anchor)
+            anchor.click()
+            document.body.removeChild(anchor)
+            URL.revokeObjectURL(url)
+            toast.success("Sample downloaded successfully")
+        } catch (err: any) {
+            toast.error(err?.message ?? "Failed to download sample")
+        } finally {
+            setIsPending(false)
+        }
+    }
+
+    return (
+        <Button size="sm" variant="outline" disabled={isPending} onClick={handleDownload}>
+            {isPending ? <Loader2 className="animate-spin" /> : <Download />}
+            {label}
+        </Button>
+    )
+}