updates

2026-04-23 14:38:41 +03:00
parent f17dd1486c
commit c0f78c6e18
90 changed files with 10819 additions and 1583 deletions
@@ -0,0 +1,207 @@
+"use client"
+
+import { use, useState } from "react"
+import { useRouter } from "next/navigation"
+import { useQuery, useQueryClient } from "@tanstack/react-query"
+import { useAuthApi } from "@/shared/useApi"
+import { ColumnHeader, DataTable } from "@/shared/data-view/table-view"
+import { Button } from "@/shared/components/ui/button"
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from "@/shared/components/ui/dialog"
+import {
+    DropdownMenu,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuTrigger,
+} from "@/shared/components/ui/dropdown-menu"
+import { confirm } from "@/shared/components/confirm-dialog"
+import { toast } from "sonner"
+import { Ellipsis, Plus } from "lucide-react"
+import type { ColumnDef } from "@tanstack/react-table"
+import { JobCardExpenseItemForm } from "@/modules/job-cards/job-card-expense-item-form"
+import { formatDate } from "@/shared/utils/formatters"
+// TODO: expense items invalidation is not working properly when create new expense item line. Need to investigate why and fix it.
+
+export default function JobCardExpenseItemsPage({
+    params,
+}: {
+    params: Promise<{ id: string }>
+}) {
+    const { id: jobCardId } = use(params)
+    const api = useAuthApi()
+    const queryClient = useQueryClient()
+    const router = useRouter()
+    const queryKey = ["job-card-expense-items", jobCardId]
+
+    const [dialogOpen, setDialogOpen] = useState(false)
+    const [editItem, setEditItem] = useState<any | null>(null)
+
+    const { data, isLoading } = useQuery({
+        queryKey,
+        queryFn: () => api.jobCards.getExpenseItems(jobCardId),
+    })
+
+    const rows = (data as any)?.data ?? []
+
+    const invalidate = () => queryClient.invalidateQueries({ queryKey }).then(() => router.refresh())
+
+    async function handleDelete(row: any) {
+        const confirmed = await confirm({
+            title: "Delete this expense item?",
+            description: `Remove "${row.expense_item?.item_name ?? "this expense item"}" from the job card?`,
+        })
+        if (!confirmed) return
+        const promise = api.jobCards.deleteExpenseItem(jobCardId, row.id)
+        toast.promise(promise, {
+            loading: "Deleting...",
+            success: "Expense item deleted",
+            error: "Failed to delete expense item",
+        })
+        await promise
+        invalidate()
+    }
+
+    const columns: ColumnDef<any>[] = [
+        {
+            accessorKey: "expense_item.item_name",
+            header: ({ column }) => <ColumnHeader column={column} title="Expense Item" />,
+            cell: ({ row }) => {
+                const item = row.original.expense_item
+                return item ? (
+                    <div>
+                        <span className="font-medium">{item.item_name}</span>
+                        {item.sku && (
+                            <span className="ml-2 text-xs text-muted-foreground">{item.sku}</span>
+                        )}
+                    </div>
+                ) : "—"
+            },
+        },
+        {
+            accessorKey: "quantity",
+            header: ({ column }) => <ColumnHeader column={column} title="Qty" />,
+            cell: ({ row }) => row.original.quantity ?? "—",
+        },
+        {
+            accessorKey: "rate",
+            header: ({ column }) => <ColumnHeader column={column} title="Rate" />,
+            cell: ({ row }) => {
+                const val = row.original.rate
+                return val != null ? `$${Number(val).toFixed(2)}` : "—"
+            },
+        },
+        {
+            accessorKey: "discount_amount",
+            header: ({ column }) => <ColumnHeader column={column} title="Discount" />,
+            cell: ({ row }) => {
+                const val = row.original.discount_amount
+                return val != null && val > 0 ? `$${Number(val).toFixed(2)}` : "—"
+            },
+        },
+        {
+            accessorKey: "tax_id",
+            header: ({ column }) => <ColumnHeader column={column} title="Tax" />,
+            cell: ({ row }) => row.original.tax_id ?? "—",
+        },
+        {
+            accessorKey: "department.name",
+            header: ({ column }) => <ColumnHeader column={column} title="Department" />,
+            cell: ({ row }) => row.original.department?.name || "—",
+        },
+        {
+            accessorKey: "description",
+            header: ({ column }) => <ColumnHeader column={column} title="Description" />,
+            cell: ({ row }) => row.original.description || "—",
+        },
+        {
+            accessorKey: "created_at",
+            header: ({ column }) => <ColumnHeader column={column} title="Added" />,
+            cell: ({ row }) => formatDate(row.original.created_at),
+        },
+        {
+            id: "actions",
+            cell: ({ row }) => (
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon">
+                            <Ellipsis className="h-4 w-4" />
+                        </Button>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent align="end">
+                        <DropdownMenuItem
+                            onClick={() => {
+                                setEditItem(row.original)
+                                setDialogOpen(true)
+                            }}
+                        >
+                            Edit
+                        </DropdownMenuItem>
+                        <DropdownMenuItem
+                            className="text-destructive"
+                            onClick={() => handleDelete(row.original)}
+                        >
+                            Delete
+                        </DropdownMenuItem>
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            ),
+        },
+    ]
+
+    return (
+        <div className="flex flex-col gap-4 p-4">
+            <div className="flex justify-end">
+                <Dialog
+                    open={dialogOpen}
+                    onOpenChange={(open) => {
+                        setDialogOpen(open)
+                        if (!open) setEditItem(null)
+                    }}
+                >
+                    <DialogTrigger asChild>
+                        <Button onClick={() => setEditItem(null)}>
+                            <Plus className="me-2 h-4 w-4" />
+                            Add Expense Item
+                        </Button>
+                    </DialogTrigger>
+                    <DialogContent>
+                        <DialogHeader>
+                            <DialogTitle>{editItem ? "Edit Expense Item" : "Add Expense Item"}</DialogTitle>
+                        </DialogHeader>
+                        <JobCardExpenseItemForm
+                            jobCardId={jobCardId}
+                            jobCardExpenseItemId={editItem?.id ?? null}
+                            initialData={editItem}
+                            onSuccess={() => {
+                                setDialogOpen(false)
+                                setEditItem(null)
+                                invalidate()
+                            }}
+                            onCancel={() => {
+                                setDialogOpen(false)
+                                setEditItem(null)
+                            }}
+                        />
+                    </DialogContent>
+                </Dialog>
+            </div>
+
+            <DataTable
+                columns={columns}
+                data={rows}
+                pagination={{
+                    page: 1,
+                    pageSize: rows.length || 15,
+                    pageCount: 1,
+                    total: rows.length,
+                }}
+                isLoading={isLoading}
+            />
+        </div>
+    )
+}