humam kerdiah
4f0a2f790f
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
98 lines
4.2 KiB
TypeScript
98 lines
4.2 KiB
TypeScript
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>
|
|
)
|
|
}
|