feat: Initialize AI Studio project structure

Sets up a new project for an AI Studio application. Includes essential files like `package.json`, `vite.config.ts`, `tsconfig.json`, and a basic React application structure (`App.tsx`, `main.tsx`, `index.html`, `index.css`). Also adds a `README.md` with instructions for running locally, an `.env.example` for API key configuration, and a `.gitignore` to manage project dependencies and build artifacts.
2026-08-03 12:35:25 +02:00 · 2026-03-27 11:34:09 +01:00
parent f5988c70c7
commit a3bbc6607e
22 changed files with 5664 additions and 8 deletions
@@ -0,0 +1,66 @@
+import React from 'react';
+import { Download, Database } from 'lucide-react';
+
+interface TopBarProps {
+  stats: any;
+  onExport: () => void;
+  hasData: boolean;
+  hasUnsavedChanges: boolean;
+}
+
+export function TopBar({ stats, onExport, hasData, hasUnsavedChanges }: TopBarProps) {
+  return (
+    <header className="bg-slate-800 border-b border-slate-700 h-16 flex items-center justify-between px-6 shrink-0 z-10">
+      <div className="flex items-center gap-3">
+        <Database className="text-blue-500 w-6 h-6" />
+        <h1 className="text-xl font-bold text-white tracking-tight">CRAZE Product Data Quality Manager</h1>
+      </div>
+
+      {stats && (
+        <div className="flex items-center gap-4 text-xs font-medium">
+          <div className="flex flex-col items-center">
+            <span className="text-slate-400">Total</span>
+            <span className="bg-slate-700 text-white px-2 py-0.5 rounded mt-1">{stats.total}</span>
+          </div>
+          <div className="flex flex-col items-center">
+            <span className="text-slate-400">Missing DE Long</span>
+            <span className="bg-red-500/20 text-red-400 px-2 py-0.5 rounded border border-red-500/30 mt-1">{stats.missingDeLong}</span>
+          </div>
+          <div className="flex flex-col items-center">
+            <span className="text-slate-400">Missing EN Long</span>
+            <span className="bg-orange-500/20 text-orange-400 px-2 py-0.5 rounded border border-orange-500/30 mt-1">{stats.missingEnLong}</span>
+          </div>
+          <div className="flex flex-col items-center">
+            <span className="text-slate-400">Missing DE Short</span>
+            <span className="bg-orange-500/20 text-orange-400 px-2 py-0.5 rounded border border-orange-500/30 mt-1">{stats.missingDeShort}</span>
+          </div>
+          <div className="flex flex-col items-center">
+            <span className="text-slate-400">Missing EN Short</span>
+            <span className="bg-orange-500/20 text-orange-400 px-2 py-0.5 rounded border border-orange-500/30 mt-1">{stats.missingEnShort}</span>
+          </div>
+          <div className="flex flex-col items-center">
+            <span className="text-slate-400">Fully Complete</span>
+            <span className="bg-green-500/20 text-green-400 px-2 py-0.5 rounded border border-green-500/30 mt-1">{stats.fullyComplete}</span>
+          </div>
+        </div>
+      )}
+
+      <div className="flex items-center gap-3">
+        {hasData && (
+          <button
+            onClick={onExport}
+            className={`flex items-center gap-2 px-4 py-2 rounded-md text-sm font-medium transition-colors ${
+              hasUnsavedChanges 
+                ? 'bg-blue-600 hover:bg-blue-700 text-white' 
+                : 'bg-slate-700 hover:bg-slate-600 text-slate-200'
+            }`}
+          >
+            <Download className="w-4 h-4" />
+            Export Updated Excel
+            {hasUnsavedChanges && <span className="w-2 h-2 rounded-full bg-red-500 ml-1 animate-pulse" />}
+          </button>
+        )}
+      </div>
+    </header>
+  );
+}