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/app/(authenticated)/sales/payment-received/[id]/layout.tsx

@@ -0,0 +1,34 @@
+import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
+import { getServerApi } from '@garage/api/server'
+import { PaymentReceivedActions } from '@/modules/payment-received/payment-received-actions'
+import { BanknoteIcon } from 'lucide-react'
+import React from 'react'
+
+export default async function PaymentReceivedDetailLayout(props: {
+    params: Promise<{ id: string }>
+    children: React.ReactNode
+}) {
+    const { id } = await props.params
+    const api = await getServerApi()
+    const payment = await api.paymentReceived.show(id)
+    const data = (payment as any)?.data ?? payment
+    const title = data?.payment_number || 'Payment Details'
+
+    return (
+        <DashboardDetailsPage
+            title={title}
+            description={data?.payment_number ? `Payment #: ${data.payment_number}` : undefined}
+            icon={<BanknoteIcon className="size-5" />}
+            backHref="/sales/payment-received"
+            actions={<PaymentReceivedActions paymentId={id} />}
+            tabs={[
+                {
+                    href: `/sales/payment-received/${id}`,
+                    label: 'Details',
+                },
+            ]}
+        >
+            {props.children}
+        </DashboardDetailsPage>
+    )
+}

apps/dashboard/app/(authenticated)/sales/payment-received/[id]/page.tsx

@@ -0,0 +1,97 @@
+import { getServerApi } from '@garage/api/server'
+import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
+import {
+    BadgeDollarSignIcon,
+    CalendarIcon,
+    ClipboardListIcon,
+    CreditCardIcon,
+    HashIcon,
+    UserIcon,
+} from 'lucide-react'
+
+export default async function PaymentReceivedDetailPage(props: { params: Promise<{ id: string }> }) {
+    const { id } = await props.params
+    const api = await getServerApi()
+    const payment = await api.paymentReceived.show(id)
+    const data = (payment as any)?.data ?? payment
+
+    if (!data) {
+        return <div className="text-muted-foreground">Payment not found.</div>
+    }
+
+    const amount = data.amount_received != null
+        ? Number(data.amount_received).toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+        : '—'
+
+    const paymentDate = data.payment_date
+        ? new Date(data.payment_date).toLocaleDateString(undefined, { year: 'numeric', month: 'long', day: 'numeric' })
+        : '—'
+
+    const customerName = data.customer?.first_name
+        ? `${data.customer.first_name} ${data.customer.last_name ?? ''}`.trim()
+        : data.customer?.company_name ?? data.customer_name ?? '—'
+
+    const jobCardLabel = data.job_card?.title ?? data.job_card_name ?? '—'
+    const paymentMode = data.payment_mode?.title ?? data.payment_mode?.name ?? data.payment_mode_name ?? '—'
+
+    return (
+        <DashboardPage header={null}>
+            <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+                <div className="flex items-center gap-3 rounded-lg border p-4">
+                    <HashIcon className="size-5 text-muted-foreground" />
+                    <div>
+                        <p className="text-xs text-muted-foreground">Payment Number</p>
+                        <p className="font-medium">{data.payment_number || '—'}</p>
+                    </div>
+                </div>
+
+                <div className="flex items-center gap-3 rounded-lg border p-4">
+                    <UserIcon className="size-5 text-muted-foreground" />
+                    <div>
+                        <p className="text-xs text-muted-foreground">Customer</p>
+                        <p className="font-medium">{customerName}</p>
+                    </div>
+                </div>
+
+                <div className="flex items-center gap-3 rounded-lg border p-4">
+                    <ClipboardListIcon className="size-5 text-muted-foreground" />
+                    <div>
+                        <p className="text-xs text-muted-foreground">Job Card</p>
+                        <p className="font-medium">{jobCardLabel}</p>
+                    </div>
+                </div>
+
+                <div className="flex items-center gap-3 rounded-lg border p-4">
+                    <BadgeDollarSignIcon className="size-5 text-emerald-600" />
+                    <div>
+                        <p className="text-xs text-muted-foreground">Amount Received</p>
+                        <p className="font-semibold text-emerald-700 dark:text-emerald-400">{amount}</p>
+                    </div>
+                </div>
+
+                <div className="flex items-center gap-3 rounded-lg border p-4">
+                    <CreditCardIcon className="size-5 text-muted-foreground" />
+                    <div>
+                        <p className="text-xs text-muted-foreground">Payment Mode</p>
+                        <p className="font-medium capitalize">{paymentMode}</p>
+                    </div>
+                </div>
+
+                <div className="flex items-center gap-3 rounded-lg border p-4">
+                    <CalendarIcon className="size-5 text-muted-foreground" />
+                    <div>
+                        <p className="text-xs text-muted-foreground">Payment Date</p>
+                        <p className="font-medium">{paymentDate}</p>
+                    </div>
+                </div>
+
+                {data.note && (
+                    <div className="sm:col-span-2 lg:col-span-3 rounded-lg border p-4">
+                        <p className="text-xs text-muted-foreground mb-1">Note</p>
+                        <p className="text-sm">{data.note}</p>
+                    </div>
+                )}
+            </div>
+        </DashboardPage>
+    )
+}

apps/dashboard/app/(authenticated)/sales/payment-received/page.tsx

@@ -10,9 +10,12 @@ import {
     CalendarIcon,
     CreditCardIcon,
     HashIcon,
+    Printer,
     UserIcon,
     ClipboardListIcon,
 } from "lucide-react"
+import { useRouter } from "next/navigation"
+import { useDocumentPrint } from "@/shared/hooks/use-document-print"
 import { getFullName } from "@/shared/utils/getFullName"
 import { RelationLink } from "@/shared/components/relation-link"
 
@@ -31,6 +34,9 @@ type PaymentReceivedItem = {
 }
 
 export default function PaymentReceivedPage() {
+    const router = useRouter()
+    const { print, isPrinting } = useDocumentPrint()
+
     return (
         <ResourcePage<{ list(query?: any): Promise<any>; destroy(id: string): Promise<any> }>
              routeKey={PAYMENT_RECEIVED_ROUTES.INDEX}
@@ -40,6 +46,7 @@ export default function PaymentReceivedPage() {
                 list: (query?: any) => api.paymentReceived.list(query),
                 destroy: (id: string) => api.paymentReceived.destroy(id),
             })}
+            onRowClick={(row) => router.push(`/sales/payment-received/${(row as any).id}`)}
             headerProps={({ invalidateQuery }) => ({
                 actions: (
                     <FormDialog title="Record Payment">
@@ -68,6 +75,7 @@ export default function PaymentReceivedPage() {
                 },
                 {
                     accessorKey: "customer",
+
                     header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
                     cell: ({ row }) => {
                         const item: any = row.original as unknown as PaymentReceivedItem
@@ -165,7 +173,15 @@ export default function PaymentReceivedPage() {
                         )
                     },
                 },
-                actionsColumn(),
+                actionsColumn({
+                    extraItems: (row) => [
+                        {
+                            label: isPrinting ? "Printing..." : "Print",
+                            icon: Printer,
+                            onClick: (r) => print("payment_received", String(r.id), "print"),
+                        },
+                    ],
+                }),
             ]}
         />
     )