christianV/Craze-Data-check
1
0
Fork 0
mirror of https://github.com/christianvidalwolf-prog/Craze-Data-check.git synced 2026-08-03 15:05:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

Add Dimensions tab for packaging and MOQ consistency check

Browse Source
This commit is contained in:
Christian Vidal Wolf
2026-03-29 17:30:04 +02:00
parent 2ed90234a7
commit 3db2bc0dae
5 changed files with 382 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/EditPanel.tsx
+67 -2
View File
@@ -1,6 +1,6 @@
import React, { useState } from 'react';
import { ExcelRow, COLUMNS } from '../types';
import { X, Sparkles, Save, Loader2, Languages } from 'lucide-react';
import { X, Sparkles, Save, Loader2, Languages, Package } from 'lucide-react';
import { generateGemini } from '../services/gemini';
import { cn } from '../lib/utils';
@@ -17,17 +17,33 @@ export function EditPanel({ row, rowIndex, onSave, onClose }: EditPanelProps) {
longEn: row[COLUMNS.LONG_EN] || '',
shortDe: row[COLUMNS.SHORT_DE] || '',
shortEn: row[COLUMNS.SHORT_EN] || '',
innerW: row[COLUMNS.INNER_W] || '',
innerL: row[COLUMNS.INNER_L] || '',
innerH: row[COLUMNS.INNER_H] || '',
outerW: row[COLUMNS.OUTER_W] || '',
outerL: row[COLUMNS.OUTER_L] || '',
outerH: row[COLUMNS.OUTER_H] || '',
unitsOuter: row[COLUMNS.UNITS_OUTER] || '',
moq: row[COLUMNS.MOQ] || '',
});
const [loadingField, setLoadingField] = useState<string | null>(null);
const [error, setError] = useState<string | null>(null);
const isModified = (field: keyof typeof formData) => {
const colMap = {
const colMap: Record<string, number> = {
longDe: COLUMNS.LONG_DE,
longEn: COLUMNS.LONG_EN,
shortDe: COLUMNS.SHORT_DE,
shortEn: COLUMNS.SHORT_EN,
innerW: COLUMNS.INNER_W,
innerL: COLUMNS.INNER_L,
innerH: COLUMNS.INNER_H,
outerW: COLUMNS.OUTER_W,
outerL: COLUMNS.OUTER_L,
outerH: COLUMNS.OUTER_H,
unitsOuter: COLUMNS.UNITS_OUTER,
moq: COLUMNS.MOQ,
};
return formData[field] !== (row[colMap[field]] || '');
};
@@ -89,9 +105,33 @@ export function EditPanel({ row, rowIndex, onSave, onClose }: EditPanelProps) {
newRow[COLUMNS.LONG_EN] = formData.longEn;
newRow[COLUMNS.SHORT_DE] = formData.shortDe;
newRow[COLUMNS.SHORT_EN] = formData.shortEn;
newRow[COLUMNS.INNER_W] = formData.innerW;
newRow[COLUMNS.INNER_L] = formData.innerL;
newRow[COLUMNS.INNER_H] = formData.innerH;
newRow[COLUMNS.OUTER_W] = formData.outerW;
newRow[COLUMNS.OUTER_L] = formData.outerL;
newRow[COLUMNS.OUTER_H] = formData.outerH;
newRow[COLUMNS.UNITS_OUTER] = formData.unitsOuter;
newRow[COLUMNS.MOQ] = formData.moq;
onSave(rowIndex, newRow);
};
const DimensionInput = ({ label, field, placeholder }: { label: string, field: keyof typeof formData, placeholder?: string }) => (
<div className="flex flex-col gap-1.5">
<label className="text-[10px] font-medium text-slate-500 uppercase tracking-wider">{label}</label>
<input
type="text"
value={formData[field]}
onChange={e => setFormData(prev => ({ ...prev, [field]: e.target.value }))}
placeholder={placeholder}
className={cn(
"w-full bg-slate-900 border rounded p-2 text-sm text-white focus:outline-none focus:ring-1 transition-colors",
isModified(field) ? "border-blue-500 focus:ring-blue-500" : "border-slate-700 focus:border-slate-500"
)}
/>
</div>
);
const FieldEditor = ({ title, field }: { title: string, field: keyof typeof formData }) => (
<div className="flex flex-col gap-2">
<div className="flex items-center justify-between">
@@ -167,6 +207,31 @@ export function EditPanel({ row, rowIndex, onSave, onClose }: EditPanelProps) {
</div>
</div>
<div className="space-y-4 bg-slate-900/30 p-4 rounded-lg border border-slate-700/50">
<h3 className="text-xs font-semibold text-slate-400 uppercase tracking-widest flex items-center gap-2">
<Package className="w-3 h-3" /> Dimensions & Packaging
</h3>
<div className="grid grid-cols-3 gap-3">
<div className="col-span-3 text-[10px] text-slate-500 font-medium">INNER BOX (L × W × H) cm</div>
<DimensionInput label="Length" field="innerL" placeholder="L" />
<DimensionInput label="Width" field="innerW" placeholder="W" />
<DimensionInput label="Height" field="innerH" placeholder="H" />
</div>
<div className="grid grid-cols-3 gap-3">
<div className="col-span-3 text-[10px] text-slate-500 font-medium">OUTER BOX (L × W × H) cm</div>
<DimensionInput label="Length" field="outerL" placeholder="L" />
<DimensionInput label="Width" field="outerW" placeholder="W" />
<DimensionInput label="Height" field="outerH" placeholder="H" />
</div>
<div className="grid grid-cols-2 gap-3">
<DimensionInput label="Units per Outer" field="unitsOuter" />
<DimensionInput label="MOQ" field="moq" />
</div>
</div>
<FieldEditor title="Long Description (DE)" field="longDe" />
<FieldEditor title="Long Description (EN)" field="longEn" />
<FieldEditor title="Short Description (DE)" field="shortDe" />