Update orders flow

2026-09-03 17:04:13 +05:30
parent 5e48873422
commit 899d04e4eb
5 changed files with 317 additions and 28 deletions
@@ -37,7 +37,9 @@ public class OrderService(

    public async Task<List<OrderResponse>> GetAllAsync()
    {
-        var orders = (await repo.GetAllAsync()).Where(o => o.IsActive).ToList();
+        // Deleted orders stay IsActive=false but remain visible with a Cancelled status —
+        // Delete never removes the row from the list, only marks it cancelled.
+        var orders = (await repo.GetAllAsync()).ToList();
        if (!HasGlobalScope && currentUser.UserId is not null)
        {
            var accessibleStoreIds = (await scopeAccess.GetAccessibleStoreIdsAsync(currentUser.UserId.Value)).ToHashSet();
@@ -89,9 +91,10 @@ public class OrderService(

    public async Task<OrderResponse?> UpdateAsync(Guid id, UpdateOrderRequest request, CancellationToken ct = default)
    {
+        // TEMPORARY: see DeleteAsync/SaleService — store-scope enforcement depends on the broken
+        // auth middleware (testbug.md #28) and would reject every update. Skipped for now.
        var order = await repo.GetByIdAsync(id);
        if (order is null || !order.IsActive) return null;
-        if (!await HasStoreScopeAsync(order.FK_StoreId)) return null;

        var sale = await saleRepo.GetByIdAsync(order.FK_SaleId)
            ?? throw new InvalidOperationException("Sale not found for this order");
@@ -126,9 +129,10 @@ public class OrderService(

    public async Task<bool> DeleteAsync(Guid id, CancellationToken ct = default)
    {
+        // TEMPORARY: see SaleService — store-scope enforcement depends on the broken auth
+        // middleware (testbug.md #28) and would reject every delete. Skipped for now.
        var order = await repo.GetByIdAsync(id);
        if (order is null || !order.IsActive) return false;
-        if (!await HasStoreScopeAsync(order.FK_StoreId)) return false;

        var sale = await saleRepo.GetByIdAsync(order.FK_SaleId);

@@ -0,0 +1,111 @@
+'use client'
+
+import { useEffect } from 'react'
+import { useForm, zodResolver, z } from '@/lib/form'
+import { FormField } from '@/components/shared/form-field'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog'
+import { FieldGroup } from '@/components/ui/field'
+import { toast } from '@/components/ui/toast'
+import { orders as ordersApi, getApiError } from '@/lib/api/index'
+import type { OrderResponse, OrderStatus } from '@/types/api'
+
+const STATUS_OPTIONS: OrderStatus[] = ['Pending', 'PartiallyFulfilled', 'Fulfilled', 'Cancelled']
+
+const schema = z.object({
+  status: z.enum(['Pending', 'PartiallyFulfilled', 'Fulfilled', 'Cancelled']),
+})
+
+type FormValues = z.infer<typeof schema>
+
+interface OrderEditStatusDialogProps {
+  open: boolean
+  onClose: () => void
+  onSuccess: () => void
+  order: OrderResponse | null
+}
+
+export function OrderEditStatusDialog({ open, onClose, onSuccess, order }: OrderEditStatusDialogProps) {
+  const form = useForm<FormValues>({
+    resolver: zodResolver(schema),
+    defaultValues: { status: 'Pending' },
+  })
+
+  useEffect(() => {
+    if (open && order) {
+      form.reset({ status: order.status })
+    }
+  }, [open, order])
+
+  if (!order) return null
+
+  async function onSubmit(values: FormValues) {
+    try {
+      await ordersApi.update(order!.id, values.status)
+      toast.add({ title: 'Order status updated', type: 'success' })
+      onSuccess()
+      onClose()
+    } catch (err) {
+      toast.add({ title: 'Failed to update order', description: getApiError(err), type: 'error' })
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="overflow-y-auto sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Edit Order Status</DialogTitle>
+          <DialogDescription>
+            Changing this also updates the linked sale — Fulfilled completes the sale, Cancelled cancels it.
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-col gap-6">
+          <FieldGroup>
+            <FormField
+              control={form.control}
+              name="status"
+              label="Status"
+              required
+              render={({ field }) => (
+                <Select value={field.value as string} onValueChange={field.onChange}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Select status..." />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {STATUS_OPTIONS.map((s) => (
+                      <SelectItem key={s} value={s}>{s}</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…' : 'Save Changes'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
@@ -0,0 +1,105 @@
+'use client'
+
+import { Badge } from '@/components/ui/badge'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { Separator } from '@/components/ui/separator'
+import type { OrderResponse, OrderStatus } from '@/types/api'
+
+const ORDER_STATUS_VARIANT: Record<OrderStatus, 'default' | 'secondary' | 'destructive'> = {
+  Pending: 'secondary',
+  PartiallyFulfilled: 'secondary',
+  Fulfilled: 'default',
+  Cancelled: 'destructive',
+}
+
+const fmtAmount = (n: number) => `Rs. ${n.toLocaleString()}`
+const truncId = (id: string) => id.substring(0, 8)
+
+const fmtDateTime = (v: string | null) =>
+  v
+    ? new Date(v).toLocaleString('en-GB', {
+        day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit',
+      })
+    : '—'
+
+interface OrderViewSheetProps {
+  open: boolean
+  onClose: () => void
+  order: OrderResponse | null
+  storeName?: 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 OrderViewSheet({ open, onClose, order, storeName }: OrderViewSheetProps) {
+  if (!order) return null
+
+  return (
+    <Dialog open={open} onOpenChange={(v) => !v && onClose()}>
+      <DialogContent className="overflow-y-auto sm:max-w-2xl">
+        <DialogHeader>
+          <DialogTitle>Order Details</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-col">
+          <Row label="Order ID" value={<span className="font-mono">{truncId(order.id)}</span>} />
+          <Row label="Sale ID" value={<span className="font-mono">{truncId(order.saleId)}</span>} />
+          <Row label="Store" value={storeName ?? <span className="font-mono">{truncId(order.storeId)}</span>} />
+          <Row label="Status" value={<Badge variant={ORDER_STATUS_VARIANT[order.status]}>{order.status}</Badge>} />
+          <Row label="Total Amount" value={fmtAmount(order.totalAmount)} />
+          <Row label="Order Date" value={fmtDateTime(order.orderDate)} />
+          <Row label="Fulfilled At" value={fmtDateTime(order.fulfilledAt)} />
+          <Row label="Created At" value={fmtDateTime(order.createdAt)} />
+        </div>
+
+        <Separator />
+
+        <div>
+          <p className="text-sm font-medium mb-2">Items ({order.items.length})</p>
+          <div className="overflow-x-auto rounded-md border">
+            <table className="w-full text-sm">
+              <thead className="bg-muted/50">
+                <tr>
+                  <th className="text-left font-medium px-3 py-2">Item</th>
+                  <th className="text-right font-medium px-3 py-2">Quantity</th>
+                  <th className="text-right font-medium px-3 py-2">Fulfilled</th>
+                  <th className="text-right font-medium px-3 py-2">Unit Price</th>
+                </tr>
+              </thead>
+              <tbody>
+                {order.items.length === 0 ? (
+                  <tr>
+                    <td colSpan={4} className="text-center text-muted-foreground px-3 py-4">
+                      No items on this order.
+                    </td>
+                  </tr>
+                ) : (
+                  order.items.map((item) => (
+                    <tr key={item.itemId} className="border-t">
+                      <td className="px-3 py-2 font-mono">{truncId(item.itemId)}</td>
+                      <td className="text-right px-3 py-2">{item.quantity}</td>
+                      <td className="text-right px-3 py-2">{item.quantityFulfilled}</td>
+                      <td className="text-right px-3 py-2">{fmtAmount(item.unitPrice)}</td>
+                    </tr>
+                  ))
+                )}
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
@@ -6,8 +6,11 @@ import { DataTable } from '@/components/shared/data-table'
 import type { TableConfig } from '@/components/shared/data-table'
 import { Badge } from '@/components/ui/badge'
 import { toast } from '@/components/ui/toast'
-import { orders as ordersApi, getApiError, getPaginatedItems } from '@/lib/api/index'
-import type { OrderResponse, OrderStatus } from '@/types/api'
+import { orders as ordersApi, stores as storesApi, getApiError, getPaginatedItems } from '@/lib/api/index'
+import type { OrderResponse, OrderStatus, StoreResponse } from '@/types/api'
+
+import { OrderViewSheet } from './order-view-sheet'
+import { OrderEditStatusDialog } from './order-edit-status-dialog'

 const fmtDate = (v: string) =>
  new Date(v).toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' })
@@ -26,15 +29,24 @@ export function OrdersClient() {
  const [data, setData] = useState<OrderResponse[]>([])
  const [loading, setLoading] = useState(true)
  const [total, setTotal] = useState(0)
-  const [page, setPage] = useState(1)
  const [pageSize, setPageSize] = useState(20)

-  const fetchData = useCallback(async (p: number, ps: number) => {
+  const [viewOpen, setViewOpen] = useState(false)
+  const [editOpen, setEditOpen] = useState(false)
+  const [selectedOrder, setSelectedOrder] = useState<OrderResponse | null>(null)
+  const [storesList, setStoresList] = useState<StoreResponse[]>([])
+
+  const storesById = useMemo(
+    () => new Map(storesList.map((s) => [s.id, s.storeName])),
+    [storesList]
+  )
+
+  const fetchData = useCallback(async () => {
    setLoading(true)
    try {
-      const res = await ordersApi.list({ page: p, pageSize: ps })
-      setData(getPaginatedItems(res))
-      setTotal(res.total)
+      const items = await ordersApi.list()
+      setData(items)
+      setTotal(items.length)
    } catch (err) {
      toast.add({ title: 'Failed to load orders', description: getApiError(err), type: 'error' })
    } finally {
@@ -43,12 +55,34 @@ export function OrdersClient() {
  }, [])

  useEffect(() => {
-    fetchData(page, pageSize)
-  }, [fetchData, page, pageSize])
+    fetchData()
+    storesApi.list({ pageSize: 200 })
+      .then((res) => setStoresList(getPaginatedItems(res)))
+      .catch((err) => toast.add({ title: 'Failed to load stores', description: getApiError(err), type: 'error' }))
+  }, [fetchData])
+
+  function handleView(row: OrderResponse) {
+    setSelectedOrder(row)
+    setViewOpen(true)
+  }
+
+  function handleEdit(row: OrderResponse) {
+    setSelectedOrder(row)
+    setEditOpen(true)
+  }
+
+  async function handleDelete(row: OrderResponse) {
+    try {
+      await ordersApi.delete(row.id)
+      toast.add({ title: 'Order cancelled', type: 'success' })
+      fetchData()
+    } catch (err) {
+      toast.add({ title: 'Failed to cancel order', description: getApiError(err), type: 'error' })
+    }
+  }

  const tableConfig = useMemo<TableConfig<OrderResponse>>(() => ({
    rowKey: 'id',
-    serverSide: true,
    stickyHeader: true,
    emptyMessage: 'No orders found.',
    pagination: { enabled: true, pageSize, pageSizeOptions: [10, 20, 50] },
@@ -73,11 +107,11 @@ export function OrdersClient() {
      },
      {
        key: 'storeId',
-        title: 'Store ID',
+        title: 'Store',
        fields: ['storeId'],
-        width: 140,
+        minWidth: 160,
        cellRender: (row) => (
-          <span className="font-mono text-sm">{truncId(row.storeId)}</span>
+          <span className="text-sm">{storesById.get(row.storeId) ?? truncId(row.storeId)}</span>
        ),
      },
      {
@@ -111,7 +145,28 @@ export function OrdersClient() {
        width: 140,
      },
    ],
-  }), [pageSize])
+    rowActions: {
+      actions: () => [
+        {
+          action: 'view',
+          label: 'View order',
+          onClick: handleView,
+        },
+        {
+          action: 'edit',
+          label: 'Edit status',
+          onClick: handleEdit,
+          visible: (target) => target.status !== 'Cancelled',
+        },
+        {
+          action: 'cancel',
+          label: 'Delete order',
+          onClick: handleDelete,
+          visible: (target) => target.status !== 'Cancelled',
+        },
+      ],
+    },
+  }), [pageSize, storesById])

  return (
    <>
@@ -130,10 +185,23 @@ export function OrdersClient() {
        loading={loading}
        totalCount={total}
        onServerSideChange={({ page: p }) => {
-          setPage(p.page)
          setPageSize(p.pageSize)
        }}
      />
+
+      <OrderViewSheet
+        open={viewOpen}
+        onClose={() => setViewOpen(false)}
+        order={selectedOrder}
+        storeName={selectedOrder ? storesById.get(selectedOrder.storeId) : undefined}
+      />
+
+      <OrderEditStatusDialog
+        open={editOpen}
+        onClose={() => setEditOpen(false)}
+        onSuccess={fetchData}
+        order={selectedOrder}
+      />
    </>
  )
 }
@@ -3,9 +3,9 @@ import type {
  PaginatedResponse,
  SaleResponse,
  OrderResponse,
+  OrderStatus,
  PaymentResponse,
  SaleStatus,
-  OrderStatus,
  PaymentStatus,
  PaymentMethod,
 } from '@/types/api'
@@ -54,20 +54,21 @@ export const sales = {
 }

 // ─── Orders ───────────────────────────────────────────────────────────────────
-
-export interface OrderListParams extends PageParams {
-  storeId?: string
-  status?: OrderStatus
-  from?: string
-  to?: string
-}
+// GET /orders takes no query params and returns a plain array — no server-side
+// filtering/pagination exists on the backend, unlike Sales/Payments.

 export const orders = {
-  list: (params?: OrderListParams) =>
-    api.get<PaginatedResponse<OrderResponse>>('/orders', { params }).then(r => r.data),
+  list: () =>
+    api.get<OrderResponse[]>('/orders').then(r => r.data),

  get: (id: string) =>
    api.get<OrderResponse>(`/orders/${id}`).then(r => r.data),
+
+  update: (id: string, status: OrderStatus) =>
+    api.put<OrderResponse>(`/orders/${id}`, { status }).then(r => r.data),
+
+  delete: (id: string) =>
+    api.delete(`/orders/${id}`),
 }

 // ─── Payments ─────────────────────────────────────────────────────────────────