feat: Initialize Craze Analytix project structure

Sets up the project with Vite, React, Tailwind CSS, Gemini AI integration, and necessary dependencies for data analysis. Includes initial configuration for TypeScript, Tailwind, and project metadata.
2026-08-03 12:25:22 +02:00 · 2025-12-11 11:25:26 +01:00
parent 563e6110ce
commit 9ba63ab8f8
23 changed files with 4481 additions and 8 deletions
@@ -0,0 +1,78 @@
+
+import React from 'react';
+import { FilterState } from '../types';
+import MultiSelectDropdown from './MultiSelectDropdown';
+
+interface FilterBarProps {
+  filters: FilterState;
+  onFilterChange: (key: keyof FilterState, value: string[]) => void;
+  options: {
+    customer: string[];
+    year: string[];
+    month: string[];
+    line: string[];
+    asin: string[];
+    sku: string[];
+    title: string[];
+  };
+}
+
+const FilterBar: React.FC<FilterBarProps> = ({ filters, onFilterChange, options }) => {
+  return (
+    <div className="bg-slate-950 border-b border-border sticky top-0 z-[60] p-4 shadow-xl">
+      <div className="max-w-7xl mx-auto flex flex-wrap gap-4 items-end">
+        <MultiSelectDropdown 
+            label="Customer" 
+            selected={filters.customer} 
+            options={options.customer} 
+            onChange={(v) => onFilterChange('customer', v)} 
+            className="flex-1"
+        />
+        <MultiSelectDropdown 
+            label="Year" 
+            selected={filters.year} 
+            options={options.year} 
+            onChange={(v) => onFilterChange('year', v)} 
+            className="flex-1"
+        />
+        <MultiSelectDropdown 
+            label="Month" 
+            selected={filters.month} 
+            options={options.month} 
+            onChange={(v) => onFilterChange('month', v)} 
+            className="flex-1"
+        />
+        <MultiSelectDropdown 
+            label="Product Line" 
+            selected={filters.line} 
+            options={options.line} 
+            onChange={(v) => onFilterChange('line', v)} 
+            className="flex-1"
+        />
+        <MultiSelectDropdown 
+            label="SKU" 
+            selected={filters.sku} 
+            options={options.sku} 
+            onChange={(v) => onFilterChange('sku', v)} 
+            className="flex-1"
+        />
+        <MultiSelectDropdown 
+            label="Title" 
+            selected={filters.title} 
+            options={options.title} 
+            onChange={(v) => onFilterChange('title', v)} 
+            className="flex-1"
+        />
+        <MultiSelectDropdown 
+            label="ASIN" 
+            selected={filters.asin} 
+            options={options.asin} 
+            onChange={(v) => onFilterChange('asin', v)} 
+            className="flex-1"
+        />
+      </div>
+    </div>
+  );
+};
+
+export default FilterBar;