@elsapiens/cli 0.1.0 → 0.1.2

package/dist/templates/pages/list.ejs

@@ -1,191 +1,662 @@
+import { useState, useMemo, useCallback, useEffect } from 'react';
+import { useNavigate, useSearchParams, Link } from 'react-router-dom';
+import { cn } from '@elsapiens/utils';
+import { usePageHeader } from '@elsapiens/providers';
+import { PageHeaderWithBreadcrumbs } from '@elsapiens/layout';
 import {
   Button,
-  Input,
-  Select,
-  Card,
-  CardHeader,
-  CardTitle,
-  CardContent,
-  Table,
   Badge,
-  DonutChart,
+  Table,
+  FilterBar,
+  Skeleton,
+  Modal,
+  Summary,
 } from '@elsapiens/ui';
-import { Search, Filter, Plus, FileText, MoreVertical } from 'lucide-react';
-
-// Sample data - replace with your data source
-const items = [
-  { id: '1', name: 'Item One', type: 'Type A', status: 'active', date: '2024-01-15' },
-  { id: '2', name: 'Item Two', type: 'Type B', status: 'pending', date: '2024-01-14' },
-  { id: '3', name: 'Item Three', type: 'Type A', status: 'active', date: '2024-01-13' },
-  { id: '4', name: 'Item Four', type: 'Type C', status: 'inactive', date: '2024-01-12' },
-  { id: '5', name: 'Item Five', type: 'Type B', status: 'active', date: '2024-01-11' },
-  { id: '6', name: 'Item Six', type: 'Type A', status: 'pending', date: '2024-01-10' },
-  { id: '7', name: 'Item Seven', type: 'Type C', status: 'active', date: '2024-01-09' },
-  { id: '8', name: 'Item Eight', type: 'Type B', status: 'inactive', date: '2024-01-08' },
-];
+import type { TableColumn, FilterBarTab, FilterBarField, FilterBarCondition } from '@elsapiens/ui';
+import { Plus, Edit, Trash2, SearchX, <%= icon %>, Info, ChevronDown, ChevronUp, Tag, BarChart3, Layers, Settings, TrendingUp, AlertTriangle } from 'lucide-react';
 
