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.

src/components/DataCompleteness.tsx

@@ -0,0 +1,173 @@
+import React, { useMemo, useState } from 'react';
+import { ExcelRow, COLUMNS } from '../types';
+import { ChevronDown, ChevronUp } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+interface DataCompletenessProps {
+  data: ExcelRow[];
+  headers: string[];
+}
+
+export function DataCompleteness({ data, headers }: DataCompletenessProps) {
+  const [sortCol, setSortCol] = useState<number | 'score'>('score');
+  const [sortDesc, setSortDesc] = useState(false);
+  const [page, setPage] = useState(1);
+  const pageSize = 50;
+
+  const keyColumns = [
+    COLUMNS.ARTICLE_NO,
+    COLUMNS.ARTICLE_NAME,
+    COLUMNS.BARCODE,
+    COLUMNS.TARIFF_CODE,
+    COLUMNS.COUNTRY_ORIGIN,
+    COLUMNS.RECOMMENDED_AGE,
+    COLUMNS.LONG_DE,
+    COLUMNS.LONG_EN,
+    COLUMNS.SHORT_DE,
+    COLUMNS.SHORT_EN,
+  ];
+
+  const processedData = useMemo(() => {
+    let result = data.map((row, index) => {
+      let filledKeys = 0;
+      keyColumns.forEach(col => {
+        if (row[col]) filledKeys++;
+      });
+      const score = Math.round((filledKeys / keyColumns.length) * 100);
+      return { row, index, score };
+    });
+
+    result.sort((a, b) => {
+      if (sortCol === 'score') {
+        return sortDesc ? b.score - a.score : a.score - b.score;
+      } else {
+        const valA = String(a.row[sortCol] || '');
+        const valB = String(b.row[sortCol] || '');
+        return sortDesc ? valB.localeCompare(valA) : valA.localeCompare(valB);
+      }
+    });
+
+    return result;
+  }, [data, sortCol, sortDesc]);
+
+  const paginatedData = useMemo(() => {
+    const start = (page - 1) * pageSize;
+    return processedData.slice(start, start + pageSize);
+  }, [processedData, page]);
+
+  const totalPages = Math.ceil(processedData.length / pageSize);
+
+  const handleSort = (col: number | 'score') => {
+    if (sortCol === col) {
+      setSortDesc(!sortDesc);
+    } else {
+      setSortCol(col);
+      setSortDesc(col === 'score' ? false : false); // default asc
+    }
+  };
+
+  return (
+    <div className="flex flex-col h-full bg-slate-800 rounded-xl border border-slate-700 shadow-xl overflow-hidden">
+      <div className="p-4 border-b border-slate-700 bg-slate-800/50">
+        <h2 className="text-lg font-semibold text-white">Data Completeness</h2>
+        <p className="text-sm text-slate-400">Evaluating 10 key fields per product.</p>
+      </div>
+      
+      <div className="overflow-x-auto flex-1">
+        <table className="w-full text-left text-sm">
+          <thead className="bg-slate-900/50 text-slate-400 sticky top-0 z-10">
+            <tr>
+              <th 
+                className="px-4 py-3 font-medium cursor-pointer hover:text-white transition-colors select-none"
+                onClick={() => handleSort('score')}
+              >
+                <div className="flex items-center gap-1">
+                  Score
+                  {sortCol === 'score' && (
+                    sortDesc ? <ChevronDown className="w-4 h-4" /> : <ChevronUp className="w-4 h-4" />
+                  )}
+                </div>
+              </th>
+              <th 
+                className="px-4 py-3 font-medium cursor-pointer hover:text-white transition-colors select-none"
+                onClick={() => handleSort(COLUMNS.ARTICLE_NO)}
+              >
+                <div className="flex items-center gap-1">
+                  Article No.
+                  {sortCol === COLUMNS.ARTICLE_NO && (
+                    sortDesc ? <ChevronDown className="w-4 h-4" /> : <ChevronUp className="w-4 h-4" />
+                  )}
+                </div>
+              </th>
+              <th 
+                className="px-4 py-3 font-medium cursor-pointer hover:text-white transition-colors select-none"
+                onClick={() => handleSort(COLUMNS.ARTICLE_NAME)}
+              >
+                <div className="flex items-center gap-1">
+                  Article Name
+                  {sortCol === COLUMNS.ARTICLE_NAME && (
+                    sortDesc ? <ChevronDown className="w-4 h-4" /> : <ChevronUp className="w-4 h-4" />
+                  )}
+                </div>
+              </th>
+              {keyColumns.slice(2).map(col => (
+                <th key={col} className="px-4 py-3 font-medium truncate max-w-[120px]" title={headers[col]}>
+                  {headers[col]}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-slate-700/50">
+            {paginatedData.map(({ row, index, score }) => (
+              <tr key={index} className="hover:bg-slate-700/30 transition-colors">
+                <td className="px-4 py-3">
+                  <div className="flex items-center gap-2">
+                    <div className="w-12 bg-slate-700 rounded-full h-2 overflow-hidden">
+                      <div 
+                        className={cn("h-full", score === 100 ? "bg-green-500" : score >= 50 ? "bg-yellow-500" : "bg-red-500")} 
+                        style={{ width: `${score}%` }} 
+                      />
+                    </div>
+                    <span className="font-medium text-white">{score}%</span>
+                  </div>
+                </td>
+                <td className="px-4 py-3 font-mono text-slate-300">{row[COLUMNS.ARTICLE_NO]}</td>
+                <td className="px-4 py-3 font-medium text-white max-w-[200px] truncate" title={row[COLUMNS.ARTICLE_NAME]}>{row[COLUMNS.ARTICLE_NAME]}</td>
+                {keyColumns.slice(2).map(col => (
+                  <td key={col} className="px-4 py-3 text-center">
+                    {row[col] ? (
+                      <span className="inline-block w-2 h-2 rounded-full bg-green-500" title="Filled" />
+                    ) : (
+                      <span className="inline-block w-2 h-2 rounded-full bg-red-500" title="Missing" />
+                    )}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="bg-slate-900 border-t border-slate-700 p-4 flex items-center justify-between text-sm text-slate-400">
+        <span>Showing {Math.min((page - 1) * pageSize + 1, processedData.length)} to {Math.min(page * pageSize, processedData.length)} of {processedData.length} entries</span>
+        <div className="flex items-center gap-2">
+          <button
+            disabled={page === 1}
+            onClick={() => setPage(p => p - 1)}
+            className="px-3 py-1 rounded bg-slate-800 hover:bg-slate-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            Previous
+          </button>
+          <span className="px-3 py-1 font-medium text-white">Page {page} of {totalPages || 1}</span>
+          <button
+            disabled={page === totalPages || totalPages === 0}
+            onClick={() => setPage(p => p + 1)}
+            className="px-3 py-1 rounded bg-slate-800 hover:bg-slate-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            Next
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/EditPanel.tsx

@@ -0,0 +1,174 @@
+import React, { useState } from 'react';
+import { ExcelRow, COLUMNS } from '../types';
+import { X, Sparkles, Save, Loader2 } from 'lucide-react';
+import { generateDescription } from '../services/anthropic';
+import { cn } from '../lib/utils';
+
+interface EditPanelProps {
+  row: ExcelRow;
+  rowIndex: number;
+  onSave: (rowIndex: number, updatedRow: ExcelRow) => void;
+  onClose: () => void;
+}
+
+export function EditPanel({ row, rowIndex, onSave, onClose }: EditPanelProps) {
+  const [formData, setFormData] = useState({
+    longDe: row[COLUMNS.LONG_DE] || '',
+    longEn: row[COLUMNS.LONG_EN] || '',
+    shortDe: row[COLUMNS.SHORT_DE] || '',
+    shortEn: row[COLUMNS.SHORT_EN] || '',
+  });
+
+  const [loadingField, setLoadingField] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const isModified = (field: keyof typeof formData) => {
+    const colMap = {
+      longDe: COLUMNS.LONG_DE,
+      longEn: COLUMNS.LONG_EN,
+      shortDe: COLUMNS.SHORT_DE,
+      shortEn: COLUMNS.SHORT_EN,
+    };
+    return formData[field] !== (row[colMap[field]] || '');
+  };
+
+  const handleGenerate = async (field: keyof typeof formData) => {
+    setLoadingField(field);
+    setError(null);
+
+    try {
+      let prompt = '';
+      const baseContext = `Article Name: ${row[COLUMNS.ARTICLE_NAME]}\nArticle Details (EN): ${row[COLUMNS.DETAILS_EN] || 'N/A'}\nArticle Details (DE): ${row[COLUMNS.DETAILS_DE] || 'N/A'}`;
+      
+      const systemPrompt = "You are a professional copywriter for CRAZE GmbH, a German toy company. Write commercial product descriptions for B2B buyers (retailers, distributors). Use clear, engaging, professional language. Never invent features not mentioned in the source material.";
+
+      if (field === 'longDe') {
+        prompt = `Based on the following product details, generate a long commercial description in German. It should be fluent, oriented towards B2B toy buyers, 3-5 paragraphs long. Include features, benefits, and material if available.\n\n${baseContext}`;
+      } else if (field === 'longEn') {
+        if (formData.longDe) {
+          prompt = `Translate the following German product description into perfect English. Keep the same tone and length.\n\nGerman Description:\n${formData.longDe}`;
+        } else {
+          prompt = `Based on the following product details, generate a long commercial description in English. It should be fluent, oriented towards B2B toy buyers, 3-5 paragraphs long. Include features, benefits, and material if available.\n\n${baseContext}`;
+        }
+      } else if (field === 'shortDe') {
+        if (formData.longDe) {
+          prompt = `Create a short version (2-4 sentences max) of the following German product description. Include only the most relevant info. Use a direct and commercial tone.\n\nGerman Description:\n${formData.longDe}`;
+        } else {
+          prompt = `Based on the following product details, generate a short commercial description in German (2-4 sentences max). Include only the most relevant info. Use a direct and commercial tone.\n\n${baseContext}`;
+        }
+      } else if (field === 'shortEn') {
+        if (formData.shortDe) {
+          prompt = `Translate the following short German product description into perfect English.\n\nGerman Description:\n${formData.shortDe}`;
+        } else {
+          prompt = `Based on the following product details, generate a short commercial description in English (2-4 sentences max). Include only the most relevant info. Use a direct and commercial tone.\n\n${baseContext}`;
+        }
+      }
+
+      const generatedText = await generateDescription(prompt, systemPrompt);
+      setFormData(prev => ({ ...prev, [field]: generatedText.trim() }));
+    } catch (err: any) {
+      setError(err.message || 'An error occurred during generation.');
+    } finally {
+      setLoadingField(null);
+    }
+  };
+
+  const handleSave = () => {
+    const newRow = [...row];
+    newRow[COLUMNS.LONG_DE] = formData.longDe;
+    newRow[COLUMNS.LONG_EN] = formData.longEn;
+    newRow[COLUMNS.SHORT_DE] = formData.shortDe;
+    newRow[COLUMNS.SHORT_EN] = formData.shortEn;
+    onSave(rowIndex, newRow);
+  };
+
+  const FieldEditor = ({ title, field }: { title: string, field: keyof typeof formData }) => (
+    <div className="flex flex-col gap-2">
+      <div className="flex items-center justify-between">
+        <label className="text-sm font-medium text-slate-300">{title}</label>
+        <button
+          onClick={() => handleGenerate(field)}
+          disabled={loadingField !== null}
+          className="flex items-center gap-1.5 text-xs font-medium bg-blue-600/20 text-blue-400 hover:bg-blue-600 hover:text-white px-2 py-1 rounded transition-colors disabled:opacity-50"
+        >
+          {loadingField === field ? <Loader2 className="w-3 h-3 animate-spin" /> : <Sparkles className="w-3 h-3" />}
+          Generate with AI
+        </button>
+      </div>
+      <textarea
+        value={formData[field]}
+        onChange={e => setFormData(prev => ({ ...prev, [field]: e.target.value }))}
+        className={cn(
+          "w-full h-32 bg-slate-900 border rounded-md p-3 text-sm text-white focus:outline-none focus:ring-1 transition-colors resize-none",
+          isModified(field) ? "border-blue-500 focus:ring-blue-500" : "border-slate-700 focus:border-slate-500 focus:ring-slate-500"
+        )}
+        placeholder={`Enter ${title}...`}
+      />
+    </div>
+  );
+
+  return (
+    <>
+      <div className="fixed inset-0 bg-slate-950/50 backdrop-blur-sm z-40" onClick={onClose} />
+      <div className="fixed right-0 top-0 bottom-0 w-[600px] bg-slate-800 border-l border-slate-700 shadow-2xl z-50 flex flex-col animate-in slide-in-from-right duration-200">
+        <div className="flex items-center justify-between p-6 border-b border-slate-700 bg-slate-800/50">
+          <div>
+            <h2 className="text-xl font-bold text-white">Edit Product</h2>
+            <p className="text-sm text-slate-400 mt-1">{row[COLUMNS.ARTICLE_NO]} - {row[COLUMNS.ARTICLE_NAME]}</p>
+          </div>
+          <button onClick={onClose} className="p-2 text-slate-400 hover:text-white hover:bg-slate-700 rounded-full transition-colors">
+            <X className="w-5 h-5" />
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-auto p-6 space-y-6">
+          {error && (
+            <div className="bg-red-500/10 border border-red-500/50 text-red-400 p-4 rounded-md text-sm">
+              {error}
+            </div>
+          )}
+
+          <div className="grid grid-cols-2 gap-4 bg-slate-900/50 p-4 rounded-lg border border-slate-700/50">
+            <div>
+              <span className="block text-xs text-slate-500 mb-1">Line</span>
+              <span className="text-sm text-slate-300 font-medium">{row[COLUMNS.LINE] || '-'}</span>
+            </div>
+            <div>
+              <span className="block text-xs text-slate-500 mb-1">License</span>
+              <span className="text-sm text-slate-300 font-medium">{row[COLUMNS.LICENSE] || '-'}</span>
+            </div>
+            <div className="col-span-2">
+              <span className="block text-xs text-slate-500 mb-1">Details (DE)</span>
+              <p className="text-sm text-slate-300 line-clamp-2" title={row[COLUMNS.DETAILS_DE]}>{row[COLUMNS.DETAILS_DE] || '-'}</p>
+            </div>
+            <div className="col-span-2">
+              <span className="block text-xs text-slate-500 mb-1">Details (EN)</span>
+              <p className="text-sm text-slate-300 line-clamp-2" title={row[COLUMNS.DETAILS_EN]}>{row[COLUMNS.DETAILS_EN] || '-'}</p>
+            </div>
+          </div>
+
+          <FieldEditor title="Long Description (DE)" field="longDe" />
+          <FieldEditor title="Long Description (EN)" field="longEn" />
+          <FieldEditor title="Short Description (DE)" field="shortDe" />
+          <FieldEditor title="Short Description (EN)" field="shortEn" />
+        </div>
+
+        <div className="p-6 border-t border-slate-700 bg-slate-800/50 flex justify-end gap-3">
+          <button
+            onClick={onClose}
+            className="px-4 py-2 text-sm font-medium text-slate-300 hover:text-white hover:bg-slate-700 rounded-md transition-colors"
+          >
+            Cancel
+          </button>
+          <button
+            onClick={handleSave}
+            className="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-md shadow-lg shadow-blue-900/20 transition-colors"
+          >
+            <Save className="w-4 h-4" />
+            Save to Memory
+          </button>
+        </div>
+      </div>
+    </>
+  );
+}

src/components/MatrixView.tsx

@@ -0,0 +1,92 @@
+import React, { useState, useMemo } from 'react';
+import { ExcelRow } from '../types';
+
+interface MatrixViewProps {
+  data: ExcelRow[];
+  headers: string[];
+}
+
+export function MatrixView({ data, headers }: MatrixViewProps) {
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(25);
+
+  const paginatedData = useMemo(() => {
+    const start = (page - 1) * pageSize;
+    return data.slice(start, start + pageSize);
+  }, [data, page, pageSize]);
+
+  const totalPages = Math.ceil(data.length / pageSize);
+
+  return (
+    <div className="flex flex-col h-full bg-slate-800 rounded-xl border border-slate-700 shadow-xl overflow-hidden">
+      <div className="p-4 border-b border-slate-700 bg-slate-800/50">
+        <h2 className="text-lg font-semibold text-white">Matrix View</h2>
+        <p className="text-sm text-slate-400">All data fields in their original order.</p>
+      </div>
+      
+      <div className="overflow-auto flex-1">
+        <table className="w-full text-left text-sm whitespace-nowrap">
+          <thead className="bg-slate-900/50 text-slate-400 sticky top-0 z-10">
+            <tr>
+              {headers.map((header, index) => (
+                <th key={index} className="px-4 py-3 font-medium border-b border-slate-700">
+                  {header}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-slate-700/50">
+            {paginatedData.map((row, rowIndex) => (
+              <tr key={rowIndex} className="hover:bg-slate-700/30 transition-colors">
+                {headers.map((_, colIndex) => (
+                  <td key={colIndex} className="px-4 py-3 text-slate-300 max-w-[200px] truncate" title={String(row[colIndex] || '')}>
+                    {row[colIndex]}
+                  </td>
+                ))}
+              </tr>
+            ))}
+            {paginatedData.length === 0 && (
+              <tr>
+                <td colSpan={headers.length} className="px-4 py-8 text-center text-slate-500">
+                  No data available.
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      <div className="bg-slate-900 border-t border-slate-700 p-4 flex items-center justify-between text-sm text-slate-400">
+        <div className="flex items-center gap-4">
+          <span>Showing {Math.min((page - 1) * pageSize + 1, data.length)} to {Math.min(page * pageSize, data.length)} of {data.length} entries</span>
+          <select
+            value={pageSize}
+            onChange={e => { setPageSize(Number(e.target.value)); setPage(1); }}
+            className="bg-slate-800 border border-slate-700 rounded px-2 py-1 focus:outline-none focus:border-blue-500"
+          >
+            <option value={25}>25 per page</option>
+            <option value={50}>50 per page</option>
+            <option value={100}>100 per page</option>
+          </select>
+        </div>
+        <div className="flex items-center gap-2">
+          <button
+            disabled={page === 1}
+            onClick={() => setPage(p => p - 1)}
+            className="px-3 py-1 rounded bg-slate-800 hover:bg-slate-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            Previous
+          </button>
+          <span className="px-3 py-1 font-medium text-white">Page {page} of {totalPages || 1}</span>
+          <button
+            disabled={page === totalPages || totalPages === 0}
+            onClick={() => setPage(p => p + 1)}
+            className="px-3 py-1 rounded bg-slate-800 hover:bg-slate-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+          >
+            Next
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/ProductDescriptions.tsx

@@ -0,0 +1,247 @@
+import React, { useState, useMemo } from 'react';
+import { ExcelRow, COLUMNS } from '../types';
+import { Search, Filter, Edit2, ChevronDown, ChevronUp } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+interface ProductDescriptionsProps {
+  data: ExcelRow[];
+  onEdit: (index: number) => void;
+}
+
+type TabType = 'all' | 'missingDeLong' | 'missingEnLong' | 'missingDeShort' | 'missingEnShort' | 'complete' | 'incomplete';
+
+export function ProductDescriptions({ data, onEdit }: ProductDescriptionsProps) {
+  const [activeTab, setActiveTab] = useState<TabType>('all');
+  const [search, setSearch] = useState('');
+  const [lineFilter, setLineFilter] = useState('');
+  const [licenseFilter, setLicenseFilter] = useState('');
+  const [sortCol, setSortCol] = useState<number | null>(null);
+  const [sortDesc, setSortDesc] = useState(false);
+  const [pageSize, setPageSize] = useState(25);
+  const [page, setPage] = useState(1);
+
+  const lines = useMemo(() => Array.from(new Set(data.map(r => r[COLUMNS.LINE]).filter(Boolean))), [data]);
+  const licenses = useMemo(() => Array.from(new Set(data.map(r => r[COLUMNS.LICENSE]).filter(Boolean))), [data]);
+
+  const filteredData = useMemo(() => {
+    let result = data.map((row, index) => ({ row, index }));
+
+    // Tab filter
+    if (activeTab === 'missingDeLong') result = result.filter(r => !r.row[COLUMNS.LONG_DE]);
+    if (activeTab === 'missingEnLong') result = result.filter(r => !r.row[COLUMNS.LONG_EN]);
+    if (activeTab === 'missingDeShort') result = result.filter(r => !r.row[COLUMNS.SHORT_DE]);
+    if (activeTab === 'missingEnShort') result = result.filter(r => !r.row[COLUMNS.SHORT_EN]);
+    if (activeTab === 'complete') result = result.filter(r => r.row[COLUMNS.LONG_DE] && r.row[COLUMNS.LONG_EN] && r.row[COLUMNS.SHORT_DE] && r.row[COLUMNS.SHORT_EN]);
+    if (activeTab === 'incomplete') result = result.filter(r => !r.row[COLUMNS.LONG_DE] || !r.row[COLUMNS.LONG_EN] || !r.row[COLUMNS.SHORT_DE] || !r.row[COLUMNS.SHORT_EN]);
+
+    // Search filter
+    if (search) {
+      const s = search.toLowerCase();
+      result = result.filter(r => 
+        String(r.row[COLUMNS.ARTICLE_NO] || '').toLowerCase().includes(s) ||
+        String(r.row[COLUMNS.ARTICLE_NAME] || '').toLowerCase().includes(s)
+      );
+    }
+
+    // Dropdown filters
+    if (lineFilter) result = result.filter(r => r.row[COLUMNS.LINE] === lineFilter);
+    if (licenseFilter) result = result.filter(r => r.row[COLUMNS.LICENSE] === licenseFilter);
+
+    // Sorting
+    if (sortCol !== null) {
+      result.sort((a, b) => {
+        const valA = String(a.row[sortCol] || '');
+        const valB = String(b.row[sortCol] || '');
+        return sortDesc ? valB.localeCompare(valA) : valA.localeCompare(valB);
+      });
+    }
+
+    return result;
+  }, [data, activeTab, search, lineFilter, licenseFilter, sortCol, sortDesc]);
+
+  const paginatedData = useMemo(() => {
+    const start = (page - 1) * pageSize;
+    return filteredData.slice(start, start + pageSize);
+  }, [filteredData, page, pageSize]);
+
+  const totalPages = Math.ceil(filteredData.length / pageSize);
+
+  const handleSort = (col: number) => {
+    if (sortCol === col) {
+      setSortDesc(!sortDesc);
+    } else {
+      setSortCol(col);
+      setSortDesc(false);
+    }
+  };
+
+  const getRowColor = (row: ExcelRow) => {
+    const fields = [row[COLUMNS.LONG_DE], row[COLUMNS.LONG_EN], row[COLUMNS.SHORT_DE], row[COLUMNS.SHORT_EN]];
+    const filled = fields.filter(Boolean).length;
+    if (filled === 4) return 'bg-green-900/10 hover:bg-green-900/20';
+    if (filled === 0) return 'bg-red-900/10 hover:bg-red-900/20';
+    return 'bg-yellow-900/10 hover:bg-yellow-900/20';
+  };
+
+  const Badge = ({ content }: { content: any }) => {
+    if (content) return <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-500/20 text-green-400 border border-green-500/30">✓</span>;
+    return <span className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-500/20 text-red-400 border border-red-500/30">✗ Missing</span>;
+  };
+
+  const tabs: { id: TabType; label: string }[] = [
+    { id: 'all', label: 'All Products' },
+    { id: 'missingDeLong', label: 'Missing DE Long' },
+    { id: 'missingEnLong', label: 'Missing EN Long' },
+    { id: 'missingDeShort', label: 'Missing DE Short' },
+    { id: 'missingEnShort', label: 'Missing EN Short' },
+    { id: 'complete', label: 'Complete' },
+    { id: 'incomplete', label: 'Incomplete' },
+  ];
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="flex flex-wrap gap-2 mb-6">
+        {tabs.map(tab => (
+          <button
+            key={tab.id}
+            onClick={() => { setActiveTab(tab.id); setPage(1); }}
+            className={cn(
+              "px-4 py-2 rounded-md text-sm font-medium transition-colors",
+              activeTab === tab.id 
+                ? "bg-blue-600 text-white shadow-md" 
+                : "bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-white"
+            )}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      <div className="flex flex-wrap gap-4 mb-6 bg-slate-800 p-4 rounded-xl border border-slate-700 shadow-sm">
+        <div className="flex-1 min-w-[200px] relative">
+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400" />
+          <input
+            type="text"
+            placeholder="Search Article Name or No..."
+            value={search}
+            onChange={e => { setSearch(e.target.value); setPage(1); }}
+            className="w-full pl-9 pr-4 py-2 bg-slate-900 border border-slate-700 rounded-md text-sm text-white focus:outline-none focus:border-blue-500 focus:ring-1 focus:ring-blue-500"
+          />
+        </div>
+        <select
+          value={lineFilter}
+          onChange={e => { setLineFilter(e.target.value); setPage(1); }}
+          className="bg-slate-900 border border-slate-700 rounded-md px-4 py-2 text-sm text-white focus:outline-none focus:border-blue-500"
+        >
+          <option value="">All Lines</option>
+          {lines.map(l => <option key={l} value={String(l)}>{String(l)}</option>)}
+        </select>
+        <select
+          value={licenseFilter}
+          onChange={e => { setLicenseFilter(e.target.value); setPage(1); }}
+          className="bg-slate-900 border border-slate-700 rounded-md px-4 py-2 text-sm text-white focus:outline-none focus:border-blue-500"
+        >
+          <option value="">All Licenses</option>
+          {licenses.map(l => <option key={l} value={String(l)}>{String(l)}</option>)}
+        </select>
+      </div>
+
+      <div className="flex-1 bg-slate-800 rounded-xl border border-slate-700 shadow-xl overflow-hidden flex flex-col">
+        <div className="overflow-x-auto flex-1">
+          <table className="w-full text-left text-sm">
+            <thead className="bg-slate-900/50 text-slate-400 sticky top-0 z-10">
+              <tr>
+                {[
+                  { col: COLUMNS.ARTICLE_NO, label: 'Article No.' },
+                  { col: COLUMNS.ARTICLE_NAME, label: 'Article Name' },
+                  { col: COLUMNS.LINE, label: 'Line' },
+                  { col: COLUMNS.LICENSE, label: 'License' },
+                  { col: COLUMNS.LONG_DE, label: 'Long DE' },
+                  { col: COLUMNS.LONG_EN, label: 'Long EN' },
+                  { col: COLUMNS.SHORT_DE, label: 'Short DE' },
+                  { col: COLUMNS.SHORT_EN, label: 'Short EN' },
+                ].map(({ col, label }) => (
+                  <th 
+                    key={col} 
+                    className="px-4 py-3 font-medium cursor-pointer hover:text-white transition-colors select-none"
+                    onClick={() => handleSort(col)}
+                  >
+                    <div className="flex items-center gap-1">
+                      {label}
+                      {sortCol === col && (
+                        sortDesc ? <ChevronDown className="w-4 h-4" /> : <ChevronUp className="w-4 h-4" />
+                      )}
+                    </div>
+                  </th>
+                ))}
+                <th className="px-4 py-3 font-medium text-right">Actions</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-700/50">
+              {paginatedData.map(({ row, index }) => (
+                <tr key={index} className={cn("transition-colors", getRowColor(row))}>
+                  <td className="px-4 py-3 font-mono text-slate-300">{row[COLUMNS.ARTICLE_NO]}</td>
+                  <td className="px-4 py-3 font-medium text-white max-w-[300px] truncate" title={row[COLUMNS.ARTICLE_NAME]}>{row[COLUMNS.ARTICLE_NAME]}</td>
+                  <td className="px-4 py-3 text-slate-300">{row[COLUMNS.LINE]}</td>
+                  <td className="px-4 py-3 text-slate-300">{row[COLUMNS.LICENSE]}</td>
+                  <td className="px-4 py-3"><Badge content={row[COLUMNS.LONG_DE]} /></td>
+                  <td className="px-4 py-3"><Badge content={row[COLUMNS.LONG_EN]} /></td>
+                  <td className="px-4 py-3"><Badge content={row[COLUMNS.SHORT_DE]} /></td>
+                  <td className="px-4 py-3"><Badge content={row[COLUMNS.SHORT_EN]} /></td>
+                  <td className="px-4 py-3 text-right">
+                    <button
+                      onClick={() => onEdit(index)}
+                      className="inline-flex items-center gap-2 px-3 py-1.5 bg-blue-600/10 text-blue-400 hover:bg-blue-600 hover:text-white rounded-md transition-colors font-medium"
+                    >
+                      <Edit2 className="w-4 h-4" />
+                      Edit
+                    </button>
+                  </td>
+                </tr>
+              ))}
+              {paginatedData.length === 0 && (
+                <tr>
+                  <td colSpan={9} className="px-4 py-8 text-center text-slate-500">
+                    No products found matching the criteria.
+                  </td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+        
+        <div className="bg-slate-900 border-t border-slate-700 p-4 flex items-center justify-between text-sm text-slate-400">
+          <div className="flex items-center gap-4">
+            <span>Showing {Math.min((page - 1) * pageSize + 1, filteredData.length)} to {Math.min(page * pageSize, filteredData.length)} of {filteredData.length} entries</span>
+            <select
+              value={pageSize}
+              onChange={e => { setPageSize(Number(e.target.value)); setPage(1); }}
+              className="bg-slate-800 border border-slate-700 rounded px-2 py-1 focus:outline-none focus:border-blue-500"
+            >
+              <option value={25}>25 per page</option>
+              <option value={50}>50 per page</option>
+              <option value={100}>100 per page</option>
+            </select>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              disabled={page === 1}
+              onClick={() => setPage(p => p - 1)}
+              className="px-3 py-1 rounded bg-slate-800 hover:bg-slate-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              Previous
+            </button>
+            <span className="px-3 py-1 font-medium text-white">Page {page} of {totalPages || 1}</span>
+            <button
+              disabled={page === totalPages || totalPages === 0}
+              onClick={() => setPage(p => p + 1)}
+              className="px-3 py-1 rounded bg-slate-800 hover:bg-slate-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+            >
+              Next
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Sidebar.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Upload, FileSpreadsheet, FileText, CheckSquare, Table } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+interface SidebarProps {
+  activeModule: string;
+  setActiveModule: (m: 'descriptions' | 'completeness' | 'matrix' | 'upload') => void;
+}
+
+export function Sidebar({ activeModule, setActiveModule }: SidebarProps) {
+  const navItems = [
+    { id: 'descriptions', label: 'Product Descriptions', icon: FileText },
+    { id: 'completeness', label: 'Data Completeness', icon: CheckSquare },
+    { id: 'matrix', label: 'Matrix', icon: Table },
+    { id: 'upload', label: 'Upload / Reload', icon: Upload },
+  ] as const;
+
+  return (
+    <aside className="w-60 bg-slate-800 border-r border-slate-700 flex flex-col shrink-0">
+      <div className="p-4 text-xs font-semibold text-slate-400 uppercase tracking-wider">
+        Modules
+      </div>
+      <nav className="flex-1 px-2 space-y-1">
+        {navItems.map((item) => {
+          const Icon = item.icon;
+          const isActive = activeModule === item.id;
+          return (
+            <button
+              key={item.id}
+              onClick={() => setActiveModule(item.id)}
+              className={cn(
+                "w-full flex items-center gap-3 px-3 py-2.5 rounded-md text-sm font-medium transition-colors",
+                isActive 
+                  ? "bg-blue-600/10 text-blue-400" 
+                  : "text-slate-300 hover:bg-slate-700/50 hover:text-white"
+              )}
+            >
+              <Icon className={cn("w-5 h-5", isActive ? "text-blue-500" : "text-slate-400")} />
+              {item.label}
+            </button>
+          );
+        })}
+      </nav>
+    </aside>
+  );
+}

src/components/TopBar.tsx

@@ -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>
+  );
+}

src/components/UploadReload.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Upload, FileSpreadsheet } from 'lucide-react';
+import { AppState } from '../types';
+
+interface UploadReloadProps {
+  appState: AppState;
+  onUpload: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+
+export function UploadReload({ appState, onUpload }: UploadReloadProps) {
+  return (
+    <div className="max-w-2xl mx-auto mt-12">
+      <div className="bg-slate-800 rounded-xl border border-slate-700 p-8 shadow-xl">
+        <h2 className="text-2xl font-semibold text-white mb-6 flex items-center gap-3">
+          <Upload className="w-6 h-6 text-blue-500" />
+          Upload Excel File
+        </h2>
+        
+        <div className="border-2 border-dashed border-slate-600 rounded-lg p-12 text-center hover:bg-slate-700/30 transition-colors">
+          <input 
+            type="file" 
+            id="file-upload" 
+            accept=".xlsx, .xls" 
+            className="hidden" 
+            onChange={onUpload} 
+          />
+          <label htmlFor="file-upload" className="cursor-pointer flex flex-col items-center">
+            <FileSpreadsheet className="w-16 h-16 text-slate-400 mb-4" />
+            <span className="text-lg font-medium text-blue-400 hover:text-blue-300">Click to browse</span>
+            <span className="text-sm text-slate-500 mt-2">or drag and drop your .xlsx file here</span>
+          </label>
+        </div>
+
+        {appState.fileName && (
+          <div className="mt-8 bg-slate-900 rounded-lg p-6 border border-slate-700">
+            <h3 className="text-sm font-medium text-slate-400 uppercase tracking-wider mb-4">Current File in Memory</h3>
+            <div className="grid grid-cols-2 gap-4">
+              <div>
+                <p className="text-sm text-slate-500">File Name</p>
+                <p className="font-medium text-white truncate">{appState.fileName}</p>
+              </div>
+              <div>
+                <p className="text-sm text-slate-500">Total Rows</p>
+                <p className="font-medium text-white">{appState.data.length}</p>
+              </div>
+              <div className="col-span-2">
+                <p className="text-sm text-slate-500">Loaded At</p>
+                <p className="font-medium text-white">{appState.fileDate?.toLocaleString()}</p>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}