Home Explore Help
Register Sign In
SuperAdminQA
/
psicoadmin
0
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

home page refactor

amenpunk 4 years ago
parent
20b8c9e0d9
commit
e7621c63ed
10 changed files with 193 additions and 165 deletions
Split View Show Diff Stats
  1. 1 1
      public/index.html
  2. 0 1
      src/Auth/useAuth.js
  3. 0 84
      src/Components/Candidatos.js
  4. 5 3
      src/Components/Card.js
  5. 5 67
      src/Components/Home/Actividades.js
  6. 27 0
      src/Components/Home/Candidato.jsx
  7. 81 0
      src/Components/Home/Candidatos.js
  8. 18 0
      src/Components/Home/HelpAcividades.jsx
  9. 48 0
      src/Components/Home/LastActivitys.jsx
  10. 8 9
      src/Pages/Home.jsx

+ 1 - 1
public/index.html
View File 

@@ -34,7 +34,7 @@
 
       work correctly both with client-side routing and a non-root public URL.
 
       Learn how to configure a non-root public URL by running `npm run build`.
 
     -->
 
-    <title>React App</title>
 
+    <title>Psico Admin</title>
 
   </head>
 
   <body>
 
     <noscript>You need to enable JavaScript to run this app.</noscript>

+ 0 - 1
src/Auth/useAuth.js
View File 

@@ -1,7 +1,6 @@
 
 import React from 'react'
 
 import { AuthContext } from './AuthProvider'
 
 
-
 
 export default function useAuth() {
 
     return React.useContext(AuthContext)
 
 }

+ 0 - 84
src/Components/Candidatos.js
View File 

@@ -1,84 +0,0 @@
 
-import React, { useState } from 'react';
 
-
 
-import UpdateIcon from '@mui/icons-material/Update';
 
-import Typography from '@mui/material/Typography';
 
-import Pagination from '@mui/material/Pagination';
 
-import Stack from '@mui/material/Stack';
 
-import { Row, Col } from 'react-bootstrap';
 
-
 
-export default function Candidatos () {
 
-
 
-    let users =  [{
 
-        password :'repartidorPARMA',
 
-        puesto : "Piloto Repartidor",
 
-        DPI : 1583266600501,
 
-        aplicacion : "27/12/2018 12:02 PM",
 
-        pendientes : "No"
 
-    }]
 
-
 
-    for( let _ of new Array(8)  ){
 
-        console.log(_)
 
-        users.push( users[0] )
 
-    }
 
-
 
-    const [page, setPage] = useState(1);
 
-    const handleChange = ( _ , value) => {
 
-        console.log("INDEX => ", _ ,value)
 
-        setPage(value);
 
-    };
 
-
 
-    return (
 
-        <div className="body_historial">
 
-            <div className="header_historial">
 
-                <UpdateIcon style={{  color : "white", fontSize : 25, margin : 0, marginRight: 15, marginLeft :15 }}/>
 
-                <p className="titlie_main">HISTORIAL DE ACCESO DE CANDIDATOS</p>
 
-            </div>
 
-            <div className="content_historial">
 
-                <p>Últimos candidatos que han ingresado al sistema:</p>
 
-                <div className="cabeceras">
 
-                    <Row>
 
-                        <div className="col20"> <p>Contraseña</p> </div>
 
-                        <div className="col20"> <p>Puesto</p> </div>
 
-                        <div className="col20"> <p>No. Identificación</p> </div>
 
-                        <div className="col20"> <p>Fecha de aplicación</p> </div>
 
-                        <div className="col20"> <p>Pruebas Pendientes</p> </div>
 
-                    </Row>
 
-                </div>
 
-                {
 
-                    users.length ?
 
-                    users.map( (user, index) => {
 
-                        return(
 
-                            <div key={index} className="data_candidato">
 
-                                <div className="row">
 
-                                    <div className="col20">
 
-                                        <p>{ user.password }</p>
 
-                                    </div>
 
-                                    <div className="col20">
 
-                                        <p>{ user.puesto }</p>
 
-                                    </div>
 
-                                    <div className="col20">
 
-                                        <p>{ user.DPI }</p>
 
-                                    </div>
 
-                                    <div className="col20">
 
-                                        <p>{ user.aplicacion }</p>
 
-                                    </div>
 
-                                    <div className="col20">
 
-                                        <p>{ user.pendientes }</p>
 
-                                    </div>
 
-                                </div>
 
-                            </div>
 
-                        )
 
-                    }) : undefined
 
-                }
 
-                <Row style={{ padding : 5 }}>
 
-                    <Col>
 
-                        <Stack spacing={2}>
 
-                            <Typography>Page: {page}</Typography>
 
-                            <Pagination count={10} page={page} onChange={handleChange} />
 
-                        </Stack>
 
-                    </Col>
 
-                </Row>
 
-            </div>
 
-        </div>
 
-    )
 
-}

