首頁 探索 說明
註冊 登入
SuperAdminQA
/
psicoadmin
關註 1
讚好 0
複刻 0
代碼 問題管理 0 合併請求 0 提交歷史 372 版本發佈 0 Wiki
瀏覽代碼

[ADD] dashboard components

amenpunk 3 年之前
父節點
2cad98280d
當前提交
6cc8864dff
共有 4 個文件被更改，包括 242 次插入 和 275 次删除
分割檢視 顯示文件統計
  1. 129 0
      psicoadmin/src/Components/Actividades.js
  2. 77 0
      psicoadmin/src/Components/Candidatos.js
  3. 17 10
      psicoadmin/src/Css/all.css
  4. 19 265
      psicoadmin/src/Pages/Home.js

+ 129 - 0
psicoadmin/src/Components/Actividades.js
查看文件 

@@ -0,0 +1,129 @@
1 
+import * as React from 'react'
2 
+import FlightTakeoffIcon from '@mui/icons-material/FlightTakeoff';
3 
+import { Col, Row } from 'react-bootstrap';
4 
+
5 
+function LastActivitys() {
6 
+
7 
+    let activitys = [{
8 
+        password : "rcardona2510",
9 
+        description : "Creó la contraseña: pilotosanti",
10 
+        module : "Contraseñas",
11 
+        date : "21/12/18 7:25:52",
12 
+    },{
13 
+        password : "rcardona2510",
14 
+        description : "Creó la contraseña: pilotosanti",
15 
+        module : "Contraseñas",
16 
+        date : "21/12/18 8:25:52",
17 
+    },{
18 
+        password : "rcardona2510",
19 
+        description : "Creó la contraseña: pilotosanti",
20 
+        module : "Contraseñas",
21 
+        date : "21/12/18 9:25:52",
22 
+    } ]
23 
+
24 
+    return(
25 
+        <React.Fragment>
26 
+            {
27 
+                activitys.map( ( activity, index ) => {
28 
+                    return(
29 
+                        <div key={index} className="body_history">
30 
+                            <div className="row">
31 
+                                <div className="col25">
32 
+                                    <p>{ activity.password }</p>
33 
+                                </div>
34 
+                                <div className="col25">
35 
+                                    <p>{ activity.description }</p>
36 
+                                </div>
37 
+                                <div className="col25">
38 
+                                    <p>{ activity.module }</p>
39 
+                                </div>
40 
+                                <div className="col25">
41 
+                                    <p>{ activity.date }</p>
42 
+                                </div>
43 
+                            </div>
44 
+                        </div>
45 
+
46 
+                    )
47 
+                })
48 
+            }
49 
+        </React.Fragment>
50 
+    )
51 
+}
52 
+
53 
+export default function Actividades() {
54 
+    return(
55 
+        <div className="actividades_recientes">
56 
+            <div className="cabecera_recently">
57 
+                <FlightTakeoffIcon style={{   color : "#607d8b", fontSize : 25, margin : 0, marginRight: 15, marginLeft :15  }}/>
58 
+                <p>HISTORIAL DE ACTIVIDADES</p>
59 
+            </div>
60 
+            <div className="content_historial">
61 
+                <p>Últimas actividades registradas</p>
62 
+                <div className="data_actividad">
63 
+                    <div className="filtros_history">
64 
+                        <Row>
65 
+                            <Col md="4">
66 
+                                <label>Contraseña</label>
67 
+                                <input type="text" name="contraseña" placeholder="Contraseña"/>
68 
+                            </Col>
69 
+                            <Col md="4">
70 
+                                <label>Módulo</label>
71 
+                                <select>
72 
+                                    <option>Puestos</option>
73 
+                                    <option>Contraseñas</option>
74 
+                                    <option>Expedientes</option>
75 
+                                    <option>Resultados</option>
76 
+                                    <option>Pruebas</option>
77 
+                                    <option>Ajustes</option>
78 
+                                    <option>Membresías</option>
79 
+                                    <option>Sesiones</option>
80 
+                                </select>
81 
+                            </Col>
82 
+                            <Col md="4">
83 
+                                <label>Acción</label>
84 
+                                <select>
85 
+                                    <option>Crear</option>
86 
+                                    <option>Editar</option>
87 
+                                    <option>Eliminar</option>
88 
+                                    <option>Desbloquear</option>
89 
+                                </select>
90 
+                            </Col>
91 
+                            <Col md="4">
92 
+                                <label>Fecha Inicio</label>
93 
+                                <input id="custom-input-date" className="calendar" type="text" name="upload-release" placeholder="dd/mm/yyyy"/>
94 
+                            </Col>
95 
+                            <Col md="4">
96 
+                                <label>Fecha Inicio</label>
97 
+                                <input id="custom-input-date-2" className="calendar" type="text" name="upload-release" placeholder=""/>
98 
+                            </Col>
99 
+                            <Col md="4">
100 
+                                <button className="buscar_filtros_history">Buscar</button>
101 
+                            </Col>
102 
+                        </Row>
103 
+                    </div>
104 
+                    <div className="cabeceras_actividad">
105 
+                        <div className="row">
106 
+                            <div className="col25">
107 
+                                <p>Contraseña</p>
108 
+                            </div>
109 
+                            <div className="col25">
110 
+                                <p>Descripción</p>
111 
+                            </div>
112 
+                            <div className="col25">
113 
+                                <p>Módulo</p>
114 
+                            </div>
115 
+                            <div className="col25">
116 
+                                <p>Fecha</p>
117 
+                            </div>
118 
+                        </div>
119 
+                    </div>
120 
+                    <LastActivitys/>
121 
+                    <div className="footer_history">
122 
+                        <a href="#" data-toggle="modal" data-target="#ayudaHistorial">Ayuda</a>
123 
+                    </div>
124 
+                </div>
125 
+            </div>
126 
+        </div>
127 
+
128 
+    )
129 
+}

