New_REP_SYSTEM/ERP_Distribution
8
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor/main flow #47

Merged
DeepnaPooja merged 3 commits from refactor/main_flow into dev 2026-09-28 13:09:07 +05:30
Conversation 0 Commits 3 Files Changed 4
+133 -20
4 changed files with 133 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
distribution_fe/app/(dashboard)/sales/[id]/edit/page.tsx
+61 -4
View File
@@ -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>
distribution_fe/app/(dashboard)/sales/_components/sales-client.tsx
+4 -13
View File
@@ -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)}
distribution_fe/app/(dashboard)/sales/new/page.tsx
+1 -1
View File
@@ -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
+67 -2
View File
@@ -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>