Add ClaimSettleDialog, ClaimSheet, ClaimViewSheet, and ClaimsClient
This commit is contained in:
+134
@@ -0,0 +1,134 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useForm, zodResolver, z } from '@/lib/form'
|
||||
import { FormField } from '@/components/shared/form-field'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { FieldGroup } from '@/components/ui/field'
|
||||
import { toast } from '@/components/ui/toast'
|
||||
import { claims as claimsApi, users as usersApi, getApiError, getPaginatedItems } from '@/lib/api/index'
|
||||
import type { ClaimResponse, UserResponse } from '@/types/api'
|
||||
|
||||
const schema = z.object({
|
||||
settlementAmount: z.number().min(0, 'Must be 0 or more'),
|
||||
settledByUserId: z.string().min(1, 'Settled by is required'),
|
||||
})
|
||||
|
||||
type FormValues = z.infer<typeof schema>
|
||||
|
||||
interface ClaimSettleDialogProps {
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
onSuccess: () => void
|
||||
claim: ClaimResponse | null
|
||||
}
|
||||
|
||||
export function ClaimSettleDialog({ open, onClose, onSuccess, claim }: ClaimSettleDialogProps) {
|
||||
const [usersList, setUsersList] = useState<UserResponse[]>([])
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: { settlementAmount: 0, settledByUserId: '' },
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
form.reset({ settlementAmount: 0, settledByUserId: '' })
|
||||
usersApi.list({ pageSize: 200 })
|
||||
.then((res) => setUsersList(getPaginatedItems(res)))
|
||||
.catch((err) => toast.add({ title: 'Failed to load users', description: getApiError(err), type: 'error' }))
|
||||
}, [open])
|
||||
|
||||
if (!claim) return null
|
||||
|
||||
async function onSubmit(values: FormValues) {
|
||||
try {
|
||||
await claimsApi.settle(claim!.id, values)
|
||||
toast.add({ title: 'Claim settled', type: 'success' })
|
||||
onSuccess()
|
||||
onClose()
|
||||
} catch (err) {
|
||||
toast.add({ title: 'Failed to settle claim', description: getApiError(err), type: 'error' })
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={(v) => { if (!v) onClose() }}>
|
||||
<DialogContent className="sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Settle Claim</DialogTitle>
|
||||
<DialogDescription>{claim.details}</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-6">
|
||||
<FieldGroup>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="settlementAmount"
|
||||
label="Settlement Amount"
|
||||
required
|
||||
render={({ field, invalid }) => (
|
||||
<Input
|
||||
id="settlementAmount"
|
||||
name={field.name}
|
||||
ref={field.ref}
|
||||
type="number"
|
||||
min={0}
|
||||
step="0.01"
|
||||
value={Number(field.value as number)}
|
||||
onChange={(e) => field.onChange(Number(e.target.value))}
|
||||
onBlur={field.onBlur}
|
||||
aria-invalid={invalid}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="settledByUserId"
|
||||
label="Settled By"
|
||||
description="Temporary — required until auth resolves the logged-in user automatically."
|
||||
required
|
||||
render={({ field }) => (
|
||||
<Select value={field.value as string} onValueChange={field.onChange}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select user..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="" disabled>Select user...</SelectItem>
|
||||
{usersList.map((user) => (
|
||||
<SelectItem key={user.id} value={user.id}>{user.fullName}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
</FieldGroup>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" onClick={onClose}>Cancel</Button>
|
||||
<Button type="submit" disabled={form.formState.isSubmitting}>
|
||||
{form.formState.isSubmitting ? 'Saving…' : 'Settle Claim'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,137 @@
|
||||
'use client'
|
||||
|
||||
import { useEffect, useState } from 'react'
|
||||
import { useForm, zodResolver, z } from '@/lib/form'
|
||||
import { FormField } from '@/components/shared/form-field'
|
||||
import { Input } from '@/components/ui/input'
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from '@/components/ui/select'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import { FieldGroup } from '@/components/ui/field'
|
||||
import { toast } from '@/components/ui/toast'
|
||||
import { claims as claimsApi, users as usersApi, getApiError, getPaginatedItems } from '@/lib/api/index'
|
||||
import type { ClaimResponse, UserResponse } from '@/types/api'
|
||||
|
||||
const schema = z.object({
|
||||
agencyUserId: z.string().min(1, 'Agency user is required'),
|
||||
details: z.string().min(1, 'Details are required'),
|
||||
})
|
||||
|
||||
type FormValues = z.infer<typeof schema>
|
||||
|
||||
interface ClaimSheetProps {
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
onSuccess: () => void
|
||||
claim?: ClaimResponse | null
|
||||
}
|
||||
|
||||
export function ClaimSheet({ open, onClose, onSuccess, claim }: ClaimSheetProps) {
|
||||
const [usersList, setUsersList] = useState<UserResponse[]>([])
|
||||
const isEdit = Boolean(claim)
|
||||
|
||||
const form = useForm<FormValues>({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: { agencyUserId: '', details: '' },
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
form.reset({ agencyUserId: claim?.agencyUserId ?? '', details: claim?.details ?? '' })
|
||||
usersApi.list({ pageSize: 200 })
|
||||
.then((res) => setUsersList(getPaginatedItems(res)))
|
||||
.catch((err) => toast.add({ title: 'Failed to load users', description: getApiError(err), type: 'error' }))
|
||||
}, [open, claim])
|
||||
|
||||
async function onSubmit(values: FormValues) {
|
||||
try {
|
||||
if (isEdit) {
|
||||
await claimsApi.update(claim!.id, values)
|
||||
toast.add({ title: 'Claim updated', type: 'success' })
|
||||
} else {
|
||||
await claimsApi.create(values)
|
||||
toast.add({ title: 'Claim raised', type: 'success' })
|
||||
}
|
||||
onSuccess()
|
||||
onClose()
|
||||
} catch (err) {
|
||||
toast.add({ title: `Failed to ${isEdit ? 'update' : 'raise'} claim`, description: getApiError(err), type: 'error' })
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={(v) => { if (!v) onClose() }}>
|
||||
<DialogContent className="sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{isEdit ? 'Edit' : 'Raise'} Agency Claim</DialogTitle>
|
||||
<DialogDescription>
|
||||
{isEdit ? 'Only claims that are still Open can be edited.' : 'Raise a claim against a regional agency user.'}
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-6">
|
||||
<FieldGroup>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="agencyUserId"
|
||||
label="Agency User"
|
||||
required
|
||||
render={({ field }) => (
|
||||
<Select value={field.value as string} onValueChange={field.onChange}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select user..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="" disabled>Select user...</SelectItem>
|
||||
{usersList.map((user) => (
|
||||
<SelectItem key={user.id} value={user.id}>{user.fullName}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="details"
|
||||
label="Details"
|
||||
required
|
||||
render={({ field, invalid }) => (
|
||||
<Input
|
||||
id="details"
|
||||
name={field.name}
|
||||
ref={field.ref}
|
||||
value={field.value as string}
|
||||
onChange={field.onChange}
|
||||
onBlur={field.onBlur}
|
||||
placeholder="Describe the claim..."
|
||||
aria-invalid={invalid}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</FieldGroup>
|
||||
|
||||
<DialogFooter>
|
||||
<Button type="button" variant="outline" onClick={onClose}>Cancel</Button>
|
||||
<Button type="submit" disabled={form.formState.isSubmitting}>
|
||||
{form.formState.isSubmitting ? 'Saving…' : isEdit ? 'Save Changes' : 'Raise Claim'}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
+56
@@ -0,0 +1,56 @@
|
||||
'use client'
|
||||
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from '@/components/ui/dialog'
|
||||
import type { ClaimResponse } from '@/types/api'
|
||||
|
||||
const fmtDateTime = (v: string) =>
|
||||
new Date(v).toLocaleString('en-GB', {
|
||||
day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit',
|
||||
})
|
||||
|
||||
const fmtAmount = (n: number) => `Rs. ${n.toLocaleString()}`
|
||||
|
||||
interface ClaimViewSheetProps {
|
||||
open: boolean
|
||||
onClose: () => void
|
||||
claim: ClaimResponse | null
|
||||
agencyUserName?: string
|
||||
}
|
||||
|
||||
function Row({ label, value }: { label: string; value: React.ReactNode }) {
|
||||
return (
|
||||
<div className="flex items-center justify-between py-2 text-sm border-b last:border-0">
|
||||
<span className="text-muted-foreground">{label}</span>
|
||||
<span className="font-medium text-right">{value}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function ClaimViewSheet({ open, onClose, claim, agencyUserName }: ClaimViewSheetProps) {
|
||||
if (!claim) return null
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={(v) => !v && onClose()}>
|
||||
<DialogContent className="overflow-y-auto sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Claim Details</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex flex-col">
|
||||
<Row label="Agency User" value={agencyUserName ?? claim.agencyUserId} />
|
||||
<Row label="Details" value={claim.details} />
|
||||
<Row label="Status" value={<Badge variant={claim.status === 'Settled' ? 'secondary' : 'default'}>{claim.status}</Badge>} />
|
||||
{claim.settlementAmount != null && <Row label="Settlement Amount" value={fmtAmount(claim.settlementAmount)} />}
|
||||
{claim.settledAt && <Row label="Settled At" value={fmtDateTime(claim.settledAt)} />}
|
||||
<Row label="Created" value={fmtDateTime(claim.createdAt)} />
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,196 @@
|
||||
'use client'
|
||||
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react'
|
||||
import { HugeiconsIcon } from '@hugeicons/react'
|
||||
import { Add01Icon } from '@hugeicons/core-free-icons'
|
||||
|
||||
import { DataTable } from '@/components/shared/data-table'
|
||||
import type { TableConfig } from '@/components/shared/data-table'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { toast } from '@/components/ui/toast'
|
||||
import { claims as claimsApi, users as usersApi, getApiError, getPaginatedItems } from '@/lib/api/index'
|
||||
import type { ClaimResponse } from '@/types/api'
|
||||
import { ClaimSheet } from './claim-sheet'
|
||||
import { ClaimSettleDialog } from './claim-settle-dialog'
|
||||
import { ClaimViewSheet } from './claim-view-sheet'
|
||||
|
||||
const fmtDate = (v: string) =>
|
||||
new Date(v).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
|
||||
|
||||
const fmtAmount = (n: number) => `Rs. ${n.toLocaleString()}`
|
||||
|
||||
export function ClaimsClient() {
|
||||
const [data, setData] = useState<ClaimResponse[]>([])
|
||||
const [loading, setLoading] = useState(true)
|
||||
const [pageSize, setPageSize] = useState(20)
|
||||
const [userNameById, setUserNameById] = useState<Map<string, string>>(new Map())
|
||||
const [createOpen, setCreateOpen] = useState(false)
|
||||
const [settling, setSettling] = useState<ClaimResponse | null>(null)
|
||||
const [settleOpen, setSettleOpen] = useState(false)
|
||||
const [viewing, setViewing] = useState<ClaimResponse | null>(null)
|
||||
const [viewOpen, setViewOpen] = useState(false)
|
||||
const [editing, setEditing] = useState<ClaimResponse | null>(null)
|
||||
const [editOpen, setEditOpen] = useState(false)
|
||||
|
||||
function openSettle(row: ClaimResponse) {
|
||||
setSettling(row)
|
||||
setSettleOpen(true)
|
||||
}
|
||||
|
||||
function openView(row: ClaimResponse) {
|
||||
setViewing(row)
|
||||
setViewOpen(true)
|
||||
}
|
||||
|
||||
function openEdit(row: ClaimResponse) {
|
||||
setEditing(row)
|
||||
setEditOpen(true)
|
||||
}
|
||||
|
||||
const fetchData = useCallback(async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const [claimsList, usersRes] = await Promise.all([
|
||||
claimsApi.list(),
|
||||
usersApi.list({ pageSize: 200 }),
|
||||
])
|
||||
setUserNameById(new Map(getPaginatedItems(usersRes).map((u) => [u.id, u.fullName])))
|
||||
setData(claimsList)
|
||||
} catch (err) {
|
||||
toast.add({ title: 'Failed to load claims', description: getApiError(err), type: 'error' })
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
fetchData()
|
||||
}, [fetchData])
|
||||
|
||||
const tableConfig = useMemo<TableConfig<ClaimResponse>>(() => ({
|
||||
rowKey: 'id',
|
||||
stickyHeader: true,
|
||||
emptyMessage: 'No claims raised yet.',
|
||||
pagination: { enabled: true, pageSize, pageSizeOptions: [10, 20, 50] },
|
||||
columns: [
|
||||
{
|
||||
key: 'agencyUserId',
|
||||
title: 'Agency User',
|
||||
fields: ['agencyUserId'],
|
||||
minWidth: 180,
|
||||
cellRender: (row) => (
|
||||
<span className="text-sm font-medium">{userNameById.get(row.agencyUserId) ?? '—'}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'details',
|
||||
title: 'Details',
|
||||
fields: ['details'],
|
||||
minWidth: 240,
|
||||
cellRender: (row) => (
|
||||
<span className="text-sm text-muted-foreground line-clamp-2">{row.details}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'status',
|
||||
title: 'Status',
|
||||
fields: ['status'],
|
||||
width: 120,
|
||||
cellRender: (row) => (
|
||||
<Badge variant={row.status === 'Settled' ? 'secondary' : 'default'}>{row.status}</Badge>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'settlementAmount',
|
||||
title: 'Settlement',
|
||||
fields: ['settlementAmount'],
|
||||
width: 140,
|
||||
cellRender: (row) => (
|
||||
<span className="text-sm">{row.settlementAmount != null ? fmtAmount(row.settlementAmount) : '—'}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'createdAt',
|
||||
title: 'Created',
|
||||
fields: [{ key: 'createdAt', transform: (v) => fmtDate(v as string) }],
|
||||
width: 140,
|
||||
},
|
||||
],
|
||||
rowActions: {
|
||||
actions: () => [
|
||||
{
|
||||
action: 'view',
|
||||
label: 'View claim',
|
||||
onClick: openView,
|
||||
},
|
||||
{
|
||||
action: 'edit',
|
||||
label: 'Edit claim',
|
||||
onClick: openEdit,
|
||||
visible: (target) => target.status === 'Open',
|
||||
},
|
||||
{
|
||||
action: 'confirm',
|
||||
label: 'Settle claim',
|
||||
onClick: openSettle,
|
||||
visible: (target) => target.status === 'Open',
|
||||
},
|
||||
],
|
||||
},
|
||||
}), [pageSize, userNameById])
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold text-foreground">Agency Claims</h1>
|
||||
<p className="text-sm text-muted-foreground mt-0.5">
|
||||
Claims raised against a regional agency and their settlement
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={() => setCreateOpen(true)}>
|
||||
<HugeiconsIcon icon={Add01Icon} size={16} strokeWidth={2} />
|
||||
Raise Claim
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<DataTable
|
||||
config={tableConfig}
|
||||
data={data}
|
||||
loading={loading}
|
||||
totalCount={data.length}
|
||||
onServerSideChange={({ page: p }) => {
|
||||
setPageSize(p.pageSize)
|
||||
}}
|
||||
/>
|
||||
|
||||
<ClaimSheet
|
||||
open={createOpen}
|
||||
onClose={() => setCreateOpen(false)}
|
||||
onSuccess={fetchData}
|
||||
/>
|
||||
|
||||
<ClaimSheet
|
||||
open={editOpen}
|
||||
onClose={() => setEditOpen(false)}
|
||||
onSuccess={fetchData}
|
||||
claim={editing}
|
||||
/>
|
||||
|
||||
<ClaimSettleDialog
|
||||
open={settleOpen}
|
||||
onClose={() => setSettleOpen(false)}
|
||||
onSuccess={fetchData}
|
||||
claim={settling}
|
||||
/>
|
||||
|
||||
<ClaimViewSheet
|
||||
open={viewOpen}
|
||||
onClose={() => setViewOpen(false)}
|
||||
claim={viewing}
|
||||
agencyUserName={viewing ? userNameById.get(viewing.agencyUserId) : undefined}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { ClaimsClient } from './_components/claims-client'
|
||||
|
||||
export default function ClaimsPage() {
|
||||
return <ClaimsClient />
|
||||
}
|
||||
Reference in New Issue
Block a user