refactor: convert admin pages to Tailwind and improve media uploads; fix TypeScript error in commandocentrum

src/components/admin/media-grid.tsx

@@ -9,6 +9,7 @@ export function AdminMediaGrid() {
   const [files, setFiles] = useState<MediaFile[]>([]);
   const [loading, setLoading] = useState(true);
   const [uploading, setUploading] = useState(false);
+  const [progress, setProgress] = useState({ current: 0, total: 0 });
   const fileRef = useRef<HTMLInputElement>(null);
 
   const load = useCallback(async () => {
@@ -24,16 +25,27 @@ export function AdminMediaGrid() {
   useEffect(() => { load(); }, [load]);
 
   async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
-    const file = e.target.files?.[0];
-    if (!file) return;
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
     setUploading(true);
-    const fd = new FormData();
-    fd.set("file", file);
-    try {
-      await uploadMedia(fd);
-      await load();
-    } catch { /* ignore */ }
+    setProgress({ current: 0, total: files.length });
+    
+    const fileArray = Array.from(files);
+    
+    await Promise.all(fileArray.map(async (file) => {
+      const fd = new FormData();
+      fd.set("file", file);
+      try {
+        await uploadMedia(fd);
+      } catch (err) {
+        console.error(err);
+      }
+      setProgress(prev => ({ ...prev, current: prev.current + 1 }));
+    }));
+
+    await load();
     setUploading(false);
+    setProgress({ current: 0, total: 0 });
     if (fileRef.current) fileRef.current.value = "";
   }
 
@@ -42,30 +54,45 @@ export function AdminMediaGrid() {
   }
 
   return (
-    <div className="card" style={{ marginTop: "1rem" }}>
-      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "0.75rem" }}>
+    <div className="admin-card mb-4">
+      <div className="flex items-center justify-between mb-3">
         <strong>{files.length} image{files.length !== 1 ? "s" : ""}</strong>
-        <label className="btn btn-primary" style={{ cursor: "pointer", fontSize: "0.88rem" }}>
+        <label className="btn btn-primary cursor-pointer text-sm">
           {uploading ? "Uploading…" : "Upload image"}
-          <input ref={fileRef} type="file" accept="image/png,image/jpeg,image/gif,image/webp" onChange={handleUpload} style={{ display: "none" }} />
+          <input ref={fileRef} type="file" accept="image/png,image/jpeg,image/gif,image/webp" onChange={handleUpload} multiple className="hidden" />
         </label>
       </div>
 
+      {uploading && (
+        <div className="mb-4">
+          <div className="flex justify-between text-xs mb-1">
+            <span>Uploading images...</span>
+            <span>{progress.current} / {progress.total}</span>
+          </div>
+          <div className="h-2 w-full bg-[var(--color-primary)]/10 rounded-full overflow-hidden">
+            <div 
+              className="h-full bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary-hover)] transition-all duration-300" 
+              style={{ width: `${(progress.current / progress.total) * 100}%` }}
+            />
+          </div>
+        </div>
+      )}
+
       {loading ? (
-        <p className="muted">Loading…</p>
+        <p className="text-xs text-gray-500 dark:text-gray-400">Loading…</p>
       ) : files.length === 0 ? (
-        <p className="muted">No images yet. Upload one above.</p>
+        <p className="text-xs text-gray-500 dark:text-gray-400">No images yet. Upload one above.</p>
       ) : (
-        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(160px, 1fr))", gap: "0.75rem" }}>
+        <div className="grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-3">
           {files.map((f) => (
-            <div key={f.name} style={{ border: "1px solid color-mix(in srgb, var(--color-text-muted) 14%, transparent)", borderRadius: 10, overflow: "hidden", background: "var(--color-background)" }}>
+            <div key={f.name} className="border border-[var(--color-text-muted)]/14 rounded-[10px] overflow-hidden bg-[var(--color-background)]">
               {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img src={f.url} alt={f.name} style={{ width: "100%", height: 120, objectFit: "cover", display: "block" }} />
-              <div style={{ padding: "0.4rem" }}>
-                <p style={{ fontSize: "0.72rem", margin: "0 0 0.3rem", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap", color: "var(--color-text-muted)" }}>
+              <img src={f.url} alt={f.name} className="w-full h-[120px] object-cover block" />
+              <div className="p-2">
+                <p className="text-xs text-[var(--color-text-muted)] m-0 mb-1 overflow-hidden text-ellipsis whitespace-nowrap">
                   {f.name}
                 </p>
-                <button type="button" onClick={() => copyUrl(f.url)} className="btn btn-outline" style={{ fontSize: "0.72rem", padding: "0.2rem 0.5rem", width: "100%" }}>
+                <button type="button" onClick={() => copyUrl(f.url)} className="btn btn-outline text-xs p-1 w-full">
                   Copy URL
                 </button>
               </div>

src/components/admin/media-picker.tsx

@@ -35,15 +35,19 @@ export function MediaPicker({
   }, [open, load]);
 
   async function handleUpload(e: React.ChangeEvent<HTMLInputElement>) {
-    const file = e.target.files?.[0];
-    if (!file) return;
+    const files = e.target.files;
+    if (!files || files.length === 0) return;
     setUploading(true);
-    const fd = new FormData();
-    fd.set("file", file);
-    const url = await uploadMediaAndReturn(fd);
-    if (url) {
+    const urls: string[] = [];
+    for (const file of Array.from(files)) {
+      const fd = new FormData();
+      fd.set("file", file);
+      const url = await uploadMediaAndReturn(fd);
+      if (url) urls.push(url);
+    }
+    if (urls.length > 0) {
       await load();
-      onSelect(url);
+      onSelect(urls[urls.length - 1]); // select the last one for backward compatibility
       setOpen(false);
     }
     setUploading(false);
@@ -63,75 +67,62 @@ export function MediaPicker({
         )}
       </div>
 
-      {open && (
+    {open && (
+      <div
+        className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
+        onClick={() => setOpen(false)}
+      >
         <div
-          style={{
-            position: "fixed", inset: 0, zIndex: 9999,
-            display: "flex", alignItems: "center", justifyContent: "center",
-            backgroundColor: "rgba(0,0,0,0.5)",
-          }}
-          onClick={() => setOpen(false)}
+          onClick={(e) => e.stopPropagation()}
+          className="bg-[var(--color-surface)] text-[var(--color-text)] rounded-2xl w-[min(90vw,680px)] max-h-[80vh] flex flex-col shadow-xl"
         >
-          <div
-            onClick={(e) => e.stopPropagation()}
-            style={{
-              background: "var(--color-surface)", color: "var(--color-text)",
-              borderRadius: 14, width: "min(90vw, 680px)", maxHeight: "80vh",
-              display: "flex", flexDirection: "column", boxShadow: "0 16px 48px rgba(0,0,0,0.25)",
-            }}
-          >
-            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "0.85rem 1rem", borderBottom: "1px solid color-mix(in srgb, var(--color-text-muted) 14%, transparent)" }}>
-              <strong style={{ fontSize: "1rem" }}>Media Library</strong>
-              <div style={{ display: "flex", gap: "0.4rem", alignItems: "center" }}>
-                <label className="btn btn-primary" style={{ fontSize: "0.82rem", padding: "0.3rem 0.7rem", cursor: "pointer" }}>
-                  {uploading ? "Uploading…" : "Upload"}
-                  <input ref={fileRef} type="file" accept="image/png,image/jpeg,image/gif,image/webp" onChange={handleUpload} style={{ display: "none" }} />
-                </label>
-                <button type="button" onClick={() => setOpen(false)} className="btn" style={{ fontSize: "0.82rem", padding: "0.3rem 0.7rem" }}>
-                  Close
-                </button>
-              </div>
-            </div>
-            <div style={{ flex: 1, overflow: "auto", padding: "0.75rem" }}>
-              {loading ? (
-                <p className="muted" style={{ textAlign: "center", padding: "2rem" }}>Loading…</p>
-              ) : files.length === 0 ? (
-                <p className="muted" style={{ textAlign: "center", padding: "2rem" }}>
-                  No images yet. Upload one above.
-                </p>
-              ) : (
-                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))", gap: "0.65rem" }}>
-                  {files.map((f) => (
-                    <button
-                      type="button"
-                      key={f.name}
-                      onClick={() => { onSelect(f.url); setOpen(false); }}
-                      style={{
-                        border: `2px solid ${f.url === current ? "var(--color-primary)" : "transparent"}`,
-                        borderRadius: 10, overflow: "hidden", cursor: "pointer",
-                        background: "var(--color-background)", padding: 0,
-                        display: "flex", flexDirection: "column",
-                        transition: "border-color 0.15s",
-                      }}
-                      onMouseEnter={(e) => { if (f.url !== current) e.currentTarget.style.borderColor = "color-mix(in srgb, var(--color-primary) 40%, transparent)"; }}
-                      onMouseLeave={(e) => { if (f.url !== current) e.currentTarget.style.borderColor = "transparent"; }}
-                    >
-                      {/* eslint-disable-next-line @next/next/no-img-element */}
-                      <img
-                        src={f.url}
-                        alt={f.name}
-                        style={{ width: "100%", height: 100, objectFit: "cover", display: "block" }}
-                      />
-                      <span style={{ fontSize: "0.72rem", padding: "0.3rem 0.4rem", textAlign: "center", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
-                        {f.name}
-                      </span>
-                    </button>
-                  ))}
-                </div>
-              )}
+          <div className="flex items-center justify-between px-4 py-3 border-b border-[var(--color-text-muted)]/14">
+            <strong className="text-base">Media Library</strong>
+            <div className="flex gap-2 items-center">
+              <label className="btn btn-primary text-sm cursor-pointer">
+                {uploading ? "Uploading…" : "Upload"}
+                <input ref={fileRef} type="file" accept="image/png,image/jpeg,image/gif,image/webp" onChange={handleUpload} className="hidden" multiple />
+              </label>
+              <button type="button" onClick={() => setOpen(false)} className="btn text-sm">
+                Close
+              </button>
             </div>
           </div>
+          <div className="flex-1 overflow-auto p-3">
+            {loading ? (
+              <p className="text-xs text-[var(--color-text-muted)] text-center py-8">Loading…</p>
+            ) : files.length === 0 ? (
+              <p className="text-xs text-[var(--color-text-muted)] text-center py-8">
+                No images yet. Upload one above.
+              </p>
+            ) : (
+              <div className="grid grid-cols-[repeat(auto-fill,minmax(140px,1fr))] gap-2.5">
+                {files.map((f) => (
+                  <button
+                    type="button"
+                    key={f.name}
+                    onClick={() => { onSelect(f.url); setOpen(false); }}
+                    className="border-2 border-transparent rounded-xl overflow-hidden cursor-pointer bg-[var(--color-background)] p-0 flex flex-col transition-all duration-150"
+                    style={{ borderColor: f.url === current ? "var(--color-primary)" : "transparent" }}
+                    onMouseEnter={(e) => { if (f.url !== current) e.currentTarget.style.borderColor = "color-mix(in srgb, var(--color-primary) 40%, transparent)"; }}
+                    onMouseLeave={(e) => { if (f.url !== current) e.currentTarget.style.borderColor = "transparent"; }}
+                  >
+                    {/* eslint-disable-next-line @next/next/no-img-element */}
+                    <img
+                      src={f.url}
+                      alt={f.name}
+                      className="w-full h-[100px] object-cover block"
+                    />
+                    <span className="text-xs py-1 text-center overflow-hidden text-ellipsis whitespace-nowrap">
+                      {f.name}
+                    </span>
+                  </button>
+                ))}
+              </div>
+            )}
+          </div>
         </div>
+      </div>
       )}
     </>
   );