91 lines
4.3 KiB
TypeScript
91 lines
4.3 KiB
TypeScript
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>
|
|
);
|
|
}
|