feat: add template checkpoint edit dialog and vendor management components

- Implemented TemplateCheckpointEditDialog for creating and editing inspection checkpoints.
- Added VendorActions component for managing vendor actions including edit, activate/deactivate, and delete.
- Created VendorContext for managing vendor state across components.
- Developed VendorGeneralInfo component to display detailed vendor information.
- Introduced AedSymbol and Money components for consistent currency representation.
- Added PromptDialog for user input prompts throughout the application.
- Implemented RelationLink component for unified related-data display in CRUD tables.
- Created InspectionTemplatesClient for API interactions related to inspection templates.
This commit is contained in:
2026-05-18 12:08:42 +04:00
parent 54d11f01b4
commit 4bfd8c84a9
111 changed files with 5002 additions and 1047 deletions
@@ -1,17 +1,17 @@
"use client"
import Link from "next/link"
import { UserIcon } from "lucide-react"
import { Car, UserIcon } from "lucide-react"
import { useRouter } 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"
import { InvoiceForm } from "@/modules/invoices/invoice-form"
import { Badge } from "@/shared/components/ui/badge"
import { Button } from "@/shared/components/ui/button"
import { formatCurrency, formatDate, formatEnum } from "@/shared/utils/formatters"
import { INVOICE_ROUTES } from "@garage/api"
import { formatDate, formatEnum } from "@/shared/utils/formatters"
import { INVOICE_ROUTES, InvoiceStatus } from "@garage/api"
import type { InvoicesClient } from "@garage/api"
import { Money } from "@/shared/components/money"
import { RelationLink } from "@/shared/components/relation-link"
type InvoiceItem = {
id: number
@@ -86,6 +86,9 @@ export default function InvoicesPage() {
<ResourcePage<InvoicesClient>
pageTitle="Invoices"
routeKey={INVOICE_ROUTES.INDEX}
searchable
searchPlaceholder="Search invoices..."
statusFilter={{ statuses: InvoiceStatus }}
getClient={(api) => api.invoices}
onRowClick={(row) => router.push(`/sales/invoice/${(row as any).id}`)}
headerProps={({ selectedItem, invalidateQuery }) => ({
@@ -137,29 +140,13 @@ export default function InvoicesPage() {
header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
cell: ({ row }) => {
const item = row.original as unknown as InvoiceItem
const customerLabel = getCustomerLabel(item)
const phone = item.customer?.phone
return (
<div className="min-w-[190px]">
{item.customer?.id ? (
<Button variant="outline" asChild size="sm" onClick={(e) => e.stopPropagation()}>
<Link href={`/sales/customers/${item.customer.id}`}>
<UserIcon /> {customerLabel}
{phone && (
<span className="ms-1 text-muted-foreground">· {phone}</span>
)}
</Link>
</Button>
) : (
<p className="font-medium leading-none">
{customerLabel}
{phone && (
<span className="ms-1 text-muted-foreground">· {phone}</span>
)}
</p>
)}
</div>
<RelationLink
href={item.customer?.id ? `/sales/customers/${item.customer.id}` : null}
icon={UserIcon}
label={getCustomerLabel(item)}
meta={item.customer?.phone}
/>
)
},
},
@@ -168,14 +155,14 @@ export default function InvoicesPage() {
header: ({ column }) => <ColumnHeader column={column} title="Vehicle" />,
cell: ({ row }) => {
const item = row.original as unknown as InvoiceItem
const vehicleId = (item.vehicle as any)?.id
return (
<div className="min-w-[220px]">
<p className="font-medium leading-none">{getVehicleLabel(item)}</p>
<p className="mt-1 text-xs text-muted-foreground">
{item.vehicle?.license_plate || "—"}
</p>
</div>
<RelationLink
href={vehicleId ? `/sales/vehicles/${vehicleId}` : null}
icon={Car}
label={getVehicleLabel(item)}
meta={item.vehicle?.license_plate}
/>
)
},
},
@@ -242,10 +229,10 @@ export default function InvoicesPage() {
return (
<div className="min-w-[150px]">
<p className="font-medium leading-none">
Total: {formatCurrency(item.total ?? 0)}
Total: {<Money value={item.total ?? 0} />}
</p>
<p className="mt-1 text-xs text-muted-foreground">
Due: {formatCurrency(item.balance_due ?? 0)}
Due: {<Money value={item.balance_due ?? 0} />}
</p>
</div>
)