From b47314fcab940f5a040eea4d15219b08a103fe9e Mon Sep 17 00:00:00 2001
From: "soroush.asadi" <soroush.asadi@aliasaas.com>
Date: Tue, 2 Jun 2026 23:23:52 +0330
Subject: [PATCH] feat(admin): image thumbnails in lists + template image/demo
 fields
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- AdminThumb: reusable thumbnail (raster + SVG via <img>, dashed fallback on
  empty/broken)
- AdminResource: ColumnDef gains type:"image" → renders thumbnails in tables
- image thumbnail columns for categories, slides, home-events, internal routes;
  categories icon field now multiline (accepts raw SVG markup)
- TemplatesAdmin: cover image / mini-demo / demo / full-demo upload fields
  (backed by existing container image/demo fields) + thumbnail column in the list

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/components/admin/AdminResource.tsx   |  4 ++-
 src/components/admin/AdminThumb.tsx      | 46 ++++++++++++++++++++++++
 src/components/admin/TemplatesAdmin.tsx  | 26 +++++++++++---
 src/components/admin/admin-resources.tsx |  6 +++-
 4 files changed, 76 insertions(+), 6 deletions(-)
 create mode 100644 src/components/admin/AdminThumb.tsx

diff --git a/src/components/admin/AdminResource.tsx b/src/components/admin/AdminResource.tsx
index c97b9ff..f5e06c9 100644
--- a/src/components/admin/AdminResource.tsx
+++ b/src/components/admin/AdminResource.tsx
@@ -3,6 +3,7 @@
 import { useCallback, useEffect, useState, type ReactNode } from "react";
 
 import { FileUploadField } from "@/components/admin/FileUploadField";
