Add comprehensive demo data loading logic and .env.demo configuration

- Implemented `load_demo_data` to populate organizations, users, and relationships from `demo_data.json`.
- Refactored database initialization to handle demo-specific passwords and multi-entity creation in demo mode.
- Added `demo_data.json` with sample organizations and users for better demo showcase.
- Introduced `.env.demo` to simplify environment setup for demo scenarios.
- Updated `.gitignore` to include `.env.demo` while keeping other `.env` files excluded.

frontend/src/app/[locale]/admin/page.tsx

@@ -4,6 +4,8 @@
  * Protected by AuthGuard in layout with requireAdmin=true
  */
 
+'use client';
+
 import { Link } from '@/lib/i18n/routing';
 import { DashboardStats } from '@/components/admin';
 import {
@@ -13,11 +15,18 @@ import {
   UserStatusChart,
 } from '@/components/charts';
 import { Users, Building2, Settings } from 'lucide-react';
-
-// Re-export server-only metadata from separate, ignored file
-export { metadata } from './metadata';
+import { useQuery } from '@tanstack/react-query';
+import { getAdminStats } from '@/lib/api/admin';
 
 export default function AdminPage() {
+  const { data: stats, isLoading, error } = useQuery({
+    queryKey: ['admin', 'stats'],
+    queryFn: async () => {
+      const response = await getAdminStats();
+      return response.data;
+    },
+  });
+
   return (
     <div className="container mx-auto px-6 py-8">
       <div className="space-y-8">
@@ -76,10 +85,22 @@ export default function AdminPage() {
         <div>
           <h2 className="text-xl font-semibold mb-4">Analytics Overview</h2>
           <div className="grid gap-6 md:grid-cols-2">
-            <UserGrowthChart />
+            <UserGrowthChart
+              data={stats?.user_growth}
+              loading={isLoading}
+              error={error ? (error as Error).message : null}
+            />
             <SessionActivityChart />
-            <OrganizationDistributionChart />
-            <UserStatusChart />
+            <OrganizationDistributionChart
+              data={stats?.organization_distribution}
+              loading={isLoading}
+              error={error ? (error as Error).message : null}
+            />
+            <UserStatusChart
+              data={stats?.user_status}
+              loading={isLoading}
+              error={error ? (error as Error).message : null}
+            />
           </div>
         </div>
       </div>

frontend/src/components/charts/OrganizationDistributionChart.tsx

@@ -20,8 +20,7 @@ import { CHART_PALETTES } from '@/lib/chart-colors';
 
 export interface OrganizationDistributionData {
   name: string;
-  members: number;
-  activeMembers: number;
+  value: number;
 }
 
 interface OrganizationDistributionChartProps {
@@ -33,12 +32,12 @@ interface OrganizationDistributionChartProps {
 // Generate mock data for development/demo
 function generateMockData(): OrganizationDistributionData[] {
   return [
-    { name: 'Engineering', members: 45, activeMembers: 42 },
-    { name: 'Marketing', members: 28, activeMembers: 25 },
-    { name: 'Sales', members: 35, activeMembers: 33 },
-    { name: 'Operations', members: 22, activeMembers: 20 },
-    { name: 'HR', members: 15, activeMembers: 14 },
-    { name: 'Finance', members: 18, activeMembers: 17 },
+    { name: 'Engineering', value: 45 },
+    { name: 'Marketing', value: 28 },
+    { name: 'Sales', value: 35 },
+    { name: 'Operations', value: 22 },
+    { name: 'HR', value: 15 },
+    { name: 'Finance', value: 18 },
   ];
 }
 
@@ -85,17 +84,11 @@ export function OrganizationDistributionChart({
             }}
           />
           <Bar
-            dataKey="members"
+            dataKey="value"
             name="Total Members"
             fill={CHART_PALETTES.bar[0]}
             radius={[4, 4, 0, 0]}
           />
-          <Bar
-            dataKey="activeMembers"
-            name="Active Members"
-            fill={CHART_PALETTES.bar[1]}
-            radius={[4, 4, 0, 0]}
-          />
         </BarChart>
       </ResponsiveContainer>
     </ChartCard>

frontend/src/components/charts/UserStatusChart.tsx

@@ -12,7 +12,7 @@ import { CHART_PALETTES } from '@/lib/chart-colors';
 export interface UserStatusData {
   name: string;
   value: number;
-  color: string;
+  color?: string;
 }
 
 interface UserStatusChartProps {
@@ -38,7 +38,13 @@ const renderLabel = (entry: { percent: number; name: string }) => {
 };
 
 export function UserStatusChart({ data, loading, error }: UserStatusChartProps) {
-  const chartData = data || generateMockData();
+  const rawData = data || generateMockData();
+
+  // Assign colors if missing
+  const chartData = rawData.map((item, index) => ({
+    ...item,
+    color: item.color || CHART_PALETTES.pie[index % CHART_PALETTES.pie.length],
+  }));
 
   return (
     <ChartCard

frontend/src/lib/api/admin.ts

@@ -0,0 +1,45 @@
+import { apiClient } from './client';
+import type { Options } from './generated/sdk.gen';
+
+export interface UserGrowthData {
+    date: string;
+    totalUsers: number;
+    activeUsers: number;
+}
+
+export interface OrgDistributionData {
+    name: string;
+    value: number;
+}
+
+export interface UserStatusData {
+    name: string;
+    value: number;
+}
+
+export interface AdminStatsResponse {
+    user_growth: UserGrowthData[];
+    organization_distribution: OrgDistributionData[];
+    user_status: UserStatusData[];
+}
+
+/**
+ * Admin: Get Dashboard Stats
+ *
+ * Get aggregated statistics for the admin dashboard (admin only)
+ */
+export const getAdminStats = <ThrowOnError extends boolean = false>(
+    options?: Options<any, ThrowOnError>
+) => {
+    return (options?.client ?? apiClient).get<AdminStatsResponse, any, ThrowOnError>({
+        responseType: 'json',
+        security: [
+            {
+                scheme: 'bearer',
+                type: 'http',
+            },
+        ],
+        url: '/api/v1/admin/stats',
+        ...options,
+    });
+};