fix(ui): add router.refresh after storage mutations, pluralize labels

ManageStorageDialog now calls router.refresh() after deposit,
withdraw, and transfer so the grid view reflects changes.
Await fetchData() before refreshing.

Resource labels now use pluralize() for correct unit display
(e.g. "1 liter" vs "3 liters").

src/components/frontend/storage/ManageStorageDialog.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useEffect, useTransition, useCallback } from "react";
+import { useRouter } from "next/navigation";
 import {
   Dialog,
   DialogContent,
@@ -32,7 +33,7 @@ import {
   Loader2Icon,
 } from "lucide-react";
 import { Progress } from "@/components/ui/progress";
-import { cn } from "@/lib/utils";
+import { cn, pluralize } from "@/lib/utils";
 
 interface ManageStorageDialogProps {
   structureId: number;
@@ -54,6 +55,7 @@ export function ManageStorageDialog({
   const [allResources, setAllResources] = useState<Resource[]>([]);
   const [loading, setLoading] = useState(false);
   const [isPending, startTransition] = useTransition();
+  const router = useRouter();
   const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
 
   // Form state
@@ -258,7 +260,8 @@ export function ManageStorageDialog({
       if (result.success) {
         setMessage({ type: "success", text: "Resource deposited successfully." });
         setDepositAmount("1");
-        fetchData();
+        await fetchData();
+        router.refresh();
       } else {
         setMessage({ type: "error", text: result.error ?? "Unknown error." });
       }
@@ -278,7 +281,8 @@ export function ManageStorageDialog({
       if (result.success) {
         setMessage({ type: "success", text: "Resource withdrawn successfully." });
         setWithdrawAmount("1");
-        fetchData();
+        await fetchData();
+        router.refresh();
       } else {
         setMessage({ type: "error", text: result.error ?? "Unknown error." });
       }
@@ -299,7 +303,8 @@ export function ManageStorageDialog({
       if (result.success) {
         setMessage({ type: "success", text: "Transfer completed successfully." });
         setTransferAmount("1");
-        fetchData();
+        await fetchData();
+        router.refresh();
       } else {
         setMessage({ type: "error", text: result.error ?? "Unknown error." });
       }
@@ -437,7 +442,7 @@ export function ManageStorageDialog({
                       if (!resource || typeof resource === "number") return null;
                       return (
                         <SelectItem key={entry.id ?? resource.id} value={String(resource.id)}>
-                          {resource.name} ({entry.amount.toLocaleString()} {resource.unitOfMeasure})
+                          {resource.name} ({entry.amount.toLocaleString()} {pluralize(entry.amount, resource.unitOfMeasure)})
                         </SelectItem>
                       );
                     })}
@@ -510,7 +515,7 @@ export function ManageStorageDialog({
                       if (!resource || typeof resource === "number") return null;
                       return (
                         <SelectItem key={entry.id ?? resource.id} value={String(resource.id)}>
-                          {resource.name} ({entry.amount.toLocaleString()} {resource.unitOfMeasure})
+                          {resource.name} ({entry.amount.toLocaleString()} {pluralize(entry.amount, resource.unitOfMeasure)})
                         </SelectItem>
                       );
                     })}

src/components/frontend/storage/ResourceList.tsx

@@ -1,5 +1,6 @@
 import { Resource, GameStructure } from "@/payload-types";
 import { convertLexicalToPlaintext } from "@payloadcms/richtext-lexical/plaintext";
+import { pluralize } from "@/lib/utils";
 import {
   Item,
   ItemContent,
@@ -92,7 +93,7 @@ export function ResourceList({ storedResources, maxCapacityMass }: ResourceListP
                       />
                       <span>{resource.name}</span>
                       <span className="text-xs font-normal text-muted-foreground">
-                        {entry.amount.toLocaleString()} {resource.unitOfMeasure}
+                        {entry.amount.toLocaleString()} {pluralize(entry.amount, resource.unitOfMeasure)}
                       </span>
                     </ItemTitle>
                     {description && (
@@ -103,7 +104,7 @@ export function ResourceList({ storedResources, maxCapacityMass }: ResourceListP
                   </ItemContent>
                   <div className="text-right shrink-0">
                     <div className="text-sm font-medium">
-                      {entry.amount.toLocaleString()} {resource.unitOfMeasure}
+                      {entry.amount.toLocaleString()} {pluralize(entry.amount, resource.unitOfMeasure)}
                     </div>
                     <div className="text-xs text-muted-foreground">
                       {mass > 0 && `${mass.toLocaleString()} kg mass`}