4 - Integrate Search and Listing Documents

package.json

@@ -10,8 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "axios": "^1.20.0",
     "react": "^19.2.8",
-    "react-dom": "^19.2.8"
+    "react-dom": "^19.2.8",
+    "react-icons": "^5.7.0"
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",

src/App.jsx

@@ -1,5 +1,5 @@
 import Layout from "./components/Layout/Layout";
-import Home from "./pages/Home";
+import Home from "./pages/Home/Home";
 
 import "./App.css";
 

src/components/Document/DocumentItem/DocumentItem.jsx

@@ -0,0 +1,62 @@
+import { FiEye } from "react-icons/fi";
+import "./DocumentItem.css";
+
+function formatarData(dataISO) {
+  if (!dataISO) return "-";
+
+  const data = new Date(dataISO);
+  if (Number.isNaN(data.getTime())) return dataISO;
+
+  return data.toLocaleDateString("pt-BR", {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+  });
+}
+
+function DocumentItem({ document, onView }) {
+  const typeClass = document.type
+    ?.toLowerCase()
+    .replace(/\s+/g, "-");
+
+  const accessClass = document.accessLevel
+    ?.toLowerCase()
+    .replace(/\s+/g, "-");
+
+  return (
+    <div className="document-item">
+      <div className="document-file">
+        <span>{document.tipo_arquivo}</span>
+      </div>
+
+      <div className="document-name" title={document.nome}>
+        {document.nome}
+      </div>
+
+      <div className="document-type">
+        <span className={`type-badge type-${typeClass}`}>
+          {document.setor}
+        </span>
+      </div>
+
+      <div className="document-date">
+        {formatarData(document.data_atualizacao)}
+      </div>
+
+      <div className="document-access">
+        <span className={`access-badge access-${accessClass}`}>
+          {document.nivel}
+        </span>
+      </div>
+
+      <div className="document-action">
+        <button onClick={() => onView(document)}>
+          <FiEye size={17} />
+          Visualizar
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default DocumentItem;

src/components/Document/DocumentList.jsx → src/components/Document/DocumentList/DocumentList.jsx

@@ -1,4 +1,4 @@
-import DocumentItem from "./DocumentItem";
+import DocumentItem from "../DocumentItem/DocumentItem";
 
 import "./DocumentList.css";
 

src/components/Document/DocumentModal.jsx → src/components/Document/DocumentModal/DocumentModal.jsx

@@ -1,3 +1,4 @@
+import { FiEye } from "react-icons/fi";
 import "./DocumentModal.css";
 
 function DocumentModal({ document, onClose, onViewPdf }) {
@@ -164,27 +165,7 @@ function DocumentModal({ document, onClose, onViewPdf }) {
             className="modal-view-button"
             onClick={() => onViewPdf(document)}
           >
-            <svg
-              width="18"
-              height="18"
-              viewBox="0 0 24 24"
-              fill="none"
-            >
-              <path
-                d="M2 12C2 12 5.5 5 12 5C18.5 5 22 12 22 12C22 12 18.5 19 12 19C5.5 19 2 12 2 12Z"
-                stroke="currentColor"
-                strokeWidth="1.8"
-              />
-
-              <circle
-                cx="12"
-                cy="12"
-                r="3"
-                stroke="currentColor"
-                strokeWidth="1.8"
-              />
-            </svg>
-
+            <FiEye size={18} />
             Visualizar
           </button>
         </footer>

src/components/SearchBar/SearchBar.jsx

@@ -1,3 +1,4 @@
+import { FiSearch } from "react-icons/fi";
 import "./SearchBar.css";
 
 function SearchBar({ value, onChange }) {
@@ -11,27 +12,7 @@ function SearchBar({ value, onChange }) {
       />
 
       <button type="button" className="search-button" aria-label="Pesquisar">
-        <svg
-          width="18"
-          height="18"
-          viewBox="0 0 24 24"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <circle
-            cx="11"
-            cy="11"
-            r="7"
-            stroke="currentColor"
-            strokeWidth="2"
-          />
-          <path
-            d="M20 20L16.5 16.5"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-          />
-        </svg>
+        <FiSearch size={18} />
       </button>
     </div>
   );

src/components/Sidebar/Sidebar.jsx

@@ -1,3 +1,4 @@
+import { FiFileText, FiLogOut } from "react-icons/fi";
 import logo from "../../assets/AkaerLogo.png";
 import "./Sidebar.css";
 
@@ -12,60 +13,13 @@ function Sidebar() {
 
       <nav className="sidebar-menu">
         <button className="sidebar-item active">
-          <svg
-            width="18"
-            height="18"
-            viewBox="0 0 24 24"
-            fill="none"
-          >
-            <path
-              d="M6 3H14L19 8V21H6V3Z"
-              stroke="currentColor"
-              strokeWidth="1.8"
-            />
-
-            <path
-              d="M14 3V8H19"
-              stroke="currentColor"
-              strokeWidth="1.8"
-            />
-          </svg>
-
+          <FiFileText size={20} />
           Documentos
         </button>
       </nav>
 
       <button className="logout-button">
-        <svg
-          width="18"
-          height="18"
-          viewBox="0 0 24 24"
-          fill="none"
-        >
-          <path
-            d="M10 5H5V19H10"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-
-          <path
-            d="M14 8L19 12L14 16"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-
-          <path
-            d="M19 12H9"
-            stroke="currentColor"
-            strokeWidth="2"
-            strokeLinecap="round"
-          />
-        </svg>
-
+        <FiLogOut size={20} />
         Deslogar
       </button>
     </aside>