init ana page with apis

app/components/charts/ChartPlaceholder.tsx

@@ -0,0 +1,46 @@
+interface ChartPlaceholderProps {
+  text: string;
+  height?: string;
+  colorScheme?: 'blue' | 'green' | 'red' | 'purple' | 'teal' | 'orange' | 'pink' | 'yellow';
+}
+
+export default function ChartPlaceholder({ 
+  text, 
+  height = "h-64",
+  colorScheme = 'blue'
+}: ChartPlaceholderProps) {
+  const borderColor = {
+    blue: 'border-accent-blue',
+    green: 'border-accent-green',
+    red: 'border-accent-red',
+    purple: 'border-accent-purple',
+    teal: 'border-accent-teal',
+    orange: 'border-accent-orange',
+    pink: 'border-accent-pink',
+    yellow: 'border-accent-yellow',
+  }[colorScheme];
+  
+  const textColor = {
+    blue: 'text-accent-blue',
+    green: 'text-accent-green',
+    red: 'text-accent-red',
+    purple: 'text-accent-purple',
+    teal: 'text-accent-teal',
+    orange: 'text-accent-orange',
+    pink: 'text-accent-pink',
+    yellow: 'text-accent-yellow',
+  }[colorScheme];
+  
+  return (
+    <div className={`${height} flex items-center justify-center bg-card-bg bg-opacity-50 rounded-md border-2 border-dashed ${borderColor}`}>
+      <div className="text-center">
+        <div className="mx-auto w-12 h-12 mb-3 rounded-full bg-background flex items-center justify-center">
+          <svg className={`w-6 h-6 ${textColor}`} fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
+          </svg>
+        </div>
+        <p className={`${textColor} text-sm font-medium`}>{text}</p>
+      </div>
+    </div>
+  );
+}