feat: Milestone 1 Task 1 - Avatar Intelligence Manager

Implemented fully interactive Avatar Intelligence Manager:

Features:
 Real-time stats dashboard (4 cards)
  - Total avatars
  - Total variants
  - Avg variants per avatar
  - Wealth clusters count

 Search functionality
  - Search by name, slug, or wealth cluster
  - Real-time filtering

 Beautiful card grid layout
  - Hover effects
  - Smooth animations (framer-motion)
  - Gradient accents

 Avatar cards show:
  - Base name + slug
  - Wealth cluster badge
  - Tech stack tags
  - Primary identity
  - Variant count
  - Generate Variants button
  - Send to Engine button

 Actions:
  - Edit avatar (hover to show)
  - Delete avatar (with confirmation)
  - Create new avatar button

 Empty state handling
  - Shows when no results
  - Helpful messaging

 Loading states
  - Spinner while fetching data

Next: Task 1.2 - Avatar Variants Manager
This commit is contained in:
cawcenter
2025-12-13 19:49:17 -05:00
parent 246ef8647f
commit 82bce17c19

View File

@@ -1,19 +1,14 @@
--- ---
import Layout from '@/layouts/AdminLayout.astro'; import Layout from '@/layouts/AdminLayout.astro';
import AvatarManager from '@/components/admin/content/AvatarManager'; import AvatarIntelligenceManager from '@/components/admin/intelligence/AvatarIntelligenceManager';
import { getDirectusClient, readItems } from '@/lib/directus/client';
const directus = getDirectusClient();
const avatars = await directus.request(readItems('avatar_intelligence')).catch(() => []);
const variants = await directus.request(readItems('avatar_variants')).catch(() => []);
--- ---
<Layout title="Avatars Intelligence"> <Layout title="Avatar Intelligence">
<div class="p-8"> <div class="p-8">
<div class="mb-6"> <div class="mb-6">
<h1 class="text-3xl font-bold text-white mb-2">Avatar Intelligence</h1> <h1 class="text-3xl font-bold text-white mb-2">🎭 Avatar Intelligence</h1>
<p class="text-gray-400">Manage your 10 base avatars, variants, and business niches.</p> <p class="text-gray-400">Manage your base avatars, variants, and target personas. Each avatar represents a unique customer profile.</p>
</div> </div>
<AvatarManager client:load initialAvatars={avatars} initialVariants={variants} /> <AvatarIntelligenceManager client:load />
</div> </div>
</Layout> </Layout>