inventory

client/src/components/AppShell.tsx

@@ -9,6 +9,7 @@ const links = [
   { to: "/crm/customers", label: "Customers" },
   { to: "/crm/vendors", label: "Vendors" },
   { to: "/inventory/items", label: "Inventory" },
+  { to: "/inventory/warehouses", label: "Warehouses" },
   { to: "/planning/gantt", label: "Gantt" },
 ];
 

client/src/lib/api.ts

@@ -27,6 +27,9 @@ import type {
   InventoryItemStatus,
   InventoryItemSummaryDto,
   InventoryItemType,
+  WarehouseDetailDto,
+  WarehouseInput,
+  WarehouseSummaryDto,
 } from "@mrp/shared/dist/inventory/types.js";
 
 export class ApiError extends Error {
@@ -315,6 +318,32 @@ export const api = {
       token
     );
   },
+  getWarehouses(token: string) {
+    return request<WarehouseSummaryDto[]>("/api/v1/inventory/warehouses", undefined, token);
+  },
+  getWarehouse(token: string, warehouseId: string) {
+    return request<WarehouseDetailDto>(`/api/v1/inventory/warehouses/${warehouseId}`, undefined, token);
+  },
+  createWarehouse(token: string, payload: WarehouseInput) {
+    return request<WarehouseDetailDto>(
+      "/api/v1/inventory/warehouses",
+      {
+        method: "POST",
+        body: JSON.stringify(payload),
+      },
+      token
+    );
+  },
+  updateWarehouse(token: string, warehouseId: string, payload: WarehouseInput) {
+    return request<WarehouseDetailDto>(
+      `/api/v1/inventory/warehouses/${warehouseId}`,
+      {
+        method: "PUT",
+        body: JSON.stringify(payload),
+      },
+      token
+    );
+  },
   getGanttDemo(token: string) {
     return request<{ tasks: GanttTaskDto[]; links: GanttLinkDto[] }>("/api/v1/gantt/demo", undefined, token);
   },

client/src/main.tsx

@@ -18,6 +18,9 @@ import { GanttPage } from "./modules/gantt/GanttPage";
 import { InventoryDetailPage } from "./modules/inventory/InventoryDetailPage";
 import { InventoryFormPage } from "./modules/inventory/InventoryFormPage";
 import { InventoryItemsPage } from "./modules/inventory/InventoryItemsPage";
+import { WarehouseDetailPage } from "./modules/inventory/WarehouseDetailPage";
+import { WarehouseFormPage } from "./modules/inventory/WarehouseFormPage";
+import { WarehousesPage } from "./modules/inventory/WarehousesPage";
 import { ThemeProvider } from "./theme/ThemeProvider";
 import "./index.css";
 
