updates

apps/dashboard/app/(authenticated)/purchase/expense/[id]/layout.tsx

@@ -0,0 +1,38 @@
+import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
+import { getServerApi } from '@garage/api/server'
+import { ExpenseActions } from '@/modules/expenses/expense-actions'
+import { ExpenseProvider, type ExpenseContextValue } from '@/modules/expenses/expense-context'
+import { ReceiptIcon } from 'lucide-react'
+import React from 'react'
+
+export default async function ExpenseDetailLayout(props: {
+    params: Promise<{ id: string }>
+    children: React.ReactNode
+}) {
+    const { id } = await props.params
+    const api = await getServerApi()
+    const expense = await api.expenses.getById(id)
+    const data = expense.data as ExpenseContextValue
+    const title = data?.title || data?.invoice_number || 'Expense Details'
+    
+    return (
+        <ExpenseProvider expense={data}>
+            <DashboardDetailsPage
+                className="p-0 lg:p-0"
+                title={title}
+                description={data?.invoice_number ? `Invoice #: ${data.invoice_number}` : undefined}
+                icon={<ReceiptIcon className="size-5" />}
+                backHref="/purchase/expense"
+                actions={<ExpenseActions expenseId={id} />}
+                tabs={[
+                    {
+                        href: `/purchase/expense/${id}`,
+                        label: 'Details',
+                    },
+                ]}
+            >
+                {props.children}
+            </DashboardDetailsPage>
+        </ExpenseProvider>
+    )
+}

apps/dashboard/app/(authenticated)/purchase/expense/[id]/page.tsx

@@ -0,0 +1,36 @@
+import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
+import { ExpenseGeneralInfo } from '@/modules/expenses/expense-general-info'
+import { ExpenseItemsSection } from '@/modules/expenses/expense-items-section'
+import { ExpensePaymentsSection } from '@/modules/expenses/expense-payments-section'
+import { getServerApi } from '@garage/api/server'
+
+export default async function ExpenseDetailPage(props: { params: Promise<{ id: string }> }) {
+    const { id } = await props.params
+    const api = await getServerApi()
+    const expense = await api.expenses.show(id)
+    const data = (expense as any)?.data ?? expense
+
+    if (!data) {
+        return <div className="text-muted-foreground">Expense not found.</div>
+    }
+
+    const taxLabel = data.tax?.title ? `${data.tax.title} (${data.tax.rate}%)` : undefined
+
+    return (
+        <DashboardPage header={null}>
+            <div className="grid gap-6">
+                <ExpenseGeneralInfo />
+                <ExpensePaymentsSection />
+                <ExpenseItemsSection
+                    items={data.expense_items}
+                    discountType={data.discount}
+                    subTotal={data.sub_total}
+                    discountAmount={data.discount_amount_major}
+                    taxAmount={data.tax_amount}
+                    total={data.total}
+                    taxLabel={taxLabel}
+                />
+            </div>
+        </DashboardPage>
+    )
+}

apps/dashboard/app/(authenticated)/purchase/expense/page.tsx

@@ -7,16 +7,23 @@ import { ExpenseForm } from "@/modules/expenses/expense-form"
 import { Badge } from "@/shared/components/ui/badge"
 import { EXPENSE_ROUTES } from "@garage/api"
 import type { ExpensesClient } from "@garage/api"
+import { useRouter } from "next/navigation"
+import { formatCurrency, formatDate, formatEnum } from "@/shared/utils/formatters"
 
 export default function ExpensesPage() {
+    const router = useRouter()
     return (
         <ResourcePage<ExpensesClient>
             pageTitle="Expenses"
             routeKey={EXPENSE_ROUTES.INDEX}
             getClient={(api) => api.expenses}
+            onRowClick={(row)=>router.push(`/purchase/expense/${row.id}`)}
             headerProps={({ selectedItem, invalidateQuery }) => ({
                 actions: (
-                    <FormDialog title="Expense">
+                    <FormDialog
+                        title="Expense"
+                        classNames={{ dialogContent: "lg:min-w-6xl" }}
+                    >
                         {(resourceId) => (
                             <ExpenseForm
                                 resourceId={resourceId}
@@ -38,38 +45,47 @@ export default function ExpensesPage() {
                     cell: ({ row }) => (row.original as any).invoice_number || "—",
                 },
                 {
-                    accessorKey: "vendor_name",
-                    header: ({ column }) => <ColumnHeader column={column} title="Vendor" />,
-                    cell: ({ row }) => (row.original as any).vendor_name || "—",
+                    accessorKey: "vendor",
+                    header: () => "Vendor",
+                    cell: ({ row }) => {
+                        const vendor = (row.original as any).vendor
+                        return vendor?.company_name || vendor?.name || "—"
+                    },
                 },
                 {
                     accessorKey: "expense_date",
                     header: ({ column }) => <ColumnHeader column={column} title="Date" />,
-                    cell: ({ row }) => {
-                        const val = (row.original as any).expense_date
-                        return val ? new Date(val).toLocaleDateString() : "—"
-                    },
+                    cell: ({ row }) => formatDate((row.original as any).expense_date),
+                },
+                {
+                    accessorKey: "total",
+                    header: () => "Total",
+                    cell: ({ row }) => formatCurrency((row.original as any).total ?? 0),
+                },
+                {
+                    accessorKey: "balance_due",
+                    header: () => "Balance Due",
+                    cell: ({ row }) => formatCurrency((row.original as any).balance_due ?? 0),
                 },
                 {
                     accessorKey: "status",
                     header: ({ column }) => <ColumnHeader column={column} title="Status" />,
                     cell: ({ row }) => {
                         const status = (row.original as any).status
+                        const variantMap: Record<string, "default" | "secondary" | "destructive" | "outline"> = {
+                            draft: "secondary",
+                            open: "default",
+                            un_paid: "destructive",
+                            partially_paid: "secondary",
+                            paid: "default",
+                        }
                         return (
-                            <Badge variant={status === "paid" ? "default" : "secondary"}>
-                                {status || "—"}
+                            <Badge variant={variantMap[status] ?? "outline"}>
+                                {formatEnum(status) || "—"}
                             </Badge>
                         )
                     },
                 },
-                {
-                    accessorKey: "created_at",
-                    header: ({ column }) => <ColumnHeader column={column} title="Created" />,
-                    cell: ({ row }) => {
-                        const val = (row.original as any).created_at
-                        return val ? new Date(val).toLocaleDateString() : "—"
-                    },
-                },
                 actionsColumn(),
             ]}
         />