[Draft] refactor: refactored code

src/frontend/package.json

@@ -10,6 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@azure/msal-browser": "^4.2.0",
+    "@azure/msal-react": "^3.0.4",
     "@fluentui/react": "^8.122.9",
     "@fluentui/react-components": "^9.56.7",
     "@fluentui/react-file-type-icons": "^8.12.7",
@@ -34,12 +36,11 @@
     "sql-formatter": "^15.4.11",
     "tailwind-merge": "^2.6.0",
     "tailwindcss": "^3.4.17",
-    "uuid": "^11.0.5",
-    "@azure/msal-browser": "^4.2.0",
-    "@azure/msal-react": "^3.0.4"
+    "uuid": "^11.0.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
+    "@types/node": "^22.14.0",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react": "^4.3.4",
@@ -50,6 +51,7 @@
     "globals": "^15.14.0",
     "rollup": "^4.34.4",
     "rollup-plugin-dts": "^6.1.1",
+    "sass-embedded": "^1.86.3",
     "vite": "^6.0.5",
     "vite-plugin-svgr": "^4.3.0"
   }

src/frontend/src/App.css

@@ -49,20 +49,18 @@
 }
 
 
-.landing-page p {
-  font-size: 1.2rem;
-  font-weight: bold;
-}
-
-.landing-page main {
-  padding-top: 16rem; /* Adjust the value as needed */
-}
-
-.landing-page p {
-  margin-bottom: 8rem; /* Space between text and upload button */
-}
-
 .sidebar {
   height: 100vh; /* Make it full viewport height */
   background-color: white;
+}
+
+.panelRight{
+  position: "fixed";
+  top:'60px'; 
+  right: 0;
+  height: "calc(100vh - 60px)"; 
+  width: "300px"; 
+  z-index: 1050;
+  background: "white";
+  overflow-y: "auto";
 }

src/frontend/src/App.jsx

@@ -1,26 +1,89 @@
-
-import './App.css'
-import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
-import LandingPage from './pages/landingPage';
-import ModernizationPage from './pages/modernizationPage';
-import BatchViewPage from './pages/batchView';
-import { initializeIcons } from '@fluentui/react';
+import "./App.css";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import LandingPage from "./pages/landingPage/landingPage";
+import ModernizationPage from "./pages/modernizationPage/modernizationPage";
+import BatchViewPage from "./pages/batchViewPage/batchView";
+import { initializeIcons } from "@fluentui/react";
+import Header from "./components/Header/Header";
+import HeaderTools from "./components/Header/HeaderTools";
+import PanelRightToggles from "./components/Header/PanelRightToggles";
+import { Button, Tooltip } from "@fluentui/react-components";
+import {
+  HistoryRegular,
+  HistoryFilled,
+  bundleIcon,
+} from "@fluentui/react-icons";
+export const History = bundleIcon(HistoryFilled, HistoryRegular);
+//import RootState from "./store/store";
+import { useSelector, useDispatch } from "react-redux";
+import { togglePanel, closePanel } from "./store/historyPanelSlice";
+import PanelRightToolbar from "./components/Panels/PanelRightToolbar";
+import PanelRight from "./components/Panels/PanelRight";
+import BatchHistoryPanel from "./components/batchHistoryPanel/batchHistoryPanel";
 
 initializeIcons();
 
 function App() {
+  const dispatch = useDispatch();
+  const isPanelOpen = useSelector((state) => state.historyPanel.isOpen);
+  const handleLeave = () => {
+    if (window.cancelLogoUploads) {
+      window.cancelLogoUploads();
+    }
+  };
+
+  const handleTogglePanel = () => {
+    dispatch(togglePanel());
+  };
 
   return (
     <Router>
       <div>
+        <div onClick={handleLeave} className="pointerCursor">
+          <Header subtitle="Modernize your code">
+            <HeaderTools>
+              <PanelRightToggles>
+                <Tooltip content="View Batch History" relationship="label">
+                  <Button
+                    appearance="subtle"
+                    icon={<History />}
+                    //checked={isPanelOpen}
+                    onClick={(event) => {
+                      event.stopPropagation(); // Prevents the event from bubbling up
+                      handleTogglePanel(); // Calls the button click handler
+                    }} // Connect toggle to state
+                  />
+                </Tooltip>
+              </PanelRightToggles>
+            </HeaderTools>
+          </Header>
+        </div>
         <Routes>
           <Route path="/" element={<LandingPage />} />
-          <Route path="/batch-process/:batchId" element={<ModernizationPage />} />
+          <Route
+            path="/batch-process/:batchId"
+            element={<ModernizationPage />}
+          />
           <Route path="/batch-view/:batchId" element={<BatchViewPage />} />
         </Routes>
+        {isPanelOpen && (
+          <div className="panelRight">
+            <PanelRight panelWidth={300} panelResize={true} panelType={"first"}>
+              <PanelRightToolbar
+                panelTitle="Batch history"
+                panelIcon={<History />}
+                handleDismiss={handleTogglePanel}
+              />
+              <BatchHistoryPanel
+                isOpen={isPanelOpen}
+                onClose={() => dispatch(closePanel())}
+              />
+            </PanelRight>
+          </div>
+        )}
       </div>
     </Router>
   );
 }
 
