humam/garage-erp
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
humam kerdiah 2026-05-19 17:56:39 +04:00
parent 2d6e3c5734
commit 4f0a2f790f
56 changed files with 1220 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
apps/dashboard/app/(authenticated)/calendar/appointment/list/page.tsx
View File

@ -10,6 +10,7 @@ import type { AppointmentsClient } from "@garage/api"
import { CalendarCheck2Icon, ClipboardListIcon, ClockIcon } from "lucide-react" import { CalendarCheck2Icon, ClipboardListIcon, ClockIcon } from "lucide-react"
import { Badge } from "@/shared/components/ui/badge" import { Badge } from "@/shared/components/ui/badge"
import { RelationLink } from "@/shared/components/relation-link" import { RelationLink } from "@/shared/components/relation-link"
import { formatEnum } from "@/shared/utils/formatters"
const STATUS_COLORS: Record<string, string> = { const STATUS_COLORS: Record<string, string> = {
requested: "bg-yellow-100 text-yellow-800", requested: "bg-yellow-100 text-yellow-800",
@ -80,7 +81,7 @@ export default function AppointmentsPage() {
const colorClass = STATUS_COLORS[status] ?? "bg-gray-100 text-gray-800" const colorClass = STATUS_COLORS[status] ?? "bg-gray-100 text-gray-800"
return ( return (
<Badge className={colorClass}> <Badge className={colorClass}>
{status?.replace("_", " ") ?? "—"} {formatEnum(status)}
</Badge> </Badge>
) )
}, },

100
apps/dashboard/app/(authenticated)/productivity/employees/[id]/attendance/page.tsx Normal file
View File

@ -0,0 +1,100 @@
"use client"
import { use } from "react"
import { ResourcePage } from "@/shared/data-view/resource-page"
import { ColumnHeader } from "@/shared/data-view/table-view"
import { Badge } from "@/shared/components/ui/badge"
import { TIME_SHEET_ROUTES } from "@garage/api"
import type { TimeSheetsClient } from "@garage/api"
import { ClockIcon } from "lucide-react"
const ACTIVITY_VARIANT: Record<string, "default" | "secondary" | "outline"> = {
general: "secondary",
order: "default",
task: "outline",
}
function formatTime(value: unknown) {
if (!value || typeof value !== "string") return "—"
return value.length >= 5 ? value.slice(0, 5) : value
}
function formatDate(value: unknown) {
if (!value || typeof value !== "string") return "—"
const d = new Date(value)
return Number.isNaN(d.getTime()) ? value : d.toLocaleDateString()
}
function formatCost(value: unknown) {
if (value === null || value === undefined) return "—"
const n = Number(value)
if (!Number.isFinite(n)) return "—"
return n.toFixed(2)
}
export default function EmployeeAttendancePage({ params }: { params: Promise<{ id: string }> }) {
const { id: employeeId } = use(params)
return (
<ResourcePage<TimeSheetsClient>
pageTitle="Attendance"
routeKey={TIME_SHEET_ROUTES.INDEX}
getClient={(api) => api.timeSheets}
extraParams={{ employee_id: employeeId }}
header={null}
statusFilter={{
statuses: ["general", "order", "task"],
paramKey: "activity_type",
allLabel: "All",
}}
columns={() => [
{
accessorKey: "date",
header: ({ column }) => <ColumnHeader column={column} title="Date" />,
cell: ({ row }) => (
<div className="flex items-center gap-2">
<ClockIcon className="size-4 text-muted-foreground" />
<span>{formatDate((row.original as any).date)}</span>
</div>
),
},
{
accessorKey: "clock_in",
header: ({ column }) => <ColumnHeader column={column} title="Clock In" />,
cell: ({ row }) => <span className="font-mono text-xs">{formatTime((row.original as any).clock_in)}</span>,
},
{
accessorKey: "clock_out",
header: ({ column }) => <ColumnHeader column={column} title="Clock Out" />,
cell: ({ row }) => <span className="font-mono text-xs">{formatTime((row.original as any).clock_out)}</span>,
},
{
accessorKey: "duration",
header: ({ column }) => <ColumnHeader column={column} title="Duration" />,
cell: ({ row }) => <span className="font-mono text-xs">{formatTime((row.original as any).duration)}</span>,
},
{
accessorKey: "activity_type",
header: ({ column }) => <ColumnHeader column={column} title="Activity" />,
cell: ({ row }) => {
const type = (row.original as any).activity_type ?? "general"
return <Badge variant={ACTIVITY_VARIANT[type] ?? "secondary"}>{type}</Badge>
},
},
{
accessorKey: "calculated_total_cost",
header: ({ column }) => <ColumnHeader column={column} title="Cost" />,
cell: ({ row }) => formatCost((row.original as any).calculated_total_cost),
},
{
accessorKey: "note",
header: ({ column }) => <ColumnHeader column={column} title="Note" />,
cell: ({ row }) => {
const v = (row.original as any).note
return v ? <span className="text-sm">{v}</span> : "—"
},
},
]}
/>
)
}

2
apps/dashboard/app/(authenticated)/productivity/employees/[id]/layout.tsx
View File

@ -28,6 +28,8 @@ export default async function layout(props: {
actions={<EmployeeActions employeeId={id} />} actions={<EmployeeActions employeeId={id} />}
tabs={[ tabs={[
{ href: `/productivity/employees/${id}`, label: 'Details' }, { href: `/productivity/employees/${id}`, label: 'Details' },
{ href: `/productivity/employees/${id}/attendance`, label: 'Attendance' },
{ href: `/productivity/employees/${id}/work-history`, label: 'Work History' },
{ href: `/productivity/employees/${id}/permissions`, label: 'Permissions' }, { href: `/productivity/employees/${id}/permissions`, label: 'Permissions' },
]} ]}
> >

110
apps/dashboard/app/(authenticated)/productivity/employees/[id]/work-history/page.tsx Normal file
View File

@ -0,0 +1,110 @@
"use client"
import { use, useState } from "react"
import { ResourcePage } from "@/shared/data-view/resource-page"
import { ColumnHeader } from "@/shared/data-view/table-view"
import { Badge } from "@/shared/components/ui/badge"
import { Tabs, TabsList, TabsTrigger } from "@/shared/components/ui/tabs"
import { JOB_CARD_ROUTES } from "@garage/api"
import type { JobCardsClient } from "@garage/api"
import { useRouter } from "next/navigation"
import { WrenchIcon } from "lucide-react"
import { formatEnum } from "@/shared/utils/formatters"
const ROLE_PARAM = {
technician: "primary_technician_id",
sales: "sales_person_id",
writer: "service_writer_id",
} as const
type RoleKey = keyof typeof ROLE_PARAM
function formatDate(value: unknown) {
if (!value || typeof value !== "string") return "—"
const d = new Date(value)
return Number.isNaN(d.getTime()) ? value : d.toLocaleDateString()
}
function statusVariant(status: string | undefined): "default" | "secondary" | "outline" | "destructive" {
if (!status) return "secondary"
if (status === "completed" || status === "delivered") return "default"
if (status === "cancelled") return "destructive"
return "outline"
}
export default function EmployeeWorkHistoryPage({ params }: { params: Promise<{ id: string }> }) {
const { id: employeeId } = use(params)
const router = useRouter()
const [role, setRole] = useState<RoleKey>("technician")
const paramKey = ROLE_PARAM[role]
return (
<div className="space-y-3">
<div className="px-4 pt-4">
<Tabs value={role} onValueChange={(v) => setRole(v as RoleKey)}>
<TabsList variant="line">
<TabsTrigger value="technician">As Technician</TabsTrigger>
<TabsTrigger value="sales">As Sales Person</TabsTrigger>
<TabsTrigger value="writer">As Service Writer</TabsTrigger>
</TabsList>
</Tabs>
</div>
<ResourcePage<JobCardsClient>
key={role}
pageTitle="Work History"
routeKey={JOB_CARD_ROUTES.INDEX}
searchable
searchPlaceholder="Search by job number, plate, customer..."
getClient={(api) => api.jobCards}
extraParams={{ [paramKey]: employeeId }}
header={null}
onRowClick={(row) => router.push(`/sales/job-cards/${(row as any).id}`)}
columns={() => [
{
accessorKey: "order_number",
header: ({ column }) => <ColumnHeader column={column} title="Job #" />,
cell: ({ row }) => (
<div className="flex items-center gap-2">
<WrenchIcon className="size-4 text-muted-foreground" />
<span className="font-mono text-xs">{(row.original as any).order_number ?? "—"}</span>
</div>
),
},
{
accessorKey: "customer",
header: ({ column }) => <ColumnHeader column={column} title="Customer" />,
cell: ({ row }) => {
const c = (row.original as any).customer
if (!c) return "—"
return `${c.first_name ?? ""} ${c.last_name ?? ""}`.trim() || c.email || "—"
},
},
{
accessorKey: "vehicle",
header: ({ column }) => <ColumnHeader column={column} title="Vehicle" />,
cell: ({ row }) => {
const v = (row.original as any).vehicle
if (!v) return "—"
const display = `${v.make ?? ""} ${v.model ?? ""}`.trim()
return display || v.license_plate || "—"
},
},
{
accessorKey: "status",
header: ({ column }) => <ColumnHeader column={column} title="Status" />,
cell: ({ row }) => {
const s = (row.original as any).status
return s ? <Badge variant={statusVariant(s)}>{formatEnum(s)}</Badge> : "—"
},
},
{
accessorKey: "created_at",
header: ({ column }) => <ColumnHeader column={column} title="Opened" />,
cell: ({ row }) => formatDate((row.original as any).created_at),
},
]}
/>
</div>
)
}

84
apps/dashboard/app/(authenticated)/productivity/employees/page.tsx
View File

@ -1,15 +1,45 @@
"use client" "use client"
import { useMemo, useState } from "react"
import { ResourcePage } from "@/shared/data-view/resource-page" import { ResourcePage } from "@/shared/data-view/resource-page"
import { ColumnHeader } from "@/shared/data-view/table-view" import { ColumnHeader } from "@/shared/data-view/table-view"
import FormDialog from "@/shared/components/form-dialog" import FormDialog from "@/shared/components/form-dialog"
import { EmployeeForm } from "@/modules/employees/employee-form" import { EmployeeForm } from "@/modules/employees/employee-form"
import { EMPLOYEE_ROUTES } from "@garage/api" import { EMPLOYEE_ROUTES } from "@garage/api"
import type { EmployeesClient } from "@garage/api" import type { EmployeesClient } from "@garage/api"
import { Avatar, AvatarFallback } from "@/shared/components/ui/avatar"
import { Badge } from "@/shared/components/ui/badge"
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/shared/components/ui/select"
import { useRouter } from "next/navigation" import { useRouter } from "next/navigation"
import { formatEnum } from "@/shared/utils/formatters"
const TYPE_OPTIONS = [
{ value: "all", label: "All types" },
{ value: "employee", label: "Employee" },
{ value: "sales_person", label: "Sales Person" },
]
function initialsOf(first?: string | null, last?: string | null) {
const f = (first ?? "").trim()[0] ?? ""
const l = (last ?? "").trim()[0] ?? ""
return (f + l).toUpperCase() || "?"
}
export default function EmployeesPage() { export default function EmployeesPage() {
const router = useRouter() const router = useRouter()
const [typeFilter, setTypeFilter] = useState<string>("all")
const extraParams = useMemo(() => {
if (typeFilter === "all") return undefined
return { type: typeFilter }
}, [typeFilter])
return ( return (
<ResourcePage<EmployeesClient> <ResourcePage<EmployeesClient>
pageTitle="Employees" pageTitle="Employees"
@ -17,8 +47,25 @@ export default function EmployeesPage() {
searchable searchable
searchPlaceholder="Search employees..." searchPlaceholder="Search employees..."
statusFilter={{ statuses: ["active", "inactive"] }} statusFilter={{ statuses: ["active", "inactive"] }}
extraParams={extraParams}
getClient={(api) => api.employees} getClient={(api) => api.employees}
onRowClick={(row) => router.push(`/productivity/employees/${(row as any).id}`)} onRowClick={(row) => router.push(`/productivity/employees/${(row as any).id}`)}
tableHeader={() => (
<div className="flex items-center gap-2">
<Select value={typeFilter} onValueChange={setTypeFilter}>
<SelectTrigger className="w-44">
<SelectValue placeholder="All types" />
</SelectTrigger>
<SelectContent>
{TYPE_OPTIONS.map((o) => (
<SelectItem key={o.value} value={o.value}>
{o.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
)}
headerProps={({ selectedItem, invalidateQuery }) => ({ headerProps={({ selectedItem, invalidateQuery }) => ({
actions: ( actions: (
<FormDialog title="Employee"> <FormDialog title="Employee">
@ -37,8 +84,16 @@ export default function EmployeesPage() {
accessorKey: "first_name", accessorKey: "first_name",
header: ({ column }) => <ColumnHeader column={column} title="Name" />, header: ({ column }) => <ColumnHeader column={column} title="Name" />,
cell: ({ row }) => { cell: ({ row }) => {
const { first_name, last_name } = row.original const r = row.original as any
return `${first_name ?? ""} ${last_name ?? ""}`.trim() const fullName = `${r.first_name ?? ""} ${r.last_name ?? ""}`.trim() || "—"
return (
<div className="flex items-center gap-2">
<Avatar size="sm">
<AvatarFallback>{initialsOf(r.first_name, r.last_name)}</AvatarFallback>
</Avatar>
<span className="font-medium">{fullName}</span>
</div>
)
}, },
}, },
{ {
@ -48,15 +103,32 @@ export default function EmployeesPage() {
{ {
accessorKey: "phone", accessorKey: "phone",
header: ({ column }) => <ColumnHeader column={column} title="Phone" />, header: ({ column }) => <ColumnHeader column={column} title="Phone" />,
cell: ({ row }) => (row.original as any).phone ?? "—",
}, },
{ {
accessorKey: "position", accessorKey: "type",
header: ({ column }) => <ColumnHeader column={column} title="Position" />, header: ({ column }) => <ColumnHeader column={column} title="Type" />,
cell: ({ row }) => {
const t = (row.original as any).type
if (!t) return "—"
return <Badge variant="outline">{t === "sales_person" ? "Sales Person" : "Employee"}</Badge>
},
}, },
{ {
accessorKey: "department", accessorKey: "department",
header: ({ column }) => <ColumnHeader column={column} title="Department" />, header: ({ column }) => <ColumnHeader column={column} title="Department" />,
cell: ({ row }) => (row.original as any).department?.name ?? "—", cell: ({ row }) => {
const d = (row.original as any).department?.name
return d ? <Badge variant="secondary">{d}</Badge> : "—"
},
},
{
accessorKey: "role",
header: ({ column }) => <ColumnHeader column={column} title="Role" />,
cell: ({ row }) => {
const r = (row.original as any).role?.name
return r ? <Badge variant="secondary">{r}</Badge> : "—"
},
}, },
{ {
accessorKey: "status", accessorKey: "status",
@ -65,7 +137,7 @@ export default function EmployeesPage() {
const status = row.original.status const status = row.original.status
return ( return (
<span className={status === "active" ? "text-green-600" : "text-red-600"}> <span className={status === "active" ? "text-green-600" : "text-red-600"}>
{status} {formatEnum(status)}
</span> </span>
) )
}, },

18
apps/dashboard/app/(authenticated)/purchase/bill/page.tsx
View File

@ -8,14 +8,16 @@ import { ColumnHeader } from "@/shared/data-view/table-view"
import { BillForm } from "@/modules/bills/bill-form" import { BillForm } from "@/modules/bills/bill-form"
import { BILL_ROUTES, BillStatus } from "@garage/api" import { BILL_ROUTES, BillStatus } from "@garage/api"
import type { BillsClient } from "@garage/api" import type { BillsClient } from "@garage/api"
import { formatDate } from "@/shared/utils/formatters" import { formatDate, formatEnum } from "@/shared/utils/formatters"
import { getFullName } from "@/shared/utils/getFullName" import { getFullName } from "@/shared/utils/getFullName"
import { Money } from "@/shared/components/money" import { Money } from "@/shared/components/money"
import { RelationLink } from "@/shared/components/relation-link" import { RelationLink } from "@/shared/components/relation-link"
import { Building2 } from "lucide-react" import { Building2, Printer } from "lucide-react"
import { useDocumentPrint } from "@/shared/hooks/use-document-print"
export default function BillsPage() { export default function BillsPage() {
const router = useRouter() const router = useRouter()
const { print, isPrinting } = useDocumentPrint()
return ( return (
<ResourcePage<BillsClient> <ResourcePage<BillsClient>
@ -96,12 +98,20 @@ export default function BillsPage() {
const status = (row.original as any).status const status = (row.original as any).status
return ( return (
<Badge variant={status === "paid" ? "default" : "secondary"}> <Badge variant={status === "paid" ? "default" : "secondary"}>
{status?.replace(/_/g, " ") || "—"} {formatEnum(status)}
</Badge> </Badge>
) )
}, },
}, },
actionsColumn(), actionsColumn({
extraItems: (row) => [
{
label: isPrinting ? "Printing..." : "Print",
icon: Printer,
onClick: (r) => print("bill", String(r.id), "print"),
},
],
}),
]} ]}
/> />
) )

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

@ -11,11 +11,13 @@ import { useRouter } from "next/navigation"
import { formatDate, formatEnum } from "@/shared/utils/formatters" import { formatDate, formatEnum } from "@/shared/utils/formatters"
import { Money } from "@/shared/components/money" import { Money } from "@/shared/components/money"
import { RelationLink } from "@/shared/components/relation-link" import { RelationLink } from "@/shared/components/relation-link"
import { Building2 } from "lucide-react" import { Building2, Printer } from "lucide-react"
import { getFullName } from "@/shared/utils/getFullName" import { getFullName } from "@/shared/utils/getFullName"
import { useDocumentPrint } from "@/shared/hooks/use-document-print"
export default function ExpensesPage() { export default function ExpensesPage() {
const router = useRouter() const router = useRouter()
const { print, isPrinting } = useDocumentPrint()
return ( return (
<ResourcePage<ExpensesClient> <ResourcePage<ExpensesClient>
pageTitle="Expenses" pageTitle="Expenses"
@ -99,7 +101,15 @@ export default function ExpensesPage() {
) )
}, },
}, },
actionsColumn(), actionsColumn({
extraItems: (row) => [
{
label: isPrinting ? "Printing..." : "Print",
icon: Printer,
onClick: (r) => print("expense", String(r.id), "print"),
},
],
}),
]} ]}
/> />
) )

34
apps/dashboard/app/(authenticated)/purchase/payments-made/[id]/layout.tsx Normal file
View File

@ -0,0 +1,34 @@
import { DashboardDetailsPage } from '@/base/components/layout/dashboard'
import { getServerApi } from '@garage/api/server'
import { PaymentMadeActions } from '@/modules/payment-mades/payment-made-actions'
import { BanknoteIcon } from 'lucide-react'
import React from 'react'
export default async function PaymentMadeDetailLayout(props: {
params: Promise<{ id: string }>
children: React.ReactNode
}) {
const { id } = await props.params
const api = await getServerApi()
const payment = await api.paymentMades.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="/purchase/payments-made"
actions={<PaymentMadeActions paymentId={id} />}
tabs={[
{
href: `/purchase/payments-made/${id}`,
label: 'Details',
},
]}
>
{props.children}
</DashboardDetailsPage>
)
}

119
apps/dashboard/app/(authenticated)/purchase/payments-made/[id]/page.tsx Normal file
View File

@ -0,0 +1,119 @@
import { getServerApi } from '@garage/api/server'
import DashboardPage from '@/base/components/layout/dashboard/dashboard-page'
import {
BadgeDollarSignIcon,
BriefcaseIcon,
Building2Icon,
CalendarIcon,
CreditCardIcon,
HashIcon,
} from 'lucide-react'
export default async function PaymentMadeDetailPage(props: { params: Promise<{ id: string }> }) {
const { id } = await props.params
const api = await getServerApi()
const payment = await api.paymentMades.show(id)
const data = (payment as any)?.data ?? payment
if (!data) {
return <div className="text-muted-foreground">Payment not found.</div>
}
const amount = data.payment_made != null
? Number(data.payment_made).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 vendorLabel = data.vendor?.company_name
?? (data.vendor?.first_name ? `${data.vendor.first_name} ${data.vendor.last_name ?? ''}`.trim() : null)
?? data.vendor_name
?? (data.employee?.first_name ? `${data.employee.first_name} ${data.employee.last_name ?? ''}`.trim() : null)
?? data.employee_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">
<Building2Icon className="size-5 text-muted-foreground" />
<div>
<p className="text-xs text-muted-foreground">Vendor / Employee</p>
<p className="font-medium">{vendorLabel}</p>
</div>
</div>
<div className="flex items-center gap-3 rounded-lg border p-4">
<BriefcaseIcon className="size-5 text-muted-foreground" />
<div>
<p className="text-xs text-muted-foreground">Payment For</p>
<p className="font-medium capitalize">{data.payment_for || '—'}</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</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.payment_reference && (
<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">Reference</p>
<p className="font-medium">{data.payment_reference}</p>
</div>
</div>
)}
{data.paid_through && (
<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">Paid Through</p>
<p className="font-medium">{data.paid_through}</p>
</div>
</div>
)}
{data.notes && (
<div className="sm:col-span-2 lg:col-span-3 rounded-lg border p-4">
<p className="text-xs text-muted-foreground mb-1">Notes</p>
<p className="text-sm">{data.notes}</p>
</div>
)}
</div>
</DashboardPage>
)
}

17
apps/dashboard/app/(authenticated)/purchase/payments-made/page.tsx
View File

@ -1,6 +1,7 @@
"use client" "use client"
import { useState, useRef } from "react" import { useState, useRef } from "react"
import { useRouter } from "next/navigation"
import { useMutation, useQueryClient } from "@tanstack/react-query" import { useMutation, useQueryClient } from "@tanstack/react-query"
import { import {
Paperclip, Paperclip,
@ -36,7 +37,8 @@ import { getFullName } from "@/shared/utils/getFullName"
import { PAYMENT_MADE_ROUTES } from "@garage/api" import { PAYMENT_MADE_ROUTES } from "@garage/api"
import type { PaymentMadesClient } from "@garage/api" import type { PaymentMadesClient } from "@garage/api"
import { RelationLink } from "@/shared/components/relation-link" import { RelationLink } from "@/shared/components/relation-link"
import { Building2 } from "lucide-react" import { Building2, Printer } from "lucide-react"
import { useDocumentPrint } from "@/shared/hooks/use-document-print"
// ── Attachment helpers ── // ── Attachment helpers ──
@ -226,6 +228,8 @@ type PaymentMadeItem = {
} }
export default function PaymentsMadePage() { export default function PaymentsMadePage() {
const router = useRouter()
const { print, isPrinting } = useDocumentPrint()
const [attachmentTarget, setAttachmentTarget] = useState<{ const [attachmentTarget, setAttachmentTarget] = useState<{
id: string id: string
ref: string ref: string
@ -239,6 +243,7 @@ export default function PaymentsMadePage() {
searchable searchable
searchPlaceholder="Search payments..." searchPlaceholder="Search payments..."
getClient={(api) => api.paymentMades} getClient={(api) => api.paymentMades}
onRowClick={(row) => router.push(`/purchase/payments-made/${(row as any).id}`)}
headerProps={({ selectedItem, invalidateQuery }) => ({ headerProps={({ selectedItem, invalidateQuery }) => ({
actions: ( actions: (
<FormDialog title="Record Payment"> <FormDialog title="Record Payment">
@ -393,7 +398,15 @@ export default function PaymentsMadePage() {
) )
}, },
}, },
actionsColumn(), actionsColumn({
extraItems: (row) => [
{
label: isPrinting ? "Printing..." : "Print",
icon: Printer,
onClick: (r) => print("payment_made", String(r.id), "print"),
},
],
}),
]} ]}
/> />

14
apps/dashboard/app/(authenticated)/purchase/purchase-order/page.tsx
View File

@ -8,11 +8,13 @@ import { PurchaseOrderForm } from "@/modules/purchase-orders/purchase-order-form
import { PURCHASE_ORDER_ROUTES } from "@garage/api" import { PURCHASE_ORDER_ROUTES } from "@garage/api"
import type { PurchaseOrdersClient } from "@garage/api" import type { PurchaseOrdersClient } from "@garage/api"
import { RelationLink } from "@/shared/components/relation-link" import { RelationLink } from "@/shared/components/relation-link"
import { Building2 } from "lucide-react" import { Building2, Printer } from "lucide-react"
import { getFullName } from "@/shared/utils/getFullName" import { getFullName } from "@/shared/utils/getFullName"
import { useDocumentPrint } from "@/shared/hooks/use-document-print"
export default function PurchaseOrdersPage() { export default function PurchaseOrdersPage() {
const router = useRouter() const router = useRouter()
const { print, isPrinting } = useDocumentPrint()
return ( return (
<ResourcePage<PurchaseOrdersClient> <ResourcePage<PurchaseOrdersClient>
@ -83,7 +85,15 @@ export default function PurchaseOrdersPage() {
return val ? new Date(val).toLocaleDateString() : "—" return val ? new Date(val).toLocaleDateString() : "—"
}, },
}, },
actionsColumn(), actionsColumn({
extraItems: (row) => [
{
label: isPrinting ? "Printing..." : "Print",
icon: Printer,
onClick: (r) => print("purchase_order", String(r.id), "print"),
},
],
}),
]} ]}
/> />
) )

3
apps/dashboard/app/(authenticated)/purchase/vendor-credit/page.tsx
View File

@ -10,6 +10,7 @@ import type { VendorCreditsClient } from "@garage/api"
import { RelationLink } from "@/shared/components/relation-link" import { RelationLink } from "@/shared/components/relation-link"
import { Building2, FileTextIcon } from "lucide-react" import { Building2, FileTextIcon } from "lucide-react"
import { getFullName } from "@/shared/utils/getFullName" import { getFullName } from "@/shared/utils/getFullName"
import { formatEnum } from "@/shared/utils/formatters"
export default function VendorCreditsPage() { export default function VendorCreditsPage() {
return ( return (
@ -79,7 +80,7 @@ export default function VendorCreditsPage() {
header: ({ column }) => <ColumnHeader column={column} title="Status" />, header: ({ column }) => <ColumnHeader column={column} title="Status" />,
cell: ({ row }) => { cell: ({ row }) => {
const status = (row.original as any).status const status = (row.original as any).status
return <Badge variant={status === "closed" ? "secondary" : "default"}>{status || "—"}</Badge> return <Badge variant={status === "closed" ? "secondary" : "default"}>{formatEnum(status)}</Badge>
}, },
}, },
actionsColumn(), actionsColumn(),

16
apps/dashboard/app/(authenticated)/sales/credit-notes/page.tsx
View File

@ -7,6 +7,9 @@ import FormDialog from "@/shared/components/form-dialog"
import { CreditNoteForm } from "@/modules/credit-notes/credit-note-form" import { CreditNoteForm } from "@/modules/credit-notes/credit-note-form"
import { CREDIT_NOTE_ROUTES, CreditNoteStatus } from "@garage/api" import { CREDIT_NOTE_ROUTES, CreditNoteStatus } from "@garage/api"
import type { CreditNotesClient } from "@garage/api" import type { CreditNotesClient } from "@garage/api"
import { formatEnum } from "@/shared/utils/formatters"
import { Printer } from "lucide-react"
import { useDocumentPrint } from "@/shared/hooks/use-document-print"
type CreditNoteItem = { type CreditNoteItem = {
id: number id: number
@ -20,6 +23,7 @@ type CreditNoteItem = {
export default function CreditNotesPage() { export default function CreditNotesPage() {
const router = useRouter() const router = useRouter()
const { print, isPrinting } = useDocumentPrint()
return ( return (
<ResourcePage<CreditNotesClient> <ResourcePage<CreditNotesClient>
@ -66,7 +70,7 @@ export default function CreditNotesPage() {
} }
return ( return (
<span className={colorMap[status ?? ""] ?? ""}> <span className={colorMap[status ?? ""] ?? ""}>
{status ? status.charAt(0).toUpperCase() + status.slice(1) : "—"} {formatEnum(status)}
</span> </span>
) )
}, },
@ -75,7 +79,15 @@ export default function CreditNotesPage() {
accessorKey: "date", accessorKey: "date",
header: ({ column }) => <ColumnHeader column={column} title="Date" />, header: ({ column }) => <ColumnHeader column={column} title="Date" />,
}, },
actionsColumn(), actionsColumn({
extraItems: (row) => [
{
label: isPrinting ? "Printing..." : "Print",
icon: Printer,
onClick: (r) => print("credit_note", String(r.id), "print"),
},
],
}),
]} ]}
/> />
) )

14
apps/dashboard/app/(authenticated)/sales/estimates/page.tsx
View File

@ -7,7 +7,8 @@ import FormDialog from '@/shared/components/form-dialog'
import { EstimateForm } from '@/modules/estimates/estimate-form' import { EstimateForm } from '@/modules/estimates/estimate-form'
import { ESTIMATE_ROUTES } from '@garage/api' import { ESTIMATE_ROUTES } from '@garage/api'
import type { EstimatesClient } from '@garage/api' import type { EstimatesClient } from '@garage/api'
import { Car, FileTextIcon, UserIcon } from 'lucide-react' import { Car, FileTextIcon, Printer, UserIcon } from 'lucide-react'
import { useDocumentPrint } from '@/shared/hooks/use-document-print'
import Link from 'next/link' import Link from 'next/link'
import { formatDate } from '@/shared/utils/formatters' import { formatDate } from '@/shared/utils/formatters'
import { getVehicleLabel } from '@/modules/vehicles/utils/getVehicleLabel' import { getVehicleLabel } from '@/modules/vehicles/utils/getVehicleLabel'
@ -16,6 +17,7 @@ import { RelationLink } from '@/shared/components/relation-link'
export default function EstimatesPage() { export default function EstimatesPage() {
const router = useRouter() const router = useRouter()
const { print, isPrinting } = useDocumentPrint()
return ( return (
<ResourcePage<EstimatesClient> <ResourcePage<EstimatesClient>
pageTitle="Estimates" pageTitle="Estimates"
@ -109,7 +111,15 @@ export default function EstimatesPage() {
return item.created_at ? new Date(item.created_at).toLocaleDateString() : "—" return item.created_at ? new Date(item.created_at).toLocaleDateString() : "—"
}, },
}, },
actionsColumn(), actionsColumn({
extraItems: (row) => [
{
label: isPrinting ? "Printing..." : "Print",
icon: Printer,
onClick: (r) => print("estimate", String(r.id), "print"),
},
],
}),
]} ]}
/> />
) )

14
apps/dashboard/app/(authenticated)/sales/invoice/page.tsx
View File

@ -1,7 +1,8 @@
"use client" "use client"
import { Car, UserIcon } from "lucide-react" import { Car, Printer, UserIcon } from "lucide-react"
import { useRouter } from "next/navigation" import { useRouter } from "next/navigation"
import { useDocumentPrint } from "@/shared/hooks/use-document-print"
import { ResourcePage } from "@/shared/data-view/resource-page" import { ResourcePage } from "@/shared/data-view/resource-page"
import { ColumnHeader } from "@/shared/data-view/table-view" import { ColumnHeader } from "@/shared/data-view/table-view"
import FormDialog from "@/shared/components/form-dialog" import FormDialog from "@/shared/components/form-dialog"
@ -81,6 +82,7 @@ function getDueMeta(dueDate?: string) {
export default function InvoicesPage() { export default function InvoicesPage() {
const router = useRouter() const router = useRouter()
const { print, isPrinting } = useDocumentPrint()
return ( return (
<ResourcePage<InvoicesClient> <ResourcePage<InvoicesClient>
@ -238,7 +240,15 @@ export default function InvoicesPage() {
) )
}, },
}, },
actionsColumn(), actionsColumn({
extraItems: (row) => [
{
label: isPrinting ? "Printing..." : "Print",
icon: Printer,
onClick: (r) => print("invoice", String(r.id), "print"),
},
],
}),
]} ]}
/> />
) )

