feat: add warehouse and bin management API with mock data implementation

- Implemented warehouses API with methods for listing, creating, and managing bins.
- Added wastage API to handle stock write-offs and integrate with stock adjustments.
- Created auth token management for storing and retrieving access tokens.
- Developed error mapping for consistent user-facing error messages.
- Introduced client-side validations for GRN, master data, and procurement processes.
- Defined common types for pagination, problem details, and various master data entities.
- Established procurement and stock management types to support frontend functionality.
This commit is contained in:
2026-07-13 17:11:40 +05:30
parent 4e84a15db7
commit 7ac30bb454
79 changed files with 14042 additions and 44 deletions
@@ -4,13 +4,18 @@ import { useEffect, useState } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import {
Building2,
ChevronRight,
ClipboardList,
HelpCircle,
LayoutGrid,
Menu,
Package,
PackageCheck,
Settings,
ShoppingCart,
Truck,
Warehouse,
X,
type LucideIcon,
} from "lucide-react"
@@ -20,6 +25,11 @@ import { cn } from "@/lib/utils"
const navItems: { title: string; href: string; icon: LucideIcon; chevron?: boolean }[] = [
{ title: "Dashboard", href: "/dashboard", icon: LayoutGrid },
{ title: "Products", href: "/dashboard/products", icon: Package, chevron: true },
{ title: "Vendors", href: "/dashboard/vendors", icon: Truck, chevron: true },
{ title: "Procurement", href: "/dashboard/procurement", icon: ClipboardList, chevron: true },
{ title: "Receiving", href: "/dashboard/receiving/grn", icon: PackageCheck, chevron: true },
{ title: "Stock", href: "/dashboard/stock", icon: Warehouse, chevron: true },
{ title: "Warehouses", href: "/dashboard/warehouse", icon: Building2, chevron: true },
{ title: "Orders", href: "/dashboard/orders", icon: ShoppingCart, chevron: true },
{ title: "Settings", href: "/dashboard/settings", icon: Settings, chevron: true },
{ title: "Help", href: "/dashboard/help", icon: HelpCircle },
@@ -0,0 +1,84 @@
"use client"
import { Fragment } from "react"
import Link from "next/link"
import { usePathname } from "next/navigation"
import { Breadcrumb, BreadcrumbItem, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"
// Per-segment display labels. Deliberately separate from Header.tsx's
// titleFromPath (which resolves one *full* path to a page title) — a
// breadcrumb needs a label per *segment*, including grouping segments that
// have no page of their own (e.g. "receiving", "grn").
const SEGMENT_LABELS: Record<string, string> = {
dashboard: "Dashboard",
products: "Items",
uoms: "UOMs",
categories: "Categories",
new: "New",
edit: "Edit",
vendors: "Vendors",
warehouse: "Warehouses",
receiving: "Receiving",
grn: "Goods Receipt Notes",
stock: "Stock",
enquiry: "Enquiry",
ledger: "Ledger",
valuation: "Valuation",
transfers: "Transfers",
adjustments: "Adjustments",
counts: "Counts",
"reorder-alerts": "Reorder Alerts",
wastage: "Wastage",
procurement: "Procurement",
requisitions: "Requisitions",
rfqs: "RFQs",
"purchase-orders": "Purchase Orders",
"purchase-returns": "Purchase Returns",
}
function labelFor(segment: string): string {
if (SEGMENT_LABELS[segment]) return SEGMENT_LABELS[segment]
if (/^[0-9]+$/.test(segment)) return `#${segment}`
return segment.charAt(0).toUpperCase() + segment.slice(1)
}
const linkClass =
"truncate transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring rounded-sm"
export function Breadcrumbs() {
const pathname = usePathname() || "/dashboard"
const segments = pathname.split("/").filter(Boolean)
// Nothing to show above the dashboard root itself.
if (segments.length <= 1) return null
const crumbs = segments.map((segment, i) => ({
href: "/" + segments.slice(0, i + 1).join("/"),
label: labelFor(segment),
}))
return (
<Breadcrumb className="mb-4">
<BreadcrumbList>
{crumbs.map((crumb, i) => {
const isLast = i === crumbs.length - 1
return (
<Fragment key={crumb.href}>
<BreadcrumbItem>
{isLast ? (
<BreadcrumbPage>{crumb.label}</BreadcrumbPage>
) : (
<Link href={crumb.href} className={linkClass}>
{crumb.label}
</Link>
)}
</BreadcrumbItem>
{!isLast && <BreadcrumbSeparator />}
</Fragment>
)
})}
</BreadcrumbList>
</Breadcrumb>
)
}
@@ -17,7 +17,60 @@ import {
} from "@/components/ui/dropdown-menu"
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
const PROCUREMENT_TITLES: Record<string, string> = {
"/dashboard/procurement": "Procurement",
"/dashboard/procurement/requisitions": "Requisitions",
"/dashboard/procurement/requisitions/new": "New Requisition",
"/dashboard/procurement/rfqs": "RFQs",
"/dashboard/procurement/rfqs/new": "New RFQ",
"/dashboard/procurement/purchase-orders": "Purchase Orders",
"/dashboard/procurement/purchase-orders/new": "New Purchase Order",
"/dashboard/procurement/purchase-returns": "Purchase Returns",
"/dashboard/procurement/purchase-returns/new": "New Purchase Return",
}
const STOCK_TITLES: Record<string, string> = {
"/dashboard/stock": "Stock Management",
"/dashboard/stock/enquiry": "Stock Enquiry",
"/dashboard/stock/ledger": "Stock Ledger",
"/dashboard/stock/valuation": "Valuation",
"/dashboard/stock/transfers": "Stock Transfers",
"/dashboard/stock/transfers/new": "New Transfer",
"/dashboard/stock/adjustments": "Stock Adjustments",
"/dashboard/stock/adjustments/new": "New Adjustment",
"/dashboard/stock/counts": "Stock Counts",
"/dashboard/stock/counts/new": "New Count",
"/dashboard/stock/reorder-alerts": "Reorder Alerts",
"/dashboard/stock/wastage": "Wastage",
"/dashboard/stock/wastage/new": "Record Wastage",
}
function titleFromPath(pathname: string) {
if (pathname === "/dashboard/receiving/grn") return "Goods Receipt Notes"
if (pathname === "/dashboard/receiving/grn/new") return "Create Goods Receipt Note"
if (/^\/dashboard\/receiving\/grn\/[^/]+$/.test(pathname)) return "Goods Receipt Note"
if (STOCK_TITLES[pathname]) return STOCK_TITLES[pathname]
if (/^\/dashboard\/stock\/transfers\/[^/]+$/.test(pathname)) return "Stock Transfer"
if (/^\/dashboard\/stock\/counts\/[^/]+$/.test(pathname)) return "Stock Count"
if (PROCUREMENT_TITLES[pathname]) return PROCUREMENT_TITLES[pathname]
if (/^\/dashboard\/procurement\/requisitions\/[^/]+$/.test(pathname)) return "Requisition"
if (/^\/dashboard\/procurement\/rfqs\/[^/]+$/.test(pathname)) return "RFQ"
if (/^\/dashboard\/procurement\/purchase-orders\/[^/]+$/.test(pathname)) return "Purchase Order"
if (pathname === "/dashboard/warehouse") return "Warehouses"
if (/^\/dashboard\/warehouse\/[^/]+$/.test(pathname)) return "Warehouse"
if (pathname === "/dashboard/vendors") return "Vendors"
if (/^\/dashboard\/vendors\/[^/]+$/.test(pathname)) return "View Vendor"
if (pathname === "/dashboard/products") return "Items"
if (pathname === "/dashboard/products/new") return "New Item"
if (pathname === "/dashboard/products/uoms") return "Units of Measure"
if (pathname === "/dashboard/products/categories") return "Categories"
if (/^\/dashboard\/products\/[^/]+$/.test(pathname)) return "Item"
const segment = pathname.split("/").filter(Boolean).pop() ?? "dashboard"
return segment.charAt(0).toUpperCase() + segment.slice(1)
}
@@ -0,0 +1,45 @@
import { Badge } from "@/components/ui/badge"
import { PurchaseOrderStatus, RequisitionStatus, RfqStatus } from "@/types/procurement"
// Fixed width (not w-fit) so every status pill is the same size regardless of
// label length, same convention as components/receiving/status-badges.tsx.
const badgeSize = "h-6 w-32 justify-center px-2.5 py-1 text-sm"
function requisitionClass(status: RequisitionStatus) {
return status === "Draft" ? "bg-warning/10 text-warning border-transparent" : "bg-success/10 text-success border-transparent"
}
export function RequisitionStatusBadge({ status }: { status: RequisitionStatus }) {
return (
<Badge variant="outline" className={`${badgeSize} ${requisitionClass(status)}`}>
{status}
</Badge>
)
}
function rfqClass(status: RfqStatus) {
return status === "Open" ? "bg-success/10 text-success border-transparent" : "bg-muted text-muted-foreground border-transparent"
}
export function RfqStatusBadge({ status }: { status: RfqStatus }) {
return (
<Badge variant="outline" className={`${badgeSize} ${rfqClass(status)}`}>
{status}
</Badge>
)
}
function poClass(status: PurchaseOrderStatus) {
if (status === "Draft" || status === "PendingApproval") return "bg-warning/10 text-warning border-transparent"
if (status === "Cancelled") return "bg-destructive/10 text-destructive border-transparent"
if (status === "Closed") return "bg-muted text-muted-foreground border-transparent"
return "bg-success/10 text-success border-transparent" // Approved / PartiallyReceived / FullyReceived
}
export function PoStatusBadge({ status }: { status: PurchaseOrderStatus }) {
return (
<Badge variant="outline" className={`${badgeSize} ${poClass(status)}`}>
{status}
</Badge>
)
}
@@ -0,0 +1,34 @@
import { Badge } from "@/components/ui/badge"
import { GrnStatus, HoldStatus } from "@/types/grn"
// Fixed width (not w-fit) so every status pill is the same size regardless of
// label length ("Draft" vs "Confirmed" vs "Available").
const badgeSize = "h-6 w-28 justify-center px-2.5 py-1 text-sm"
function grnClass(status: GrnStatus) {
if (status === "Draft") return "bg-warning/10 text-warning border-transparent"
if (status === "Confirmed") return "bg-success/10 text-success border-transparent"
return "bg-destructive/10 text-destructive border-transparent" // Closed
}
export function GrnStatusBadge({ status }: { status: GrnStatus }) {
return (
<Badge variant="outline" className={`${badgeSize} ${grnClass(status)}`}>
{status}
</Badge>
)
}
function holdClass(status: HoldStatus) {
if (status === "OnHold") return "bg-warning/10 text-warning border-transparent"
if (status === "Rejected") return "bg-destructive/10 text-destructive border-transparent"
return "bg-success/10 text-success border-transparent" // Available
}
export function HoldStatusBadge({ status }: { status: HoldStatus }) {
return (
<Badge variant="outline" className={`${badgeSize} ${holdClass(status)}`}>
{status}
</Badge>
)
}
@@ -0,0 +1,35 @@
import { Badge } from "@/components/ui/badge"
import { AdjustmentStatus, CountStatus, TransferStatus } from "@/types/stock"
// Same fixed-size, red/green/yellow convention as components/receiving/status-badges.tsx.
const badgeSize = "h-6 w-28 justify-center px-2.5 py-1 text-sm"
const warning = "bg-warning/10 text-warning border-transparent"
const success = "bg-success/10 text-success border-transparent"
const destructive = "bg-destructive/10 text-destructive border-transparent"
export function TransferStatusBadge({ status }: { status: TransferStatus }) {
const tone = status === "Received" ? success : status === "Closed" ? destructive : warning
return (
<Badge variant="outline" className={`${badgeSize} ${tone}`}>
{status}
</Badge>
)
}
export function CountStatusBadge({ status }: { status: CountStatus }) {
const tone = status === "Posted" ? success : warning
return (
<Badge variant="outline" className={`${badgeSize} ${tone}`}>
{status}
</Badge>
)
}
export function AdjustmentStatusBadge({ status }: { status: AdjustmentStatus }) {
return (
<Badge variant="outline" className={`${badgeSize} ${success}`}>
{status}
</Badge>
)
}
@@ -0,0 +1,201 @@
"use client"
import * as React from "react"
import { Select as SelectPrimitive } from "@base-ui/react/select"
import { cn } from "@/lib/utils"
import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react"
const Select = SelectPrimitive.Root
function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {
return (
<SelectPrimitive.Group
data-slot="select-group"
className={cn("scroll-my-1 p-1", className)}
{...props}
/>
)
}
function SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {
return (
<SelectPrimitive.Value
data-slot="select-value"
className={cn("flex flex-1 text-left", className)}
{...props}
/>
)
}
function SelectTrigger({
className,
size = "default",
children,
...props
}: SelectPrimitive.Trigger.Props & {
size?: "sm" | "default"
}) {
return (
<SelectPrimitive.Trigger
data-slot="select-trigger"
data-size={size}
className={cn(
"flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
>
{children}
<SelectPrimitive.Icon
render={
<ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
}
/>
</SelectPrimitive.Trigger>
)
}
function SelectContent({
className,
children,
side = "bottom",
sideOffset = 4,
align = "center",
alignOffset = 0,
alignItemWithTrigger = true,
...props
}: SelectPrimitive.Popup.Props &
Pick<
SelectPrimitive.Positioner.Props,
"align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger"
>) {
return (
<SelectPrimitive.Portal>
<SelectPrimitive.Positioner
side={side}
sideOffset={sideOffset}
align={align}
alignOffset={alignOffset}
alignItemWithTrigger={alignItemWithTrigger}
className="isolate z-50"
>
<SelectPrimitive.Popup
data-slot="select-content"
data-align-trigger={alignItemWithTrigger}
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-lg bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 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 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}
>
<SelectScrollUpButton />
<SelectPrimitive.List>{children}</SelectPrimitive.List>
<SelectScrollDownButton />
</SelectPrimitive.Popup>
</SelectPrimitive.Positioner>
</SelectPrimitive.Portal>
)
}
function SelectLabel({
className,
...props
}: SelectPrimitive.GroupLabel.Props) {
return (
<SelectPrimitive.GroupLabel
data-slot="select-label"
className={cn("px-1.5 py-1 text-xs text-muted-foreground", className)}
{...props}
/>
)
}
function SelectItem({
className,
children,
...props
}: SelectPrimitive.Item.Props) {
return (
<SelectPrimitive.Item
data-slot="select-item"
className={cn(
"relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
className
)}
{...props}
>
<SelectPrimitive.ItemText className="flex flex-1 shrink-0 gap-2 whitespace-nowrap">
{children}
</SelectPrimitive.ItemText>
<SelectPrimitive.ItemIndicator
render={
<span className="pointer-events-none absolute right-2 flex size-4 items-center justify-center" />
}
>
<CheckIcon className="pointer-events-none" />
</SelectPrimitive.ItemIndicator>
</SelectPrimitive.Item>
)
}
function SelectSeparator({
className,
...props
}: SelectPrimitive.Separator.Props) {
return (
<SelectPrimitive.Separator
data-slot="select-separator"
className={cn("pointer-events-none -mx-1 my-1 h-px bg-border", className)}
{...props}
/>
)
}
function SelectScrollUpButton({
className,
...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {
return (
<SelectPrimitive.ScrollUpArrow
data-slot="select-scroll-up-button"
className={cn(
"top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
>
<ChevronUpIcon
/>
</SelectPrimitive.ScrollUpArrow>
)
}
function SelectScrollDownButton({
className,
...props
}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {
return (
<SelectPrimitive.ScrollDownArrow
data-slot="select-scroll-down-button"
className={cn(
"bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
className
)}
{...props}
>
<ChevronDownIcon
/>
</SelectPrimitive.ScrollDownArrow>
)
}
export {
Select,
SelectContent,
SelectGroup,
SelectItem,
SelectLabel,
SelectScrollDownButton,
SelectScrollUpButton,
SelectSeparator,
SelectTrigger,
SelectValue,
}