-const itemStats = [
-  { name: 'Type A', value: 3, color: 'primary' as const },
-  { name: 'Type B', value: 3, color: 'success' as const },
-  { name: 'Type C', value: 2, color: 'warning' as const },
+interface <%= pascalName %>ListPageProps {
+  className?: string;
+}
+
+// Table row type - customize based on your data
+interface <%= pascalName %>Row extends Record<string, unknown> {
+  id: string;
+  name: string;
+  status: 'active' | 'draft' | 'archived';
+  category: string;
+  createdAt: string;
+}
+
+// Sample data - replace with your data source (e.g., GraphQL query)
+const sampleData: <%= pascalName %>Row[] = [
+  { id: '1', name: '<%= singularTitle %> One', status: 'active', category: 'Category A', createdAt: '2024-01-15' },
+  { id: '2', name: '<%= singularTitle %> Two', status: 'active', category: 'Category B', createdAt: '2024-01-14' },
+  { id: '3', name: '<%= singularTitle %> Three', status: 'draft', category: 'Category A', createdAt: '2024-01-13' },
+  { id: '4', name: '<%= singularTitle %> Four', status: 'archived', category: 'Category C', createdAt: '2024-01-12' },
+  { id: '5', name: '<%= singularTitle %> Five', status: 'active', category: 'Category B', createdAt: '2024-01-11' },
 ];
 
-const getStatusBadgeVariant = (status: string): 'default' | 'success' | 'warning' | 'info' => {
-  switch (status) {
-    case 'active':
-      return 'success';
-    case 'pending':
-      return 'warning';
-    case 'inactive':
-      return 'default';
-    default:
-      return 'default';
-  }
+const statusLabels: Record<string, string> = {
+  active: 'Active',
+  draft: 'Draft',
+  archived: 'Archived',
 };
 
-export default function <%= pascalName %>() {
-  return (
-    <div className="p-6">
-      {/* Page Header - pl-6 to align with table spacer */}
-      <div className="flex items-center justify-between mb-8 pl-6">
-        <div>
-          <h1 className="text-2xl font-bold text-foreground"><%= title %></h1>
-          <p className="text-muted-foreground"><%= description %></p>
+const statusColors: Record<string, string> = {
+  active: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200',
+  draft: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200',
+  archived: 'bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-200',
+};
+
+const categoryOptions = [
+  { value: 'Category A', label: 'Category A' },
+  { value: 'Category B', label: 'Category B' },
+  { value: 'Category C', label: 'Category C' },
+];
+
+export function <%= pascalName %>ListPage({ className }: <%= pascalName %>ListPageProps) {
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  // URL-based state
+  const activeTab = searchParams.get('tab') || 'all';
+  const searchValue = searchParams.get('search') || '';
+  const page = parseInt(searchParams.get('page') || '1', 10);
+  const sortBy = searchParams.get('sortBy') || 'name';
+  const sortOrder = (searchParams.get('sortOrder') || 'asc') as 'asc' | 'desc';
+
+  // Filter conditions state (synced with URL)
+  const [conditions, setConditions] = useState<FilterBarCondition[]>([]);
+
+  // Initialize conditions from URL params on mount
+  useEffect(() => {
+    const categoryParam = searchParams.get('category');
+    if (categoryParam) {
+      // Support comma-separated values for multi-select
+      const categoryValues = categoryParam.split(',').filter(Boolean);
+      setConditions([{
+        id: 'category-filter',
+        fieldId: 'category',
+        operator: 'equals',
+        value: categoryValues,
+      }]);
+    }
+  }, []); // Only run on mount
+
+  // Modal state
+  const [deleteModalOpen, setDeleteModalOpen] = useState(false);
+  const [itemToDelete, setItemToDelete] = useState<<%= pascalName %>Row | null>(null);
+
+  // Loading state - set to true when fetching data
+  const [loading] = useState(false);
+
+  // Collapsible info state (persisted in localStorage)
+  const [isInfoCollapsed, setIsInfoCollapsed] = useState(() => {
+    if (typeof window !== 'undefined') {
+      return localStorage.getItem('<%= kebabName %>-list-info-collapsed') === 'true';
+    }
+    return false;
+  });
+
+  const toggleInfoCollapsed = useCallback(() => {
+    setIsInfoCollapsed(prev => {
+      const newValue = !prev;
+      localStorage.setItem('<%= kebabName %>-list-info-collapsed', String(newValue));
+      return newValue;
+    });
+  }, []);
+
+  // Handle conditions change - sync to URL params
+  const handleConditionsChange = useCallback((newConditions: FilterBarCondition[]) => {
+    setConditions(newConditions);
+    const params = new URLSearchParams(searchParams);
+
+    // Clear old filter params
+    params.delete('category');
+
+    // Add new filter params from conditions (support multiple values)
+    newConditions.forEach(condition => {
+      if (condition.fieldId === 'category' && Array.isArray(condition.value) && condition.value.length > 0) {
+        // Store multiple values as comma-separated string
+        params.set('category', condition.value.join(','));
+      }
+    });
+
+    params.delete('page'); // Reset to first page when filters change
+    setSearchParams(params);
+  }, [searchParams, setSearchParams]);
+
+  // Extract category filter from conditions (returns array for multi-select)
+  const categoryFilters = useMemo(() => {
+    const categoryCondition = conditions.find(c => c.fieldId === 'category');
+    if (categoryCondition && Array.isArray(categoryCondition.value) && categoryCondition.value.length > 0) {
+      return categoryCondition.value;
+    }
+    return [];
+  }, [conditions]);
+
+  // Filter data based on URL params and conditions
+  const filteredData = useMemo(() => {
+    let result = [...sampleData];
+
+    // Filter by search
+    if (searchValue) {
+      const search = searchValue.toLowerCase();
+      result = result.filter(item =>
+        item.name.toLowerCase().includes(search)
+      );
+    }
+
+    // Filter by category (from conditions - supports multiple selections)
+    if (categoryFilters.length > 0) {
+      result = result.filter(item => categoryFilters.includes(item.category));
+    }
+
+    // Filter by tab/status
+    if (activeTab === 'active') {
+      result = result.filter(item => item.status === 'active');
+    } else if (activeTab === 'draft') {
+      result = result.filter(item => item.status === 'draft');
+    } else if (activeTab === 'archived') {
+      result = result.filter(item => item.status === 'archived');
+    }
+
+    // Sort
+    result.sort((a, b) => {
+      const aVal = String(a[sortBy] || '');
+      const bVal = String(b[sortBy] || '');
+      return sortOrder === 'asc'
+        ? aVal.localeCompare(bVal)
+        : bVal.localeCompare(aVal);
+    });
+
+    return result;
+  }, [searchValue, categoryFilters, activeTab, sortBy, sortOrder]);
+
+  // Pagination
+  const perPage = 20;
+  const totalPages = Math.ceil(filteredData.length / perPage);
+  const paginatedData = filteredData.slice((page - 1) * perPage, page * perPage);
+
+  // Check if any filters are active
+  const hasActiveFilters = Boolean(searchValue || conditions.length > 0 || activeTab !== 'all');
+
+  // Summary stats
+  const summaryStats = useMemo(() => {
+    const total = sampleData.length;
+    const active = sampleData.filter(i => i.status === 'active').length;
+    const draft = sampleData.filter(i => i.status === 'draft').length;
+    const archived = sampleData.filter(i => i.status === 'archived').length;
+    return { total, active, draft, archived };
+  }, []);
+
+  // Helper to clear all filters
+  const clearFilters = useCallback(() => {
+    setConditions([]);
+    setSearchParams(new URLSearchParams());
+  }, [setSearchParams]);
+
+  // Set page header
+  usePageHeader({
+    title: '<%= title %>',
+    description: '<%= description %>',
+    breadcrumbs: [
+      { label: 'Home', href: '/', as: Link },
+      { label: '<%= title %>' },
+    ],
+  });
+
+  // Filter tabs
+  const filterTabs: FilterBarTab[] = [
+    { id: 'all', label: 'All', count: sampleData.length },
+    { id: 'active', label: 'Active', count: sampleData.filter(i => i.status === 'active').length },
+    { id: 'draft', label: 'Draft', count: sampleData.filter(i => i.status === 'draft').length },
+    { id: 'archived', label: 'Archived', count: sampleData.filter(i => i.status === 'archived').length },
+  ];
+
+  // Filter fields
+  const filterFields: FilterBarField[] = [
+    {
+      id: 'category',
+      label: 'Category',
+      type: 'multi-select',
+      options: categoryOptions,
+    },
+  ];
+
+  // Handlers
+  const handleTabChange = useCallback((tabId: string) => {
+    const params = new URLSearchParams(searchParams);
+    params.set('tab', tabId);
+    params.delete('page');
+    setSearchParams(params);
+  }, [searchParams, setSearchParams]);
+
+  const handleSearchChange = useCallback((value: string) => {
+    const params = new URLSearchParams(searchParams);
+    if (value) {
+      params.set('search', value);
+    } else {
+      params.delete('search');
+    }
+    params.delete('page');
+    setSearchParams(params);
+  }, [searchParams, setSearchParams]);
+
+  const handlePageChange = useCallback((newPage: number) => {
+    const params = new URLSearchParams(searchParams);
+    params.set('page', newPage.toString());
+    setSearchParams(params);
+  }, [searchParams, setSearchParams]);
+
+  const handleDelete = useCallback((item: <%= pascalName %>Row) => {
+    setItemToDelete(item);
+    setDeleteModalOpen(true);
+  }, []);
+
+  const confirmDelete = useCallback(async () => {
+    if (!itemToDelete) return;
+    // TODO: Call your delete mutation/API here
+    console.log('Deleting:', itemToDelete.id);
+    setDeleteModalOpen(false);
+    setItemToDelete(null);
+  }, [itemToDelete]);
+
+  // Table columns
+  const columns: TableColumn<<%= pascalName %>Row>[] = [
+    {
+      key: 'name',
+      header: 'Name',
+      render: (item: <%= pascalName %>Row) => (
+        <div className="flex items-center el-gap-sm">
+          <div className="w-8 h-8 rounded bg-primary/10 flex items-center justify-center flex-shrink-0">
+            <<%= icon %> className="w-4 h-4 text-primary" />
+          </div>
+          <div className="min-w-0">
+            <div className="font-medium truncate">{item.name}</div>
+          </div>
+        </div>
+      ),
+    },
+    {
+      key: 'category',
+      header: 'Category',
+      render: (item: <%= pascalName %>Row) => (
+        <Badge variant="outline" size="sm">
+          {item.category}
+        </Badge>
+      ),
+      width: '120px',
+    },
+    {
+      key: 'status',
+      header: 'Status',
+      render: (item: <%= pascalName %>Row) => (
+        <Badge className={cn('text-xs', statusColors[item.status])}>
+          {statusLabels[item.status]}
+        </Badge>
+      ),
+      width: '100px',
+    },
+    {
+      key: 'createdAt',
+      header: 'Created',
+      render: (item: <%= pascalName %>Row) => (
+        <span className="text-sm text-muted-foreground">{item.createdAt}</span>
+      ),
+      width: '120px',
+    },
+    {
+      key: 'actions',
+      header: '',
+      render: (item: <%= pascalName %>Row) => (
+        <div className="flex items-center el-gap-xs justify-end">
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation();
+              navigate(`/<%= routePath %>/${item.id}/edit`);
+            }}
+          >
+            <Edit className="w-4 h-4" />
+          </Button>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={(e) => {
+              e.stopPropagation();
+              handleDelete(item);
+            }}
+          >
+            <Trash2 className="w-4 h-4 text-destructive" />
+          </Button>
         </div>
-        <Button>
+      ),
+      width: '100px',
+    },
+  ];
+
+  return (
+    <div className={cn('flex flex-col flex-1', className)}>
+      <PageHeaderWithBreadcrumbs variant="card" linkComponent={Link}>
+        <Button onClick={() => navigate('/<%= routePath %>/new')}>
           <Plus className="w-4 h-4 mr-2" />
-          Add New
+          Add <%= singularTitle %>
         </Button>
-      </div>
+      </PageHeaderWithBreadcrumbs>
+
+      <div className="flex-1 flex flex-col el-p-lg el-gap-lg" style={{ overflowX: 'clip' }}>
+        {/* Summary Bar */}
+        <Summary
+          items={[
+            {
+              label: 'Total <%= title %>',
+              value: summaryStats.total,
+              icon: <<%= icon %> className="w-4 h-4" />,
+            },
+            {
+              label: 'Active',
+              value: summaryStats.active,
+              icon: <TrendingUp className="w-4 h-4" />,
+            },
+            {
+              label: 'Draft',
+              value: summaryStats.draft,
+              icon: <AlertTriangle className="w-4 h-4" />,
+            },
+            {
+              label: 'Archived',
+              value: summaryStats.archived,
+              icon: <Layers className="w-4 h-4" />,
+            },
+          ]}
+        />
+
+        {/* Main Content Card */}
+        <div className="flex-1 flex flex-col border rounded-lg el-p-md" style={{ '--el-container-px': 'var(--el-layout-gap-md)' } as React.CSSProperties}>
+          <FilterBar
+            tabs={filterTabs}
+            activeTab={activeTab}
+            onTabChange={handleTabChange}
+            fields={filterFields}
+            conditions={conditions}
+            onConditionsChange={handleConditionsChange}
+            search={{
+              value: searchValue,
+              onChange: handleSearchChange,
+              placeholder: 'Search <%= title.toLowerCase() %>...',
+            }}
+            sort={{
+              options: [
+                { id: 'name', label: 'Name' },
+                { id: 'category', label: 'Category' },
+                { id: 'createdAt', label: 'Created Date' },
+              ],
+              value: sortBy,
+              direction: sortOrder,
+              onChange: (sortId, direction) => {
+                const params = new URLSearchParams(searchParams);
+                params.set('sortBy', sortId);
+                params.set('sortOrder', direction);
+                setSearchParams(params);
+              },
+            }}
+            inCard
+            firstInCard
+          />
 
-      {/* Stats Row */}
-      <div className="grid grid-cols-1 lg:grid-cols-4 gap-6 mb-8">
-        {/* Quick Stats */}
-        <Card padding="none">
-          <CardContent className="p-6">
-            <div className="text-center">
-              <p className="text-3xl font-bold text-foreground">{items.length}</p>
-              <p className="text-sm text-muted-foreground">Total Items</p>
+          {/* Table */}
+          {loading && paginatedData.length === 0 ? (
+            <div className="el-p-md el-space-y-md">
+              {Array.from({ length: 5 }).map((_, i) => (
+                <div key={i} className="flex items-center el-gap-md">
+                  <Skeleton className="h-8 w-8 rounded" />
+                  <Skeleton className="h-4 w-40 flex-1" />
+                  <Skeleton className="h-4 w-24" />
+                  <Skeleton className="h-4 w-20" />
+                  <Skeleton className="h-4 w-24" />
+                </div>
+              ))}
             </div>
-          </CardContent>
-        </Card>
-        <Card padding="none">
-          <CardContent className="p-6">
-            <div className="text-center">
-              <p className="text-3xl font-bold text-foreground">
-                {items.filter(i => i.status === 'active').length}
-              </p>
-              <p className="text-sm text-muted-foreground">Active</p>
+          ) : paginatedData.length === 0 && hasActiveFilters ? (
+            /* Filtered empty state - no results for current filters */
+            <div className="flex-1 flex flex-col items-center justify-center el-gap-md el-py-xl">
+              <div className="w-16 h-16 rounded-full bg-muted/50 flex items-center justify-center">
+                <SearchX className="w-8 h-8 text-muted-foreground" />
+              </div>
+              <div className="text-center el-space-y-xs">
+                <h3 className="text-lg font-medium text-foreground">No results found</h3>
+                <p className="text-sm text-muted-foreground max-w-md">
+                  No <%= title.toLowerCase() %> match your current filters. Try adjusting your search or filters.
+                </p>
+              </div>
+              <Button variant="outline" onClick={clearFilters}>
+                Clear filters
+              </Button>
             </div>
-          </CardContent>
-        </Card>
-        <Card padding="none">
-          <CardContent className="p-6">
-            <div className="text-center">
-              <p className="text-3xl font-bold text-foreground">
-                {items.filter(i => i.status === 'pending').length}
-              </p>
-              <p className="text-sm text-muted-foreground">Pending</p>
+          ) : paginatedData.length === 0 ? (
+            /* True empty state - no data at all */
+            <div className="flex-1 flex flex-col items-center justify-center el-gap-md el-py-xl">
+              <div className="w-16 h-16 rounded-full bg-muted/50 flex items-center justify-center">
+                <<%= icon %> className="w-8 h-8 text-muted-foreground" />
+              </div>
+              <div className="text-center el-space-y-xs">
+                <h3 className="text-lg font-medium text-foreground">No <%= title.toLowerCase() %> yet</h3>
+                <p className="text-sm text-muted-foreground max-w-md">
+                  Get started by creating your first <%= singularTitle.toLowerCase() %>.
+                </p>
+              </div>
+              <Button onClick={() => navigate('/<%= routePath %>/new')}>
+                <Plus className="w-4 h-4 mr-2" />
+                Add <%= singularTitle %>
+              </Button>
             </div>
-          </CardContent>
-        </Card>
-        {/* Distribution Chart */}
-        <Card padding="none">
-          <CardContent className="p-6">
-            <DonutChart
-              data={itemStats}
-              height={100}
-              showLegend={false}
-              centerValue={String(items.length)}
-              centerSubtext="Items"
+          ) : (
+            <Table
+              data={paginatedData}
+              columns={columns}
+              onRowClick={(item) => navigate(`/<%= routePath %>/${item.id}`)}
+              inCard="last"
             />
-          </CardContent>
-        </Card>
-      </div>
+          )}
+        </div>
 
-      {/* Filters - pl-6 to align with table spacer */}
-      <div className="flex items-center gap-4 mb-6 pl-6">
-        <div className="flex-1 max-w-md">
-          <div className="relative">
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
-            <Input placeholder="Search..." className="pl-10" hideMessage />
+        {/* Pagination */}
+        {totalPages > 1 && (
+          <div className="flex items-center justify-between border rounded-lg el-px-lg el-py-md bg-muted/20">
+            <p className="text-sm text-muted-foreground">
+              Showing {(page - 1) * perPage + 1} to{' '}
+              {Math.min(page * perPage, filteredData.length)} of{' '}
+              {filteredData.length} <%= title.toLowerCase() %>
+            </p>
+            <div className="flex items-center el-gap-field">
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={page <= 1}
+                onClick={() => handlePageChange(page - 1)}
+              >
+                Previous
+              </Button>
+              <span className="text-sm text-muted-foreground">
+                Page {page} of {totalPages}
+              </span>
+              <Button
+                variant="outline"
+                size="sm"
+                disabled={page >= totalPages}
+                onClick={() => handlePageChange(page + 1)}
+              >
+                Next
+              </Button>
+            </div>
           </div>
-        </div>
-        <Select
-          options={[
-            { value: 'all', label: 'All Types' },
-            { value: 'type-a', label: 'Type A' },
-            { value: 'type-b', label: 'Type B' },
-            { value: 'type-c', label: 'Type C' },
-          ]}
-          placeholder="Filter by type"
-          hideMessage
-        />
-        <Button variant="outline">
-          <Filter className="w-4 h-4 mr-2" />
-          Filters
-        </Button>
-      </div>
+        )}
 
-      {/* Table */}
-      <div>
-        <Card padding="none">
-          <CardHeader className="p-6">
-            <CardTitle>All Items</CardTitle>
-          </CardHeader>
-          <CardContent className="p-6">
-            <Table
-              data={items}
-              columns={[
-                {
-                  key: 'name',
-                  header: 'Name',
-                  render: (item) => (
-                    <div className="flex items-center gap-3">
-                      <div className="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
-                        <FileText className="w-5 h-5 text-primary" />
+        {/* Collapsible Page Info - shows when items exist */}
+        {paginatedData.length > 0 && (
+          <div className="relative">
+            {isInfoCollapsed ? (
+              <button
+                onClick={toggleInfoCollapsed}
+                className={cn(
+                  'w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg border',
+                  'bg-gradient-to-r from-primary/[0.02] to-primary/[0.04]',
+                  'border-border/50',
+                  'text-muted-foreground text-sm',
+                  'hover:bg-primary/[0.05] hover:border-primary/30 transition-colors',
+                  'cursor-pointer'
+                )}
+              >
+                <Info className="w-4 h-4" />
+                <span className="font-medium">About <%= title %></span>
+                <ChevronDown className="w-4 h-4" />
+              </button>
+            ) : (
+              <div className="relative">
+                <div className={cn(
+                  'flex flex-col lg:flex-row items-stretch w-full',
+                  'bg-gradient-to-br from-primary/[0.02] via-transparent to-primary/[0.04]',
+                  'rounded-xl border border-border/50',
+                  'overflow-hidden'
+                )}>
+                  {/* Left Column - Illustration and What Is It */}
+                  <div className={cn(
+                    'flex flex-col items-center justify-center',
+                    'lg:w-[40%] lg:min-w-[280px] lg:max-w-[380px]',
+                    'bg-gradient-to-br from-primary/5 to-primary/10',
+                    'border-b lg:border-b-0 lg:border-r border-border/30',
+                    'p-6 lg:p-8'
+                  )}>
+                    <div className="relative mb-6">
+                      <div className="absolute -inset-4 bg-primary/5 rounded-full blur-2xl" />
+                      <div className="absolute top-0 right-0 w-16 h-16 bg-primary/10 rounded-full blur-xl" />
+                      <div className="absolute bottom-0 left-0 w-12 h-12 bg-primary/10 rounded-full blur-lg" />
+                      <div className="relative w-24 h-24 rounded-full bg-primary/10 flex items-center justify-center">
+                        <<%= icon %> className="w-12 h-12 text-primary" />
                       </div>
-                      <span className="font-medium text-foreground">{item.name}</span>
                     </div>
-                  ),
-                },
-                {
-                  key: 'type',
-                  header: 'Type',
-                  render: (item) => (
-                    <Badge variant="info" size="sm">
-                      {item.type}
-                    </Badge>
-                  ),
-                },
-                {
-                  key: 'status',
-                  header: 'Status',
-                  render: (item) => (
-                    <Badge variant={getStatusBadgeVariant(item.status)} size="sm">
-                      {item.status}
-                    </Badge>
-                  ),
-                },
-                { key: 'date', header: 'Date' },
-                {
-                  key: 'actions',
-                  header: 'Actions',
-                  align: 'right',
-                  render: () => (
-                    <button className="p-2 rounded-md hover:bg-muted transition-colors">
-                      <MoreVertical className="w-4 h-4 text-muted-foreground" />
-                    </button>
-                  ),
-                },
-              ]}
-              striped={false}
-              inCard="full"
-              cardPadding="lg"
-            />
-          </CardContent>
-        </Card>
+                    <div className="w-full bg-background/60 rounded-lg p-4 border border-primary/20">
+                      <h4 className="font-medium text-sm text-primary mb-1">What are <%= title %>?</h4>
+                      <p className="text-sm text-muted-foreground leading-relaxed">
+                        <%= description %>
+                      </p>
+                    </div>
+                  </div>
+
+                  {/* Right Column - Content */}
+                  <div className="flex-1 p-6 lg:p-8 el-space-y-lg">
+                    <div className="el-space-y-sm">
+                      <h3 className="text-xl lg:text-2xl font-semibold text-foreground">About <%= title %></h3>
+                      <p className="text-muted-foreground text-base leading-relaxed max-w-lg">
+                        <%= description %>
+                      </p>
+                    </div>
+
+                    {/* Features Grid */}
+                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+                      <div className={cn(
+                        'flex items-start gap-3 p-3',
+                        'bg-background/60 rounded-lg border border-border/40',
+                        'transition-colors hover:border-primary/30 hover:bg-primary/[0.02]'
+                      )}>
+                        <div className="shrink-0 w-8 h-8 rounded-md bg-primary/10 text-primary flex items-center justify-center">
+                          <Tag className="w-4 h-4" />
+                        </div>
+                        <div className="min-w-0">
+                          <p className="font-medium text-sm text-foreground">Categories</p>
+                          <p className="text-xs text-muted-foreground mt-0.5">Organize by category</p>
+                        </div>
+                      </div>
+                      <div className={cn(
+                        'flex items-start gap-3 p-3',
+                        'bg-background/60 rounded-lg border border-border/40',
+                        'transition-colors hover:border-primary/30 hover:bg-primary/[0.02]'
+                      )}>
+                        <div className="shrink-0 w-8 h-8 rounded-md bg-primary/10 text-primary flex items-center justify-center">
+                          <BarChart3 className="w-4 h-4" />
+                        </div>
+                        <div className="min-w-0">
+                          <p className="font-medium text-sm text-foreground">Analytics</p>
+                          <p className="text-xs text-muted-foreground mt-0.5">Track and analyze data</p>
+                        </div>
+                      </div>
+                      <div className={cn(
+                        'flex items-start gap-3 p-3',
+                        'bg-background/60 rounded-lg border border-border/40',
+                        'transition-colors hover:border-primary/30 hover:bg-primary/[0.02]'
+                      )}>
+                        <div className="shrink-0 w-8 h-8 rounded-md bg-primary/10 text-primary flex items-center justify-center">
+                          <Layers className="w-4 h-4" />
+                        </div>
+                        <div className="min-w-0">
+                          <p className="font-medium text-sm text-foreground">Organization</p>
+                          <p className="text-xs text-muted-foreground mt-0.5">Keep everything organized</p>
+                        </div>
+                      </div>
+                      <div className={cn(
+                        'flex items-start gap-3 p-3',
+                        'bg-background/60 rounded-lg border border-border/40',
+                        'transition-colors hover:border-primary/30 hover:bg-primary/[0.02]'
+                      )}>
+                        <div className="shrink-0 w-8 h-8 rounded-md bg-primary/10 text-primary flex items-center justify-center">
+                          <Settings className="w-4 h-4" />
+                        </div>
+                        <div className="min-w-0">
+                          <p className="font-medium text-sm text-foreground">Status</p>
+                          <p className="text-xs text-muted-foreground mt-0.5">Active, draft, or archived</p>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                {/* Collapse toggle at bottom-center */}
+                <button
+                  onClick={toggleInfoCollapsed}
+                  className={cn(
+                    'absolute -bottom-px left-1/2 -translate-x-1/2',
+                    'flex items-center gap-1.5 px-3 py-1',
+                    'bg-background border border-t-0 border-border/50 rounded-b-lg',
+                    'text-xs text-muted-foreground',
+                    'hover:text-foreground hover:bg-muted/50 transition-colors',
+                    'cursor-pointer'
+                  )}
+                >
+                  <span>Hide</span>
+                  <ChevronUp className="w-3.5 h-3.5" />
+                </button>
+              </div>
+            )}
+          </div>
+        )}
       </div>
+
+      {/* Delete Confirmation Modal */}
+      <Modal
+        isOpen={deleteModalOpen}
+        onClose={() => setDeleteModalOpen(false)}
+        title="Delete <%= singularTitle %>"
+      >
+        <div className="el-space-y-md">
+          <p>
+            Are you sure you want to delete <strong>{itemToDelete?.name}</strong>?
+            This action cannot be undone.
+          </p>
+          <div className="flex justify-end el-gap-field">
+            <Button variant="outline" onClick={() => setDeleteModalOpen(false)}>
+              Cancel
+            </Button>
+            <Button variant="destructive" onClick={confirmDelete}>
+              Delete
+            </Button>
+          </div>
+        </div>
+      </Modal>
     </div>
   );
 }
+
+export default <%= pascalName %>ListPage;