Add user selection to Shop PO flow

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

@@ -10,6 +10,8 @@ import { toast } from '@/components/ui/toast'
 import { shopPos as shopPosApi, getApiError } from '@/lib/api/index'
 import type { ShopPOResponse, ShopPOStatus } from '@/types/api'
 
+import { ConfirmShopPODialog } from '../_components/confirm-shop-po-dialog'
+
 const PO_STATUS_VARIANT: Record<ShopPOStatus, 'default' | 'secondary' | 'destructive'> = {
   Pending: 'secondary',
   PartiallyFulfilled: 'secondary',
@@ -41,6 +43,7 @@ export default function ShopPOViewPage() {
   const params = useParams<{ id: string }>()
   const [po, setPo] = useState<ShopPOResponse | null>(null)
   const [loading, setLoading] = useState(true)
+  const [confirmOpen, setConfirmOpen] = useState(false)
 
   useEffect(() => {
     let cancelled = false
@@ -62,17 +65,6 @@ export default function ShopPOViewPage() {
     }
   }, [params.id, router])
 
-  async function handleConfirm() {
-    if (!po) return
-    try {
-      const updated = await shopPosApi.confirm(po.id)
-      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' })
-    }
-  }
-
   async function handleCancel() {
     if (!po) return
     try {
@@ -123,7 +115,7 @@ export default function ShopPOViewPage() {
 
         <div className="flex items-center gap-2">
           {!po.confirmedAt && po.status !== 'Cancelled' && (
-            <Button type="button" onClick={handleConfirm}>
+            <Button type="button" onClick={() => setConfirmOpen(true)}>
               Confirm PO
             </Button>
           )}
@@ -211,6 +203,15 @@ export default function ShopPOViewPage() {
           </table>
         </div>
       </div>
+
+      <ConfirmShopPODialog
+        open={confirmOpen}
+        onClose={() => setConfirmOpen(false)}
+        onSuccess={() => {
+          shopPosApi.get(po.id).then(setPo)
+        }}
+        po={po}
+      />
     </div>
   )
 }