Browse Source

[add] footer

amenpunk 3 years ago
parent
commit
a8c9ac6277

+ 9 - 0
psicoadmin/src/Components/Actividades.js

1
 import * as React from 'react'
1
 import * as React from 'react'
2
 import FlightTakeoffIcon from '@mui/icons-material/FlightTakeoff';
2
 import FlightTakeoffIcon from '@mui/icons-material/FlightTakeoff';
3
+import TimePicker from '@mui/lab/TimePicker';
3
 import { Col, Row } from 'react-bootstrap';
4
 import { Col, Row } from 'react-bootstrap';
4
 
5
 
5
 function LastActivitys() {
6
 function LastActivitys() {
21
         date : "21/12/18 9:25:52",
22
         date : "21/12/18 9:25:52",
22
     } ]
23
     } ]
23
 
24
 
25
+    const [value, setValue] = React.useState(new Date());
26
+    const handleChange = (newValue) => {
27
+        setValue(newValue);
28
+    };
29
+
30
+
24
     return(
31
     return(
25
         <React.Fragment>
32
         <React.Fragment>
26
             {
33
             {
90
                             </Col>
97
                             </Col>
91
                             <Col md="4">
98
                             <Col md="4">
92
                                 <label>Fecha Inicio</label>
99
                                 <label>Fecha Inicio</label>
100
+                                  <TimePicker label="Time" value={value} onChange={handleChange} renderInput={(params) => <TextField {...params} />} />
101
+
93
                                 <input id="custom-input-date" className="calendar" type="text" name="upload-release" placeholder="dd/mm/yyyy"/>
102
                                 <input id="custom-input-date" className="calendar" type="text" name="upload-release" placeholder="dd/mm/yyyy"/>
94
                             </Col>
103
                             </Col>
95
                             <Col md="4">
104
                             <Col md="4">

+ 29 - 20
psicoadmin/src/Components/Candidatos.js

1
+import React, { useState } from 'react';
2
+import { Row, Col } from 'react-bootstrap';
3
+
1
 import UpdateIcon from '@mui/icons-material/Update';
4
 import UpdateIcon from '@mui/icons-material/Update';
2
-import { Table } from 'react-bootstrap'
5
+import Typography from '@mui/material/Typography';
6
+import Pagination from '@mui/material/Pagination';
7
+import Stack from '@mui/material/Stack';
3
 
8
 
4
 export default function Candidatos () {
9
 export default function Candidatos () {
5
 
10
 
18
         }
23
         }
19
     ]
24
     ]
20
 
25
 
26
+    const [page, setPage] = React.useState(1);
27
+    const handleChange = (event, value) => {
28
+        console.log("INDEX => ", value)
29
+        setPage(value);
30
+    };
31
+
21
     return (
32
     return (
22
         <div className="body_historial">
33
         <div className="body_historial">
23
             <div className="header_historial">
34
             <div className="header_historial">
27
             <div className="content_historial">
38
             <div className="content_historial">
28
                 <p>Últimos candidatos que han ingresado al sistema:</p>
39
                 <p>Últimos candidatos que han ingresado al sistema:</p>
29
                 <div className="cabeceras">
40
                 <div className="cabeceras">
30
-                    <div className="row">
31
-                        <div className="col20">
32
-                            <p>Contraseña</p>
33
-                        </div>
34
-                        <div className="col20">
35
-                            <p>Puesto</p>
36
-                        </div>
37
-                        <div className="col20">
38
-                            <p>No. Identificación</p>
39
-                        </div>
40
-                        <div className="col20">
41
-                            <p>Fecha de aplicación</p>
42
-                        </div>
43
-                        <div className="col20">
44
-                            <p>Pruebas Pendientes</p>
45
-                        </div>
46
-                    </div>
41
+                    <Row>
42
+                        <div className="col20"> <p>Contraseña</p> </div>
43
+                        <div className="col20"> <p>Puesto</p> </div>
44
+                        <div className="col20"> <p>No. Identificación</p> </div>
45
+                        <div className="col20"> <p>Fecha de aplicación</p> </div>
46
+                        <div className="col20"> <p>Pruebas Pendientes</p> </div>
47
+                    </Row>
47
                 </div>
48
                 </div>
48
-
49
                 {
49
                 {
50
+                    users.length ? 
50
                     users.map( (user, index) => {
51
                     users.map( (user, index) => {
51
                         return(
52
                         return(
52
                             <div key={index} className="data_candidato">
53
                             <div key={index} className="data_candidato">
69
                                 </div>
70
                                 </div>
70
                             </div>
71
                             </div>
71
                         )
72
                         )
72
-                    })
73
+                    }) : undefined
73
                 }
74
                 }
75
+                <Row style={{ padding : 5 }}>
76
+                    <Col>
77
+                        <Stack spacing={2}>
78
+                            <Typography>Page: {page}</Typography>
79
+                            <Pagination count={10} page={page} onChange={handleChange} />
80
+                        </Stack>
81
+                    </Col>
82
+                </Row>
74
             </div>
83
             </div>
75
         </div>
84
         </div>
76
     )
85
     )

+ 2 - 4
psicoadmin/src/Components/Dashboard.js

30
 
30
 
31
 import useAuth from '../Auth/useAuth';
31
 import useAuth from '../Auth/useAuth';
32
 import { Outlet, useNavigate} from "react-router-dom";
32
 import { Outlet, useNavigate} from "react-router-dom";
33
-import MenuMovil from "./MenuMovil";
33
+import Footer from "../Components/Footer";
34
 
34
 
35
 
35
 
36
 const drawerWidth = 240;
36
 const drawerWidth = 240;
270
                     </List>
270
                     </List>
271
                 </Drawer>
271
                 </Drawer>
272
                 <Box component="main" sx={{ backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900], flexGrow: 1, height: '100vh', overflow: 'auto', }} >
272
                 <Box component="main" sx={{ backgroundColor: (theme) => theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900], flexGrow: 1, height: '100vh', overflow: 'auto', }} >
273
-
274
                     <Toolbar />
273
                     <Toolbar />
275
-
276
                     <Container maxWidth="lg" sx={{ mt: 2 , mb: 2 }}>
274
                     <Container maxWidth="lg" sx={{ mt: 2 , mb: 2 }}>
277
                         <Outlet/>
275
                         <Outlet/>
276
+                        <Footer/>
278
                     </Container>
277
                     </Container>
279
-
280
                 </Box>
278
                 </Box>
281
             </Box>
279
             </Box>
282
         </ThemeProvider>
280
         </ThemeProvider>

+ 1 - 1
psicoadmin/src/Components/Footer.js

2
 import Typography from '@mui/material/Typography';
2
 import Typography from '@mui/material/Typography';
3
 import Link from '@mui/material/Link';
3
 import Link from '@mui/material/Link';
4
 
4
 
5
-export function Footer(props) {
5
+export default function Footer(props) {
6
     return (
6
     return (
7
         <Typography variant="body2" color="text.secondary" align="center" {...props}>
7
         <Typography variant="body2" color="text.secondary" align="center" {...props}>
8
             {'Copyright © '}
8
             {'Copyright © '}