keep trying

Signed-off-by: Kenneth Obsequio <k80308392@gmail.com>
2026-09-27 00:12:54 +08:00 · 2026-07-12 14:49:23 +08:00
parent 69ca47e00a
commit e9b99f8243
12 changed files with 576 additions and 16 deletions
@@ -94,14 +94,15 @@ export default function GroupTable() {
    fetchGroupsDashboard();
  };

-  // ─── Attach filterId + filterValue to each stat ───────────────────────────
-  // "archived" and "empty" have no direct column to filter on in this table
+  // ─── Attach filterId/filterValue (or onClick) to each stat ────────────────
+  // "inactive" groups are effectively archived groups (deactivateGroup sets
+  // is_active=false and soft-deletes in the same action), so route straight
+  // to the archived groups page instead of toggling an in-table filter.
  const dashboardStats = (groupsDashboard?.stats ?? []).map((s) => ({
    ...s,
-    filterId: s.key === "archived" || s.key === "empty" || s.key === "total" ? null : "is_active",
-    filterValue: s.key === "active" ? ["true"]
-      : s.key === "inactive" ? ["false"]
-        : null,
+    filterId: s.key === "active" ? "is_active" : null,
+    filterValue: s.key === "active" ? ["true"] : null,
+    onClick: s.key === "inactive" ? () => navigate("/admin/groups/archived") : undefined,
  }));

  // ─── top_groups bar has no filterable column in this table ────────────────
@@ -1,5 +1,5 @@
 // ─── config/toolbar.config.jsx ────────────────────────────────────────────────
-import { RefreshCw, Download, Plus, Archive } from "lucide-react";
+import { RefreshCw, Download, Plus, Archive, UploadCloud } from "lucide-react";
 import { exportTableToExcel } from "@/utils/excel.util";

 /**
@@ -47,6 +47,15 @@ export function buildToolbarActions({ fetchAssets, pagination, exportConfig, nav
      className: "text-primary-foreground",
      onClick: () => navigate("add"),
    },
+    {
+      key: "bulk-upload",
+      type: "button",
+      icon: <UploadCloud className="h-3.5 w-3.5" />,
+      label: "Bulk Upload",
+      variant: "secondary",
+      className: "border border-border",
+      onClick: () => navigate("add/bulk"),
+    },
    {
      key: "archived-users",
      type: "button",
@@ -23,6 +23,7 @@ import { cn } from "@/lib/utils"
 import UserMenu from "@/components/generic/UserMenu"
 import NotificationBell from "@/components/generic/NotificationBell"
 import AdminStickyAnnouncementBar from "@/components/generic/AdminStickyAnnouncementBar"
+import UploadProgressToast from "@/components/generic/UploadProgressToast"
 import { ROLE_CONFIG } from "@/data/profile.data"

 const AdminLayout = () => {
@@ -88,6 +89,7 @@ const AdminLayout = () => {

                    <div id="main-body" className="bg-background flex-1 flex flex-col" style={{ paddingTop: 'var(--navbar-h)' }}>
                        <Outlet />
+                        <UploadProgressToast />
                        <Toaster position="bottom-right" richColors />
                    </div>
                </AdminProvider>
@@ -1,11 +1,11 @@
 // modules/admin/pages/assets/AddAsset.jsx

 import { useState, useRef } from "react";
-import { useNavigate } from "react-router-dom";
+import { Link, useNavigate } from "react-router-dom";
 import { useForm, Controller } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { ArrowLeft, UploadCloud, X, FileVideo, FileText, Image, FileAudio } from "lucide-react";
+import { ArrowLeft, ArrowRight, UploadCloud, X, FileVideo, FileText, Image, FileAudio } from "lucide-react";

 import { useAssets } from "@/contexts/AdminAssetsContext";
 import { useAuth } from "@/contexts/AuthContext";
@@ -230,6 +230,12 @@ export default function AddAsset() {
                            error={errors._file?.message}
                        />
                        <FieldError message={errors._file?.message} />
+                        <Link
+                            to="/admin/assets/add/bulk"
+                            className="inline-flex items-center gap-1 text-xs text-primary hover:underline"
+                        >
+                            Uploading multiple files? Use Bulk Upload <ArrowRight className="h-3 w-3" />
+                        </Link>
                    </div>

                    {/* ── Thumbnail (video required / audio optional) ── */}
