ui fixes
This commit is contained in:
@@ -43,8 +43,12 @@ function newKey() {
|
||||
return `poline-${keySeq}`
|
||||
}
|
||||
|
||||
// Unit price and tax are no longer entered at PO creation — pricing is captured at GRN
|
||||
// receipt (with discount/VAT there). They default to 0 here and stay off the form, but
|
||||
// remain on the payload because the backend line DTO still requires them; a PO prefilled
|
||||
// from an RFQ keeps its negotiated price (below).
|
||||
function emptyLine(): DraftLine {
|
||||
return { key: newKey(), itemId: null, uomId: null, warehouseId: null, qty: "", unitPrice: "", tax: "0.18" }
|
||||
return { key: newKey(), itemId: null, uomId: null, warehouseId: null, qty: "", unitPrice: "0", tax: "0" }
|
||||
}
|
||||
|
||||
function NewPurchaseOrderContent() {
|
||||
@@ -98,8 +102,8 @@ function NewPurchaseOrderContent() {
|
||||
uomId: null,
|
||||
warehouseId: null,
|
||||
qty: String(l.qty),
|
||||
unitPrice: "",
|
||||
tax: "0.18",
|
||||
unitPrice: "0",
|
||||
tax: "0",
|
||||
})
|
||||
)
|
||||
)
|
||||
@@ -124,8 +128,8 @@ function NewPurchaseOrderContent() {
|
||||
uomId: null,
|
||||
warehouseId: null,
|
||||
qty: String(l.qty),
|
||||
unitPrice: cell ? String(cell.unitPrice) : "",
|
||||
tax: "0.18",
|
||||
unitPrice: cell ? String(cell.unitPrice) : "0",
|
||||
tax: "0",
|
||||
}
|
||||
})
|
||||
)
|
||||
@@ -278,8 +282,6 @@ function NewPurchaseOrderContent() {
|
||||
<TableHead className="h-12 w-28 px-3 text-sm">UOM</TableHead>
|
||||
<TableHead className="h-12 w-40 px-3 text-sm">Warehouse</TableHead>
|
||||
<TableHead className="h-12 w-24 px-3 text-sm">Qty</TableHead>
|
||||
<TableHead className="h-12 w-28 px-3 text-sm">Unit price</TableHead>
|
||||
<TableHead className="h-12 w-24 px-3 text-sm">Tax</TableHead>
|
||||
<TableHead className="h-12 w-10 px-3" />
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
@@ -352,30 +354,6 @@ function NewPurchaseOrderContent() {
|
||||
/>
|
||||
<FieldError errors={[errors.qty ? { message: errors.qty } : undefined]} />
|
||||
</TableCell>
|
||||
<TableCell className="px-3 py-3 align-top">
|
||||
<Input
|
||||
type="number"
|
||||
min="0"
|
||||
step="any"
|
||||
value={line.unitPrice}
|
||||
aria-invalid={!!errors.unitPrice}
|
||||
onChange={(e) => updateLine(line.key, { unitPrice: e.target.value })}
|
||||
className="h-11 text-base"
|
||||
/>
|
||||
<FieldError errors={[errors.unitPrice ? { message: errors.unitPrice } : undefined]} />
|
||||
</TableCell>
|
||||
<TableCell className="px-3 py-3 align-top">
|
||||
<Input
|
||||
type="number"
|
||||
min="0"
|
||||
step="0.01"
|
||||
value={line.tax}
|
||||
aria-invalid={!!errors.tax}
|
||||
onChange={(e) => updateLine(line.key, { tax: e.target.value })}
|
||||
className="h-11 text-base"
|
||||
/>
|
||||
<FieldError errors={[errors.tax ? { message: errors.tax } : undefined]} />
|
||||
</TableCell>
|
||||
<TableCell className="px-3 py-3 align-top">
|
||||
<Button type="button" variant="ghost" size="icon" onClick={() => removeLine(line.key)} aria-label="Remove line">
|
||||
<Trash2 className="size-5" />
|
||||
|
||||
@@ -107,18 +107,36 @@ function SidebarContent({
|
||||
pathname: string
|
||||
isMobile: boolean
|
||||
}) {
|
||||
const iconOnly = !isMobile && collapsed
|
||||
|
||||
// Which parent menus are open. Starts with the parent that owns the active
|
||||
// route auto-expanded; user toggles are preserved across navigation.
|
||||
const [expanded, setExpanded] = useState<Record<string, boolean>>({})
|
||||
|
||||
useEffect(() => {
|
||||
const parent = items.find((i) =>
|
||||
i.children?.some((c) => pathname === c.href || pathname.startsWith(`${c.href}/`))
|
||||
)
|
||||
if (parent) {
|
||||
setExpanded((prev) => (prev[parent.code] ? prev : { ...prev, [parent.code]: true }))
|
||||
}
|
||||
}, [pathname, items])
|
||||
|
||||
const toggleExpand = (code: string) =>
|
||||
setExpanded((prev) => ({ ...prev, [code]: !prev[code] }))
|
||||
|
||||
return (
|
||||
<nav
|
||||
className={cn(
|
||||
"flex h-full flex-col rounded-3xl bg-white p-3 shadow-sm ring-1 ring-black/5 transition-[width] duration-200",
|
||||
"flex h-full flex-col rounded-3xl bg-white p-3 shadow-sm ring-1 ring-black/5 transition-[width] duration-300 ease-in-out",
|
||||
!isMobile && (collapsed ? "w-20" : "w-64")
|
||||
)}
|
||||
>
|
||||
{/* Header */}
|
||||
<div
|
||||
className={cn(
|
||||
"mb-10 flex items-center gap-2.5 px-4 py-3",
|
||||
!isMobile && collapsed ? "flex-col-reverse justify-center gap-3 px-0" : "justify-between"
|
||||
"mb-8 flex shrink-0 items-center gap-2.5 px-4 py-3",
|
||||
iconOnly ? "flex-col-reverse justify-center gap-3 px-0" : "justify-between"
|
||||
)}
|
||||
>
|
||||
<Link href="/dashboard" className="flex items-center gap-2.5" onClick={onClose}>
|
||||
@@ -127,7 +145,7 @@ function SidebarContent({
|
||||
<path d="M24 16c-3-8-11-12-16-8s-3 14 6 14c5 0 8.5-2.5 10-6 1.5 3.5 5 6 10 6 9 0 11-10 6-14s-13 0-16 8Z" />
|
||||
</svg>
|
||||
</div>
|
||||
{(!collapsed || isMobile) && (
|
||||
{!iconOnly && (
|
||||
<span className="text-lg font-bold tracking-tight text-slate-900">Hexa ERP</span>
|
||||
)}
|
||||
</Link>
|
||||
@@ -142,55 +160,90 @@ function SidebarContent({
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Nav items */}
|
||||
<ul className="flex flex-col gap-1">
|
||||
{/* Nav items — scrolls internally when it overflows, without a visible
|
||||
scrollbar so the rounded panel stays clean. */}
|
||||
<ul className="flex min-h-0 flex-1 flex-col gap-1 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
|
||||
{items.map((item) => {
|
||||
const isActive =
|
||||
item.href === "/dashboard" ? pathname === item.href : pathname.startsWith(item.href)
|
||||
const hasChildren = !!item.children?.length && !iconOnly
|
||||
const isOpen = !!expanded[item.code]
|
||||
|
||||
return (
|
||||
<li key={item.href}>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center rounded-2xl transition-colors",
|
||||
isActive ? "bg-indigo-50" : "hover:bg-slate-50"
|
||||
)}
|
||||
>
|
||||
<Link
|
||||
href={item.href}
|
||||
title={!isMobile && collapsed ? item.title : undefined}
|
||||
title={iconOnly ? item.title : undefined}
|
||||
onClick={onClose}
|
||||
className={cn(
|
||||
"flex items-center gap-3 rounded-2xl px-4 py-3 text-base font-semibold transition-colors",
|
||||
!isMobile && collapsed && "justify-center px-0",
|
||||
isActive
|
||||
? "bg-indigo-50 text-indigo-600"
|
||||
: "text-slate-700 hover:bg-slate-50"
|
||||
"flex flex-1 items-center gap-3 rounded-2xl px-4 py-3 text-base font-semibold",
|
||||
iconOnly && "justify-center px-0",
|
||||
isActive ? "text-indigo-600" : "text-slate-700"
|
||||
)}
|
||||
>
|
||||
<item.icon
|
||||
className={cn("size-5 shrink-0", isActive ? "text-indigo-600" : "text-slate-400")}
|
||||
/>
|
||||
{(!collapsed || isMobile) && (
|
||||
{!iconOnly && (
|
||||
<>
|
||||
<span className="flex-1">{item.title}</span>
|
||||
{item.chevron && !item.children && !isActive && (
|
||||
<ChevronRight className="size-4 shrink-0 text-slate-300" />
|
||||
{item.chevron && !hasChildren && (
|
||||
<ChevronRight
|
||||
className={cn("size-4 shrink-0", isActive ? "text-indigo-400" : "text-slate-300")}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Link>
|
||||
|
||||
{item.children && (!collapsed || isMobile) && (
|
||||
<ul className="mt-1 flex flex-col gap-0.5 pl-11">
|
||||
{hasChildren && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => toggleExpand(item.code)}
|
||||
aria-label={isOpen ? `Collapse ${item.title}` : `Expand ${item.title}`}
|
||||
aria-expanded={isOpen}
|
||||
className={cn(
|
||||
"mr-2 flex size-7 shrink-0 items-center justify-center rounded-lg transition-colors hover:bg-white/60",
|
||||
isActive ? "text-indigo-500" : "text-slate-400"
|
||||
)}
|
||||
>
|
||||
<ChevronRight
|
||||
className={cn("size-4 transition-transform duration-300 ease-in-out", isOpen && "rotate-90")}
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{hasChildren && (
|
||||
<div
|
||||
className={cn(
|
||||
"grid transition-all duration-300 ease-in-out",
|
||||
isOpen ? "mt-1 grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"
|
||||
)}
|
||||
>
|
||||
<div className="overflow-hidden">
|
||||
<ul className="flex flex-col gap-0.5 pl-11">
|
||||
{(() => {
|
||||
// Longest-matching href wins so a shared prefix (e.g. "Item" and
|
||||
// "Category" both live under /dashboard/products) doesn't light up
|
||||
// more than one sub-item at once.
|
||||
const activeChild = [...item.children]
|
||||
const activeChild = [...item.children!]
|
||||
.filter((c) => pathname === c.href || pathname.startsWith(`${c.href}/`))
|
||||
.sort((a, b) => b.href.length - a.href.length)[0]
|
||||
return item.children.map((child) => {
|
||||
return item.children!.map((child) => {
|
||||
const childActive = child.href === activeChild?.href
|
||||
return (
|
||||
<li key={child.href}>
|
||||
<Link
|
||||
href={child.href}
|
||||
onClick={onClose}
|
||||
tabIndex={isOpen ? undefined : -1}
|
||||
className={cn(
|
||||
"flex items-center gap-2.5 rounded-xl px-3 py-2 text-sm font-medium transition-colors",
|
||||
childActive
|
||||
@@ -208,13 +261,15 @@ function SidebarContent({
|
||||
})
|
||||
})()}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
|
||||
<div className="mt-auto flex items-center justify-center pt-6">
|
||||
<div className="flex items-center justify-center pt-6">
|
||||
<div className="flex size-12 items-center justify-center rounded-2xl bg-slate-50 ring-1 ring-black/5">
|
||||
<svg viewBox="0 0 48 32" className="h-4 w-6 fill-slate-400">
|
||||
<path d="M24 16c-3-8-11-12-16-8s-3 14 6 14c5 0 8.5-2.5 10-6 1.5 3.5 5 6 10 6 9 0 11-10 6-14s-13 0-16 8Z" />
|
||||
|
||||
Reference in New Issue
Block a user