+import { AdminThumb } from "@/components/admin/AdminThumb";
 
 export interface FieldDef {
   key: string;
@@ -17,6 +18,7 @@ export interface FieldDef {
 export interface ColumnDef {
   key: string;
   label: string;
+  type?: "text" | "image";
   render?: (row: Record<string, unknown>) => ReactNode;
 }
 
@@ -162,7 +164,7 @@ export function AdminResource({ config }: { config: ResourceConfig }) {
                 <tr key={String(row[idKey] ?? i)} className="border-b border-[#161a2e] hover:bg-[#12152a]">
                   {config.columns.map((c) => (
                     <td key={c.key} className="px-4 py-3 text-gray-200">
-                      {c.render ? c.render(row) : formatCell(row[c.key])}
+                      {c.render ? c.render(row) : c.type === "image" ? <AdminThumb src={row[c.key]} /> : formatCell(row[c.key])}
                     </td>
                   ))}
                   {(config.canEdit || config.canDelete || config.rowActions) && (
diff --git a/src/components/admin/AdminThumb.tsx b/src/components/admin/AdminThumb.tsx
new file mode 100644
index 0000000..011ca55
--- /dev/null
+++ b/src/components/admin/AdminThumb.tsx
@@ -0,0 +1,46 @@
+"use client";
+
+import { useState } from "react";
+
+/**
+ * Small image thumbnail for admin tables/forms. Renders raster + SVG via <img>.
+ * Falls back to a dashed placeholder when empty or the URL fails to load.
+ */
+export function AdminThumb({
+  src,
+  alt = "",
+  size = 40,
+  rounded = "rounded-md",
+}: {
+  src?: unknown;
+  alt?: string;
+  size?: number;
+  rounded?: string;
+}) {
+  const url = typeof src === "string" ? src.trim() : "";
+  const [failed, setFailed] = useState(false);
+
+  if (!url || failed) {
+    return (
+      <div
+        style={{ width: size, height: size }}
+        className={`flex items-center justify-center border border-dashed border-[#262b40] bg-[#0c0e1a] text-[9px] text-gray-600 ${rounded}`}
+      >
+        {failed ? "✕" : "—"}
+      </div>
+    );
+  }
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={url}
+      alt={alt}
+      width={size}
+      height={size}
+      loading="lazy"
+      onError={() => setFailed(true)}
+      style={{ width: size, height: size }}
+      className={`border border-[#262b40] bg-[#0c0e1a] object-cover ${rounded}`}
+    />
+  );
+}
diff --git a/src/components/admin/TemplatesAdmin.tsx b/src/components/admin/TemplatesAdmin.tsx
index 7611671..fa67c6e 100644
--- a/src/components/admin/TemplatesAdmin.tsx
+++ b/src/components/admin/TemplatesAdmin.tsx
@@ -2,11 +2,17 @@
 
 import { useCallback, useEffect, useState } from "react";
 
+import { FileUploadField } from "@/components/admin/FileUploadField";
+import { AdminThumb } from "@/components/admin/AdminThumb";
+
 interface Container {
   id: string;
   slug: string;
   name: string;
   description?: string | null;
+  image?: string | null;
+  demo?: string | null;
+  mini_demo?: string | null;
   is_published?: boolean;
   is_premium?: boolean;
   is_mockup?: boolean;
@@ -18,6 +24,7 @@ interface Ref { id: string; name: string; slug?: string }
 interface Detail extends Container {
   keywords?: string | null;
   news_text?: string | null;
+  full_demo?: string | null;
   categories?: Ref[];
   tags?: Ref[];
   projects?: { id: string; name: string; aspect?: string | null; resolution?: string }[];
@@ -34,11 +41,13 @@ const lbl = "mb-1 block text-xs font-medium text-gray-400";
 
 interface FormState {
   slug: string; name: string; description: string; keywords: string; news_text: string;
+  image: string; demo: string; full_demo: string; mini_demo: string;
   is_published: boolean; is_premium: boolean; is_mockup: boolean; primary_mode: string; sort: number;
   category_ids: string[]; tag_ids: string[];
 }
 const emptyForm: FormState = {
   slug: "", name: "", description: "", keywords: "", news_text: "",
+  image: "", demo: "", full_demo: "", mini_demo: "",
   is_published: false, is_premium: false, is_mockup: false, primary_mode: "FLEXIBLE", sort: 0,
   category_ids: [], tag_ids: [],
 };
@@ -105,7 +114,9 @@ export function TemplatesAdmin() {
     setProjects(d.projects ?? []);
     setForm({
       slug: d.slug, name: d.name, description: d.description ?? "", keywords: d.keywords ?? "",
-      news_text: d.news_text ?? "", is_published: !!d.is_published, is_premium: !!d.is_premium,
+      news_text: d.news_text ?? "", image: d.image ?? "", demo: d.demo ?? "",
+      full_demo: d.full_demo ?? "", mini_demo: d.mini_demo ?? "",
+      is_published: !!d.is_published, is_premium: !!d.is_premium,
       is_mockup: !!d.is_mockup, primary_mode: d.primary_mode ?? "FLEXIBLE", sort: d.sort ?? 0,
       category_ids: (d.categories ?? []).map((c) => c.id), tag_ids: (d.tags ?? []).map((t) => t.id),
     });
@@ -151,18 +162,19 @@ export function TemplatesAdmin() {
         <table className="w-full text-sm">
           <thead>
             <tr className="border-b border-[#1e2235] text-left text-xs text-gray-500">
-              <th className="px-4 py-3">Name</th><th className="px-4 py-3">Slug</th>
+              <th className="px-4 py-3">Image</th><th className="px-4 py-3">Name</th><th className="px-4 py-3">Slug</th>
               <th className="px-4 py-3">Status</th><th className="px-4 py-3">Mode</th>
               <th className="px-4 py-3">Sort</th><th className="px-4 py-3 text-right">Actions</th>
             </tr>
           </thead>
           <tbody>
             {loading ? (
-              <tr><td colSpan={6} className="px-4 py-8 text-center text-gray-500">Loading…</td></tr>
+              <tr><td colSpan={7} className="px-4 py-8 text-center text-gray-500">Loading…</td></tr>
             ) : rows.length === 0 ? (
-              <tr><td colSpan={6} className="px-4 py-8 text-center text-gray-500">No templates.</td></tr>
+              <tr><td colSpan={7} className="px-4 py-8 text-center text-gray-500">No templates.</td></tr>
             ) : rows.map((r) => (
               <tr key={r.id} className="border-b border-[#161a2e] hover:bg-[#12152a]">
+                <td className="px-4 py-3"><AdminThumb src={r.image ?? r.mini_demo ?? r.demo} size={48} /></td>
                 <td className="px-4 py-3 text-gray-200">{r.name}</td>
                 <td className="px-4 py-3 text-gray-400">{r.slug}</td>
                 <td className="px-4 py-3">
@@ -195,6 +207,12 @@ export function TemplatesAdmin() {
                 <div><label className={lbl}>Slug *</label><input className={inp} value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} /></div>
               </div>
               <div><label className={lbl}>Description</label><textarea className={`${inp} min-h-[80px]`} value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} /></div>
+              <div className="grid gap-3 sm:grid-cols-2">
+                <div><label className={lbl}>Cover image</label><FileUploadField value={form.image} onChange={(u) => setForm({ ...form, image: u })} accept="image/*" /></div>
+                <div><label className={lbl}>Mini demo (thumbnail/gif)</label><FileUploadField value={form.mini_demo} onChange={(u) => setForm({ ...form, mini_demo: u })} accept="image/*,video/*" /></div>
+                <div><label className={lbl}>Demo (preview video)</label><FileUploadField value={form.demo} onChange={(u) => setForm({ ...form, demo: u })} accept="video/*,image/*" /></div>
+                <div><label className={lbl}>Full demo</label><FileUploadField value={form.full_demo} onChange={(u) => setForm({ ...form, full_demo: u })} accept="video/*,image/*" /></div>
+              </div>
               <div><label className={lbl}>Keywords (SEO)</label><input className={inp} value={form.keywords} onChange={(e) => setForm({ ...form, keywords: e.target.value })} /></div>
               <div><label className={lbl}>News / announcement text</label><textarea className={`${inp} min-h-[50px]`} value={form.news_text} onChange={(e) => setForm({ ...form, news_text: e.target.value })} /></div>
               <div className="grid gap-3 sm:grid-cols-2">
diff --git a/src/components/admin/admin-resources.tsx b/src/components/admin/admin-resources.tsx
index 99ace6c..e221461 100644
--- a/src/components/admin/admin-resources.tsx
+++ b/src/components/admin/admin-resources.tsx
@@ -43,6 +43,7 @@ export const categoriesConfig: ResourceConfig = {
   canEdit: true,
   canDelete: true,
   columns: [
+    { key: "image_url", label: "Image", type: "image" },
     { key: "name", label: "Name" },
     { key: "slug", label: "Slug" },
     { key: "is_active", label: "Active", render: (r) => badge(!!r.is_active, "active", "hidden") },
@@ -53,7 +54,7 @@ export const categoriesConfig: ResourceConfig = {
     { key: "slug", label: "Slug", required: true },
     { key: "description", label: "Description / content", type: "textarea" },
     { key: "image_url", label: "Image", type: "image" },
-    { key: "icon", label: "Icon" },
+    { key: "icon", label: "Icon (SVG markup or icon name)", type: "textarea" },
     // SEO
     { key: "meta_title", label: "SEO · Meta title" },
     { key: "meta_description", label: "SEO · Meta description", type: "textarea" },
@@ -170,6 +171,7 @@ export const slidesConfig: ResourceConfig = {
   basePath: "slides",
   canDelete: true,
   columns: [
+    { key: "image", label: "Image", type: "image" },
     { key: "title", label: "Title" },
     { key: "slide_type", label: "Type" },
     { key: "is_active", label: "Active", render: (r) => badge(!!r.is_active, "active", "hidden") },
@@ -185,6 +187,7 @@ export const homeEventsConfig: ResourceConfig = {
   canEdit: true,
   canDelete: true,
   columns: [
+    { key: "image", label: "Image", type: "image" },
     { key: "title", label: "Title" },
     { key: "badge", label: "Badge" },
     { key: "sort", label: "Sort" },
@@ -243,6 +246,7 @@ export const routesConfig: ResourceConfig = {
   canEdit: true,
   canDelete: true,
   columns: [
+    { key: "image", label: "Image", type: "image" },
     { key: "name", label: "Name" },
     { key: "slug", label: "Slug" },
     { key: "priority", label: "Priority" },