feat: use resource unitOfMeasure instead of hardcoded kg, add capacity preview to manage dialog

- Replace hardcoded 'kg' labels with resource.unitOfMeasure in ResourceList
- Rename 'Max Mass' to 'Max Capacity' on structure detail page
- Add dynamic capacity preview bar to ManageStorageDialog deposit/withdraw/transfer tabs
- Add baseline capacity display above tabs in manage dialog
- Clean up unused imports across storage components

src/app/(frontend)/logistics/structures/[id]/page.tsx

@@ -182,8 +182,8 @@ export default async function StructureDetailPage({ params }: StructureDetailPag
               <BoxIcon />
             </ItemMedia>
             <ItemContent>
-              <ItemTitle>Max Mass</ItemTitle>
+              <ItemTitle>Max Capacity</ItemTitle>
-              <ItemDescription>{structureType.maxCapacityMass.toLocaleString()} kg</ItemDescription>
+              <ItemDescription>{structureType.maxCapacityMass.toLocaleString()} kg (mass)</ItemDescription>
             </ItemContent>
           </Item>
         )}

src/components/frontend/storage/ManageStorageDialog.tsx

@@ -31,6 +31,8 @@ import {
   ArrowRightLeftIcon,
   Loader2Icon,
 } from "lucide-react";