+ 77 - 0
psicoadmin/src/Components/Candidatos.js
查看文件 

@@ -0,0 +1,77 @@
1 
+import UpdateIcon from '@mui/icons-material/Update';
2 
+import { Table } from 'react-bootstrap'
3 
+
4 
+export default function Candidatos () {
5 
+
6 
+    let users = [ {
7 
+            password :'repartidorPARMA',
8 
+            puesto : "Piloto Repartidor",
9 
+            DPI : 1583266600501,
10 
+            aplicacion : "27/12/2018 12:02 PM",
11 
+            pendientes : "No",
12 
+        },{
13 
+            password :'repartidorPARMA',
14 
+            puesto : "Piloto Repartidor",
15 
+            DPI : 1583266600501,
16 
+            aplicacion : "27/12/2018 12:02 PM",
17 
+            pendientes : "Si",
18 
+        }
19 
+    ]
20 
+
21 
+    return (
22 
+        <div className="body_historial">
23 
+            <div className="header_historial">
24 
+                <UpdateIcon style={{  color : "white", fontSize : 25, margin : 0, marginRight: 15, marginLeft :15 }}/>
25 
+                <p className="titlie_main">HISTORIAL DE ACCESO DE CANDIDATOS</p>
26 
+            </div>
27 
+            <div className="content_historial">
28 
+                <p>Últimos candidatos que han ingresado al sistema:</p>
29 
+                <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>
47 
+                </div>
48 
+
49 
+                {
50 
+                    users.map( (user, index) => {
51 
+                        return(
52 
+                            <div key={index} className="data_candidato">
53 
+                                <div className="row">
54 
+                                    <div className="col20">
55 
+                                        <p>{ user.password }</p>
56 
+                                    </div>
57 
+                                    <div className="col20">
58 
+                                        <p>{ user.puesto }</p>
59 
+                                    </div>
60 
+                                    <div className="col20">
61 
+                                        <p><a href="#">{ user.DPI }</a></p>
62 
+                                    </div>
63 
+                                    <div className="col20">
64 
+                                        <p>{ user.aplicacion }</p>
65 
+                                    </div>
66 
+                                    <div className="col20">
67 
+                                        <p>{ user.pendientes }</p>
68 
+                                    </div>
69 
+                                </div>
70 
+                            </div>
71 
+                        )
72 
+                    })
73 
+                }
74 
+            </div>
75 
+        </div>
76 
+    )
77 
+}