-export default App
+export default App;

src/frontend/src/commonComponents/ConfirmationDialog/confirmationDialogue.scss

@@ -0,0 +1,34 @@
+.dialogBody{
+    display: flex;
+    justify-content: space-between;
+    align-items: right
+}
+
+.dismissButton{
+    position: absolute;
+    top: 8px;
+    right: 8px;
+    width: 32px;
+    height: 32px;
+}
+
+.dialogActionContainer{
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+    flex-wrap: nowrap;
+}
+
+.actionButton{
+    flex-grow: 1;
+    min-width: 120px;
+    max-width: 175px;
+    white-space: nowrap;
+}
+
+.secondaryButton{
+    flex-grow: 1;
+    min-width: 100px;
+    max-width: auto;
+    white-space: nowrap;
+}

src/frontend/src/commonComponents/ConfirmationDialog/confirmationDialogue.tsx

@@ -2,53 +2,33 @@ import React from "react";
 import { Dialog, DialogSurface, DialogBody, DialogTitle, DialogContent, DialogActions } from "@fluentui/react-components";
 import { Button } from "@fluentui/react-components";
 import { Dismiss24Regular } from "@fluentui/react-icons";
+import "./confirmationDialogue.scss";
 
 const ConfirmationDialog = ({ open, setOpen, title, message, confirmText, cancelText, onConfirm, onCancel }) => {
     return (
         <Dialog open={open} onOpenChange={(event, data) => setOpen(data.open)}>
             <DialogSurface>
                 <DialogBody>
-                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "right" }}>
+                <div className="dialogBody">
                     <DialogTitle>{title}</DialogTitle>
                     <Button 
                     appearance="subtle" 
                     icon={<Dismiss24Regular />} 
                     onClick={() => setOpen(false)}
-                    style={{
-                        position: "absolute",
-                        top: "8px",
-                        right: "8px",
-                        width: "32px",
-                        height: "32px",
-                      }}
+                    className="dismissButton"
                     />
                 </div>
                     <DialogContent>{message}</DialogContent>
                     <DialogActions 
-                     style={{
-                        display: "flex",
-                        justifyContent: "space-between",
-                        gap: "8px",
-                        flexWrap: "nowrap",
-                      }}>
+                     className="dialogActionContainer">
                         <Button appearance="primary" onClick={() => { onConfirm(); setOpen(false); }}
