UI changes
This commit is contained in:
@@ -0,0 +1,54 @@
|
||||
'use client'
|
||||
|
||||
import Link from 'next/link'
|
||||
import { HugeiconsIcon } from '@hugeicons/react'
|
||||
import { Package01Icon, ArrowRight01Icon } from '@hugeicons/core-free-icons'
|
||||
import { Card, CardHeader, CardTitle, CardDescription, CardAction } from '@/components/ui/card'
|
||||
|
||||
interface ConfigCategory {
|
||||
title: string
|
||||
description: string
|
||||
href: string
|
||||
icon: typeof Package01Icon
|
||||
}
|
||||
|
||||
const CATEGORIES: ConfigCategory[] = [
|
||||
{
|
||||
title: 'Products',
|
||||
description: 'Serial number, batch, expiry and warranty tracking for catalogue items',
|
||||
href: '/configuration/products',
|
||||
icon: Package01Icon,
|
||||
},
|
||||
]
|
||||
|
||||
export default function configurationPage() {
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-semibold text-foreground">Configuration</h1>
|
||||
<p className="text-sm text-muted-foreground mt-0.5">System-wide settings, grouped by area</p>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{CATEGORIES.map((category) => (
|
||||
<Link key={category.href} href={category.href} className="block">
|
||||
<Card className="h-full transition-shadow hover:shadow-md">
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground">
|
||||
<HugeiconsIcon icon={category.icon} size={18} />
|
||||
</div>
|
||||
<CardTitle>{category.title}</CardTitle>
|
||||
</div>
|
||||
<CardDescription className="mt-3">{category.description}</CardDescription>
|
||||
<CardAction>
|
||||
<HugeiconsIcon icon={ArrowRight01Icon} size={16} className="text-muted-foreground" />
|
||||
</CardAction>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -71,7 +71,7 @@ const STEPS = [
|
||||
n: 3,
|
||||
label: 'Items',
|
||||
title: 'What should be loaded from Shop POs?',
|
||||
help: "Expand a shop to tick items and set quantities. If the main warehouse doesn't have enough stock, use \"Take remaining from another warehouse\" to top up the rest.",
|
||||
help: "Expand a shop to tick items and set quantities. If the main warehouse can't cover an item, a top-up row is added automatically — just pick which other warehouse to take the rest from.",
|
||||
},
|
||||
{
|
||||
n: 4,
|
||||
@@ -321,10 +321,16 @@ function LoadingSheetForm() {
|
||||
let changed = false
|
||||
const next: Record<string, PickedLine> = {}
|
||||
for (const [key, l] of Object.entries(prev)) {
|
||||
const extras = l.extras.filter((e) => e.warehouseId !== warehouseId)
|
||||
let extras = l.extras.filter((e) => e.warehouseId !== warehouseId)
|
||||
const avail = stockByWh[warehouseId]?.[l.itemId] ?? 0
|
||||
const quantity = Math.min(l.quantity, avail)
|
||||
const checked = l.checked && (quantity > 0 || extras.length > 0)
|
||||
// Pre-add an empty top-up row if the new main warehouse leaves this line short
|
||||
// and one isn't already pending, mirroring toggleLine's auto-suggestion.
|
||||
const shortBy = l.remainingQty - quantity - extras.reduce((sum, e) => sum + (Number(e.quantity) || 0), 0)
|
||||
if (checked && shortBy > 0 && !extras.some((e) => !e.warehouseId)) {
|
||||
extras = [...extras, { warehouseId: '', quantity: 0 }]
|
||||
}
|
||||
if (extras.length !== l.extras.length || quantity !== l.quantity || checked !== l.checked) changed = true
|
||||
next[key] = { ...l, extras, quantity, checked }
|
||||
}
|
||||
@@ -452,7 +458,12 @@ function LoadingSheetForm() {
|
||||
const avail = availIn(warehouseId, line.itemId)
|
||||
if (!stockLoaded || avail <= 0) return
|
||||
const quantity = Math.max(0, Math.min(line.remainingQty - extrasTotal(line), avail))
|
||||
setLines((prev) => ({ ...prev, [line.shopPOItemId]: { ...line, checked, quantity } }))
|
||||
// The main warehouse can't cover the full remaining quantity, so a top-up row is
|
||||
// pre-added (still editable/removable) instead of making the user click "Take
|
||||
// remaining from another warehouse" themselves.
|
||||
const shortBy = line.remainingQty - quantity - extrasTotal(line)
|
||||
const extras = shortBy > 0 ? [...line.extras, { warehouseId: '', quantity: 0 }] : line.extras
|
||||
setLines((prev) => ({ ...prev, [line.shopPOItemId]: { ...line, checked, quantity, extras } }))
|
||||
return
|
||||
}
|
||||
setLines((prev) => ({ ...prev, [line.shopPOItemId]: { ...line, checked } }))
|
||||
@@ -912,10 +923,18 @@ function LoadingSheetForm() {
|
||||
<tr>
|
||||
<td className="px-3 pb-2"></td>
|
||||
<td className="px-3 pb-2" colSpan={7}>
|
||||
<span className="mr-3 text-xs text-muted-foreground">{shortBy} will stay open on the PO for another sheet</span>
|
||||
<Button type="button" variant="outline" size="sm" onClick={() => addExtra(line)}>
|
||||
Take remaining from another warehouse
|
||||
</Button>
|
||||
{line.extras.some((e) => !e.warehouseId) ? (
|
||||
<span className="text-xs text-amber-600">
|
||||
{shortBy} short — pick a warehouse above to top it up, or it stays open on the PO for another sheet.
|
||||
</span>
|
||||
) : (
|
||||
<>
|
||||
<span className="mr-3 text-xs text-muted-foreground">{shortBy} will stay open on the PO for another sheet</span>
|
||||
<Button type="button" variant="outline" size="sm" onClick={() => addExtra(line)}>
|
||||
Take remaining from another warehouse
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user