Add ClaimSettleDialog, ClaimSheet, ClaimViewSheet, and ClaimsClient

distribution_fe/app/(dashboard)/returns-claims/claims/_components/claim-settle-dialog.tsx

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

distribution_fe/app/(dashboard)/returns-claims/claims/_components/claim-sheet.tsx

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

distribution_fe/app/(dashboard)/returns-claims/claims/_components/claim-view-sheet.tsx

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

distribution_fe/app/(dashboard)/returns-claims/claims/_components/claims-client.tsx

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

distribution_fe/app/(dashboard)/returns-claims/claims/page.tsx

@@ -0,0 +1,5 @@
+import { ClaimsClient } from './_components/claims-client'
+
+export default function ClaimsPage() {
+  return <ClaimsClient />
+}