Merge pull request 'Refactor/main flow' (#47) from refactor/main_flow into dev

Reviewed-on: #47

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 })])
+    Promise.all([shopPosApi.get(id), itemsApi.list({ pageSize: 200 }), usersApi.list({ pageSize: 200 })])
-      .then(([poRes, items]) => {
+      .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)
+    router.push(`/sales/${row.id}/edit`)
-    setConfirmOpen(true)
   }
 
   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)}

distribution_fe/app/(dashboard)/sales/new/page.tsx

@@ -211,7 +211,7 @@ export default function NewShopPOPage() {
               </p>
             </div>
             <div className="flex items-center gap-2">
-              <Button type="button" variant="outline" size="sm" onClick={() => router.push('/catalogue/items')}>
+              <Button type="button" variant="outline" size="sm" onClick={() => window.open('/catalogue/items', '_blank', 'noopener,noreferrer')}>
                 <HugeiconsIcon icon={Add01Icon} size={16} />
                 Add Product
               </Button>

distribution_fe/components/ui/select.tsx

@@ -5,7 +5,9 @@ import { Select as SelectPrimitive } from "@base-ui/react/select"
 
 import { cn } from "@/lib/utils"
 import { HugeiconsIcon } from "@hugeicons/react"
-import { UnfoldMoreIcon, Tick02Icon, ArrowUp01Icon, ArrowDown01Icon } from "@hugeicons/core-free-icons"
+import { UnfoldMoreIcon, Tick02Icon, ArrowUp01Icon, ArrowDown01Icon, Search01Icon } from "@hugeicons/core-free-icons"
+
+const SEARCH_THRESHOLD = 7
 
 function collectSelectItems(children: React.ReactNode): Array<{ value: unknown; label: string }> {
   const items: Array<{ value: unknown; label: string }> = []
@@ -66,6 +68,57 @@ function getItemLabel(children: React.ReactNode): string | undefined {
   return undefined
 }
 
+function filterSelectChildren(children: React.ReactNode, query: string): React.ReactNode {
+  const normalizedQuery = query.trim().toLowerCase()
+  if (!normalizedQuery) return children
+
+  const filtered = React.Children.map(children, (child) => {
+    if (!React.isValidElement<{ value?: unknown; label?: string; children?: React.ReactNode }>(child)) {
+      return child
+    }
+
+    if ("value" in child.props) {
+      const label = child.props.label ?? getItemLabel(child.props.children) ?? ""
+      return label.toLowerCase().includes(normalizedQuery) ? child : null
+    }
+
+    if (child.props.children) {
+      const filteredChildren = filterSelectChildren(child.props.children, query)
+      if (React.Children.count(filteredChildren) === 0) return null
+      return React.cloneElement(child, undefined, filteredChildren)
+    }
+
+    return child
+  })
+
+  return filtered
+}
+
+function SelectSearchInput({
+  query,
+  onQueryChange,
+}: {
+  query: string
+  onQueryChange: (value: string) => void
+}) {
+  return (
+    <div
+      data-slot="select-search"
+      className="sticky top-0 z-10 flex items-center gap-1.5 rounded-t-2xl border-b border-border/50 bg-popover px-2.5 py-1.5"
+    >
+      <HugeiconsIcon icon={Search01Icon} strokeWidth={2} className="size-3.5 shrink-0 text-muted-foreground" />
+      <input
+        autoFocus
+        value={query}
+        onChange={(event) => onQueryChange(event.target.value)}
+        onKeyDown={(event) => event.stopPropagation()}
+        placeholder="Search..."
+        className="w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground"
+      />
+    </div>
+  )
+}
+
 function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
   return (
     <SelectPrimitive.Group
@@ -129,6 +182,11 @@ function SelectContent({
     SelectPrimitive.Positioner.Props,
     "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger" | "collisionAvoidance"
   >) {
+  const [query, setQuery] = React.useState("")
+  const itemCount = React.useMemo(() => collectSelectItems(children).length, [children])
+  const showSearch = itemCount > SEARCH_THRESHOLD
+  const filteredChildren = showSearch ? filterSelectChildren(children, query) : children
+
   return (
     <SelectPrimitive.Portal>
       <SelectPrimitive.Positioner
@@ -146,8 +204,15 @@ function SelectContent({
           className={cn("relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-2xl bg-popover text-popover-foreground shadow-lg ring-1 ring-foreground/5 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className )}
           {...props}
         >
+          {showSearch && <SelectSearchInput query={query} onQueryChange={setQuery} />}
           <SelectScrollUpButton />
-          <SelectPrimitive.List>{children}</SelectPrimitive.List>
+          <SelectPrimitive.List>
+            {React.Children.count(filteredChildren) === 0 ? (
+              <div className="px-2.5 py-2 text-sm text-muted-foreground">No results found.</div>
+            ) : (
+              filteredChildren
+            )}
+          </SelectPrimitive.List>
           <SelectScrollDownButton />
         </SelectPrimitive.Popup>
       </SelectPrimitive.Positioner>