CDB-108 feat: implementa página de Guia do Usuário com navegação sidebar e DARK MODE

src/components/Checklist/Checklist.jsx

@@ -11,7 +11,7 @@ const renderIcon = (status) => {
         case "completed":
             return <FontAwesomeIcon icon={faCheckCircle} className={styles.completed} />;
         case "in-progress":
-            return <FontAwesomeIcon icon={faArrowRotateRight} className={styles.icon_load}/>;
+            return <FontAwesomeIcon icon={faArrowRotateRight} className={styles.icon_load} />;
         default:
             return <FontAwesomeIcon icon={faClock} />;
     }
@@ -35,7 +35,7 @@ const getStepStatus = (stepIndex, currentStep) => {
 const Checklist = ({ wsMessages }) => {
     const [calculatedCurrentStep, setCalculatedCurrentStep] = useState(0);
     const [isFinished, setIsFinished] = useState(false);
-      const navigate = useNavigate();
+    const navigate = useNavigate();
 
     useEffect(() => {
         let latestCompletedStepIndex = -1;
@@ -58,7 +58,13 @@ const Checklist = ({ wsMessages }) => {
 
         setCalculatedCurrentStep(latestCompletedStepIndex + 1);
         setIsFinished(pipelineOverallFinished);
-    }, [wsMessages]); 
+    }, [wsMessages]);
+
+    const ncmsMessage = wsMessages.find(msg => msg.process === "get_ncms" && msg.status === "success");
+    const ncmsArray = ncmsMessage?.data || [];
+    const onlyNcms = ncmsArray.map((item) => ({
+        ncms: item.ncms
+    }));
 
     return (
         <div className={styles['checklist-container']}>
@@ -74,7 +80,7 @@ const Checklist = ({ wsMessages }) => {
                     );
                 })}
             </ul>
-            <Button variant="filled" color="royal" fullWidth={true} disabled={!isFinished} onClick={() => { navigate("/table-editing") }}>Visualizar Resultados</Button>
+            <Button variant="filled" color="royal" fullWidth={true} disabled={!isFinished} onClick={() => { navigate("/table-editing", { state: { data: onlyNcms } })}}>Visualizar Resultados</Button>
         </div>
     )
 }

src/components/DragDrop/DragDrop.jsx

@@ -5,11 +5,12 @@ import { useState, useRef, useEffect } from "react";
 import styles from './DragDrop.module.css';
 import api from "../../services/axiosConfig";
 import Button from "../Button";