+ 17 - 10
psicoadmin/src/Css/all.css
查看文件 

@@ -1714,19 +1714,18 @@ li.cabecera_li {
1714 1714 
     padding: 45px 20px;
1715 1715 
 }
1716 1716 
 .header_historial {
1717 
+    display : flex;
1718 
+    flex-direction : row;
1719 
+    align-items: center;
1717 1720 
     background: #d7d7d7;
1718 
-    padding: 10px;
1721 
+    /* padding: 10px; */
1719 1722 
     border: 1px solid #dcdcdc;
1720 
-}
1721 
-.header_historial i{
1722 
-    color: #fff;
1723 
-    float: left;
1724 
-    margin-right: 20px;
1723 
+    /* height : 45px; */
1725 1724 
 }
1726 1725 
 .header_historial p{
1727 
-    margin: 0!important;
1728 
-    padding: 0;
1729 
-    line-height: 1;
1726 
+    /* margin: 0!important; */
1727 
+    /* padding: 0; */
1728 
+    /* line-height: 1; */
1730 1729 
     color: #fff;
1731 1730 
     letter-spacing: 5px;
1732 1731 
 }
 
@@ -1786,6 +1785,9 @@ li.cabecera_li {
1786 1785 
     background: #eceff1;
1787 1786 
     padding: 10px;
1788 1787 
     border: 1px solid #dcdcdc;
1788 
+    display : flex;
1789 
+    flex-direction : row;
1790 
+    align-items: center
1789 1791 
 }
1790 1792 
 .cabecera_recently i {
1791 1793 
     color: #607d8b;
 
@@ -3369,7 +3371,7 @@ All this is done for any sub-level being entered.
3369 3371 
     width: 100%;
3370 3372 
 }
3371 3373 
 .content-section {
3372 
-    padding: 40px 0px;
3374 
+    padding: 0px 0px;
3373 3375 
 }
3374 3376 
 .cabeceras {
3375 3377 
     background: #f1f1f1;
 
@@ -3946,5 +3948,10 @@ All this is done for any sub-level being entered.
3946 3948 
     }
3947 3949 
 }
3948 3950
3951 
+.titlie_main{
3952 
+    margin : 0px;
3953 
+    padding : 0px;
3954 
+}
3955 
+
3949 3956
3950 3957

+ 19 - 265
psicoadmin/src/Pages/Home.js
查看文件 

@@ -1,12 +1,11 @@
1 1 
 import { Card } from '../Components/Card';
2 
+import { Col, Row } from 'react-bootstrap'
2 3
3 
-import LockIcon from '@mui/icons-material/Lock';
4 4 
 import PersonOutlineIcon from '@mui/icons-material/PersonOutline';
5 
-import PersonIcon from '@mui/icons-material/Person';
6 5 
 import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
7 
-import AssignmentTurnedInIcon from '@mui/icons-material/AssignmentTurnedIn';
8 
-
9 6 
 import ListAltIcon from '@mui/icons-material/ListAlt';