3
apps/dashboard/app/(authenticated)/sales/job-cards/[id]/appointments/page.tsx
View File

@ -14,6 +14,7 @@ import { Badge } from "@/shared/components/ui/badge"
import { useJobCard } from "@/modules/job-cards/job-card-context" import { useJobCard } from "@/modules/job-cards/job-card-context"
import { getFullName } from "@/shared/utils/getFullName" import { getFullName } from "@/shared/utils/getFullName"
import { getVehicleLabel } from "@/modules/vehicles/utils/getVehicleLabel" import { getVehicleLabel } from "@/modules/vehicles/utils/getVehicleLabel"
import { formatEnum } from "@/shared/utils/formatters"
const STATUS_COLORS: Record<string, string> = { const STATUS_COLORS: Record<string, string> = {
requested: "bg-yellow-100 text-yellow-800", requested: "bg-yellow-100 text-yellow-800",
@ -125,7 +126,7 @@ export default function JobCardAppointmentsPage({
const colorClass = STATUS_COLORS[status] ?? "bg-gray-100 text-gray-800" const colorClass = STATUS_COLORS[status] ?? "bg-gray-100 text-gray-800"
return ( return (
<Badge className={colorClass}> <Badge className={colorClass}>
{status?.replace("_", " ") ?? "—"} {formatEnum(status)}
</Badge> </Badge>
) )
}, },

3
apps/dashboard/app/(authenticated)/sales/job-cards/[id]/bills/page.tsx
View File

@ -12,6 +12,7 @@ import { useJobCard } from "@/modules/job-cards/job-card-context"
import { RelationLink } from "@/shared/components/relation-link" import { RelationLink } from "@/shared/components/relation-link"
import { Building2, FileTextIcon } from "lucide-react" import { Building2, FileTextIcon } from "lucide-react"
import { getFullName } from "@/shared/utils/getFullName" import { getFullName } from "@/shared/utils/getFullName"
import { formatEnum } from "@/shared/utils/formatters"
export default function JobCardBillsPage({ export default function JobCardBillsPage({
params, params,
@ -102,7 +103,7 @@ export default function JobCardBillsPage({
header: ({ column }) => <ColumnHeader column={column} title="Status" />, header: ({ column }) => <ColumnHeader column={column} title="Status" />,
cell: ({ row }) => { cell: ({ row }) => {
const status = (row.original as any).status const status = (row.original as any).status
return <Badge variant={status === "paid" ? "default" : "secondary"}>{status || "—"}</Badge> return <Badge variant={status === "paid" ? "default" : "secondary"}>{formatEnum(status)}</Badge>
}, },
}, },
actionsColumn(), actionsColumn(),

14
apps/dashboard/app/(authenticated)/sales/job-cards/page.tsx
View File

@ -6,7 +6,8 @@ import FormDialog from '@/shared/components/form-dialog'
import { JobCardForm } from '@/modules/job-cards/job-card-form' import { JobCardForm } from '@/modules/job-cards/job-card-form'
import { JOB_CARD_ROUTES, JobCardStatus } from '@garage/api' import { JOB_CARD_ROUTES, JobCardStatus } from '@garage/api'
import type { JobCardsClient } from '@garage/api' import type { JobCardsClient } from '@garage/api'
import { ClipboardListIcon } from 'lucide-react' import { ClipboardListIcon, Printer } from 'lucide-react'
import { useDocumentPrint } from '@/shared/hooks/use-document-print'
import { Badge } from '@/shared/components/ui/badge' import { Badge } from '@/shared/components/ui/badge'
import { useRouter } from 'next/navigation' import { useRouter } from 'next/navigation'
import { formatDate, formatEnum, formatNumber } from '@/shared/utils/formatters' import { formatDate, formatEnum, formatNumber } from '@/shared/utils/formatters'
@ -35,6 +36,7 @@ const statusColorMap: Record<string, string> = {
export default function JobCardsPage() { export default function JobCardsPage() {
const router = useRouter() const router = useRouter()
const filter = useFilterParams(jobCardFilterConfig) const filter = useFilterParams(jobCardFilterConfig)
const { print, isPrinting } = useDocumentPrint()
return ( return (
<> <>
@ -117,7 +119,15 @@ export default function JobCardsPage() {
) )
}, },
}, },
actionsColumn(), actionsColumn({
extraItems: (row) => [
{
label: isPrinting ? "Printing..." : "Print",
icon: Printer,
onClick: (r) => print("job_card", String(r.id), "print"),
},
],
}),
]} ]}
/> />

34
apps/dashboard/app/(authenticated)/sales/payment-received/[id]/layout.tsx Normal file
View File

@ -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>
)
}

