Add Dimensions tab for packaging and MOQ consistency check

src/App.tsx

@@ -9,6 +9,7 @@ import { EditPanel } from './components/EditPanel';
 import { getAllSyncedRows, saveRowToSupabase } from './lib/supabase';
 import { getStoredSession, signOut, type AuthSession } from './lib/auth';
 import { LoginPage } from './components/LoginPage';
+import { DimensionsView } from './components/DimensionsView';
 
 export default function App() {
   const [session, setSession] = useState<AuthSession | null>(() => getStoredSession());
@@ -29,7 +30,7 @@ export default function App() {
     fileDate: null,
     hasUnsavedChanges: false
   });
-  const [activeModule, setActiveModule] = useState<'descriptions' | 'matrix'>('descriptions');
+  const [activeModule, setActiveModule] = useState<'descriptions' | 'matrix' | 'dimensions'>('descriptions');
   const [editingRowIndex, setEditingRowIndex] = useState<number | null>(null);
   const [isLoadingDefault, setIsLoadingDefault] = useState(true);
   const [defaultLoadError, setDefaultLoadError] = useState<string | null>(null);
@@ -322,6 +323,14 @@ export default function App() {
                 <MatrixView data={appState.data} headers={appState.headers} />
               )}
 
+              {activeModule === 'dimensions' && (
+                <DimensionsView 
+                  data={appState.data} 
+                  headers={appState.headers}
+                  onEdit={(index) => setEditingRowIndex(index)}
+                  onSaveRow={handleSaveRow}
+                />
+              )}
             </>
           )}
         </main>

src/components/DimensionsView.tsx

