feat: add logo field to settings schema and update settings client to handle file uploads

feat: integrate dialog close context in vendor select field and CRUD dialog components

feat: enhance vendor general info to format status using utility function

feat: implement form dialog context for managing dialog close actions

feat: add async select field dialog close context for better form handling

fix: update form mutation hook to close dialog on successful submission

feat: extend document print types to include expense and credit note

feat: add settings update payload type to include logo and other fields

feat: create employee attendance and work history pages with resource management

feat: implement payment made and received detail pages with actions

feat: add quick shortcuts component for easy navigation in the dashboard

feat: create actions for payment made and received with print and delete options

feat: implement dialog close context for better dialog management

feat: add error parsing utility for improved error handling in API responses

apps/dashboard/modules/home/dashboard-content.tsx

@@ -14,6 +14,7 @@ import { ItemsTotalsCard } from "./items-totals-card"
 import { CustomersTotalsCard } from "./customers-totals-card"
 import { SalesPurchaseCards } from "./sales-purchase-cards"
 import { VehicleStatsCards } from "./vehicle-stats-cards"
+import { QuickShortcuts } from "./quick-shortcuts"
 import { DashboardPeriods, type DashboardPeriod, type HomeDashboardQuery } from "@garage/api"
 
 const DEFAULT_PERIOD: DashboardPeriod = "this_month"
@@ -66,6 +67,9 @@ export function DashboardContent() {
 
     return (
         <div className="space-y-6">
+            {/* Quick Shortcuts */}
+            <QuickShortcuts />
+
             {/* Financial Overview */}
             <FinancialTotalsCards data={data} />
 

apps/dashboard/modules/home/quick-shortcuts.tsx

@@ -0,0 +1,117 @@
+"use client"
+
+import Link from "next/link"
+import {
+    CalendarCheck2Icon,
+    CarIcon,
+    ClipboardCheckIcon,
+    ClipboardListIcon,
+    PackageIcon,
+    ReceiptIcon,
+    ReceiptTextIcon,
+    UsersIcon,
+    WrenchIcon,
+} from "lucide-react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
+
+type Shortcut = {
+    label: string
+    href: string
+    icon: typeof CarIcon
+    color: string
+    bg: string
+}
+
+const shortcuts: Shortcut[] = [
+    {
+        label: "Job Cards",
+        href: "/sales/job-cards",
+        icon: ClipboardListIcon,
+        color: "text-emerald-600",
+        bg: "bg-emerald-500/10",
+    },
+    {
+        label: "Appointments",
+        href: "/calendar/appointment/list",
+        icon: CalendarCheck2Icon,
+        color: "text-sky-600",
+        bg: "bg-sky-500/10",
+    },
+    {
+        label: "New Estimate",
+        href: "/sales/estimates/new",
+        icon: ReceiptTextIcon,
+        color: "text-violet-600",
+        bg: "bg-violet-500/10",
+    },
+    {
+        label: "Invoices",
+        href: "/sales/invoice",
+        icon: ReceiptIcon,
+        color: "text-amber-600",
+        bg: "bg-amber-500/10",
+    },
+    {
+        label: "Inspections",
+        href: "/sales/inspections",
+        icon: ClipboardCheckIcon,
+        color: "text-rose-600",
+        bg: "bg-rose-500/10",
+    },
+    {
+        label: "Customers",
+        href: "/sales/customers",
+        icon: UsersIcon,
+        color: "text-blue-600",
+        bg: "bg-blue-500/10",
+    },
+    {
+        label: "Vehicles",
+        href: "/sales/vehicles",
+        icon: CarIcon,
+        color: "text-indigo-600",
+        bg: "bg-indigo-500/10",
+    },
+    {
+        label: "Parts",
+        href: "/items/parts",
+        icon: PackageIcon,
+        color: "text-orange-600",
+        bg: "bg-orange-500/10",
+    },
+    {
+        label: "Services",
+        href: "/items/services",
+        icon: WrenchIcon,
+        color: "text-teal-600",
+        bg: "bg-teal-500/10",
+    },
+]
+
+export function QuickShortcuts() {
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle className="text-sm font-medium">Quick Shortcuts</CardTitle>
+            </CardHeader>
+            <CardContent>
+                <div className="grid grid-cols-3 gap-2 sm:grid-cols-4 lg:grid-cols-9">
+                    {shortcuts.map((shortcut) => (
+                        <Link
+                            key={shortcut.label}
+                            href={shortcut.href}
+                            className="flex flex-col items-center gap-2 rounded-lg border p-3 text-center transition-colors hover:bg-muted/50"
+                        >
+                            <div className={`rounded-md p-2 ${shortcut.bg}`}>
+                                <shortcut.icon className={`h-5 w-5 ${shortcut.color}`} />
+                            </div>
+                            <span className="text-[11px] font-medium leading-tight">
+                                {shortcut.label}
+                            </span>
+                        </Link>
+                    ))}
+                </div>
+            </CardContent>
+        </Card>
+    )
+}

apps/dashboard/modules/home/upcoming-appointments-card.tsx

@@ -4,6 +4,7 @@ import { Calendar, Clock } from "lucide-react"
 import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
 import { Badge } from "@/shared/components/ui/badge"
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/shared/components/ui/tabs"
+import { formatEnum } from "@/shared/utils/formatters"
 import type { DashboardData } from "./use-dashboard-data"
 
 type Props = { data: DashboardData }
@@ -36,7 +37,7 @@ function AppointmentRow({ appt }: { appt: AppointmentDetail }) {
                     {appt.from_time?.slice(0, 5)} - {appt.to_time?.slice(0, 5)}
                 </div>
                 <Badge variant="secondary" className={statusBadge[appt.status ?? ""] ?? ""}>
-                    {appt.status}
+                    {formatEnum(appt.status)}
                 </Badge>
             </div>
         </div>