ed-roh · swords14 · Sep 15, 2024 · Sep 15, 2024 · Sep 15, 2024 · Sep 17, 2024
diff --git a/README.md b/README.md
@@ -1,7 +1 @@
-# React Admin Dashboard
 
-Build a COMPLETE React Admin Dashboard App | React, Material UI, Data Grid, Light & Dark Mode
-
-Video: https://www.youtube.com/watch?v=wYpCWwD1oz0
-
-For all related questions and discussions about this project, check out the discord: https://discord.gg/2FfPeEk2mX
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,7 +36,7 @@
     "yup": "^0.32.11"
   },
   "scripts": {
-    "start": "PORT=5000 react-scripts start",
+    "start": "set PORT=5000 && react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

diff --git a/public/assets/Diana_47.jpg b/public/assets/Diana_47.jpg
diff --git a/src/App.js b/src/App.js
@@ -15,33 +15,41 @@ import Geography from "./scenes/geography";
 import { CssBaseline, ThemeProvider } from "@mui/material";
 import { ColorModeContext, useMode } from "./theme";
 import Calendar from "./scenes/calendar/calendar";
+import Login from "./scenes/Login/Login"; //
 
 function App() {
   const [theme, colorMode] = useMode();
   const [isSidebar, setIsSidebar] = useState(true);
+  const [isAuthenticated, setIsAuthenticated] = useState(false); // Estado de autenticação
 
   return (
     <ColorModeContext.Provider value={colorMode}>
       <ThemeProvider theme={theme}>
         <CssBaseline />
         <div className="app">
-          <Sidebar isSidebar={isSidebar} />
-          <main className="content">
-            <Topbar setIsSidebar={setIsSidebar} />
-            <Routes>
-              <Route path="/" element={<Dashboard />} />
-              <Route path="/team" element={<Team />} />
-              <Route path="/contacts" element={<Contacts />} />
-              <Route path="/invoices" element={<Invoices />} />
-              <Route path="/form" element={<Form />} />
-              <Route path="/bar" element={<Bar />} />
-              <Route path="/pie" element={<Pie />} />
-              <Route path="/line" element={<Line />} />
-              <Route path="/faq" element={<FAQ />} />
-              <Route path="/calendar" element={<Calendar />} />
-              <Route path="/geography" element={<Geography />} />
-            </Routes>
-          </main>
+          {isAuthenticated ? ( // Verifica se o usuário está autenticado
+            <>
+              <Sidebar isSidebar={isSidebar} />
+              <main className="content">
+                <Topbar setIsSidebar={setIsSidebar} />
+                <Routes>
+                  <Route path="/" element={<Dashboard />} />
+                  <Route path="/team" element={<Team />} />
+                  <Route path="/contacts" element={<Contacts />} />
+                  <Route path="/invoices" element={<Invoices />} />
+                  <Route path="/form" element={<Form />} />
+                  <Route path="/bar" element={<Bar />} />
+                  <Route path="/pie" element={<Pie />} />
+                  <Route path="/line" element={<Line />} />
+                  <Route path="/faq" element={<FAQ />} />
+                  <Route path="/calendar" element={<Calendar />} />
+                  <Route path="/geography" element={<Geography />} />
+                </Routes>
+              </main>
+            </>
+          ) : (
+            <Login setIsAuthenticated={setIsAuthenticated} /> // Redireciona para login
+          )}
         </div>
       </ThemeProvider>
     </ColorModeContext.Provider>

diff --git a/src/components/ProgressCircle.jsx b/src/components/ProgressCircle.jsx
@@ -5,6 +5,7 @@ const ProgressCircle = ({ progress = "0.75", size = "40" }) => {
   const theme = useTheme();
   const colors = tokens(theme.palette.mode);
   const angle = progress * 360;
+
   return (
     <Box
       sx={{

diff --git a/src/data/mockData.js b/src/data/mockData.js
@@ -14,7 +14,7 @@ export const mockDataTeam = [
     name: "Cersei Lannister",
     email: "cerseilannister@gmail.com",
     age: 42,
-    phone: "(421)314-2288",
+    phoneone: "(421)314-2288",
     access: "manager",
   },
   {

diff --git a/src/scenes/Login/Login.css b/src/scenes/Login/Login.css
@@ -0,0 +1,104 @@
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Arial', sans-serif;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+  }
+
+  .login-container {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100vw;
+    height: 100vh;
+    overflow: hidden;
+  }
+
+  .login-container::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url('https://plus.unsplash.com/premium_photo-1667113144491-eaccf04e894b?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8NXx8c29mdCUyMGNvbG9yfGVufDB8fDB8fHww') no-repeat center center/cover;
+    z-index: -1;
+    width: 100%;
+    height: 100%;
+    opacity: 0.6; /* Ajusta a opacidade para melhor visibilidade do formulário */
+  }
+
+  .login-box {
+    background: rgba(255, 255, 255, 0.2);
+    backdrop-filter: blur(10px);
+    padding: 40px;
+    border-radius: 10px;
+    text-align: center;
+    color: white;
+    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
+    z-index: 1;
+    position: relative;
+  }
+
+  h2 {
+    margin-bottom: 20px;
+  }
+
+  .input-group {
+    margin-bottom: 15px;
+  }
+
+  .input-group input {
+    width: 100%;
+    padding: 10px;
+    border-radius: 5px;
+    border: none;
+    outline: none;
+  }
+
+  .options {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 20px;
+    font-size: 14px;
+  }
+
+  .options label {
+    display: flex;
+    align-items: center;
+  }
+
+  .options a {
+    color: white;
+    text-decoration: none;
+  }
+
+  .login-btn {
+    width: 100%;
+    padding: 10px;
+    border: none;
+    border-radius: 5px;
+    background-color: #6a11cb;
+    color: white;
+    cursor: pointer;
+    transition: background-color 0.3s;
+  }
+
+  .login-btn:hover {
+    background-color: #2575fc;
+  }
+
+  p {
+    margin-top: 20px;
+  }
+
+  p a {
+    color: white;
+    text-decoration: underline;
+  }
+
diff --git a/src/scenes/Login/Login.jsx b/src/scenes/Login/Login.jsx
@@ -0,0 +1,61 @@
+import React, { useState } from 'react';
+import './Login.css'; // Arquivo de estilos separado
+
+function Login({ setIsAuthenticated }) { // Recebe o prop 'setIsAuthenticated'
+  const [username, setUsername] = useState('');
+  const [password, setPassword] = useState('');
+
+  const handleLogin = (e) => {
+    e.preventDefault();
+
+    // Aqui você faria a validação de autenticação. Para teste, vamos autenticar qualquer usuário
+    if (username === "admin" && password === "admin") {
+      // Sucesso na autenticação
+      setIsAuthenticated(true); // Define o usuário como autenticado
+    } else {
+      // Falha na autenticação (você pode adicionar mensagens de erro)
+      alert("Usuário ou senha incorretos!");
+    }
+  };
+
+  return (
+    <div className="login-container">
+      <div className="login-box">
+        <h2>Madereira Jurema</h2>
+        <form onSubmit={handleLogin}>
+          <div className="input-group">
+            <input
+              type="text"
+              placeholder="Usuário"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              required
+            />
+          </div>
+          <div className="input-group">
+            <input
+              type="password" // Corrigido de "Senha" para "password"
+              placeholder="Senha"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              required
+            />
+          </div>
+          <div className="options">
+            <label>
+              <input type="checkbox" />
+              Lembrar-me
+            </label>
+            <a href="#Esqueceu-sua-senha">Esqueceu sua senha?</a>
+          </div>
+          <button type="submit" className="login-btn">Entrar</button>
+        </form>
+        <p>
+          Não possui uma conta? <a href="#Register">Registrar</a>
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default Login;
diff --git a/src/scenes/bar/index.jsx b/src/scenes/bar/index.jsx
@@ -5,7 +5,7 @@ import BarChart from "../../components/BarChart";
 const Bar = () => {
   return (
     <Box m="20px">
-      <Header title="Bar Chart" subtitle="Simple Bar Chart" />
+      <Header title="Grafico de barras" subtitle="Grafico de barras simples" />
       <Box height="75vh">
         <BarChart />
       </Box>

diff --git a/src/scenes/calendar/calendar.jsx b/src/scenes/calendar/calendar.jsx
@@ -21,7 +21,7 @@ const Calendar = () => {
   const [currentEvents, setCurrentEvents] = useState([]);
 
   const handleDateClick = (selected) => {
-    const title = prompt("Please enter a new title for your event");
+    const title = prompt("Insira um novo título para o seu evento");
     const calendarApi = selected.view.calendar;
     calendarApi.unselect();
 
@@ -39,7 +39,7 @@ const Calendar = () => {
   const handleEventClick = (selected) => {
     if (
       window.confirm(
-        `Are you sure you want to delete the event '${selected.event.title}'`
+        `Tem certeza de que deseja excluir o evento '${selected.event.title}'`
       )
     ) {
       selected.event.remove();
@@ -48,7 +48,7 @@ const Calendar = () => {
 
   return (
     <Box m="20px">
-      <Header title="Calendar" subtitle="Full Calendar Interactive Page" />
+      <Header title="Calendario" subtitle="Página interativa do calendário" />
 
       <Box display="flex" justifyContent="space-between">
         {/* CALENDAR SIDEBAR */}
@@ -97,8 +97,8 @@ const Calendar = () => {
               listPlugin,
             ]}
             headerToolbar={{
-              left: "prev,next today",
-              center: "title",
+              left: "anterior, próximo hoje",
+              center: "titulo",
               right: "dayGridMonth,timeGridWeek,timeGridDay,listMonth",
             }}
             initialView="dayGridMonth"

diff --git a/src/scenes/contacts/index.jsx b/src/scenes/contacts/index.jsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Box } from "@mui/material";
 import { DataGrid, GridToolbar } from "@mui/x-data-grid";
 import { tokens } from "../../theme";
@@ -13,36 +14,36 @@ const Contacts = () => {
     { field: "id", headerName: "ID", flex: 0.5 },
     { field: "registrarId", headerName: "Registrar ID" },
     {
-      field: "name",
-      headerName: "Name",
+      field: "NOME",
+      headerName: "NOME",
       flex: 1,
       cellClassName: "name-column--cell",
     },
     {
-      field: "age",
-      headerName: "Age",
+      field: "IDADE",
+      headerName: "IDADE",
       type: "number",
       headerAlign: "left",
       align: "left",
     },
     {
-      field: "phone",
-      headerName: "Phone Number",
+      field: "TELEFONE",
+      headerName: "TELEFONE",
       flex: 1,
     },
     {
-      field: "email",
+      field: "E-MAIL",
       headerName: "Email",
       flex: 1,
     },
     {
-      field: "address",
-      headerName: "Address",
+      field: "ENDEREÇO",
+      headerName: "ENDEREÇO",
       flex: 1,
     },
     {
-      field: "city",
-      headerName: "City",
+      field: "CIDADE",
+      headerName: "CIDADE",
       flex: 1,
     },
     {
@@ -55,8 +56,8 @@ const Contacts = () => {
   return (
     <Box m="20px">
       <Header
-        title="CONTACTS"
-        subtitle="List of Contacts for Future Reference"
+        title="CONTATOS"
+        subtitle="Lista de contatos para referência"
       />
       <Box
         m="40px 0 0 0"
@@ -94,6 +95,9 @@ const Contacts = () => {
           rows={mockDataContacts}
           columns={columns}
           components={{ Toolbar: GridToolbar }}
+          disableColumnFilter
+          disableColumnSelector
+          disableDensitySelector
         />
       </Box>
     </Box>