-import { connectWebSocket } from "../../services/websocket";
+import { connectWebSocket, disconnectWebSocket } from "../../services/websocket";
 
 const DragDropFiles = ({ isFileUploaded, setIsFileUploaded, setWsMessages, wsMessages, setCurrentStep }) => {
   const [file, setFile] = useState(null);
   const inputRef = useRef();
+  const wsRef = useRef(null);
   // const navigate = useNavigate();
   const handleDragOver = (event) => {
     event.preventDefault();
@@ -40,7 +41,7 @@ const DragDropFiles = ({ isFileUploaded, setIsFileUploaded, setWsMessages, wsMes
     const formData = new FormData();
     formData.append("pdf", file[0]);
 
-    connectWebSocket(
+     wsRef.current = connectWebSocket(
       handleWsMessage,
       null,
       null
@@ -57,6 +58,17 @@ const DragDropFiles = ({ isFileUploaded, setIsFileUploaded, setWsMessages, wsMes
     setCurrentStep(2)
   };
 
+   const handleCancelProcess = () => {
+    if (wsRef.current && wsRef.current.readyState === WebSocket.OPEN) {
+      wsRef.current.send(JSON.stringify({ action: "cancel_process" }));
+    }
+
+    disconnectWebSocket();
+    setFile(null);
+    setIsFileUploaded(false);
+    setCurrentStep(1);
+    setWsMessages([]);
+  };
 
   if (isFileUploaded) {
     return (
@@ -79,10 +91,10 @@ const DragDropFiles = ({ isFileUploaded, setIsFileUploaded, setWsMessages, wsMes
 
         <div className={styles.actions}>
           <Button
-            variant="disabled"
+            variant="outlined"
             color="gray"
             full="true"
-            onClick={() => setFile(null)}
+            onClick={handleCancelProcess}
           >
             Cancelar
           </Button>
@@ -96,7 +108,7 @@ const DragDropFiles = ({ isFileUploaded, setIsFileUploaded, setWsMessages, wsMes
       <div className={styles.mainContainer}>
         <div className={styles.dropzone}>
           <div className={styles.uploadIcon}>
-            <i class="bi bi-file-earmark-check-fill"></i>
+            <i className="bi bi-file-earmark-check-fill"></i>
 
           </div>
 

src/components/Footer/Footer.module.css

@@ -6,6 +6,7 @@ footer#footer{
     bottom: 0;
     right: 0;
     left: 0;
+    z-index: 200;
 
 }
     footer#footer > div{

src/components/Input/Dropdown/Dropdown.jsx

@@ -6,41 +6,41 @@ import { faChevronDown } from '@fortawesome/free-solid-svg-icons'
 import inputStyles from '../Input/Input.module.css'
 import styles from './Dropdown.module.css'
 
-const Dropdown = ({label, options, onChange, dataType}) => {
+const Dropdown = ({ label, options, onChange, dataType }) => {
     // 'options' deve ser um array de opções do dropdown
 
     const [currentIndex, setCurrentIndex] = useState(0)
     const [isActivated, setIsActivated] = useState(false)
     const isObj = dataType === 'object'
-    
-    return(
+
+    return (
         <div className={inputStyles.container}>
             {label && (
                 <label className={inputStyles.label}>
                     {label}
                 </label>
             )}
 
-            {options.length > 0 ? (
+            {Array.isArray(options) && options.length > 0 ? (
                 <>
-                    <button className={`${inputStyles.input} ${styles.input} ${isActivated && (styles.activated)}`} onClick={() => {setIsActivated(!isActivated)}} type='button'>
+                    <button className={`${inputStyles.input} ${styles.input} ${isActivated && (styles.activated)}`} onClick={() => { setIsActivated(!isActivated) }} type='button'>
                         {
                             isObj ? (
                                 options[currentIndex].valor + ' - ' + options[currentIndex].descricao
                             ) : (
                                 options[currentIndex]
                             )
                         }
-                        <FontAwesomeIcon icon={faChevronDown} className={styles.icon}/>
+                        <FontAwesomeIcon icon={faChevronDown} className={styles.icon} />
                     </button>
-                    
+
                     <div className={styles.optionsContainer}>
                         {isActivated && (
                             <div className={styles.options}>
                                 {options.map((option, i) => (
-                                    <p 
-                                        className={styles.option} 
-                                        key={i} 
+                                    <p
+                                        className={styles.option}
+                                        key={i}
                                         onClick={() => {
                                             onChange(option)
                                             setCurrentIndex(i); setIsActivated(false)
@@ -57,10 +57,10 @@ const Dropdown = ({label, options, onChange, dataType}) => {
                         )}
                     </div>
                 </>
-            ) 
-            : (
-                <div>Opções deve ser um Array</div>
-            )}
+            )
+                : (
+                    <div>Opções deve ser um Array</div>
+                )}
 
         </div>
     )

src/components/Navbar/Navbar.jsx

@@ -29,7 +29,7 @@ const Navbar = () => {
 
                     <ul className="navbar-nav">
                         <li className="nav-item">
-                            <Link className="nav-link" aria-current="page" to="#">Guia de Uso</Link>
+                            <Link className="nav-link" aria-current="page" to="/user-guide">Guia de Uso</Link>
                         </li>
                     </ul>
                 </div>

src/index.css

@@ -2,4 +2,5 @@
 @import './styles/global.css';
 @import './styles/reset.css';
 @import './styles/typography.css';
-@import './styles/tableCommons.css'
+@import './styles/tableCommons.css';
+@import './styles/dark-mode.css';

src/main.jsx

@@ -6,6 +6,7 @@ import 'bootstrap/dist/css/bootstrap.min.css';
 import 'bootstrap/dist/js/bootstrap.bundle.min.js';
 import 'bootstrap-icons/font/bootstrap-icons.css';
 import App from './App.jsx'
+import './scripts/darkModeToggle.js'
 
 createRoot(document.getElementById('root')).render(
     <StrictMode>

src/pages/Homepage/Homepage.jsx

@@ -45,6 +45,9 @@ function Homepage () {
                     icon={faArrowUpRightFromSquare}
                     iconPosition="right"
                     className={styles.userGuideBtn}
+                    onClick={() => {
+                        navigate('/user-guide')
+                    }}
                 >
                     Ver Guia de Uso
                 </Button>

src/pages/Homepage/Homepage.module.css

@@ -119,4 +119,15 @@ div.buttonsContainer .startProcessBtn{
         background-size: 1000% 100%;
         background-position: right;
     }   
+}
+
+/* Dark Mode - Descriptum e PDF */
+[data-theme="dark"] p.text > b{
+    background: var(--base-white);
+    color: var(--black-700);
+}
+
+[data-theme="dark"] p.text > abbr{
+    background: var(--base-white);
+    color: var(--black-700);
 }