From 01ac20f44f8f7d876c607b9fc0fdcbb110a31c81 Mon Sep 17 00:00:00 2001
From: Z8MB1E <jason@onyxsimple.com>
Date: Tue, 28 Jul 2026 14:03:43 -0400
Subject: [PATCH] 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").
---
 .../frontend/storage/ManageStorageDialog.tsx    | 17 +++++++++++------
 .../frontend/storage/ResourceList.tsx           |  5 +++--
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/frontend/storage/ManageStorageDialog.tsx b/src/components/frontend/storage/ManageStorageDialog.tsx
index 7cc0541..c31df2d 100644
--- a/src/components/frontend/storage/ManageStorageDialog.tsx
+++ b/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>
                       );
                     })}
diff --git a/src/components/frontend/storage/ResourceList.tsx b/src/components/frontend/storage/ResourceList.tsx
index 6eaeba7..6be8d26 100644
--- a/src/components/frontend/storage/ResourceList.tsx
+++ b/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`}