@@ -0,0 +1,292 @@
+import React, { useState, useMemo } from 'react';
+import { ExcelRow, COLUMNS } from '../types';
+import { AlertTriangle, CheckCircle2, ChevronDown, ChevronRight, Edit2, Package, Boxes, Scale, Loader2, Languages } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+interface DimensionsViewProps {
+  data: ExcelRow[];
+  headers: string[];
+  onEdit: (index: number) => void;
+  onSaveRow: (index: number, updatedRow: ExcelRow) => void;
+}
+
+interface DimensionGroup {
+  key: string;
+  innerDims: string;
+  rows: { row: ExcelRow; index: number }[];
+  isInconsistent: boolean;
+  discrepancies: {
+    outer: boolean;
+    units: boolean;
+    moq: boolean;
+  };
+}
+
+export function DimensionsView({ data, headers, onEdit, onSaveRow }: DimensionsViewProps) {
+  const [expandedGroups, setExpandedGroups] = useState<Set<string>>(new Set());
+  const [showOnlyInconsistent, setShowOnlyInconsistent] = useState(true);
+  const [syncing, setSyncing] = useState<string | null>(null);
+
+  const groups = useMemo(() => {
+    const groupMap = new Map<string, { row: ExcelRow; index: number }[]>();
+
+    data.forEach((row, index) => {
+      const iw = String(row[COLUMNS.INNER_W] || '0').trim();
+      const il = String(row[COLUMNS.INNER_L] || '0').trim();
+      const ih = String(row[COLUMNS.INNER_H] || '0').trim();
+      
+      const key = `${il}x${iw}x${ih}`;
+      if (!groupMap.has(key)) {
+        groupMap.set(key, []);
+      }
+      groupMap.get(key)!.push({ row, index });
+    });
+
+    const result: DimensionGroup[] = [];
+    groupMap.forEach((rows, key) => {
+      if (key === '0x0x0' || key === 'xx') return; // Skip empty/placeholder groups
+
+      const first = rows[0].row;
+      const firstOuter = `${first[COLUMNS.OUTER_L]}x${first[COLUMNS.OUTER_W]}x${first[COLUMNS.OUTER_H]}`;
+      const firstUnits = String(first[COLUMNS.UNITS_OUTER]);
+      const firstMOQ = String(first[COLUMNS.MOQ]);
+
+      let outerMatch = true;
+      let unitsMatch = true;
+      let moqMatch = true;
+
+      rows.forEach(({ row }) => {
+        const outer = `${row[COLUMNS.OUTER_L]}x${row[COLUMNS.OUTER_W]}x${row[COLUMNS.OUTER_H]}`;
+        const units = String(row[COLUMNS.UNITS_OUTER]);
+        const moq = String(row[COLUMNS.MOQ]);
+
+        if (outer !== firstOuter) outerMatch = false;
+        if (units !== firstUnits) unitsMatch = false;
+        if (moq !== firstMOQ) moqMatch = false;
+      });
+
+      result.push({
+        key,
+        innerDims: key,
+        rows,
+        isInconsistent: !outerMatch || !unitsMatch || !moqMatch,
+        discrepancies: {
+          outer: !outerMatch,
+          units: !unitsMatch,
+          moq: !moqMatch
+        }
+      });
+    });
+
+    return result.sort((a, b) => (b.isInconsistent ? 1 : 0) - (a.isInconsistent ? 1 : 0));
+  }, [data]);
+
+  const filteredGroups = useMemo(() => {
+    return showOnlyInconsistent ? groups.filter(g => g.isInconsistent) : groups;
+  }, [groups, showOnlyInconsistent]);
+
+  const toggleGroup = (key: string) => {
+    const next = new Set(expandedGroups);
+    if (next.has(key)) {
+      next.delete(key);
+    } else {
+      next.add(key);
+    }
+    setExpandedGroups(next);
+  };
+
+  const syncGroup = async (group: DimensionGroup) => {
+    if (!window.confirm(`This will apply the Packaging & MOQ values of product ${group.rows[0].row[COLUMNS.ARTICLE_NO]} to all ${group.rows.length} products in this group. Continue?`)) {
+      return;
+    }
+
+    setSyncing(group.key);
+    try {
+      const first = group.rows[0].row;
+      const outerL = first[COLUMNS.OUTER_L];
+      const outerW = first[COLUMNS.OUTER_W];
+      const outerH = first[COLUMNS.OUTER_H];
+      const unitsOuter = first[COLUMNS.UNITS_OUTER];
+      const moq = first[COLUMNS.MOQ];
+
+      for (const { row, index } of group.rows) {
+        const updatedRow = [...row];
+        updatedRow[COLUMNS.OUTER_L] = outerL;
+        updatedRow[COLUMNS.OUTER_W] = outerW;
+        updatedRow[COLUMNS.OUTER_H] = outerH;
+        updatedRow[COLUMNS.UNITS_OUTER] = unitsOuter;
+        updatedRow[COLUMNS.MOQ] = moq;
+        
+        await onSaveRow(index, updatedRow);
+      }
+    } finally {
+      setSyncing(null);
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between bg-slate-800/50 p-4 rounded-lg border border-slate-700">
+        <div>
+          <h2 className="text-xl font-semibold text-white flex items-center gap-2">
+            <Boxes className="text-blue-400" />
+            Dimension Consistency Check
+          </h2>
+          <p className="text-sm text-slate-400 mt-1">
+            Grouping products by Inner Box dimensions to find Packaging or MOQ discrepancies.
+          </p>
+        </div>
+        <div className="flex items-center gap-4">
+          <label className="flex items-center gap-2 text-sm text-slate-300 cursor-pointer">
+            <input 
+              type="checkbox" 
+              checked={showOnlyInconsistent} 
+              onChange={e => setShowOnlyInconsistent(e.target.checked)}
+              className="rounded border-slate-600 bg-slate-700 text-blue-600 focus:ring-blue-500"
+            />
+            Show only inconsistent groups
+          </label>
+          <div className="text-xs text-slate-500 bg-slate-900 px-3 py-1.5 rounded-full border border-slate-700">
+            {groups.filter(g => g.isInconsistent).length} Inconsistencies found
+          </div>
+        </div>
+      </div>
+
+      <div className="space-y-3">
+        {filteredGroups.map(group => (
+          <div key={group.key} className={cn(
+            "border rounded-lg overflow-hidden transition-all",
+            group.isInconsistent ? "border-amber-500/30 bg-amber-500/5" : "border-slate-700 bg-slate-800/30"
+          )}>
+            <div className="flex items-center justify-between bg-slate-800/20 pr-4">
+              <button 
+                onClick={() => toggleGroup(group.key)}
+                className="flex-1 flex items-center gap-4 p-4 hover:bg-slate-700/30 transition-colors text-left"
+              >
+                {expandedGroups.has(group.key) ? <ChevronDown className="w-5 h-5 text-slate-500" /> : <ChevronRight className="w-5 h-5 text-slate-500" />}
+                <div>
+                  <div className="flex items-center gap-2">
+                    <span className="font-mono text-sm text-blue-400 bg-blue-400/10 px-2 py-0.5 rounded">
+                      Inner: {group.innerDims} cm
+                    </span>
+                    {group.isInconsistent ? (
+                      <span className="flex items-center gap-1 text-xs font-medium text-amber-500 bg-amber-500/10 px-2 py-0.5 rounded ring-1 ring-amber-500/20">
+                        <AlertTriangle className="w-3 h-3" />
+                        Inconsistent
+                      </span>
+                    ) : (
+                      <span className="flex items-center gap-1 text-xs font-medium text-emerald-500 bg-emerald-500/10 px-2 py-0.5 rounded ring-1 ring-emerald-500/20">
+                        <CheckCircle2 className="w-3 h-3" />
+                        Consistent
+                      </span>
+                    )}
+                  </div>
+                  <div className="text-xs text-slate-500 mt-1">
+                    {group.rows.length} product{group.rows.length !== 1 ? 's' : ''} in this dimension group
+                  </div>
+                </div>
+              </button>
+
+              <div className="flex items-center gap-4">
+                <div className="flex items-center gap-4 text-[10px] hidden md:flex">
+                  {group.discrepancies.outer && (
+                    <span className="text-amber-400 flex items-center gap-1">
+                      <Package className="w-3 h-3" /> Outer Dims vary
+                    </span>
+                  )}
+                  {group.discrepancies.units && (
+                    <span className="text-amber-400 flex items-center gap-1">
+                      <Boxes className="w-3 h-3" /> Units/Outer vary
+                    </span>
+                  )}
+                  {group.discrepancies.moq && (
+                    <span className="text-amber-400 flex items-center gap-1">
+                      <Scale className="w-3 h-3" /> MOQ varies
+                    </span>
+                  )}
+                </div>
+
+                {group.isInconsistent && (
+                  <button 
+                    onClick={() => syncGroup(group)}
+                    disabled={syncing === group.key}
+                    className="flex items-center gap-1.5 px-3 py-1.5 bg-blue-600 hover:bg-blue-700 text-white text-[10px] font-bold rounded-md transition-all shadow-lg shadow-blue-900/40 disabled:opacity-50"
+                  >
+                    {syncing === group.key ? <Loader2 className="w-3 h-3 animate-spin" /> : <Languages className="w-3 h-3" />}
+                    SYNC GROUP
+                  </button>
+                )}
+              </div>
+            </div>
+
+            {expandedGroups.has(group.key) && (
+              <div className="border-t border-slate-700 overflow-x-auto">
+                <table className="w-full text-xs text-left">
+                  <thead className="bg-slate-900/50 text-slate-400 uppercase tracking-tight font-semibold">
+                    <tr>
+                      <th className="px-4 py-3">Article No / Name</th>
+                      <th className="px-4 py-3">Inner Box (L/W/H)</th>
+                      <th className={cn("px-4 py-3", group.discrepancies.outer && "text-amber-500")}>Outer Box (L/W/H)</th>
+                      <th className={cn("px-4 py-3", group.discrepancies.units && "text-amber-500")}>Units/Outer</th>
+                      <th className={cn("px-4 py-3", group.discrepancies.moq && "text-amber-500")}>MOQ</th>
+                      <th className="px-4 py-3 text-right">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-slate-700/50">
+                    {group.rows.map(({ row, index }) => (
+                      <tr key={index} className="hover:bg-slate-700/20 group transition-colors">
+                        <td className="px-4 py-3">
+                          <div className="font-medium text-slate-200">{row[COLUMNS.ARTICLE_NO]}</div>
+                          <div className="text-[10px] text-slate-500 truncate max-w-[200px]">{row[COLUMNS.ARTICLE_NAME]}</div>
+                        </td>
+                        <td className="px-4 py-3 text-slate-400 font-mono">
+                          {row[COLUMNS.INNER_L]} × {row[COLUMNS.INNER_W]} × {row[COLUMNS.INNER_H]}
+                        </td>
+                        <td className={cn(
+                          "px-4 py-3 font-mono",
+                          group.discrepancies.outer ? "text-amber-300" : "text-slate-400"
+                        )}>
+                          {row[COLUMNS.OUTER_L]} × {row[COLUMNS.OUTER_W]} × {row[COLUMNS.OUTER_H]}
+                        </td>
+                        <td className={cn(
+                          "px-4 py-3",
+                          group.discrepancies.units ? "text-amber-300 font-bold" : "text-slate-400"
+                        )}>
+                          {row[COLUMNS.UNITS_OUTER]}
+                        </td>
+                        <td className={cn(
+                          "px-4 py-3",
+                          group.discrepancies.moq ? "text-amber-300 font-bold" : "text-slate-400"
+                        )}>
+                          {row[COLUMNS.MOQ]}
+                        </td>
+                        <td className="px-4 py-3 text-right">
+                          <button 
+                            onClick={() => onEdit(index)}
+                            className="p-1.5 hover:bg-blue-600/20 text-slate-500 hover:text-blue-400 rounded transition-all opacity-0 group-hover:opacity-100"
+                          >
+                            <Edit2 className="w-4 h-4" />
+                          </button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+        ))}
+
+        {filteredGroups.length === 0 && (
+          <div className="flex flex-col items-center justify-center py-20 bg-slate-800/20 border border-dashed border-slate-700 rounded-xl">
+            <CheckCircle2 className="w-12 h-12 text-emerald-500/50 mb-3" />
+            <h3 className="text-slate-300 font-medium">Clear of discrepancies</h3>
+            <p className="text-slate-500 text-sm mt-1">
+              {showOnlyInconsistent ? "No inconsistent groups found." : "No dimension data available."}
+            </p>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/EditPanel.tsx

@@ -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" />

src/components/Sidebar.tsx

@@ -1,16 +1,17 @@
 import React from 'react';
-import { FileSpreadsheet, FileText, CheckSquare, Table } from 'lucide-react';
+import { FileSpreadsheet, FileText, CheckSquare, Table, Box } from 'lucide-react';
 import { cn } from '../lib/utils';
 
 interface SidebarProps {
   activeModule: string;
-  setActiveModule: (m: 'descriptions' | 'completeness' | 'matrix') => void;
+  setActiveModule: (m: 'descriptions' | 'completeness' | 'matrix' | 'dimensions') => void;
 }
 
 export function Sidebar({ activeModule, setActiveModule }: SidebarProps) {
   const navItems = [
     { id: 'matrix', label: 'Matrix', icon: Table },
     { id: 'descriptions', label: 'Product Descriptions', icon: FileText },
+    { id: 'dimensions', label: 'Dimensions', icon: Box },
   ] as const;
 
   return (

src/types.ts

@@ -24,5 +24,14 @@ export const COLUMNS = {
   SHORT_EN: 65,
   RECOMMENDED_AGE: 67,
   CLASSIFICATION: 11, // Column L (index 11)
-  ITEM_AVAILABLE: 14  // Column O (index 14)
+  ITEM_AVAILABLE: 14,  // Column O (index 14)
+  MOQ: 27,
+  UNITS_INNER: 31,
+  UNITS_OUTER: 32,
+  INNER_W: 42,
+  INNER_L: 43,
+  INNER_H: 44,
+  OUTER_W: 47,
+  OUTER_L: 48,
+  OUTER_H: 49
 };