-                                style={{
-                                    flexGrow: 1,
-                                    minWidth: "120px",
-                                    maxWidth: "175px",
-                                    whiteSpace: "nowrap",
-                                  }}
+                            className="actionButton"
                         >
                             {confirmText}
                         </Button>
                         {cancelText && cancelText.trim() !== "" && (
                         <Button appearance="secondary" onClick={() => { onCancel(); setOpen(false); }}
-                                style={{
-                                    flexGrow: 1,
-                                    minWidth: "100px",
-                                    maxWidth: "auto",
-                                    whiteSpace: "nowrap",
-                                  }}
+                            className="secondaryButton"
                         >
                             {cancelText}
                         </Button>

src/frontend/src/commonComponents/errorContent/errorContent.scss

@@ -0,0 +1,10 @@
+
+  .errorItem {
+    margin-top: 16px;
+    padding-left: 20px;
+    padding-bottom: 16px;
+  }
+  .tbSql{
+    font-size: 16px;
+    color: #519ABA;
+  }

src/frontend/src/commonComponents/errorContent/errorContent.tsx

@@ -0,0 +1,37 @@
+import { Accordion, AccordionItem, AccordionHeader, AccordionPanel,Text } from "@fluentui/react-components";
+import React from "react";
+import { TbSql } from "react-icons/tb";
+import './errorContent.scss';
+import ErrorComponent from "../errorsComponent/errorComponent";
+
+export const ErrorContent = (props) => {
+
+  const errorFiles = props?.batchSummary.files.filter(file => file.error_count && file.error_count);
+  if (errorFiles.length === 0) {
+    return (
+      <div className="errorItem">
+        <Text>No errors found.</Text>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <Accordion collapsible multiple defaultValue={errorFiles.map(file => file.file_id)}>
+        {errorFiles.map((file, idx) =>{   
+          return (
+
+          <AccordionItem key={idx} value={file.file_id}>
+            <AccordionHeader>
+              <TbSql className="tbSql" />
+              {file.name} ({file.error_count})
+            </AccordionHeader>
+            <AccordionPanel style={{margin : "0px 12px 12px 12px"}}>
+              <ErrorComponent file={file}/>
+            </AccordionPanel>
+          </AccordionItem>
+        )})}
+      </Accordion>
+    </div>
+  );
+};

src/frontend/src/commonComponents/errorsComponent/errorComponent.scss

@@ -0,0 +1,43 @@
+.pl_16{
+    padding-left: 16px;
+}
+
+.ml_8{
+    margin-left: 8px;
+}
+
+.infoText{
+    display: flex !important;
+    align-items: flex-start
+}
+
+.iconContainer{
+    flex-shrink: 0;
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    margin-right: 8px;
+    margin-top: 3px;
+}
+
+.errorIcon{
+    color: var(--colorStatusDangerForeground1);
+    width: 16px;
+    height: 16px;
+}
+
+.warningIcon{
+    color: #B89500;
+    width: 16px;
+    height: 16px;
+}
+
+.infoIcon{
+    color: #007ACC;
+    width: 16px;
+    height: 16px;
+}
+
+.pl_24{
+    padding-left: 24px;
+}

src/frontend/src/commonComponents/errorsComponent/errorComponent.tsx

@@ -0,0 +1,36 @@
+import { List,ListItem, tokens,Text } from "@fluentui/react-components";
+import { DismissCircle24Regular, Warning24Regular, InfoRegular } from "@fluentui/react-icons";
+import React from "react";
+import "./errorComponent.scss";
+
+const ErrorComponent = (props) => {
+    const {file} = props;
+    return (
+      <>
+        {file?.file_logs?.length > 0 ? (
+          <List className="pl_16">
+            {file.file_logs?.map((log, logIdx) => (
+              <ListItem key={logIdx} className="ml_8">
+                <Text className="infoText">
+                  <span className="iconContainer">
+                    {log.logType === "error" ? (
+                      <DismissCircle24Regular className="errorIcon" />
+                    ) : log.logType === "warning" ? (
+                        <Warning24Regular className="warningIcon" />
+                    ) : (
+                          <InfoRegular className="infoIcon"/>
+                        )}
+                  </span>
+                  <span>{log.agentType}: {log.description}</span>
+                </Text>
+              </ListItem>
+            ))}
+          </List>
+        ) : (
+          <p className="pl_24">No detailed logs available.</p>
+        )}
+      </>
+    );
+  };
+
+  export default ErrorComponent;