admin-template ready

NikoHuerta · Feb 17, 2022 · 52c94d3 · 52c94d3
1 parent 866dccb
commit 52c94d3
Show file tree

Hide file tree

Showing 20 changed files with 1,047 additions and 57 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,12 +18,12 @@
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.2.1",
     "react-scripts": "5.0.0",
-    "react-sidemenu": "^1.1.0",
     "react-social-login-buttons": "^3.6.0",
     "react-thunk": "^1.0.0",
     "redux-thunk": "^2.4.1",
     "sweetalert2": "^11.3.6",
     "validator": "^13.7.0",
+    "victory": "^36.3.0",
     "web-vitals": "^2.1.3"
   },
   "scripts": {

diff --git a/src/actions/adminNav.js b/src/actions/adminNav.js
@@ -0,0 +1,6 @@
+import { types } from "../types/types";
+
+export const setNavigation = ( page ) => ({
+    type: types.adminNavigation,
+    payload: page
+});
diff --git a/src/components/admin/AdminScreen.js b/src/components/admin/AdminScreen.js
@@ -1,21 +1,22 @@
-import React, { useState } from 'react';
+import React from 'react';
 import { useSelector } from 'react-redux';
 import { Navigate } from 'react-router-dom';
 import Swal from 'sweetalert2';
-import SideMenu, { Item } from 'react-sidemenu';
 
 import { Navbar } from '../ui/Navbar';
+import { Sidebar } from '../ui/Sidebar';
+import { CustomersScreen } from './CustomersScreen';
+import { DashboardScreen } from './DashboardScreen';
+import { HomeScreen } from './HomeScreen';
+import { IntegrationsScreen } from './IntegrationsScreen';
+import { OrdersScreen } from './OrdersScreen';
+import { ProductsScreen } from './ProductsScreen';
+import { ReportsScreen } from './ReportsScreen';
 
 export const AdminScreen = () => {
 
     const { rol } = useSelector(store => store.auth);
-    const [selection, setSelection] = useState('users');
-
-
-    const handleClick = (selected) => {
-        setSelection(selected);
-        // console.log('clicked -->', selected);
-    }
+    const { page } = useSelector(store => store.admin);
 
     if(rol!=='ADMIN_ROLE'){
         Swal.fire('Error', 'No autorizado', 'error');
@@ -25,21 +26,27 @@ export const AdminScreen = () => {
 
     return (<div>
                 <Navbar />
-                <SideMenu onMenuItemClick={(value) => handleClick(value)}>
-                    <Item label="Data" icon="fa-database">
-                        <Item label="Users" icon="fa-users" value='users' ></Item>
-                        <Item label="Events" icon="fa-calendar-alt" value='events' ></Item>
-                    </Item>
-                </SideMenu>
-
-                { (selection ==='users') ? 
-                        <span>Here go the users</span> 
-                : (selection ==='events') ? 
-                    <span> Here go the events</span> 
-                : <span>None selected</span>
-                }
-
 
+                <div className='container-fluid vh-100'>
+                    <div className='row'>
+                        <Sidebar />
+                            {
+                                (page ==='dashboard') ?
+                                    <DashboardScreen />
+                                : (page ==='orders') ?
+                                    <OrdersScreen />
+                                : (page ==='products') ?  
+                                    <ProductsScreen />
+                                : (page ==='customers') ? 
+                                    <CustomersScreen />
+                                : (page ==='reports') ?  
+                                    <ReportsScreen />
+                                : (page ==='integrations') ?
+                                    <IntegrationsScreen />
+                                :  <HomeScreen />
+                            }
+                    </div>
+                </div>
             </div>);
     }
 };
diff --git a/src/components/admin/CustomersScreen.js b/src/components/admin/CustomersScreen.js
@@ -0,0 +1,64 @@
+import React from 'react'
+
+export const CustomersScreen = () => {
+  return (
+    <div className='col-md-10'>
+      <div className='container-fluid mt-5'>
+          <h2 className='display-5 text-center'>Customers</h2>
+          <hr />
+
+          <div class="table-responsive">
+            <table className='table table-hover align-middle'>
+              <thead>
+                <tr className='table-dark'>
+                  <th scope="col">#</th>
+                  <th scope="col">Nombre Completo</th>
+                  <th scope="col">N° Pedidos</th>
+                  <th scope="col">Ciudad</th>
+                  <th scope="col">Origen</th>
+                  <th scope="col">Contacto</th>
+                </tr>
+              </thead>
+              <tbody className='table-secondary'>
+                <tr>
+                  <th scope="row">1</th>
+                  <td>Nicolas Huerta Fuentes</td>
+                  <td>3</td>
+                  <td>Santiago</td>
+                  <td>Sitio</td>
+                  <td>[email protected]</td>
+                </tr>
+                <tr>
+                  <th scope="row">2</th>
+                  <td>Nathalie Aranda Allende</td>
+                  <td>5</td>
+                  <td>Santiago</td>
+                  <td>Google</td>
+                  <td>[email protected]</td>
+                </tr>
+                <tr>
+                  <th scope="row">3</th>
+                  <td>Amparo Huerta Aranda</td>
+                  <td>10</td>
+                  <td>Santiago</td>
+                  <td>Facebook</td>
+                  <td>[email protected]</td>
+                </tr>
+              </tbody>
+              <tfoot>
+                <tr className='table-dark'>
+                  <th scope="col">#</th>
+                  <th scope="col">Nombre Completo</th>
+                  <th scope="col">N° Pedidos</th>
+                  <th scope="col">Ciudad</th>
+                  <th scope="col">Origen</th>
+                  <th scope="col">Contacto</th>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/admin/DashboardScreen.js b/src/components/admin/DashboardScreen.js
@@ -0,0 +1,50 @@
+import React from 'react';
+import { VictoryBar, VictoryChart, VictoryAxis } from 'victory';
+
+export const DashboardScreen = () => {
+
+  const data = [
+    {quarter: 1, earnings: 13000},
+    {quarter: 2, earnings: 16500},
+    {quarter: 3, earnings: 14250},
+    {quarter: 4, earnings: 19000}
+  ];
+
+  return (
+    <div className='col-md-10'>
+      <div className='container-fluid mt-5'>
+          <h2 className='display-5 text-center'>Dashboard</h2>
+          <hr />
+
+          <VictoryChart 
+            domainPadding={20}
+            // theme={VictoryTheme.material}
+            height={ 300 }
+            width={ 300 }
+          >
+            <VictoryAxis
+              // tickValues specifies both the number of ticks and where
+              // they are placed on the axis
+              tickValues={[1, 2, 3, 4]}
+              tickFormat={["Quarter 1", "Quarter 2", "Quarter 3", "Quarter 4"]}
+            />
+            <VictoryAxis
+            dependentAxis
+            // tickFormat specifies how ticks should be displayed
+            tickFormat={(x) => (`$${x / 1000}k`)}
+            />
+
+            <VictoryBar
+              data={data}
+              // data accessor for x values
+              x="quarter"
+              // data accessor for y values
+              y="earnings"
+            />
+          </VictoryChart>
+
+
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/admin/HomeScreen.js b/src/components/admin/HomeScreen.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import './assets/styles.css';
+
+export const HomeScreen = () => {
+  return (
+    <div className='col-md-10 bg-img-admin-home'>
+      <div className='container-fluid mt-5'>  
+        <h2 className='display-5 text-center'>Bienvenido a Admin Zone</h2>
+        <hr />
+
+
+
+      </div>
+    </div>
+
+
+
+  )
+}
diff --git a/src/components/admin/IntegrationsScreen.js b/src/components/admin/IntegrationsScreen.js
@@ -0,0 +1,102 @@
+import React from 'react'
+
+export const IntegrationsScreen = () => {
+  return (
+    <div className='col-md-10'>
+      <div className='container-fluid mt-5'>
+          <h2 className='display-5 text-center'>Integrations</h2>
+          <hr />
+        <div className='row'>
+
+          <div className='col-12 col-md-4 mb-2'>
+            <div class="card text-center">
+              <div class="card-header h5">Login</div>
+              <ul class="list-group list-group-flush">
+                  <li class="list-group-item">
+                      <i className='bi bi-google me-5'></i>
+                      <i className='bi bi-check-circle-fill text-success'></i>
+                  </li>
+                  <li class="list-group-item">
+                      <i className='bi bi-facebook me-5'></i>
+                      <i className='bi bi-check-circle-fill text-success'></i>
+                  </li>
+                  <li class="list-group-item">
+                      <i className='bi bi-twitter me-5'></i>
+                      <i className='bi bi-x-circle-fill text-danger'></i>
+                  </li>
+                  <li class="list-group-item">
+                      <i className='bi bi-apple me-5'></i>
+                      <i className='bi bi-x-circle-fill text-danger'></i>
+                  </li>
+                  <li class="list-group-item">
+                      <i className='bi bi-github me-5'></i>
+                      <i className='bi bi-x-circle-fill text-danger'></i>
+                  </li>
+              </ul>
+              <div class="card-footer text-muted">30 seconds ago</div>
+            </div>
+          </div>
+
+          <div className='col-12 col-md-4 mb-2'>
+            <div class="card text-center">
+              <div class="card-header h5">Another Info 1</div>
+              <ul class="list-group list-group-flush">
+                  <li class="list-group-item">
+                      <i className='bi bi-google me-5'></i>
+                      <i className='bi bi-check-circle-fill text-success'></i>
+                  </li>
+                  <li class="list-group-item">
+                      <i className='bi bi-facebook me-5'></i>
+                      <i className='bi bi-check-circle-fill text-success'></i>
+                  </li>
+                  <li class="list-group-item">
+                      <i className='bi bi-twitter me-5'></i>
+                      <i className='bi bi-x-circle-fill text-danger'></i>
+                  </li>
+                  <li class="list-group-item">
+                      <i className='bi bi-apple me-5'></i>
+                      <i className='bi bi-x-circle-fill text-danger'></i>
+                  </li>
+                  <li class="list-group-item">
+                      <i className='bi bi-github me-5'></i>
+                      <i className='bi bi-x-circle-fill text-danger'></i>
+                  </li>
+              </ul>
+              <div class="card-footer text-muted">45 seconds ago</div>
+            </div>
+          </div>
+
+          <div className='col-12 col-md-4 mb-2'>
+            <div class="card text-center">
+              <div class="card-header h5">Another Info 2</div>
+              <ul class="list-group list-group-flush">
+                  <li class="list-group-item">
+                      <i className='bi bi-google me-5'></i>
+                      <i className='bi bi-check-circle-fill text-success'></i>
+                  </li>
+                  <li class="list-group-item">
+                      <i className='bi bi-facebook me-5'></i>
+                      <i className='bi bi-check-circle-fill text-success'></i>
+                  </li>
+                  <li class="list-group-item">
+                      <i className='bi bi-twitter me-5'></i>
+                      <i className='bi bi-x-circle-fill text-danger'></i>
+                  </li>
+                  <li class="list-group-item">
+                      <i className='bi bi-apple me-5'></i>
+                      <i className='bi bi-x-circle-fill text-danger'></i>
+                  </li>
+                  <li class="list-group-item">
+                      <i className='bi bi-github me-5'></i>
+                      <i className='bi bi-x-circle-fill text-danger'></i>
+                  </li>
+              </ul>
+              <div class="card-footer text-muted">1 minute ago</div>
+            </div>
+          </div>
+
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/admin/OrdersScreen.js b/src/components/admin/OrdersScreen.js
@@ -0,0 +1,53 @@
+import React from 'react'
+
+export const OrdersScreen = () => {
+  return (
+    <div className='col-md-10'>  
+      <div className='container-fluid mt-5'>
+          <h2 className='display-5 text-center'>Orders</h2>
+          <hr />
+          <div class="table-responsive">
+            <table className='table table-hover align-middle'>
+              <thead>
+                <tr className='table-dark'>
+                  <th scope="col">#</th>
+                  <th scope="col">Productos</th>
+                  <th scope="col">Cliente</th>
+                  <th scope="col">Origen</th>
+                </tr>
+              </thead>
+              <tbody className='table-secondary'>
+                <tr>
+                  <th scope="row">1</th>
+                  <td className='text-decoration-underline text-primary'>See this order!</td>
+                  <td>Mark</td>
+                  <td>@mdo</td>
+                </tr>
+                <tr>
+                  <th scope="row">2</th>
+                  <td className='text-decoration-underline text-primary'>See this order!</td>
+                  <td>Jacob</td>
+                  <td>@fat</td>
+                </tr>
+                <tr>
+                  <th scope="row">3</th>
+                  <td className='text-decoration-underline text-primary'>See this order!</td>
+                  <td>Larry</td>
+                  <td>@twitter</td>
+                </tr>
+              </tbody>
+              <tfoot>
+                <tr className='table-dark'>
+                  <th scope="col">#</th>
+                  <th scope="col">Productos</th>
+                  <th scope="col">Cliente</th>
+                  <th scope="col">Origen</th>
+                </tr>
+              </tfoot>
+            </table>
+          </div>
+
+      </div>
+    </div>
+  )
+}