@@ -50,6 +53,8 @@ const router = createBrowserRouter([
             children: [
               { path: "/inventory/items", element: <InventoryItemsPage /> },
               { path: "/inventory/items/:itemId", element: <InventoryDetailPage /> },
+              { path: "/inventory/warehouses", element: <WarehousesPage /> },
+              { path: "/inventory/warehouses/:warehouseId", element: <WarehouseDetailPage /> },
             ],
           },
           {
@@ -66,6 +71,8 @@ const router = createBrowserRouter([
             children: [
               { path: "/inventory/items/new", element: <InventoryFormPage mode="create" /> },
               { path: "/inventory/items/:itemId/edit", element: <InventoryFormPage mode="edit" /> },
+              { path: "/inventory/warehouses/new", element: <WarehouseFormPage mode="create" /> },
+              { path: "/inventory/warehouses/:warehouseId/edit", element: <WarehouseFormPage mode="edit" /> },
             ],
           },
           {

client/src/modules/inventory/WarehouseDetailPage.tsx

@@ -0,0 +1,90 @@
+import type { WarehouseDetailDto, WarehouseLocationDto } from "@mrp/shared/dist/inventory/types.js";
+import { permissions } from "@mrp/shared";
+import { useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+
+import { useAuth } from "../../auth/AuthProvider";
+import { api, ApiError } from "../../lib/api";
+
+export function WarehouseDetailPage() {
+  const { token, user } = useAuth();
+  const { warehouseId } = useParams();
+  const [warehouse, setWarehouse] = useState<WarehouseDetailDto | null>(null);
+  const [status, setStatus] = useState("Loading warehouse...");
+
+  const canManage = user?.permissions.includes(permissions.inventoryWrite) ?? false;
+
+  useEffect(() => {
+    if (!token || !warehouseId) {
+      return;
+    }
+
+    api
+      .getWarehouse(token, warehouseId)
+      .then((nextWarehouse) => {
+        setWarehouse(nextWarehouse);
+        setStatus("Warehouse loaded.");
+      })
+      .catch((error: unknown) => {
+        const message = error instanceof ApiError ? error.message : "Unable to load warehouse.";
+        setStatus(message);
+      });
+  }, [token, warehouseId]);
+
+  if (!warehouse) {
+    return <div className="rounded-[28px] border border-line/70 bg-surface/90 p-8 text-sm text-muted shadow-panel">{status}</div>;
+  }
+
+  return (
+    <section className="space-y-4">
+      <div className="rounded-[28px] border border-line/70 bg-surface/90 p-6 shadow-panel 2xl:p-7">
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Warehouse Detail</p>
+            <h3 className="mt-3 text-3xl font-bold text-text">{warehouse.code}</h3>
+            <p className="mt-2 text-base text-text">{warehouse.name}</p>
+            <p className="mt-3 text-sm text-muted">Last updated {new Date(warehouse.updatedAt).toLocaleString()}.</p>
+          </div>
+          <div className="flex flex-wrap gap-3">
+            <Link to="/inventory/warehouses" className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-4 py-3 text-sm font-semibold text-text">
+              Back to warehouses
+            </Link>
+            {canManage ? (
+              <Link to={`/inventory/warehouses/${warehouse.id}/edit`} className="inline-flex items-center justify-center rounded-2xl bg-brand px-5 py-3 text-sm font-semibold text-white">
+                Edit warehouse
+              </Link>
+            ) : null}
+          </div>
+        </div>
+      </div>
+      <div className="grid gap-4 xl:grid-cols-[minmax(0,0.85fr)_minmax(0,1.15fr)]">
+        <article className="rounded-[28px] border border-line/70 bg-surface/90 p-6 shadow-panel 2xl:p-7">
+          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Notes</p>
+          <p className="mt-4 whitespace-pre-line text-sm leading-7 text-text">{warehouse.notes || "No warehouse notes recorded."}</p>
+          <div className="mt-8 rounded-2xl border border-line/70 bg-page/70 px-4 py-4 text-sm text-muted">
+            Created {new Date(warehouse.createdAt).toLocaleDateString()}
+          </div>
+        </article>
+        <section className="rounded-[28px] border border-line/70 bg-surface/90 p-6 shadow-panel 2xl:p-7">
+          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Locations</p>
+          <h4 className="mt-3 text-xl font-bold text-text">Stock locations</h4>
+          {warehouse.locations.length === 0 ? (
+            <div className="mt-6 rounded-3xl border border-dashed border-line/70 bg-page/60 px-6 py-12 text-center text-sm text-muted">
+              No stock locations have been defined for this warehouse yet.
+            </div>
+          ) : (
+            <div className="mt-6 grid gap-3 xl:grid-cols-2">
+              {warehouse.locations.map((location: WarehouseLocationDto) => (
+                <article key={location.id} className="rounded-3xl border border-line/70 bg-page/60 px-4 py-4">
+                  <div className="text-sm font-semibold text-text">{location.code}</div>
+                  <div className="mt-1 text-sm text-text">{location.name}</div>
+                  <div className="mt-2 text-xs leading-6 text-muted">{location.notes || "No notes."}</div>
+                </article>
+              ))}
+            </div>
+          )}
+        </section>
+      </div>
+    </section>
+  );
+}

client/src/modules/inventory/WarehouseFormPage.tsx

@@ -0,0 +1,172 @@
+import type { WarehouseInput, WarehouseLocationInput } from "@mrp/shared/dist/inventory/types.js";
+import { useEffect, useState } from "react";
+import { Link, useNavigate, useParams } from "react-router-dom";
+
+import { useAuth } from "../../auth/AuthProvider";
+import { api, ApiError } from "../../lib/api";
+import { emptyWarehouseInput, emptyWarehouseLocationInput } from "./config";
+
+export function WarehouseFormPage({ mode }: { mode: "create" | "edit" }) {
+  const navigate = useNavigate();
+  const { warehouseId } = useParams();
+  const { token } = useAuth();
+  const [form, setForm] = useState<WarehouseInput>(emptyWarehouseInput);
+  const [status, setStatus] = useState(mode === "create" ? "Create a new warehouse." : "Loading warehouse...");
+  const [isSaving, setIsSaving] = useState(false);
+
+  useEffect(() => {
+    if (mode !== "edit" || !token || !warehouseId) {
+      return;
+    }
+
+    api
+      .getWarehouse(token, warehouseId)
+      .then((warehouse) => {
+        setForm({
+          code: warehouse.code,
+          name: warehouse.name,
+          notes: warehouse.notes,
+          locations: warehouse.locations.map((location: WarehouseLocationInput) => ({
+            code: location.code,
+            name: location.name,
+            notes: location.notes,
+          })),
+        });
+        setStatus("Warehouse loaded.");
+      })
+      .catch((error: unknown) => {
+        const message = error instanceof ApiError ? error.message : "Unable to load warehouse.";
+        setStatus(message);
+      });
+  }, [mode, token, warehouseId]);
+
+  function updateField<Key extends keyof WarehouseInput>(key: Key, value: WarehouseInput[Key]) {
+    setForm((current: WarehouseInput) => ({ ...current, [key]: value }));
+  }
+
+  function updateLocation(index: number, nextLocation: WarehouseLocationInput) {
+    setForm((current: WarehouseInput) => ({
+      ...current,
+      locations: current.locations.map((location: WarehouseLocationInput, locationIndex: number) =>
+        locationIndex === index ? nextLocation : location
+      ),
+    }));
+  }
+
+  function addLocation() {
+    setForm((current: WarehouseInput) => ({
+      ...current,
+      locations: [...current.locations, emptyWarehouseLocationInput],
+    }));
+  }
+
+  function removeLocation(index: number) {
+    setForm((current: WarehouseInput) => ({
+      ...current,
+      locations: current.locations.filter((_location: WarehouseLocationInput, locationIndex: number) => locationIndex !== index),
+    }));
+  }
+
+  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!token) {
+      return;
+    }
+
+    setIsSaving(true);
+    setStatus("Saving warehouse...");
+
+    try {
+      const saved =
+        mode === "create" ? await api.createWarehouse(token, form) : await api.updateWarehouse(token, warehouseId ?? "", form);
+      navigate(`/inventory/warehouses/${saved.id}`);
+    } catch (error: unknown) {
+      const message = error instanceof ApiError ? error.message : "Unable to save warehouse.";
+      setStatus(message);
+      setIsSaving(false);
+    }
+  }
+
+  return (
+    <form className="space-y-6" onSubmit={handleSubmit}>
+      <section className="rounded-[28px] border border-line/70 bg-surface/90 p-6 shadow-panel 2xl:p-7">
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Warehouse Editor</p>
+            <h3 className="mt-3 text-2xl font-bold text-text">{mode === "create" ? "New Warehouse" : "Edit Warehouse"}</h3>
+          </div>
+          <Link
+            to={mode === "create" ? "/inventory/warehouses" : `/inventory/warehouses/${warehouseId}`}
+            className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-4 py-3 text-sm font-semibold text-text"
+          >
+            Cancel
+          </Link>
+        </div>
+      </section>
+      <section className="space-y-5 rounded-[28px] border border-line/70 bg-surface/90 p-6 shadow-panel 2xl:p-7">
+        <div className="grid gap-4 xl:grid-cols-2">
+          <label className="block">
+            <span className="mb-2 block text-sm font-semibold text-text">Warehouse code</span>
+            <input value={form.code} onChange={(event) => updateField("code", event.target.value)} className="w-full rounded-2xl border border-line/70 bg-page px-4 py-3 text-text outline-none transition focus:border-brand" />
+          </label>
+          <label className="block">
+            <span className="mb-2 block text-sm font-semibold text-text">Warehouse name</span>
+            <input value={form.name} onChange={(event) => updateField("name", event.target.value)} className="w-full rounded-2xl border border-line/70 bg-page px-4 py-3 text-text outline-none transition focus:border-brand" />
+          </label>
+        </div>
+        <label className="block">
+          <span className="mb-2 block text-sm font-semibold text-text">Notes</span>
+          <textarea value={form.notes} onChange={(event) => updateField("notes", event.target.value)} rows={4} className="w-full rounded-3xl border border-line/70 bg-page px-4 py-3 text-text outline-none transition focus:border-brand" />
+        </label>
+      </section>
+      <section className="rounded-[28px] border border-line/70 bg-surface/90 p-6 shadow-panel 2xl:p-7">
+        <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+          <div>
+            <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Locations</p>
+            <h4 className="mt-3 text-xl font-bold text-text">Internal stock locations</h4>
+          </div>
+          <button type="button" onClick={addLocation} className="inline-flex items-center justify-center rounded-2xl border border-line/70 px-4 py-3 text-sm font-semibold text-text">
+            Add location
+          </button>
+        </div>
+        {form.locations.length === 0 ? (
+          <div className="mt-5 rounded-3xl border border-dashed border-line/70 bg-page/60 px-6 py-10 text-center text-sm text-muted">
+            No locations added yet.
+          </div>
+        ) : (
+          <div className="mt-5 space-y-4">
+            {form.locations.map((location: WarehouseLocationInput, index: number) => (
+              <div key={`${location.code}-${index}`} className="rounded-3xl border border-line/70 bg-page/60 p-4">
+                <div className="grid gap-4 xl:grid-cols-[0.7fr_1fr_auto]">
+                  <label className="block">
+                    <span className="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-muted">Code</span>
+                    <input value={location.code} onChange={(event) => updateLocation(index, { ...location, code: event.target.value })} className="w-full rounded-2xl border border-line/70 bg-surface px-4 py-3 text-text outline-none transition focus:border-brand" />
+                  </label>
+                  <label className="block">
+                    <span className="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-muted">Name</span>
+                    <input value={location.name} onChange={(event) => updateLocation(index, { ...location, name: event.target.value })} className="w-full rounded-2xl border border-line/70 bg-surface px-4 py-3 text-text outline-none transition focus:border-brand" />
+                  </label>
+                  <div className="flex items-end">
+                    <button type="button" onClick={() => removeLocation(index)} className="rounded-2xl border border-rose-400/40 px-4 py-3 text-sm font-semibold text-rose-700 dark:text-rose-300">
+                      Remove
+                    </button>
+                  </div>
+                </div>
+                <label className="mt-4 block">
+                  <span className="mb-2 block text-xs font-semibold uppercase tracking-[0.16em] text-muted">Notes</span>
+                  <input value={location.notes} onChange={(event) => updateLocation(index, { ...location, notes: event.target.value })} className="w-full rounded-2xl border border-line/70 bg-surface px-4 py-3 text-text outline-none transition focus:border-brand" />
+                </label>
+              </div>
+            ))}
+          </div>
+        )}
+        <div className="mt-6 flex flex-col gap-3 rounded-2xl border border-line/70 bg-page/70 px-4 py-4 sm:flex-row sm:items-center sm:justify-between">
+          <span className="min-w-0 text-sm text-muted">{status}</span>
+          <button type="submit" disabled={isSaving} className="rounded-2xl bg-brand px-5 py-3 text-sm font-semibold text-white disabled:cursor-not-allowed disabled:opacity-60">
+            {isSaving ? "Saving..." : mode === "create" ? "Create warehouse" : "Save changes"}
+          </button>
+        </div>
+      </section>
+    </form>
+  );
+}

client/src/modules/inventory/WarehousesPage.tsx

@@ -0,0 +1,82 @@
+import { permissions } from "@mrp/shared";
+import type { WarehouseSummaryDto } from "@mrp/shared/dist/inventory/types.js";
+import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
+
+import { useAuth } from "../../auth/AuthProvider";
+import { api, ApiError } from "../../lib/api";
+
+export function WarehousesPage() {
+  const { token, user } = useAuth();
+  const [warehouses, setWarehouses] = useState<WarehouseSummaryDto[]>([]);
+  const [status, setStatus] = useState("Loading warehouses...");
+
+  const canManage = user?.permissions.includes(permissions.inventoryWrite) ?? false;
+
+  useEffect(() => {
+    if (!token) {
+      return;
+    }
+
+    api
+      .getWarehouses(token)
+      .then((nextWarehouses) => {
+        setWarehouses(nextWarehouses);
+        setStatus(`${nextWarehouses.length} warehouse(s) available.`);
+      })
+      .catch((error: unknown) => {
+        const message = error instanceof ApiError ? error.message : "Unable to load warehouses.";
+        setStatus(message);
+      });
+  }, [token]);
+
+  return (
+    <section className="rounded-[28px] border border-line/70 bg-surface/90 p-6 shadow-panel 2xl:p-7">
+      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+        <div>
+          <p className="text-xs font-semibold uppercase tracking-[0.24em] text-muted">Inventory</p>
+          <h3 className="mt-3 text-2xl font-bold text-text">Warehouses</h3>
+          <p className="mt-2 max-w-2xl text-sm text-muted">Physical warehouse records and their internal stock locations.</p>
+        </div>
+        {canManage ? (
+          <Link to="/inventory/warehouses/new" className="inline-flex items-center justify-center rounded-2xl bg-brand px-5 py-3 text-sm font-semibold text-white">
+            New warehouse
+          </Link>
+        ) : null}
+      </div>
+      <div className="mt-6 rounded-2xl border border-line/70 bg-page/60 px-4 py-3 text-sm text-muted">{status}</div>
+      {warehouses.length === 0 ? (
+        <div className="mt-6 rounded-3xl border border-dashed border-line/70 bg-page/60 px-6 py-12 text-center text-sm text-muted">
+          No warehouses have been added yet.
+        </div>
+      ) : (
+        <div className="mt-6 overflow-hidden rounded-2xl border border-line/70">
+          <table className="min-w-full divide-y divide-line/70 text-sm">
+            <thead className="bg-page/80 text-left text-muted">
+              <tr>
+                <th className="px-4 py-3">Code</th>
+                <th className="px-4 py-3">Name</th>
+                <th className="px-4 py-3">Locations</th>
+                <th className="px-4 py-3">Updated</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-line/70 bg-surface">
+              {warehouses.map((warehouse) => (
+                <tr key={warehouse.id} className="transition hover:bg-page/70">
+                  <td className="px-4 py-3 font-semibold text-text">
+                    <Link to={`/inventory/warehouses/${warehouse.id}`} className="hover:text-brand">
+                      {warehouse.code}
+                    </Link>
+                  </td>
+                  <td className="px-4 py-3 text-muted">{warehouse.name}</td>
+                  <td className="px-4 py-3 text-muted">{warehouse.locationCount}</td>
+                  <td className="px-4 py-3 text-muted">{new Date(warehouse.updatedAt).toLocaleDateString()}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </section>
+  );
+}

client/src/modules/inventory/config.ts

@@ -4,6 +4,8 @@ import {
   inventoryUnitsOfMeasure,
   type InventoryBomLineInput,
   type InventoryItemInput,
+  type WarehouseInput,
+  type WarehouseLocationInput,
   type InventoryItemStatus,
   type InventoryItemType,
   type InventoryUnitOfMeasure,
@@ -31,6 +33,19 @@ export const emptyInventoryItemInput: InventoryItemInput = {
   bomLines: [],
 };
 
+export const emptyWarehouseLocationInput: WarehouseLocationInput = {
+  code: "",
+  name: "",
+  notes: "",
+};
+
+export const emptyWarehouseInput: WarehouseInput = {
+  code: "",
+  name: "",
+  notes: "",
+  locations: [],
+};
+
 export const inventoryTypeOptions: Array<{ value: InventoryItemType; label: string }> = [
   { value: "PURCHASED", label: "Purchased" },
   { value: "MANUFACTURED", label: "Manufactured" },