97
apps/dashboard/app/(authenticated)/sales/payment-received/[id]/page.tsx Normal file
View File

@ -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>
)
}

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

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

4
apps/dashboard/config/navGroups.tsx
View File

@ -146,8 +146,8 @@ export const navGroups: NavGroup[] = [
{ title: "Time Sheets", href: "/productivity/timesheet", icon: <ClockIcon /> }, { title: "Time Sheets", href: "/productivity/timesheet", icon: <ClockIcon /> },
// { title: "Payroll", href: "/productivity/payroll", icon: <WalletIcon /> }, // { title: "Payroll", href: "/productivity/payroll", icon: <WalletIcon /> },
// { title: "Payments Made", href: "/productivity/employee-payments-made", icon: <HandCoinsIcon /> }, // { title: "Payments Made", href: "/productivity/employee-payments-made", icon: <HandCoinsIcon /> },
// { title: "Shop Calendars", href: "/productivity/shop-calendars", icon: <CalendarDaysIcon /> }, { title: "Shop Calendars", href: "/productivity/shop-calendars", icon: <CalendarDaysIcon /> },
// { title: "Shop Timing", href: "/productivity/shop-timings", icon: <Clock3Icon /> }, { title: "Shop Timing", href: "/productivity/shop-timings", icon: <Clock3Icon /> },
{ title: "Holidays", href: "/productivity/holidays", icon: <CalendarIcon /> }, { title: "Holidays", href: "/productivity/holidays", icon: <CalendarIcon /> },
{ title: "Tasks", href: "/productivity/tasks", icon: <ListTodoIcon /> }, { title: "Tasks", href: "/productivity/tasks", icon: <ListTodoIcon /> },
], ],