+ 5 - 3
src/Components/Card.js
View File 

@@ -1,7 +1,9 @@
 
+import { Link } from 'react-router-dom'
 
+
 
 export function Card( props ){
 
     return(
 
         <div className="panel" >
 
-            <a href="/">
 
+            <Link to={props.to}>
 
                 <div className="panel_card">
 
                     <div>
 
                         <h1>{ props.title }</h1>
 
@@ -10,10 +12,10 @@ export function Card( props ){
 
                         <props.icon style={{ color :'#fd4b4b', fontSize : 45, margin : 5}}/>
 
                     </div>
 
                     <div className="content_info">
 
-                        <p>432</p>
 
+                        <p>{props.quantity}</p>
 
                     </div>
 
                 </div>
 
-            </a>
 
+            </Link>
 
         </div>
 
     )
 
 }

+ 5 - 67
src/Components/Actividades.js → src/Components/Home/Actividades.js
View File 

@@ -1,78 +1,16 @@
 
 import React, { useState } from 'react'
 
 import FlightTakeoffIcon from '@mui/icons-material/FlightTakeoff';
 
+import { DesktopDatePicker,LocalizationProvider } from '@mui/lab';
 
+
 
 import TextField from '@mui/material/TextField';
 
-import { Col, Row, Modal } from 'react-bootstrap';
 
+import { Col, Row } from 'react-bootstrap';
 
 
-import LocalizationProvider from '@mui/lab/LocalizationProvider';
 
 
 import DateFnsUtils from '@date-io/date-fns';
 
-import DesktopDatePicker from '@mui/lab/DesktopDatePicker';
 
-
 
-function HelpModal (props) {
 
-    let { visible, handleClose } = props
 
-    return (
 
-        <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered show={visible} onHide={handleClose}> 
-            <Modal.Header>
 
-                <button type="button" className="close" onClick={handleClose}>&times;</button>
 
-                <h4 className="modal-title">Asistencia</h4>
 
-            </Modal.Header>
 
-            <Modal.Body className="modal-body">
 
-                <div className="data_notification">
 
-                    <p>La lista muestra un historial de las actividades que se han realizado en cada módulo del sistema a nivel Administradores y Asistentes, realice búsquedas avanzadas o simplemente actualice la lista para obtener los últimos registros.</p>
 
-                </div>
 
-            </Modal.Body>
 
-        </Modal>
 
-    )
 
-}
 
-
 
-function LastActivitys() {
 
-    
 
-    let activitys = [{
 
-        password : "rcardona2510",
 
-        description : "Creó la contraseña: pilotosanti",
 
-        module : "Contraseñas",
 
-        date : "21/12/18 7:25:52",
 
-    },{
 
-        password : "rcardona2510",
 
-        description : "Creó la contraseña: pilotosanti",
 
-        module : "Contraseñas",
 
-        date : "21/12/18 8:25:52",
 
-    },{
 
-        password : "rcardona2510",
 
-        description : "Creó la contraseña: pilotosanti",
 
-        module : "Contraseñas",
 
-        date : "21/12/18 9:25:52",
 
-    } ]
 
+import { HelpModal } from './HelpAcividades.jsx'
 
+import { LastActivitys } from './LastActivitys.jsx'
 
 
-    return(
 
-        <React.Fragment>
 
-            {
 
-                activitys.map( ( activity, index ) => {
 
-                    return(
 
-                        <div key={index} className="body_history">
 
-                            <div className="row">
 
-                                <div className="col25">
 
-                                    <p>{ activity.password }</p>
 
-                                </div>
 
-                                <div className="col25">
 
-                                    <p>{ activity.description }</p>
 
-                                </div>
 
-                                <div className="col25">
 
-                                    <p>{ activity.module }</p>
 
-                                </div>
 
-                                <div className="col25">
 
-                                    <p>{ activity.date }</p>
 
-                                </div>
 
-                            </div> 
-                        </div>
 
-
 
-                    )
 
-                })
 
-            }
 
-        </React.Fragment>
 
-    )
 
-}
 
 
 export default function Actividades() {

+ 27 - 0
src/Components/Home/Candidato.jsx
View File 

@@ -0,0 +1,27 @@
 
+import React from 'react'
 
+
 
+export function Candidato (props) {
 
+    let { password,puesto,DPI, index , aplicacion,pendientes } = props.user
 
+
 
+    return(
 
+        <div className="data_candidato">
 
+            <div className="row">
 
+                <div className="col20">
 
+                    <p>{index + " - " + password }</p>
 
+                </div>
 
+                <div className="col20">
 
+                    <p>{ puesto }</p>
 
+                </div>
 
+                <div className="col20">
 
+                    <p>{ DPI }</p>
 
+                </div>
 
+                <div className="col20">
 
+                    <p>{ aplicacion }</p>
 
+                </div>
 
+                <div className="col20">
 
+                    <p>{ pendientes }</p>
 
+                </div>
 
+            </div>
 
+        </div>
 
+    )
 
+}

+ 81 - 0
src/Components/Home/Candidatos.js
View File 

@@ -0,0 +1,81 @@
 
+import React, { useState, useEffect } from 'react';
 
+
 
+import UpdateIcon from '@mui/icons-material/Update';
 
+import Typography from '@mui/material/Typography';
 
+import Pagination from '@mui/material/Pagination';
 
+import Stack from '@mui/material/Stack';
 
+import { Row, Col } from 'react-bootstrap';
 
+
 
+import { Candidato } from './Candidato'
 
+
 
+export default function Candidatos () {
 
+
 
+    let list =  [{
 
+        password :'repartidor',
 
+        puesto : "Piloto Repartidor",
 
+        DPI : 1583266600501,
 
+        aplicacion : "27/12/2018 12:02 PM",
 
+        pendientes : "No"
 
+    }]
 
+
 
+    for( let _ of new Array(8)  ){
 
+        if(_) break
 
+        list.push( list[0] )
 
+    }
 
+
 
+    const [page, setPage] = useState(1);
 
+    const [users, setUser] = useState(list);
 
+    const [curret, setCurrent] = useState([]);
 
+
 
+    const changePage = ( _ , value) => { if(_)
 
+        setPage(value);
 
+    };
 
+
 
+    useEffect(() => {
 
+        let total_users = users.length;
 
+        let max_page = 5;
 
+        let per_page = total_users / max_page;
 
+
 
+        console.log("TOTAL USERS ", users.length)
 
+        console.log("PER PAGE", per_page)
 
+    },[page])
 
+
 
+    return (
 
+        <div className="body_historial">
 
+            <div className="header_historial">
 
+                <UpdateIcon style={{  color : "white", fontSize : 25, margin : 0, marginRight: 15, marginLeft :15 }}/>
 
+                <p className="titlie_main">HISTORIAL DE ACCESO DE CANDIDATOS</p>
 
+            </div>
 
+            <div className="content_historial">
 
+                <p>Últimos candidatos que han ingresado al sistema:</p>
 
+                <div className="cabeceras">
 
+                    <Row>
 
+                        <div className="col20"><p>Contraseña</p></div>
 
+                        <div className="col20"><p>Puesto</p> </div>
 
+                        <div className="col20"><p>No. Identificación</p></div>
 
+                        <div className="col20"><p>Fecha de aplicación</p></div>
 
+                        <div className="col20"><p>Pruebas Pendientes</p></div>
 
+                    </Row>
 
+                </div>
 
+                {
 
+                    users ?
 
+                    users.map( (user, index) => (<Candidato key={user.DPI + index} user={{ ...user, index }}/>)) 
+                    : undefined
 
+                }
 
+                <Row style={{ padding : 5 }}>
 
+                    <Col>
 
+                        <Stack style={{ display : 'flex', flexDirection : 'row', alignItems: 'baseline'  }} spacing={2}>
 
+                            <Typography style={{ paddingTop : 15, paddingRight : 10 }}>Page: {page}</Typography>
 
+                            <Pagination 
+                                siblingCount={5} 
+                                shape='rounded' 
+                                count={users.length} 
+                                page={page} 
+                                onChange={changePage} />
 
+                        </Stack>
 
+                    </Col>
 
+                </Row>
 
+            </div>
 
+        </div>
 
+    )
 
+}

+ 18 - 0
src/Components/Home/HelpAcividades.jsx
View File 

@@ -0,0 +1,18 @@
 
+import { Modal } from 'react-bootstrap'
 
+
 
+export function HelpModal (props) {
 
+    let { visible, handleClose } = props
 
+    return (
 
+        <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered show={visible} onHide={handleClose}> 
+            <Modal.Header>
 
+                <button type="button" className="close" onClick={handleClose}>&times;</button>
 
+                <h4 className="modal-title">Asistencia</h4>
 
+            </Modal.Header>
 
+            <Modal.Body className="modal-body">
 
+                <div className="data_notification">
 
+                    <p>La lista muestra un historial de las actividades que se han realizado en cada módulo del sistema a nivel Administradores y Asistentes, realice búsquedas avanzadas o simplemente actualice la lista para obtener los últimos registros.</p>
 
+                </div>
 
+            </Modal.Body>
 
+        </Modal>
 
+    )
 
+}

+ 48 - 0
src/Components/Home/LastActivitys.jsx
View File 

@@ -0,0 +1,48 @@
 
+import React from 'react'
 
+export function LastActivitys() {
 
+
 
+    let activitys = [{
 
+        password : "rcardona",
 
+        description : "Creó la contraseña: pilotosanti",
 
+        module : "Contraseñas",
 
+        date : "21/12/18 7:25:52",
 
+    },{
 
+        password : "ming",
 
+        description : "Creó la contraseña: pilotosanti",
 
+        module : "Contraseñas",
 
+        date : "21/12/18 8:25:52",
 
+    },{
 
+        password : "test",
 
+        description : "Creó la contraseña: pilotosanti",
 
+        module : "Contraseñas",
 
+        date : "21/12/18 9:25:52",
 
+    } ]
 
+
 
+    return(
 
+        <React.Fragment>
 
+            {
 
+                activitys.map( ( activity, index ) => {
 
+                    return(
 
+                        <div key={index} className="body_history">
 
+                            <div className="row">
 
+                                <div className="col25">
 
+                                    <p>{ activity.password }</p>
 
+                                </div>
 
+                                <div className="col25">
 
+                                    <p>{ activity.description }</p>
 
+                                </div>
 
+                                <div className="col25">
 
+                                    <p>{ activity.module }</p>
 
+                                </div>
 
+                                <div className="col25">
 
+                                    <p>{ activity.date }</p>
 
+                                </div>
 
+                            </div> 
+                        </div>
 
+
 
+                    )
 
+                })
 
+            }
 
+        </React.Fragment>
 
+    )
 
+}

+ 8 - 9
src/Pages/Home.jsx
View File 

@@ -1,12 +1,11 @@
 
-import { Card } from '../Components/Card';
 
 import { Col, Row } from 'react-bootstrap'
 
 import React from 'react'
 
 
-import PersonOutlineIcon from '@mui/icons-material/PersonOutline';
 
-import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
 
-import ListAltIcon from '@mui/icons-material/ListAlt';
 
-import Actividades from '../Components/Actividades'
 
-import Candidatos from '../Components/Candidatos'
 
+import { PersonOutline, VerifiedUser, ListAlt  } from '@mui/icons-material/'
 
+
 
+import Actividades from '../Components/Home/Actividades'
 
+import Candidatos from '../Components/Home/Candidatos'
 
+import { Card } from '../Components/Card';
 
 
 export function Home() {
 
     return (
 
@@ -17,13 +16,13 @@ export function Home() {
 
                     <div className="panel_options">
 
                         <Row>
 
                             <Col md="4">
 
-                                <Card title='CONTRASEÑAS' icon={VerifiedUserIcon}/>
 
+                                <Card quantity={120} to='/dashboard/contrasenas'  title='CONTRASEÑAS' icon={VerifiedUser}/>
 
                             </Col>
 
                             <Col md="4">
 
-                                <Card title='EXPEDIENTES' icon={PersonOutlineIcon}/>
 
+                                <Card quantity={504} to='/dashboard/expedientes' title='EXPEDIENTES' icon={PersonOutline}/>
 
                             </Col>
 
                             <Col md="4">
 
-                                <Card title='PUESTOS' icon={ListAltIcon}/>
 
+                                <Card quantity={343} to="/dashboard/puestos" title='PUESTOS' icon={ListAlt}/>
 
                             </Col>
 
                         </Row>
 
                     </div>