inventory

2026-03-14 21:23:22 -05:00
parent d21e2e3c0b
commit 472c36915c
14 changed files with 730 additions and 1 deletions
@@ -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>
+  );
+}