Merge pull request 'Dev' (#48) from dev into production
Reviewed-on: #48
This commit was merged in pull request #48.
This commit is contained in:
@@ -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>
|
||||
<h1 className="text-2xl font-semibold text-foreground">Edit Shop PO</h1>
|
||||
<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>
|
||||
|
||||
@@ -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)}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user