Compare Changes at consolidate

src/taskpane/components/App.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { useState, useEffect } from "react";
 import { makeStyles } from "@fluentui/react-components";
-import { SheetInfo, SheetMappingStatus } from "../models";
+import { SheetInfo, SheetMappingStatus, ConsolidateSettings } from "../models";
 import SheetSelector from "./SheetSelector";
 import ColumnMapper from "./ColumnMapper";
 import StatusNotifier from "./StatusNotifier";
@@ -11,6 +11,8 @@ interface AppProps {
   title: string;
 }
 
+declare const DEV_MODE: boolean;
+
 const useStyles = makeStyles({
   root: {
     minHeight: "100vh",
@@ -33,6 +35,12 @@ const App: React.FC<AppProps> = () => {
   const [statusMessage, setStatusMessage] = useState("");
   const [isConsolidating, setIsConsolidating] = useState(false);
 
+  const [settings, setSettings] = useState<ConsolidateSettings>({
+    colorNew: "#d4edda",     // light green
+    colorChanged: "#fff3cd", // light yellow/orange
+    colorDeleted: "#f8d7da", // light red
+  });
+
   useEffect(() => {
     // Load internal sheets on mount
     getAvailableSheets().then(setSheets).catch(err => {
@@ -91,7 +99,7 @@ const App: React.FC<AppProps> = () => {
     setIsConsolidating(true);
     setStatus("idle");
     try {
-      const rowsCount = await consolidateData(sheetMappings);
+      const rowsCount = await consolidateData(sheetMappings, settings);
       setStatus("success");
       setStatusMessage(`Erfolgreich! Es wurden ${rowsCount} Zeilen aus ${sheetMappings.length} Blättern zusammengefasst.`);
       setStep("done");
@@ -105,6 +113,11 @@ const App: React.FC<AppProps> = () => {
 
   return (
     <div className={styles.root}>
+      {typeof DEV_MODE !== "undefined" && DEV_MODE && (
+        <div style={{ backgroundColor: "#ffc107", color: "#000", textAlign: "center", padding: "4px", fontWeight: "bold", fontSize: "12px" }}>
+          DEV ENVIRONMENT
+        </div>
+      )}
       <StatusNotifier status={status} message={statusMessage} />
 
       {step === "select_sheets" && (
@@ -120,6 +133,8 @@ const App: React.FC<AppProps> = () => {
       {step === "map_columns" && (
         <ColumnMapper
           sheetMappings={sheetMappings}
+          settings={settings}
+          onSettingsChange={setSettings}
           onHeaderRowChange={handleHeaderRowChange}
           onMappingChange={handleMappingChange}
           onBack={() => setStep("select_sheets")}

src/taskpane/components/ColumnMapper.tsx

@@ -13,7 +13,7 @@ import {
     Label,
     Spinner,
 } from "@fluentui/react-components";
-import { SheetMappingStatus, TARGET_COLUMNS } from "../models";
+import { SheetMappingStatus, TARGET_COLUMNS, ConsolidateSettings } from "../models";
 
 interface ColumnMapperProps {
     sheetMappings: SheetMappingStatus[];
@@ -22,6 +22,8 @@ interface ColumnMapperProps {
     onBack: () => void;
     onConsolidate: () => void;
     isConsolidating: boolean;
+    settings: ConsolidateSettings;
+    onSettingsChange: (settings: ConsolidateSettings) => void;
 }
 
 const ColumnMapper: React.FC<ColumnMapperProps> = ({
@@ -31,6 +33,8 @@ const ColumnMapper: React.FC<ColumnMapperProps> = ({
     onBack,
     onConsolidate,
     isConsolidating,
+    settings,
+    onSettingsChange,
 }) => {
     return (
         <div style={{ display: "flex", flexDirection: "column", gap: "15px", padding: "10px" }}>
@@ -119,6 +123,36 @@ const ColumnMapper: React.FC<ColumnMapperProps> = ({
                 })}
             </Accordion>
 
+            <div style={{ marginTop: "20px", padding: "10px", backgroundColor: "#f3f2f1", borderRadius: "4px" }}>
+                <Text weight="semibold">Hervorhebungen (Farben)</Text>
+                <div style={{ display: "flex", gap: "20px", marginTop: "10px" }}>
+                    <Field label="Neue Kabel">
+                        <input
+                            type="color"
+                            value={settings.colorNew}
+                            onChange={(e) => onSettingsChange({ ...settings, colorNew: e.target.value })}
+                            style={{ width: "60px", padding: "0", cursor: "pointer", height: "30px", border: "none" }}
+                        />
+                    </Field>
+                    <Field label="Geänderte Werte">
+                        <input
+                            type="color"
+                            value={settings.colorChanged}
+                            onChange={(e) => onSettingsChange({ ...settings, colorChanged: e.target.value })}
+                            style={{ width: "60px", padding: "0", cursor: "pointer", height: "30px", border: "none" }}
+                        />
+                    </Field>
+                    <Field label="Entfallene Kabel">
+                        <input
+                            type="color"
+                            value={settings.colorDeleted}
+                            onChange={(e) => onSettingsChange({ ...settings, colorDeleted: e.target.value })}
+                            style={{ width: "60px", padding: "0", cursor: "pointer", height: "30px", border: "none" }}
+                        />
+                    </Field>
+                </div>
+            </div>
+
             <div style={{ display: "flex", justifyContent: "space-between", marginTop: "20px" }}>
                 <Button onClick={onBack} disabled={isConsolidating}>Zurück</Button>
                 <Button