add key()

Signed-off-by: Kenneth Obsequio <k80308392@gmail.com>

src/modules/admin/pages/assets/AddAsset.jsx

@@ -15,6 +15,7 @@ import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
 import { Spinner } from "@/components/ui/spinner";
+import { Progress } from "@/components/ui/progress";
 import {
     Select,
     SelectContent,
@@ -122,6 +123,7 @@ export default function AddAsset() {
     const fileRef      = useRef(null);
     const thumbnailRef = useRef(null);
     const [thumbKey, setThumbKey] = useState(0);
+    const [progress, setProgress] = useState(null); // { phase: 'uploading'|'storing'|'done'|'error', pct } | null
 
     const {
         register,
@@ -182,6 +184,7 @@ export default function AddAsset() {
 
         if (hasFileError) return;
 
+        setProgress({ phase: "uploading", pct: 0 });
         const result = await uploadAsset({
             file:             fileRef.current,
             thumbnail:        thumbnailRef.current ?? undefined,
@@ -191,11 +194,20 @@ export default function AddAsset() {
             is_public:        data.is_public === "true",
             storage_provider: data.storage_provider,
             createdBy:        user?.user_id,
+            onProgress:       setProgress,
         });
+        setProgress(null);
 
         if (result) { bypassOnce(); navigate(-1); }
     };
 
+    const progressLabel = {
+        uploading: "Uploading to server…",
+        storing:   "Storing to server...",
+        done:      "Done.",
+        error:     "Upload failed.",
+    }[progress?.phase];
+
     return (
         <div className="max-w-2xl mx-auto px-4 py-6 space-y-6">
 
@@ -352,6 +364,17 @@ export default function AddAsset() {
 
                 </div>
 
+                {/* ── Upload progress (real — see AdminAssetsContext.uploadAsset) ── */}
+                {progress && (
+                    <div className="space-y-1.5">
+                        <div className="flex items-center justify-between text-xs text-muted-foreground">
+                            <span>{progressLabel}</span>
+                            <span>{progress.pct ?? 0}%</span>
+                        </div>
+                        <Progress value={progress.pct ?? 0} />
+                    </div>
+                )}
+
                 {/* ── Actions ── */}
                 <div className="flex justify-end gap-3">
                     <Button