Home Explore Help
Register Sign In
SuperAdminQA
/
psicoadmin
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Commits 372 Releases 0 Wiki
Browse Source

home page refactor

amenpunk 3 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/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 @@
34 34 
       work correctly both with client-side routing and a non-root public URL.
35 35 
       Learn how to configure a non-root public URL by running `npm run build`.
36 36 
     -->
37 
-    <title>React App</title>
37 
+    <title>Psico Admin</title>
38 38 
   </head>
39 39 
   <body>
40 40 
     <noscript>You need to enable JavaScript to run this app.</noscript>

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

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

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

@@ -1,84 +0,0 @@
1 
-import React, { useState } from 'react';
2 
-
3 
-import UpdateIcon from '@mui/icons-material/Update';
4 
-import Typography from '@mui/material/Typography';
5 
-import Pagination from '@mui/material/Pagination';
6 
-import Stack from '@mui/material/Stack';
7 
-import { Row, Col } from 'react-bootstrap';
8 
-
9 
-export default function Candidatos () {
10 
-
11 
-    let users =  [{
12 
-        password :'repartidorPARMA',
13 
-        puesto : "Piloto Repartidor",
14 
-        DPI : 1583266600501,
15 
-        aplicacion : "27/12/2018 12:02 PM",
16 
-        pendientes : "No"
17 
-    }]
18 
-
19 
-    for( let _ of new Array(8)  ){
20 
-        console.log(_)
21 
-        users.push( users[0] )
22 
-    }
23 
-
24 
-    const [page, setPage] = useState(1);
25 
-    const handleChange = ( _ , value) => {
26 
-        console.log("INDEX => ", _ ,value)
27 
-        setPage(value);
28 
-    };
29 
-
30 
-    return (
31 
-        <div className="body_historial">
32 
-            <div className="header_historial">
33 
-                <UpdateIcon style={{  color : "white", fontSize : 25, margin : 0, marginRight: 15, marginLeft :15 }}/>
34 
-                <p className="titlie_main">HISTORIAL DE ACCESO DE CANDIDATOS</p>
35 
-            </div>
36 
-            <div className="content_historial">
37 
-                <p>Últimos candidatos que han ingresado al sistema:</p>
38 
-                <div className="cabeceras">
39 
-                    <Row>
40 
-                        <div className="col20"> <p>Contraseña</p> </div>
41 
-                        <div className="col20"> <p>Puesto</p> </div>
42 
-                        <div className="col20"> <p>No. Identificación</p> </div>
43 
-                        <div className="col20"> <p>Fecha de aplicación</p> </div>
44 
-                        <div className="col20"> <p>Pruebas Pendientes</p> </div>
45 
-                    </Row>
46 
-                </div>
47 
-                {
48 
-                    users.length ?
49 
-                    users.map( (user, index) => {
50 
-                        return(
51 
-                            <div key={index} className="data_candidato">
52 
-                                <div className="row">
53 
-                                    <div className="col20">
54 
-                                        <p>{ user.password }</p>
55 
-                                    </div>
56 
-                                    <div className="col20">
57 
-                                        <p>{ user.puesto }</p>
58 
-                                    </div>
59 
-                                    <div className="col20">
60 
-                                        <p>{ user.DPI }</p>
61 
-                                    </div>
62 
-                                    <div className="col20">
63 
-                                        <p>{ user.aplicacion }</p>
64 
-                                    </div>
65 
-                                    <div className="col20">
66 
-                                        <p>{ user.pendientes }</p>
67 
-                                    </div>
68 
-                                </div>
69 
-                            </div>
70 
-                        )
71 
-                    }) : undefined
72 
-                }
73 
-                <Row style={{ padding : 5 }}>
74 
-                    <Col>
75 
-                        <Stack spacing={2}>
76 
-                            <Typography>Page: {page}</Typography>
77 
-                            <Pagination count={10} page={page} onChange={handleChange} />
78 
-                        </Stack>
79 
-                    </Col>
80 
-                </Row>
81 
-            </div>
82 
-        </div>
83 
-    )
84 
-}

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

