Add PO confirmation btutton and the status badge

distribution_fe/app/(dashboard)/sales/[id]/edit/page.tsx

@@ -16,16 +16,18 @@ import {
   SelectValue,
 } from '@/components/ui/select'
 import { Button } from '@/components/ui/button'
+import { Badge } from '@/components/ui/badge'
 import { Separator } from '@/components/ui/separator'
 import { toast } from '@/components/ui/toast'
 import {
   shopPos as shopPosApi,
   items as itemsApi,
   priceLists as priceListsApi,
+  users as usersApi,
   getApiError,
   getPaginatedItems,
 } from '@/lib/api/index'
-import type { ItemSummaryResponse, ShopPOResponse } from '@/types/api'
+import type { ItemSummaryResponse, ShopPOResponse, UserResponse } from '@/types/api'
 
 const lineItemSchema = z.object({
   itemId: z.string().min(1, 'Item is required'),
@@ -51,6 +53,9 @@ export default function EditShopPOPage() {
   const [po, setPo] = useState<ShopPOResponse | null>(null)
   const [itemsList, setItemsList] = useState<ItemSummaryResponse[]>([])
   const [loading, setLoading] = useState(true)
+  const [usersList, setUsersList] = useState<UserResponse[]>([])
+  const [confirmedByUserId, setConfirmedByUserId] = useState('')
+  const [confirming, setConfirming] = useState(false)
 
   const form = useForm<FormValues>({
     resolver: zodResolver(schema),
@@ -71,10 +76,11 @@ export default function EditShopPOPage() {
   )
 
   useEffect(() => {
-    Promise.all([shopPosApi.get(id), itemsApi.list({ pageSize: 200 })])
-      .then(([poRes, items]) => {
+    Promise.all([shopPosApi.get(id), itemsApi.list({ pageSize: 200 }), usersApi.list({ pageSize: 200 })])
+      .then(([poRes, items, users]) => {
         setPo(poRes)
         setItemsList(getPaginatedItems(items))
+        setUsersList(getPaginatedItems(users))
         form.reset({
           items: poRes.items
             .filter((i) => i.isActive)
@@ -88,6 +94,20 @@ export default function EditShopPOPage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id])
 
+  async function handleConfirmPO() {
+    if (!po || !confirmedByUserId) return
+    setConfirming(true)
+    try {
+      const updated = await shopPosApi.confirm(po.id, confirmedByUserId)
+      setPo(updated)
+      toast.add({ title: 'Shop PO confirmed', type: 'success' })
+    } catch (err) {
+      toast.add({ title: 'Failed to confirm Shop PO', description: getApiError(err), type: 'error' })
+    } finally {
+      setConfirming(false)
+    }
+  }
+
   async function resolveAndSetPrice(index: number, itemId: string) {
     const today = new Date().toISOString().slice(0, 10)
     if (po) {
@@ -126,7 +146,14 @@ export default function EditShopPOPage() {
           Back
         </Button>
         <div>
+          <div className="flex items-center gap-2">
             <h1 className="text-2xl font-semibold text-foreground">Edit Shop PO</h1>
+            {po.confirmedAt ? (
+              <Badge variant="default">Confirmed</Badge>
+            ) : (
+              <Badge variant="outline">Unconfirmed</Badge>
+            )}
+          </div>
           <p className="text-sm text-muted-foreground">
             {po.storeName} — items can only be changed before the PO is confirmed.
           </p>
@@ -136,6 +163,7 @@ export default function EditShopPOPage() {
       {locked && (
         <p className="rounded-xl border border-destructive/40 p-4 text-sm text-destructive">
           This Shop PO is {po.confirmedAt ? 'confirmed' : 'cancelled'} and can no longer be edited.
+          {po.confirmedAt && po.confirmedByName && ` Confirmed by ${po.confirmedByName}.`}
         </p>
       )}
 
@@ -271,6 +299,35 @@ export default function EditShopPOPage() {
                 Cancel
               </Button>
             </div>
+
+            {!locked && (
+              <>
+                <Separator className="my-4" />
+                <h3 className="text-sm font-medium text-foreground">Confirm PO</h3>
+                <p className="mt-1 text-xs text-muted-foreground">
+                  Select who is confirming this PO, then confirm it.
+                </p>
+                <div className="mt-3 flex flex-col gap-2">
+                  <Select value={confirmedByUserId} onValueChange={(v) => setConfirmedByUserId(v ?? '')}>
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="Select user..." />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {usersList.map((user) => (
+                        <SelectItem key={user.id} value={user.id}>{user.fullName}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                  <Button
+                    type="button"
+                    disabled={!confirmedByUserId || confirming}
+                    onClick={handleConfirmPO}
+                  >
+                    {confirming ? 'Confirming...' : 'Confirm PO'}
+                  </Button>
+                </div>
+              </>
+            )}
           </div>
         </div>
       </form>

distribution_fe/app/(dashboard)/sales/_components/sales-client.tsx

@@ -27,7 +27,6 @@ import {
 } from '@/lib/api/index'
 import type { ShopPOResponse, ShopPOStatus, UserResponse, RouteResponse, StoreResponse } from '@/types/api'
 
-import { ConfirmShopPODialog } from './confirm-shop-po-dialog'
 import { CancelShopPODialog } from './cancel-shop-po-dialog'
 
 const ALL = '__all__'
@@ -63,8 +62,6 @@ export function SalesClient() {
   const [shopId, setShopId] = useState('')
   const [confirmedFilter, setConfirmedFilter] = useState<ConfirmedFilter>('all')
 
-  const [confirmOpen, setConfirmOpen] = useState(false)
-  const [selectedPO, setSelectedPO] = useState<ShopPOResponse | null>(null)
   const [cancelOpen, setCancelOpen] = useState(false)
   const [cancelPO, setCancelPO] = useState<ShopPOResponse | null>(null)
 
@@ -124,8 +121,7 @@ export function SalesClient() {
   }
 
   function handleConfirm(row: ShopPOResponse) {
-    setSelectedPO(row)
-    setConfirmOpen(true)
+    router.push(`/sales/${row.id}/edit`)
   }
 
   function handleCancel(row: ShopPOResponse) {
@@ -194,14 +190,15 @@ export function SalesClient() {
         minWidth: 160,
         cellRender: (row) =>
           row.confirmedByName ? (
-            <div className="flex flex-col">
+            <div className="flex flex-col gap-1">
+              <Badge variant="default" className="w-fit">Confirmed</Badge>
               <span className="text-sm font-medium">{row.confirmedByName}</span>
               {row.confirmedByRole && (
                 <span className="text-xs text-muted-foreground">{row.confirmedByRole}</span>
               )}
             </div>
           ) : (
-            <span className="text-sm text-muted-foreground">—</span>
+            <Badge variant="outline" className="w-fit">Unconfirmed</Badge>
           ),
       },
       {
@@ -365,12 +362,6 @@ export function SalesClient() {
         }}
       />
 
-      <ConfirmShopPODialog
-        open={confirmOpen}
-        onClose={() => setConfirmOpen(false)}
-        onSuccess={() => fetchData(page, pageSize)}
-        po={selectedPO}
-      />
       <CancelShopPODialog
         open={cancelOpen}
         onClose={() => setCancelOpen(false)}