7 
+import Actividades from '../Components/Actividades'
8 
+import Candidatos from '../Components/Candidatos'
10 9
11 10 
 export function Home() {
12 11 
     return (
 
@@ -15,272 +14,27 @@ export function Home() {
15 14 
                 <div className="main">
16 15 
                     <h1>Bienvenido de nuevo Grupo DIT</h1>
17 16 
                     <div className="panel_options">
18 
-                        <div className="row">
19 
-                            <div className="col-md-4">
17 
+                        <Row>
18 
+                            <Col md="4">
20 19 
                                 <Card title='CONTRASEÑAS' icon={VerifiedUserIcon}/>
21 
-                            </div>
22 
-                            <div className="col-md-4">
20 
+                            </Col>
21 
+                            <Col md="4">
23 22 
                                 <Card title='EXPEDIENTES' icon={PersonOutlineIcon}/>
24 
-                            </div>
25 
-                            <div className="col-md-4">
23 
+                            </Col>
24 
+                            <Col md="4">
26 25 
                                 <Card title='PUESTOS' icon={ListAltIcon}/>
27 
-                            </div>
28 
-                        </div>
26 
+                            </Col>
27 
+                        </Row>
29 28 
                     </div>
30 29 
                     <div className="historial_candidatos">
31 
-                        <div className="row">
32 
-                            <div className="col-md-8">
33 
-                                <div className="body_historial">
34 
-                                    <div className="header_historial">
35 
-                                        <i className="far fa-clock"></i>
36 
-                                        <p>HISTORIAL DE ACCESO DE CANDIDATOS</p>
37 
-                                    </div>
38 
-                                    <div className="content_historial">
39 
-                                        <p>Últimos candidatos que han ingresado al sistema:</p>
40 
-                                        <div className="cabeceras">
41 
-                                            <div className="row">
42 
-                                                <div className="col20">
43 
-                                                    <p>Contraseña</p>
44 
-                                                </div>
45 
-                                                <div className="col20">
46 
-                                                    <p>Puesto</p>
47 
-                                                </div>
48 
-                                                <div className="col20">
49 
-                                                    <p>No. Identificación</p>
50 
-                                                </div>
51 
-                                                <div className="col20">
52 
-                                                    <p>Fecha de aplicación</p>
53 
-                                                </div>
54 
-                                                <div className="col20">
55 
-                                                    <p>Pruebas Pendientes</p>
56 
-                                                </div>
57 
-                                            </div>
58 
-                                        </div>
59 
-                                        <div className="data_candidato">
60 
-                                            <div className="row">
61 
-                                                <div className="col20">
62 
-                                                    <p>repartidorPARMA</p>
63 
-                                                </div>
64 
-                                                <div className="col20">
65 
-                                                    <p>Piloto Repartidor</p>
66 
-                                                </div>
67 
-                                                <div className="col20">
68 
-                                                    <p><a href="#">1583266600501</a></p>
69 
-                                                </div>
70 
-                                                <div className="col20">
71 
-                                                    <p>27/12/2018</p>
72 
-                                                    <p>12:02 PM</p>
73 
-                                                </div>
74 
-                                                <div className="col20">
75 
-                                                    <p>No</p>
76 
-                                                </div>
77 
-                                            </div>
78 
-                                        </div>
79 
-                                        <div className="data_candidato">
80 
-                                            <div className="row">
81 
-                                                <div className="col20">
82 
-                                                    <p>repartidorPARMA</p>
83 
-                                                </div>
84 
-                                                <div className="col20">
85 
-                                                    <p>Piloto Repartidor</p>
86 
-                                                </div>
87 
-                                                <div className="col20">
88 
-                                                    <p><a href="#">1583266600501</a></p>
89 
-                                                </div>
90 
-                                                <div className="col20">
91 
-                                                    <p>27/12/2018</p>
92 
-                                                    <p>12:02 PM</p>
93 
-                                                </div>
94 
-                                                <div className="col20">
95 
-                                                    <p>No</p>
96 
-                                                </div>
97 
-                                            </div>
98 
-                                        </div>
99 
-                                        <div className="data_candidato">
100 
-                                            <div className="row">
101 
-                                                <div className="col20">
102 
-                                                    <p>repartidorPARMA</p>
103 
-                                                </div>
104 
-                                                <div className="col20">
105 
-                                                    <p>Piloto Repartidor</p>
106 
-                                                </div>
107 
-                                                <div className="col20">
108 
-                                                    <p><a href="#">1583266600501</a></p>
109 
-                                                </div>
110 
-                                                <div className="col20">
111 
-                                                    <p>27/12/2018</p>
112 
-                                                    <p>12:02 PM</p>
113 
-                                                </div>
114 
-                                                <div className="col20">
115 
-                                                    <p>No</p>
116 
-                                                </div>
117 
-                                            </div>
118 
-                                        </div>
119 
-                                        <div className="data_candidato">
120 
-                                            <div className="row">
121 
-                                                <div className="col20">
122 
-                                                    <p>repartidorPARMA</p>
123 
-                                                </div>
124 
-                                                <div className="col20">
125 
-                                                    <p>Piloto Repartidor</p>
126 
-                                                </div>
127 
-                                                <div className="col20">
128 
-                                                    <p><a href="#">1583266600501</a></p>
129 
-                                                </div>
130 
-                                                <div className="col20">
131 
-                                                    <p>27/12/2018</p>
132 
-                                                    <p>12:02 PM</p>
133 
-                                                </div>
134 
-                                                <div className="col20">
135 
-                                                    <p>No</p>
136 
-                                                </div>
137 
-                                            </div>
138 
-                                        </div>
139 
-                                        <div className="data_candidato">
140 
-                                            <div className="row">
141 
-                                                <div className="col20">
142 
-                                                    <p>repartidorPARMA</p>
143 
-                                                </div>
144 
-                                                <div className="col20">
145 
-                                                    <p>Piloto Repartidor</p>
146 
-                                                </div>
147 
-                                                <div className="col20">
148 
-                                                    <p><a href="#">1583266600501</a></p>
149 
-                                                </div>
150 
-                                                <div className="col20">
151 
-                                                    <p>27/12/2018</p>
152 
-                                                    <p>12:02 PM</p>
153 
-                                                </div>
154 
-                                                <div className="col20">
155 
-                                                    <p>No</p>
156 
-                                                </div>
157 
-                                            </div>
158 
-                                        </div>
159 
-                                    </div>
160 
-                                </div>
161 
-                            </div>
162 
-                            <div className="col-md-4">
163 
-                                <div className="actividades_recientes">
164 
-                                    <div className="cabecera_recently">
165 
-                                        <i className="fas fa-plane-departure"></i>
166 
-                                        <p>HISTORIAL DE ACTIVIDADES</p>
167 
-                                    </div>
168 
-                                    <div className="content_historial">
169 
-                                        <p>Últimas actividades registradas</p>
170 
-                                        <div className="data_actividad">
171 
-                                            <div className="filtros_history">
172 
-                                                <div className="row">
173 
-                                                    <div className="col-md-4">
174 
-                                                        <label>Contraseña</label>
175 
-                                                        <input type="text" name="contraseña" placeholder="Contraseña"/>
176 
-                                                    </div>
177 
-                                                    <div className="col-md-4">
178 
-                                                        <label>Módulo</label>
179 
-                                                        <select>
180 
-                                                            <option>Puestos</option>
181 
-                                                            <option>Contraseñas</option>
182 
-                                                            <option>Expedientes</option>
183 
-                                                            <option>Resultados</option>
184 
-                                                            <option>Pruebas</option>
185 
-                                                            <option>Ajustes</option>
186 
-                                                            <option>Membresías</option>
187 
-                                                            <option>Sesiones</option>
188 
-                                                        </select>
189 
-                                                    </div>
190 
-                                                    <div className="col-md-4">
191 
-                                                        <label>Acción</label>
192 
-                                                        <select>
193 
-                                                            <option>Crear</option>
194 
-                                                            <option>Editar</option>
195 
-                                                            <option>Eliminar</option>
196 
-                                                            <option>Desbloquear</option>
197 
-                                                        </select>
198 
-                                                    </div>
199 
-                                                    <div className="col-md-4">
200 
-                                                        <label>Fecha Inicio</label>
201 
-                                                        <input id="custom-input-date" className="calendar" type="text" name="upload-release" placeholder="dd/mm/yyyy"/>
202 
-                                                    </div>
203 
-                                                    <div className="col-md-4">
204 
-                                                        <label>Fecha Inicio</label>
205 
-                                                        <input id="custom-input-date-2" className="calendar" type="text" name="upload-release" placeholder=""/>
206 
-                                                    </div>
207 
-                                                    <div className="col-md-4">
208 
-                                                        <button className="buscar_filtros_history">Buscar</button>
209 
-                                                    </div>
210 
-                                                </div>
211 
-                                            </div>
212 
-                                            <div className="cabeceras_actividad">
213 
-                                                <div className="row">
214 
-                                                    <div className="col25">
215 
-                                                        <p>Contraseña</p>
216 
-                                                    </div>
217 
-                                                    <div className="col25">
218 
-                                                        <p>Descripción</p>
219 
-                                                    </div>
220 
-                                                    <div className="col25">
221 
-                                                        <p>Módulo</p>
222 
-                                                    </div>
223 
-                                                    <div className="col25">
224 
-                                                        <p>Fecha</p>
225 
-                                                    </div>
226 
-                                                </div>
227 
-                                            </div>
228 
-                                            <div className="body_history">
229 
-                                                <div className="row">
230 
-                                                    <div className="col25">
231 
-                                                        <p>rcardona2510</p>
232 
-                                                    </div>
233 
-                                                    <div className="col25">
234 
-                                                        <p>Creó la contraseña: pilotosanti</p>
235 
-                                                    </div>
236 
-                                                    <div className="col25">
237 
-                                                        <p>Contraseñas</p>
238 
-                                                    </div>
239 
-                                                    <div className="col25">
240 
-                                                        <p>21/12/18 8:25:52</p>
241 
-                                                    </div>
242 
-                                                </div>
243 
-                                            </div>
244 
-                                            <div className="body_history">
245 
-                                                <div className="row">
246 
-                                                    <div className="col25">
247 
-                                                        <p>rcardona2510</p>
248 
-                                                    </div>
249 
-                                                    <div className="col25">
250 
-                                                        <p>Creó la contraseña: pilotosanti</p>
251 
-                                                    </div>
252 
-                                                    <div className="col25">
253 
-                                                        <p>Contraseñas</p>
254 
-                                                    </div>
255 
-                                                    <div className="col25">
256 
-                                                        <p>21/12/18 8:25:52</p>
257 
-                                                    </div>
258 
-                                                </div>
259 
-                                            </div>
260 
-                                            <div className="body_history">
261 
-                                                <div className="row">
262 
-                                                    <div className="col25">
263 
-                                                        <p>rcardona2510</p>
264 
-                                                    </div>
265 
-                                                    <div className="col25">
266 
-                                                        <p>Creó la contraseña: pilotosanti</p>
267 
-                                                    </div>
268 
-                                                    <div className="col25">
269 
-                                                        <p>Contraseñas</p>
270 
-                                                    </div>
271 
-                                                    <div className="col25">
272 
-                                                        <p>21/12/18 8:25:52</p>
273 
-                                                    </div>
274 
-                                                </div>
275 
-                                            </div>
276 
-                                            <div className="footer_history">
277 
-                                                <a href="#" data-toggle="modal" data-target="#ayudaHistorial">Ayuda</a>
278 
-                                            </div>
279 
-                                        </div>
280 
-                                    </div>
281 
-                                </div>
282 
-                            </div>
283 
-                        </div>
30 
+                        <Row>
31 
+                            <Col md="8">
32 
+                                <Candidatos/>
33 
+                            </Col>
34 
+                            <Col md="4">
35 
+                                <Actividades/>
36 
+                            </Col>
37 
+                        </Row>
284 38 
                     </div>
285 39 
                 </div>
286 40 
             </div>