@morphika/webframe 0.1.0

package/app/admin/assets/page.tsx

@@ -0,0 +1,573 @@
+"use client";
+
+import { useState, useEffect, useCallback } from "react";
+import type { RegisteredAsset, AssetRegistry, RelinkLogEntry } from "../../../lib/sanity/types";
+import { formatDate, formatBytes } from "../../../lib/format-utils";
+
+function getStatusColor(status: string): string {
+  switch (status) {
+    case "active":
+      return "text-green-500";
+    case "missing":
+      return "text-red-500";
+    case "moved":
+      return "text-yellow-500";
+    case "new":
+      return "text-blue-400";
+    default:
+      return "text-neutral-500";
+  }
+}
+
+function getStatusLabel(status: string): string {
+  switch (status) {
+    case "active":
+      return "Active";
+    case "missing":
+      return "Missing";
+    case "moved":
+      return "Moved";
+    case "new":
+      return "New";
+    default:
+      return status;
+  }
+}
+
+// ============================================
+// Page Component
+// ============================================
+
+export default function AdminAssetsPage() {
+  const [registry, setRegistry] = useState<AssetRegistry | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [scanning, setScanning] = useState(false);
+  const [healthChecking, setHealthChecking] = useState(false);
+  const [healthResult, setHealthResult] = useState<{
+    healthy_count: number;
+    missing_count: number;
+  } | null>(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [statusFilter, setStatusFilter] = useState<string>("all");
+  const [typeFilter, setTypeFilter] = useState<string>("all");
+  const [selectedAsset, setSelectedAsset] = useState<RegisteredAsset | null>(null);
+  const [page, setPage] = useState(0);
+  const PAGE_SIZE = 50;
+
+  // Fetch registry
+  const fetchRegistry = useCallback(async () => {
+    try {
+      setError(null);
+      const res = await fetch("/api/admin/assets/registry");
+      if (!res.ok) throw new Error("Failed to load registry");
+      const data = await res.json();
+      setRegistry(data.registry);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    fetchRegistry();
+  }, [fetchRegistry]);
+
+  // Scan
+  const handleScan = async () => {
+    setScanning(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/admin/assets/scan", { method: "POST" });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Scan failed");
+      await fetchRegistry();
+      alert(
+        `Scan complete: ${data.scanned_count} files found, ${data.new_assets} new, ${data.missing_assets} missing`
+      );
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Scan failed");
+    } finally {
+      setScanning(false);
+    }
+  };
+
+  // Health check
+  const handleHealthCheck = async () => {
+    setHealthChecking(true);
+    setHealthResult(null);
+    try {
+      const res = await fetch("/api/admin/assets/health");
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || "Health check failed");
+      setHealthResult({
+        healthy_count: data.healthy_count,
+        missing_count: data.missing_count,
+      });
+      await fetchRegistry();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Health check failed");
+    } finally {
+      setHealthChecking(false);
+    }
+  };
+
+  // Filter assets
+  const filteredAssets = (registry?.assets || []).filter((asset) => {
+    if (statusFilter !== "all" && asset.status !== statusFilter) return false;
+    if (typeFilter !== "all") {
+      const imageExts = ["jpg", "jpeg", "png", "webp", "gif", "svg"];
+      const videoExts = ["mp4", "webm", "mov"];
+      if (typeFilter === "image" && !imageExts.includes(asset.extension))
+        return false;
+      if (typeFilter === "video" && !videoExts.includes(asset.extension))
+        return false;
+    }
+    if (searchQuery.trim()) {
+      const q = searchQuery.toLowerCase();
+      if (
+        !asset.filename.toLowerCase().includes(q) &&
+        !asset.path.toLowerCase().includes(q)
+      )
+        return false;
+    }
+    return true;
+  });
+
+  // Pagination
+  const totalPages = Math.ceil(filteredAssets.length / PAGE_SIZE);
+  const paginatedAssets = filteredAssets.slice(
+    page * PAGE_SIZE,
+    (page + 1) * PAGE_SIZE
+  );
+
+  // Stats
+  const stats = {
+    total: registry?.assets?.length || 0,
+    active: registry?.assets?.filter((a) => a.status === "active").length || 0,
+    missing: registry?.assets?.filter((a) => a.status === "missing").length || 0,
+    newAssets: registry?.assets?.filter((a) => a.status === "new").length || 0,
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center py-20">
+        <span className="font-mono text-sm text-neutral-500 animate-pulse">
+          Loading asset registry...
+        </span>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <h1 className="font-mono text-lg uppercase tracking-wider text-neutral-900">
+          Assets
+        </h1>
+        <div className="flex gap-2">
+          <button
+            onClick={handleHealthCheck}
+            disabled={healthChecking}
+            className="font-mono text-[11px] px-3 py-1.5 rounded border border-neutral-300 text-neutral-500 hover:text-neutral-900 hover:border-neutral-400 transition-colors disabled:opacity-50"
+          >
+            {healthChecking ? "Checking..." : "🏥 Health Check"}
+          </button>
+          <button
+            onClick={handleScan}
+            disabled={scanning}
+            className="font-mono text-[11px] px-3 py-1.5 rounded bg-[#076bff] text-white hover:bg-[#076bff]/80 transition-colors disabled:opacity-50"
+          >
+            {scanning ? "Scanning..." : "🔄 Scan Storage"}
+          </button>
+        </div>
+      </div>
+
+      {/* Error banner */}
+      {error && (
+        <div className="p-3 rounded border border-red-200 bg-red-50">
+          <p className="font-mono text-xs text-red-700">{error}</p>
+        </div>
+      )}
+
+      {/* Health check result */}
+      {healthResult && (
+        <div className="p-3 rounded border border-neutral-200 bg-white">
+          <p className="font-mono text-xs text-neutral-700">
+            Health Check:&nbsp;
+            <span className="text-green-500">{healthResult.healthy_count} healthy</span>
+            {healthResult.missing_count > 0 && (
+              <span className="text-red-500">
+                &nbsp;/ {healthResult.missing_count} missing
+              </span>
+            )}
+          </p>
+        </div>
+      )}
+
+      {/* Stats cards */}
+      <div className="grid grid-cols-4 gap-3">
+        {[
+          { label: "Total", value: stats.total, color: "text-neutral-900" },
+          { label: "Active", value: stats.active, color: "text-green-500" },
+          { label: "Missing", value: stats.missing, color: "text-red-500" },
+          { label: "New", value: stats.newAssets, color: "text-blue-400" },
+        ].map((stat) => (
+          <div
+            key={stat.label}
+            className="p-3 rounded border border-neutral-200 bg-white shadow-sm"
+          >
+            <p className="font-mono text-[10px] text-neutral-400 uppercase mb-1">
+              {stat.label}
+            </p>
+            <p className={`font-mono text-xl ${stat.color}`}>{stat.value}</p>
+          </div>
+        ))}
+      </div>
+
+      {/* Seed info */}
+      {registry && (
+        <div className="p-3 rounded border border-neutral-200 bg-white space-y-1">
+          <p className="font-mono text-[10px] text-neutral-400 uppercase">
+            Seed URL
+          </p>
+          <p className="font-mono text-xs text-neutral-700 break-all">
+            {registry.seed_url || "Not configured"}
+          </p>
+          <p className="font-mono text-[10px] text-neutral-400">
+            Last scan: {formatDate(registry.last_scanned_at)}
+            {registry.scan_error && (
+              <span className="text-red-500 ml-2">
+                Error: {registry.scan_error}
+              </span>
+            )}
+          </p>
+        </div>
+      )}
+
+      {/* Filters + Search */}
+      <div className="flex items-center gap-3">
+        <input
+          type="text"
+          value={searchQuery}
+          onChange={(e) => {
+            setSearchQuery(e.target.value);
+            setPage(0);
+          }}
+          placeholder="Search assets..."
+          className="flex-1 rounded border border-neutral-200 bg-white px-3 py-1.5 font-mono text-xs text-neutral-900 focus:border-[#076bff] focus:outline-none shadow-sm"
+        />
+        <select
+          value={statusFilter}
+          onChange={(e) => {
+            setStatusFilter(e.target.value);
+            setPage(0);
+          }}
+          className="rounded border border-neutral-200 bg-white px-2 py-1.5 font-mono text-xs text-neutral-900 focus:border-[#076bff] focus:outline-none"
+        >
+          <option value="all">All statuses</option>
+          <option value="active">Active</option>
+          <option value="missing">Missing</option>
+          <option value="new">New</option>
+          <option value="moved">Moved</option>
+        </select>
+        <select
+          value={typeFilter}
+          onChange={(e) => {
+            setTypeFilter(e.target.value);
+            setPage(0);
+          }}
+          className="rounded border border-neutral-200 bg-white px-2 py-1.5 font-mono text-xs text-neutral-900 focus:border-[#076bff] focus:outline-none"
+        >
+          <option value="all">All types</option>
+          <option value="image">Images</option>
+          <option value="video">Videos</option>
+        </select>
+      </div>
+
+      {/* Asset table */}
+      <div className="border border-neutral-200 rounded overflow-hidden">
+        {/* Table header */}
+        <div className="grid grid-cols-[1fr_80px_80px_60px_100px] gap-2 px-3 py-2 bg-neutral-50 border-b border-neutral-200">
+          <span className="font-mono text-[10px] text-neutral-400 uppercase">
+            Path
+          </span>
+          <span className="font-mono text-[10px] text-neutral-400 uppercase">
+            Type
+          </span>
+          <span className="font-mono text-[10px] text-neutral-400 uppercase">
+            Size
+          </span>
+          <span className="font-mono text-[10px] text-neutral-400 uppercase">
+            Status
+          </span>
+          <span className="font-mono text-[10px] text-neutral-400 uppercase">
+            Checked
+          </span>
+        </div>
+
+        {/* Table body */}
+        {paginatedAssets.length === 0 && (
+          <div className="flex items-center justify-center py-10">
+            <span className="font-mono text-xs text-neutral-400">
+              {stats.total === 0
+                ? "No assets registered. Click Scan to discover files from storage."
+                : "No assets match your filters."}
+            </span>
+          </div>
+        )}
+
+        {paginatedAssets.map((asset) => (
+          <button
+            key={asset._key}
+            onClick={() =>
+              setSelectedAsset(
+                selectedAsset?._key === asset._key ? null : asset
+              )
+            }
+            className={`w-full grid grid-cols-[1fr_80px_80px_60px_100px] gap-2 px-3 py-2 border-b border-neutral-100 text-left transition-colors ${
+              selectedAsset?._key === asset._key
+                ? "bg-[#076bff]/5"
+                : "hover:bg-neutral-50"
+            }`}
+          >
+            <span className="font-mono text-[11px] text-neutral-700 truncate">
+              {asset.path}
+            </span>
+            <span className="font-mono text-[10px] text-neutral-500 uppercase">
+              {asset.extension}
+            </span>
+            <span className="font-mono text-[10px] text-neutral-500">
+              {formatBytes(asset.file_size)}
+            </span>
+            <span
+              className={`font-mono text-[10px] font-bold ${getStatusColor(asset.status)}`}
+            >
+              {getStatusLabel(asset.status)}
+            </span>
+            <span className="font-mono text-[9px] text-neutral-400">
+              {asset.last_checked_at
+                ? new Date(asset.last_checked_at).toLocaleDateString()
+                : "—"}
+            </span>
+          </button>
+        ))}
+      </div>
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-between">
+          <span className="font-mono text-[10px] text-neutral-400">
+            Showing {page * PAGE_SIZE + 1}–
+            {Math.min((page + 1) * PAGE_SIZE, filteredAssets.length)} of{" "}
+            {filteredAssets.length}
+          </span>
+          <div className="flex gap-1">
+            <button
+              onClick={() => setPage(Math.max(0, page - 1))}
+              disabled={page === 0}
+              className="font-mono text-[10px] px-2 py-1 rounded border border-neutral-300 text-neutral-500 hover:text-neutral-900 disabled:opacity-30"
+            >
+              Prev
+            </button>
+            {Array.from({ length: Math.min(totalPages, 10) }, (_, i) => (
+              <button
+                key={i}
+                onClick={() => setPage(i)}
+                className={`font-mono text-[10px] px-2 py-1 rounded border transition-colors ${
+                  page === i
+                    ? "border-[#076bff] bg-[#076bff]/10 text-[#076bff]"
+                    : "border-neutral-300 text-neutral-500 hover:text-neutral-900"
+                }`}
+              >
+                {i + 1}
+              </button>
+            ))}
+            <button
+              onClick={() => setPage(Math.min(totalPages - 1, page + 1))}
+              disabled={page >= totalPages - 1}
+              className="font-mono text-[10px] px-2 py-1 rounded border border-neutral-300 text-neutral-500 hover:text-neutral-900 disabled:opacity-30"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Selected asset detail */}
+      {selectedAsset && (
+        <div className="p-4 rounded border border-neutral-200 bg-white space-y-3">
+          <div className="flex items-center justify-between">
+            <h3 className="font-mono text-sm text-neutral-900">Asset Details</h3>
+            <button
+              onClick={() => setSelectedAsset(null)}
+              className="text-neutral-400 hover:text-neutral-900"
+            >
+              ✕
+            </button>
+          </div>
+
+          <div className="grid grid-cols-2 gap-4">
+            <div className="space-y-2">
+              <div>
+                <p className="font-mono text-[9px] text-neutral-400 uppercase">
+                  Full Path
+                </p>
+                <p className="font-mono text-xs text-neutral-700 break-all">
+                  {selectedAsset.path}
+                </p>
+              </div>
+              <div>
+                <p className="font-mono text-[9px] text-neutral-400 uppercase">
+                  Filename
+                </p>
+                <p className="font-mono text-xs text-neutral-900">
+                  {selectedAsset.filename}
+                </p>
+              </div>
+              <div className="flex gap-4">
+                <div>
+                  <p className="font-mono text-[9px] text-neutral-400 uppercase">
+                    Size
+                  </p>
+                  <p className="font-mono text-xs text-neutral-700">
+                    {formatBytes(selectedAsset.file_size)}
+                  </p>
+                </div>
+                <div>
+                  <p className="font-mono text-[9px] text-neutral-400 uppercase">
+                    MIME Type
+                  </p>
+                  <p className="font-mono text-xs text-neutral-700">
+                    {selectedAsset.mime_type || "—"}
+                  </p>
+                </div>
+              </div>
+              {selectedAsset.width && selectedAsset.height && (
+                <div>
+                  <p className="font-mono text-[9px] text-neutral-400 uppercase">
+                    Dimensions
+                  </p>
+                  <p className="font-mono text-xs text-neutral-700">
+                    {selectedAsset.width} × {selectedAsset.height}px
+                  </p>
+                </div>
+              )}
+              <div>
+                <p className="font-mono text-[9px] text-neutral-400 uppercase">
+                  Status
+                </p>
+                <p
+                  className={`font-mono text-xs font-bold ${getStatusColor(selectedAsset.status)}`}
+                >
+                  {getStatusLabel(selectedAsset.status)}
+                </p>
+              </div>
+              {selectedAsset.used_in && selectedAsset.used_in.length > 0 && (
+                <div>
+                  <p className="font-mono text-[9px] text-neutral-400 uppercase">
+                    Used in ({selectedAsset.used_in.length} documents)
+                  </p>
+                  <div className="flex flex-wrap gap-1 mt-1">
+                    {selectedAsset.used_in.map((docId) => (
+                      <span
+                        key={docId}
+                        className="font-mono text-[9px] text-neutral-600 bg-neutral-100 px-1.5 py-0.5 rounded"
+                      >
+                        {docId}
+                      </span>
+                    ))}
+                  </div>
+                </div>
+              )}
+              {selectedAsset.file_hash && (
+                <div>
+                  <p className="font-mono text-[9px] text-neutral-400 uppercase">
+                    Content Hash
+                  </p>
+                  <p className="font-mono text-[9px] text-neutral-500 break-all">
+                    {selectedAsset.file_hash}
+                  </p>
+                </div>
+              )}
+            </div>
+
+            {/* Preview */}
+            <div className="flex items-center justify-center bg-neutral-50 rounded border border-neutral-200 min-h-[150px]">
+              {registry?.seed_url &&
+              ["jpg", "jpeg", "png", "webp", "gif", "svg"].includes(
+                selectedAsset.extension
+              ) ? (
+                // eslint-disable-next-line @next/next/no-img-element
+                <img
+                  src={`${registry.seed_url.replace(/\/$/, "")}/${selectedAsset.path}`}
+                  alt={selectedAsset.filename}
+                  className="max-w-full max-h-[300px] object-contain"
+                  onError={(e) => {
+                    (e.target as HTMLImageElement).style.display = "none";
+                  }}
+                />
+              ) : (
+                <span className="text-4xl">
+                  {["mp4", "webm", "mov"].includes(selectedAsset.extension)
+                    ? "🎬"
+                    : "📄"}
+                </span>
+              )}
+            </div>
+          </div>
+
+          {/* Resolved URL */}
+          {registry?.seed_url && (
+            <div>
+              <p className="font-mono text-[9px] text-neutral-400 uppercase">
+                Resolved URL
+              </p>
+              <p className="font-mono text-[10px] text-neutral-500 break-all">
+                {registry.seed_url.replace(/\/$/, "")}/{selectedAsset.path}
+              </p>
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Relink Log */}
+      {registry?.relink_log && registry.relink_log.length > 0 && (
+        <div className="space-y-2">
+          <h3 className="font-mono text-xs text-neutral-500 uppercase tracking-wider">
+            Relink History
+          </h3>
+          <div className="space-y-1">
+            {[...registry.relink_log].reverse().map((entry: RelinkLogEntry) => (
+              <div
+                key={entry._key}
+                className="p-2 rounded border border-neutral-200 bg-white"
+              >
+                <div className="flex items-center justify-between">
+                  <span className="font-mono text-[10px] text-neutral-500">
+                    {formatDate(entry.date)}
+                  </span>
+                  <span className="font-mono text-[10px]">
+                    <span className="text-green-500">
+                      {entry.assets_relinked} relinked
+                    </span>
+                    {entry.assets_missing > 0 && (
+                      <span className="text-red-500 ml-2">
+                        {entry.assets_missing} missing
+                      </span>
+                    )}
+                  </span>
+                </div>
+                <p className="font-mono text-[9px] text-neutral-400 mt-1 truncate">
+                  {entry.old_seed} → {entry.new_seed}
+                </p>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}