322 lines
17 KiB
TypeScript
322 lines
17 KiB
TypeScript
"use client";
|
|
|
|
import { useCallback, useEffect, useMemo, useState } from "react";
|
|
import Link from "next/link";
|
|
import { Edit, Eye, PackagePlus, Plus, RotateCcw, Trash2, Wrench } from "lucide-react";
|
|
|
|
import ConfirmDialog from "@/components/common/ConfirmDialog";
|
|
import DataTable, { type DataTableColumn } from "@/components/common/DataTable";
|
|
import EmptyState from "@/components/common/EmptyState";
|
|
import SearchInput from "@/components/common/SearchInput";
|
|
import { useToast } from "@/components/common/ToastProvider";
|
|
import InventoryItemDialog from "@/components/inventory/InventoryItemDialog";
|
|
import MasterDataSection from "@/components/inventory/MasterDataSection";
|
|
import StockActionDialog, { type StockAction } from "@/components/inventory/StockActionDialog";
|
|
import { formatMoney, getErrorMessage } from "@/components/inventory/inventory-utils";
|
|
import { Button, buttonVariants } from "@/components/ui/button";
|
|
import { api } from "@/lib/api";
|
|
import { hasPermission } from "@/lib/permissions";
|
|
import type {
|
|
InventoryCategory,
|
|
InventoryItem,
|
|
InventoryItemListResponse,
|
|
InventoryItemPayload,
|
|
InventoryLocation,
|
|
InventoryStockPayload,
|
|
InventorySupplier,
|
|
} from "@/types/inventory";
|
|
import type { CurrentUser } from "@/types/rbac";
|
|
|
|
const pageSize = 10;
|
|
|
|
export default function InventoryPage() {
|
|
const { showToast } = useToast();
|
|
const [items, setItems] = useState<InventoryItem[]>([]);
|
|
const [categories, setCategories] = useState<InventoryCategory[]>([]);
|
|
const [locations, setLocations] = useState<InventoryLocation[]>([]);
|
|
const [suppliers, setSuppliers] = useState<InventorySupplier[]>([]);
|
|
const [currentUser, setCurrentUser] = useState<CurrentUser | null>(null);
|
|
const [total, setTotal] = useState(0);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState("");
|
|
const [formError, setFormError] = useState("");
|
|
const [stockError, setStockError] = useState("");
|
|
const [deleteError, setDeleteError] = useState("");
|
|
const [pending, setPending] = useState(false);
|
|
const [tab, setTab] = useState<"items" | "categories" | "locations" | "suppliers">("items");
|
|
const [search, setSearch] = useState("");
|
|
const [categoryFilter, setCategoryFilter] = useState("all");
|
|
const [locationFilter, setLocationFilter] = useState("all");
|
|
const [supplierFilter, setSupplierFilter] = useState("all");
|
|
const [stockFilter, setStockFilter] = useState<"all" | "low">("all");
|
|
const [activeFilter, setActiveFilter] = useState<"true" | "false" | "all">("true");
|
|
const [page, setPage] = useState(1);
|
|
const [sortKey, setSortKey] = useState("name");
|
|
const [sortDirection, setSortDirection] = useState<"asc" | "desc">("asc");
|
|
const [formOpen, setFormOpen] = useState(false);
|
|
const [stockOpen, setStockOpen] = useState(false);
|
|
const [stockAction, setStockAction] = useState<StockAction>("adjust");
|
|
const [selectedItem, setSelectedItem] = useState<InventoryItem | null>(null);
|
|
const [deleteItem, setDeleteItem] = useState<InventoryItem | null>(null);
|
|
|
|
const loadData = useCallback(async () => {
|
|
setLoading(true);
|
|
setError("");
|
|
try {
|
|
const params = new URLSearchParams();
|
|
params.set("limit", String(pageSize));
|
|
params.set("offset", String((page - 1) * pageSize));
|
|
if (search.trim()) params.set("q", search.trim());
|
|
if (categoryFilter !== "all") params.set("category_id", categoryFilter);
|
|
if (locationFilter !== "all") params.set("location_id", locationFilter);
|
|
if (supplierFilter !== "all") params.set("supplier_id", supplierFilter);
|
|
if (stockFilter === "low") params.set("low_stock", "true");
|
|
if (activeFilter !== "all") params.set("active", activeFilter);
|
|
const [itemResponse, categoryResponse, locationResponse, supplierResponse, meResponse] = await Promise.all([
|
|
api.get<InventoryItemListResponse>(`/inventory/items?${params.toString()}`),
|
|
api.get<InventoryCategory[]>("/inventory/categories"),
|
|
api.get<InventoryLocation[]>("/inventory/locations"),
|
|
api.get<InventorySupplier[]>("/inventory/suppliers"),
|
|
api.get<CurrentUser>("/me"),
|
|
]);
|
|
setItems(itemResponse.data.items);
|
|
setTotal(itemResponse.data.total);
|
|
setCategories(categoryResponse.data);
|
|
setLocations(locationResponse.data);
|
|
setSuppliers(supplierResponse.data);
|
|
setCurrentUser(meResponse.data);
|
|
} catch (err) {
|
|
setError(getErrorMessage(err));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}, [activeFilter, categoryFilter, locationFilter, page, search, stockFilter, supplierFilter]);
|
|
|
|
useEffect(() => {
|
|
queueMicrotask(() => {
|
|
void loadData();
|
|
});
|
|
}, [loadData]);
|
|
|
|
const canCreate = hasPermission(currentUser, "inventory.create");
|
|
const canUpdate = hasPermission(currentUser, "inventory.update");
|
|
const canDelete = hasPermission(currentUser, "inventory.delete");
|
|
const canAdjust = hasPermission(currentUser, "inventory.stock.adjust");
|
|
const canReserve = hasPermission(currentUser, "inventory.stock.reserve");
|
|
const canConsume = hasPermission(currentUser, "inventory.stock.consume");
|
|
const canManageMasterdata = hasPermission(currentUser, "inventory.manage.masterdata");
|
|
const pageCount = Math.max(1, Math.ceil(total / pageSize));
|
|
const currentPage = Math.min(page, pageCount);
|
|
|
|
const sortedItems = useMemo(() => [...items].sort((first, second) => {
|
|
const firstValue = String(first[sortKey as keyof InventoryItem] ?? "").toLowerCase();
|
|
const secondValue = String(second[sortKey as keyof InventoryItem] ?? "").toLowerCase();
|
|
if (firstValue === secondValue) return 0;
|
|
const result = firstValue > secondValue ? 1 : -1;
|
|
return sortDirection === "asc" ? result : -result;
|
|
}), [items, sortDirection, sortKey]);
|
|
|
|
const columns: DataTableColumn<InventoryItem>[] = [
|
|
{ key: "sku", label: "SKU", sortable: true, render: (item) => <span className="font-medium text-slate-950">{item.sku}</span> },
|
|
{ key: "name", label: "Name", sortable: true, render: (item) => item.name },
|
|
{ key: "category", label: "Kategorie", render: (item) => item.category?.name ?? "Keine" },
|
|
{ key: "manufacturer", label: "Hersteller", sortable: true, render: (item) => item.manufacturer ?? "Keine Angabe" },
|
|
{ key: "quantity_on_hand", label: "Bestand", sortable: true, render: (item) => item.quantity_on_hand },
|
|
{ key: "quantity_reserved", label: "Reserviert", sortable: true, render: (item) => item.quantity_reserved },
|
|
{ key: "quantity_available", label: "Verfügbar", sortable: true, render: (item) => <span className={item.quantity_available <= item.reorder_level ? "font-semibold text-amber-700" : ""}>{item.quantity_available}</span> },
|
|
{ key: "reorder_level", label: "Mindestbestand", sortable: true, render: (item) => item.reorder_level },
|
|
{ key: "location", label: "Lagerort", render: (item) => item.location?.name ?? "Kein Lagerort" },
|
|
{ key: "selling_price_cents", label: "VK", sortable: true, render: (item) => formatMoney(item.selling_price_cents, item.currency) },
|
|
{ key: "is_active", label: "Status", sortable: true, render: (item) => item.is_active ? "Aktiv" : "Inaktiv" },
|
|
{
|
|
key: "actions",
|
|
label: "Aktionen",
|
|
className: "px-4 py-3 text-right",
|
|
render: (item) => (
|
|
<div className="flex justify-end gap-2">
|
|
<Link href={`/inventory/items/${item.id}`} className={buttonVariants({ variant: "ghost", size: "icon-sm" })} title="Details"><Eye size={16} /></Link>
|
|
{canUpdate && <Button type="button" variant="ghost" size="icon-sm" title="Bearbeiten" onClick={() => { setSelectedItem(item); setFormError(""); setFormOpen(true); }}><Edit size={16} /></Button>}
|
|
{canAdjust && <Button type="button" variant="ghost" size="icon-sm" title="Bestand anpassen" onClick={() => openStock(item, "adjust")}><Wrench size={16} /></Button>}
|
|
{canReserve && <Button type="button" variant="ghost" size="icon-sm" title="Reservieren" onClick={() => openStock(item, "reserve")}><PackagePlus size={16} /></Button>}
|
|
{canConsume && <Button type="button" variant="ghost" size="icon-sm" title="Verbrauch buchen" onClick={() => openStock(item, "consume")}><RotateCcw size={16} /></Button>}
|
|
{canDelete && <Button type="button" variant="destructive" size="icon-sm" title="Deaktivieren" onClick={() => { setDeleteItem(item); setDeleteError(""); }}><Trash2 size={16} /></Button>}
|
|
</div>
|
|
),
|
|
},
|
|
];
|
|
|
|
function openStock(item: InventoryItem, action: StockAction) {
|
|
setSelectedItem(item);
|
|
setStockAction(action);
|
|
setStockError("");
|
|
setStockOpen(true);
|
|
}
|
|
|
|
function handleSort(key: string) {
|
|
if (sortKey === key) {
|
|
setSortDirection((current) => (current === "asc" ? "desc" : "asc"));
|
|
return;
|
|
}
|
|
setSortKey(key);
|
|
setSortDirection("asc");
|
|
}
|
|
|
|
async function saveItem(payload: InventoryItemPayload) {
|
|
setPending(true);
|
|
setFormError("");
|
|
try {
|
|
if (selectedItem) {
|
|
await api.put<InventoryItem>(`/inventory/items/${selectedItem.id}`, payload);
|
|
showToast({ type: "success", title: "Artikel aktualisiert", description: selectedItem.sku });
|
|
} else {
|
|
const response = await api.post<InventoryItem>("/inventory/items", payload);
|
|
showToast({ type: "success", title: "Artikel angelegt", description: response.data.sku });
|
|
}
|
|
setFormOpen(false);
|
|
await loadData();
|
|
} catch (err) {
|
|
const message = getErrorMessage(err);
|
|
setFormError(message);
|
|
showToast({ type: "error", title: "Artikel konnte nicht gespeichert werden", description: message });
|
|
} finally {
|
|
setPending(false);
|
|
}
|
|
}
|
|
|
|
async function saveStock(payload: InventoryStockPayload) {
|
|
if (!selectedItem) return;
|
|
setPending(true);
|
|
setStockError("");
|
|
try {
|
|
await api.post<InventoryItem>(`/inventory/items/${selectedItem.id}/stock/${stockAction}`, payload);
|
|
showToast({ type: "success", title: "Bestand gebucht", description: selectedItem.sku });
|
|
setStockOpen(false);
|
|
await loadData();
|
|
} catch (err) {
|
|
const message = getErrorMessage(err);
|
|
setStockError(message);
|
|
showToast({ type: "error", title: "Bestand konnte nicht gebucht werden", description: message });
|
|
} finally {
|
|
setPending(false);
|
|
}
|
|
}
|
|
|
|
async function confirmDelete() {
|
|
if (!deleteItem) return;
|
|
setPending(true);
|
|
setDeleteError("");
|
|
try {
|
|
await api.delete(`/inventory/items/${deleteItem.id}`);
|
|
showToast({ type: "success", title: "Artikel deaktiviert", description: deleteItem.sku });
|
|
setDeleteItem(null);
|
|
await loadData();
|
|
} catch (err) {
|
|
const message = getErrorMessage(err);
|
|
setDeleteError(message);
|
|
showToast({ type: "error", title: "Artikel konnte nicht deaktiviert werden", description: message });
|
|
} finally {
|
|
setPending(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-slate-950">Lager / Ersatzteile</h1>
|
|
<p className="mt-1 text-sm text-slate-500">{total} Artikel im aktuellen Filter</p>
|
|
</div>
|
|
{canCreate && <Button type="button" onClick={() => { setSelectedItem(null); setFormError(""); setFormOpen(true); }}><Plus size={16} />Artikel anlegen</Button>}
|
|
</div>
|
|
|
|
<div className="flex flex-wrap gap-2">
|
|
{(["items", "categories", "locations", "suppliers"] as const).map((value) => (
|
|
<Button key={value} type="button" variant={tab === value ? "default" : "outline"} onClick={() => setTab(value)}>
|
|
{{ items: "Artikel", categories: "Kategorien", locations: "Lagerorte", suppliers: "Lieferanten" }[value]}
|
|
</Button>
|
|
))}
|
|
</div>
|
|
|
|
{tab === "items" ? (
|
|
<>
|
|
<div className="flex flex-col gap-3 rounded-lg border bg-white p-4 xl:flex-row xl:items-center">
|
|
<SearchInput value={search} onChange={(value) => { setSearch(value); setPage(1); }} placeholder="Artikel suchen" />
|
|
<select value={categoryFilter} onChange={(event) => { setCategoryFilter(event.target.value); setPage(1); }} className="h-8 rounded-lg border px-2 text-sm">
|
|
<option value="all">Alle Kategorien</option>
|
|
{categories.map((category) => <option key={category.id} value={category.id}>{category.name}</option>)}
|
|
</select>
|
|
<select value={locationFilter} onChange={(event) => { setLocationFilter(event.target.value); setPage(1); }} className="h-8 rounded-lg border px-2 text-sm">
|
|
<option value="all">Alle Lagerorte</option>
|
|
{locations.map((location) => <option key={location.id} value={location.id}>{location.name}</option>)}
|
|
</select>
|
|
<select value={supplierFilter} onChange={(event) => { setSupplierFilter(event.target.value); setPage(1); }} className="h-8 rounded-lg border px-2 text-sm">
|
|
<option value="all">Alle Lieferanten</option>
|
|
{suppliers.map((supplier) => <option key={supplier.id} value={supplier.id}>{supplier.name}</option>)}
|
|
</select>
|
|
<select value={stockFilter} onChange={(event) => { setStockFilter(event.target.value as "all" | "low"); setPage(1); }} className="h-8 rounded-lg border px-2 text-sm">
|
|
<option value="all">Alle Bestände</option>
|
|
<option value="low">Niedriger Bestand</option>
|
|
</select>
|
|
<select value={activeFilter} onChange={(event) => { setActiveFilter(event.target.value as "true" | "false" | "all"); setPage(1); }} className="h-8 rounded-lg border px-2 text-sm">
|
|
<option value="true">Aktiv</option>
|
|
<option value="false">Inaktiv</option>
|
|
<option value="all">Alle</option>
|
|
</select>
|
|
</div>
|
|
|
|
{!loading && !error && total === 0 && !search ? (
|
|
<EmptyState
|
|
title="Noch keine Ersatzteile vorhanden."
|
|
description="Lege den ersten Artikel an, um Bestand, Preise und Lieferanten zu pflegen."
|
|
action={canCreate ? <Button type="button" onClick={() => setFormOpen(true)}><Plus size={16} />Artikel anlegen</Button> : undefined}
|
|
/>
|
|
) : (
|
|
<DataTable
|
|
columns={columns}
|
|
rows={sortedItems}
|
|
rowKey={(item) => item.id}
|
|
sortKey={sortKey}
|
|
sortDirection={sortDirection}
|
|
loading={loading}
|
|
error={error}
|
|
emptyTitle="Keine Artikel gefunden."
|
|
emptyDescription="Passe Suche oder Filter an."
|
|
onSort={handleSort}
|
|
/>
|
|
)}
|
|
|
|
<div className="flex items-center justify-between text-sm text-slate-600">
|
|
<span>Seite {currentPage} von {pageCount}</span>
|
|
<div className="flex gap-2">
|
|
<Button type="button" variant="outline" disabled={currentPage === 1} onClick={() => setPage((current) => Math.max(1, current - 1))}>Zurück</Button>
|
|
<Button type="button" variant="outline" disabled={currentPage === pageCount} onClick={() => setPage((current) => Math.min(pageCount, current + 1))}>Weiter</Button>
|
|
</div>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div className="grid gap-4 xl:grid-cols-2">
|
|
{tab === "categories" && <MasterDataSection title="Kategorien" kind="categories" entries={categories} canManage={canManageMasterdata} onChanged={() => void loadData()} />}
|
|
{tab === "locations" && <MasterDataSection title="Lagerorte" kind="locations" entries={locations} canManage={canManageMasterdata} onChanged={() => void loadData()} />}
|
|
{tab === "suppliers" && <MasterDataSection title="Lieferanten" kind="suppliers" entries={suppliers} canManage={canManageMasterdata} onChanged={() => void loadData()} />}
|
|
</div>
|
|
)}
|
|
|
|
<InventoryItemDialog key={`item-${selectedItem?.id ?? "new"}-${formOpen}`} open={formOpen} item={selectedItem} categories={categories} locations={locations} suppliers={suppliers} pending={pending} serverError={formError} onOpenChange={setFormOpen} onSubmit={saveItem} />
|
|
<StockActionDialog key={`stock-${selectedItem?.id ?? "none"}-${stockAction}-${stockOpen}`} open={stockOpen} item={selectedItem} action={stockAction} pending={pending} serverError={stockError} onOpenChange={setStockOpen} onSubmit={saveStock} />
|
|
<ConfirmDialog
|
|
open={Boolean(deleteItem)}
|
|
title="Artikel deaktivieren"
|
|
description="Artikel mit Bewegungen werden nicht hart gelöscht, sondern deaktiviert."
|
|
confirmLabel="Deaktivieren"
|
|
pending={pending}
|
|
onOpenChange={(open) => !open && setDeleteItem(null)}
|
|
onConfirm={confirmDelete}
|
|
>
|
|
<div className="space-y-2">
|
|
<p>{deleteItem?.sku} · {deleteItem?.name}</p>
|
|
{deleteError && <p className="text-sm text-red-600">{deleteError}</p>}
|
|
</div>
|
|
</ConfirmDialog>
|
|
</div>
|
|
);
|
|
}
|