+import { Progress } from "@/components/ui/progress";
+import { cn } from "@/lib/utils";
 
 interface ManageStorageDialogProps {
   structureId: number;
@@ -104,6 +106,103 @@ export function ManageStorageDialog({
 
   const storedResources = structure?.storedResources ?? [];
   const structureType = structure?.type;
+  const maxMass = structureType?.maxCapacityMass ?? null;
+
+  const currentMass = storedResources.reduce((total, entry) => {
+    const resource = entry.resource as Resource;
+    if (!resource || typeof resource === "number") return total;
+    return total + (resource.massPerUnit ?? 0) * entry.amount;
+  }, 0);
+
+  const findResource = (id: string): Resource | undefined =>
+    allResources.find((r) => r.id === Number(id));
+
+  const findStoredResource = (id: string): { resource: Resource; amount: number } | undefined => {
+    const entry = storedResources.find((e) => {
+      const res = e.resource;
+      return typeof res === "object" && res !== null && "id" in res
+        ? res.id === Number(id)
+        : res === Number(id);
+    });
+    if (!entry) return undefined;
+    const resource = entry.resource as Resource;
+    if (!resource || typeof resource === "number") return undefined;
+    return { resource, amount: entry.amount };
+  };
+
+  const getPreviewMass = (tab: "deposit" | "withdraw" | "transfer"): number | null => {
+    if (!maxMass) return null;
+
+    if (tab === "deposit") {
+      const resource = findResource(depositResourceId);
+      if (!resource) return null;
+      const amt = Number(depositAmount) || 0;
+      return currentMass + (resource.massPerUnit ?? 0) * amt;
+    }
+
+    if (tab === "withdraw") {
+      const stored = findStoredResource(withdrawResourceId);
+      if (!stored) return null;
+      const amt = Number(withdrawAmount) || 0;
+      return currentMass - (stored.resource.massPerUnit ?? 0) * amt;
+    }
+
+    if (tab === "transfer") {
+      const stored = findStoredResource(transferResourceId);
+      if (!stored) return null;
+      const amt = Number(transferAmount) || 0;
+      return currentMass - (stored.resource.massPerUnit ?? 0) * amt;
+    }
+
+    return null;
+  };
+
+  const renderCapacityPreview = (tab: "deposit" | "withdraw" | "transfer") => {
+    if (!maxMass) return null;
+
+    const previewMass = getPreviewMass(tab);
+    if (previewMass === null) return null;
+
+    const previewPercent = Math.min((previewMass / maxMass) * 100, 100);
+    const delta = previewMass - currentMass;
+    const isOverCapacity = previewMass > maxMass;
+
+    const getColor = (pct: number) => {
+      if (pct > 85) return "text-red-400";
+      if (pct > 60) return "text-yellow-400";
+      return "text-green-400";
+    };
+
+    const getBarColor = (pct: number) => {
+      if (pct > 85) return "[&>div]:bg-red-500";
+      if (pct > 60) return "[&>div]:bg-yellow-500";
+      return "[&>div]:bg-green-500";
+    };
+
+    return (
+      <div className={cn(
+        "flex flex-col gap-1.5 p-3 rounded-md border",
+        isOverCapacity ? "border-red-500/30 bg-red-500/5" : "border-border bg-muted/30",
+      )}>
+        <div className="flex items-center justify-between text-xs">
+          <span className="text-muted-foreground">
+            {tab === "deposit" ? "After deposit" : tab === "withdraw" ? "After withdrawal" : "After transfer"}
+          </span>
+          <span className={cn("font-medium", getColor(previewPercent))}>
+            {Math.round(previewPercent)}%
+          </span>
+        </div>
+        <Progress value={previewPercent} className={cn("h-1.5", getBarColor(previewPercent))} />
+        <div className="flex items-center justify-between text-xs text-muted-foreground">
+          <span>{currentMass.toLocaleString()} kg → {previewMass.toLocaleString()} kg</span>
+          <span className={cn(isOverCapacity && "text-red-400 font-medium")}>
+            {delta >= 0 ? "+" : ""}{delta.toLocaleString()} kg
+            {isOverCapacity && " (over capacity!)"}
+          </span>
+        </div>
+      </div>
+    );
+  };
 
   const isResourceAllowed = (resourceId: number): boolean => {
     if (!structureType) return true;
@@ -194,6 +293,25 @@ export function ManageStorageDialog({
             <Loader2Icon className="size-6 animate-spin text-muted-foreground" />
           </div>
         ) : (
+          <>
+            {maxMass && (
+              <div className="flex flex-col gap-1.5 px-1">
+                <div className="flex items-center justify-between text-xs">
+                  <span className="text-muted-foreground">Current capacity</span>
+                  <span className="text-muted-foreground">
+                    {Math.round(Math.min((currentMass / maxMass) * 100, 100))}%
+                  </span>
+                </div>
+                <Progress
+                  value={Math.min((currentMass / maxMass) * 100, 100)}
+                  className="h-1.5"
+                />
+                <div className="flex items-center justify-between text-xs text-muted-foreground">
+                  <span>{currentMass.toLocaleString()} kg used</span>
+                  <span>{maxMass.toLocaleString()} kg max</span>
+                </div>
+              </div>
+            )}
           <Tabs defaultValue="deposit" className="w-full">
             <TabsList className="grid w-full grid-cols-3">
               <TabsTrigger value="deposit" className="flex items-center gap-1.5">
@@ -237,6 +355,7 @@ export function ManageStorageDialog({
                   onChange={(e) => setDepositAmount(e.target.value)}
                 />
               </div>
+              {renderCapacityPreview("deposit")}
               <Button
                 onClick={handleDeposit}
                 disabled={isPending || !depositResourceId}
@@ -280,6 +399,7 @@ export function ManageStorageDialog({
                   onChange={(e) => setWithdrawAmount(e.target.value)}
                 />
               </div>
+              {renderCapacityPreview("withdraw")}
               <Button
                 onClick={handleWithdraw}
                 disabled={isPending || !withdrawResourceId}
@@ -339,6 +459,7 @@ export function ManageStorageDialog({
                   onChange={(e) => setTransferAmount(e.target.value)}
                 />
               </div>
+              {renderCapacityPreview("transfer")}
               <Button
                 onClick={handleTransfer}
                 disabled={isPending || !transferToId || !transferResourceId}
@@ -353,6 +474,7 @@ export function ManageStorageDialog({
               </Button>
             </TabsContent>
           </Tabs>
+          </>
         )}
 
         {message && (

src/components/frontend/storage/ResourceList.tsx

@@ -1,6 +1,5 @@
 import { Resource, GameStructure } from "@/payload-types";
 import { convertLexicalToPlaintext } from "@payloadcms/richtext-lexical/plaintext";
-import { Progress } from "@/components/ui/progress";
 import {
   Item,
   ItemContent,
@@ -67,9 +66,6 @@ export function ResourceList({ storedResources, maxCapacityMass }: ResourceListP
             if (!resource || typeof resource === "number") return null;
 
             const mass = (resource.massPerUnit ?? 0) * entry.amount;
-            const massPercent = maxCapacityMass
-              ? Math.min((mass / maxCapacityMass) * 100, 100)
-              : null;
             const description = resource.description
               ? convertLexicalToPlaintext({ data: resource.description })
               : null;
@@ -106,8 +102,12 @@ export function ResourceList({ storedResources, maxCapacityMass }: ResourceListP
                     )}
                   </ItemContent>
                   <div className="text-right shrink-0">
-                    <div className="text-sm font-medium">{mass.toLocaleString()} kg</div>
+                    <div className="text-sm font-medium">
+                      {entry.amount.toLocaleString()} {resource.unitOfMeasure}
+                    </div>
                     <div className="text-xs text-muted-foreground">
+                      {mass > 0 && `${mass.toLocaleString()} kg mass`}
+                      {mass > 0 && " · "}
                       {(resource.baseValue * entry.amount).toLocaleString()} value
                     </div>
                   </div>

src/components/frontend/storage/StorageGrid.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState } from "react";
-import { GameStructure, Faction, Structure, Resource } from "@/payload-types";
+import { GameStructure, Faction, Structure } from "@/payload-types";
 import { StructureCard } from "@/components/frontend/storage/StructureCard";
 import { StorageFilters } from "@/components/frontend/storage/StorageFilters";
 

src/components/frontend/storage/StorageRules.tsx

@@ -2,7 +2,6 @@ import { Structure } from "@/payload-types";
 import {
   Item,
   ItemContent,
-  ItemDescription,
   ItemHeader,
   ItemTitle,
 } from "@/components/ui/item";

src/components/frontend/storage/StructureCard.tsx

@@ -18,7 +18,7 @@ import {
   calculateStoredMass,
   calculateUtilization,
 } from "@/lib/logistics";
-import { GameStructure, Faction, Structure, Resource } from "@/payload-types";
+import { GameStructure, Faction, Structure } from "@/payload-types";
 import {
   BoxIcon,
   Building2Icon,