@@ -1,7 +1,9 @@
1 
+import { Link } from 'react-router-dom'
2 
+
1 3 
 export function Card( props ){
2 4 
     return(
3 5 
         <div className="panel" >
4 
-            <a href="/">
6 
+            <Link to={props.to}>
5 7 
                 <div className="panel_card">
6 8 
                     <div>
7 9 
                         <h1>{ props.title }</h1>
 
@@ -10,10 +12,10 @@ export function Card( props ){
10 12 
                         <props.icon style={{ color :'#fd4b4b', fontSize : 45, margin : 5}}/>
11 13 
                     </div>
12 14 
                     <div className="content_info">
13 
-                        <p>432</p>
15 
+                        <p>{props.quantity}</p>
14 16 
                     </div>
15 17 
                 </div>
16 
-            </a>
18 
+            </Link>
17 19 
         </div>
18 20 
     )
19 21 
 }

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

@@ -1,78 +1,16 @@
1 1 
 import React, { useState } from 'react'
2 2 
 import FlightTakeoffIcon from '@mui/icons-material/FlightTakeoff';
3 
+import { DesktopDatePicker,LocalizationProvider } from '@mui/lab';
4 
+
3 5 
 import TextField from '@mui/material/TextField';
4 
-import { Col, Row, Modal } from 'react-bootstrap';
6 
+import { Col, Row } from 'react-bootstrap';
5 7
6 
-import LocalizationProvider from '@mui/lab/LocalizationProvider';
7 8
8 9 
 import DateFnsUtils from '@date-io/date-fns';
9 
-import DesktopDatePicker from '@mui/lab/DesktopDatePicker';
10 
-
11 
-function HelpModal (props) {
12 
-    let { visible, handleClose } = props
13 
-    return (
14 
-        <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered show={visible} onHide={handleClose}>
15 
-            <Modal.Header>
16 
-                <button type="button" className="close" onClick={handleClose}>&times;</button>
17 
-                <h4 className="modal-title">Asistencia</h4>
18 
-            </Modal.Header>
19 
-            <Modal.Body className="modal-body">
20 
-                <div className="data_notification">
21 
-                    <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>
22 
-                </div>
23 
-            </Modal.Body>
24 
-        </Modal>
25 
-    )
26 
-}
27 
-
28 
-function LastActivitys() {
29 
-
30 10
31 
-    let activitys = [{
32 
-        password : "rcardona2510",
33 
-        description : "Creó la contraseña: pilotosanti",
34 
-        module : "Contraseñas",
35 
-        date : "21/12/18 7:25:52",
36 
-    },{
37 
-        password : "rcardona2510",
38 
-        description : "Creó la contraseña: pilotosanti",
39 
-        module : "Contraseñas",
40 
-        date : "21/12/18 8:25:52",
41 
-    },{
42 
-        password : "rcardona2510",
43 
-        description : "Creó la contraseña: pilotosanti",
44 
-        module : "Contraseñas",
45 
-        date : "21/12/18 9:25:52",
46 
-    } ]
11 
+import { HelpModal } from './HelpAcividades.jsx'
12 
+import { LastActivitys } from './LastActivitys.jsx'
47 13
48 
-    return(
49 
-        <React.Fragment>
50 
-            {
51 
-                activitys.map( ( activity, index ) => {
52 
-                    return(
53 
-                        <div key={index} className="body_history">
54 
-                            <div className="row">
55 
-                                <div className="col25">
56 
-                                    <p>{ activity.password }</p>
57 
-                                </div>
58 
-                                <div className="col25">
59 
-                                    <p>{ activity.description }</p>
60 
-                                </div>
61 
-                                <div className="col25">
62 
-                                    <p>{ activity.module }</p>
63 
-                                </div>
64 
-                                <div className="col25">
65 
-                                    <p>{ activity.date }</p>
66 
-                                </div>
67 
-                            </div>
68 
-                        </div>
69 
-
70 
-                    )
71 
-                })
72 
-            }
73 
-        </React.Fragment>
74 
-    )
75 
-}
76 14
77 15 
 export default function Actividades() {
78 16

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

@@ -0,0 +1,27 @@
1 
+import React from 'react'
2 
+
3 
+export function Candidato (props) {
4 
+    let { password,puesto,DPI, index , aplicacion,pendientes } = props.user
5 
+
6 
+    return(
7 
+        <div className="data_candidato">
8 
+            <div className="row">
9 
+                <div className="col20">
10 
+                    <p>{index + " - " + password }</p>
11 
+                </div>
12 
+                <div className="col20">
13 
+                    <p>{ puesto }</p>
14 
+                </div>
15 
+                <div className="col20">
16 
+                    <p>{ DPI }</p>
17 
+                </div>
18 
+                <div className="col20">
19 
+                    <p>{ aplicacion }</p>
20 
+                </div>
21 
+                <div className="col20">
22 
+                    <p>{ pendientes }</p>
23 
+                </div>
24 
+            </div>
25 
+        </div>
26 
+    )
27 
+}

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

@@ -0,0 +1,81 @@
1 
+import React, { useState, useEffect } from 'react';
2 
+
3 
+import UpdateIcon from '@mui/icons-material/Update';
4 
+import Typography from '@mui/material/Typography';
5 
+import Pagination from '@mui/material/Pagination';
6 
+import Stack from '@mui/material/Stack';
7 
+import { Row, Col } from 'react-bootstrap';
8 
+
9 
+import { Candidato } from './Candidato'
10 
+
11 
+export default function Candidatos () {
12 
+
13 
+    let list =  [{
14 
+        password :'repartidor',
15 
+        puesto : "Piloto Repartidor",
16 
+        DPI : 1583266600501,
17 
+        aplicacion : "27/12/2018 12:02 PM",
18 
+        pendientes : "No"
19 
+    }]
20 
+
21 
+    for( let _ of new Array(8)  ){
22 
+        if(_) break
23 
+        list.push( list[0] )
24 
+    }
25 
+
26 
+    const [page, setPage] = useState(1);
27 
+    const [users, setUser] = useState(list);
28 
+    const [curret, setCurrent] = useState([]);
29 
+
30 
+    const changePage = ( _ , value) => { if(_)
31 
+        setPage(value);
32 
+    };
33 
+
34 
+    useEffect(() => {
35 
+        let total_users = users.length;
36 
+        let max_page = 5;
37 
+        let per_page = total_users / max_page;
38 
+
39 
+        console.log("TOTAL USERS ", users.length)
40 
+        console.log("PER PAGE", per_page)
41 
+    },[page])
42 
+
43 
+    return (
44 
+        <div className="body_historial">
45 
+            <div className="header_historial">
46 
+                <UpdateIcon style={{  color : "white", fontSize : 25, margin : 0, marginRight: 15, marginLeft :15 }}/>
47 
+                <p className="titlie_main">HISTORIAL DE ACCESO DE CANDIDATOS</p>
48 
+            </div>
49 
+            <div className="content_historial">
50 
+                <p>Últimos candidatos que han ingresado al sistema:</p>
51 
+                <div className="cabeceras">
52 
+                    <Row>
53 
+                        <div className="col20"><p>Contraseña</p></div>
54 
+                        <div className="col20"><p>Puesto</p> </div>
55 
+                        <div className="col20"><p>No. Identificación</p></div>
56 
+                        <div className="col20"><p>Fecha de aplicación</p></div>
57 
+                        <div className="col20"><p>Pruebas Pendientes</p></div>
58 
+                    </Row>
59 
+                </div>
60 
+                {
61 
+                    users ?
62 
+                    users.map( (user, index) => (<Candidato key={user.DPI + index} user={{ ...user, index }}/>))
63 
+                    : undefined
64 
+                }
65 
+                <Row style={{ padding : 5 }}>
66 
+                    <Col>
67 
+                        <Stack style={{ display : 'flex', flexDirection : 'row', alignItems: 'baseline'  }} spacing={2}>
68 
+                            <Typography style={{ paddingTop : 15, paddingRight : 10 }}>Page: {page}</Typography>
69 
+                            <Pagination
70 
+                                siblingCount={5}
71 
+                                shape='rounded'
72 
+                                count={users.length}
73 
+                                page={page}
74 
+                                onChange={changePage} />
75 
+                        </Stack>
76 
+                    </Col>
77 
+                </Row>
78 
+            </div>
79 
+        </div>
80 
+    )
81 
+}

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

@@ -0,0 +1,18 @@
1 
+import { Modal } from 'react-bootstrap'
2 
+
3 
+export function HelpModal (props) {
4 
+    let { visible, handleClose } = props
5 
+    return (
6 
+        <Modal size="lg" aria-labelledby="contained-modal-title-vcenter" centered show={visible} onHide={handleClose}>
7 
+            <Modal.Header>
8 
+                <button type="button" className="close" onClick={handleClose}>&times;</button>
9 
+                <h4 className="modal-title">Asistencia</h4>
10 
+            </Modal.Header>
11 
+            <Modal.Body className="modal-body">
12 
+                <div className="data_notification">
13 
+                    <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>
14 
+                </div>
15 
+            </Modal.Body>
16 
+        </Modal>
17 
+    )
18 
+}

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

@@ -0,0 +1,48 @@
1 
+import React from 'react'
2 
+export function LastActivitys() {
3 
+
4 
+    let activitys = [{
5 
+        password : "rcardona",
6 
+        description : "Creó la contraseña: pilotosanti",
7 
+        module : "Contraseñas",
8 
+        date : "21/12/18 7:25:52",
9 
+    },{
10 
+        password : "ming",
11 
+        description : "Creó la contraseña: pilotosanti",
12 
+        module : "Contraseñas",
13 
+        date : "21/12/18 8:25:52",
14 
+    },{
15 
+        password : "test",
16 
+        description : "Creó la contraseña: pilotosanti",
17 
+        module : "Contraseñas",
18 
+        date : "21/12/18 9:25:52",
19 
+    } ]
20 
+
21 
+    return(
22 
+        <React.Fragment>
23 
+            {
24 
+                activitys.map( ( activity, index ) => {
25 
+                    return(
26 
+                        <div key={index} className="body_history">
27 
+                            <div className="row">
28 
+                                <div className="col25">
29 
+                                    <p>{ activity.password }</p>
30 
+                                </div>
31 
+                                <div className="col25">
32 
+                                    <p>{ activity.description }</p>
33 
+                                </div>
34 
+                                <div className="col25">
35 
+                                    <p>{ activity.module }</p>
36 
+                                </div>
37 
+                                <div className="col25">
38 
+                                    <p>{ activity.date }</p>
39 
+                                </div>
40 
+                            </div>
41 
+                        </div>
42 
+
43 
+                    )
44 
+                })
45 
+            }
46 
+        </React.Fragment>
47 
+    )
48 
+}

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

@@ -1,12 +1,11 @@
1 
-import { Card } from '../Components/Card';
2 1 
 import { Col, Row } from 'react-bootstrap'
3 2 
 import React from 'react'
4 3
5 
-import PersonOutlineIcon from '@mui/icons-material/PersonOutline';
6 
-import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
7 
-import ListAltIcon from '@mui/icons-material/ListAlt';
8 
-import Actividades from '../Components/Actividades'
9 
-import Candidatos from '../Components/Candidatos'
4 
+import { PersonOutline, VerifiedUser, ListAlt  } from '@mui/icons-material/'
5 
+
6 
+import Actividades from '../Components/Home/Actividades'
7 
+import Candidatos from '../Components/Home/Candidatos'
8 
+import { Card } from '../Components/Card';
10 9
11 10 
 export function Home() {
12 11 
     return (
 
@@ -17,13 +16,13 @@ export function Home() {
17 16 
                     <div className="panel_options">
18 17 
                         <Row>
19 18 
                             <Col md="4">
20 
-                                <Card title='CONTRASEÑAS' icon={VerifiedUserIcon}/>
19 
+                                <Card quantity={120} to='/dashboard/contrasenas'  title='CONTRASEÑAS' icon={VerifiedUser}/>
21 20 
                             </Col>
22 21 
                             <Col md="4">
23 
-                                <Card title='EXPEDIENTES' icon={PersonOutlineIcon}/>
22 
+                                <Card quantity={504} to='/dashboard/expedientes' title='EXPEDIENTES' icon={PersonOutline}/>
24 23 
                             </Col>
25 24 
                             <Col md="4">
26 
-                                <Card title='PUESTOS' icon={ListAltIcon}/>
25 
+                                <Card quantity={343} to="/dashboard/puestos" title='PUESTOS' icon={ListAlt}/>
27 26 
                             </Col>
28 27 
                         </Row>
29 28 
                     </div>