@@ -0,0 +1,222 @@
+// modules/admin/pages/assets/AddAssetsBulk.jsx
+
+import { useRef, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import {
+    ArrowLeft, UploadCloud, X, RotateCcw, FileVideo, FileText, Image, FileAudio,
+    CheckCircle2, XCircle, AlertTriangle, Loader2, Trash2,
+} from "lucide-react";
+
+import { useAssets } from "@/contexts/AdminAssetsContext";
+import { useUploadQueue } from "@/contexts/UploadQueueContext";
+import { useAuth } from "@/contexts/AuthContext";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import {
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+} from "@/components/ui/select";
+
+// ─── File type icon ───────────────────────────────────────────────────────────
+
+function FileTypeIcon({ mime = "" }) {
+    if (mime.startsWith("video/")) return <FileVideo className="h-8 w-8 text-blue-400 shrink-0" />;
+    if (mime.startsWith("image/")) return <Image className="h-8 w-8 text-green-400 shrink-0" />;
+    if (mime.startsWith("audio/")) return <FileAudio className="h-8 w-8 text-purple-400 shrink-0" />;
+    return <FileText className="h-8 w-8 text-orange-400 shrink-0" />;
+}
+
+function formatSize(bytes = 0) {
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+// ─── Drop zone ────────────────────────────────────────────────────────────────
+
+function DropZone({ onFiles }) {
+    const inputRef = useRef(null);
+    const [dragOver, setDragOver] = useState(false);
+
+    return (
+        <div
+            onDragOver={(e) => { e.preventDefault(); setDragOver(true); }}
+            onDragLeave={() => setDragOver(false)}
+            onDrop={(e) => {
+                e.preventDefault();
+                setDragOver(false);
+                if (e.dataTransfer.files?.length) onFiles([...e.dataTransfer.files]);
+            }}
+            onClick={() => inputRef.current?.click()}
+            className={[
+                "rounded-lg border-2 border-dashed cursor-pointer transition-colors",
+                dragOver ? "border-primary/60 bg-primary/5" : "border-muted-foreground/30 hover:border-primary/50 hover:bg-muted/20",
+            ].join(" ")}
+        >
+            <input
+                ref={inputRef}
+                type="file"
+                multiple
+                className="hidden"
+                onChange={(e) => {
+                    if (e.target.files?.length) onFiles([...e.target.files]);
+                    e.target.value = "";
+                }}
+            />
+            <div className="flex flex-col items-center justify-center gap-2 py-10 px-4">
+                <UploadCloud className="h-8 w-8 text-muted-foreground/50" />
+                <p className="text-sm text-muted-foreground text-center">
+                    Drag & drop or <span className="text-primary font-medium">browse</span> to upload
+                    <br />
+                    <span className="text-xs">Images, videos, audio, documents — multiple files allowed</span>
+                </p>
+            </div>
+        </div>
+    );
+}
+
+// ─── File row ─────────────────────────────────────────────────────────────────
+
+function FileRow({ job, onRetry, onRemove }) {
+    const isUploading = job.status === "uploading" || job.status === "queued";
+    const isFailed = job.status === "failed" || job.status === "invalid";
+    const isUploaded = job.status === "uploaded";
+
+    const barClass = isUploaded ? "[&>div]:bg-green-500" : isFailed ? "[&>div]:bg-destructive" : "";
+
+    return (
+        <div className="flex items-center gap-3 p-4 border rounded-lg bg-card">
+            <FileTypeIcon mime={job.mime} />
+            <div className="flex-1 min-w-0 space-y-1.5">
+                <div className="flex items-center justify-between gap-2">
+                    <p className="text-sm font-medium truncate">{job.name}</p>
+                    <span className="text-xs text-muted-foreground shrink-0">{formatSize(job.size)}</span>
+                </div>
+                <Progress value={job.progress} className={barClass} />
+                <div className="flex items-center gap-1.5 text-xs">
+                    {isUploading && <><Loader2 className="h-3 w-3 animate-spin text-muted-foreground" /><span className="text-muted-foreground">{job.status === "queued" ? "Queued" : "Uploading…"}</span></>}
+                    {isUploaded && <><CheckCircle2 className="h-3 w-3 text-green-500" /><span className="text-green-600">Uploaded</span></>}
+                    {job.status === "failed" && <><XCircle className="h-3 w-3 text-destructive" /><span className="text-destructive">Upload failed</span></>}
+                    {job.status === "invalid" && <><AlertTriangle className="h-3 w-3 text-destructive" /><span className="text-destructive">Rejected</span></>}
+                </div>
+                {isFailed && job.error && <p className="text-xs text-destructive">{job.error}</p>}
+            </div>
+            <div className="flex items-center gap-1 shrink-0">
+                {job.status === "failed" && (
+                    <Button type="button" variant="ghost" size="sm" onClick={() => onRetry(job.id)}>
+                        <RotateCcw className="h-3.5 w-3.5 mr-1" /> Retry
+                    </Button>
+                )}
+                <Button
+                    type="button" variant="ghost" size="icon"
+                    disabled={job.status === "uploading"}
+                    onClick={() => onRemove(job.id)}
+                >
+                    <X className="h-4 w-4" />
+                </Button>
+            </div>
+        </div>
+    );
+}
+
+// ─── Page ─────────────────────────────────────────────────────────────────────
+
+export default function AddAssetsBulk() {
+    const navigate = useNavigate();
+    const { fetchAssets } = useAssets();
+    const { jobs, addBatch, retryJob, removeJob, clearFinished } = useUploadQueue();
+    const { user } = useAuth();
+
+    const [isPublic, setIsPublic] = useState("false");
+    const [storageProvider, setStorageProvider] = useState("s3");
+
+    const total = jobs.length;
+    const done = jobs.filter((j) => j.status === "uploaded").length;
+    const failed = jobs.filter((j) => j.status === "failed" || j.status === "invalid").length;
+
+    const handleFiles = (files) => {
+        addBatch(files, {
+            is_public: isPublic === "true",
+            storage_provider: storageProvider,
+            createdBy: user?.user_id,
+        }, {
+            onSettled: () => fetchAssets({ force: true }),
+        });
+    };
+
+    return (
+        <div className="max-w-2xl mx-auto px-4 py-6 space-y-6">
+
+            {/* ── Header ── */}
+            <div className="flex items-center gap-3">
+                <Button type="button" variant="ghost" size="icon" onClick={() => navigate(-1)}>
+                    <ArrowLeft className="h-4 w-4" />
+                </Button>
+                <div>
+                    <h1 className="text-xl font-semibold">Uploading Assets</h1>
+                    <p className="text-sm text-muted-foreground">
+                        {total ? `${total} file${total === 1 ? "" : "s"} · ${done} done · ${failed} failed` : "Upload one or more files to the asset library."}
+                    </p>
+                </div>
+            </div>
+
+            {/* ── Batch settings ── */}
+            <div className="rounded-lg border bg-card p-4 flex items-center gap-4">
+                <div className="flex-1 space-y-1.5">
+                    <label className="text-sm font-medium">Access</label>
+                    <Select value={isPublic} onValueChange={setIsPublic}>
+                        <SelectTrigger><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="false">Private</SelectItem>
+                            <SelectItem value="true">Public</SelectItem>
+                        </SelectContent>
+                    </Select>
+                </div>
+                <div className="flex-1 space-y-1.5">
+                    <label className="text-sm font-medium">Storage</label>
+                    <Select value={storageProvider} onValueChange={setStorageProvider}>
+                        <SelectTrigger><SelectValue /></SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="chibisafe">Chibisafe</SelectItem>
+                            <SelectItem value="local">Local</SelectItem>
+                            <SelectItem value="s3">S3</SelectItem>
+                        </SelectContent>
+                    </Select>
+                </div>
+                <p className="text-xs text-muted-foreground max-w-[12rem] self-end pb-2">
+                    Applies to files added below. Video thumbnails and per-asset details can be edited afterward.
+                </p>
+            </div>
+
+            {/* ── Drop zone ── */}
+            <DropZone onFiles={handleFiles} />
+
+            {/* ── File list ── */}
+            {total > 0 && (
+                <div className="space-y-3">
+                    <div className="flex items-center justify-between">
+                        <span className="text-sm font-medium text-muted-foreground">Files</span>
+                        {(done > 0 || failed > 0) && (
+                            <Button type="button" variant="ghost" size="sm" onClick={clearFinished}>
+                                <Trash2 className="h-3.5 w-3.5 mr-1" /> Clear finished
+                            </Button>
+                        )}
+                    </div>
+                    {jobs.map((job) => (
+                        <FileRow key={job.id} job={job} onRetry={retryJob} onRemove={removeJob} />
+                    ))}
+                </div>
+            )}
+
+            {/* ── Actions ── */}
+            <div className="flex justify-end">
+                <Button type="button" variant="outline" onClick={() => navigate(-1)}>
+                    Done
+                </Button>
+            </div>
+        </div>
+    );
+}
@@ -21,6 +21,7 @@ import ArchivedGroupList from '../pages/user_groups/ArchivedGroupList'

 // Assets
 import AddAsset from "../pages/assets/AddAsset";
+import AddAssetsBulk from "../pages/assets/AddAssetsBulk";
 import ArchivedAssets from "../pages/assets/ArchivedAssets";
 import ViewImageAsset from "../pages/assets/ViewImageAsset";
 import ViewVideoAsset from "../pages/assets/ViewVideoAsset";
@@ -171,6 +172,7 @@ export const AdminRoutes = {
          children: [
            { index: true, element: <AssetList /> },
            { path: 'add', element: <AddAsset /> },
+            { path: 'add/bulk', element: <AddAssetsBulk /> },
            { path: 'archived', element: <ArchivedAssets /> },
            { path: 'view/image/:assetId', element: <ViewImageAsset /> },
            { path: 'view/video/:assetId', element: <ViewVideoAsset /> },