mirror of
https://github.com/christianvidalwolf-prog/Craze-Data-check.git
synced 2026-08-03 11:05:24 +02:00
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.
This commit is contained in:
Christian
@@ -0,0 +1,9 @@
|
||||
# GEMINI_API_KEY: Required for Gemini AI API calls.
|
||||
# AI Studio automatically injects this at runtime from user secrets.
|
||||
# Users configure this via the Secrets panel in the AI Studio UI.
|
||||
GEMINI_API_KEY="MY_GEMINI_API_KEY"
|
||||
|
||||
# APP_URL: The URL where this applet is hosted.
|
||||
# AI Studio automatically injects this at runtime with the Cloud Run service URL.
|
||||
# Used for self-referential links, OAuth callbacks, and API endpoints.
|
||||
APP_URL="MY_APP_URL"
|
||||
@@ -0,0 +1,8 @@
|
||||
node_modules/
|
||||
build/
|
||||
dist/
|
||||
coverage/
|
||||
.DS_Store
|
||||
*.log
|
||||
.env*
|
||||
!.env.example
|
||||
@@ -1,11 +1,20 @@
|
||||
<div align="center">
|
||||
|
||||
<img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
|
||||
|
||||
<h1>Built with AI Studio</h2>
|
||||
|
||||
<p>The fastest path from prompt to production with Gemini.</p>
|
||||
|
||||
<a href="https://aistudio.google.com/apps">Start building</a>
|
||||
|
||||
</div>
|
||||
|
||||
# Run and deploy your AI Studio app
|
||||
|
||||
This contains everything you need to run your app locally.
|
||||
|
||||
View your app in AI Studio: https://ai.studio/apps/bac9908e-4996-4e4c-8ec7-3add58fb6684
|
||||
|
||||
## Run Locally
|
||||
|
||||
**Prerequisites:** Node.js
|
||||
|
||||
|
||||
1. Install dependencies:
|
||||
`npm install`
|
||||
2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
|
||||
3. Run the app:
|
||||
`npm run dev`
|
||||
|
||||
+13
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>My Google AI Studio App</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"name": "",
|
||||
"description": "",
|
||||
"requestFramePermissions": []
|
||||
}
|
||||
Generated
+4429
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"name": "react-example",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --port=3000 --host=0.0.0.0",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"clean": "rm -rf dist",
|
||||
"lint": "tsc --noEmit"
|
||||
},
|
||||
"dependencies": {
|
||||
"@google/genai": "^1.29.0",
|
||||
"@tailwindcss/vite": "^4.1.14",
|
||||
"@vitejs/plugin-react": "^5.0.4",
|
||||
"clsx": "^2.1.1",
|
||||
"dotenv": "^17.2.3",
|
||||
"express": "^4.21.2",
|
||||
"lucide-react": "^0.546.0",
|
||||
"motion": "^12.23.24",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"tailwind-merge": "^3.5.0",
|
||||
"vite": "^6.2.0",
|
||||
"xlsx": "^0.18.5"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/express": "^4.17.21",
|
||||
"@types/node": "^22.14.0",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"tailwindcss": "^4.1.14",
|
||||
"tsx": "^4.21.0",
|
||||
"typescript": "~5.8.2",
|
||||
"vite": "^6.2.0"
|
||||
}
|
||||
}
|
||||
+169
@@ -0,0 +1,169 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import * as XLSX from 'xlsx';
|
||||
import { AppState, ExcelRow, COLUMNS } from './types';
|
||||
import { Sidebar } from './components/Sidebar';
|
||||
import { TopBar } from './components/TopBar';
|
||||
import { ProductDescriptions } from './components/ProductDescriptions';
|
||||
import { DataCompleteness } from './components/DataCompleteness';
|
||||
import { MatrixView } from './components/MatrixView';
|
||||
import { UploadReload } from './components/UploadReload';
|
||||
import { EditPanel } from './components/EditPanel';
|
||||
|
||||
export default function App() {
|
||||
const [appState, setAppState] = useState<AppState>({
|
||||
headers: [],
|
||||
data: [],
|
||||
fileName: '',
|
||||
fileDate: null,
|
||||
hasUnsavedChanges: false
|
||||
});
|
||||
const [activeModule, setActiveModule] = useState<'descriptions' | 'completeness' | 'matrix' | 'upload'>('descriptions');
|
||||
const [editingRowIndex, setEditingRowIndex] = useState<number | null>(null);
|
||||
|
||||
const handleFileUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
if (appState.hasUnsavedChanges) {
|
||||
if (!window.confirm('You have unsaved changes. Are you sure you want to load a new file and discard them?')) {
|
||||
e.target.value = '';
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
const reader = new FileReader();
|
||||
reader.onload = (evt) => {
|
||||
const bstr = evt.target?.result;
|
||||
const wb = XLSX.read(bstr, { type: 'binary' });
|
||||
const wsname = wb.SheetNames[0];
|
||||
const ws = wb.Sheets[wsname];
|
||||
const data = XLSX.utils.sheet_to_json<any[]>(ws, { header: 1 });
|
||||
|
||||
if (data.length > 0) {
|
||||
setAppState({
|
||||
headers: data[0],
|
||||
data: data.slice(1),
|
||||
fileName: file.name,
|
||||
fileDate: new Date(),
|
||||
hasUnsavedChanges: false
|
||||
});
|
||||
setActiveModule('descriptions');
|
||||
}
|
||||
};
|
||||
reader.readAsBinaryString(file);
|
||||
};
|
||||
|
||||
const handleExport = () => {
|
||||
if (appState.data.length === 0) return;
|
||||
|
||||
const wsData = [appState.headers, ...appState.data];
|
||||
const ws = XLSX.utils.aoa_to_sheet(wsData);
|
||||
const wb = XLSX.utils.book_new();
|
||||
XLSX.utils.book_append_sheet(wb, ws, 'Products');
|
||||
|
||||
const dateStr = new Date().toISOString().split('T')[0];
|
||||
XLSX.writeFile(wb, `CRAZE_Products_Updated_${dateStr}.xlsx`);
|
||||
|
||||
setAppState(prev => ({ ...prev, hasUnsavedChanges: false }));
|
||||
};
|
||||
|
||||
const handleSaveRow = (rowIndex: number, updatedRow: ExcelRow) => {
|
||||
setAppState(prev => {
|
||||
const newData = [...prev.data];
|
||||
newData[rowIndex] = updatedRow;
|
||||
return {
|
||||
...prev,
|
||||
data: newData,
|
||||
hasUnsavedChanges: true
|
||||
};
|
||||
});
|
||||
setEditingRowIndex(null);
|
||||
};
|
||||
|
||||
const stats = useMemo(() => {
|
||||
if (appState.data.length === 0) return null;
|
||||
let missingDeLong = 0;
|
||||
let missingEnLong = 0;
|
||||
let missingDeShort = 0;
|
||||
let missingEnShort = 0;
|
||||
let fullyComplete = 0;
|
||||
|
||||
appState.data.forEach(row => {
|
||||
const deLong = row[COLUMNS.LONG_DE];
|
||||
const enLong = row[COLUMNS.LONG_EN];
|
||||
const deShort = row[COLUMNS.SHORT_DE];
|
||||
const enShort = row[COLUMNS.SHORT_EN];
|
||||
|
||||
if (!deLong) missingDeLong++;
|
||||
if (!enLong) missingEnLong++;
|
||||
if (!deShort) missingDeShort++;
|
||||
if (!enShort) missingEnShort++;
|
||||
|
||||
if (deLong && enLong && deShort && enShort) fullyComplete++;
|
||||
});
|
||||
|
||||
return {
|
||||
total: appState.data.length,
|
||||
missingDeLong,
|
||||
missingEnLong,
|
||||
missingDeShort,
|
||||
missingEnShort,
|
||||
fullyComplete
|
||||
};
|
||||
}, [appState.data]);
|
||||
|
||||
return (
|
||||
<div className="h-screen bg-slate-900 text-slate-200 flex flex-col font-sans overflow-hidden">
|
||||
<TopBar
|
||||
stats={stats}
|
||||
onExport={handleExport}
|
||||
hasData={appState.data.length > 0}
|
||||
hasUnsavedChanges={appState.hasUnsavedChanges}
|
||||
/>
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
<Sidebar activeModule={activeModule} setActiveModule={setActiveModule} />
|
||||
<main className="flex-1 overflow-auto relative p-6 bg-slate-950">
|
||||
{appState.data.length === 0 && activeModule !== 'upload' ? (
|
||||
<div className="flex flex-col items-center justify-center h-full text-slate-400">
|
||||
<p className="mb-4 text-lg">No data loaded.</p>
|
||||
<label className="cursor-pointer bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg shadow-lg transition-colors">
|
||||
Load Excel File
|
||||
<input type="file" accept=".xlsx, .xls" className="hidden" onChange={handleFileUpload} />
|
||||
</label>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{activeModule === 'descriptions' && (
|
||||
<ProductDescriptions
|
||||
data={appState.data}
|
||||
onEdit={(index) => setEditingRowIndex(index)}
|
||||
/>
|
||||
)}
|
||||
{activeModule === 'completeness' && (
|
||||
<DataCompleteness data={appState.data} headers={appState.headers} />
|
||||
)}
|
||||
{activeModule === 'matrix' && (
|
||||
<MatrixView data={appState.data} headers={appState.headers} />
|
||||
)}
|
||||
{activeModule === 'upload' && (
|
||||
<UploadReload
|
||||
appState={appState}
|
||||
onUpload={handleFileUpload}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
|
||||
{editingRowIndex !== null && (
|
||||
<EditPanel
|
||||
row={appState.data[editingRowIndex]}
|
||||
rowIndex={editingRowIndex}
|
||||
onSave={handleSaveRow}
|
||||
onClose={() => setEditingRowIndex(null)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@import "tailwindcss";
|
||||
@@ -0,0 +1,6 @@
|
||||
import { clsx, type ClassValue } from "clsx";
|
||||
import { twMerge } from "tailwind-merge";
|
||||
|
||||
export function cn(...inputs: ClassValue[]) {
|
||||
return twMerge(clsx(inputs));
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
import {StrictMode} from 'react';
|
||||
import {createRoot} from 'react-dom/client';
|
||||
import App from './App.tsx';
|
||||
import './index.css';
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
);
|
||||
@@ -0,0 +1,30 @@
|
||||
export async function generateDescription(prompt: string, systemPrompt: string): Promise<string> {
|
||||
const apiKey = import.meta.env.VITE_ANTHROPIC_API_KEY || localStorage.getItem('ANTHROPIC_API_KEY') || '';
|
||||
if (!apiKey) {
|
||||
throw new Error('Anthropic API Key not found. Please set VITE_ANTHROPIC_API_KEY in .env or ANTHROPIC_API_KEY in localStorage.');
|
||||
}
|
||||
|
||||
const response = await fetch('https://api.anthropic.com/v1/messages', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'x-api-key': apiKey,
|
||||
'anthropic-version': '2023-06-01',
|
||||
'anthropic-dangerous-direct-browser-access': 'true'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
model: 'claude-sonnet-4-20250514',
|
||||
max_tokens: 1000,
|
||||
system: systemPrompt,
|
||||
messages: [{ role: 'user', content: prompt }]
|
||||
})
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json().catch(() => ({}));
|
||||
throw new Error(errorData.error?.message || 'Failed to generate text from Anthropic API');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
return data.content[0].text;
|
||||
}
|
||||
@@ -0,0 +1,26 @@
|
||||
export type ExcelRow = any[];
|
||||
|
||||
export interface AppState {
|
||||
headers: string[];
|
||||
data: ExcelRow[];
|
||||
fileName: string;
|
||||
fileDate: Date | null;
|
||||
hasUnsavedChanges: boolean;
|
||||
}
|
||||
|
||||
export const COLUMNS = {
|
||||
ARTICLE_NO: 0,
|
||||
ARTICLE_NAME: 2,
|
||||
LINE: 7,
|
||||
LICENSE: 8,
|
||||
DETAILS_EN: 9,
|
||||
DETAILS_DE: 10,
|
||||
BARCODE: 28,
|
||||
TARIFF_CODE: 58,
|
||||
COUNTRY_ORIGIN: 60,
|
||||
LONG_DE: 62,
|
||||
LONG_EN: 63,
|
||||
SHORT_DE: 64,
|
||||
SHORT_EN: 65,
|
||||
RECOMMENDED_AGE: 67
|
||||
};
|
||||
@@ -0,0 +1,26 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"experimentalDecorators": true,
|
||||
"useDefineForClassFields": false,
|
||||
"module": "ESNext",
|
||||
"lib": [
|
||||
"ES2022",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "bundler",
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force",
|
||||
"allowJs": true,
|
||||
"jsx": "react-jsx",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"./*"
|
||||
]
|
||||
},
|
||||
"allowImportingTsExtensions": true,
|
||||
"noEmit": true
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
import tailwindcss from '@tailwindcss/vite';
|
||||
import react from '@vitejs/plugin-react';
|
||||
import path from 'path';
|
||||
import {defineConfig, loadEnv} from 'vite';
|
||||
|
||||
export default defineConfig(({mode}) => {
|
||||
const env = loadEnv(mode, '.', '');
|
||||
return {
|
||||
plugins: [react(), tailwindcss()],
|
||||
define: {
|
||||
'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY),
|
||||
},
|
||||
resolve: {
|
||||
alias: {
|
||||
'@': path.resolve(__dirname, '.'),
|
||||
},
|
||||
},
|
||||
server: {
|
||||
// HMR is disabled in AI Studio via DISABLE_HMR env var.
|
||||
// Do not modifyâfile watching is disabled to prevent flickering during agent edits.
|
||||
hmr: process.env.DISABLE_HMR !== 'true',
|
||||
},
|
||||
};
|
||||
});
|
||||
Reference in New Issue
Block a user