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/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