14
apps/dashboard/cypress/fixtures/document-print.json Normal file
View File

@ -0,0 +1,14 @@
{
"list_pages": {
"inspection": { "url": "/sales/inspections", "type": "inspection", "api": "/api/inspections" },
"estimate": { "url": "/sales/estimates", "type": "estimate", "api": "/api/estimates" },
"job_card": { "url": "/sales/job-cards", "type": "job_card", "api": "/api/job-cards" },
"invoice": { "url": "/sales/invoice", "type": "invoice", "api": "/api/invoices" },
"payment_received": { "url": "/sales/payment-received", "type": "payment_received", "api": "/api/payment-recieved" },
"expense": { "url": "/purchase/expense", "type": "expense", "api": "/api/expenses" },
"purchase_order": { "url": "/purchase/purchase-order", "type": "purchase_order", "api": "/api/purchase-orders" },
"bill": { "url": "/purchase/bill", "type": "bill", "api": "/api/bills" },
"payment_made": { "url": "/purchase/payments-made", "type": "payment_made", "api": "/api/payment-mades" },
"credit_note": { "url": "/sales/credit-notes", "type": "credit_note", "api": "/api/credit-notes" }
}
}

3
apps/dashboard/modules/appointments/appointment-actions.tsx
View File

@ -19,6 +19,7 @@ import { useQueryClient } from "@tanstack/react-query"
import { APPOINTMENT_ROUTES } from "@garage/api" import { APPOINTMENT_ROUTES } from "@garage/api"
import { useFormDialog } from "@/shared/components/form-dialog" import { useFormDialog } from "@/shared/components/form-dialog"
import { AppointmentForm } from "./appointment-form" import { AppointmentForm } from "./appointment-form"
import { formatEnum } from "@/shared/utils/formatters"
type AppointmentActionsProps = { type AppointmentActionsProps = {
appointmentId: string appointmentId: string
@ -50,7 +51,7 @@ export function AppointmentActions({ appointmentId, currentStatus, jobCardId }:
setIsLoading(true) setIsLoading(true)
try { try {
await api.appointments.changeStatus(appointmentId, { status } as any) await api.appointments.changeStatus(appointmentId, { status } as any)
toast.success(`Status updated to "${status}".`) toast.success(`Status updated to "${formatEnum(status)}".`)
queryClient.invalidateQueries({ queryKey: [APPOINTMENT_ROUTES.INDEX] }) queryClient.invalidateQueries({ queryKey: [APPOINTMENT_ROUTES.INDEX] })
router.refresh() router.refresh()
} catch { } catch {

3
apps/dashboard/modules/appointments/appointment-general-info.tsx
View File

@ -15,6 +15,7 @@ import Link from "next/link"
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card" import { Card, CardContent, CardHeader, CardTitle } from "@/shared/components/ui/card"
import { Badge } from "@/shared/components/ui/badge" import { Badge } from "@/shared/components/ui/badge"
import { Button } from "@/shared/components/ui/button" import { Button } from "@/shared/components/ui/button"
import { formatEnum } from "@/shared/utils/formatters"
type AppointmentData = { type AppointmentData = {
id?: number id?: number
@ -89,7 +90,7 @@ export function AppointmentGeneralInfo({ appointment }: AppointmentGeneralInfoPr
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{appointment.status && ( {appointment.status && (
<Badge className={statusClass}> <Badge className={statusClass}>
{appointment.status.replace("_", " ")} {formatEnum(appointment.status)}
</Badge> </Badge>
)} )}
</div> </div>

8
apps/dashboard/modules/bills/bill-actions.tsx
View File

@ -11,11 +11,12 @@ import {
DropdownMenuItem, DropdownMenuItem,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/shared/components/ui/dropdown-menu" } from "@/shared/components/ui/dropdown-menu"
import { Ellipsis, Pencil, Trash2, Share2 } from "lucide-react" import { Ellipsis, Pencil, Printer, Trash2, Share2 } from "lucide-react"
import { useState } from "react" import { useState } from "react"
import { useFormDialog } from "@/shared/components/form-dialog" import { useFormDialog } from "@/shared/components/form-dialog"
import { BillForm } from "./bill-form" import { BillForm } from "./bill-form"
import { ShareDocumentDialog } from "@/shared/components/share-document-dialog" import { ShareDocumentDialog } from "@/shared/components/share-document-dialog"
import { useDocumentPrint } from "@/shared/hooks/use-document-print"
type BillActionsProps = { type BillActionsProps = {
billId: string billId: string
@ -25,6 +26,7 @@ export function BillActions({ billId }: BillActionsProps) {
const api = useAuthApi() const api = useAuthApi()
const router = useRouter() const router = useRouter()
const editDialog = useFormDialog("bill-details-edit") const editDialog = useFormDialog("bill-details-edit")
const { print, isPrinting } = useDocumentPrint()
const [shareOpen, setShareOpen] = useState(false) const [shareOpen, setShareOpen] = useState(false)
const handleDelete = async () => { const handleDelete = async () => {
@ -45,6 +47,10 @@ export function BillActions({ billId }: BillActionsProps) {
<Pencil className="size-4" /> <Pencil className="size-4" />
Edit Edit
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem onClick={() => print("bill", billId, "print")} disabled={isPrinting}>
<Printer className="size-4" />
{isPrinting ? "Printing..." : "Print"}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setShareOpen(true)}> <DropdownMenuItem onClick={() => setShareOpen(true)}>
<Share2 className="size-4" /> <Share2 className="size-4" />
Share Share

8
apps/dashboard/modules/bills/bill-status-badge.tsx
View File

@ -1,6 +1,6 @@
"use client" "use client"
import { BillStatus } from "@garage/api" import { BillStatus, parseApiError } from "@garage/api"
import { Badge, badgeVariants } from "@/shared/components/ui/badge" import { Badge, badgeVariants } from "@/shared/components/ui/badge"
import { import {
Select, Select,
@ -60,7 +60,7 @@ export default function BillStatusBadge({ bill }: BillStatusBadgeProps) {
toast.success("Bill status updated") toast.success("Bill status updated")
router.refresh() router.refresh()
} catch (error) { } catch (error) {
toast.error("Failed to update bill status") toast.error(parseApiError(error, "Failed to update bill status"))
} finally { } finally {
setIsLoading(false) setIsLoading(false)
} }
@ -71,7 +71,9 @@ export default function BillStatusBadge({ bill }: BillStatusBadgeProps) {
<SelectTrigger <SelectTrigger
className={`border-0 size-auto p-0 h-auto font-medium ${STATUS_TRIGGER_CLASS_NAMES[status]}`} className={`border-0 size-auto p-0 h-auto font-medium ${STATUS_TRIGGER_CLASS_NAMES[status]}`}
> >
<SelectValue placeholder="Select status" /> <SelectValue placeholder="Select status">
{formatEnum(status)}
</SelectValue>
</SelectTrigger> </SelectTrigger>
<SelectContent> <SelectContent>
{BillStatus.map((s) => ( {BillStatus.map((s) => (

8
apps/dashboard/modules/credit-notes/credit-note-actions.tsx
View File

@ -11,9 +11,10 @@ import {
DropdownMenuItem, DropdownMenuItem,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/shared/components/ui/dropdown-menu" } from "@/shared/components/ui/dropdown-menu"
import { Ellipsis, Pencil, Trash2 } from "lucide-react" import { Ellipsis, Pencil, Printer, Trash2 } from "lucide-react"
import { useFormDialog } from "@/shared/components/form-dialog" import { useFormDialog } from "@/shared/components/form-dialog"
import { CreditNoteForm } from "./credit-note-form" import { CreditNoteForm } from "./credit-note-form"
import { useDocumentPrint } from "@/shared/hooks/use-document-print"
type CreditNoteActionsProps = { type CreditNoteActionsProps = {
creditNoteId: string creditNoteId: string
@ -23,6 +24,7 @@ export function CreditNoteActions({ creditNoteId }: CreditNoteActionsProps) {
const api = useAuthApi() const api = useAuthApi()
const router = useRouter() const router = useRouter()
const editDialog = useFormDialog("credit-note-details-edit") const editDialog = useFormDialog("credit-note-details-edit")
const { print, isPrinting } = useDocumentPrint()
const handleDelete = async () => { const handleDelete = async () => {
await api.creditNotes.destroy(creditNoteId) await api.creditNotes.destroy(creditNoteId)
@ -42,6 +44,10 @@ export function CreditNoteActions({ creditNoteId }: CreditNoteActionsProps) {
<Pencil className="size-4" /> <Pencil className="size-4" />
Edit Edit
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem onClick={() => print("credit_note", creditNoteId, "print")} disabled={isPrinting}>
<Printer className="size-4" />
{isPrinting ? "Printing..." : "Print"}
</DropdownMenuItem>
<DropdownMenuItem variant="destructive" onClick={handleDelete}> <DropdownMenuItem variant="destructive" onClick={handleDelete}>
<Trash2 className="size-4" /> <Trash2 className="size-4" />
Delete Delete

3
apps/dashboard/modules/credit-notes/credit-note-general-info.tsx
View File

@ -14,6 +14,7 @@ import {
} from "@/shared/components/ui/card" } from "@/shared/components/ui/card"
import { Badge } from "@/shared/components/ui/badge" import { Badge } from "@/shared/components/ui/badge"
import { Separator } from "@/shared/components/ui/separator" import { Separator } from "@/shared/components/ui/separator"
import { formatEnum } from "@/shared/utils/formatters"
type CreditNoteData = { type CreditNoteData = {
id?: number id?: number
@ -84,7 +85,7 @@ export function CreditNoteGeneralInfo({ creditNote }: CreditNoteGeneralInfoProps
)} )}
{creditNote.status && ( {creditNote.status && (
<Badge variant={statusColorMap[creditNote.status] as any ?? "outline"}> <Badge variant={statusColorMap[creditNote.status] as any ?? "outline"}>
{creditNote.status.charAt(0).toUpperCase() + creditNote.status.slice(1)} {formatEnum(creditNote.status)}
</Badge> </Badge>
)} )}
</div> </div>

16
apps/dashboard/modules/customers/rhf-customer-select-field.tsx
View File

@ -10,6 +10,7 @@ import { Field, FieldLabel, FieldError, FieldDescription } from "@/shared/compon
import { Button } from "@/shared/components/ui/button" import { Button } from "@/shared/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/shared/components/ui/dialog" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/shared/components/ui/dialog"
import { ScrollArea } from "@/shared/components/ui/scroll-area" import { ScrollArea } from "@/shared/components/ui/scroll-area"
import { DialogCloseContext } from "@/shared/hooks/use-dialog-close"
import { import {
Combobox, Combobox,
ComboboxInput, ComboboxInput,
@ -131,10 +132,17 @@ export function RhfCustomerSelectField<
const handleCreateSuccess = (data?: any) => { const handleCreateSuccess = (data?: any) => {
const item = data?.data ?? data const item = data?.data ?? data
if (item?.id) { if (!item?.id) {
field.onChange(buildCustomerOption(item)) setIsCreateOpen(false)
return
} }
queryClient.invalidateQueries({ queryKey: [CUSTOMER_ROUTES.INDEX, "customer-select", customerType ?? "all"] }) const newOption = buildCustomerOption(item)
const key = [CUSTOMER_ROUTES.INDEX, "customer-select", customerType ?? "all"]
queryClient.setQueryData<CustomerOption[]>(key, (prev = []) =>
prev.some((o) => o.value === newOption.value) ? prev : [newOption, ...prev],
)
field.onChange(newOption)
setIsCreateOpen(false) setIsCreateOpen(false)
} }
@ -243,7 +251,9 @@ export function RhfCustomerSelectField<
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
<ScrollArea className="max-h-[80vh] px-4"> <ScrollArea className="max-h-[80vh] px-4">
<DialogCloseContext.Provider value={() => setIsCreateOpen(false)}>
<CustomerForm onSuccess={handleCreateSuccess} /> <CustomerForm onSuccess={handleCreateSuccess} />
</DialogCloseContext.Provider>
</ScrollArea> </ScrollArea>
</DialogContent> </DialogContent>
</Dialog> </Dialog>

9
apps/dashboard/modules/employees/employee-combobox.tsx
View File

@ -6,6 +6,7 @@ import { Loader2 } from "lucide-react"
import { useAuthApi } from "@/shared/useApi" import { useAuthApi } from "@/shared/useApi"
import { EMPLOYEE_ROUTES } from "@garage/api" import { EMPLOYEE_ROUTES } from "@garage/api"
import { Badge } from "@/shared/components/ui/badge" import { Badge } from "@/shared/components/ui/badge"
import { formatEnum } from "@/shared/utils/formatters"
import { import {
Combobox, Combobox,
ComboboxInput, ComboboxInput,
@ -149,16 +150,16 @@ export function EmployeeCombobox({
{opt.type && ( {opt.type && (
<Badge <Badge
variant="secondary" variant="secondary"
className="h-4 px-1.5 text-xs font-normal capitalize" className="h-4 px-1.5 text-xs font-normal"
> >
{opt.type} {formatEnum(opt.type)}
</Badge> </Badge>
)} )}
{opt.status && ( {opt.status && (
<span <span
className={`text-xs capitalize ${opt.status === "active" ? "text-green-600 dark:text-green-400" : "text-muted-foreground"}`} className={`text-xs ${opt.status === "active" ? "text-green-600 dark:text-green-400" : "text-muted-foreground"}`}
> >
{opt.status} {formatEnum(opt.status)}
</span> </span>
)} )}
</div> </div>

8
apps/dashboard/modules/employees/employee-general-info.tsx
View File

@ -18,6 +18,7 @@ import {
} from "@/shared/components/ui/card" } from "@/shared/components/ui/card"
import { Badge } from "@/shared/components/ui/badge" import { Badge } from "@/shared/components/ui/badge"
import { Separator } from "@/shared/components/ui/separator" import { Separator } from "@/shared/components/ui/separator"
import { formatEnum } from "@/shared/utils/formatters"
type EmployeeData = { type EmployeeData = {
id?: number id?: number
@ -86,16 +87,15 @@ export function EmployeeGeneralInfo({ employee }: EmployeeGeneralInfoProps) {
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
<Badge variant="secondary">{fullName || "Unknown"}</Badge> <Badge variant="secondary">{fullName || "Unknown"}</Badge>
{employee.type && ( {employee.type && (
<Badge variant="outline" className="capitalize"> <Badge variant="outline">
{employee.type} {formatEnum(employee.type)}
</Badge> </Badge>
)} )}
{employee.status && ( {employee.status && (
<Badge <Badge
variant={employee.status === "active" ? "default" : "secondary"} variant={employee.status === "active" ? "default" : "secondary"}
className="capitalize"
> >
{employee.status} {formatEnum(employee.status)}
</Badge> </Badge>
)} )}
</div> </div>

8
apps/dashboard/modules/expenses/expense-actions.tsx
View File

@ -11,9 +11,10 @@ import {
DropdownMenuItem, DropdownMenuItem,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/shared/components/ui/dropdown-menu" } from "@/shared/components/ui/dropdown-menu"
import { Ellipsis, Pencil, Trash2 } from "lucide-react" import { Ellipsis, Pencil, Printer, Trash2 } from "lucide-react"
import { useFormDialog } from "@/shared/components/form-dialog" import { useFormDialog } from "@/shared/components/form-dialog"
import { ExpenseForm } from "./expense-form" import { ExpenseForm } from "./expense-form"
import { useDocumentPrint } from "@/shared/hooks/use-document-print"
type ExpenseActionsProps = { type ExpenseActionsProps = {
expenseId: string expenseId: string
@ -23,6 +24,7 @@ export function ExpenseActions({ expenseId }: ExpenseActionsProps) {
const api = useAuthApi() const api = useAuthApi()
const router = useRouter() const router = useRouter()
const editDialog = useFormDialog("expense-details-edit") const editDialog = useFormDialog("expense-details-edit")
const { print, isPrinting } = useDocumentPrint()
const handleDelete = async () => { const handleDelete = async () => {
await api.expenses.destroy(expenseId) await api.expenses.destroy(expenseId)
@ -42,6 +44,10 @@ export function ExpenseActions({ expenseId }: ExpenseActionsProps) {
<Pencil className="size-4" /> <Pencil className="size-4" />
Edit Edit
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem onClick={() => print("expense", expenseId, "print")} disabled={isPrinting}>
<Printer className="size-4" />
{isPrinting ? "Printing..." : "Print"}
</DropdownMenuItem>
<DropdownMenuItem variant="destructive" onClick={handleDelete}> <DropdownMenuItem variant="destructive" onClick={handleDelete}>
<Trash2 className="size-4" /> <Trash2 className="size-4" />
Delete Delete

4
apps/dashboard/modules/home/dashboard-content.tsx
View File

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

117
apps/dashboard/modules/home/quick-shortcuts.tsx Normal file
View File

@ -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>
)
}

3
apps/dashboard/modules/home/upcoming-appointments-card.tsx
View File

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

16
apps/dashboard/modules/inspections/inspection-actions.tsx
View File

@ -2,6 +2,7 @@
import { useAuthApi } from "@/shared/useApi" import { useAuthApi } from "@/shared/useApi"
import { useRouter } from "next/navigation" import { useRouter } from "next/navigation"
import { parseApiError } from "@garage/api"
import { Button } from "@/shared/components/ui/button" import { Button } from "@/shared/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/shared/components/ui/dialog" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/shared/components/ui/dialog"
import { ScrollArea } from "@/shared/components/ui/scroll-area" import { ScrollArea } from "@/shared/components/ui/scroll-area"
@ -50,17 +51,18 @@ export function InspectionActions({ inspectionId, status, onStatusChange }: Insp
} }
const handleStatusChange = async (newStatus: string) => { const handleStatusChange = async (newStatus: string) => {
const promise = api.inspections.changeStatus({ const loadingToast = toast.loading("Updating status...")
try {
await api.inspections.changeStatus({
id: Number(inspectionId),
status: newStatus, status: newStatus,
} as never) } as never)
toast.promise(promise, { toast.success("Status updated successfully", { id: loadingToast })
loading: "Updating status...",
success: "Status updated successfully",
error: "Failed to update status",
})
await promise
onStatusChange?.() onStatusChange?.()
router.refresh() router.refresh()
} catch (e) {
toast.error(parseApiError(e, "Failed to update status"), { id: loadingToast })
}
} }
const transition = status ? STATUS_TRANSITIONS[status] : undefined const transition = status ? STATUS_TRANSITIONS[status] : undefined

6
apps/dashboard/modules/inspections/inspection-row-actions.tsx
View File

@ -10,6 +10,7 @@ import {
MoreHorizontal, MoreHorizontal,
Pencil, Pencil,
PlayCircle, PlayCircle,
Printer,
Share2, Share2,
Trash2, Trash2,
XCircle, XCircle,
@ -28,6 +29,7 @@ import { useAuthApi } from "@/shared/useApi"
import { confirm } from "@/shared/components/confirm-dialog" import { confirm } from "@/shared/components/confirm-dialog"
import { InspectionShareDialog } from "@/modules/inspections/inspection-share-dialog" import { InspectionShareDialog } from "@/modules/inspections/inspection-share-dialog"
import { INSPECTION_ROUTES } from "@garage/api" import { INSPECTION_ROUTES } from "@garage/api"
import { useDocumentPrint } from "@/shared/hooks/use-document-print"
type InspectionStatus = "in_progress" | "completed" | "cancelled" type InspectionStatus = "in_progress" | "completed" | "cancelled"
@ -48,6 +50,7 @@ export function InspectionRowActions({
const router = useRouter() const router = useRouter()
const api = useAuthApi() const api = useAuthApi()
const queryClient = useQueryClient() const queryClient = useQueryClient()
const { print, isPrinting } = useDocumentPrint()
const [shareOpen, setShareOpen] = useState(false) const [shareOpen, setShareOpen] = useState(false)
const inspectionId = String(inspection.id) const inspectionId = String(inspection.id)
@ -125,6 +128,9 @@ export function InspectionRowActions({
<Pencil className="size-3.5 text-muted-foreground" /> Edit <Pencil className="size-3.5 text-muted-foreground" /> Edit
</DropdownMenuItem> </DropdownMenuItem>
<DropdownMenuItem onClick={() => print("inspection", inspectionId, "print")} disabled={isPrinting}>
<Printer className="size-3.5 text-muted-foreground" /> {isPrinting ? "Printing..." : "Print"}
</DropdownMenuItem>
<DropdownMenuItem onClick={() => setShareOpen(true)}> <DropdownMenuItem onClick={() => setShareOpen(true)}>
<Share2 className="size-3.5 text-muted-foreground" /> Share with customer <Share2 className="size-3.5 text-muted-foreground" /> Share with customer
</DropdownMenuItem> </DropdownMenuItem>

17
apps/dashboard/modules/invoices/invoice-status-badge.tsx
View File

@ -3,7 +3,7 @@
import { useEffect, useState } from "react" import { useEffect, useState } from "react"
import { useRouter } from "next/navigation" import { useRouter } from "next/navigation"
import { toast } from "sonner" import { toast } from "sonner"
import { InvoiceStatus } from "@garage/api" import { InvoiceStatus, parseApiError } from "@garage/api"
import { confirm } from "@/shared/components/confirm-dialog" import { confirm } from "@/shared/components/confirm-dialog"
import { badgeVariants } from "@/shared/components/ui/badge" import { badgeVariants } from "@/shared/components/ui/badge"
import { import {
@ -71,18 +71,13 @@ export default function InvoiceStatusBadge({ invoice }: InvoiceStatusBadgeProps)
setIsUpdating(true) setIsUpdating(true)
const loadingToast = toast.loading(`Updating invoice status to ${formatEnum(nextStatus)}...`)
try { try {
const promise = api.invoices.update(String(invoice.id), { status: nextStatus }) await api.invoices.update(String(invoice.id), { status: nextStatus })
toast.success("Invoice status updated successfully.", { id: loadingToast })
toast.promise(promise, {
loading: `Updating invoice status to ${formatEnum(nextStatus)}...`,
success: "Invoice status updated successfully.",
error: "Failed to update invoice status.",
})
await promise
setStatus(nextStatus)
router.refresh() router.refresh()
} catch (e) {
toast.error(parseApiError(e, "Failed to update invoice status."), { id: loadingToast })
} finally { } finally {
setIsUpdating(false) setIsUpdating(false)
} }

48
apps/dashboard/modules/payment-mades/payment-made-actions.tsx Normal file
View File

@ -0,0 +1,48 @@
"use client"
import { useAuthApi } from "@/shared/useApi"
import { useRouter } from "next/navigation"
import { Button } from "@/shared/components/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/shared/components/ui/dropdown-menu"
import { Ellipsis, Printer, Trash2 } from "lucide-react"
import { useDocumentPrint } from "@/shared/hooks/use-document-print"
type PaymentMadeActionsProps = {
paymentId: string
}
export function PaymentMadeActions({ paymentId }: PaymentMadeActionsProps) {
const api = useAuthApi()
const router = useRouter()
const { print, isPrinting } = useDocumentPrint()
const handleDelete = async () => {
await api.paymentMades.destroy(paymentId)
router.push("/purchase/payments-made")
}
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon">
<Ellipsis className="size-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => print("payment_made", paymentId, "print")} disabled={isPrinting}>
<Printer className="size-4" />
{isPrinting ? "Printing..." : "Print"}
</DropdownMenuItem>
<DropdownMenuItem variant="destructive" onClick={handleDelete}>
<Trash2 className="size-4" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}

3
apps/dashboard/modules/payment-mades/payment-made-form.tsx
View File

@ -30,6 +30,7 @@ import {
BILL_ROUTES, BILL_ROUTES,
PAYMENT_MODE_ROUTES, PAYMENT_MODE_ROUTES,
EMPLOYEE_ROUTES, EMPLOYEE_ROUTES,
PAYMENT_MADE_ROUTES,
PaymentFor, PaymentFor,
} from "@garage/api" } from "@garage/api"
import { RhfVendorSelectField } from "@/modules/vendors/rhf-vendor-select-field" import { RhfVendorSelectField } from "@/modules/vendors/rhf-vendor-select-field"
@ -182,6 +183,8 @@ export function PaymentMadeForm({ resourceId, initialData, onSuccess, billId, ex
defaultValues: DEFAULT_VALUES, defaultValues: DEFAULT_VALUES,
resourceId, resourceId,
initialData: resolvedInitialData, initialData: resolvedInitialData,
initialize: (id) => api.paymentMades.show(id),
queryKey: [PAYMENT_MADE_ROUTES.BY_ID, resourceId],
mapToFormValues, mapToFormValues,
}) })

48
apps/dashboard/modules/payment-received/payment-received-actions.tsx Normal file
View File

@ -0,0 +1,48 @@
"use client"
import { useAuthApi } from "@/shared/useApi"
import { useRouter } from "next/navigation"
import { Button } from "@/shared/components/ui/button"
import {
DropdownMenu,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/shared/components/ui/dropdown-menu"
import { Ellipsis, Printer, Trash2 } from "lucide-react"
import { useDocumentPrint } from "@/shared/hooks/use-document-print"
type PaymentReceivedActionsProps = {
paymentId: string
}
export function PaymentReceivedActions({ paymentId }: PaymentReceivedActionsProps) {
const api = useAuthApi()
const router = useRouter()
const { print, isPrinting } = useDocumentPrint()
const handleDelete = async () => {
await api.paymentReceived.destroy(paymentId)
router.push("/sales/payment-received")
}
return (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon">
<Ellipsis className="size-4" />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem onClick={() => print("payment_received", paymentId, "print")} disabled={isPrinting}>
<Printer className="size-4" />
{isPrinting ? "Printing..." : "Print"}
</DropdownMenuItem>
<DropdownMenuItem variant="destructive" onClick={handleDelete}>
<Trash2 className="size-4" />
Delete
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
)
}

28
apps/dashboard/modules/payment-received/payment-received-form.tsx
View File

@ -25,7 +25,7 @@ import {
paymentReceivedFormSchema, paymentReceivedFormSchema,
type PaymentReceivedFormValues, type PaymentReceivedFormValues,
} from "./payment-received.schema" } from "./payment-received.schema"
import { PAYMENT_MODE_ROUTES, CUSTOMER_ROUTES, JOB_CARD_ROUTES } from "@garage/api" import { PAYMENT_MODE_ROUTES, CUSTOMER_ROUTES, JOB_CARD_ROUTES, PAYMENT_RECEIVED_ROUTES } from "@garage/api"
// ── Props ── // ── Props ──
@ -58,13 +58,29 @@ const DEFAULT_VALUES: PaymentReceivedFormValues = {
function mapToFormValues(data: unknown): PaymentReceivedFormValues { function mapToFormValues(data: unknown): PaymentReceivedFormValues {
const d = (data as any)?.data ?? data ?? {} const d = (data as any)?.data ?? data ?? {}
const jobCardId = d.job_card_id ?? d.job_card?.id
const jobCardLabel = d.job_card?.title ?? d.job_card_name
const paymentModeId = d.payment_mode_id ?? d.payment_mode?.id
const paymentModeLabel = d.payment_mode?.title ?? d.payment_mode?.name ?? d.payment_mode_name
const customerId = d.customer_id ?? d.customer?.id
const customerLabel = d.customer?.first_name
? `${d.customer.first_name} ${d.customer.last_name ?? ""}`.trim()
: d.customer?.company_name ?? d.customer?.name ?? d.customer_name
const rawDate = d.payment_date
const payment_date = typeof rawDate === "string" && rawDate
? rawDate.slice(0, 10)
: new Date().toISOString().split("T")[0]
return { return {
job_card: toRelation(d.job_card_id, d.job_card_name), job_card: toRelation(jobCardId, jobCardLabel),
payment_mode: toRelation(d.payment_mode_id, d.payment_mode_name), payment_mode: toRelation(paymentModeId, paymentModeLabel),
customer: toRelation(d.customer_id, d.customer_name), customer: toRelation(customerId, customerLabel),
amount_received: d.amount_received != null ? Number(d.amount_received) : 0, amount_received: d.amount_received != null ? Number(d.amount_received) : 0,
payment_number: d.payment_number || "", payment_number: d.payment_number || "",
payment_date: d.payment_date || new Date().toISOString().split("T")[0], payment_date,
note: d.note || "", note: d.note || "",
} }
} }
@ -126,6 +142,8 @@ export function PaymentReceivedForm({ resourceId, initialData, onSuccess, defaul
defaultValues: DEFAULT_VALUES, defaultValues: DEFAULT_VALUES,
resourceId, resourceId,
initialData: resolvedInitialData, initialData: resolvedInitialData,
initialize: (id) => api.paymentReceived.show(id),
queryKey: [PAYMENT_RECEIVED_ROUTES.BY_ID, resourceId],
mapToFormValues, mapToFormValues,
}) })

43
apps/dashboard/modules/settings/company/settings-form.tsx
View File

@ -17,9 +17,11 @@ import {
RhfAsyncSelectField, RhfAsyncSelectField,
RhfTextareaField, RhfTextareaField,
} from "@/shared/components/form" } from "@/shared/components/form"
import { RhfImageField } from "@/shared/components/form/fields/rhf-image-field"
import { useAuthApi } from "@/shared/useApi" import { useAuthApi } from "@/shared/useApi"
import { useFormMutation } from "@/shared/hooks/use-form-mutation" import { useFormMutation } from "@/shared/hooks/use-form-mutation"
import { toId } from "@/shared/lib/utils" import { toId } from "@/shared/lib/utils"
import { CONSTANTS } from "@/config/constants"
import { FirstDayOfWork } from "@garage/api" import { FirstDayOfWork } from "@garage/api"
import { SETTINGS_ROUTES } from "@garage/api" import { SETTINGS_ROUTES } from "@garage/api"
@ -58,6 +60,7 @@ const DEFAULT_VALUES: SettingsFormValues = {
description: "", description: "",
security: "", security: "",
privacy_policy: "", privacy_policy: "",
logo: null,
} }
// ── Mapping helpers ── // ── Mapping helpers ──
@ -85,6 +88,7 @@ function mapToFormValues(data: unknown): SettingsFormValues {
description: d.description ?? "", description: d.description ?? "",
security: d.security ?? "", security: d.security ?? "",
privacy_policy: d.privacy_policy ?? "", privacy_policy: d.privacy_policy ?? "",
logo: null,
} }
} }
@ -93,11 +97,24 @@ function mapFormToPayload(values: SettingsFormValues) {
name: values.name, name: values.name,
email: values.email || undefined, email: values.email || undefined,
phone: values.phone || undefined, phone: values.phone || undefined,
alternative_phone: values.alternative_phone || undefined,
website: values.website || undefined,
time_zone: values.time_zone || undefined, time_zone: values.time_zone || undefined,
upi_id: values.upi_id || undefined,
first_day_of_work: values.first_day_of_work || undefined, first_day_of_work: values.first_day_of_work || undefined,
latitude: values.latitude || undefined,
longitude: values.longitude || undefined,
bank_details: values.bank_details || undefined,
first_address_line: values.first_address_line || undefined, first_address_line: values.first_address_line || undefined,
second_address_line: values.second_address_line || undefined,
country_id: toId(values.country), country_id: toId(values.country),
state_id: toId(values.state),
city: values.city || undefined, city: values.city || undefined,
zip_code: values.zip_code || undefined,
description: values.description || undefined,
security: values.security || undefined,
privacy_policy: values.privacy_policy || undefined,
logo: values.logo instanceof File ? values.logo : undefined,
} }
} }
@ -116,6 +133,14 @@ export function SettingsForm() {
queryFn: () => api.settings.fetch(), queryFn: () => api.settings.fetch(),
}) })
const existingLogoPath: string | null = (() => {
const raw = (data as any)?.data
const record = Array.isArray(raw) ? raw[0] : raw
const logo = record?.logo
if (!logo || typeof logo !== "string") return null
return logo.startsWith("http") ? logo : CONSTANTS.getAssetUrl(`storage/${logo.replace(/^\/+/, "")}`)
})()
useEffect(() => { useEffect(() => {
if (!data) return if (!data) return
const raw = (data as any)?.data const raw = (data as any)?.data
@ -286,6 +311,20 @@ export function SettingsForm() {
{/* Sidebar - 4/12 */} {/* Sidebar - 4/12 */}
<div className="lg:col-span-4"> <div className="lg:col-span-4">
<FieldGroup className="sticky top-24 space-y-6"> <FieldGroup className="sticky top-24 space-y-6">
{/* Logo Section */}
<div className="rounded-lg border bg-card p-4">
<h3 className="mb-1 text-base font-semibold">Workshop Logo</h3>
<p className="text-muted-foreground mb-3 text-xs">
Shown on printed invoices, estimates, job cards and other documents.
</p>
<RhfImageField
name="logo"
accept="image/png,image/jpeg,image/jpg,image/webp,image/svg+xml"
disabled={isLoading}
initialPreviewUrl={existingLogoPath}
/>
</div>
{/* Location & Time Section */} {/* Location & Time Section */}
<div className="rounded-lg border bg-card p-4"> <div className="rounded-lg border bg-card p-4">
<h3 className="mb-4 text-base font-semibold">Location & Time</h3> <h3 className="mb-4 text-base font-semibold">Location & Time</h3>
@ -340,8 +379,8 @@ export function SettingsForm() {
<div className="mt-4"> <div className="mt-4">
<RhfTextareaField <RhfTextareaField
name="privacy_policy" name="privacy_policy"
label="Privacy Policy" label="Terms and Conditions"
placeholder="Privacy policy text..." placeholder="Terms and conditions text..."
disabled={isLoading} disabled={isLoading}
/> />
</div> </div>

8
apps/dashboard/modules/settings/company/settings.schema.ts
View File

@ -51,6 +51,14 @@ export const settingsFormSchema = z.object({
description: z.string().optional(), description: z.string().optional(),
security: z.string().optional(), security: z.string().optional(),
privacy_policy: z.string().optional(), privacy_policy: z.string().optional(),
logo: z
.any()
.nullable()
.optional()
.refine(
(v) => v == null || v instanceof File,
"Logo must be an image file",
),
}) })
export type SettingsFormValues = z.infer<typeof settingsFormSchema> export type SettingsFormValues = z.infer<typeof settingsFormSchema>

3
apps/dashboard/modules/vendors/rhf-vendor-select-field.tsx vendored
View File

@ -10,6 +10,7 @@ import { Field, FieldLabel, FieldError, FieldDescription } from "@/shared/compon
import { Button } from "@/shared/components/ui/button" import { Button } from "@/shared/components/ui/button"
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/shared/components/ui/dialog" import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/shared/components/ui/dialog"
import { ScrollArea } from "@/shared/components/ui/scroll-area" import { ScrollArea } from "@/shared/components/ui/scroll-area"
import { DialogCloseContext } from "@/shared/hooks/use-dialog-close"
import { import {
Combobox, Combobox,
ComboboxInput, ComboboxInput,
@ -228,7 +229,9 @@ export function RhfVendorSelectField<
<DialogTitle className="text-2xl font-bold">Add Vendor</DialogTitle> <DialogTitle className="text-2xl font-bold">Add Vendor</DialogTitle>
</DialogHeader> </DialogHeader>
<ScrollArea className="max-h-[80vh] px-4"> <ScrollArea className="max-h-[80vh] px-4">
<DialogCloseContext.Provider value={() => setIsCreateOpen(false)}>
<VendorForm onSuccess={handleCreateSuccess} /> <VendorForm onSuccess={handleCreateSuccess} />
</DialogCloseContext.Provider>
</ScrollArea> </ScrollArea>
</DialogContent> </DialogContent>
</Dialog> </Dialog>

5
apps/dashboard/modules/vendors/vendor-general-info.tsx vendored
View File

@ -16,6 +16,7 @@ import {
import { Badge } from "@/shared/components/ui/badge" import { Badge } from "@/shared/components/ui/badge"
import { Separator } from "@/shared/components/ui/separator" import { Separator } from "@/shared/components/ui/separator"
import { Money } from "@/shared/components/money" import { Money } from "@/shared/components/money"
import { formatEnum } from "@/shared/utils/formatters"
type VendorData = { type VendorData = {
id?: number id?: number
@ -82,8 +83,8 @@ export function VendorGeneralInfo({ vendor }: VendorGeneralInfoProps) {
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
<Badge variant="secondary">{vendor.company_name || fullName || "Unknown vendor"}</Badge> <Badge variant="secondary">{vendor.company_name || fullName || "Unknown vendor"}</Badge>
{vendor.status && ( {vendor.status && (
<Badge variant={vendor.status === "active" ? "default" : "outline"} className="capitalize"> <Badge variant={vendor.status === "active" ? "default" : "outline"}>
{vendor.status} {formatEnum(vendor.status)}
</Badge> </Badge>
)} )}
</div> </div>

7
apps/dashboard/shared/components/crud-dialog/crud-dialog.tsx
View File

@ -13,6 +13,7 @@ import {
import { ScrollArea } from "@/shared/components/ui/scroll-area" import { ScrollArea } from "@/shared/components/ui/scroll-area"
import { DataTable } from "@/shared/data-view/table-view" import { DataTable } from "@/shared/data-view/table-view"
import { createActionsColumn } from "@/shared/data-view/table-view" import { createActionsColumn } from "@/shared/data-view/table-view"
import { DialogCloseContext } from "@/shared/hooks/use-dialog-close"
import { useCrudDialog, type CrudDialogClient, type UseCrudDialogOptions } from "./use-crud-dialog" import { useCrudDialog, type CrudDialogClient, type UseCrudDialogOptions } from "./use-crud-dialog"
// ── Types ── // ── Types ──
@ -89,6 +90,11 @@ export function CrudDialog<TClient extends CrudDialogClient>({
<Dialog open={isOpen} onOpenChange={(v) => { if (!v) handleClose() }}> <Dialog open={isOpen} onOpenChange={(v) => { if (!v) handleClose() }}>
<DialogContent className="min-w-2xl max-w-3xl"> <DialogContent className="min-w-2xl max-w-3xl">
{/* Inner forms manage their own close via `onSuccess` → */}
{/* `crud.handleFormSuccess`. Shadow the parent dialog's */}
{/* close so a CrudDialog opened from inside a FormDialog */}
{/* doesn't dismiss the outer dialog on every save. */}
<DialogCloseContext.Provider value={crud.closeForm}>
<DialogHeader> <DialogHeader>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{crud.isFormOpen && ( {crud.isFormOpen && (
@ -142,6 +148,7 @@ export function CrudDialog<TClient extends CrudDialogClient>({
</div> </div>
)} )}
</ScrollArea> </ScrollArea>
</DialogCloseContext.Provider>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
</> </>

3
apps/dashboard/shared/components/form-dialog.tsx
View File

@ -5,6 +5,7 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/shared/compo
import { ScrollArea } from '@/shared/components/ui/scroll-area' import { ScrollArea } from '@/shared/components/ui/scroll-area'
import { Plus } from 'lucide-react' import { Plus } from 'lucide-react'
import { cn } from '../lib/utils' import { cn } from '../lib/utils'
import { DialogCloseContext } from '@/shared/hooks/use-dialog-close'
export const formDialogParams = { export const formDialogParams = {
dialog: parseAsBoolean.withDefault(false), dialog: parseAsBoolean.withDefault(false),
@ -87,7 +88,9 @@ export default function FormDialog(props: {
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
<ScrollArea className={`max-h-[80vh] px-4 ${cn(props.classNames?.scrollArea)}`}> <ScrollArea className={`max-h-[80vh] px-4 ${cn(props.classNames?.scrollArea)}`}>
<DialogCloseContext.Provider value={close}>
{props.children(resourceId, { open, close, isOpen })} {props.children(resourceId, { open, close, isOpen })}
</DialogCloseContext.Provider>
</ScrollArea> </ScrollArea>
</DialogContent> </DialogContent>
</Dialog> </Dialog>

3
apps/dashboard/shared/components/form/fields/rhf-async-select-field.tsx
View File

@ -24,6 +24,7 @@ import {
} from "@/shared/components/ui/dialog" } from "@/shared/components/ui/dialog"
import { ScrollArea } from "@/shared/components/ui/scroll-area" import { ScrollArea } from "@/shared/components/ui/scroll-area"
import { PlusIcon } from "lucide-react" import { PlusIcon } from "lucide-react"
import { DialogCloseContext } from "@/shared/hooks/use-dialog-close"
// ── Inline create types ── // ── Inline create types ──
@ -199,7 +200,9 @@ export function RhfAsyncSelectField<
</DialogTitle> </DialogTitle>
</DialogHeader> </DialogHeader>
<ScrollArea className="max-h-[80vh] px-4"> <ScrollArea className="max-h-[80vh] px-4">
<DialogCloseContext.Provider value={() => setIsCreateOpen(false)}>
{createForm({ onSuccess: handleCreateSuccess })} {createForm({ onSuccess: handleCreateSuccess })}
</DialogCloseContext.Provider>
</ScrollArea> </ScrollArea>
</DialogContent> </DialogContent>
</Dialog> </Dialog>

12
apps/dashboard/shared/hooks/use-dialog-close.tsx Normal file
View File

@ -0,0 +1,12 @@
"use client"
import { createContext, useContext } from "react"
// Closes the nearest dialog/sheet wrapper. `null` means the form is not
// inside a dialog that should auto-close (or a parent has explicitly
// shadowed the context, e.g. CrudDialog).
export const DialogCloseContext = createContext<(() => void) | null>(null)
export function useDialogClose(): (() => void) | null {
return useContext(DialogCloseContext)
}

11
apps/dashboard/shared/hooks/use-form-mutation.ts
View File

@ -3,13 +3,24 @@
import { useMutation, type UseMutationOptions } from "@tanstack/react-query" import { useMutation, type UseMutationOptions } from "@tanstack/react-query"
import type { FieldValues, UseFormReturn } from "react-hook-form" import type { FieldValues, UseFormReturn } from "react-hook-form"
import { ApiError } from "@garage/api" import { ApiError } from "@garage/api"
import { useDialogClose } from "./use-dialog-close"
export function useFormMutation<TValues extends FieldValues, TResponse = unknown>( export function useFormMutation<TValues extends FieldValues, TResponse = unknown>(
form: UseFormReturn<TValues>, form: UseFormReturn<TValues>,
options: UseMutationOptions<TResponse, Error, TValues>, options: UseMutationOptions<TResponse, Error, TValues>,
) { ) {
const closeDialog = useDialogClose()
return useMutation<TResponse, Error, TValues>({ return useMutation<TResponse, Error, TValues>({
...options, ...options,
onSuccess: async (data, vars, onMutateResult, ctx) => {
await options.onSuccess?.(data, vars, onMutateResult, ctx)
// If this form is rendered inside a dialog wrapper that registers
// a close handler (e.g. FormDialog), dismiss the dialog after a
// successful submit. Plain pages render the form without the
// provider, so this is a no-op there.
closeDialog?.()
},
onError: (err, vars, values, ctx) => { onError: (err, vars, values, ctx) => {
if (err instanceof ApiError && err.validationErrors) { if (err instanceof ApiError && err.validationErrors) {
Object.entries(err.validationErrors).forEach(([field, msgs]) => { Object.entries(err.validationErrors).forEach(([field, msgs]) => {

4
packages/api/src/clients/document-print.ts
View File

@ -11,9 +11,11 @@ export type DocumentPrintType =
| "job_card" | "job_card"
| "invoice" | "invoice"
| "payment_received" | "payment_received"
| "expense"
| "purchase_order" | "purchase_order"
| "bill" | "bill"
| string | "payment_made"
| "credit_note"
export type DocumentPrintMode = "print" | "download" export type DocumentPrintMode = "print" | "download"

46
packages/api/src/clients/settings.ts
View File

@ -1,10 +1,34 @@
import { ApiClient, type ApiClientOptions } from "../infra/client" import { ApiClient, type ApiClientOptions } from "../infra/client"
import type { ApiPath, ApiRequestBody } from "../infra/types" import type { ApiPath } from "../infra/types"
export const SETTINGS_ROUTES = { export const SETTINGS_ROUTES = {
INDEX: "/api/settings", INDEX: "/api/settings",
} as const satisfies Record<string, ApiPath> } as const satisfies Record<string, ApiPath>
export type SettingsUpdatePayload = {
name?: string
email?: string
phone?: string
alternative_phone?: string
website?: string
time_zone?: string
upi_id?: string
first_day_of_work?: string
latitude?: string | number
longitude?: string | number
bank_details?: string
first_address_line?: string
second_address_line?: string
country_id?: number | string
state_id?: number | string
city?: string
zip_code?: string
description?: string
security?: string
privacy_policy?: string
logo?: File | null
}
export class SettingsClient extends ApiClient { export class SettingsClient extends ApiClient {
constructor(baseUrl?: string, defaultOptions?: ApiClientOptions) { constructor(baseUrl?: string, defaultOptions?: ApiClientOptions) {
super(baseUrl, defaultOptions) super(baseUrl, defaultOptions)
@ -14,7 +38,23 @@ export class SettingsClient extends ApiClient {
return this.get(SETTINGS_ROUTES.INDEX) return this.get(SETTINGS_ROUTES.INDEX)
} }
async update(payload: ApiRequestBody<typeof SETTINGS_ROUTES.INDEX, "put">) { async update(payload: SettingsUpdatePayload) {
return this.put(SETTINGS_ROUTES.INDEX, payload) const hasFile = payload && (payload as any).logo instanceof File
if (!hasFile) {
const { logo: _logo, ...rest } = (payload ?? {}) as Record<string, unknown>
return this.put(SETTINGS_ROUTES.INDEX, rest as any)
}
const fd = new FormData()
for (const [key, value] of Object.entries(payload as Record<string, unknown>)) {
if (value === undefined || value === null) continue
if (value instanceof File) {
fd.append(key, value)
} else {
fd.append(key, String(value))
}
}
fd.append("_method", "PUT")
return this.postFormData(SETTINGS_ROUTES.INDEX, fd)
} }
} }

1
packages/api/src/infra/index.ts
View File

@ -19,4 +19,5 @@ export {
export { ApiClient, ApiError, type ApiClientOptions } from "./client" export { ApiClient, ApiError, type ApiClientOptions } from "./client"
export { DEFAULT_PER_PAGE } from "./crud-client" export { DEFAULT_PER_PAGE } from "./crud-client"
export * from "./crud-client" export * from "./crud-client"
export { parseApiError } from "./parse-error"
export type { AuthUser } from "./token" export type { AuthUser } from "./token"

35
packages/api/src/infra/parse-error.ts Normal file
View File

@ -0,0 +1,35 @@
import { ApiError } from "./client"
/**
* Extract a user-facing error message from a thrown ApiError (or any unknown error).
* Order: first Laravel field error → payload.message → error.message → fallback.
*/
export function parseApiError(error: unknown, fallback = "Request failed"): string {
const e = error as { payload?: { errors?: unknown; message?: string }; message?: string } | undefined
if (!e) return fallback
const errors = e.payload?.errors
if (errors && typeof errors === "object" && !Array.isArray(errors)) {
const first = Object.values(errors as Record<string, unknown>)[0]
if (Array.isArray(first) && typeof first[0] === "string") {
return first[0]
}
if (typeof first === "string") {
return first
}
}
if (typeof e.payload?.message === "string" && e.payload.message.length > 0) {
return e.payload.message
}
if (error instanceof ApiError && error.message) {
return error.message
}
if (typeof e.message === "string" && e.message.length > 0) {
return e.message
}
return fallback
}