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")}