+ + + ); + + return ( +

+ {readonly || (max && fileList().length >= max) ? null : uploadButton} + + {valuesArr() && valuesArr().length ? ( +

+ {valuesArr().map((item) => { + return ( +

+ + + {item.name} + + + {!readonly && ( + + )} +

+ ); + })} +

+ ) : null} +

+ ); +}; + +FilesUploader.propTypes = { + readonly: PropTypes.bool, + path: PropTypes.string, + max: PropTypes.number, + schema: PropTypes.shape({ + image: PropTypes.bool, + size: PropTypes.number, + formats: PropTypes.arrayOf(PropTypes.string), + }), + value: PropTypes.any, + onChange: PropTypes.func, +}; + +export default FilesUploader; diff --git a/frontend/src/components/Uploaders/ImagesUploader.js b/frontend/src/components/Uploaders/ImagesUploader.js new file mode 100644 index 0000000..f4e14d0 --- /dev/null +++ b/frontend/src/components/Uploaders/ImagesUploader.js @@ -0,0 +1,227 @@ +import React, { useState, useRef } from 'react'; +import PropTypes from 'prop-types'; +import Button from '@mui/material/Button'; +import CloseIcon from '@mui/icons-material/Close'; +import SearchIcon from '@mui/icons-material/Search'; +import Grid from '@mui/material/Grid'; +import Box from '@mui/material/Box'; +import Dialog from '@mui/material/Dialog'; +import FileUploader from 'components/FormItems/uploaders/UploadService'; +import Errors from '../../../components/FormItems/error/errors'; +import { makeStyles } from '@mui/styles'; + +const useStyles = makeStyles({ + actionButtonsWrapper: { + position: 'relative', + }, + previewContent: { + padding: '0px !important', + }, + imageItem: { + '&.MuiGrid-root': { + margin: 10, + boxShadow: '2px 2px 8px 0 rgb(0 0 0 / 40%)', + borderRadius: 10, + }, + height: '100px', + }, + actionButtons: { + position: 'absolute', + bottom: 5, + right: 4, + }, + previewContainer: { + '& button': { + position: 'absolute', + top: 10, + right: 10, + '& svg': { + height: 50, + width: 50, + fill: '#FFF', + stroke: '#909090', + strokeWidth: 0.5, + }, + }, + }, + button: { + padding: '0px !important', + minWidth: '45px !important', + '& svg': { + height: 36, + width: 36, + fill: '#FFF', + stroke: '#909090', + strokeWidth: 0.5, + }, + }, +}); + +const ImagesUploader = (props) => { + const classes = useStyles(); + const { value, onChange, schema, path, max, readonly, name } = props; + + const [loading, setLoading] = useState(false); + const [showPreview, setShowPreview] = useState(false); + const [imageMeta, setImageMeta] = useState({ + imageSrc: null, + imageAlt: null, + }); + const inputElement = useRef(null); + + const valuesArr = () => { + if (!value) { + return []; + } + return Array.isArray(value) ? value : [value]; + }; + + const fileList = () => { + return valuesArr().map((item) => ({ + uid: item.id || undefined, + name: item.name, + status: 'done', + url: item.publicUrl, + })); + }; + + const handleRemove = (id) => { + onChange(valuesArr().filter((item) => item.id !== id)); + }; + + const handleChange = async (event) => { + try { + const files = event.target.files; + + if (!files || !files.length) { + return; + } + + let file = files[0]; + + FileUploader.validate(file, schema); + + setLoading(true); + + file = await FileUploader.upload(path, file, schema); + + inputElement.current.value = ''; + setLoading(false); + onChange([...valuesArr(), file]); + } catch (error) { + inputElement.current.value = ''; + console.log('error', error); + setLoading(false); + Errors.showMessage(error); + } + }; + + const doPreviewImage = (image) => { + setImageMeta({ + imageSrc: image.publicUrl, + imageAlt: image.name, + }); + setShowPreview(true); + }; + + const doCloseImageModal = () => { + setImageMeta({ + imageSrc: null, + imageAlt: null, + }); + setShowPreview(false); + }; + + const uploadButton = ( + + + + {' '} + + + ); + + return ( + + {readonly || (max && fileList().length >= max) ? null : uploadButton} + + {valuesArr() && valuesArr().length ? ( + + {valuesArr().map((item) => { + return ( + + {item.name}

+ +

+ + {!readonly && ( + + )} +

+ + ); + })} + + ) : null} + + + ); +}; + +ImagesUploader.propTypes = { + readonly: PropTypes.bool, + path: PropTypes.string, + max: PropTypes.number, + schema: PropTypes.shape({ + image: PropTypes.bool, + size: PropTypes.number, + formats: PropTypes.arrayOf(PropTypes.string), + }), + value: PropTypes.any, + onChange: PropTypes.func, + name: PropTypes.string, +}; + +export default ImagesUploader; diff --git a/frontend/src/components/Uploaders/UploadService.js b/frontend/src/components/Uploaders/UploadService.js new file mode 100644 index 0000000..19c5304 --- /dev/null +++ b/frontend/src/components/Uploaders/UploadService.js @@ -0,0 +1,82 @@ +import { v4 as uuidv4 } from 'uuid'; +import Axios from 'axios'; +import { baseURLApi } from '../../config'; + +function extractExtensionFrom(filename) { + if (!filename) { + return null; + } + + const regex = /(?:\.([^.]+))?$/; + return regex.exec(filename)[1]; +} + +export default class FileUploader { + static validate(file, schema) { + if (!schema) { + return; + } + + if (schema.image) { + if (!file.type.startsWith('image')) { + throw new Error('You must upload an image'); + } + } + + if (schema.size && file.size > schema.size) { + throw new Error('File is too big.'); + } + + const extension = extractExtensionFrom(file.name); + + if (schema.formats && !schema.formats.includes(extension)) { + throw new Error('Invalid format'); + } + } + + static async upload(path, file, schema) { + try { + this.validate(file, schema); + } catch (error) { + return Promise.reject(error); + } + + const extension = extractExtensionFrom(file.name); + const id = uuidv4(); + const filename = `${id}.${extension}`; + const privateUrl = `${path}/${filename}`; + + const publicUrl = await this.uploadToServer(file, path, filename); + + return { + id: id, + name: file.name, + sizeInBytes: file.size, + privateUrl, + publicUrl, + new: true, + }; + } + + static async uploadToServer(file, path, filename) { + const formData = new FormData(); + formData.append('file', file); + formData.append('filename', filename); + const uri = `/file/upload/${path}`; + await Axios.post(uri, formData, { + headers: { + 'Content-Type': 'multipart/form-data', + }, + }); + + const privateUrl = `${path}/${filename}`; + + console.log( + 'process.env.NODE_ENV in uploadToServer function', + process.env.NODE_ENV, + ); + console.log('baseURLApi in uploadToServer function', baseURLApi); + + return `${baseURLApi}/file/download?privateUrl=${privateUrl}`; + } +} diff --git a/frontend/src/components/UserAvatar.tsx b/frontend/src/components/UserAvatar.tsx new file mode 100644 index 0000000..a517a4c --- /dev/null +++ b/frontend/src/components/UserAvatar.tsx @@ -0,0 +1,48 @@ +/* eslint-disable @next/next/no-img-element */ +// Why disabled: +// avatars.dicebear.com provides svg avatars +// next/image needs dangerouslyAllowSVG option for that + +import React, { ReactNode } from 'react'; +import BaseIcon from './BaseIcon'; +import { mdiAccountCircleOutline } from '@mdi/js'; + +type Props = { + username: string; + avatar?: string | null; + image?: object | null; + api?: string; + className?: string; + children?: ReactNode; +}; + +export default function UserAvatar({ + username, + image, + avatar, + className = '', + children, +}: Props) { + const avatarImage = image && image[0] ? `${image[0].publicUrl}` : '#'; + + return ( +

+ {avatarImage === '#' ? ( + + ) : ( + {username}

+ )} + {children} +

+ ); +} diff --git a/frontend/src/components/UserAvatarCurrentUser.tsx b/frontend/src/components/UserAvatarCurrentUser.tsx new file mode 100644 index 0000000..1bcf833 --- /dev/null +++ b/frontend/src/components/UserAvatarCurrentUser.tsx @@ -0,0 +1,48 @@ +import React, { ReactNode, useEffect, useState } from 'react'; +import { useAppSelector } from '../stores/hooks'; +import UserAvatar from './UserAvatar'; + +type Props = { + className?: string; + children?: ReactNode; +}; + +export default function UserAvatarCurrentUser({ + className = '', + children, +}: Props) { + const userName = useAppSelector((state) => state.main.userName); + const userAvatar = useAppSelector((state) => state.main.userAvatar); + const { currentUser, isFetching, token } = useAppSelector( + (state) => state.auth, + ); + const { users, loading } = useAppSelector((state) => state.users); + + const [avatar, setAvatar] = useState(null); + + useEffect(() => { + currentUserAvatarCheck(); + }, []); + + useEffect(() => { + currentUserAvatarCheck(); + }, [currentUser?.id, users]); + + const currentUserAvatarCheck = () => { + if (currentUser?.id) { + const image = currentUser?.avatar; + setAvatar(image); + } + }; + + return ( + + {children} + + ); +} diff --git a/frontend/src/components/UserCard.tsx b/frontend/src/components/UserCard.tsx new file mode 100644 index 0000000..15fc7e5 --- /dev/null +++ b/frontend/src/components/UserCard.tsx @@ -0,0 +1,47 @@ +import { mdiCheckDecagram } from '@mdi/js'; +import { Field, Form, Formik } from 'formik'; +import { useAppSelector } from '../stores/hooks'; +import CardBox from './CardBox'; +import FormCheckRadio from './FormCheckRadio'; +import UserAvatarCurrentUser from './UserAvatarCurrentUser'; + +type Props = { + className?: string; +}; + +const UserCard = ({ className }: Props) => { + const userName = useAppSelector((state) => state.main.userName); + + return ( + +

+ +

+ alert(JSON.stringify(values, null, 2))} + > + + +

+ Howdy, {userName}! +

+ Last login 12 mins ago from 127.0.0.1 +

Verified

+ + ); +}; + +export default UserCard; diff --git a/frontend/src/components/Users/CardUsers.tsx b/frontend/src/components/Users/CardUsers.tsx new file mode 100644 index 0000000..f4ce406 --- /dev/null +++ b/frontend/src/components/Users/CardUsers.tsx @@ -0,0 +1,196 @@ +import React from 'react'; +import ImageField from '../ImageField'; +import ListActionsPopover from '../ListActionsPopover'; +import { useAppSelector } from '../../stores/hooks'; +import dataFormatter from '../../helpers/dataFormatter'; +import { Pagination } from '../Pagination'; +import { saveFile } from '../../helpers/fileSaver'; +import LoadingSpinner from '../LoadingSpinner'; +import Link from 'next/link'; + +import { hasPermission } from '../../helpers/userPermissions'; + +type Props = { + users: any[]; + loading: boolean; + onDelete: (id: string) => void; + currentPage: number; + numPages: number; + onPageChange: (page: number) => void; +}; + +const CardUsers = ({ + users, + loading, + onDelete, + currentPage, + numPages, + onPageChange, +}: Props) => { + const asideScrollbarsStyle = useAppSelector( + (state) => state.style.asideScrollbarsStyle, + ); + const bgColor = useAppSelector((state) => state.style.cardsColor); + const darkMode = useAppSelector((state) => state.style.darkMode); + const corners = useAppSelector((state) => state.style.corners); + const focusRing = useAppSelector((state) => state.style.focusRingColor); + + const currentUser = useAppSelector((state) => state.auth.currentUser); + const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_USERS'); + + return ( +

+ {loading && } +

+
+ + +
{item.firstName}
+ + +
+ +
+
+
+
+
+ First Name +
+
+
+ {item.firstName} +
+
+
+ +
+
+ Last Name +
+
+
+ {item.lastName} +
+
+
+ +
+
+ Phone Number +
+
+
+ {item.phoneNumber} +
+
+
+ +
+
+ E-Mail +
+
+
{item.email}
+
+
+ +
+
+ Disabled +
+
+
+ {dataFormatter.booleanFormatter(item.disabled)} +
+
+
+ +
+
+ Avatar +
+
+
+ +
+
+
+ +
+
+ App Role +
+
+
+ {dataFormatter.rolesOneListFormatter(item.app_role)} +
+
+
+ +
+
+ Custom Permissions +
+
+
+ {dataFormatter + .permissionsManyListFormatter(item.custom_permissions) + .join(', ')} +
+
+
+
+

No data to display

+ +

+ ); +}; + +export default CardUsers; diff --git a/frontend/src/components/Users/ListUsers.tsx b/frontend/src/components/Users/ListUsers.tsx new file mode 100644 index 0000000..bfeeff5 --- /dev/null +++ b/frontend/src/components/Users/ListUsers.tsx @@ -0,0 +1,147 @@ +import React from 'react'; +import CardBox from '../CardBox'; +import ImageField from '../ImageField'; +import dataFormatter from '../../helpers/dataFormatter'; +import { saveFile } from '../../helpers/fileSaver'; +import ListActionsPopover from '../ListActionsPopover'; +import { useAppSelector } from '../../stores/hooks'; +import { Pagination } from '../Pagination'; +import LoadingSpinner from '../LoadingSpinner'; +import Link from 'next/link'; + +import { hasPermission } from '../../helpers/userPermissions'; + +type Props = { + users: any[]; + loading: boolean; + onDelete: (id: string) => void; + currentPage: number; + numPages: number; + onPageChange: (page: number) => void; +}; + +const ListUsers = ({ + users, + loading, + onDelete, + currentPage, + numPages, + onPageChange, +}: Props) => { + const currentUser = useAppSelector((state) => state.auth.currentUser); + const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_USERS'); + + const corners = useAppSelector((state) => state.style.corners); + const bgColor = useAppSelector((state) => state.style.cardsColor); + + return ( + <> +

+ {loading && } + {!loading && + users.map((item) => ( +

+ +

+ + + dark:divide-dark-700 overflow-x-auto' + } + > +

First Name

{item.firstName}

+ +

Last Name

{item.lastName}

+ +

Phone Number

{item.phoneNumber}

+ +

E-Mail

{item.email}

+ +

Disabled

+ {dataFormatter.booleanFormatter(item.disabled)} +

+ +

Avatar

+ +

App Role

+ {dataFormatter.rolesOneListFormatter(item.app_role)} +

+ +

+ Custom Permissions +

+ {dataFormatter + .permissionsManyListFormatter(item.custom_permissions) + .join(', ')} +

+ + +

+ +

+ ))} + {!loading && users.length === 0 && ( +

No data to display

+ )} +

+ +

+ + ); +}; + +export default ListUsers; diff --git a/frontend/src/components/Users/TableUsers.tsx b/frontend/src/components/Users/TableUsers.tsx new file mode 100644 index 0000000..ce6fbe7 --- /dev/null +++ b/frontend/src/components/Users/TableUsers.tsx @@ -0,0 +1,485 @@ +import React, { useEffect, useState, useMemo } from 'react'; +import { createPortal } from 'react-dom'; +import { ToastContainer, toast } from 'react-toastify'; +import BaseButton from '../BaseButton'; +import CardBoxModal from '../CardBoxModal'; +import CardBox from '../CardBox'; +import { + fetch, + update, + deleteItem, + setRefetch, + deleteItemsByIds, +} from '../../stores/users/usersSlice'; +import { useAppDispatch, useAppSelector } from '../../stores/hooks'; +import { useRouter } from 'next/router'; +import { Field, Form, Formik } from 'formik'; +import { DataGrid, GridColDef } from '@mui/x-data-grid'; +import { loadColumns } from './configureUsersCols'; +import _ from 'lodash'; +import dataFormatter from '../../helpers/dataFormatter'; +import { dataGridStyles } from '../../styles'; + +const perPage = 10; + +const TableSampleUsers = ({ + filterItems, + setFilterItems, + filters, + showGrid, +}) => { + const notify = (type, msg) => toast(msg, { type, position: 'bottom-center' }); + + const dispatch = useAppDispatch(); + const router = useRouter(); + + const pagesList = []; + const [id, setId] = useState(null); + const [currentPage, setCurrentPage] = useState(0); + const [filterRequest, setFilterRequest] = React.useState(''); + const [columns, setColumns] = useState([]); + const [selectedRows, setSelectedRows] = useState([]); + const [sortModel, setSortModel] = useState([ + { + field: '', + sort: 'desc', + }, + ]); + + const { + users, + loading, + count, + notify: usersNotify, + refetch, + } = useAppSelector((state) => state.users); + const { currentUser } = useAppSelector((state) => state.auth); + const focusRing = useAppSelector((state) => state.style.focusRingColor); + const bgColor = useAppSelector((state) => state.style.bgLayoutColor); + const corners = useAppSelector((state) => state.style.corners); + const numPages = + Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage); + for (let i = 0; i < numPages; i++) { + pagesList.push(i); + } + + const loadData = async (page = currentPage, request = filterRequest) => { + if (page !== currentPage) setCurrentPage(page); + if (request !== filterRequest) setFilterRequest(request); + const { sort, field } = sortModel[0]; + + const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`; + dispatch(fetch({ limit: perPage, page, query })); + }; + + useEffect(() => { + if (usersNotify.showNotification) { + notify(usersNotify.typeNotification, usersNotify.textNotification); + } + }, [usersNotify.showNotification]); + + useEffect(() => { + if (!currentUser) return; + loadData(); + }, [sortModel, currentUser]); + + useEffect(() => { + if (refetch) { + loadData(0); + dispatch(setRefetch(false)); + } + }, [refetch, dispatch]); + + const [isModalInfoActive, setIsModalInfoActive] = useState(false); + const [isModalTrashActive, setIsModalTrashActive] = useState(false); + + const handleModalAction = () => { + setIsModalInfoActive(false); + setIsModalTrashActive(false); + }; + + const handleDeleteModalAction = (id: string) => { + setId(id); + setIsModalTrashActive(true); + }; + const handleDeleteAction = async () => { + if (id) { + await dispatch(deleteItem(id)); + await loadData(0); + setIsModalTrashActive(false); + } + }; + + const generateFilterRequests = useMemo(() => { + let request = '&'; + filterItems.forEach((item) => { + const isRangeFilter = filters.find( + (filter) => + filter.title === item.fields.selectedField && + (filter.number || filter.date), + ); + + if (isRangeFilter) { + const from = item.fields.filterValueFrom; + const to = item.fields.filterValueTo; + if (from) { + request += `${item.fields.selectedField}Range=${from}&`; + } + if (to) { + request += `${item.fields.selectedField}Range=${to}&`; + } + } else { + const value = item.fields.filterValue; + if (value) { + request += `${item.fields.selectedField}=${value}&`; + } + } + }); + return request; + }, [filterItems, filters]); + + const deleteFilter = (value) => { + const newItems = filterItems.filter((item) => item.id !== value); + + if (newItems.length) { + setFilterItems(newItems); + } else { + loadData(0, ''); + + setFilterItems(newItems); + } + }; + + const handleSubmit = () => { + loadData(0, generateFilterRequests); + }; + + const handleChange = (id) => (e) => { + const value = e.target.value; + const name = e.target.name; + + setFilterItems( + filterItems.map((item) => { + if (item.id !== id) return item; + if (name === 'selectedField') return { id, fields: { [name]: value } }; + + return { id, fields: { ...item.fields, [name]: value } }; + }), + ); + }; + + const handleReset = () => { + setFilterItems([]); + loadData(0, ''); + }; + + const onPageChange = (page: number) => { + loadData(page); + setCurrentPage(page); + }; + + useEffect(() => { + if (!currentUser) return; + + loadColumns(handleDeleteModalAction, `users`, currentUser).then((newCols) => + setColumns(newCols), + ); + }, [currentUser]); + + const handleTableSubmit = async (id: string, data) => { + delete data?.password; + if (!_.isEmpty(data)) { + await dispatch(update({ id, data })) + .unwrap() + .then((res) => res) + .catch((err) => { + throw new Error(err); + }); + } + }; + + const onDeleteRows = async (selectedRows) => { + await dispatch(deleteItemsByIds(selectedRows)); + await loadData(0); + }; + + const controlClasses = + 'w-full py-2 px-2 my-2 rounded dark:placeholder-gray-400 ' + + ` ${bgColor} ${focusRing} ${corners} ` + + 'dark:bg-slate-800 border'; + + const dataGrid = ( +

+ `datagrid--row`} + rows={users ?? []} + columns={columns} + initialState={{ + pagination: { + paginationModel: { + pageSize: 10, + }, + }, + }} + disableRowSelectionOnClick + onProcessRowUpdateError={(params) => { + console.log('Error', params); + }} + processRowUpdate={async (newRow, oldRow) => { + const data = dataFormatter.dataGridEditFormatter(newRow); + + try { + await handleTableSubmit(newRow.id, data); + return newRow; + } catch { + return oldRow; + } + }} + sortingMode={'server'} + checkboxSelection + onRowSelectionModelChange={(ids) => { + setSelectedRows(ids); + }} + onSortModelChange={(params) => { + params.length + ? setSortModel(params) + : setSortModel([{ field: '', sort: 'desc' }]); + }} + rowCount={count} + pageSizeOptions={[10]} + paginationMode={'server'} + loading={loading} + onPaginationModelChange={(params) => { + onPageChange(params.page); + }} + /> +

+ ); + + return ( + <> + {filterItems && Array.isArray(filterItems) && filterItems.length ? ( + + null} + > +

+ <> + {filterItems && + filterItems.map((filterItem) => { + return ( +

+ Filter +

+ + {filters.map((selectOption) => ( + + ))} + +

+ {filters.find( + (filter) => + filter.title === filterItem?.fields?.selectedField, + )?.type === 'enum' ? ( +

Value

+ + + {filters + .find( + (filter) => + filter.title === + filterItem?.fields?.selectedField, + ) + ?.options?.map((option) => ( + + ))} + +

+ ) : filters.find( + (filter) => + filter.title === + filterItem?.fields?.selectedField, + )?.number ? ( +

+ From +

+ +

+ To +

+ +

+ ) : filters.find( + (filter) => + filter.title === + filterItem?.fields?.selectedField, + )?.date ? ( +

+ From +

+ +

+ To +

+ +

+ ) : ( +

+ Contains +

+ +

+ )} +

+ Action +

+ { + deleteFilter(filterItem.id); + }} + /> +

+ ); + })} +

+ + +

+ +

+ + + ) : null} + +

Are you sure you want to delete this item?

+ + + {dataGrid} + + {selectedRows.length > 0 && + createPortal( + onDeleteRows(selectedRows)} + />, + document.getElementById('delete-rows-button'), + )} + + + ); +}; + +export default TableSampleUsers; diff --git a/frontend/src/components/Users/configureUsersCols.tsx b/frontend/src/components/Users/configureUsersCols.tsx new file mode 100644 index 0000000..cbcf83a --- /dev/null +++ b/frontend/src/components/Users/configureUsersCols.tsx @@ -0,0 +1,183 @@ +import React from 'react'; +import BaseIcon from '../BaseIcon'; +import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js'; +import axios from 'axios'; +import { + GridActionsCellItem, + GridRowParams, + GridValueGetterParams, +} from '@mui/x-data-grid'; +import ImageField from '../ImageField'; +import { saveFile } from '../../helpers/fileSaver'; +import dataFormatter from '../../helpers/dataFormatter'; +import DataGridMultiSelect from '../DataGridMultiSelect'; +import ListActionsPopover from '../ListActionsPopover'; + +import { hasPermission } from '../../helpers/userPermissions'; + +type Params = (id: string) => void; + +export const loadColumns = async ( + onDelete: Params, + entityName: string, + + user, +) => { + async function callOptionsApi(entityName: string) { + if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return []; + + try { + const data = await axios(`/${entityName}/autocomplete?limit=100`); + return data.data; + } catch (error) { + console.log(error); + return []; + } + } + + const hasUpdatePermission = hasPermission(user, 'UPDATE_USERS'); + + return [ + { + field: 'firstName', + headerName: 'First Name', + flex: 1, + minWidth: 120, + filterable: false, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + + editable: hasUpdatePermission, + }, + + { + field: 'lastName', + headerName: 'Last Name', + flex: 1, + minWidth: 120, + filterable: false, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + + editable: hasUpdatePermission, + }, + + { + field: 'phoneNumber', + headerName: 'Phone Number', + flex: 1, + minWidth: 120, + filterable: false, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + + editable: hasUpdatePermission, + }, + + { + field: 'email', + headerName: 'E-Mail', + flex: 1, + minWidth: 120, + filterable: false, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + + editable: hasUpdatePermission, + }, + + { + field: 'disabled', + headerName: 'Disabled', + flex: 1, + minWidth: 120, + filterable: false, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + + editable: hasUpdatePermission, + + type: 'boolean', + }, + + { + field: 'avatar', + headerName: 'Avatar', + flex: 1, + minWidth: 120, + filterable: false, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + + editable: false, + sortable: false, + renderCell: (params: GridValueGetterParams) => ( + + ), + }, + + { + field: 'app_role', + headerName: 'App Role', + flex: 1, + minWidth: 120, + filterable: false, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + + editable: hasUpdatePermission, + + sortable: false, + type: 'singleSelect', + getOptionValue: (value: any) => value?.id, + getOptionLabel: (value: any) => value?.label, + valueOptions: await callOptionsApi('roles'), + valueGetter: (params: GridValueGetterParams) => + params?.value?.id ?? params?.value, + }, + + { + field: 'custom_permissions', + headerName: 'Custom Permissions', + flex: 1, + minWidth: 120, + filterable: false, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + + editable: false, + sortable: false, + type: 'singleSelect', + valueFormatter: ({ value }) => + dataFormatter.permissionsManyListFormatter(value).join(', '), + renderEditCell: (params) => ( + + ), + }, + + { + field: 'actions', + type: 'actions', + minWidth: 30, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + getActions: (params: GridRowParams) => { + return [ +

+ +

, + ]; + }, + }, + ]; +}; diff --git a/frontend/src/components/Usuarios/CardUsuarios.tsx b/frontend/src/components/Usuarios/CardUsuarios.tsx new file mode 100644 index 0000000..687e89c --- /dev/null +++ b/frontend/src/components/Usuarios/CardUsuarios.tsx @@ -0,0 +1,127 @@ +import React from 'react'; +import ImageField from '../ImageField'; +import ListActionsPopover from '../ListActionsPopover'; +import { useAppSelector } from '../../stores/hooks'; +import dataFormatter from '../../helpers/dataFormatter'; +import { Pagination } from '../Pagination'; +import { saveFile } from '../../helpers/fileSaver'; +import LoadingSpinner from '../LoadingSpinner'; +import Link from 'next/link'; + +import { hasPermission } from '../../helpers/userPermissions'; + +type Props = { + usuarios: any[]; + loading: boolean; + onDelete: (id: string) => void; + currentPage: number; + numPages: number; + onPageChange: (page: number) => void; +}; + +const CardUsuarios = ({ + usuarios, + loading, + onDelete, + currentPage, + numPages, + onPageChange, +}: Props) => { + const asideScrollbarsStyle = useAppSelector( + (state) => state.style.asideScrollbarsStyle, + ); + const bgColor = useAppSelector((state) => state.style.cardsColor); + const darkMode = useAppSelector((state) => state.style.darkMode); + const corners = useAppSelector((state) => state.style.corners); + const focusRing = useAppSelector((state) => state.style.focusRingColor); + + const currentUser = useAppSelector((state) => state.auth.currentUser); + const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_USUARIOS'); + + return ( +

+ {loading && } +

+
+ + {item.usuario} + + +
+ +
+
+
+
+
+ NombredeUsuario +
+
+
+ {item.usuario} +
+
+
+ +
+
+ ContraseñaCifrada +
+
+
{item.pass}
+
+
+ +
+
+ RoldelUsuario +
+
+
{item.tipo}
+
+
+
+

No data to display

+ +

+ ); +}; + +export default CardUsuarios; diff --git a/frontend/src/components/Usuarios/ListUsuarios.tsx b/frontend/src/components/Usuarios/ListUsuarios.tsx new file mode 100644 index 0000000..a069c9c --- /dev/null +++ b/frontend/src/components/Usuarios/ListUsuarios.tsx @@ -0,0 +1,105 @@ +import React from 'react'; +import CardBox from '../CardBox'; +import ImageField from '../ImageField'; +import dataFormatter from '../../helpers/dataFormatter'; +import { saveFile } from '../../helpers/fileSaver'; +import ListActionsPopover from '../ListActionsPopover'; +import { useAppSelector } from '../../stores/hooks'; +import { Pagination } from '../Pagination'; +import LoadingSpinner from '../LoadingSpinner'; +import Link from 'next/link'; + +import { hasPermission } from '../../helpers/userPermissions'; + +type Props = { + usuarios: any[]; + loading: boolean; + onDelete: (id: string) => void; + currentPage: number; + numPages: number; + onPageChange: (page: number) => void; +}; + +const ListUsuarios = ({ + usuarios, + loading, + onDelete, + currentPage, + numPages, + onPageChange, +}: Props) => { + const currentUser = useAppSelector((state) => state.auth.currentUser); + const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_USUARIOS'); + + const corners = useAppSelector((state) => state.style.corners); + const bgColor = useAppSelector((state) => state.style.cardsColor); + + return ( + <> +

+ {loading && } + {!loading && + usuarios.map((item) => ( +

+ +

+ dark:divide-dark-700 overflow-x-auto' + } + > +

+ NombredeUsuario +

{item.usuario}

+ +

+ ContraseñaCifrada +

{item.pass}

+ +

+ RoldelUsuario +

{item.tipo}

+ + +

+ +

+ ))} + {!loading && usuarios.length === 0 && ( +

No data to display

+ )} +

+ +

+ + ); +}; + +export default ListUsuarios; diff --git a/frontend/src/components/Usuarios/TableUsuarios.tsx b/frontend/src/components/Usuarios/TableUsuarios.tsx new file mode 100644 index 0000000..10368af --- /dev/null +++ b/frontend/src/components/Usuarios/TableUsuarios.tsx @@ -0,0 +1,497 @@ +import React, { useEffect, useState, useMemo } from 'react'; +import { createPortal } from 'react-dom'; +import { ToastContainer, toast } from 'react-toastify'; +import BaseButton from '../BaseButton'; +import CardBoxModal from '../CardBoxModal'; +import CardBox from '../CardBox'; +import { + fetch, + update, + deleteItem, + setRefetch, + deleteItemsByIds, +} from '../../stores/usuarios/usuariosSlice'; +import { useAppDispatch, useAppSelector } from '../../stores/hooks'; +import { useRouter } from 'next/router'; +import { Field, Form, Formik } from 'formik'; +import { DataGrid, GridColDef } from '@mui/x-data-grid'; +import { loadColumns } from './configureUsuariosCols'; +import _ from 'lodash'; +import dataFormatter from '../../helpers/dataFormatter'; +import { dataGridStyles } from '../../styles'; + +import ListUsuarios from './ListUsuarios'; + +const perPage = 10; + +const TableSampleUsuarios = ({ + filterItems, + setFilterItems, + filters, + showGrid, +}) => { + const notify = (type, msg) => toast(msg, { type, position: 'bottom-center' }); + + const dispatch = useAppDispatch(); + const router = useRouter(); + + const pagesList = []; + const [id, setId] = useState(null); + const [currentPage, setCurrentPage] = useState(0); + const [filterRequest, setFilterRequest] = React.useState(''); + const [columns, setColumns] = useState([]); + const [selectedRows, setSelectedRows] = useState([]); + const [sortModel, setSortModel] = useState([ + { + field: '', + sort: 'desc', + }, + ]); + + const { + usuarios, + loading, + count, + notify: usuariosNotify, + refetch, + } = useAppSelector((state) => state.usuarios); + const { currentUser } = useAppSelector((state) => state.auth); + const focusRing = useAppSelector((state) => state.style.focusRingColor); + const bgColor = useAppSelector((state) => state.style.bgLayoutColor); + const corners = useAppSelector((state) => state.style.corners); + const numPages = + Math.floor(count / perPage) === 0 ? 1 : Math.ceil(count / perPage); + for (let i = 0; i < numPages; i++) { + pagesList.push(i); + } + + const loadData = async (page = currentPage, request = filterRequest) => { + if (page !== currentPage) setCurrentPage(page); + if (request !== filterRequest) setFilterRequest(request); + const { sort, field } = sortModel[0]; + + const query = `?page=${page}&limit=${perPage}${request}&sort=${sort}&field=${field}`; + dispatch(fetch({ limit: perPage, page, query })); + }; + + useEffect(() => { + if (usuariosNotify.showNotification) { + notify(usuariosNotify.typeNotification, usuariosNotify.textNotification); + } + }, [usuariosNotify.showNotification]); + + useEffect(() => { + if (!currentUser) return; + loadData(); + }, [sortModel, currentUser]); + + useEffect(() => { + if (refetch) { + loadData(0); + dispatch(setRefetch(false)); + } + }, [refetch, dispatch]); + + const [isModalInfoActive, setIsModalInfoActive] = useState(false); + const [isModalTrashActive, setIsModalTrashActive] = useState(false); + + const handleModalAction = () => { + setIsModalInfoActive(false); + setIsModalTrashActive(false); + }; + + const handleDeleteModalAction = (id: string) => { + setId(id); + setIsModalTrashActive(true); + }; + const handleDeleteAction = async () => { + if (id) { + await dispatch(deleteItem(id)); + await loadData(0); + setIsModalTrashActive(false); + } + }; + + const generateFilterRequests = useMemo(() => { + let request = '&'; + filterItems.forEach((item) => { + const isRangeFilter = filters.find( + (filter) => + filter.title === item.fields.selectedField && + (filter.number || filter.date), + ); + + if (isRangeFilter) { + const from = item.fields.filterValueFrom; + const to = item.fields.filterValueTo; + if (from) { + request += `${item.fields.selectedField}Range=${from}&`; + } + if (to) { + request += `${item.fields.selectedField}Range=${to}&`; + } + } else { + const value = item.fields.filterValue; + if (value) { + request += `${item.fields.selectedField}=${value}&`; + } + } + }); + return request; + }, [filterItems, filters]); + + const deleteFilter = (value) => { + const newItems = filterItems.filter((item) => item.id !== value); + + if (newItems.length) { + setFilterItems(newItems); + } else { + loadData(0, ''); + + setFilterItems(newItems); + } + }; + + const handleSubmit = () => { + loadData(0, generateFilterRequests); + }; + + const handleChange = (id) => (e) => { + const value = e.target.value; + const name = e.target.name; + + setFilterItems( + filterItems.map((item) => { + if (item.id !== id) return item; + if (name === 'selectedField') return { id, fields: { [name]: value } }; + + return { id, fields: { ...item.fields, [name]: value } }; + }), + ); + }; + + const handleReset = () => { + setFilterItems([]); + loadData(0, ''); + }; + + const onPageChange = (page: number) => { + loadData(page); + setCurrentPage(page); + }; + + useEffect(() => { + if (!currentUser) return; + + loadColumns(handleDeleteModalAction, `usuarios`, currentUser).then( + (newCols) => setColumns(newCols), + ); + }, [currentUser]); + + const handleTableSubmit = async (id: string, data) => { + if (!_.isEmpty(data)) { + await dispatch(update({ id, data })) + .unwrap() + .then((res) => res) + .catch((err) => { + throw new Error(err); + }); + } + }; + + const onDeleteRows = async (selectedRows) => { + await dispatch(deleteItemsByIds(selectedRows)); + await loadData(0); + }; + + const controlClasses = + 'w-full py-2 px-2 my-2 rounded dark:placeholder-gray-400 ' + + ` ${bgColor} ${focusRing} ${corners} ` + + 'dark:bg-slate-800 border'; + + const dataGrid = ( +

+ `datagrid--row`} + rows={usuarios ?? []} + columns={columns} + initialState={{ + pagination: { + paginationModel: { + pageSize: 10, + }, + }, + }} + disableRowSelectionOnClick + onProcessRowUpdateError={(params) => { + console.log('Error', params); + }} + processRowUpdate={async (newRow, oldRow) => { + const data = dataFormatter.dataGridEditFormatter(newRow); + + try { + await handleTableSubmit(newRow.id, data); + return newRow; + } catch { + return oldRow; + } + }} + sortingMode={'server'} + checkboxSelection + onRowSelectionModelChange={(ids) => { + setSelectedRows(ids); + }} + onSortModelChange={(params) => { + params.length + ? setSortModel(params) + : setSortModel([{ field: '', sort: 'desc' }]); + }} + rowCount={count} + pageSizeOptions={[10]} + paginationMode={'server'} + loading={loading} + onPaginationModelChange={(params) => { + onPageChange(params.page); + }} + /> +

+ ); + + return ( + <> + {filterItems && Array.isArray(filterItems) && filterItems.length ? ( + + null} + > +

+ <> + {filterItems && + filterItems.map((filterItem) => { + return ( +

+ Filter +

+ + {filters.map((selectOption) => ( + + ))} + +

+ {filters.find( + (filter) => + filter.title === filterItem?.fields?.selectedField, + )?.type === 'enum' ? ( +

Value

+ + + {filters + .find( + (filter) => + filter.title === + filterItem?.fields?.selectedField, + ) + ?.options?.map((option) => ( + + ))} + +

+ ) : filters.find( + (filter) => + filter.title === + filterItem?.fields?.selectedField, + )?.number ? ( +

+ From +

+ +

+ To +

+ +

+ ) : filters.find( + (filter) => + filter.title === + filterItem?.fields?.selectedField, + )?.date ? ( +

+ From +

+ +

+ To +

+ +

+ ) : ( +

+ Contains +

+ +

+ )} +

+ Action +

+ { + deleteFilter(filterItem.id); + }} + /> +

+ ); + })} +

+ + +

+ +

+ + + ) : null} + +

Are you sure you want to delete this item?

+ + + {usuarios && Array.isArray(usuarios) && !showGrid && ( + + )} + + {showGrid && dataGrid} + + {selectedRows.length > 0 && + createPortal( + onDeleteRows(selectedRows)} + />, + document.getElementById('delete-rows-button'), + )} + + + ); +}; + +export default TableSampleUsuarios; diff --git a/frontend/src/components/Usuarios/configureUsuariosCols.tsx b/frontend/src/components/Usuarios/configureUsuariosCols.tsx new file mode 100644 index 0000000..b6d683c --- /dev/null +++ b/frontend/src/components/Usuarios/configureUsuariosCols.tsx @@ -0,0 +1,98 @@ +import React from 'react'; +import BaseIcon from '../BaseIcon'; +import { mdiEye, mdiTrashCan, mdiPencilOutline } from '@mdi/js'; +import axios from 'axios'; +import { + GridActionsCellItem, + GridRowParams, + GridValueGetterParams, +} from '@mui/x-data-grid'; +import ImageField from '../ImageField'; +import { saveFile } from '../../helpers/fileSaver'; +import dataFormatter from '../../helpers/dataFormatter'; +import DataGridMultiSelect from '../DataGridMultiSelect'; +import ListActionsPopover from '../ListActionsPopover'; + +import { hasPermission } from '../../helpers/userPermissions'; + +type Params = (id: string) => void; + +export const loadColumns = async ( + onDelete: Params, + entityName: string, + + user, +) => { + async function callOptionsApi(entityName: string) { + if (!hasPermission(user, 'READ_' + entityName.toUpperCase())) return []; + + try { + const data = await axios(`/${entityName}/autocomplete?limit=100`); + return data.data; + } catch (error) { + console.log(error); + return []; + } + } + + const hasUpdatePermission = hasPermission(user, 'UPDATE_USUARIOS'); + + return [ + { + field: 'usuario', + headerName: 'NombredeUsuario', + flex: 1, + minWidth: 120, + filterable: false, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + + editable: hasUpdatePermission, + }, + + { + field: 'pass', + headerName: 'ContraseñaCifrada', + flex: 1, + minWidth: 120, + filterable: false, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + + editable: hasUpdatePermission, + }, + + { + field: 'tipo', + headerName: 'RoldelUsuario', + flex: 1, + minWidth: 120, + filterable: false, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + + editable: hasUpdatePermission, + }, + + { + field: 'actions', + type: 'actions', + minWidth: 30, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + getActions: (params: GridRowParams) => { + return [ +

+ +

, + ]; + }, + }, + ]; +}; diff --git a/frontend/src/components/WidgetCreator/RoleSelect.tsx b/frontend/src/components/WidgetCreator/RoleSelect.tsx new file mode 100644 index 0000000..c2da317 --- /dev/null +++ b/frontend/src/components/WidgetCreator/RoleSelect.tsx @@ -0,0 +1,65 @@ +import React, { useEffect, useId, useState } from 'react'; +import { AsyncPaginate } from 'react-select-async-paginate'; +import axios from 'axios'; + +export const RoleSelect = ({ + options, + field, + form, + itemRef, + disabled, + currentUser, +}) => { + const [value, setValue] = useState(null); + const PAGE_SIZE = 100; + + React.useEffect(() => { + if (currentUser.app_role.id) { + setValue({ + value: currentUser.app_role.id, + label: currentUser.app_role.name, + }); + } + }, [currentUser]); + + useEffect(() => { + if (options?.value && options?.label) { + setValue({ value: options.value, label: options.label }); + } + }, [options?.id, field?.value?.id]); + + const mapResponseToValuesAndLabels = (data) => ({ + value: data.id, + label: data.label, + }); + const handleChange = (option) => { + form.setFieldValue(field.name, option); + setValue(option); + }; + + async function callApi(inputValue: string, loadedOptions: any[]) { + const path = `/${itemRef}/autocomplete?limit=${PAGE_SIZE}&offset=${ + loadedOptions.length + }${inputValue ? `&query=${inputValue}` : ''}`; + const { data } = await axios(path); + return { + options: data.map(mapResponseToValuesAndLabels), + hasMore: data.length === PAGE_SIZE, + }; + } + return ( + 'px-1 py-2', + }} + classNamePrefix={'react-select'} + instanceId={useId()} + value={value} + debounceTimeout={1000} + loadOptions={callApi} + onChange={handleChange} + defaultOptions + isDisabled={disabled} + /> + ); +}; diff --git a/frontend/src/components/WidgetCreator/WidgetCreator.tsx b/frontend/src/components/WidgetCreator/WidgetCreator.tsx new file mode 100644 index 0000000..0f90c85 --- /dev/null +++ b/frontend/src/components/WidgetCreator/WidgetCreator.tsx @@ -0,0 +1,156 @@ +import CardBox from '../CardBox'; +import { mdiCog } from '@mdi/js'; +import { Field, Form, Formik } from 'formik'; +import { ToastContainer, toast } from 'react-toastify'; +import FormField from '../FormField'; +import React from 'react'; +import { useTranslation } from 'next-i18next'; +import { + aiPrompt, + setErrorNotification, + resetNotify, +} from '../../stores/openAiSlice'; +import { useAppDispatch, useAppSelector } from '../../stores/hooks'; + +import { fetchWidgets } from '../../stores/roles/rolesSlice'; + +import BaseButton from '../BaseButton'; +import CardBoxModal from '../CardBoxModal'; +import { RoleSelect } from './RoleSelect'; + +export const WidgetCreator = ({ + currentUser, + isFetchingQuery, + setWidgetsRole, + widgetsRole, +}) => { + const { t } = useTranslation('common'); + const dispatch = useAppDispatch(); + const [isModalOpen, setIsModalOpen] = React.useState(false); + const { notify: openAiNotify } = useAppSelector((state) => state.openAi); + + const notify = (type, msg) => toast(msg, { type, position: 'bottom-center' }); + React.useEffect(() => { + if (openAiNotify.showNotification) { + notify(openAiNotify.typeNotification, openAiNotify.textNotification); + dispatch(resetNotify()); + } + }, [openAiNotify.showNotification]); + + const openModal = (): void => { + setIsModalOpen(true); + }; + + const handleCloseModal = (value = {}) => { + setWidgetsRole(value); + setIsModalOpen(false); + }; + + const getWidgets = async () => { + await dispatch(fetchWidgets(widgetsRole?.role?.value || '')); + }; + + const smartSearch = async ( + values: { description: string }, + resetForm: any, + ) => { + const description = values.description; + const projectId = '32896'; + + const payload = { + roleId: widgetsRole?.role?.value, + description, + projectId, + userId: currentUser?.id, + }; + const { payload: responcePayload, error }: any = await dispatch( + aiPrompt(payload), + ); + + await getWidgets().then(); + + resetForm({ values: { description: '' } }); + if (responcePayload.data?.error || error) { + const errorMessage = + responcePayload.data?.error?.message || error?.message; + await dispatch( + setErrorNotification(errorMessage || 'Error with widget creation'), + ); + } + }; + + return ( + <> + + + smartSearch(values, resetForm)} + > + + + + handleCloseModal(values)} + > + {({ submitForm }) => ( + setIsModalOpen(false)} + > +

What role are we showing and creating widgets for?

+ + + + )} + + + + ); +}; diff --git a/frontend/src/config.ts b/frontend/src/config.ts new file mode 100644 index 0000000..56947f1 --- /dev/null +++ b/frontend/src/config.ts @@ -0,0 +1,22 @@ +export const hostApi = + process.env.NODE_ENV === 'development' && !process.env.NEXT_PUBLIC_BACK_API + ? 'http://localhost' + : ''; +export const portApi = + process.env.NODE_ENV === 'development' && !process.env.NEXT_PUBLIC_BACK_API + ? 8080 + : ''; +export const baseURLApi = `${hostApi}${portApi ? `:${portApi}` : ``}/api`; + +export const localStorageDarkModeKey = 'darkMode'; + +export const localStorageStyleKey = 'style'; + +export const containerMaxW = 'xl:max-w-full xl:mx-auto 2xl:mx-20'; + +export const appTitle = 'created by Flatlogic generator!'; + +export const getPageTitle = (currentPageTitle: string) => + `${currentPageTitle} — ${appTitle}`; + +export const tinyKey = process.env.NEXT_PUBLIC_TINY_KEY || ''; diff --git a/frontend/src/css/_app.css b/frontend/src/css/_app.css new file mode 100644 index 0000000..4179b23 --- /dev/null +++ b/frontend/src/css/_app.css @@ -0,0 +1,34 @@ +html { + @apply h-full; +} + +body { + @apply pt-14 xl:pl-60 h-full; +} + +#app { + @apply w-screen transition-position lg:w-auto h-full flex flex-col; +} + +.dropdown { + @apply cursor-pointer; +} + +li.stack-item:not(:last-child):after { + content: '/'; + @apply inline-block pl-2; +} + +.m-clipped, +.m-clipped body { + @apply overflow-hidden lg:overflow-visible; +} + +.full-screen body { + @apply p-0; +} + +.main-navbar, +.app-sidebar-brand { + box-shadow: 0px -1px 40px rgba(112, 144, 176, 0.2); +} diff --git a/frontend/src/css/_calendar.css b/frontend/src/css/_calendar.css new file mode 100644 index 0000000..7b0d35d --- /dev/null +++ b/frontend/src/css/_calendar.css @@ -0,0 +1,62 @@ +.rbc-event { + @apply bg-skyBlueTheme-buttonColor !important; +} + +.rbc-show-more { + @apply text-primaryText dark:text-white bg-transparent !important; +} + +.rbc-btn-group button { + @apply text-primaryText border-gray-400 dark:text-white !important; +} + +.rbc-btn-group button:hover { + @apply bg-skyBlueTheme-buttonColor text-white dark:bg-dark-700 !important; +} + +.rbc-btn-group button.rbc-active { + @apply bg-skyBlueTheme-buttonColor text-white dark:bg-blue-600 !important; +} + +.rbc-btn-group button:focus { + @apply bg-skyBlueTheme-buttonColor dark:bg-blue-600 !important; +} + +.rbc-day-bg.rbc-off-range-bg { + @apply bg-skyBlueTheme-mainBG dark:bg-dark-800 !important; +} +.rbc-current-time-indicator { + @apply h-1 !important; +} +.rbc-today { + @apply dark:bg-dark-600/40 !important; +} + +.rbc-day-bg.rbc-selected-cell { + @apply dark:bg-dark-500 !important; +} + +.rbc-day-bg, +.rbc-timeslot-group, +.rbc-time-header, +.rbc-event, +.rbc-btn-group, +.rbc-month-view, +.rbc-month-view .rbc-header, +.rbc-month-row, +.rbc-date-cell { + @apply border-gray-400 !important; +} + +.rbc-timeslot-group { + @apply border-gray-400 !important; +} + +.rbc-time-header, +.rbc-month-row { + @apply border-gray-400 !important; +} + +.rbc-date-cell { + @apply border-gray-400 !important; +} diff --git a/frontend/src/css/_checkbox-radio-switch.css b/frontend/src/css/_checkbox-radio-switch.css new file mode 100644 index 0000000..cf17c69 --- /dev/null +++ b/frontend/src/css/_checkbox-radio-switch.css @@ -0,0 +1,73 @@ +@layer components { + .checkbox, + .radio, + .switch { + @apply inline-flex items-center cursor-pointer relative; + } + + .checkbox input[type='checkbox'], + .radio input[type='radio'], + .switch input[type='checkbox'] { + @apply absolute left-0 opacity-0 -z-1; + } + + .checkbox input[type='checkbox'] + .check, + .radio input[type='radio'] + .check, + .switch input[type='checkbox'] + .check { + @apply border-gray-700 border transition-colors duration-200 dark:bg-slate-800; + } + + .checkbox input[type='checkbox']:focus + .check, + .radio input[type='radio']:focus + .check, + .switch input[type='checkbox']:focus + .check { + @apply ring ring-skyBlueTheme-800; + } + + .checkbox input[type='checkbox'] + .check, + .radio input[type='radio'] + .check { + @apply block w-5 h-5; + } + + .checkbox input[type='checkbox'] + .check { + @apply rounded; + } + + .switch input[type='checkbox'] + .check { + @apply flex items-center shrink-0 w-12 h-6 p-0.5 bg-gray-200; + } + + .radio input[type='radio'] + .check, + .switch input[type='checkbox'] + .check, + .switch input[type='checkbox'] + .check:before { + @apply rounded-full; + } + + .checkbox input[type='checkbox']:checked + .check, + .radio input[type='radio']:checked + .check { + @apply bg-no-repeat bg-center border-4; + } + + .checkbox input[type='checkbox']:checked + .check { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3Cpath style='fill:%23fff' d='M 0.04038059,0.6267767 0.14644661,0.52071068 0.42928932,0.80355339 0.3232233,0.90961941 z M 0.21715729,0.80355339 0.85355339,0.16715729 0.95961941,0.2732233 0.3232233,0.90961941 z'%3E%3C/path%3E%3C/svg%3E"); + } + + .radio input[type='radio']:checked + .check { + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z' /%3E%3C/svg%3E"); + } + + .switch input[type='checkbox']:checked + .check, + .checkbox input[type='checkbox']:checked + .check, + .radio input[type='radio']:checked + .check { + @apply bg-skyBlueTheme-buttonColor border-skyBlueTheme-buttonColor; + } + + .switch input[type='checkbox'] + .check:before { + content: ''; + @apply block w-5 h-5 bg-white border border-gray-700; + } + + .switch input[type='checkbox']:checked + .check:before { + transform: translate3d(110%, 0, 0); + @apply border-blue-600; + } +} diff --git a/frontend/src/css/_helper.css b/frontend/src/css/_helper.css new file mode 100644 index 0000000..9425a7c --- /dev/null +++ b/frontend/src/css/_helper.css @@ -0,0 +1,24 @@ +.helper-container { + right: 0; + top: 70px; + transform: translateX(100%); + + .tab { + top: 0; + left: 0; + transform: translateX(-100%); + } + + .tab:hover { + @apply bg-gray-900 cursor-pointer; + } +} + +.helper-container.open { + transform: translateX(0); +} + +.react-datepicker-wrapper, +.react-datepicker-popper { + z-index: 10 !important; +} diff --git a/frontend/src/css/_progress.css b/frontend/src/css/_progress.css new file mode 100644 index 0000000..d419f78 --- /dev/null +++ b/frontend/src/css/_progress.css @@ -0,0 +1,21 @@ +@layer base { + progress { + @apply h-3 rounded-full overflow-hidden; + } + + progress::-webkit-progress-bar { + @apply bg-blue-200; + } + + progress::-webkit-progress-value { + @apply bg-blue-500; + } + + progress::-moz-progress-bar { + @apply bg-blue-500; + } + + progress::-ms-fill { + @apply bg-blue-500 border-0; + } +} diff --git a/frontend/src/css/_rich-text.css b/frontend/src/css/_rich-text.css new file mode 100644 index 0000000..9ecfd39 --- /dev/null +++ b/frontend/src/css/_rich-text.css @@ -0,0 +1,63 @@ +/* Editor background */ +.tox .tox-editor-container { + @apply bg-skyBlueTheme-mainBG dark:bg-dark-800 !important; +} + +/* Toolbar background */ +.tox .tox-toolbar, +.tox .tox-editor-header, +.tox .tox-menu, +.tox .tox-menubar, +.tox .tox-toolbar__primary { + @apply bg-skyBlueTheme-cardColor dark:bg-dark-800 !important; +} + +.tox .tox-collection--toolbar .tox-collection__item--active, +.tox .tox-collection--toolbar .tox-collection__item--enabled { + @apply bg-skyBlueTheme-diversityMain dark:bg-dark-600 !important; +} + +/* Toolbar button color */ +.tox .tox-toolbar__group button, +.tox .tox-mbtn { + @apply text-skyBlueTheme-text dark:text-white !important; +} + +.tox .tox-tbtn svg { + @apply fill-skyBlueTheme-text dark:text-white !important; +} + +/* Toolbar button hover/active state */ +.tox .tox-tbtn--enabled, +.tox .tox-tbtn--enabled:hover, +.tox .tox-tbtn:hover, +.tox .tox-mbtn:hover { + @apply bg-skyBlueTheme-diversityMain dark:bg-dark-600 !important; +} + +/* Status bar styles */ +.tox .tox-statusbar, +.tox { + @apply bg-skyBlueTheme-mainBG dark:bg-dark-800 text-skyBlueTheme-text dark:text-white !important; +} + +.tox .tox-statusbar a, +.tox .tox-statusbar__path-item, +.tox .tox-statusbar__wordcount { + @apply text-skyBlueTheme-text dark:text-white !important; +} + +/* Dropdown menu item text */ +.tox .tox-collection__item { + @apply text-skyBlueTheme-text dark:text-white !important; +} + +/* Editor content area */ +.tox.tox-tinymce { + @apply border border-skyBlueTheme-outsideCardColor dark:border-dark-700 text-skyBlueTheme-text dark:text-white !important; +} + +/* Change the content area background color */ +.tox .tox-edit-area__iframe { + @apply bg-skyBlueTheme-mainBG dark:bg-dark-800 text-skyBlueTheme-text dark:text-white !important; +} diff --git a/frontend/src/css/_scrollbars.css b/frontend/src/css/_scrollbars.css new file mode 100644 index 0000000..11445a9 --- /dev/null +++ b/frontend/src/css/_scrollbars.css @@ -0,0 +1,41 @@ +@layer base { + html { + scrollbar-width: thin; + scrollbar-color: rgb(156, 163, 175) rgb(249, 250, 251); + } + + body::-webkit-scrollbar { + width: 8px; + height: 8px; + } + + body::-webkit-scrollbar-track { + @apply bg-gray-50; + } + + body::-webkit-scrollbar-thumb { + @apply bg-gray-400 rounded; + } + + body::-webkit-scrollbar-thumb:hover { + @apply bg-gray-500; + } +} + +@layer utilities { + .dark-scrollbars-compat { + scrollbar-color: rgb(71, 85, 105) rgb(30, 41, 59); + } + + .dark-scrollbars::-webkit-scrollbar-track { + @apply bg-slate-800; + } + + .dark-scrollbars::-webkit-scrollbar-thumb { + @apply bg-slate-600; + } + + .dark-scrollbars::-webkit-scrollbar-thumb:hover { + @apply bg-slate-500; + } +} diff --git a/frontend/src/css/_select-dropdown.css b/frontend/src/css/_select-dropdown.css new file mode 100644 index 0000000..c5f88c0 --- /dev/null +++ b/frontend/src/css/_select-dropdown.css @@ -0,0 +1,32 @@ +.react-select__control { + @apply bg-skyBlueTheme-cardColor rounded-lg dark:bg-dark-800 dark:border-dark-700 !important; +} + +.react-select__single-value { + @apply text-primaryText dark:text-white !important; +} + +.react-select__menu { + @apply bg-skyBlueTheme-cardColor dark:border-dark-700; +} + +.react-select__menu-list { + @apply bg-skyBlueTheme-cardColor dark:bg-dark-800 dark:border-dark-700 dark:rounded !important; +} + +.react-select__option { + @apply cursor-pointer hover:bg-gray-200 hover:bg-skyBlueTheme-cardColor dark:hover:bg-dark-700 !important; +} + +.react-select__option--is-focused { + @apply bg-skyBlueTheme-cardColor text-primaryText dark:bg-dark-800 dark:text-white hover:dark:bg-dark-700 hover:dark:text-white !important; +} + +.react-select__option--is-selected, +.react-select__option--is-selected:hover { + @apply bg-skyBlueTheme-cardColor dark:bg-dark-600 !important; +} + +.react-select__multi-value__remove { + @apply text-skyBlueTheme-cardColor dark:bg-dark-600 dark:text-white hover:dark:bg-red-300 hover:dark:text-red-600 !important; +} diff --git a/frontend/src/css/_table.css b/frontend/src/css/_table.css new file mode 100644 index 0000000..b2ab215 --- /dev/null +++ b/frontend/src/css/_table.css @@ -0,0 +1,123 @@ +@layer base { + table { + @apply w-full; + } + + thead { + @apply hidden lg:table-header-group; + } + + tr { + @apply max-w-full block relative border-b-4 border-gray-100 + lg:table-row lg:border-b-0 dark:border-slate-800; + } + + tr:last-child { + @apply border-b-0; + } + + td:not(:first-child) { + @apply lg:border-l lg:border-t-0 lg:border-r-0 lg:border-b-0 lg:border-gray-100 lg:dark:border-slate-700; + } + + th { + @apply lg:text-left lg:p-3 border-b; + } + + th.sortable { + cursor: pointer; + } + + th.sortable:hover:after { + transition: all 1s; + position: absolute; + + content: '↕'; + + margin-left: 1rem; + } + + th.sortable.asc:hover:after { + content: '↑'; + } + th.sortable.desc:hover:after { + content: '↓'; + } + + td { + @apply flex justify-between text-right py-3 px-4 align-top border-b border-gray-100 + lg:table-cell lg:text-left lg:p-3 lg:align-middle lg:border-b-0 dark:border-slate-800 dark:text-white; + } + + td:last-child { + @apply border-b-0; + } + + tbody tr, + tbody tr:nth-child(odd) { + @apply lg:hover:bg-skyBlueTheme-mainBG; + } + + tbody tr:nth-child(even) { + @apply lg:bg-skyBlueTheme-mainBG dark:bg-pavitra-300/70; + } + + td:before { + content: attr(data-label); + @apply font-semibold pr-3 text-left lg:hidden; + } + + tbody tr td { + @apply text-sm font-normal text-primaryText dark:text-white; + } + + .datagrid--table, + .MuiDataGrid-root { + @apply rounded border-none !important; + + @apply font-sans text-primaryText !important; + } + + .datagrid--header { + @apply uppercase !important; + } + + .datagrid--header, + .datagrid--header .MuiIconButton-root, + .datagrid--cell, + .datagrid--cell .MuiIconButton-root { + @apply text-primaryText dark:text-white; + } + + .datagrid--cell .MuiDataGrid-booleanCell { + @apply text-primaryText dark:text-white !important; + } + + .datagrid--cell .MuiIconButton-root:hover { + @apply text-primaryText dark:text-white dark:bg-dark-700; + } + + .datagrid--row { + @apply even:bg-skyBlueTheme-mainBG dark:even:bg-[#1B1D22] dark:odd:bg-dark-900 !important; + } + + .datagrid--row:hover { + @apply bg-skyBlueTheme-mainBG !important; + } + + .datagrid--table .MuiTablePagination-root { + @apply text-primaryText dark:text-white; + } + + .datagrid--table .MuiTablePagination-root .MuiButtonBase-root:disabled { + @apply text-primaryText dark:text-dark-700; + } + + .datagrid--table .MuiTablePagination-root .MuiButtonBase-root:hover { + @apply dark:bg-dark-700; + } + + .MuiButton-colorInherit { + @apply text-skyBlueTheme-iconsColor dark:text-dark-700 !important; + } +} diff --git a/frontend/src/css/_theme.css b/frontend/src/css/_theme.css new file mode 100644 index 0000000..765b8d3 --- /dev/null +++ b/frontend/src/css/_theme.css @@ -0,0 +1,105 @@ +.theme-pink { + .app-sidebar { + @apply bg-pavitra-900 text-white; + + .menu-title, + .menu-item-icon, + .menu-item-link { + @apply text-white; + } + } + + .app-sidebar-brand { + @apply bg-white; + } + + .bg-blue-600 { + @apply bg-pavitra-800; + } + + .border-blue-700 { + @apply border-pink-700; + } + + .checkbox input[type='checkbox']:checked + .check, + .radio input[type='radio']:checked + .check { + @apply border-pavitra-800; + } + + .helper-container .tab { + @apply bg-pavitra-900; + } + + .focus\:ring:focus { + --tw-ring-color: #14142a; + } + + .checkbox input[type='checkbox']:focus + .check, + .radio input[type='radio']:focus + .check, + .switch input[type='checkbox']:focus + .check { + --tw-ring-color: #14142a; + } +} + +.theme-green { + .app-sidebar { + @apply bg-pavitra-800 text-white; + + .menu-title, + .menu-item-icon, + .menu-item-link { + @apply text-white; + } + } + + .app-sidebar-brand { + @apply bg-white; + } + + .bg-blue-600 { + @apply bg-pavitra-800; + } + + .border-blue-700 { + @apply bg-pavitra-700; + } + + .hover\:bg-blue-700:hover { + @apply bg-pavitra-700; + } + + .text-blue-600 { + @apply text-pavitra-900; + } + + .checkbox input[type='checkbox']:checked + .check, + .radio input[type='radio']:checked + .check { + @apply border-pavitra-800; + } + + .helper-container .tab { + @apply bg-pavitra-700; + } + + .focus\:ring:focus { + --tw-ring-color: #4e4b66; + } + + .checkbox input[type='checkbox']:focus + .check, + .radio input[type='radio']:focus + .check, + .switch input[type='checkbox']:focus + .check { + --tw-ring-color: #4e4b66; + } + + .text-blue-500 { + @apply text-pavitra-800; + } + + .hover\:text-blue-600:hover { + @apply text-pavitra-800; + } + + .active\:text-blue-700:active { + @apply text-pavitra-800; + } +} diff --git a/frontend/src/css/main.css b/frontend/src/css/main.css new file mode 100644 index 0000000..05ff798 --- /dev/null +++ b/frontend/src/css/main.css @@ -0,0 +1,62 @@ +@import 'tailwind/_base.css'; +@import 'tailwind/_components.css'; +@import 'tailwind/_utilities.css'; +@import 'intro.js/introjs.css'; +@import '_checkbox-radio-switch.css'; +@import '_progress.css'; +@import '_scrollbars.css'; +@import '_table.css'; +@import '_helper.css'; +@import '_calendar.css'; +@import '_select-dropdown.css'; +@import '_theme.css'; +@import '_rich-text.css'; + +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); + +body { + @apply font-sans text-primaryText !important; +} +.MuiList-root, +.MuiListItemIcon-root { + @apply text-skyBlueTheme-buttonColor !important; +} +.MuiCheckbox-colorPrimary { + @apply text-skyBlueTheme-buttonColor !important; +} +.MuiDataGrid-row.Mui-selected { + @apply bg-skyBlueTheme-mainBG !important; +} +.MuiDataGrid-withBorderColor { + @apply border-skyBlueTheme-mainBG !important; +} +.MuiDataGrid-cell:focus { + @apply outline-skyBlueTheme-buttonColor !important; +} + +.introjs-tooltip { + @apply min-w-[400px] max-w-[480px] p-2 !important; +} + +.introjs-tooltipReferenceLayer * { + @apply font-sans text-base text-gray-900; + + font-family: 'Poppins', sans-serif !important; +} + +.good-img { + @apply -mt-96 !important; +} +.end-img { + @apply -mt-72 !important; +} +.introjs-button { + @apply bg-skyBlueTheme-buttonColor text-white !important; + text-shadow: none !important; +} +.introjs-bullets ul li a.active { + @apply bg-skyBlueTheme-iconsColor !important; +} +.introjs-prevbutton { + @apply bg-transparent border border-skyBlueTheme-buttonColor text-skyBlueTheme-buttonColor !important; +} diff --git a/frontend/src/css/tailwind/_base.css b/frontend/src/css/tailwind/_base.css new file mode 100644 index 0000000..2f02db5 --- /dev/null +++ b/frontend/src/css/tailwind/_base.css @@ -0,0 +1 @@ +@tailwind base; diff --git a/frontend/src/css/tailwind/_components.css b/frontend/src/css/tailwind/_components.css new file mode 100644 index 0000000..020aaba --- /dev/null +++ b/frontend/src/css/tailwind/_components.css @@ -0,0 +1 @@ +@tailwind components; diff --git a/frontend/src/css/tailwind/_utilities.css b/frontend/src/css/tailwind/_utilities.css new file mode 100644 index 0000000..65dd5f6 --- /dev/null +++ b/frontend/src/css/tailwind/_utilities.css @@ -0,0 +1 @@ +@tailwind utilities; diff --git a/frontend/src/helpers/dataFormatter.js b/frontend/src/helpers/dataFormatter.js new file mode 100644 index 0000000..77e50e2 --- /dev/null +++ b/frontend/src/helpers/dataFormatter.js @@ -0,0 +1,193 @@ +import dayjs from 'dayjs'; +import _ from 'lodash'; + +export default { + filesFormatter(arr) { + if (!arr || !arr.length) return []; + return arr.map((item) => item); + }, + imageFormatter(arr) { + if (!arr || !arr.length) return []; + return arr.map((item) => ({ + publicUrl: item.publicUrl || '', + })); + }, + oneImageFormatter(arr) { + if (!arr || !arr.length) return ''; + return arr[0].publicUrl || ''; + }, + dateFormatter(date) { + if (!date) return ''; + return dayjs(date).format('YYYY-MM-DD'); + }, + dateTimeFormatter(date) { + if (!date) return ''; + return dayjs(date).format('YYYY-MM-DD HH:mm'); + }, + booleanFormatter(val) { + return val ? 'Yes' : 'No'; + }, + dataGridEditFormatter(obj) { + return _.transform(obj, (result, value, key) => { + if (_.isArray(value)) { + result[key] = _.map(value, 'id'); + } else if (_.isObject(value)) { + result[key] = value.id; + } else { + result[key] = value; + } + }); + }, + + alumnosManyListFormatter(val) { + if (!val || !val.length) return []; + return val.map((item) => item.num_control); + }, + alumnosOneListFormatter(val) { + if (!val) return ''; + return val.num_control; + }, + alumnosManyListFormatterEdit(val) { + if (!val || !val.length) return []; + return val.map((item) => { + return { id: item.id, label: item.num_control }; + }); + }, + alumnosOneListFormatterEdit(val) { + if (!val) return ''; + return { label: val.num_control, id: val.id }; + }, + + alumnos_cursosManyListFormatter(val) { + if (!val || !val.length) return []; + return val.map((item) => item.status); + }, + alumnos_cursosOneListFormatter(val) { + if (!val) return ''; + return val.status; + }, + alumnos_cursosManyListFormatterEdit(val) { + if (!val || !val.length) return []; + return val.map((item) => { + return { id: item.id, label: item.status }; + }); + }, + alumnos_cursosOneListFormatterEdit(val) { + if (!val) return ''; + return { label: val.status, id: val.id }; + }, + + cursosManyListFormatter(val) { + if (!val || !val.length) return []; + return val.map((item) => item.nombre); + }, + cursosOneListFormatter(val) { + if (!val) return ''; + return val.nombre; + }, + cursosManyListFormatterEdit(val) { + if (!val || !val.length) return []; + return val.map((item) => { + return { id: item.id, label: item.nombre }; + }); + }, + cursosOneListFormatterEdit(val) { + if (!val) return ''; + return { label: val.nombre, id: val.id }; + }, + + instructoresManyListFormatter(val) { + if (!val || !val.length) return []; + return val.map((item) => item.status); + }, + instructoresOneListFormatter(val) { + if (!val) return ''; + return val.status; + }, + instructoresManyListFormatterEdit(val) { + if (!val || !val.length) return []; + return val.map((item) => { + return { id: item.id, label: item.status }; + }); + }, + instructoresOneListFormatterEdit(val) { + if (!val) return ''; + return { label: val.status, id: val.id }; + }, + + personasManyListFormatter(val) { + if (!val || !val.length) return []; + return val.map((item) => item.nombre); + }, + personasOneListFormatter(val) { + if (!val) return ''; + return val.nombre; + }, + personasManyListFormatterEdit(val) { + if (!val || !val.length) return []; + return val.map((item) => { + return { id: item.id, label: item.nombre }; + }); + }, + personasOneListFormatterEdit(val) { + if (!val) return ''; + return { label: val.nombre, id: val.id }; + }, + + requisitosManyListFormatter(val) { + if (!val || !val.length) return []; + return val.map((item) => item.documento); + }, + requisitosOneListFormatter(val) { + if (!val) return ''; + return val.documento; + }, + requisitosManyListFormatterEdit(val) { + if (!val || !val.length) return []; + return val.map((item) => { + return { id: item.id, label: item.documento }; + }); + }, + requisitosOneListFormatterEdit(val) { + if (!val) return ''; + return { label: val.documento, id: val.id }; + }, + + rolesManyListFormatter(val) { + if (!val || !val.length) return []; + return val.map((item) => item.name); + }, + rolesOneListFormatter(val) { + if (!val) return ''; + return val.name; + }, + rolesManyListFormatterEdit(val) { + if (!val || !val.length) return []; + return val.map((item) => { + return { id: item.id, label: item.name }; + }); + }, + rolesOneListFormatterEdit(val) { + if (!val) return ''; + return { label: val.name, id: val.id }; + }, + + permissionsManyListFormatter(val) { + if (!val || !val.length) return []; + return val.map((item) => item.name); + }, + permissionsOneListFormatter(val) { + if (!val) return ''; + return val.name; + }, + permissionsManyListFormatterEdit(val) { + if (!val || !val.length) return []; + return val.map((item) => { + return { id: item.id, label: item.name }; + }); + }, + permissionsOneListFormatterEdit(val) { + if (!val) return ''; + return { label: val.name, id: val.id }; + }, +}; diff --git a/frontend/src/helpers/fileSaver.ts b/frontend/src/helpers/fileSaver.ts new file mode 100644 index 0000000..242b540 --- /dev/null +++ b/frontend/src/helpers/fileSaver.ts @@ -0,0 +1,6 @@ +import { saveAs } from 'file-saver'; + +export const saveFile = (e, url: string, name: string) => { + e.stopPropagation(); + saveAs(url, name); +}; diff --git a/frontend/src/helpers/humanize.ts b/frontend/src/helpers/humanize.ts new file mode 100644 index 0000000..61b6407 --- /dev/null +++ b/frontend/src/helpers/humanize.ts @@ -0,0 +1,12 @@ +export function humanize(str: string) { + if (!str) { + return ''; + } + return str + .toString() + .replace(/^[\s_]+|[\s_]+$/g, '') + .replace(/[_\s]+/g, ' ') + .replace(/^[a-z]/, function (m) { + return m.toUpperCase(); + }); +} diff --git a/frontend/src/helpers/notifyStateHandler.ts b/frontend/src/helpers/notifyStateHandler.ts new file mode 100644 index 0000000..ae21899 --- /dev/null +++ b/frontend/src/helpers/notifyStateHandler.ts @@ -0,0 +1,32 @@ +export const resetNotify = (state) => { + state.notify.showNotification = false; + state.notify.typeNotification = ''; + state.notify.textNotification = ''; +}; +export const rejectNotify = (state, action) => { + if (typeof action.payload === 'string') { + state.notify.textNotification = action.payload; + } else if (typeof action === 'object') { + const obj = { ...action.payload?.errors }; + delete obj['_errors']; + + let msg = ''; + + for (const key in obj) { + msg += `${key}: ${obj[key]['_errors']}; \n `; + } + + state.notify.textNotification = msg; + } else { + state.notify.textNotification = 'Network error'; + } + state.notify.textNotification = + state.notify.textNotification || 'Network error'; + state.notify.typeNotification = 'error'; + state.notify.showNotification = true; +}; +export const fulfilledNotify = (state, msg) => { + state.notify.textNotification = msg; + state.notify.typeNotification = 'success'; + state.notify.showNotification = true; +}; diff --git a/frontend/src/helpers/pexels.ts b/frontend/src/helpers/pexels.ts new file mode 100644 index 0000000..524a1b2 --- /dev/null +++ b/frontend/src/helpers/pexels.ts @@ -0,0 +1,75 @@ +import axios from 'axios'; + +export async function getPexelsImage() { + try { + const response = await axios.get(`/pexels/image`); + return response.data; + } catch (error) { + console.error('Error fetching image:', error); + return null; + } +} + +export async function getPexelsVideo() { + try { + const response = await axios.get(`/pexels/video`); + return response.data; + } catch (error) { + console.error('Error fetching video:', error); + return null; + } +} + +let localStorageLock = false; + +export async function getMultiplePexelsImages( + queries = ['home', 'apple', 'pizza', 'mountains', 'cat'], +) { + const normalizeQuery = (query) => + query.trim().toLowerCase().replace(/\s+/g, ''); + + while (localStorageLock) { + await new Promise((resolve) => setTimeout(resolve, 50)); + } + localStorageLock = true; + + const cachedImages = + JSON.parse(localStorage.getItem('pexelsImagesCache')) || {}; + + const isImageCached = (query) => { + const normalizedQuery = normalizeQuery(query); + const cached = cachedImages[normalizedQuery]; + const isCached = + cached && cached.src && cached.photographer && cached.photographer_url; + return isCached; + }; + + const missingQueries = queries.filter((query) => !isImageCached(query)); + + if (missingQueries.length > 0) { + const queryString = missingQueries.join(','); + + try { + const response = await axios.get(`/pexels/multiple-images`, { + params: { queries: queryString }, + }); + + missingQueries.forEach((query, index) => { + const normalizedQuery = normalizeQuery(query); + if (!cachedImages[normalizedQuery]) { + cachedImages[normalizedQuery] = response.data[index]; + } + }); + + localStorage.setItem('pexelsImagesCache', JSON.stringify(cachedImages)); + } catch (error) { + console.error(error); + } + } + + const result = queries.map((query) => cachedImages[normalizeQuery(query)]); + + localStorageLock = false; + + return result; +} diff --git a/frontend/src/helpers/userPermissions.ts b/frontend/src/helpers/userPermissions.ts new file mode 100644 index 0000000..377546b --- /dev/null +++ b/frontend/src/helpers/userPermissions.ts @@ -0,0 +1,18 @@ +export function hasPermission(user, permission_name: string | string[]) { + if (!user?.app_role?.name) return false; + if (!permission_name) { + return true; + } + const permissions = new Set([ + ...(user?.custom_permissions ?? []).map((p) => p.name), + ...(user?.app_role_permissions ?? []).map((p) => p.name), + ]); + + if (typeof permission_name === 'string') { + return ( + permissions.has(permission_name) || user.app_role.name === 'Administrator' + ); + } else { + return permission_name.some((permission) => permissions.has(permission)); + } +} diff --git a/frontend/src/hooks/sampleData.ts b/frontend/src/hooks/sampleData.ts new file mode 100644 index 0000000..8c74ad5 --- /dev/null +++ b/frontend/src/hooks/sampleData.ts @@ -0,0 +1,22 @@ +import useSWR from 'swr'; +const fetcher = (url: string) => fetch(url).then((res) => res.json()); + +export const useSampleClients = () => { + const { data, error } = useSWR('/data-sources/clients.json', fetcher); + + return { + clients: data?.data ?? [], + isLoading: !error && !data, + isError: error, + }; +}; + +export const useSampleTransactions = () => { + const { data, error } = useSWR('/data-sources/history.json', fetcher); + + return { + transactions: data?.data ?? [], + isLoading: !error && !data, + isError: error, + }; +}; diff --git a/frontend/src/hooks/useDevCompilationStatus.ts b/frontend/src/hooks/useDevCompilationStatus.ts new file mode 100644 index 0000000..c1b9356 --- /dev/null +++ b/frontend/src/hooks/useDevCompilationStatus.ts @@ -0,0 +1,44 @@ +import { useState, useEffect } from 'react'; +import { useRouter } from 'next/router'; + +type CompilationStatus = 'ready' | 'compiling' | 'error' | 'initial'; + +const useDevCompilationStatus = (): CompilationStatus => { + const router = useRouter(); + const [status, setStatus] = useState('initial'); + + useEffect(() => { + if (process.env.NODE_ENV !== 'development') { + setStatus('ready'); + return; + } + + const handleRouteChangeStart = () => { + setStatus('compiling'); + }; + + const handleRouteChangeComplete = () => { + setTimeout(() => setStatus('ready'), 300); + }; + + const handleRouteChangeError = () => { + setTimeout(() => setStatus('error'), 300); + }; + + router.events.on('routeChangeStart', handleRouteChangeStart); + router.events.on('routeChangeComplete', handleRouteChangeComplete); + router.events.on('routeChangeError', handleRouteChangeError); + + setStatus('ready'); + + return () => { + router.events.off('routeChangeStart', handleRouteChangeStart); + router.events.off('routeChangeComplete', handleRouteChangeComplete); + router.events.off('routeChangeError', handleRouteChangeError); + }; + }, [router]); + + return status; +}; + +export default useDevCompilationStatus; diff --git a/frontend/src/i18n.ts b/frontend/src/i18n.ts new file mode 100644 index 0000000..e03bf8e --- /dev/null +++ b/frontend/src/i18n.ts @@ -0,0 +1,21 @@ +import i18n from 'i18next'; +import { initReactI18next } from 'react-i18next'; +import HttpApi from 'i18next-http-backend'; +import LanguageDetector from 'i18next-browser-languagedetector'; + +i18n + .use(HttpApi) + .use(LanguageDetector) + .use(initReactI18next) + .init({ + fallbackLng: 'en', + detection: { + order: ['localStorage', 'navigator'], + lookupLocalStorage: 'app_lang_32896', + caches: ['localStorage'], + }, + backend: { + loadPath: '/locales/{{lng}}/{{ns}}.json', + }, + interpolation: { escapeValue: false }, + }); diff --git a/frontend/src/interfaces/index.ts b/frontend/src/interfaces/index.ts new file mode 100644 index 0000000..75048f3 --- /dev/null +++ b/frontend/src/interfaces/index.ts @@ -0,0 +1,122 @@ +export type UserPayloadObject = { + name: string; + email: string; + avatar: string; +}; + +export type MenuAsideItem = { + label: string; + icon?: string; + href?: string; + target?: string; + color?: ColorButtonKey; + isLogout?: boolean; + withDevider?: boolean; + menu?: MenuAsideItem[]; + permissions?: string | string[]; +}; + +export type MenuNavBarItem = { + label?: string; + icon?: string; + href?: string; + target?: string; + isDivider?: boolean; + isLogout?: boolean; + isDesktopNoLabel?: boolean; + isToggleLightDark?: boolean; + isCurrentUser?: boolean; + menu?: MenuNavBarItem[]; +}; + +export type ColorKey = + | 'white' + | 'light' + | 'contrast' + | 'success' + | 'danger' + | 'warning' + | 'info'; + +export type ColorButtonKey = + | 'white' + | 'whiteDark' + | 'lightDark' + | 'contrast' + | 'success' + | 'danger' + | 'warning' + | 'info' + | 'void'; + +export type BgKey = 'purplePink' | 'pinkRed' | 'violet'; + +export type TrendType = + | 'up' + | 'down' + | 'success' + | 'danger' + | 'warning' + | 'info'; + +export type TransactionType = 'withdraw' | 'deposit' | 'invoice' | 'payment'; + +export type Transaction = { + id: number; + amount: number; + account: string; + name: string; + date: string; + type: TransactionType; + business: string; +}; + +export type Client = { + id: number; + avatar: string; + login: string; + name: string; + city: string; + company: string; + firstName: string; + lastName: string; + phoneNumber: string; + email: string; + progress: number; + role: string; + disabled: boolean; + created: string; + created_mm_dd_yyyy: string; +}; + +export interface User { + id: string; + firstName: string; + lastName?: any; + phoneNumber?: any; + email: string; + role: string; + disabled: boolean; + password: string; + emailVerified: boolean; + emailVerificationToken?: any; + emailVerificationTokenExpiresAt?: any; + passwordResetToken?: any; + passwordResetTokenExpiresAt?: any; + provider: string; + importHash?: any; + createdAt: Date; + updatedAt: Date; + deletedAt?: any; + createdById?: any; + updatedById?: any; + avatar: any[]; + notes: any[]; +} + +export type StyleKey = 'white' | 'basic'; + +export type UserForm = { + name: string; + email: string; +}; diff --git a/frontend/src/layouts/Authenticated.tsx b/frontend/src/layouts/Authenticated.tsx new file mode 100644 index 0000000..7d616a3 --- /dev/null +++ b/frontend/src/layouts/Authenticated.tsx @@ -0,0 +1,132 @@ +import React, { ReactNode, useEffect } from 'react'; +import { useState } from 'react'; +import jwt from 'jsonwebtoken'; +import { mdiForwardburger, mdiBackburger, mdiMenu } from '@mdi/js'; +import menuAside from '../menuAside'; +import menuNavBar from '../menuNavBar'; +import BaseIcon from '../components/BaseIcon'; +import NavBar from '../components/NavBar'; +import NavBarItemPlain from '../components/NavBarItemPlain'; +import AsideMenu from '../components/AsideMenu'; +import FooterBar from '../components/FooterBar'; +import { useAppDispatch, useAppSelector } from '../stores/hooks'; +import Search from '../components/Search'; +import { useRouter } from 'next/router'; +import { findMe, logoutUser } from '../stores/authSlice'; + +import { hasPermission } from '../helpers/userPermissions'; + +type Props = { + children: ReactNode; + + permission?: string; +}; + +export default function LayoutAuthenticated({ + children, + + permission, +}: Props) { + const dispatch = useAppDispatch(); + const router = useRouter(); + const { token, currentUser } = useAppSelector((state) => state.auth); + const bgColor = useAppSelector((state) => state.style.bgLayoutColor); + let localToken; + if (typeof window !== 'undefined') { + // Perform localStorage action + localToken = localStorage.getItem('token'); + } + + const isTokenValid = () => { + const token = localStorage.getItem('token'); + if (!token) return; + const date = new Date().getTime() / 1000; + const data = jwt.decode(token); + if (!data) return; + return date < data.exp; + }; + + useEffect(() => { + dispatch(findMe()); + if (!isTokenValid()) { + dispatch(logoutUser()); + router.push('/login'); + } + }, [token, localToken]); + + useEffect(() => { + if (!permission || !currentUser) return; + + if (!hasPermission(currentUser, permission)) router.push('/error'); + }, [currentUser, permission]); + + const darkMode = useAppSelector((state) => state.style.darkMode); + + const [isAsideMobileExpanded, setIsAsideMobileExpanded] = useState(false); + const [isAsideLgActive, setIsAsideLgActive] = useState(false); + + useEffect(() => { + const handleRouteChangeStart = () => { + setIsAsideMobileExpanded(false); + setIsAsideLgActive(false); + }; + + router.events.on('routeChangeStart', handleRouteChangeStart); + + // If the component is unmounted, unsubscribe + // from the event with the `off` method: + return () => { + router.events.off('routeChangeStart', handleRouteChangeStart); + }; + }, [router.events, dispatch]); + + const layoutAsidePadding = 'xl:pl-60'; + + return ( +

+ + setIsAsideMobileExpanded(!isAsideMobileExpanded)} + > + + + setIsAsideLgActive(true)} + > + + + + + + + setIsAsideLgActive(false)} + /> + {children} + Hand-crafted & Made with ❤️ +

+ ); +} diff --git a/frontend/src/layouts/Guest.tsx b/frontend/src/layouts/Guest.tsx new file mode 100644 index 0000000..49ac1b0 --- /dev/null +++ b/frontend/src/layouts/Guest.tsx @@ -0,0 +1,19 @@ +import React, { ReactNode } from 'react'; +import { useAppSelector } from '../stores/hooks'; + +type Props = { + children: ReactNode; +}; + +export default function LayoutGuest({ children }: Props) { + const darkMode = useAppSelector((state) => state.style.darkMode); + const bgColor = useAppSelector((state) => state.style.bgLayoutColor); + + return ( +

+ {children} +

+ ); +} diff --git a/frontend/src/menuAside.ts b/frontend/src/menuAside.ts new file mode 100644 index 0000000..72e4b2f --- /dev/null +++ b/frontend/src/menuAside.ts @@ -0,0 +1,149 @@ +import * as icon from '@mdi/js'; +import { MenuAsideItem } from './interfaces'; + +const menuAside: MenuAsideItem[] = [ + { + href: '/dashboard', + icon: icon.mdiViewDashboardOutline, + label: 'Dashboard', + }, + + { + href: '/users/users-list', + label: 'Users', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + icon: icon.mdiAccountGroup ?? icon.mdiTable, + permissions: 'READ_USERS', + }, + { + href: '/alumnos/alumnos-list', + label: 'Alumnos', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + icon: + 'mdiAccountStudent' in icon + ? icon['mdiAccountStudent' as keyof typeof icon] + : icon.mdiTable ?? icon.mdiTable, + permissions: 'READ_ALUMNOS', + }, + { + href: '/alumnos_cursos/alumnos_cursos-list', + label: 'Alumnos cursos', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + icon: + 'mdiAccountGroup' in icon + ? icon['mdiAccountGroup' as keyof typeof icon] + : icon.mdiTable ?? icon.mdiTable, + permissions: 'READ_ALUMNOS_CURSOS', + }, + { + href: '/cursos/cursos-list', + label: 'Cursos', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + icon: + 'mdiBookOpenPageVariant' in icon + ? icon['mdiBookOpenPageVariant' as keyof typeof icon] + : icon.mdiTable ?? icon.mdiTable, + permissions: 'READ_CURSOS', + }, + { + href: '/documentos/documentos-list', + label: 'Documentos', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + icon: + 'mdiFileDocumentOutline' in icon + ? icon['mdiFileDocumentOutline' as keyof typeof icon] + : icon.mdiTable ?? icon.mdiTable, + permissions: 'READ_DOCUMENTOS', + }, + { + href: '/evaluaciones/evaluaciones-list', + label: 'Evaluaciones', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + icon: + 'mdiClipboardCheck' in icon + ? icon['mdiClipboardCheck' as keyof typeof icon] + : icon.mdiTable ?? icon.mdiTable, + permissions: 'READ_EVALUACIONES', + }, + { + href: '/instructores/instructores-list', + label: 'Instructores', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + icon: + 'mdiSchool' in icon + ? icon['mdiSchool' as keyof typeof icon] + : icon.mdiTable ?? icon.mdiTable, + permissions: 'READ_INSTRUCTORES', + }, + { + href: '/personas/personas-list', + label: 'Personas', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + icon: + 'mdiAccount' in icon + ? icon['mdiAccount' as keyof typeof icon] + : icon.mdiTable ?? icon.mdiTable, + permissions: 'READ_PERSONAS', + }, + { + href: '/requisitos/requisitos-list', + label: 'Requisitos', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + icon: + 'mdiFileDocument' in icon + ? icon['mdiFileDocument' as keyof typeof icon] + : icon.mdiTable ?? icon.mdiTable, + permissions: 'READ_REQUISITOS', + }, + { + href: '/usuarios/usuarios-list', + label: 'Usuarios', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + icon: + 'mdiAccountCircle' in icon + ? icon['mdiAccountCircle' as keyof typeof icon] + : icon.mdiTable ?? icon.mdiTable, + permissions: 'READ_USUARIOS', + }, + { + href: '/roles/roles-list', + label: 'Roles', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + icon: icon.mdiShieldAccountVariantOutline ?? icon.mdiTable, + permissions: 'READ_ROLES', + }, + { + href: '/permissions/permissions-list', + label: 'Permissions', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + icon: icon.mdiShieldAccountOutline ?? icon.mdiTable, + permissions: 'READ_PERMISSIONS', + }, + { + href: '/profile', + label: 'Profile', + icon: icon.mdiAccountCircle, + }, + + { + href: '/api-docs', + target: '_blank', + label: 'Swagger API', + icon: icon.mdiFileCode, + permissions: 'READ_API_DOCS', + }, +]; + +export default menuAside; diff --git a/frontend/src/menuNavBar.ts b/frontend/src/menuNavBar.ts new file mode 100644 index 0000000..940a495 --- /dev/null +++ b/frontend/src/menuNavBar.ts @@ -0,0 +1,51 @@ +import { + mdiMenu, + mdiClockOutline, + mdiCloud, + mdiCrop, + mdiAccount, + mdiCogOutline, + mdiEmail, + mdiLogout, + mdiThemeLightDark, + mdiGithub, + mdiVuejs, +} from '@mdi/js'; +import { MenuNavBarItem } from './interfaces'; + +const menuNavBar: MenuNavBarItem[] = [ + { + isCurrentUser: true, + menu: [ + { + icon: mdiAccount, + label: 'My Profile', + href: '/profile', + }, + { + isDivider: true, + }, + { + icon: mdiLogout, + label: 'Log Out', + isLogout: true, + }, + ], + }, + { + icon: mdiThemeLightDark, + label: 'Light/Dark', + isDesktopNoLabel: true, + isToggleLightDark: true, + }, + { + icon: mdiLogout, + label: 'Log out', + isDesktopNoLabel: true, + isLogout: true, + }, +]; + +export const webPagesNavBar = []; + +export default menuNavBar; diff --git a/frontend/src/pages/_app.tsx b/frontend/src/pages/_app.tsx new file mode 100644 index 0000000..03eb9b2 --- /dev/null +++ b/frontend/src/pages/_app.tsx @@ -0,0 +1,188 @@ +import React from 'react'; +import type { AppProps } from 'next/app'; +import type { ReactElement, ReactNode } from 'react'; +import type { NextPage } from 'next'; +import Head from 'next/head'; +import { store } from '../stores/store'; +import { Provider } from 'react-redux'; +import '../css/main.css'; +import axios from 'axios'; +import { baseURLApi } from '../config'; +import { useRouter } from 'next/router'; +import ErrorBoundary from '../components/ErrorBoundary'; +import DevModeBadge from '../components/DevModeBadge'; +import 'intro.js/introjs.css'; +import { appWithTranslation } from 'next-i18next'; +import '../i18n'; +import IntroGuide from '../components/IntroGuide'; +import { + appSteps, + loginSteps, + usersSteps, + rolesSteps, +} from '../stores/introSteps'; + +// Initialize axios +axios.defaults.baseURL = process.env.NEXT_PUBLIC_BACK_API + ? process.env.NEXT_PUBLIC_BACK_API + : baseURLApi; + +axios.defaults.headers.common['Content-Type'] = 'application/json'; + +export type NextPageWithLayout

, IP = P> = NextPage< + P, + IP +> & { + getLayout?: (page: ReactElement) => ReactNode; +}; + +type AppPropsWithLayout = AppProps & { + Component: NextPageWithLayout; +}; + +function MyApp({ Component, pageProps }: AppPropsWithLayout) { + // Use the layout defined at the page level, if available + const getLayout = Component.getLayout || ((page) => page); + const router = useRouter(); + const [stepsEnabled, setStepsEnabled] = React.useState(false); + const [stepName, setStepName] = React.useState(''); + const [steps, setSteps] = React.useState([]); + + axios.interceptors.request.use( + (config) => { + const token = localStorage.getItem('token'); + + if (token) { + config.headers.Authorization = `Bearer ${token}`; + } else { + delete config.headers.Authorization; + } + + return config; + }, + (error) => { + return Promise.reject(error); + }, + ); + + // TODO: Remove this code in future releases + React.useEffect(() => { + const handleMessage = async (event: MessageEvent) => { + if (event.data === 'getLocation') { + event.source?.postMessage( + { iframeLocation: window.location.pathname }, + event.origin, + ); + return; + } + + if (event.data === 'getScreenshot') { + try { + const html2canvas = (await import('html2canvas')).default; + const canvas = await html2canvas(document.body, { useCORS: true }); + const url = canvas.toDataURL('image/jpeg', 0.8); + event.source?.postMessage({ iframeScreenshot: url }, event.origin); + } catch (e) { + console.error('html2canvas failed', e); + event.source?.postMessage({ iframeScreenshot: null }, event.origin); + } + } + }; + + window.addEventListener('message', handleMessage); + return () => window.removeEventListener('message', handleMessage); + }, []); + + React.useEffect(() => { + const isCompleted = (stepKey: string) => { + return localStorage.getItem(`completed_${stepKey}`) === 'true'; + }; + if (router.pathname === '/login' && !isCompleted('loginSteps')) { + setSteps(loginSteps); + setStepName('loginSteps'); + setStepsEnabled(true); + } else if (router.pathname === '/dashboard' && !isCompleted('appSteps')) { + setTimeout(() => { + setSteps(appSteps); + setStepName('appSteps'); + setStepsEnabled(true); + }, 1000); + } else if ( + router.pathname === '/users/users-list' && + !isCompleted('usersSteps') + ) { + setTimeout(() => { + setSteps(usersSteps); + setStepName('usersSteps'); + setStepsEnabled(true); + }, 1000); + } else if ( + router.pathname === '/roles/roles-list' && + !isCompleted('rolesSteps') + ) { + setTimeout(() => { + setSteps(rolesSteps); + setStepName('rolesSteps'); + setStepsEnabled(true); + }, 1000); + } else { + setSteps([]); + setStepsEnabled(false); + } + }, [router.pathname]); + + const handleExit = () => { + setStepsEnabled(false); + }; + + const title = 'CtrlE'; + const description = 'CtrlE generated by Flatlogic'; + const url = 'https://flatlogic.com/'; + const image = `https://flatlogic.com/logo.svg`; + const imageWidth = '1920'; + const imageHeight = '960'; + + return ( + + {getLayout( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + {(process.env.NODE_ENV === 'development' || + process.env.NODE_ENV === 'dev_stage') && } + , + )} + + ); +} + +export default appWithTranslation(MyApp); diff --git a/frontend/src/pages/alumnos/[alumnosId].tsx b/frontend/src/pages/alumnos/[alumnosId].tsx new file mode 100644 index 0000000..54b23a1 --- /dev/null +++ b/frontend/src/pages/alumnos/[alumnosId].tsx @@ -0,0 +1,143 @@ +import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'; +import Head from 'next/head'; +import React, { ReactElement, useEffect, useState } from 'react'; +import DatePicker from 'react-datepicker'; +import 'react-datepicker/dist/react-datepicker.css'; +import dayjs from 'dayjs'; + +import CardBox from '../../components/CardBox'; +import LayoutAuthenticated from '../../layouts/Authenticated'; +import SectionMain from '../../components/SectionMain'; +import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'; +import { getPageTitle } from '../../config'; + +import { Field, Form, Formik } from 'formik'; +import FormField from '../../components/FormField'; +import BaseDivider from '../../components/BaseDivider'; +import BaseButtons from '../../components/BaseButtons'; +import BaseButton from '../../components/BaseButton'; +import FormCheckRadio from '../../components/FormCheckRadio'; +import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'; +import FormFilePicker from '../../components/FormFilePicker'; +import FormImagePicker from '../../components/FormImagePicker'; +import { SelectField } from '../../components/SelectField'; +import { SelectFieldMany } from '../../components/SelectFieldMany'; +import { SwitchField } from '../../components/SwitchField'; +import { RichTextField } from '../../components/RichTextField'; + +import { update, fetch } from '../../stores/alumnos/alumnosSlice'; +import { useAppDispatch, useAppSelector } from '../../stores/hooks'; +import { useRouter } from 'next/router'; +import { saveFile } from '../../helpers/fileSaver'; +import dataFormatter from '../../helpers/dataFormatter'; +import ImageField from '../../components/ImageField'; + +const EditAlumnos = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + const initVals = { + persona: null, + + num_control: '', + + obs: '', + }; + const [initialValues, setInitialValues] = useState(initVals); + + const { alumnos } = useAppSelector((state) => state.alumnos); + + const { alumnosId } = router.query; + + useEffect(() => { + dispatch(fetch({ id: alumnosId })); + }, [alumnosId]); + + useEffect(() => { + if (typeof alumnos === 'object') { + setInitialValues(alumnos); + } + }, [alumnos]); + + useEffect(() => { + if (typeof alumnos === 'object') { + const newInitialVal = { ...initVals }; + + Object.keys(initVals).forEach((el) => (newInitialVal[el] = alumnos[el])); + + setInitialValues(newInitialVal); + } + }, [alumnos]); + + const handleSubmit = async (data) => { + await dispatch(update({ id: alumnosId, data })); + await router.push('/alumnos/alumnos-list'); + }; + + return ( + <> + + {getPageTitle('Edit alumnos')} + + + + {''} + + + handleSubmit(values)} + > +

+ + + + + + + + + + + + + + + + + router.push('/alumnos/alumnos-list')} + /> + + + + + + + ); +}; + +EditAlumnos.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default EditAlumnos; diff --git a/frontend/src/pages/alumnos/alumnos-edit.tsx b/frontend/src/pages/alumnos/alumnos-edit.tsx new file mode 100644 index 0000000..7e8dca4 --- /dev/null +++ b/frontend/src/pages/alumnos/alumnos-edit.tsx @@ -0,0 +1,141 @@ +import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js'; +import Head from 'next/head'; +import React, { ReactElement, useEffect, useState } from 'react'; +import DatePicker from 'react-datepicker'; +import 'react-datepicker/dist/react-datepicker.css'; +import dayjs from 'dayjs'; + +import CardBox from '../../components/CardBox'; +import LayoutAuthenticated from '../../layouts/Authenticated'; +import SectionMain from '../../components/SectionMain'; +import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'; +import { getPageTitle } from '../../config'; + +import { Field, Form, Formik } from 'formik'; +import FormField from '../../components/FormField'; +import BaseDivider from '../../components/BaseDivider'; +import BaseButtons from '../../components/BaseButtons'; +import BaseButton from '../../components/BaseButton'; +import FormCheckRadio from '../../components/FormCheckRadio'; +import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'; +import FormFilePicker from '../../components/FormFilePicker'; +import FormImagePicker from '../../components/FormImagePicker'; +import { SelectField } from '../../components/SelectField'; +import { SelectFieldMany } from '../../components/SelectFieldMany'; +import { SwitchField } from '../../components/SwitchField'; +import { RichTextField } from '../../components/RichTextField'; + +import { update, fetch } from '../../stores/alumnos/alumnosSlice'; +import { useAppDispatch, useAppSelector } from '../../stores/hooks'; +import { useRouter } from 'next/router'; +import { saveFile } from '../../helpers/fileSaver'; +import dataFormatter from '../../helpers/dataFormatter'; +import ImageField from '../../components/ImageField'; + +const EditAlumnosPage = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + const initVals = { + persona: null, + + num_control: '', + + obs: '', + }; + const [initialValues, setInitialValues] = useState(initVals); + + const { alumnos } = useAppSelector((state) => state.alumnos); + + const { id } = router.query; + + useEffect(() => { + dispatch(fetch({ id: id })); + }, [id]); + + useEffect(() => { + if (typeof alumnos === 'object') { + setInitialValues(alumnos); + } + }, [alumnos]); + + useEffect(() => { + if (typeof alumnos === 'object') { + const newInitialVal = { ...initVals }; + Object.keys(initVals).forEach((el) => (newInitialVal[el] = alumnos[el])); + setInitialValues(newInitialVal); + } + }, [alumnos]); + + const handleSubmit = async (data) => { + await dispatch(update({ id: id, data })); + await router.push('/alumnos/alumnos-list'); + }; + + return ( + <> + + {getPageTitle('Edit alumnos')} + + + + {''} + + + handleSubmit(values)} + > + + + + + ); +}; + +EditAlumnosPage.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default EditAlumnosPage; diff --git a/frontend/src/pages/alumnos/alumnos-list.tsx b/frontend/src/pages/alumnos/alumnos-list.tsx new file mode 100644 index 0000000..eedbd69 --- /dev/null +++ b/frontend/src/pages/alumnos/alumnos-list.tsx @@ -0,0 +1,171 @@ +import { mdiChartTimelineVariant } from '@mdi/js'; +import Head from 'next/head'; +import { uniqueId } from 'lodash'; +import React, { ReactElement, useState } from 'react'; +import CardBox from '../../components/CardBox'; +import LayoutAuthenticated from '../../layouts/Authenticated'; +import SectionMain from '../../components/SectionMain'; +import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'; +import { getPageTitle } from '../../config'; +import TableAlumnos from '../../components/Alumnos/TableAlumnos'; +import BaseButton from '../../components/BaseButton'; +import axios from 'axios'; +import Link from 'next/link'; +import { useAppDispatch, useAppSelector } from '../../stores/hooks'; +import CardBoxModal from '../../components/CardBoxModal'; +import DragDropFilePicker from '../../components/DragDropFilePicker'; +import { setRefetch, uploadCsv } from '../../stores/alumnos/alumnosSlice'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const AlumnosTablesPage = () => { + const [filterItems, setFilterItems] = useState([]); + const [csvFile, setCsvFile] = useState(null); + const [isModalActive, setIsModalActive] = useState(false); + const [showTableView, setShowTableView] = useState(false); + + const { currentUser } = useAppSelector((state) => state.auth); + + const dispatch = useAppDispatch(); + + const [filters] = useState([ + { label: 'NúmerodeControl', title: 'num_control' }, + { label: 'Observaciones', title: 'obs' }, + + { label: 'Persona', title: 'persona' }, + ]); + + const hasCreatePermission = + currentUser && hasPermission(currentUser, 'CREATE_ALUMNOS'); + + const addFilter = () => { + const newItem = { + id: uniqueId(), + fields: { + filterValue: '', + filterValueFrom: '', + filterValueTo: '', + selectedField: '', + }, + }; + newItem.fields.selectedField = filters[0].title; + setFilterItems([...filterItems, newItem]); + }; + + const getAlumnosCSV = async () => { + const response = await axios({ + url: '/alumnos?filetype=csv', + method: 'GET', + responseType: 'blob', + }); + const type = response.headers['content-type']; + const blob = new Blob([response.data], { type: type }); + const link = document.createElement('a'); + link.href = window.URL.createObjectURL(blob); + link.download = 'alumnosCSV.csv'; + link.click(); + }; + + const onModalConfirm = async () => { + if (!csvFile) return; + await dispatch(uploadCsv(csvFile)); + dispatch(setRefetch(true)); + setCsvFile(null); + setIsModalActive(false); + }; + + const onModalCancel = () => { + setCsvFile(null); + setIsModalActive(false); + }; + + return ( + <> + + {getPageTitle('Alumnos')} + + + + {''} + + + {hasCreatePermission && ( + + )} + + + + + {hasCreatePermission && ( + setIsModalActive(true)} + /> + )} + +

+ +

+ Switch to Table +

+ + + + + + + + + + + ); +}; + +AlumnosTablesPage.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default AlumnosTablesPage; diff --git a/frontend/src/pages/alumnos/alumnos-new.tsx b/frontend/src/pages/alumnos/alumnos-new.tsx new file mode 100644 index 0000000..cc6b8c1 --- /dev/null +++ b/frontend/src/pages/alumnos/alumnos-new.tsx @@ -0,0 +1,116 @@ +import { + mdiAccount, + mdiChartTimelineVariant, + mdiMail, + mdiUpload, +} from '@mdi/js'; +import Head from 'next/head'; +import React, { ReactElement } from 'react'; +import CardBox from '../../components/CardBox'; +import LayoutAuthenticated from '../../layouts/Authenticated'; +import SectionMain from '../../components/SectionMain'; +import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'; +import { getPageTitle } from '../../config'; + +import { Field, Form, Formik } from 'formik'; +import FormField from '../../components/FormField'; +import BaseDivider from '../../components/BaseDivider'; +import BaseButtons from '../../components/BaseButtons'; +import BaseButton from '../../components/BaseButton'; +import FormCheckRadio from '../../components/FormCheckRadio'; +import FormCheckRadioGroup from '../../components/FormCheckRadioGroup'; +import FormFilePicker from '../../components/FormFilePicker'; +import FormImagePicker from '../../components/FormImagePicker'; +import { SwitchField } from '../../components/SwitchField'; + +import { SelectField } from '../../components/SelectField'; +import { SelectFieldMany } from '../../components/SelectFieldMany'; +import { RichTextField } from '../../components/RichTextField'; + +import { create } from '../../stores/alumnos/alumnosSlice'; +import { useAppDispatch } from '../../stores/hooks'; +import { useRouter } from 'next/router'; +import moment from 'moment'; + +const initialValues = { + persona: '', + + num_control: '', + + obs: '', +}; + +const AlumnosNew = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + + const handleSubmit = async (data) => { + await dispatch(create(data)); + await router.push('/alumnos/alumnos-list'); + }; + return ( + <> + + {getPageTitle('New Item')} + + + + {''} + + + handleSubmit(values)} + > + + + + + ); +}; + +AlumnosNew.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default AlumnosNew; diff --git a/frontend/src/pages/alumnos/alumnos-table.tsx b/frontend/src/pages/alumnos/alumnos-table.tsx new file mode 100644 index 0000000..4bcaba3 --- /dev/null +++ b/frontend/src/pages/alumnos/alumnos-table.tsx @@ -0,0 +1,170 @@ +import { mdiChartTimelineVariant } from '@mdi/js'; +import Head from 'next/head'; +import { uniqueId } from 'lodash'; +import React, { ReactElement, useState } from 'react'; +import CardBox from '../../components/CardBox'; +import LayoutAuthenticated from '../../layouts/Authenticated'; +import SectionMain from '../../components/SectionMain'; +import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'; +import { getPageTitle } from '../../config'; +import TableAlumnos from '../../components/Alumnos/TableAlumnos'; +import BaseButton from '../../components/BaseButton'; +import axios from 'axios'; +import Link from 'next/link'; +import { useAppDispatch, useAppSelector } from '../../stores/hooks'; +import CardBoxModal from '../../components/CardBoxModal'; +import DragDropFilePicker from '../../components/DragDropFilePicker'; +import { setRefetch, uploadCsv } from '../../stores/alumnos/alumnosSlice'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const AlumnosTablesPage = () => { + const [filterItems, setFilterItems] = useState([]); + const [csvFile, setCsvFile] = useState(null); + const [isModalActive, setIsModalActive] = useState(false); + const [showTableView, setShowTableView] = useState(false); + + const { currentUser } = useAppSelector((state) => state.auth); + + const dispatch = useAppDispatch(); + + const [filters] = useState([ + { label: 'NúmerodeControl', title: 'num_control' }, + { label: 'Observaciones', title: 'obs' }, + + { label: 'Persona', title: 'persona' }, + ]); + + const hasCreatePermission = + currentUser && hasPermission(currentUser, 'CREATE_ALUMNOS'); + + const addFilter = () => { + const newItem = { + id: uniqueId(), + fields: { + filterValue: '', + filterValueFrom: '', + filterValueTo: '', + selectedField: '', + }, + }; + newItem.fields.selectedField = filters[0].title; + setFilterItems([...filterItems, newItem]); + }; + + const getAlumnosCSV = async () => { + const response = await axios({ + url: '/alumnos?filetype=csv', + method: 'GET', + responseType: 'blob', + }); + const type = response.headers['content-type']; + const blob = new Blob([response.data], { type: type }); + const link = document.createElement('a'); + link.href = window.URL.createObjectURL(blob); + link.download = 'alumnosCSV.csv'; + link.click(); + }; + + const onModalConfirm = async () => { + if (!csvFile) return; + await dispatch(uploadCsv(csvFile)); + dispatch(setRefetch(true)); + setCsvFile(null); + setIsModalActive(false); + }; + + const onModalCancel = () => { + setCsvFile(null); + setIsModalActive(false); + }; + + return ( + <> + + {getPageTitle('Alumnos')} + + + + {''} + + + {hasCreatePermission && ( + + )} + + + + + {hasCreatePermission && ( + setIsModalActive(true)} + /> + )} + +

+ + + Back to list + +

+ + + + + + + + + + ); +}; + +AlumnosTablesPage.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default AlumnosTablesPage; diff --git a/frontend/src/pages/alumnos/alumnos-view.tsx b/frontend/src/pages/alumnos/alumnos-view.tsx new file mode 100644 index 0000000..5315cf3 --- /dev/null +++ b/frontend/src/pages/alumnos/alumnos-view.tsx @@ -0,0 +1,181 @@ +import React, { ReactElement, useEffect } from 'react'; +import Head from 'next/head'; +import DatePicker from 'react-datepicker'; +import 'react-datepicker/dist/react-datepicker.css'; +import dayjs from 'dayjs'; +import { useAppDispatch, useAppSelector } from '../../stores/hooks'; +import { useRouter } from 'next/router'; +import { fetch } from '../../stores/alumnos/alumnosSlice'; +import { saveFile } from '../../helpers/fileSaver'; +import dataFormatter from '../../helpers/dataFormatter'; +import ImageField from '../../components/ImageField'; +import LayoutAuthenticated from '../../layouts/Authenticated'; +import { getPageTitle } from '../../config'; +import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton'; +import SectionMain from '../../components/SectionMain'; +import CardBox from '../../components/CardBox'; +import BaseButton from '../../components/BaseButton'; +import BaseDivider from '../../components/BaseDivider'; +import { mdiChartTimelineVariant } from '@mdi/js'; +import { SwitchField } from '../../components/SwitchField'; +import FormField from '../../components/FormField'; + +const AlumnosView = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + const { alumnos } = useAppSelector((state) => state.alumnos); + + const { id } = router.query; + + function removeLastCharacter(str) { + console.log(str, `str`); + return str.slice(0, -1); + } + + useEffect(() => { + dispatch(fetch({ id })); + }, [dispatch, id]); + + return ( + <> + + {getPageTitle('View alumnos')} + + + + + + +

Persona

+ +

{alumnos?.persona?.nombre ?? 'No data'}

+ +

NúmerodeControl

{alumnos?.num_control}

+ + +

+          </FormField>
+
+          <>
+            <p className={'block font-bold mb-2'}>Alumnos_cursos Alumno</p>
+            <CardBox
+              className='mb-6 border border-gray-300 rounded overflow-hidden'
+              hasTable
+            >
+              <div className='overflow-x-auto'>
+                <table>
+                  <thead>
+                    <tr>
+                      <th>EstadodelAlumno</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {alumnos.alumnos_cursos_alumno &&
+                      Array.isArray(alumnos.alumnos_cursos_alumno) &&
+                      alumnos.alumnos_cursos_alumno.map((item: any) => (
+                        <tr
+                          key={item.id}
+                          onClick={() =>
+                            router.push(
+                              `/alumnos_cursos/alumnos_cursos-view/?id=${item.id}`,
+                            )
+                          }
+                        >
+                          <td data-label='status'>{item.status}</td>
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
+              </div>
+              {!alumnos?.alumnos_cursos_alumno?.length && (
+                <div className={'text-center py-4'}>No data</div>
+              )}
+            </CardBox>
+          </>
+
+          <>
+            <p className={'block font-bold mb-2'}>Documentos Alumno</p>
+            <CardBox
+              className='mb-6 border border-gray-300 rounded overflow-hidden'
+              hasTable
+            >
+              <div className='overflow-x-auto'>
+                <table>
+                  <thead>
+                    <tr>
+                      <th>RutadelArchivo</th>
+
+                      <th>EstadodelDocumento</th>
+
+                      <th>FechadeSubida</th>
+
+                      <th>VersióndelDocumento</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {alumnos.documentos_alumno &&
+                      Array.isArray(alumnos.documentos_alumno) &&
+                      alumnos.documentos_alumno.map((item: any) => (
+                        <tr
+                          key={item.id}
+                          onClick={() =>
+                            router.push(
+                              `/documentos/documentos-view/?id=${item.id}`,
+                            )
+                          }
+                        >
+                          <td data-label='archivo'>{item.archivo}</td>
+
+                          <td data-label='estatus'>{item.estatus}</td>
+
+                          <td data-label='fecha_subida'>
+                            {dataFormatter.dateTimeFormatter(item.fecha_subida)}
+                          </td>
+
+                          <td data-label='version'>{item.version}</td>
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
+              </div>
+              {!alumnos?.documentos_alumno?.length && (
+                <div className={'text-center py-4'}>No data</div>
+              )}
+            </CardBox>
+          </>
+
+          <BaseDivider />
+
+          <BaseButton
+            color='info'
+            label='Back'
+            onClick={() => router.push('/alumnos/alumnos-list')}
+          />
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+AlumnosView.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_ALUMNOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default AlumnosView;
diff --git a/frontend/src/pages/alumnos_cursos/[alumnos_cursosId].tsx b/frontend/src/pages/alumnos_cursos/[alumnos_cursosId].tsx
new file mode 100644
index 0000000..e454aef
--- /dev/null
+++ b/frontend/src/pages/alumnos_cursos/[alumnos_cursosId].tsx
@@ -0,0 +1,162 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import { update, fetch } from '../../stores/alumnos_cursos/alumnos_cursosSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditAlumnos_cursos = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    alumno: null,
+
+    curso: null,
+
+    status: '',
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { alumnos_cursos } = useAppSelector((state) => state.alumnos_cursos);
+
+  const { alumnos_cursosId } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: alumnos_cursosId }));
+  }, [alumnos_cursosId]);
+
+  useEffect(() => {
+    if (typeof alumnos_cursos === 'object') {
+      setInitialValues(alumnos_cursos);
+    }
+  }, [alumnos_cursos]);
+
+  useEffect(() => {
+    if (typeof alumnos_cursos === 'object') {
+      const newInitialVal = { ...initVals };
+
+      Object.keys(initVals).forEach(
+        (el) => (newInitialVal[el] = alumnos_cursos[el]),
+      );
+
+      setInitialValues(newInitialVal);
+    }
+  }, [alumnos_cursos]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: alumnos_cursosId, data }));
+    await router.push('/alumnos_cursos/alumnos_cursos-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit alumnos_cursos')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit alumnos_cursos'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Alumno' labelFor='alumno'>
+                <Field
+                  name='alumno'
+                  id='alumno'
+                  component={SelectField}
+                  options={initialValues.alumno}
+                  itemRef={'alumnos'}
+                  showField={'num_control'}
+                ></Field>
+              </FormField>
+
+              <FormField label='Curso' labelFor='curso'>
+                <Field
+                  name='curso'
+                  id='curso'
+                  component={SelectField}
+                  options={initialValues.curso}
+                  itemRef={'cursos'}
+                  showField={'nombre'}
+                ></Field>
+              </FormField>
+
+              <FormField label='EstadodelAlumno' labelFor='status'>
+                <Field name='status' id='status' component='select'>
+                  <option value='CURSO'>CURSO</option>
+
+                  <option value='ACREDITADO'>ACREDITADO</option>
+
+                  <option value='NOACREDITADO'>NOACREDITADO</option>
+
+                  <option value='BAJA'>BAJA</option>
+                </Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() =>
+                    router.push('/alumnos_cursos/alumnos_cursos-list')
+                  }
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditAlumnos_cursos.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_ALUMNOS_CURSOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditAlumnos_cursos;
diff --git a/frontend/src/pages/alumnos_cursos/alumnos_cursos-edit.tsx b/frontend/src/pages/alumnos_cursos/alumnos_cursos-edit.tsx
new file mode 100644
index 0000000..39d0650
--- /dev/null
+++ b/frontend/src/pages/alumnos_cursos/alumnos_cursos-edit.tsx
@@ -0,0 +1,160 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import { update, fetch } from '../../stores/alumnos_cursos/alumnos_cursosSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditAlumnos_cursosPage = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    alumno: null,
+
+    curso: null,
+
+    status: '',
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { alumnos_cursos } = useAppSelector((state) => state.alumnos_cursos);
+
+  const { id } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }));
+  }, [id]);
+
+  useEffect(() => {
+    if (typeof alumnos_cursos === 'object') {
+      setInitialValues(alumnos_cursos);
+    }
+  }, [alumnos_cursos]);
+
+  useEffect(() => {
+    if (typeof alumnos_cursos === 'object') {
+      const newInitialVal = { ...initVals };
+      Object.keys(initVals).forEach(
+        (el) => (newInitialVal[el] = alumnos_cursos[el]),
+      );
+      setInitialValues(newInitialVal);
+    }
+  }, [alumnos_cursos]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }));
+    await router.push('/alumnos_cursos/alumnos_cursos-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit alumnos_cursos')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit alumnos_cursos'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Alumno' labelFor='alumno'>
+                <Field
+                  name='alumno'
+                  id='alumno'
+                  component={SelectField}
+                  options={initialValues.alumno}
+                  itemRef={'alumnos'}
+                  showField={'num_control'}
+                ></Field>
+              </FormField>
+
+              <FormField label='Curso' labelFor='curso'>
+                <Field
+                  name='curso'
+                  id='curso'
+                  component={SelectField}
+                  options={initialValues.curso}
+                  itemRef={'cursos'}
+                  showField={'nombre'}
+                ></Field>
+              </FormField>
+
+              <FormField label='EstadodelAlumno' labelFor='status'>
+                <Field name='status' id='status' component='select'>
+                  <option value='CURSO'>CURSO</option>
+
+                  <option value='ACREDITADO'>ACREDITADO</option>
+
+                  <option value='NOACREDITADO'>NOACREDITADO</option>
+
+                  <option value='BAJA'>BAJA</option>
+                </Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() =>
+                    router.push('/alumnos_cursos/alumnos_cursos-list')
+                  }
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditAlumnos_cursosPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_ALUMNOS_CURSOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditAlumnos_cursosPage;
diff --git a/frontend/src/pages/alumnos_cursos/alumnos_cursos-list.tsx b/frontend/src/pages/alumnos_cursos/alumnos_cursos-list.tsx
new file mode 100644
index 0000000..1867233
--- /dev/null
+++ b/frontend/src/pages/alumnos_cursos/alumnos_cursos-list.tsx
@@ -0,0 +1,182 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TableAlumnos_cursos from '../../components/Alumnos_cursos/TableAlumnos_cursos';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import {
+  setRefetch,
+  uploadCsv,
+} from '../../stores/alumnos_cursos/alumnos_cursosSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const Alumnos_cursosTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([
+    { label: 'Alumno', title: 'alumno' },
+
+    { label: 'Curso', title: 'curso' },
+
+    {
+      label: 'EstadodelAlumno',
+      title: 'status',
+      type: 'enum',
+      options: ['CURSO', 'ACREDITADO', 'NOACREDITADO', 'BAJA'],
+    },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_ALUMNOS_CURSOS');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getAlumnos_cursosCSV = async () => {
+    const response = await axios({
+      url: '/alumnos_cursos?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'alumnos_cursosCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Alumnos_cursos')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Alumnos_cursos'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/alumnos_cursos/alumnos_cursos-new'}
+              color='info'
+              label='New Item'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getAlumnos_cursosCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <Link href={'/alumnos_cursos/alumnos_cursos-table'}>
+              Switch to Table
+            </Link>
+          </div>
+        </CardBox>
+
+        <CardBox className='mb-6' hasTable>
+          <TableAlumnos_cursos
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+Alumnos_cursosTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_ALUMNOS_CURSOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default Alumnos_cursosTablesPage;
diff --git a/frontend/src/pages/alumnos_cursos/alumnos_cursos-new.tsx b/frontend/src/pages/alumnos_cursos/alumnos_cursos-new.tsx
new file mode 100644
index 0000000..f4e6c5e
--- /dev/null
+++ b/frontend/src/pages/alumnos_cursos/alumnos_cursos-new.tsx
@@ -0,0 +1,132 @@
+import {
+  mdiAccount,
+  mdiChartTimelineVariant,
+  mdiMail,
+  mdiUpload,
+} from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SwitchField } from '../../components/SwitchField';
+
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { RichTextField } from '../../components/RichTextField';
+
+import { create } from '../../stores/alumnos_cursos/alumnos_cursosSlice';
+import { useAppDispatch } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import moment from 'moment';
+
+const initialValues = {
+  alumno: '',
+
+  curso: '',
+
+  status: 'CURSO',
+};
+
+const Alumnos_cursosNew = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data));
+    await router.push('/alumnos_cursos/alumnos_cursos-list');
+  };
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='New Item'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Alumno' labelFor='alumno'>
+                <Field
+                  name='alumno'
+                  id='alumno'
+                  component={SelectField}
+                  options={[]}
+                  itemRef={'alumnos'}
+                ></Field>
+              </FormField>
+
+              <FormField label='Curso' labelFor='curso'>
+                <Field
+                  name='curso'
+                  id='curso'
+                  component={SelectField}
+                  options={[]}
+                  itemRef={'cursos'}
+                ></Field>
+              </FormField>
+
+              <FormField label='EstadodelAlumno' labelFor='status'>
+                <Field name='status' id='status' component='select'>
+                  <option value='CURSO'>CURSO</option>
+
+                  <option value='ACREDITADO'>ACREDITADO</option>
+
+                  <option value='NOACREDITADO'>NOACREDITADO</option>
+
+                  <option value='BAJA'>BAJA</option>
+                </Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() =>
+                    router.push('/alumnos_cursos/alumnos_cursos-list')
+                  }
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+Alumnos_cursosNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'CREATE_ALUMNOS_CURSOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default Alumnos_cursosNew;
diff --git a/frontend/src/pages/alumnos_cursos/alumnos_cursos-table.tsx b/frontend/src/pages/alumnos_cursos/alumnos_cursos-table.tsx
new file mode 100644
index 0000000..c561948
--- /dev/null
+++ b/frontend/src/pages/alumnos_cursos/alumnos_cursos-table.tsx
@@ -0,0 +1,179 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TableAlumnos_cursos from '../../components/Alumnos_cursos/TableAlumnos_cursos';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import {
+  setRefetch,
+  uploadCsv,
+} from '../../stores/alumnos_cursos/alumnos_cursosSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const Alumnos_cursosTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([
+    { label: 'Alumno', title: 'alumno' },
+
+    { label: 'Curso', title: 'curso' },
+
+    {
+      label: 'EstadodelAlumno',
+      title: 'status',
+      type: 'enum',
+      options: ['CURSO', 'ACREDITADO', 'NOACREDITADO', 'BAJA'],
+    },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_ALUMNOS_CURSOS');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getAlumnos_cursosCSV = async () => {
+    const response = await axios({
+      url: '/alumnos_cursos?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'alumnos_cursosCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Alumnos_cursos')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Alumnos_cursos'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/alumnos_cursos/alumnos_cursos-new'}
+              color='info'
+              label='New Item'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getAlumnos_cursosCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+
+            <Link href={'/alumnos_cursos/alumnos_cursos-list'}>
+              Back to <span className='capitalize'>list</span>
+            </Link>
+          </div>
+        </CardBox>
+        <CardBox className='mb-6' hasTable>
+          <TableAlumnos_cursos
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+Alumnos_cursosTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_ALUMNOS_CURSOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default Alumnos_cursosTablesPage;
diff --git a/frontend/src/pages/alumnos_cursos/alumnos_cursos-view.tsx b/frontend/src/pages/alumnos_cursos/alumnos_cursos-view.tsx
new file mode 100644
index 0000000..a4d6116
--- /dev/null
+++ b/frontend/src/pages/alumnos_cursos/alumnos_cursos-view.tsx
@@ -0,0 +1,156 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { fetch } from '../../stores/alumnos_cursos/alumnos_cursosSlice';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import { getPageTitle } from '../../config';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import SectionMain from '../../components/SectionMain';
+import CardBox from '../../components/CardBox';
+import BaseButton from '../../components/BaseButton';
+import BaseDivider from '../../components/BaseDivider';
+import { mdiChartTimelineVariant } from '@mdi/js';
+import { SwitchField } from '../../components/SwitchField';
+import FormField from '../../components/FormField';
+
+const Alumnos_cursosView = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const { alumnos_cursos } = useAppSelector((state) => state.alumnos_cursos);
+
+  const { id } = router.query;
+
+  function removeLastCharacter(str) {
+    console.log(str, `str`);
+    return str.slice(0, -1);
+  }
+
+  useEffect(() => {
+    dispatch(fetch({ id }));
+  }, [dispatch, id]);
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('View alumnos_cursos')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={removeLastCharacter('View alumnos_cursos')}
+          main
+        >
+          <BaseButton
+            color='info'
+            label='Edit'
+            href={`/alumnos_cursos/alumnos_cursos-edit/?id=${id}`}
+          />
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Alumno</p>
+
+            <p>{alumnos_cursos?.alumno?.num_control ?? 'No data'}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Curso</p>
+
+            <p>{alumnos_cursos?.curso?.nombre ?? 'No data'}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>EstadodelAlumno</p>
+            <p>{alumnos_cursos?.status ?? 'No data'}</p>
+          </div>
+
+          <>
+            <p className={'block font-bold mb-2'}>
+              Evaluaciones InscripciónAsociada
+            </p>
+            <CardBox
+              className='mb-6 border border-gray-300 rounded overflow-hidden'
+              hasTable
+            >
+              <div className='overflow-x-auto'>
+                <table>
+                  <thead>
+                    <tr>
+                      <th>NúmerodeEvaluación</th>
+
+                      <th>Calificación</th>
+
+                      <th>NúmerodeFaltas</th>
+
+                      <th>Observaciones</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {alumnos_cursos.evaluaciones_alumnos_cursos &&
+                      Array.isArray(
+                        alumnos_cursos.evaluaciones_alumnos_cursos,
+                      ) &&
+                      alumnos_cursos.evaluaciones_alumnos_cursos.map(
+                        (item: any) => (
+                          <tr
+                            key={item.id}
+                            onClick={() =>
+                              router.push(
+                                `/evaluaciones/evaluaciones-view/?id=${item.id}`,
+                              )
+                            }
+                          >
+                            <td data-label='numero_evaluacion'>
+                              {item.numero_evaluacion}
+                            </td>
+
+                            <td data-label='calificacion'>
+                              {item.calificacion}
+                            </td>
+
+                            <td data-label='faltas'>{item.faltas}</td>
+
+                            <td data-label='observaciones'>
+                              {item.observaciones}
+                            </td>
+                          </tr>
+                        ),
+                      )}
+                  </tbody>
+                </table>
+              </div>
+              {!alumnos_cursos?.evaluaciones_alumnos_cursos?.length && (
+                <div className={'text-center py-4'}>No data</div>
+              )}
+            </CardBox>
+          </>
+
+          <BaseDivider />
+
+          <BaseButton
+            color='info'
+            label='Back'
+            onClick={() => router.push('/alumnos_cursos/alumnos_cursos-list')}
+          />
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+Alumnos_cursosView.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_ALUMNOS_CURSOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default Alumnos_cursosView;
diff --git a/frontend/src/pages/api/hello.js b/frontend/src/pages/api/hello.js
new file mode 100644
index 0000000..1c39e1f
--- /dev/null
+++ b/frontend/src/pages/api/hello.js
@@ -0,0 +1,5 @@
+// Next.js API route support: https://nextjs.org/docs/api-routes/introduction
+
+export default function helloAPI(req, res) {
+  res.status(200).json({ name: 'John Doe' });
+}
diff --git a/frontend/src/pages/api/logError.ts b/frontend/src/pages/api/logError.ts
new file mode 100644
index 0000000..b391ffc
--- /dev/null
+++ b/frontend/src/pages/api/logError.ts
@@ -0,0 +1,83 @@
+import fsPromises from 'fs/promises';
+import path from 'path';
+
+const dataFilePath = path.join(process.cwd(), 'json/runtimeError.json');
+
+export default async function handler(req, res) {
+  // Ensure directory exists
+  try {
+    await fsPromises.mkdir(path.dirname(dataFilePath), { recursive: true });
+  } catch (error) {
+    // Ignore if directory already exists
+  }
+
+  if (req.method === 'GET') {
+    try {
+      // Check if file exists
+      try {
+        await fsPromises.access(dataFilePath);
+      } catch (error) {
+        // File doesn't exist, return empty object
+        return res.status(200).json({});
+      }
+
+      // Read the existing data from the JSON file
+      const jsonData = await fsPromises.readFile(dataFilePath, 'utf-8');
+
+      // Handle empty file
+      if (!jsonData || jsonData.trim() === '') {
+        // Write empty JSON object to file
+        await fsPromises.writeFile(dataFilePath, '{}', 'utf-8');
+        return res.status(200).json({});
+      }
+
+      // Parse JSON data
+      try {
+        const objectData = JSON.parse(jsonData);
+        return res.status(200).json(objectData);
+      } catch (parseError) {
+        console.error('Error parsing JSON from file:', parseError);
+        // Reset the file with valid JSON if parsing fails
+        await fsPromises.writeFile(dataFilePath, '{}', 'utf-8');
+        return res.status(200).json({});
+      }
+    } catch (error) {
+      console.error('Error in GET handler:', error);
+      return res.status(200).json({}); // Return empty object instead of error
+    }
+  } else if (req.method === 'POST') {
+    try {
+      const updatedData = JSON.stringify(req.body);
+
+      // Create directory if it doesn't exist
+      await fsPromises.mkdir(path.dirname(dataFilePath), { recursive: true });
+
+      // Write the updated data to the JSON file
+      await fsPromises.writeFile(dataFilePath, updatedData);
+
+      // Send a success response
+      res.status(200).json({ message: 'Data stored successfully' });
+    } catch (error) {
+      console.error('Error in POST handler:', error);
+      // Send an error response
+      res.status(500).json({ message: 'Error storing data' });
+    }
+  } else if (req.method === 'DELETE') {
+    try {
+      // Create directory if it doesn't exist
+      await fsPromises.mkdir(path.dirname(dataFilePath), { recursive: true });
+
+      // Write empty JSON object to file
+      await fsPromises.writeFile(dataFilePath, '{}');
+
+      // Send a success response
+      res.status(200).json({ message: 'Data deleted successfully' });
+    } catch (error) {
+      console.error('Error in DELETE handler:', error);
+      // Send an error response
+      res.status(500).json({ message: 'Error deleting data' });
+    }
+  } else {
+    res.status(405).json({ message: 'Method not allowed' });
+  }
+}
diff --git a/frontend/src/pages/cursos/[cursosId].tsx b/frontend/src/pages/cursos/[cursosId].tsx
new file mode 100644
index 0000000..bf5f166
--- /dev/null
+++ b/frontend/src/pages/cursos/[cursosId].tsx
@@ -0,0 +1,242 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import { update, fetch } from '../../stores/cursos/cursosSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditCursos = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    instructor: null,
+
+    nombre: '',
+
+    duracion: '',
+
+    fecha_inicio: new Date(),
+
+    fecha_fin: new Date(),
+
+    numero_sesiones: '',
+
+    numero_evaluaciones: '',
+
+    status: '',
+
+    status_acreditacion: '',
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { cursos } = useAppSelector((state) => state.cursos);
+
+  const { cursosId } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: cursosId }));
+  }, [cursosId]);
+
+  useEffect(() => {
+    if (typeof cursos === 'object') {
+      setInitialValues(cursos);
+    }
+  }, [cursos]);
+
+  useEffect(() => {
+    if (typeof cursos === 'object') {
+      const newInitialVal = { ...initVals };
+
+      Object.keys(initVals).forEach((el) => (newInitialVal[el] = cursos[el]));
+
+      setInitialValues(newInitialVal);
+    }
+  }, [cursos]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: cursosId, data }));
+    await router.push('/cursos/cursos-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit cursos')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit cursos'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Instructor' labelFor='instructor'>
+                <Field
+                  name='instructor'
+                  id='instructor'
+                  component={SelectField}
+                  options={initialValues.instructor}
+                  itemRef={'instructores'}
+                  showField={'status'}
+                ></Field>
+              </FormField>
+
+              <FormField label='NombredelCurso'>
+                <Field name='nombre' placeholder='NombredelCurso' />
+              </FormField>
+
+              <FormField label='Duración'>
+                <Field type='number' name='duracion' placeholder='Duración' />
+              </FormField>
+
+              <FormField label='FechadeInicio'>
+                <DatePicker
+                  dateFormat='yyyy-MM-dd hh:mm'
+                  showTimeSelect
+                  selected={
+                    initialValues.fecha_inicio
+                      ? new Date(
+                          dayjs(initialValues.fecha_inicio).format(
+                            'YYYY-MM-DD hh:mm',
+                          ),
+                        )
+                      : null
+                  }
+                  onChange={(date) =>
+                    setInitialValues({ ...initialValues, fecha_inicio: date })
+                  }
+                />
+              </FormField>
+
+              <FormField label='FechadeFin'>
+                <DatePicker
+                  dateFormat='yyyy-MM-dd hh:mm'
+                  showTimeSelect
+                  selected={
+                    initialValues.fecha_fin
+                      ? new Date(
+                          dayjs(initialValues.fecha_fin).format(
+                            'YYYY-MM-DD hh:mm',
+                          ),
+                        )
+                      : null
+                  }
+                  onChange={(date) =>
+                    setInitialValues({ ...initialValues, fecha_fin: date })
+                  }
+                />
+              </FormField>
+
+              <FormField label='NúmerodeSesiones'>
+                <Field
+                  type='number'
+                  name='numero_sesiones'
+                  placeholder='NúmerodeSesiones'
+                />
+              </FormField>
+
+              <FormField label='NúmerodeEvaluaciones'>
+                <Field
+                  type='number'
+                  name='numero_evaluaciones'
+                  placeholder='NúmerodeEvaluaciones'
+                />
+              </FormField>
+
+              <FormField label='EstadodelCurso' labelFor='status'>
+                <Field name='status' id='status' component='select'>
+                  <option value='ESPERA'>ESPERA</option>
+
+                  <option value='ACTIVO'>ACTIVO</option>
+
+                  <option value='CANCELADO'>CANCELADO</option>
+
+                  <option value='TERMINADO'>TERMINADO</option>
+
+                  <option value='OBSERVACION'>OBSERVACION</option>
+                </Field>
+              </FormField>
+
+              <FormField
+                label='EstadodeAcreditación'
+                labelFor='status_acreditacion'
+              >
+                <Field
+                  name='status_acreditacion'
+                  id='status_acreditacion'
+                  component='select'
+                >
+                  <option value='CURSO'>CURSO</option>
+
+                  <option value='CALIFICACIONES'>CALIFICACIONES</option>
+
+                  <option value='ACREDITACION'>ACREDITACION</option>
+
+                  <option value='CERRADO'>CERRADO</option>
+                </Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/cursos/cursos-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditCursos.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_CURSOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditCursos;
diff --git a/frontend/src/pages/cursos/cursos-edit.tsx b/frontend/src/pages/cursos/cursos-edit.tsx
new file mode 100644
index 0000000..d197890
--- /dev/null
+++ b/frontend/src/pages/cursos/cursos-edit.tsx
@@ -0,0 +1,240 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import { update, fetch } from '../../stores/cursos/cursosSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditCursosPage = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    instructor: null,
+
+    nombre: '',
+
+    duracion: '',
+
+    fecha_inicio: new Date(),
+
+    fecha_fin: new Date(),
+
+    numero_sesiones: '',
+
+    numero_evaluaciones: '',
+
+    status: '',
+
+    status_acreditacion: '',
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { cursos } = useAppSelector((state) => state.cursos);
+
+  const { id } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }));
+  }, [id]);
+
+  useEffect(() => {
+    if (typeof cursos === 'object') {
+      setInitialValues(cursos);
+    }
+  }, [cursos]);
+
+  useEffect(() => {
+    if (typeof cursos === 'object') {
+      const newInitialVal = { ...initVals };
+      Object.keys(initVals).forEach((el) => (newInitialVal[el] = cursos[el]));
+      setInitialValues(newInitialVal);
+    }
+  }, [cursos]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }));
+    await router.push('/cursos/cursos-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit cursos')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit cursos'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Instructor' labelFor='instructor'>
+                <Field
+                  name='instructor'
+                  id='instructor'
+                  component={SelectField}
+                  options={initialValues.instructor}
+                  itemRef={'instructores'}
+                  showField={'status'}
+                ></Field>
+              </FormField>
+
+              <FormField label='NombredelCurso'>
+                <Field name='nombre' placeholder='NombredelCurso' />
+              </FormField>
+
+              <FormField label='Duración'>
+                <Field type='number' name='duracion' placeholder='Duración' />
+              </FormField>
+
+              <FormField label='FechadeInicio'>
+                <DatePicker
+                  dateFormat='yyyy-MM-dd hh:mm'
+                  showTimeSelect
+                  selected={
+                    initialValues.fecha_inicio
+                      ? new Date(
+                          dayjs(initialValues.fecha_inicio).format(
+                            'YYYY-MM-DD hh:mm',
+                          ),
+                        )
+                      : null
+                  }
+                  onChange={(date) =>
+                    setInitialValues({ ...initialValues, fecha_inicio: date })
+                  }
+                />
+              </FormField>
+
+              <FormField label='FechadeFin'>
+                <DatePicker
+                  dateFormat='yyyy-MM-dd hh:mm'
+                  showTimeSelect
+                  selected={
+                    initialValues.fecha_fin
+                      ? new Date(
+                          dayjs(initialValues.fecha_fin).format(
+                            'YYYY-MM-DD hh:mm',
+                          ),
+                        )
+                      : null
+                  }
+                  onChange={(date) =>
+                    setInitialValues({ ...initialValues, fecha_fin: date })
+                  }
+                />
+              </FormField>
+
+              <FormField label='NúmerodeSesiones'>
+                <Field
+                  type='number'
+                  name='numero_sesiones'
+                  placeholder='NúmerodeSesiones'
+                />
+              </FormField>
+
+              <FormField label='NúmerodeEvaluaciones'>
+                <Field
+                  type='number'
+                  name='numero_evaluaciones'
+                  placeholder='NúmerodeEvaluaciones'
+                />
+              </FormField>
+
+              <FormField label='EstadodelCurso' labelFor='status'>
+                <Field name='status' id='status' component='select'>
+                  <option value='ESPERA'>ESPERA</option>
+
+                  <option value='ACTIVO'>ACTIVO</option>
+
+                  <option value='CANCELADO'>CANCELADO</option>
+
+                  <option value='TERMINADO'>TERMINADO</option>
+
+                  <option value='OBSERVACION'>OBSERVACION</option>
+                </Field>
+              </FormField>
+
+              <FormField
+                label='EstadodeAcreditación'
+                labelFor='status_acreditacion'
+              >
+                <Field
+                  name='status_acreditacion'
+                  id='status_acreditacion'
+                  component='select'
+                >
+                  <option value='CURSO'>CURSO</option>
+
+                  <option value='CALIFICACIONES'>CALIFICACIONES</option>
+
+                  <option value='ACREDITACION'>ACREDITACION</option>
+
+                  <option value='CERRADO'>CERRADO</option>
+                </Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/cursos/cursos-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditCursosPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_CURSOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditCursosPage;
diff --git a/frontend/src/pages/cursos/cursos-list.tsx b/frontend/src/pages/cursos/cursos-list.tsx
new file mode 100644
index 0000000..fbce80d
--- /dev/null
+++ b/frontend/src/pages/cursos/cursos-list.tsx
@@ -0,0 +1,191 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TableCursos from '../../components/Cursos/TableCursos';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import { setRefetch, uploadCsv } from '../../stores/cursos/cursosSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const CursosTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([
+    { label: 'NombredelCurso', title: 'nombre' },
+    { label: 'Duración', title: 'duracion', number: 'true' },
+    { label: 'NúmerodeSesiones', title: 'numero_sesiones', number: 'true' },
+    {
+      label: 'NúmerodeEvaluaciones',
+      title: 'numero_evaluaciones',
+      number: 'true',
+    },
+
+    { label: 'FechadeInicio', title: 'fecha_inicio', date: 'true' },
+    { label: 'FechadeFin', title: 'fecha_fin', date: 'true' },
+
+    { label: 'Instructor', title: 'instructor' },
+
+    {
+      label: 'EstadodelCurso',
+      title: 'status',
+      type: 'enum',
+      options: ['ESPERA', 'ACTIVO', 'CANCELADO', 'TERMINADO', 'OBSERVACION'],
+    },
+    {
+      label: 'EstadodeAcreditación',
+      title: 'status_acreditacion',
+      type: 'enum',
+      options: ['CURSO', 'CALIFICACIONES', 'ACREDITACION', 'CERRADO'],
+    },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_CURSOS');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getCursosCSV = async () => {
+    const response = await axios({
+      url: '/cursos?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'cursosCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Cursos')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Cursos'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/cursos/cursos-new'}
+              color='info'
+              label='New Item'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getCursosCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <Link href={'/cursos/cursos-table'}>Switch to Table</Link>
+          </div>
+        </CardBox>
+
+        <CardBox className='mb-6' hasTable>
+          <TableCursos
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+CursosTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_CURSOS'}>{page}</LayoutAuthenticated>
+  );
+};
+
+export default CursosTablesPage;
diff --git a/frontend/src/pages/cursos/cursos-new.tsx b/frontend/src/pages/cursos/cursos-new.tsx
new file mode 100644
index 0000000..fcb3331
--- /dev/null
+++ b/frontend/src/pages/cursos/cursos-new.tsx
@@ -0,0 +1,205 @@
+import {
+  mdiAccount,
+  mdiChartTimelineVariant,
+  mdiMail,
+  mdiUpload,
+} from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SwitchField } from '../../components/SwitchField';
+
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { RichTextField } from '../../components/RichTextField';
+
+import { create } from '../../stores/cursos/cursosSlice';
+import { useAppDispatch } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import moment from 'moment';
+
+const initialValues = {
+  instructor: '',
+
+  nombre: '',
+
+  duracion: '',
+
+  fecha_inicio: '',
+
+  fecha_fin: '',
+
+  numero_sesiones: '',
+
+  numero_evaluaciones: '',
+
+  status: 'ESPERA',
+
+  status_acreditacion: 'CURSO',
+};
+
+const CursosNew = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+
+  // get from url params
+  const { dateRangeStart, dateRangeEnd } = router.query;
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data));
+    await router.push('/cursos/cursos-list');
+  };
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='New Item'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={
+              dateRangeStart && dateRangeEnd
+                ? {
+                    ...initialValues,
+                    fecha_inicio:
+                      moment(dateRangeStart).format('YYYY-MM-DDTHH:mm'),
+                    fecha_fin: moment(dateRangeEnd).format('YYYY-MM-DDTHH:mm'),
+                  }
+                : initialValues
+            }
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Instructor' labelFor='instructor'>
+                <Field
+                  name='instructor'
+                  id='instructor'
+                  component={SelectField}
+                  options={[]}
+                  itemRef={'instructores'}
+                ></Field>
+              </FormField>
+
+              <FormField label='NombredelCurso'>
+                <Field name='nombre' placeholder='NombredelCurso' />
+              </FormField>
+
+              <FormField label='Duración'>
+                <Field type='number' name='duracion' placeholder='Duración' />
+              </FormField>
+
+              <FormField label='FechadeInicio'>
+                <Field
+                  type='datetime-local'
+                  name='fecha_inicio'
+                  placeholder='FechadeInicio'
+                />
+              </FormField>
+
+              <FormField label='FechadeFin'>
+                <Field
+                  type='datetime-local'
+                  name='fecha_fin'
+                  placeholder='FechadeFin'
+                />
+              </FormField>
+
+              <FormField label='NúmerodeSesiones'>
+                <Field
+                  type='number'
+                  name='numero_sesiones'
+                  placeholder='NúmerodeSesiones'
+                />
+              </FormField>
+
+              <FormField label='NúmerodeEvaluaciones'>
+                <Field
+                  type='number'
+                  name='numero_evaluaciones'
+                  placeholder='NúmerodeEvaluaciones'
+                />
+              </FormField>
+
+              <FormField label='EstadodelCurso' labelFor='status'>
+                <Field name='status' id='status' component='select'>
+                  <option value='ESPERA'>ESPERA</option>
+
+                  <option value='ACTIVO'>ACTIVO</option>
+
+                  <option value='CANCELADO'>CANCELADO</option>
+
+                  <option value='TERMINADO'>TERMINADO</option>
+
+                  <option value='OBSERVACION'>OBSERVACION</option>
+                </Field>
+              </FormField>
+
+              <FormField
+                label='EstadodeAcreditación'
+                labelFor='status_acreditacion'
+              >
+                <Field
+                  name='status_acreditacion'
+                  id='status_acreditacion'
+                  component='select'
+                >
+                  <option value='CURSO'>CURSO</option>
+
+                  <option value='CALIFICACIONES'>CALIFICACIONES</option>
+
+                  <option value='ACREDITACION'>ACREDITACION</option>
+
+                  <option value='CERRADO'>CERRADO</option>
+                </Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/cursos/cursos-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+CursosNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'CREATE_CURSOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default CursosNew;
diff --git a/frontend/src/pages/cursos/cursos-table.tsx b/frontend/src/pages/cursos/cursos-table.tsx
new file mode 100644
index 0000000..3ff8f0d
--- /dev/null
+++ b/frontend/src/pages/cursos/cursos-table.tsx
@@ -0,0 +1,190 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TableCursos from '../../components/Cursos/TableCursos';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import { setRefetch, uploadCsv } from '../../stores/cursos/cursosSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const CursosTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([
+    { label: 'NombredelCurso', title: 'nombre' },
+    { label: 'Duración', title: 'duracion', number: 'true' },
+    { label: 'NúmerodeSesiones', title: 'numero_sesiones', number: 'true' },
+    {
+      label: 'NúmerodeEvaluaciones',
+      title: 'numero_evaluaciones',
+      number: 'true',
+    },
+
+    { label: 'FechadeInicio', title: 'fecha_inicio', date: 'true' },
+    { label: 'FechadeFin', title: 'fecha_fin', date: 'true' },
+
+    { label: 'Instructor', title: 'instructor' },
+
+    {
+      label: 'EstadodelCurso',
+      title: 'status',
+      type: 'enum',
+      options: ['ESPERA', 'ACTIVO', 'CANCELADO', 'TERMINADO', 'OBSERVACION'],
+    },
+    {
+      label: 'EstadodeAcreditación',
+      title: 'status_acreditacion',
+      type: 'enum',
+      options: ['CURSO', 'CALIFICACIONES', 'ACREDITACION', 'CERRADO'],
+    },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_CURSOS');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getCursosCSV = async () => {
+    const response = await axios({
+      url: '/cursos?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'cursosCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Cursos')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Cursos'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/cursos/cursos-new'}
+              color='info'
+              label='New Item'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getCursosCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+
+            <Link href={'/cursos/cursos-list'}>
+              Back to <span className='capitalize'>calendar</span>
+            </Link>
+          </div>
+        </CardBox>
+        <CardBox className='mb-6' hasTable>
+          <TableCursos
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+CursosTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_CURSOS'}>{page}</LayoutAuthenticated>
+  );
+};
+
+export default CursosTablesPage;
diff --git a/frontend/src/pages/cursos/cursos-view.tsx b/frontend/src/pages/cursos/cursos-view.tsx
new file mode 100644
index 0000000..21b23ea
--- /dev/null
+++ b/frontend/src/pages/cursos/cursos-view.tsx
@@ -0,0 +1,187 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { fetch } from '../../stores/cursos/cursosSlice';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import { getPageTitle } from '../../config';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import SectionMain from '../../components/SectionMain';
+import CardBox from '../../components/CardBox';
+import BaseButton from '../../components/BaseButton';
+import BaseDivider from '../../components/BaseDivider';
+import { mdiChartTimelineVariant } from '@mdi/js';
+import { SwitchField } from '../../components/SwitchField';
+import FormField from '../../components/FormField';
+
+const CursosView = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const { cursos } = useAppSelector((state) => state.cursos);
+
+  const { id } = router.query;
+
+  function removeLastCharacter(str) {
+    console.log(str, `str`);
+    return str.slice(0, -1);
+  }
+
+  useEffect(() => {
+    dispatch(fetch({ id }));
+  }, [dispatch, id]);
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('View cursos')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={removeLastCharacter('View cursos')}
+          main
+        >
+          <BaseButton
+            color='info'
+            label='Edit'
+            href={`/cursos/cursos-edit/?id=${id}`}
+          />
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Instructor</p>
+
+            <p>{cursos?.instructor?.status ?? 'No data'}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>NombredelCurso</p>
+            <p>{cursos?.nombre}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Duración</p>
+            <p>{cursos?.duracion || 'No data'}</p>
+          </div>
+
+          <FormField label='FechadeInicio'>
+            {cursos.fecha_inicio ? (
+              <DatePicker
+                dateFormat='yyyy-MM-dd hh:mm'
+                showTimeSelect
+                selected={
+                  cursos.fecha_inicio
+                    ? new Date(
+                        dayjs(cursos.fecha_inicio).format('YYYY-MM-DD hh:mm'),
+                      )
+                    : null
+                }
+                disabled
+              />
+            ) : (
+              <p>No FechadeInicio</p>
+            )}
+          </FormField>
+
+          <FormField label='FechadeFin'>
+            {cursos.fecha_fin ? (
+              <DatePicker
+                dateFormat='yyyy-MM-dd hh:mm'
+                showTimeSelect
+                selected={
+                  cursos.fecha_fin
+                    ? new Date(
+                        dayjs(cursos.fecha_fin).format('YYYY-MM-DD hh:mm'),
+                      )
+                    : null
+                }
+                disabled
+              />
+            ) : (
+              <p>No FechadeFin</p>
+            )}
+          </FormField>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>NúmerodeSesiones</p>
+            <p>{cursos?.numero_sesiones || 'No data'}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>NúmerodeEvaluaciones</p>
+            <p>{cursos?.numero_evaluaciones || 'No data'}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>EstadodelCurso</p>
+            <p>{cursos?.status ?? 'No data'}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>EstadodeAcreditación</p>
+            <p>{cursos?.status_acreditacion ?? 'No data'}</p>
+          </div>
+
+          <>
+            <p className={'block font-bold mb-2'}>Alumnos_cursos Curso</p>
+            <CardBox
+              className='mb-6 border border-gray-300 rounded overflow-hidden'
+              hasTable
+            >
+              <div className='overflow-x-auto'>
+                <table>
+                  <thead>
+                    <tr>
+                      <th>EstadodelAlumno</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {cursos.alumnos_cursos_curso &&
+                      Array.isArray(cursos.alumnos_cursos_curso) &&
+                      cursos.alumnos_cursos_curso.map((item: any) => (
+                        <tr
+                          key={item.id}
+                          onClick={() =>
+                            router.push(
+                              `/alumnos_cursos/alumnos_cursos-view/?id=${item.id}`,
+                            )
+                          }
+                        >
+                          <td data-label='status'>{item.status}</td>
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
+              </div>
+              {!cursos?.alumnos_cursos_curso?.length && (
+                <div className={'text-center py-4'}>No data</div>
+              )}
+            </CardBox>
+          </>
+
+          <BaseDivider />
+
+          <BaseButton
+            color='info'
+            label='Back'
+            onClick={() => router.push('/cursos/cursos-list')}
+          />
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+CursosView.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_CURSOS'}>{page}</LayoutAuthenticated>
+  );
+};
+
+export default CursosView;
diff --git a/frontend/src/pages/dashboard.tsx b/frontend/src/pages/dashboard.tsx
new file mode 100644
index 0000000..210dfd1
--- /dev/null
+++ b/frontend/src/pages/dashboard.tsx
@@ -0,0 +1,625 @@
+import * as icon from '@mdi/js';
+import Head from 'next/head';
+import React from 'react';
+import axios from 'axios';
+import type { ReactElement } from 'react';
+import LayoutAuthenticated from '../layouts/Authenticated';
+import SectionMain from '../components/SectionMain';
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
+import BaseIcon from '../components/BaseIcon';
+import { getPageTitle } from '../config';
+import Link from 'next/link';
+import { useTranslation } from 'next-i18next';
+
+import { hasPermission } from '../helpers/userPermissions';
+import { fetchWidgets } from '../stores/roles/rolesSlice';
+import { WidgetCreator } from '../components/WidgetCreator/WidgetCreator';
+import { SmartWidget } from '../components/SmartWidget/SmartWidget';
+
+import { useAppDispatch, useAppSelector } from '../stores/hooks';
+const Dashboard = () => {
+  const { t } = useTranslation('common');
+  const dispatch = useAppDispatch();
+  const iconsColor = useAppSelector((state) => state.style.iconsColor);
+  const corners = useAppSelector((state) => state.style.corners);
+  const cardsStyle = useAppSelector((state) => state.style.cardsStyle);
+
+  const loadingMessage = t('pages.dashboard.loading', {
+    defaultValue: 'Loading...',
+  });
+
+  const [users, setUsers] = React.useState(loadingMessage);
+  const [alumnos, setAlumnos] = React.useState(loadingMessage);
+  const [alumnos_cursos, setAlumnos_cursos] = React.useState(loadingMessage);
+  const [cursos, setCursos] = React.useState(loadingMessage);
+  const [documentos, setDocumentos] = React.useState(loadingMessage);
+  const [evaluaciones, setEvaluaciones] = React.useState(loadingMessage);
+  const [instructores, setInstructores] = React.useState(loadingMessage);
+  const [personas, setPersonas] = React.useState(loadingMessage);
+  const [requisitos, setRequisitos] = React.useState(loadingMessage);
+  const [usuarios, setUsuarios] = React.useState(loadingMessage);
+  const [roles, setRoles] = React.useState(loadingMessage);
+  const [permissions, setPermissions] = React.useState(loadingMessage);
+
+  const [widgetsRole, setWidgetsRole] = React.useState({
+    role: { value: '', label: '' },
+  });
+  const { currentUser } = useAppSelector((state) => state.auth);
+  const { isFetchingQuery } = useAppSelector((state) => state.openAi);
+
+  const { rolesWidgets, loading } = useAppSelector((state) => state.roles);
+
+  async function loadData() {
+    const entities = [
+      'users',
+      'alumnos',
+      'alumnos_cursos',
+      'cursos',
+      'documentos',
+      'evaluaciones',
+      'instructores',
+      'personas',
+      'requisitos',
+      'usuarios',
+      'roles',
+      'permissions',
+    ];
+    const fns = [
+      setUsers,
+      setAlumnos,
+      setAlumnos_cursos,
+      setCursos,
+      setDocumentos,
+      setEvaluaciones,
+      setInstructores,
+      setPersonas,
+      setRequisitos,
+      setUsuarios,
+      setRoles,
+      setPermissions,
+    ];
+
+    const requests = entities.map((entity, index) => {
+      if (hasPermission(currentUser, `READ_${entity.toUpperCase()}`)) {
+        return axios.get(`/${entity.toLowerCase()}/count`);
+      } else {
+        fns[index](null);
+        return Promise.resolve({ data: { count: null } });
+      }
+    });
+
+    Promise.allSettled(requests).then((results) => {
+      results.forEach((result, i) => {
+        if (result.status === 'fulfilled') {
+          fns[i](result.value.data.count);
+        } else {
+          fns[i](result.reason.message);
+        }
+      });
+    });
+  }
+
+  async function getWidgets(roleId) {
+    await dispatch(fetchWidgets(roleId));
+  }
+  React.useEffect(() => {
+    if (!currentUser) return;
+    loadData().then();
+    setWidgetsRole({
+      role: {
+        value: currentUser?.app_role?.id,
+        label: currentUser?.app_role?.name,
+      },
+    });
+  }, [currentUser]);
+
+  React.useEffect(() => {
+    if (!currentUser || !widgetsRole?.role?.value) return;
+    getWidgets(widgetsRole?.role?.value || '').then();
+  }, [widgetsRole?.role?.value]);
+
+  return (
+    <>
+      <Head>
+        <title>
+          {getPageTitle(
+            t('pages.dashboard.pageTitle', { defaultValue: 'Overview' }),
+          )}
+        </title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={icon.mdiChartTimelineVariant}
+          title={t('pages.dashboard.overview', { defaultValue: 'Overview' })}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+
+        {hasPermission(currentUser, 'CREATE_ROLES') && (
+          <WidgetCreator
+            currentUser={currentUser}
+            isFetchingQuery={isFetchingQuery}
+            setWidgetsRole={setWidgetsRole}
+            widgetsRole={widgetsRole}
+          />
+        )}
+        {!!rolesWidgets.length &&
+          hasPermission(currentUser, 'CREATE_ROLES') && (
+            <p className='  text-gray-500 dark:text-gray-400 mb-4'>
+              {`${widgetsRole?.role?.label || 'Users'}'s widgets`}
+            </p>
+          )}
+
+        <div className='grid grid-cols-1 gap-6 lg:grid-cols-4 mb-6 grid-flow-dense'>
+          {(isFetchingQuery || loading) && (
+            <div
+              className={` ${
+                corners !== 'rounded-full' ? corners : 'rounded-3xl'
+              } dark:bg-dark-900 text-lg leading-tight   text-gray-500 flex items-center ${cardsStyle} dark:border-dark-700 p-6`}
+            >
+              <BaseIcon
+                className={`${iconsColor} animate-spin mr-5`}
+                w='w-16'
+                h='h-16'
+                size={48}
+                path={icon.mdiLoading}
+              />{' '}
+              {t('pages.dashboard.loadingWidgets', {
+                defaultValue: 'Loading widgets...',
+              })}
+            </div>
+          )}
+
+          {rolesWidgets &&
+            rolesWidgets.map((widget) => (
+              <SmartWidget
+                key={widget.id}
+                userId={currentUser?.id}
+                widget={widget}
+                roleId={widgetsRole?.role?.value || ''}
+                admin={hasPermission(currentUser, 'CREATE_ROLES')}
+              />
+            ))}
+        </div>
+
+        {!!rolesWidgets.length && (
+          <hr className='my-6 text-skyBlueTheme-mainBG  ' />
+        )}
+
+        <div
+          id='dashboard'
+          className='grid grid-cols-1 gap-6 lg:grid-cols-3 mb-6'
+        >
+          {hasPermission(currentUser, 'READ_USERS') && (
+            <Link href={'/users/users-list'}>
+              <div
+                className={`${
+                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
+                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+              >
+                <div className='flex justify-between align-center'>
+                  <div>
+                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
+                      Users
+                    </div>
+                    <div className='text-3xl leading-tight font-semibold'>
+                      {users}
+                    </div>
+                  </div>
+                  <div>
+                    <BaseIcon
+                      className={`${iconsColor}`}
+                      w='w-16'
+                      h='h-16'
+                      size={48}
+                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                      // @ts-ignore
+                      path={icon.mdiAccountGroup || icon.mdiTable}
+                    />
+                  </div>
+                </div>
+              </div>
+            </Link>
+          )}
+
+          {hasPermission(currentUser, 'READ_ALUMNOS') && (
+            <Link href={'/alumnos/alumnos-list'}>
+              <div
+                className={`${
+                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
+                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+              >
+                <div className='flex justify-between align-center'>
+                  <div>
+                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
+                      Alumnos
+                    </div>
+                    <div className='text-3xl leading-tight font-semibold'>
+                      {alumnos}
+                    </div>
+                  </div>
+                  <div>
+                    <BaseIcon
+                      className={`${iconsColor}`}
+                      w='w-16'
+                      h='h-16'
+                      size={48}
+                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                      // @ts-ignore
+                      path={
+                        'mdiAccountStudent' in icon
+                          ? icon['mdiAccountStudent' as keyof typeof icon]
+                          : icon.mdiTable || icon.mdiTable
+                      }
+                    />
+                  </div>
+                </div>
+              </div>
+            </Link>
+          )}
+
+          {hasPermission(currentUser, 'READ_ALUMNOS_CURSOS') && (
+            <Link href={'/alumnos_cursos/alumnos_cursos-list'}>
+              <div
+                className={`${
+                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
+                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+              >
+                <div className='flex justify-between align-center'>
+                  <div>
+                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
+                      Alumnos cursos
+                    </div>
+                    <div className='text-3xl leading-tight font-semibold'>
+                      {alumnos_cursos}
+                    </div>
+                  </div>
+                  <div>
+                    <BaseIcon
+                      className={`${iconsColor}`}
+                      w='w-16'
+                      h='h-16'
+                      size={48}
+                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                      // @ts-ignore
+                      path={
+                        'mdiAccountGroup' in icon
+                          ? icon['mdiAccountGroup' as keyof typeof icon]
+                          : icon.mdiTable || icon.mdiTable
+                      }
+                    />
+                  </div>
+                </div>
+              </div>
+            </Link>
+          )}
+
+          {hasPermission(currentUser, 'READ_CURSOS') && (
+            <Link href={'/cursos/cursos-list'}>
+              <div
+                className={`${
+                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
+                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+              >
+                <div className='flex justify-between align-center'>
+                  <div>
+                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
+                      Cursos
+                    </div>
+                    <div className='text-3xl leading-tight font-semibold'>
+                      {cursos}
+                    </div>
+                  </div>
+                  <div>
+                    <BaseIcon
+                      className={`${iconsColor}`}
+                      w='w-16'
+                      h='h-16'
+                      size={48}
+                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                      // @ts-ignore
+                      path={
+                        'mdiBookOpenPageVariant' in icon
+                          ? icon['mdiBookOpenPageVariant' as keyof typeof icon]
+                          : icon.mdiTable || icon.mdiTable
+                      }
+                    />
+                  </div>
+                </div>
+              </div>
+            </Link>
+          )}
+
+          {hasPermission(currentUser, 'READ_DOCUMENTOS') && (
+            <Link href={'/documentos/documentos-list'}>
+              <div
+                className={`${
+                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
+                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+              >
+                <div className='flex justify-between align-center'>
+                  <div>
+                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
+                      Documentos
+                    </div>
+                    <div className='text-3xl leading-tight font-semibold'>
+                      {documentos}
+                    </div>
+                  </div>
+                  <div>
+                    <BaseIcon
+                      className={`${iconsColor}`}
+                      w='w-16'
+                      h='h-16'
+                      size={48}
+                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                      // @ts-ignore
+                      path={
+                        'mdiFileDocumentOutline' in icon
+                          ? icon['mdiFileDocumentOutline' as keyof typeof icon]
+                          : icon.mdiTable || icon.mdiTable
+                      }
+                    />
+                  </div>
+                </div>
+              </div>
+            </Link>
+          )}
+
+          {hasPermission(currentUser, 'READ_EVALUACIONES') && (
+            <Link href={'/evaluaciones/evaluaciones-list'}>
+              <div
+                className={`${
+                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
+                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+              >
+                <div className='flex justify-between align-center'>
+                  <div>
+                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
+                      Evaluaciones
+                    </div>
+                    <div className='text-3xl leading-tight font-semibold'>
+                      {evaluaciones}
+                    </div>
+                  </div>
+                  <div>
+                    <BaseIcon
+                      className={`${iconsColor}`}
+                      w='w-16'
+                      h='h-16'
+                      size={48}
+                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                      // @ts-ignore
+                      path={
+                        'mdiClipboardCheck' in icon
+                          ? icon['mdiClipboardCheck' as keyof typeof icon]
+                          : icon.mdiTable || icon.mdiTable
+                      }
+                    />
+                  </div>
+                </div>
+              </div>
+            </Link>
+          )}
+
+          {hasPermission(currentUser, 'READ_INSTRUCTORES') && (
+            <Link href={'/instructores/instructores-list'}>
+              <div
+                className={`${
+                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
+                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+              >
+                <div className='flex justify-between align-center'>
+                  <div>
+                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
+                      Instructores
+                    </div>
+                    <div className='text-3xl leading-tight font-semibold'>
+                      {instructores}
+                    </div>
+                  </div>
+                  <div>
+                    <BaseIcon
+                      className={`${iconsColor}`}
+                      w='w-16'
+                      h='h-16'
+                      size={48}
+                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                      // @ts-ignore
+                      path={
+                        'mdiSchool' in icon
+                          ? icon['mdiSchool' as keyof typeof icon]
+                          : icon.mdiTable || icon.mdiTable
+                      }
+                    />
+                  </div>
+                </div>
+              </div>
+            </Link>
+          )}
+
+          {hasPermission(currentUser, 'READ_PERSONAS') && (
+            <Link href={'/personas/personas-list'}>
+              <div
+                className={`${
+                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
+                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+              >
+                <div className='flex justify-between align-center'>
+                  <div>
+                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
+                      Personas
+                    </div>
+                    <div className='text-3xl leading-tight font-semibold'>
+                      {personas}
+                    </div>
+                  </div>
+                  <div>
+                    <BaseIcon
+                      className={`${iconsColor}`}
+                      w='w-16'
+                      h='h-16'
+                      size={48}
+                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                      // @ts-ignore
+                      path={
+                        'mdiAccount' in icon
+                          ? icon['mdiAccount' as keyof typeof icon]
+                          : icon.mdiTable || icon.mdiTable
+                      }
+                    />
+                  </div>
+                </div>
+              </div>
+            </Link>
+          )}
+
+          {hasPermission(currentUser, 'READ_REQUISITOS') && (
+            <Link href={'/requisitos/requisitos-list'}>
+              <div
+                className={`${
+                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
+                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+              >
+                <div className='flex justify-between align-center'>
+                  <div>
+                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
+                      Requisitos
+                    </div>
+                    <div className='text-3xl leading-tight font-semibold'>
+                      {requisitos}
+                    </div>
+                  </div>
+                  <div>
+                    <BaseIcon
+                      className={`${iconsColor}`}
+                      w='w-16'
+                      h='h-16'
+                      size={48}
+                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                      // @ts-ignore
+                      path={
+                        'mdiFileDocument' in icon
+                          ? icon['mdiFileDocument' as keyof typeof icon]
+                          : icon.mdiTable || icon.mdiTable
+                      }
+                    />
+                  </div>
+                </div>
+              </div>
+            </Link>
+          )}
+
+          {hasPermission(currentUser, 'READ_USUARIOS') && (
+            <Link href={'/usuarios/usuarios-list'}>
+              <div
+                className={`${
+                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
+                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+              >
+                <div className='flex justify-between align-center'>
+                  <div>
+                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
+                      Usuarios
+                    </div>
+                    <div className='text-3xl leading-tight font-semibold'>
+                      {usuarios}
+                    </div>
+                  </div>
+                  <div>
+                    <BaseIcon
+                      className={`${iconsColor}`}
+                      w='w-16'
+                      h='h-16'
+                      size={48}
+                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                      // @ts-ignore
+                      path={
+                        'mdiAccountCircle' in icon
+                          ? icon['mdiAccountCircle' as keyof typeof icon]
+                          : icon.mdiTable || icon.mdiTable
+                      }
+                    />
+                  </div>
+                </div>
+              </div>
+            </Link>
+          )}
+
+          {hasPermission(currentUser, 'READ_ROLES') && (
+            <Link href={'/roles/roles-list'}>
+              <div
+                className={`${
+                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
+                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+              >
+                <div className='flex justify-between align-center'>
+                  <div>
+                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
+                      Roles
+                    </div>
+                    <div className='text-3xl leading-tight font-semibold'>
+                      {roles}
+                    </div>
+                  </div>
+                  <div>
+                    <BaseIcon
+                      className={`${iconsColor}`}
+                      w='w-16'
+                      h='h-16'
+                      size={48}
+                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                      // @ts-ignore
+                      path={
+                        icon.mdiShieldAccountVariantOutline || icon.mdiTable
+                      }
+                    />
+                  </div>
+                </div>
+              </div>
+            </Link>
+          )}
+
+          {hasPermission(currentUser, 'READ_PERMISSIONS') && (
+            <Link href={'/permissions/permissions-list'}>
+              <div
+                className={`${
+                  corners !== 'rounded-full' ? corners : 'rounded-3xl'
+                } dark:bg-dark-900 ${cardsStyle} dark:border-dark-700 p-6`}
+              >
+                <div className='flex justify-between align-center'>
+                  <div>
+                    <div className='text-lg leading-tight   text-gray-500 dark:text-gray-400'>
+                      Permissions
+                    </div>
+                    <div className='text-3xl leading-tight font-semibold'>
+                      {permissions}
+                    </div>
+                  </div>
+                  <div>
+                    <BaseIcon
+                      className={`${iconsColor}`}
+                      w='w-16'
+                      h='h-16'
+                      size={48}
+                      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                      // @ts-ignore
+                      path={icon.mdiShieldAccountOutline || icon.mdiTable}
+                    />
+                  </div>
+                </div>
+              </div>
+            </Link>
+          )}
+        </div>
+      </SectionMain>
+    </>
+  );
+};
+
+Dashboard.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
+};
+
+export default Dashboard;
diff --git a/frontend/src/pages/documentos/[documentosId].tsx b/frontend/src/pages/documentos/[documentosId].tsx
new file mode 100644
index 0000000..5894672
--- /dev/null
+++ b/frontend/src/pages/documentos/[documentosId].tsx
@@ -0,0 +1,195 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import { update, fetch } from '../../stores/documentos/documentosSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditDocumentos = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    alumno: null,
+
+    requisito: null,
+
+    archivo: '',
+
+    estatus: '',
+
+    fecha_subida: new Date(),
+
+    version: '',
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { documentos } = useAppSelector((state) => state.documentos);
+
+  const { documentosId } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: documentosId }));
+  }, [documentosId]);
+
+  useEffect(() => {
+    if (typeof documentos === 'object') {
+      setInitialValues(documentos);
+    }
+  }, [documentos]);
+
+  useEffect(() => {
+    if (typeof documentos === 'object') {
+      const newInitialVal = { ...initVals };
+
+      Object.keys(initVals).forEach(
+        (el) => (newInitialVal[el] = documentos[el]),
+      );
+
+      setInitialValues(newInitialVal);
+    }
+  }, [documentos]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: documentosId, data }));
+    await router.push('/documentos/documentos-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit documentos')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit documentos'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Alumno' labelFor='alumno'>
+                <Field
+                  name='alumno'
+                  id='alumno'
+                  component={SelectField}
+                  options={initialValues.alumno}
+                  itemRef={'alumnos'}
+                  showField={'num_control'}
+                ></Field>
+              </FormField>
+
+              <FormField label='Requisito' labelFor='requisito'>
+                <Field
+                  name='requisito'
+                  id='requisito'
+                  component={SelectField}
+                  options={initialValues.requisito}
+                  itemRef={'requisitos'}
+                  showField={'documento'}
+                ></Field>
+              </FormField>
+
+              <FormField label='RutadelArchivo'>
+                <Field name='archivo' placeholder='RutadelArchivo' />
+              </FormField>
+
+              <FormField label='EstadodelDocumento' labelFor='estatus'>
+                <Field name='estatus' id='estatus' component='select'>
+                  <option value='REVISAR'>REVISAR</option>
+
+                  <option value='ACEPTADO'>ACEPTADO</option>
+
+                  <option value='RECHAZADO'>RECHAZADO</option>
+                </Field>
+              </FormField>
+
+              <FormField label='FechadeSubida'>
+                <DatePicker
+                  dateFormat='yyyy-MM-dd hh:mm'
+                  showTimeSelect
+                  selected={
+                    initialValues.fecha_subida
+                      ? new Date(
+                          dayjs(initialValues.fecha_subida).format(
+                            'YYYY-MM-DD hh:mm',
+                          ),
+                        )
+                      : null
+                  }
+                  onChange={(date) =>
+                    setInitialValues({ ...initialValues, fecha_subida: date })
+                  }
+                />
+              </FormField>
+
+              <FormField label='VersióndelDocumento'>
+                <Field
+                  type='number'
+                  name='version'
+                  placeholder='VersióndelDocumento'
+                />
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/documentos/documentos-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditDocumentos.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_DOCUMENTOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditDocumentos;
diff --git a/frontend/src/pages/documentos/documentos-edit.tsx b/frontend/src/pages/documentos/documentos-edit.tsx
new file mode 100644
index 0000000..546befd
--- /dev/null
+++ b/frontend/src/pages/documentos/documentos-edit.tsx
@@ -0,0 +1,193 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import { update, fetch } from '../../stores/documentos/documentosSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditDocumentosPage = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    alumno: null,
+
+    requisito: null,
+
+    archivo: '',
+
+    estatus: '',
+
+    fecha_subida: new Date(),
+
+    version: '',
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { documentos } = useAppSelector((state) => state.documentos);
+
+  const { id } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }));
+  }, [id]);
+
+  useEffect(() => {
+    if (typeof documentos === 'object') {
+      setInitialValues(documentos);
+    }
+  }, [documentos]);
+
+  useEffect(() => {
+    if (typeof documentos === 'object') {
+      const newInitialVal = { ...initVals };
+      Object.keys(initVals).forEach(
+        (el) => (newInitialVal[el] = documentos[el]),
+      );
+      setInitialValues(newInitialVal);
+    }
+  }, [documentos]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }));
+    await router.push('/documentos/documentos-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit documentos')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit documentos'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Alumno' labelFor='alumno'>
+                <Field
+                  name='alumno'
+                  id='alumno'
+                  component={SelectField}
+                  options={initialValues.alumno}
+                  itemRef={'alumnos'}
+                  showField={'num_control'}
+                ></Field>
+              </FormField>
+
+              <FormField label='Requisito' labelFor='requisito'>
+                <Field
+                  name='requisito'
+                  id='requisito'
+                  component={SelectField}
+                  options={initialValues.requisito}
+                  itemRef={'requisitos'}
+                  showField={'documento'}
+                ></Field>
+              </FormField>
+
+              <FormField label='RutadelArchivo'>
+                <Field name='archivo' placeholder='RutadelArchivo' />
+              </FormField>
+
+              <FormField label='EstadodelDocumento' labelFor='estatus'>
+                <Field name='estatus' id='estatus' component='select'>
+                  <option value='REVISAR'>REVISAR</option>
+
+                  <option value='ACEPTADO'>ACEPTADO</option>
+
+                  <option value='RECHAZADO'>RECHAZADO</option>
+                </Field>
+              </FormField>
+
+              <FormField label='FechadeSubida'>
+                <DatePicker
+                  dateFormat='yyyy-MM-dd hh:mm'
+                  showTimeSelect
+                  selected={
+                    initialValues.fecha_subida
+                      ? new Date(
+                          dayjs(initialValues.fecha_subida).format(
+                            'YYYY-MM-DD hh:mm',
+                          ),
+                        )
+                      : null
+                  }
+                  onChange={(date) =>
+                    setInitialValues({ ...initialValues, fecha_subida: date })
+                  }
+                />
+              </FormField>
+
+              <FormField label='VersióndelDocumento'>
+                <Field
+                  type='number'
+                  name='version'
+                  placeholder='VersióndelDocumento'
+                />
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/documentos/documentos-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditDocumentosPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_DOCUMENTOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditDocumentosPage;
diff --git a/frontend/src/pages/documentos/documentos-list.tsx b/frontend/src/pages/documentos/documentos-list.tsx
new file mode 100644
index 0000000..8cac511
--- /dev/null
+++ b/frontend/src/pages/documentos/documentos-list.tsx
@@ -0,0 +1,182 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TableDocumentos from '../../components/Documentos/TableDocumentos';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import { setRefetch, uploadCsv } from '../../stores/documentos/documentosSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const DocumentosTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([
+    { label: 'RutadelArchivo', title: 'archivo' },
+    { label: 'VersióndelDocumento', title: 'version', number: 'true' },
+
+    { label: 'FechadeSubida', title: 'fecha_subida', date: 'true' },
+
+    { label: 'Alumno', title: 'alumno' },
+
+    { label: 'Requisito', title: 'requisito' },
+
+    {
+      label: 'EstadodelDocumento',
+      title: 'estatus',
+      type: 'enum',
+      options: ['REVISAR', 'ACEPTADO', 'RECHAZADO'],
+    },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_DOCUMENTOS');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getDocumentosCSV = async () => {
+    const response = await axios({
+      url: '/documentos?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'documentosCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Documentos')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Documentos'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/documentos/documentos-new'}
+              color='info'
+              label='New Item'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getDocumentosCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <Link href={'/documentos/documentos-table'}>Switch to Table</Link>
+          </div>
+        </CardBox>
+
+        <CardBox className='mb-6' hasTable>
+          <TableDocumentos
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+DocumentosTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_DOCUMENTOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default DocumentosTablesPage;
diff --git a/frontend/src/pages/documentos/documentos-new.tsx b/frontend/src/pages/documentos/documentos-new.tsx
new file mode 100644
index 0000000..7d24646
--- /dev/null
+++ b/frontend/src/pages/documentos/documentos-new.tsx
@@ -0,0 +1,154 @@
+import {
+  mdiAccount,
+  mdiChartTimelineVariant,
+  mdiMail,
+  mdiUpload,
+} from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SwitchField } from '../../components/SwitchField';
+
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { RichTextField } from '../../components/RichTextField';
+
+import { create } from '../../stores/documentos/documentosSlice';
+import { useAppDispatch } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import moment from 'moment';
+
+const initialValues = {
+  alumno: '',
+
+  requisito: '',
+
+  archivo: '',
+
+  estatus: 'REVISAR',
+
+  fecha_subida: '',
+
+  version: '',
+};
+
+const DocumentosNew = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data));
+    await router.push('/documentos/documentos-list');
+  };
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='New Item'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Alumno' labelFor='alumno'>
+                <Field
+                  name='alumno'
+                  id='alumno'
+                  component={SelectField}
+                  options={[]}
+                  itemRef={'alumnos'}
+                ></Field>
+              </FormField>
+
+              <FormField label='Requisito' labelFor='requisito'>
+                <Field
+                  name='requisito'
+                  id='requisito'
+                  component={SelectField}
+                  options={[]}
+                  itemRef={'requisitos'}
+                ></Field>
+              </FormField>
+
+              <FormField label='RutadelArchivo'>
+                <Field name='archivo' placeholder='RutadelArchivo' />
+              </FormField>
+
+              <FormField label='EstadodelDocumento' labelFor='estatus'>
+                <Field name='estatus' id='estatus' component='select'>
+                  <option value='REVISAR'>REVISAR</option>
+
+                  <option value='ACEPTADO'>ACEPTADO</option>
+
+                  <option value='RECHAZADO'>RECHAZADO</option>
+                </Field>
+              </FormField>
+
+              <FormField label='FechadeSubida'>
+                <Field
+                  type='datetime-local'
+                  name='fecha_subida'
+                  placeholder='FechadeSubida'
+                />
+              </FormField>
+
+              <FormField label='VersióndelDocumento'>
+                <Field
+                  type='number'
+                  name='version'
+                  placeholder='VersióndelDocumento'
+                />
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/documentos/documentos-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+DocumentosNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'CREATE_DOCUMENTOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default DocumentosNew;
diff --git a/frontend/src/pages/documentos/documentos-table.tsx b/frontend/src/pages/documentos/documentos-table.tsx
new file mode 100644
index 0000000..41f2fa1
--- /dev/null
+++ b/frontend/src/pages/documentos/documentos-table.tsx
@@ -0,0 +1,181 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TableDocumentos from '../../components/Documentos/TableDocumentos';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import { setRefetch, uploadCsv } from '../../stores/documentos/documentosSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const DocumentosTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([
+    { label: 'RutadelArchivo', title: 'archivo' },
+    { label: 'VersióndelDocumento', title: 'version', number: 'true' },
+
+    { label: 'FechadeSubida', title: 'fecha_subida', date: 'true' },
+
+    { label: 'Alumno', title: 'alumno' },
+
+    { label: 'Requisito', title: 'requisito' },
+
+    {
+      label: 'EstadodelDocumento',
+      title: 'estatus',
+      type: 'enum',
+      options: ['REVISAR', 'ACEPTADO', 'RECHAZADO'],
+    },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_DOCUMENTOS');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getDocumentosCSV = async () => {
+    const response = await axios({
+      url: '/documentos?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'documentosCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Documentos')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Documentos'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/documentos/documentos-new'}
+              color='info'
+              label='New Item'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getDocumentosCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+
+            <Link href={'/documentos/documentos-list'}>
+              Back to <span className='capitalize'>list</span>
+            </Link>
+          </div>
+        </CardBox>
+        <CardBox className='mb-6' hasTable>
+          <TableDocumentos
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+DocumentosTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_DOCUMENTOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default DocumentosTablesPage;
diff --git a/frontend/src/pages/documentos/documentos-view.tsx b/frontend/src/pages/documentos/documentos-view.tsx
new file mode 100644
index 0000000..e83a628
--- /dev/null
+++ b/frontend/src/pages/documentos/documentos-view.tsx
@@ -0,0 +1,126 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { fetch } from '../../stores/documentos/documentosSlice';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import { getPageTitle } from '../../config';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import SectionMain from '../../components/SectionMain';
+import CardBox from '../../components/CardBox';
+import BaseButton from '../../components/BaseButton';
+import BaseDivider from '../../components/BaseDivider';
+import { mdiChartTimelineVariant } from '@mdi/js';
+import { SwitchField } from '../../components/SwitchField';
+import FormField from '../../components/FormField';
+
+const DocumentosView = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const { documentos } = useAppSelector((state) => state.documentos);
+
+  const { id } = router.query;
+
+  function removeLastCharacter(str) {
+    console.log(str, `str`);
+    return str.slice(0, -1);
+  }
+
+  useEffect(() => {
+    dispatch(fetch({ id }));
+  }, [dispatch, id]);
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('View documentos')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={removeLastCharacter('View documentos')}
+          main
+        >
+          <BaseButton
+            color='info'
+            label='Edit'
+            href={`/documentos/documentos-edit/?id=${id}`}
+          />
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Alumno</p>
+
+            <p>{documentos?.alumno?.num_control ?? 'No data'}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Requisito</p>
+
+            <p>{documentos?.requisito?.documento ?? 'No data'}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>RutadelArchivo</p>
+            <p>{documentos?.archivo}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>EstadodelDocumento</p>
+            <p>{documentos?.estatus ?? 'No data'}</p>
+          </div>
+
+          <FormField label='FechadeSubida'>
+            {documentos.fecha_subida ? (
+              <DatePicker
+                dateFormat='yyyy-MM-dd hh:mm'
+                showTimeSelect
+                selected={
+                  documentos.fecha_subida
+                    ? new Date(
+                        dayjs(documentos.fecha_subida).format(
+                          'YYYY-MM-DD hh:mm',
+                        ),
+                      )
+                    : null
+                }
+                disabled
+              />
+            ) : (
+              <p>No FechadeSubida</p>
+            )}
+          </FormField>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>VersióndelDocumento</p>
+            <p>{documentos?.version || 'No data'}</p>
+          </div>
+
+          <BaseDivider />
+
+          <BaseButton
+            color='info'
+            label='Back'
+            onClick={() => router.push('/documentos/documentos-list')}
+          />
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+DocumentosView.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_DOCUMENTOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default DocumentosView;
diff --git a/frontend/src/pages/error.tsx b/frontend/src/pages/error.tsx
new file mode 100644
index 0000000..0e80c27
--- /dev/null
+++ b/frontend/src/pages/error.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import Head from 'next/head';
+import BaseButton from '../components/BaseButton';
+import CardBox from '../components/CardBox';
+import SectionFullScreen from '../components/SectionFullScreen';
+import LayoutGuest from '../layouts/Guest';
+import { getPageTitle } from '../config';
+
+export default function Error() {
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Error')}</title>
+      </Head>
+
+      <SectionFullScreen bg='pinkRed'>
+        <CardBox
+          className='w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12 shadow-2xl'
+          footer={<BaseButton href='/dashboard' label='Done' color='danger' />}
+        >
+          <div className='space-y-3'>
+            <h1 className='text-2xl'>Unhandled exception</h1>
+
+            <p>An Error Occurred</p>
+          </div>
+        </CardBox>
+      </SectionFullScreen>
+    </>
+  );
+}
+
+Error.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutGuest>{page}</LayoutGuest>;
+};
diff --git a/frontend/src/pages/evaluaciones/[evaluacionesId].tsx b/frontend/src/pages/evaluaciones/[evaluacionesId].tsx
new file mode 100644
index 0000000..12f3e97
--- /dev/null
+++ b/frontend/src/pages/evaluaciones/[evaluacionesId].tsx
@@ -0,0 +1,173 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import { update, fetch } from '../../stores/evaluaciones/evaluacionesSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditEvaluaciones = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    alumnos_cursos: null,
+
+    numero_evaluacion: '',
+
+    calificacion: '',
+
+    faltas: '',
+
+    observaciones: '',
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { evaluaciones } = useAppSelector((state) => state.evaluaciones);
+
+  const { evaluacionesId } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: evaluacionesId }));
+  }, [evaluacionesId]);
+
+  useEffect(() => {
+    if (typeof evaluaciones === 'object') {
+      setInitialValues(evaluaciones);
+    }
+  }, [evaluaciones]);
+
+  useEffect(() => {
+    if (typeof evaluaciones === 'object') {
+      const newInitialVal = { ...initVals };
+
+      Object.keys(initVals).forEach(
+        (el) => (newInitialVal[el] = evaluaciones[el]),
+      );
+
+      setInitialValues(newInitialVal);
+    }
+  }, [evaluaciones]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: evaluacionesId, data }));
+    await router.push('/evaluaciones/evaluaciones-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit evaluaciones')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit evaluaciones'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='InscripciónAsociada' labelFor='alumnos_cursos'>
+                <Field
+                  name='alumnos_cursos'
+                  id='alumnos_cursos'
+                  component={SelectField}
+                  options={initialValues.alumnos_cursos}
+                  itemRef={'alumnos_cursos'}
+                  showField={'status'}
+                ></Field>
+              </FormField>
+
+              <FormField label='NúmerodeEvaluación'>
+                <Field
+                  type='number'
+                  name='numero_evaluacion'
+                  placeholder='NúmerodeEvaluación'
+                />
+              </FormField>
+
+              <FormField label='Calificación'>
+                <Field
+                  type='number'
+                  name='calificacion'
+                  placeholder='Calificación'
+                />
+              </FormField>
+
+              <FormField label='NúmerodeFaltas'>
+                <Field
+                  type='number'
+                  name='faltas'
+                  placeholder='NúmerodeFaltas'
+                />
+              </FormField>
+
+              <FormField label='Observaciones' hasTextareaHeight>
+                <Field
+                  name='observaciones'
+                  as='textarea'
+                  placeholder='Observaciones'
+                />
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/evaluaciones/evaluaciones-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditEvaluaciones.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_EVALUACIONES'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditEvaluaciones;
diff --git a/frontend/src/pages/evaluaciones/evaluaciones-edit.tsx b/frontend/src/pages/evaluaciones/evaluaciones-edit.tsx
new file mode 100644
index 0000000..d6f3cf6
--- /dev/null
+++ b/frontend/src/pages/evaluaciones/evaluaciones-edit.tsx
@@ -0,0 +1,171 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import { update, fetch } from '../../stores/evaluaciones/evaluacionesSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditEvaluacionesPage = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    alumnos_cursos: null,
+
+    numero_evaluacion: '',
+
+    calificacion: '',
+
+    faltas: '',
+
+    observaciones: '',
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { evaluaciones } = useAppSelector((state) => state.evaluaciones);
+
+  const { id } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }));
+  }, [id]);
+
+  useEffect(() => {
+    if (typeof evaluaciones === 'object') {
+      setInitialValues(evaluaciones);
+    }
+  }, [evaluaciones]);
+
+  useEffect(() => {
+    if (typeof evaluaciones === 'object') {
+      const newInitialVal = { ...initVals };
+      Object.keys(initVals).forEach(
+        (el) => (newInitialVal[el] = evaluaciones[el]),
+      );
+      setInitialValues(newInitialVal);
+    }
+  }, [evaluaciones]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }));
+    await router.push('/evaluaciones/evaluaciones-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit evaluaciones')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit evaluaciones'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='InscripciónAsociada' labelFor='alumnos_cursos'>
+                <Field
+                  name='alumnos_cursos'
+                  id='alumnos_cursos'
+                  component={SelectField}
+                  options={initialValues.alumnos_cursos}
+                  itemRef={'alumnos_cursos'}
+                  showField={'status'}
+                ></Field>
+              </FormField>
+
+              <FormField label='NúmerodeEvaluación'>
+                <Field
+                  type='number'
+                  name='numero_evaluacion'
+                  placeholder='NúmerodeEvaluación'
+                />
+              </FormField>
+
+              <FormField label='Calificación'>
+                <Field
+                  type='number'
+                  name='calificacion'
+                  placeholder='Calificación'
+                />
+              </FormField>
+
+              <FormField label='NúmerodeFaltas'>
+                <Field
+                  type='number'
+                  name='faltas'
+                  placeholder='NúmerodeFaltas'
+                />
+              </FormField>
+
+              <FormField label='Observaciones' hasTextareaHeight>
+                <Field
+                  name='observaciones'
+                  as='textarea'
+                  placeholder='Observaciones'
+                />
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/evaluaciones/evaluaciones-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditEvaluacionesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_EVALUACIONES'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditEvaluacionesPage;
diff --git a/frontend/src/pages/evaluaciones/evaluaciones-list.tsx b/frontend/src/pages/evaluaciones/evaluaciones-list.tsx
new file mode 100644
index 0000000..6b63c77
--- /dev/null
+++ b/frontend/src/pages/evaluaciones/evaluaciones-list.tsx
@@ -0,0 +1,178 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TableEvaluaciones from '../../components/Evaluaciones/TableEvaluaciones';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import {
+  setRefetch,
+  uploadCsv,
+} from '../../stores/evaluaciones/evaluacionesSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const EvaluacionesTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([
+    { label: 'Observaciones', title: 'observaciones' },
+    { label: 'NúmerodeEvaluación', title: 'numero_evaluacion', number: 'true' },
+    { label: 'Calificación', title: 'calificacion', number: 'true' },
+    { label: 'NúmerodeFaltas', title: 'faltas', number: 'true' },
+
+    { label: 'InscripciónAsociada', title: 'alumnos_cursos' },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_EVALUACIONES');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getEvaluacionesCSV = async () => {
+    const response = await axios({
+      url: '/evaluaciones?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'evaluacionesCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Evaluaciones')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Evaluaciones'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/evaluaciones/evaluaciones-new'}
+              color='info'
+              label='New Item'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getEvaluacionesCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <Link href={'/evaluaciones/evaluaciones-table'}>
+              Switch to Table
+            </Link>
+          </div>
+        </CardBox>
+
+        <CardBox className='mb-6' hasTable>
+          <TableEvaluaciones
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+EvaluacionesTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_EVALUACIONES'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EvaluacionesTablesPage;
diff --git a/frontend/src/pages/evaluaciones/evaluaciones-new.tsx b/frontend/src/pages/evaluaciones/evaluaciones-new.tsx
new file mode 100644
index 0000000..7696e1b
--- /dev/null
+++ b/frontend/src/pages/evaluaciones/evaluaciones-new.tsx
@@ -0,0 +1,144 @@
+import {
+  mdiAccount,
+  mdiChartTimelineVariant,
+  mdiMail,
+  mdiUpload,
+} from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SwitchField } from '../../components/SwitchField';
+
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { RichTextField } from '../../components/RichTextField';
+
+import { create } from '../../stores/evaluaciones/evaluacionesSlice';
+import { useAppDispatch } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import moment from 'moment';
+
+const initialValues = {
+  alumnos_cursos: '',
+
+  numero_evaluacion: '',
+
+  calificacion: '',
+
+  faltas: '',
+
+  observaciones: '',
+};
+
+const EvaluacionesNew = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data));
+    await router.push('/evaluaciones/evaluaciones-list');
+  };
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='New Item'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='InscripciónAsociada' labelFor='alumnos_cursos'>
+                <Field
+                  name='alumnos_cursos'
+                  id='alumnos_cursos'
+                  component={SelectField}
+                  options={[]}
+                  itemRef={'alumnos_cursos'}
+                ></Field>
+              </FormField>
+
+              <FormField label='NúmerodeEvaluación'>
+                <Field
+                  type='number'
+                  name='numero_evaluacion'
+                  placeholder='NúmerodeEvaluación'
+                />
+              </FormField>
+
+              <FormField label='Calificación'>
+                <Field
+                  type='number'
+                  name='calificacion'
+                  placeholder='Calificación'
+                />
+              </FormField>
+
+              <FormField label='NúmerodeFaltas'>
+                <Field
+                  type='number'
+                  name='faltas'
+                  placeholder='NúmerodeFaltas'
+                />
+              </FormField>
+
+              <FormField label='Observaciones' hasTextareaHeight>
+                <Field
+                  name='observaciones'
+                  as='textarea'
+                  placeholder='Observaciones'
+                />
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/evaluaciones/evaluaciones-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EvaluacionesNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'CREATE_EVALUACIONES'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EvaluacionesNew;
diff --git a/frontend/src/pages/evaluaciones/evaluaciones-table.tsx b/frontend/src/pages/evaluaciones/evaluaciones-table.tsx
new file mode 100644
index 0000000..672d586
--- /dev/null
+++ b/frontend/src/pages/evaluaciones/evaluaciones-table.tsx
@@ -0,0 +1,175 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TableEvaluaciones from '../../components/Evaluaciones/TableEvaluaciones';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import {
+  setRefetch,
+  uploadCsv,
+} from '../../stores/evaluaciones/evaluacionesSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const EvaluacionesTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([
+    { label: 'Observaciones', title: 'observaciones' },
+    { label: 'NúmerodeEvaluación', title: 'numero_evaluacion', number: 'true' },
+    { label: 'Calificación', title: 'calificacion', number: 'true' },
+    { label: 'NúmerodeFaltas', title: 'faltas', number: 'true' },
+
+    { label: 'InscripciónAsociada', title: 'alumnos_cursos' },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_EVALUACIONES');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getEvaluacionesCSV = async () => {
+    const response = await axios({
+      url: '/evaluaciones?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'evaluacionesCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Evaluaciones')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Evaluaciones'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/evaluaciones/evaluaciones-new'}
+              color='info'
+              label='New Item'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getEvaluacionesCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+
+            <Link href={'/evaluaciones/evaluaciones-list'}>
+              Back to <span className='capitalize'>list</span>
+            </Link>
+          </div>
+        </CardBox>
+        <CardBox className='mb-6' hasTable>
+          <TableEvaluaciones
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+EvaluacionesTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_EVALUACIONES'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EvaluacionesTablesPage;
diff --git a/frontend/src/pages/evaluaciones/evaluaciones-view.tsx b/frontend/src/pages/evaluaciones/evaluaciones-view.tsx
new file mode 100644
index 0000000..d59355d
--- /dev/null
+++ b/frontend/src/pages/evaluaciones/evaluaciones-view.tsx
@@ -0,0 +1,107 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { fetch } from '../../stores/evaluaciones/evaluacionesSlice';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import { getPageTitle } from '../../config';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import SectionMain from '../../components/SectionMain';
+import CardBox from '../../components/CardBox';
+import BaseButton from '../../components/BaseButton';
+import BaseDivider from '../../components/BaseDivider';
+import { mdiChartTimelineVariant } from '@mdi/js';
+import { SwitchField } from '../../components/SwitchField';
+import FormField from '../../components/FormField';
+
+const EvaluacionesView = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const { evaluaciones } = useAppSelector((state) => state.evaluaciones);
+
+  const { id } = router.query;
+
+  function removeLastCharacter(str) {
+    console.log(str, `str`);
+    return str.slice(0, -1);
+  }
+
+  useEffect(() => {
+    dispatch(fetch({ id }));
+  }, [dispatch, id]);
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('View evaluaciones')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={removeLastCharacter('View evaluaciones')}
+          main
+        >
+          <BaseButton
+            color='info'
+            label='Edit'
+            href={`/evaluaciones/evaluaciones-edit/?id=${id}`}
+          />
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>InscripciónAsociada</p>
+
+            <p>{evaluaciones?.alumnos_cursos?.status ?? 'No data'}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>NúmerodeEvaluación</p>
+            <p>{evaluaciones?.numero_evaluacion || 'No data'}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Calificación</p>
+            <p>{evaluaciones?.calificacion || 'No data'}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>NúmerodeFaltas</p>
+            <p>{evaluaciones?.faltas || 'No data'}</p>
+          </div>
+
+          <FormField label='Multi Text' hasTextareaHeight>
+            <textarea
+              className={'w-full'}
+              disabled
+              value={evaluaciones?.observaciones}
+            />
+          </FormField>
+
+          <BaseDivider />
+
+          <BaseButton
+            color='info'
+            label='Back'
+            onClick={() => router.push('/evaluaciones/evaluaciones-list')}
+          />
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EvaluacionesView.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_EVALUACIONES'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EvaluacionesView;
diff --git a/frontend/src/pages/forgot.tsx b/frontend/src/pages/forgot.tsx
new file mode 100644
index 0000000..071239b
--- /dev/null
+++ b/frontend/src/pages/forgot.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import { ToastContainer, toast } from 'react-toastify';
+import Head from 'next/head';
+import BaseButton from '../components/BaseButton';
+import CardBox from '../components/CardBox';
+import SectionFullScreen from '../components/SectionFullScreen';
+import LayoutGuest from '../layouts/Guest';
+import { Field, Form, Formik } from 'formik';
+import FormField from '../components/FormField';
+import BaseDivider from '../components/BaseDivider';
+import BaseButtons from '../components/BaseButtons';
+import { useRouter } from 'next/router';
+import { getPageTitle } from '../config';
+import axios from 'axios';
+
+export default function Forgot() {
+  const [loading, setLoading] = React.useState(false);
+  const router = useRouter();
+  const notify = (type, msg) => toast(msg, { type });
+
+  const handleSubmit = async (value) => {
+    setLoading(true);
+    try {
+      const { data: response } = await axios.post(
+        '/auth/send-password-reset-email',
+        value,
+      );
+      setLoading(false);
+      notify('success', 'Please check your email for verification link');
+      setTimeout(async () => {
+        await router.push('/login');
+      }, 3000);
+    } catch (error) {
+      setLoading(false);
+      console.log('error: ', error);
+      notify('error', 'Something was wrong. Try again');
+    }
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Login')}</title>
+      </Head>
+
+      <SectionFullScreen bg='violet'>
+        <CardBox className='w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12'>
+          <Formik
+            initialValues={{
+              email: '',
+            }}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Email' help='Please enter your email'>
+                <Field name='email' />
+              </FormField>
+
+              <BaseDivider />
+
+              <BaseButtons>
+                <BaseButton
+                  type='submit'
+                  label={loading ? 'Loading...' : 'Submit'}
+                  color='info'
+                />
+                <BaseButton href={'/login'} label={'Login'} color='info' />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionFullScreen>
+      <ToastContainer />
+    </>
+  );
+}
+
+Forgot.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutGuest>{page}</LayoutGuest>;
+};
diff --git a/frontend/src/pages/forms.tsx b/frontend/src/pages/forms.tsx
new file mode 100644
index 0000000..45de29b
--- /dev/null
+++ b/frontend/src/pages/forms.tsx
@@ -0,0 +1,162 @@
+import {
+  mdiAccount,
+  mdiBallotOutline,
+  mdiGithub,
+  mdiMail,
+  mdiUpload,
+} from '@mdi/js';
+import { Field, Form, Formik } from 'formik';
+import Head from 'next/head';
+import { ReactElement } from 'react';
+import BaseButton from '../components/BaseButton';
+import BaseButtons from '../components/BaseButtons';
+import BaseDivider from '../components/BaseDivider';
+import CardBox from '../components/CardBox';
+import FormCheckRadio from '../components/FormCheckRadio';
+import FormCheckRadioGroup from '../components/FormCheckRadioGroup';
+import FormField from '../components/FormField';
+import LayoutAuthenticated from '../layouts/Authenticated';
+import SectionMain from '../components/SectionMain';
+import SectionTitle from '../components/SectionTitle';
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../config';
+
+const FormsPage = () => {
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Forms')}</title>
+      </Head>
+
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiBallotOutline}
+          title='Formik forms example'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+
+        <CardBox>
+          <Formik
+            initialValues={{
+              fullname: 'John Doe',
+              email: 'john.doe@example.com',
+              phone: '',
+              color: 'green',
+              textarea: 'Hello',
+            }}
+            onSubmit={(values) => alert(JSON.stringify(values, null, 2))}
+          >
+            <Form>
+              <FormField
+                label='Grouped with icons'
+                icons={[mdiAccount, mdiMail]}
+              >
+                <Field name='fullname' placeholder='Full name' />
+                <Field type='email' name='email' placeholder='Email' />
+              </FormField>
+
+              <FormField
+                label='With help line and labelFor'
+                labelFor='phone'
+                help='Help line comes here'
+              >
+                <Field name='phone' placeholder='Phone' id='phone' />
+              </FormField>
+
+              <FormField label='Dropdown' labelFor='color'>
+                <Field name='color' id='color' component='select'>
+                  <option value='red'>Red</option>
+                  <option value='green'>Green</option>
+                  <option value='blue'>Blue</option>
+                </Field>
+              </FormField>
+
+              <BaseDivider />
+
+              <FormField label='Textarea' hasTextareaHeight>
+                <Field
+                  name='textarea'
+                  as='textarea'
+                  placeholder='Your text here'
+                />
+              </FormField>
+
+              <BaseDivider />
+
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+
+      <SectionTitle>Custom elements</SectionTitle>
+
+      <SectionMain>
+        <CardBox>
+          <Formik
+            initialValues={{
+              checkboxes: ['lorem'],
+              switches: ['lorem'],
+              radio: 'lorem',
+            }}
+            onSubmit={() => null}
+          >
+            <Form>
+              <FormField label='Checkbox'>
+                <FormCheckRadioGroup>
+                  <FormCheckRadio type='checkbox' label='Lorem'>
+                    <Field type='checkbox' name='checkboxes' value='lorem' />
+                  </FormCheckRadio>
+                  <FormCheckRadio type='checkbox' label='Ipsum'>
+                    <Field type='checkbox' name='checkboxes' value='ipsum' />
+                  </FormCheckRadio>
+                  <FormCheckRadio type='checkbox' label='Dolore'>
+                    <Field type='checkbox' name='checkboxes' value='dolore' />
+                  </FormCheckRadio>
+                </FormCheckRadioGroup>
+              </FormField>
+
+              <BaseDivider />
+
+              <FormField label='Radio'>
+                <FormCheckRadioGroup>
+                  <FormCheckRadio type='radio' label='Lorem'>
+                    <Field type='radio' name='radio' value='lorem' />
+                  </FormCheckRadio>
+                  <FormCheckRadio type='radio' label='Ipsum'>
+                    <Field type='radio' name='radio' value='ipsum' />
+                  </FormCheckRadio>
+                </FormCheckRadioGroup>
+              </FormField>
+
+              <BaseDivider />
+
+              <FormField label='Switch'>
+                <FormCheckRadioGroup>
+                  <FormCheckRadio type='switch' label='Lorem'>
+                    <Field type='checkbox' name='switches' value='lorem' />
+                  </FormCheckRadio>
+                  <FormCheckRadio type='switch' label='Ipsum'>
+                    <Field type='checkbox' name='switches' value='ipsum' />
+                  </FormCheckRadio>
+                </FormCheckRadioGroup>
+              </FormField>
+            </Form>
+          </Formik>
+          <BaseDivider />
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+FormsPage.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
+};
+
+export default FormsPage;
diff --git a/frontend/src/pages/index.tsx b/frontend/src/pages/index.tsx
new file mode 100644
index 0000000..b6ec846
--- /dev/null
+++ b/frontend/src/pages/index.tsx
@@ -0,0 +1,208 @@
+import React, { useEffect, useState } from 'react';
+import type { ReactElement } from 'react';
+import Head from 'next/head';
+import Link from 'next/link';
+import BaseButton from '../components/BaseButton';
+import CardBox from '../components/CardBox';
+import SectionFullScreen from '../components/SectionFullScreen';
+import LayoutGuest from '../layouts/Guest';
+import BaseDivider from '../components/BaseDivider';
+import BaseButtons from '../components/BaseButtons';
+import { getPageTitle } from '../config';
+import { useAppSelector } from '../stores/hooks';
+import CardBoxComponentTitle from '../components/CardBoxComponentTitle';
+import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
+
+export default function Starter() {
+  const [illustrationImage, setIllustrationImage] = useState({
+    src: undefined,
+    photographer: undefined,
+    photographer_url: undefined,
+  });
+  const [illustrationVideo, setIllustrationVideo] = useState({
+    video_files: [],
+  });
+  const [contentType, setContentType] = useState('image');
+  const [contentPosition, setContentPosition] = useState('left');
+  const textColor = useAppSelector((state) => state.style.linkColor);
+
+  const title = 'CtrlE';
+
+  // Fetch Pexels image/video
+  useEffect(() => {
+    async function fetchData() {
+      const image = await getPexelsImage();
+      const video = await getPexelsVideo();
+      setIllustrationImage(image);
+      setIllustrationVideo(video);
+    }
+    fetchData();
+  }, []);
+
+  const imageBlock = (image) => (
+    <div
+      className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
+      style={{
+        backgroundImage: `${
+          image
+            ? `url(${image?.src?.original})`
+            : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
+        }`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'left center',
+        backgroundRepeat: 'no-repeat',
+      }}
+    >
+      <div className='flex justify-center w-full bg-blue-300/20'>
+        <a
+          className='text-[8px]'
+          href={image?.photographer_url}
+          target='_blank'
+          rel='noreferrer'
+        >
+          Photo by {image?.photographer} on Pexels
+        </a>
+      </div>
+    </div>
+  );
+
+  const videoBlock = (video) => {
+    if (video?.video_files?.length > 0) {
+      return (
+        <div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
+          <video
+            className='absolute top-0 left-0 w-full h-full object-cover'
+            autoPlay
+            loop
+            muted
+          >
+            <source src={video?.video_files[0]?.link} type='video/mp4' />
+            Your browser does not support the video tag.
+          </video>
+          <div className='flex justify-center w-full bg-blue-300/20 z-10'>
+            <a
+              className='text-[8px]'
+              href={video?.user?.url}
+              target='_blank'
+              rel='noreferrer'
+            >
+              Video by {video.user.name} on Pexels
+            </a>
+          </div>
+        </div>
+      );
+    }
+  };
+
+  return (
+    <div
+      style={
+        contentPosition === 'background'
+          ? {
+              backgroundImage: `${
+                illustrationImage
+                  ? `url(${illustrationImage.src?.original})`
+                  : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
+              }`,
+              backgroundSize: 'cover',
+              backgroundPosition: 'left center',
+              backgroundRepeat: 'no-repeat',
+            }
+          : {}
+      }
+    >
+      <Head>
+        <title>{getPageTitle('Starter Page')}</title>
+      </Head>
+
+      <SectionFullScreen bg='violet'>
+        <div
+          className={`flex ${
+            contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
+          } min-h-screen w-full`}
+        >
+          {contentType === 'image' && contentPosition !== 'background'
+            ? imageBlock(illustrationImage)
+            : null}
+          {contentType === 'video' && contentPosition !== 'background'
+            ? videoBlock(illustrationVideo)
+            : null}
+          <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
+            <CardBox className='w-full md:w-3/5 lg:w-2/3'>
+              <CardBoxComponentTitle title='Welcome to your CtrlE app!' />
+
+              <div className='space-y-3'>
+                <p className='text-center text-gray-500'>
+                  This is a React.js/Node.js app generated by the{' '}
+                  <a
+                    className={`${textColor}`}
+                    href='https://flatlogic.com/generator'
+                  >
+                    Flatlogic Web App Generator
+                  </a>
+                </p>
+                <p className='text-center text-gray-500'>
+                  For guides and documentation please check your local README.md
+                  and the{' '}
+                  <a
+                    className={`${textColor}`}
+                    href='https://flatlogic.com/documentation'
+                  >
+                    Flatlogic documentation
+                  </a>
+                </p>
+              </div>
+
+              <BaseButtons>
+                <BaseButton
+                  href='/login'
+                  label='Login'
+                  color='info'
+                  className='w-full'
+                />
+              </BaseButtons>
+              <div className='grid grid-cols-1 gap-2 lg:grid-cols-4 mt-2'>
+                <div className='text-center'>
+                  <a className={`${textColor}`} href='https://react.dev/'>
+                    React.js
+                  </a>
+                </div>
+
+                <div className='text-center'>
+                  <a className={`${textColor}`} href='https://tailwindcss.com/'>
+                    Tailwind CSS
+                  </a>
+                </div>
+                <div className='text-center'>
+                  <a className={`${textColor}`} href='https://nodejs.org/en'>
+                    Node.js
+                  </a>
+                </div>
+                <div className='text-center'>
+                  <a
+                    className={`${textColor}`}
+                    href='https://flatlogic.com/forum'
+                  >
+                    Flatlogic Forum
+                  </a>
+                </div>
+              </div>
+            </CardBox>
+          </div>
+        </div>
+      </SectionFullScreen>
+      <div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
+        <p className='py-6 text-sm'>
+          © 2024 <span>{title}</span>. All rights reserved
+        </p>
+        <Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
+          Privacy Policy
+        </Link>
+      </div>
+    </div>
+  );
+}
+
+Starter.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutGuest>{page}</LayoutGuest>;
+};
diff --git a/frontend/src/pages/instructores/[instructoresId].tsx b/frontend/src/pages/instructores/[instructoresId].tsx
new file mode 100644
index 0000000..c93044a
--- /dev/null
+++ b/frontend/src/pages/instructores/[instructoresId].tsx
@@ -0,0 +1,145 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import { update, fetch } from '../../stores/instructores/instructoresSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditInstructores = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    persona: null,
+
+    status: '',
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { instructores } = useAppSelector((state) => state.instructores);
+
+  const { instructoresId } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: instructoresId }));
+  }, [instructoresId]);
+
+  useEffect(() => {
+    if (typeof instructores === 'object') {
+      setInitialValues(instructores);
+    }
+  }, [instructores]);
+
+  useEffect(() => {
+    if (typeof instructores === 'object') {
+      const newInitialVal = { ...initVals };
+
+      Object.keys(initVals).forEach(
+        (el) => (newInitialVal[el] = instructores[el]),
+      );
+
+      setInitialValues(newInitialVal);
+    }
+  }, [instructores]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: instructoresId, data }));
+    await router.push('/instructores/instructores-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit instructores')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit instructores'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Persona' labelFor='persona'>
+                <Field
+                  name='persona'
+                  id='persona'
+                  component={SelectField}
+                  options={initialValues.persona}
+                  itemRef={'personas'}
+                  showField={'nombre'}
+                ></Field>
+              </FormField>
+
+              <FormField label='EstadodelInstructor' labelFor='status'>
+                <Field name='status' id='status' component='select'>
+                  <option value='CONTRATACION'>CONTRATACION</option>
+
+                  <option value='ACTIVO'>ACTIVO</option>
+
+                  <option value='BAJA'>BAJA</option>
+                </Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/instructores/instructores-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditInstructores.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_INSTRUCTORES'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditInstructores;
diff --git a/frontend/src/pages/instructores/instructores-edit.tsx b/frontend/src/pages/instructores/instructores-edit.tsx
new file mode 100644
index 0000000..1119329
--- /dev/null
+++ b/frontend/src/pages/instructores/instructores-edit.tsx
@@ -0,0 +1,143 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import { update, fetch } from '../../stores/instructores/instructoresSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditInstructoresPage = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    persona: null,
+
+    status: '',
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { instructores } = useAppSelector((state) => state.instructores);
+
+  const { id } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }));
+  }, [id]);
+
+  useEffect(() => {
+    if (typeof instructores === 'object') {
+      setInitialValues(instructores);
+    }
+  }, [instructores]);
+
+  useEffect(() => {
+    if (typeof instructores === 'object') {
+      const newInitialVal = { ...initVals };
+      Object.keys(initVals).forEach(
+        (el) => (newInitialVal[el] = instructores[el]),
+      );
+      setInitialValues(newInitialVal);
+    }
+  }, [instructores]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }));
+    await router.push('/instructores/instructores-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit instructores')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit instructores'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Persona' labelFor='persona'>
+                <Field
+                  name='persona'
+                  id='persona'
+                  component={SelectField}
+                  options={initialValues.persona}
+                  itemRef={'personas'}
+                  showField={'nombre'}
+                ></Field>
+              </FormField>
+
+              <FormField label='EstadodelInstructor' labelFor='status'>
+                <Field name='status' id='status' component='select'>
+                  <option value='CONTRATACION'>CONTRATACION</option>
+
+                  <option value='ACTIVO'>ACTIVO</option>
+
+                  <option value='BAJA'>BAJA</option>
+                </Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/instructores/instructores-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditInstructoresPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_INSTRUCTORES'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditInstructoresPage;
diff --git a/frontend/src/pages/instructores/instructores-list.tsx b/frontend/src/pages/instructores/instructores-list.tsx
new file mode 100644
index 0000000..999793c
--- /dev/null
+++ b/frontend/src/pages/instructores/instructores-list.tsx
@@ -0,0 +1,180 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TableInstructores from '../../components/Instructores/TableInstructores';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import {
+  setRefetch,
+  uploadCsv,
+} from '../../stores/instructores/instructoresSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const InstructoresTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([
+    { label: 'Persona', title: 'persona' },
+
+    {
+      label: 'EstadodelInstructor',
+      title: 'status',
+      type: 'enum',
+      options: ['CONTRATACION', 'ACTIVO', 'BAJA'],
+    },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_INSTRUCTORES');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getInstructoresCSV = async () => {
+    const response = await axios({
+      url: '/instructores?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'instructoresCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Instructores')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Instructores'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/instructores/instructores-new'}
+              color='info'
+              label='New Item'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getInstructoresCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <Link href={'/instructores/instructores-table'}>
+              Switch to Table
+            </Link>
+          </div>
+        </CardBox>
+
+        <CardBox className='mb-6' hasTable>
+          <TableInstructores
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+InstructoresTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_INSTRUCTORES'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default InstructoresTablesPage;
diff --git a/frontend/src/pages/instructores/instructores-new.tsx b/frontend/src/pages/instructores/instructores-new.tsx
new file mode 100644
index 0000000..f624437
--- /dev/null
+++ b/frontend/src/pages/instructores/instructores-new.tsx
@@ -0,0 +1,116 @@
+import {
+  mdiAccount,
+  mdiChartTimelineVariant,
+  mdiMail,
+  mdiUpload,
+} from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SwitchField } from '../../components/SwitchField';
+
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { RichTextField } from '../../components/RichTextField';
+
+import { create } from '../../stores/instructores/instructoresSlice';
+import { useAppDispatch } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import moment from 'moment';
+
+const initialValues = {
+  persona: '',
+
+  status: 'CONTRATACION',
+};
+
+const InstructoresNew = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data));
+    await router.push('/instructores/instructores-list');
+  };
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='New Item'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Persona' labelFor='persona'>
+                <Field
+                  name='persona'
+                  id='persona'
+                  component={SelectField}
+                  options={[]}
+                  itemRef={'personas'}
+                ></Field>
+              </FormField>
+
+              <FormField label='EstadodelInstructor' labelFor='status'>
+                <Field name='status' id='status' component='select'>
+                  <option value='CONTRATACION'>CONTRATACION</option>
+
+                  <option value='ACTIVO'>ACTIVO</option>
+
+                  <option value='BAJA'>BAJA</option>
+                </Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/instructores/instructores-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+InstructoresNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'CREATE_INSTRUCTORES'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default InstructoresNew;
diff --git a/frontend/src/pages/instructores/instructores-table.tsx b/frontend/src/pages/instructores/instructores-table.tsx
new file mode 100644
index 0000000..4cf56b6
--- /dev/null
+++ b/frontend/src/pages/instructores/instructores-table.tsx
@@ -0,0 +1,177 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TableInstructores from '../../components/Instructores/TableInstructores';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import {
+  setRefetch,
+  uploadCsv,
+} from '../../stores/instructores/instructoresSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const InstructoresTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([
+    { label: 'Persona', title: 'persona' },
+
+    {
+      label: 'EstadodelInstructor',
+      title: 'status',
+      type: 'enum',
+      options: ['CONTRATACION', 'ACTIVO', 'BAJA'],
+    },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_INSTRUCTORES');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getInstructoresCSV = async () => {
+    const response = await axios({
+      url: '/instructores?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'instructoresCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Instructores')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Instructores'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/instructores/instructores-new'}
+              color='info'
+              label='New Item'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getInstructoresCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+
+            <Link href={'/instructores/instructores-list'}>
+              Back to <span className='capitalize'>list</span>
+            </Link>
+          </div>
+        </CardBox>
+        <CardBox className='mb-6' hasTable>
+          <TableInstructores
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+InstructoresTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_INSTRUCTORES'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default InstructoresTablesPage;
diff --git a/frontend/src/pages/instructores/instructores-view.tsx b/frontend/src/pages/instructores/instructores-view.tsx
new file mode 100644
index 0000000..37215ab
--- /dev/null
+++ b/frontend/src/pages/instructores/instructores-view.tsx
@@ -0,0 +1,162 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { fetch } from '../../stores/instructores/instructoresSlice';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import { getPageTitle } from '../../config';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import SectionMain from '../../components/SectionMain';
+import CardBox from '../../components/CardBox';
+import BaseButton from '../../components/BaseButton';
+import BaseDivider from '../../components/BaseDivider';
+import { mdiChartTimelineVariant } from '@mdi/js';
+import { SwitchField } from '../../components/SwitchField';
+import FormField from '../../components/FormField';
+
+const InstructoresView = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const { instructores } = useAppSelector((state) => state.instructores);
+
+  const { id } = router.query;
+
+  function removeLastCharacter(str) {
+    console.log(str, `str`);
+    return str.slice(0, -1);
+  }
+
+  useEffect(() => {
+    dispatch(fetch({ id }));
+  }, [dispatch, id]);
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('View instructores')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={removeLastCharacter('View instructores')}
+          main
+        >
+          <BaseButton
+            color='info'
+            label='Edit'
+            href={`/instructores/instructores-edit/?id=${id}`}
+          />
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Persona</p>
+
+            <p>{instructores?.persona?.nombre ?? 'No data'}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>EstadodelInstructor</p>
+            <p>{instructores?.status ?? 'No data'}</p>
+          </div>
+
+          <>
+            <p className={'block font-bold mb-2'}>Cursos Instructor</p>
+            <CardBox
+              className='mb-6 border border-gray-300 rounded overflow-hidden'
+              hasTable
+            >
+              <div className='overflow-x-auto'>
+                <table>
+                  <thead>
+                    <tr>
+                      <th>NombredelCurso</th>
+
+                      <th>Duración</th>
+
+                      <th>FechadeInicio</th>
+
+                      <th>FechadeFin</th>
+
+                      <th>NúmerodeSesiones</th>
+
+                      <th>NúmerodeEvaluaciones</th>
+
+                      <th>EstadodelCurso</th>
+
+                      <th>EstadodeAcreditación</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {instructores.cursos_instructor &&
+                      Array.isArray(instructores.cursos_instructor) &&
+                      instructores.cursos_instructor.map((item: any) => (
+                        <tr
+                          key={item.id}
+                          onClick={() =>
+                            router.push(`/cursos/cursos-view/?id=${item.id}`)
+                          }
+                        >
+                          <td data-label='nombre'>{item.nombre}</td>
+
+                          <td data-label='duracion'>{item.duracion}</td>
+
+                          <td data-label='fecha_inicio'>
+                            {dataFormatter.dateTimeFormatter(item.fecha_inicio)}
+                          </td>
+
+                          <td data-label='fecha_fin'>
+                            {dataFormatter.dateTimeFormatter(item.fecha_fin)}
+                          </td>
+
+                          <td data-label='numero_sesiones'>
+                            {item.numero_sesiones}
+                          </td>
+
+                          <td data-label='numero_evaluaciones'>
+                            {item.numero_evaluaciones}
+                          </td>
+
+                          <td data-label='status'>{item.status}</td>
+
+                          <td data-label='status_acreditacion'>
+                            {item.status_acreditacion}
+                          </td>
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
+              </div>
+              {!instructores?.cursos_instructor?.length && (
+                <div className={'text-center py-4'}>No data</div>
+              )}
+            </CardBox>
+          </>
+
+          <BaseDivider />
+
+          <BaseButton
+            color='info'
+            label='Back'
+            onClick={() => router.push('/instructores/instructores-list')}
+          />
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+InstructoresView.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_INSTRUCTORES'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default InstructoresView;
diff --git a/frontend/src/pages/login.tsx b/frontend/src/pages/login.tsx
new file mode 100644
index 0000000..b69ccb3
--- /dev/null
+++ b/frontend/src/pages/login.tsx
@@ -0,0 +1,365 @@
+import React, { useEffect, useState } from 'react';
+import type { ReactElement } from 'react';
+import Head from 'next/head';
+import { useTranslation } from 'next-i18next';
+import BaseButton from '../components/BaseButton';
+import CardBox from '../components/CardBox';
+import BaseIcon from '../components/BaseIcon';
+import { mdiInformation, mdiEye, mdiEyeOff } from '@mdi/js';
+import SectionFullScreen from '../components/SectionFullScreen';
+import LayoutGuest from '../layouts/Guest';
+import { Field, Form, Formik } from 'formik';
+import FormField from '../components/FormField';
+import FormCheckRadio from '../components/FormCheckRadio';
+import BaseDivider from '../components/BaseDivider';
+import BaseButtons from '../components/BaseButtons';
+import { useRouter } from 'next/router';
+import { getPageTitle } from '../config';
+import { findMe, loginUser, resetAction } from '../stores/authSlice';
+import { useAppDispatch, useAppSelector } from '../stores/hooks';
+import Link from 'next/link';
+import { toast, ToastContainer } from 'react-toastify';
+import { getPexelsImage, getPexelsVideo } from '../helpers/pexels';
+
+export default function Login() {
+  const { t } = useTranslation('common');
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const textColor = useAppSelector((state) => state.style.linkColor);
+  const iconsColor = useAppSelector((state) => state.style.iconsColor);
+  const notify = (type, msg) => toast(msg, { type });
+  const [illustrationImage, setIllustrationImage] = useState({
+    src: undefined,
+    photographer: undefined,
+    photographer_url: undefined,
+  });
+  const [illustrationVideo, setIllustrationVideo] = useState({
+    video_files: [],
+  });
+  const [contentType, setContentType] = useState('image');
+  const [contentPosition, setContentPosition] = useState('left');
+  const [showPassword, setShowPassword] = useState(false);
+  const {
+    currentUser,
+    isFetching,
+    errorMessage,
+    token,
+    notify: notifyState,
+  } = useAppSelector((state) => state.auth);
+  const [initialValues, setInitialValues] = React.useState({
+    email: 'admin@flatlogic.com',
+    password: 'b7af41d8',
+    remember: true,
+  });
+
+  const title = 'CtrlE';
+
+  // Fetch Pexels image/video
+  useEffect(() => {
+    async function fetchData() {
+      const image = await getPexelsImage();
+      const video = await getPexelsVideo();
+      setIllustrationImage(image);
+      setIllustrationVideo(video);
+    }
+    fetchData();
+  }, []);
+  // Fetch user data
+  useEffect(() => {
+    if (token) {
+      dispatch(findMe());
+    }
+  }, [token, dispatch]);
+  // Redirect to dashboard if user is logged in
+  useEffect(() => {
+    if (currentUser?.id) {
+      router.push('/dashboard');
+    }
+  }, [currentUser?.id, router]);
+  // Show error message if there is one
+  useEffect(() => {
+    if (errorMessage) {
+      notify('error', errorMessage);
+    }
+  }, [errorMessage]);
+  // Show notification if there is one
+  useEffect(() => {
+    if (notifyState?.showNotification) {
+      notify('success', notifyState?.textNotification);
+      dispatch(resetAction());
+    }
+  }, [notifyState?.showNotification]);
+
+  const togglePasswordVisibility = () => {
+    setShowPassword(!showPassword);
+  };
+
+  const handleSubmit = async (value) => {
+    const { remember, ...rest } = value;
+    await dispatch(loginUser(rest));
+  };
+
+  const setLogin = (target: HTMLElement) => {
+    setInitialValues((prev) => ({
+      ...prev,
+      email: target.innerText.trim(),
+      password: target.dataset.password ?? '',
+    }));
+  };
+
+  const imageBlock = (image) => (
+    <div
+      className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'
+      style={{
+        backgroundImage: `${
+          image
+            ? `url(${image.src?.original})`
+            : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
+        }`,
+        backgroundSize: 'cover',
+        backgroundPosition: 'left center',
+        backgroundRepeat: 'no-repeat',
+      }}
+    >
+      <div className='flex justify-center w-full bg-blue-300/20'>
+        <a
+          className='text-[8px]'
+          href={image?.photographer_url}
+          target='_blank'
+          rel='noreferrer'
+        >
+          Photo by {image?.photographer} on Pexels
+        </a>
+      </div>
+    </div>
+  );
+
+  const videoBlock = (video) => {
+    if (video?.video_files?.length > 0) {
+      return (
+        <div className='hidden md:flex flex-col justify-end relative flex-grow-0 flex-shrink-0 w-1/3'>
+          <video
+            className='absolute top-0 left-0 w-full h-full object-cover'
+            autoPlay
+            loop
+            muted
+          >
+            <source src={video.video_files[0]?.link} type='video/mp4' />
+            Your browser does not support the video tag.
+          </video>
+          <div className='flex justify-center w-full bg-blue-300/20 z-10'>
+            <a
+              className='text-[8px]'
+              href={video.user.url}
+              target='_blank'
+              rel='noreferrer'
+            >
+              Video by {video.user.name} on Pexels
+            </a>
+          </div>
+        </div>
+      );
+    }
+  };
+
+  return (
+    <div
+      style={
+        contentPosition === 'background'
+          ? {
+              backgroundImage: `${
+                illustrationImage
+                  ? `url(${illustrationImage.src?.original})`
+                  : 'linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5))'
+              }`,
+              backgroundSize: 'cover',
+              backgroundPosition: 'left center',
+              backgroundRepeat: 'no-repeat',
+            }
+          : {}
+      }
+    >
+      <Head>
+        <title>
+          {getPageTitle(t('pages.login.pageTitle', { defaultValue: 'Login' }))}
+        </title>
+      </Head>
+
+      <SectionFullScreen bg='violet'>
+        <div
+          className={`flex ${
+            contentPosition === 'right' ? 'flex-row-reverse' : 'flex-row'
+          } min-h-screen w-full`}
+        >
+          {contentType === 'image' && contentPosition !== 'background'
+            ? imageBlock(illustrationImage)
+            : null}
+          {contentType === 'video' && contentPosition !== 'background'
+            ? videoBlock(illustrationVideo)
+            : null}
+          <div className='flex items-center justify-center flex-col space-y-4 w-full lg:w-full'>
+            <CardBox id='loginRoles' className='w-full md:w-3/5 lg:w-2/3'>
+              <h2 className='text-4xl font-semibold my-4'>{title}</h2>
+
+              <div className='flex flex-row text-gray-500 justify-between'>
+                <div>
+                  <p className='mb-2'>
+                    Use{' '}
+                    <code
+                      className={`cursor-pointer ${textColor} `}
+                      data-password='b7af41d8'
+                      onClick={(e) => setLogin(e.target)}
+                    >
+                      admin@flatlogic.com
+                    </code>
+                    {' / '}
+                    <code className={`${textColor}`}>b7af41d8</code>
+                    {' / '}
+                    to login as Admin
+                  </p>
+                  <p>
+                    Use{' '}
+                    <code
+                      className={`cursor-pointer ${textColor} `}
+                      data-password='9ee26005168f'
+                      onClick={(e) => setLogin(e.target)}
+                    >
+                      client@hello.com
+                    </code>
+                    {' / '}
+                    <code className={`${textColor}`}>9ee26005168f</code>
+                    {' / '}
+                    to login as User
+                  </p>
+                </div>
+                <div>
+                  <BaseIcon
+                    className={`${iconsColor}`}
+                    w='w-16'
+                    h='h-16'
+                    size={48}
+                    path={mdiInformation}
+                  />
+                </div>
+              </div>
+            </CardBox>
+
+            <CardBox className='w-full md:w-3/5 lg:w-2/3'>
+              <Formik
+                initialValues={initialValues}
+                enableReinitialize
+                onSubmit={(values) => handleSubmit(values)}
+              >
+                <Form>
+                  <FormField
+                    label={t('pages.login.form.loginLabel', {
+                      defaultValue: 'Login',
+                    })}
+                    help={t('pages.login.form.loginHelp', {
+                      defaultValue: 'Please enter your login',
+                    })}
+                  >
+                    <Field name='email' />
+                  </FormField>
+
+                  <div className='relative'>
+                    <FormField
+                      label={t('pages.login.form.passwordLabel', {
+                        defaultValue: 'Password',
+                      })}
+                      help={t('pages.login.form.passwordHelp', {
+                        defaultValue: 'Please enter your password',
+                      })}
+                    >
+                      <Field
+                        name='password'
+                        type={showPassword ? 'text' : 'password'}
+                      />
+                    </FormField>
+                    <div
+                      className='absolute bottom-8 right-0 pr-3 flex items-center cursor-pointer'
+                      onClick={togglePasswordVisibility}
+                    >
+                      <BaseIcon
+                        className='text-gray-500 hover:text-gray-700'
+                        size={20}
+                        path={showPassword ? mdiEyeOff : mdiEye}
+                      />
+                    </div>
+                  </div>
+
+                  <div className={'flex justify-between'}>
+                    <FormCheckRadio
+                      type='checkbox'
+                      label={t('pages.login.form.remember', {
+                        defaultValue: 'Remember',
+                      })}
+                    >
+                      <Field type='checkbox' name='remember' />
+                    </FormCheckRadio>
+
+                    <Link
+                      className={`${textColor} text-blue-600`}
+                      href={'/forgot'}
+                    >
+                      {t('pages.login.form.forgotPassword', {
+                        defaultValue: 'Forgot password?',
+                      })}
+                    </Link>
+                  </div>
+
+                  <BaseDivider />
+
+                  <BaseButtons>
+                    <BaseButton
+                      className={'w-full'}
+                      type='submit'
+                      label={
+                        isFetching
+                          ? t('pages.login.form.loading', {
+                              defaultValue: 'Loading...',
+                            })
+                          : t('pages.login.form.loginButton', {
+                              defaultValue: 'Login',
+                            })
+                      }
+                      color='info'
+                      disabled={isFetching}
+                    />
+                  </BaseButtons>
+                  <br />
+                  <p className={'text-center'}>
+                    {t('pages.login.form.noAccountYet', {
+                      defaultValue: 'Don’t have an account yet?',
+                    })}{' '}
+                    <Link className={`${textColor}`} href={'/register'}>
+                      {t('pages.login.form.newAccount', {
+                        defaultValue: 'New Account',
+                      })}
+                    </Link>
+                  </p>
+                </Form>
+              </Formik>
+            </CardBox>
+          </div>
+        </div>
+      </SectionFullScreen>
+      <div className='bg-black text-white flex flex-col text-center justify-center md:flex-row'>
+        <p className='py-6 text-sm'>
+          © 2024 <span>{title}</span>.{' '}
+          {t('pages.login.footer.copyright', {
+            defaultValue: '© All rights reserved',
+          })}
+        </p>
+        <Link className='py-6 ml-4 text-sm' href='/privacy-policy/'>
+          {t('pages.login.footer.privacy', { defaultValue: 'Privacy Policy' })}
+        </Link>
+      </div>
+      <ToastContainer />
+    </div>
+  );
+}
+
+Login.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutGuest>{page}</LayoutGuest>;
+};
diff --git a/frontend/src/pages/password-reset.tsx b/frontend/src/pages/password-reset.tsx
new file mode 100644
index 0000000..e75c2f4
--- /dev/null
+++ b/frontend/src/pages/password-reset.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import LayoutGuest from '../layouts/Guest';
+import PasswordSetOrReset from '../components/PasswordSetOrReset';
+
+export default function Reset() {
+  return <PasswordSetOrReset />;
+}
+
+Reset.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutGuest>{page}</LayoutGuest>;
+};
diff --git a/frontend/src/pages/permissions/[permissionsId].tsx b/frontend/src/pages/permissions/[permissionsId].tsx
new file mode 100644
index 0000000..c3e482c
--- /dev/null
+++ b/frontend/src/pages/permissions/[permissionsId].tsx
@@ -0,0 +1,126 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import { update, fetch } from '../../stores/permissions/permissionsSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditPermissions = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    name: '',
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { permissions } = useAppSelector((state) => state.permissions);
+
+  const { permissionsId } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: permissionsId }));
+  }, [permissionsId]);
+
+  useEffect(() => {
+    if (typeof permissions === 'object') {
+      setInitialValues(permissions);
+    }
+  }, [permissions]);
+
+  useEffect(() => {
+    if (typeof permissions === 'object') {
+      const newInitialVal = { ...initVals };
+
+      Object.keys(initVals).forEach(
+        (el) => (newInitialVal[el] = permissions[el]),
+      );
+
+      setInitialValues(newInitialVal);
+    }
+  }, [permissions]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: permissionsId, data }));
+    await router.push('/permissions/permissions-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit permissions')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit permissions'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Name'>
+                <Field name='name' placeholder='Name' />
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/permissions/permissions-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditPermissions.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_PERMISSIONS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditPermissions;
diff --git a/frontend/src/pages/permissions/permissions-edit.tsx b/frontend/src/pages/permissions/permissions-edit.tsx
new file mode 100644
index 0000000..17c0586
--- /dev/null
+++ b/frontend/src/pages/permissions/permissions-edit.tsx
@@ -0,0 +1,124 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import { update, fetch } from '../../stores/permissions/permissionsSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditPermissionsPage = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    name: '',
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { permissions } = useAppSelector((state) => state.permissions);
+
+  const { id } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }));
+  }, [id]);
+
+  useEffect(() => {
+    if (typeof permissions === 'object') {
+      setInitialValues(permissions);
+    }
+  }, [permissions]);
+
+  useEffect(() => {
+    if (typeof permissions === 'object') {
+      const newInitialVal = { ...initVals };
+      Object.keys(initVals).forEach(
+        (el) => (newInitialVal[el] = permissions[el]),
+      );
+      setInitialValues(newInitialVal);
+    }
+  }, [permissions]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }));
+    await router.push('/permissions/permissions-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit permissions')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit permissions'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Name'>
+                <Field name='name' placeholder='Name' />
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/permissions/permissions-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditPermissionsPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_PERMISSIONS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditPermissionsPage;
diff --git a/frontend/src/pages/permissions/permissions-list.tsx b/frontend/src/pages/permissions/permissions-list.tsx
new file mode 100644
index 0000000..97955e4
--- /dev/null
+++ b/frontend/src/pages/permissions/permissions-list.tsx
@@ -0,0 +1,165 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TablePermissions from '../../components/Permissions/TablePermissions';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import {
+  setRefetch,
+  uploadCsv,
+} from '../../stores/permissions/permissionsSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const PermissionsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([{ label: 'Name', title: 'name' }]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_PERMISSIONS');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getPermissionsCSV = async () => {
+    const response = await axios({
+      url: '/permissions?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'permissionsCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Permissions')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Permissions'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/permissions/permissions-new'}
+              color='info'
+              label='New Item'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getPermissionsCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>
+        </CardBox>
+
+        <CardBox className='mb-6' hasTable>
+          <TablePermissions
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+PermissionsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_PERMISSIONS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default PermissionsTablesPage;
diff --git a/frontend/src/pages/permissions/permissions-new.tsx b/frontend/src/pages/permissions/permissions-new.tsx
new file mode 100644
index 0000000..e5a9eb0
--- /dev/null
+++ b/frontend/src/pages/permissions/permissions-new.tsx
@@ -0,0 +1,98 @@
+import {
+  mdiAccount,
+  mdiChartTimelineVariant,
+  mdiMail,
+  mdiUpload,
+} from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SwitchField } from '../../components/SwitchField';
+
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { RichTextField } from '../../components/RichTextField';
+
+import { create } from '../../stores/permissions/permissionsSlice';
+import { useAppDispatch } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import moment from 'moment';
+
+const initialValues = {
+  name: '',
+};
+
+const PermissionsNew = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data));
+    await router.push('/permissions/permissions-list');
+  };
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='New Item'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Name'>
+                <Field name='name' placeholder='Name' />
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/permissions/permissions-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+PermissionsNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'CREATE_PERMISSIONS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default PermissionsNew;
diff --git a/frontend/src/pages/permissions/permissions-table.tsx b/frontend/src/pages/permissions/permissions-table.tsx
new file mode 100644
index 0000000..4f54815
--- /dev/null
+++ b/frontend/src/pages/permissions/permissions-table.tsx
@@ -0,0 +1,164 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TablePermissions from '../../components/Permissions/TablePermissions';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import {
+  setRefetch,
+  uploadCsv,
+} from '../../stores/permissions/permissionsSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const PermissionsTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([{ label: 'Name', title: 'name' }]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_PERMISSIONS');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getPermissionsCSV = async () => {
+    const response = await axios({
+      url: '/permissions?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'permissionsCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Permissions')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Permissions'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/permissions/permissions-new'}
+              color='info'
+              label='New Item'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getPermissionsCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>
+        </CardBox>
+        <CardBox className='mb-6' hasTable>
+          <TablePermissions
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+PermissionsTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_PERMISSIONS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default PermissionsTablesPage;
diff --git a/frontend/src/pages/permissions/permissions-view.tsx b/frontend/src/pages/permissions/permissions-view.tsx
new file mode 100644
index 0000000..73dde19
--- /dev/null
+++ b/frontend/src/pages/permissions/permissions-view.tsx
@@ -0,0 +1,83 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { fetch } from '../../stores/permissions/permissionsSlice';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import { getPageTitle } from '../../config';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import SectionMain from '../../components/SectionMain';
+import CardBox from '../../components/CardBox';
+import BaseButton from '../../components/BaseButton';
+import BaseDivider from '../../components/BaseDivider';
+import { mdiChartTimelineVariant } from '@mdi/js';
+import { SwitchField } from '../../components/SwitchField';
+import FormField from '../../components/FormField';
+
+const PermissionsView = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const { permissions } = useAppSelector((state) => state.permissions);
+
+  const { id } = router.query;
+
+  function removeLastCharacter(str) {
+    console.log(str, `str`);
+    return str.slice(0, -1);
+  }
+
+  useEffect(() => {
+    dispatch(fetch({ id }));
+  }, [dispatch, id]);
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('View permissions')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={removeLastCharacter('View permissions')}
+          main
+        >
+          <BaseButton
+            color='info'
+            label='Edit'
+            href={`/permissions/permissions-edit/?id=${id}`}
+          />
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Name</p>
+            <p>{permissions?.name}</p>
+          </div>
+
+          <BaseDivider />
+
+          <BaseButton
+            color='info'
+            label='Back'
+            onClick={() => router.push('/permissions/permissions-list')}
+          />
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+PermissionsView.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_PERMISSIONS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default PermissionsView;
diff --git a/frontend/src/pages/personas/[personasId].tsx b/frontend/src/pages/personas/[personasId].tsx
new file mode 100644
index 0000000..e8a5c64
--- /dev/null
+++ b/frontend/src/pages/personas/[personasId].tsx
@@ -0,0 +1,166 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import { update, fetch } from '../../stores/personas/personasSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditPersonas = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    nombre: '',
+
+    ap_paterno: '',
+
+    ap_materno: '',
+
+    fecha_nacimiento: new Date(),
+
+    curp: '',
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { personas } = useAppSelector((state) => state.personas);
+
+  const { personasId } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: personasId }));
+  }, [personasId]);
+
+  useEffect(() => {
+    if (typeof personas === 'object') {
+      setInitialValues(personas);
+    }
+  }, [personas]);
+
+  useEffect(() => {
+    if (typeof personas === 'object') {
+      const newInitialVal = { ...initVals };
+
+      Object.keys(initVals).forEach((el) => (newInitialVal[el] = personas[el]));
+
+      setInitialValues(newInitialVal);
+    }
+  }, [personas]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: personasId, data }));
+    await router.push('/personas/personas-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit personas')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit personas'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Nombre'>
+                <Field name='nombre' placeholder='Nombre' />
+              </FormField>
+
+              <FormField label='ApellidoPaterno'>
+                <Field name='ap_paterno' placeholder='ApellidoPaterno' />
+              </FormField>
+
+              <FormField label='ApellidoMaterno'>
+                <Field name='ap_materno' placeholder='ApellidoMaterno' />
+              </FormField>
+
+              <FormField label='FechadeNacimiento'>
+                <DatePicker
+                  dateFormat='yyyy-MM-dd hh:mm'
+                  showTimeSelect
+                  selected={
+                    initialValues.fecha_nacimiento
+                      ? new Date(
+                          dayjs(initialValues.fecha_nacimiento).format(
+                            'YYYY-MM-DD hh:mm',
+                          ),
+                        )
+                      : null
+                  }
+                  onChange={(date) =>
+                    setInitialValues({
+                      ...initialValues,
+                      fecha_nacimiento: date,
+                    })
+                  }
+                />
+              </FormField>
+
+              <FormField label='CURP'>
+                <Field name='curp' placeholder='CURP' />
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/personas/personas-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditPersonas.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_PERSONAS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditPersonas;
diff --git a/frontend/src/pages/personas/personas-edit.tsx b/frontend/src/pages/personas/personas-edit.tsx
new file mode 100644
index 0000000..1019807
--- /dev/null
+++ b/frontend/src/pages/personas/personas-edit.tsx
@@ -0,0 +1,164 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import { update, fetch } from '../../stores/personas/personasSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditPersonasPage = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    nombre: '',
+
+    ap_paterno: '',
+
+    ap_materno: '',
+
+    fecha_nacimiento: new Date(),
+
+    curp: '',
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { personas } = useAppSelector((state) => state.personas);
+
+  const { id } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }));
+  }, [id]);
+
+  useEffect(() => {
+    if (typeof personas === 'object') {
+      setInitialValues(personas);
+    }
+  }, [personas]);
+
+  useEffect(() => {
+    if (typeof personas === 'object') {
+      const newInitialVal = { ...initVals };
+      Object.keys(initVals).forEach((el) => (newInitialVal[el] = personas[el]));
+      setInitialValues(newInitialVal);
+    }
+  }, [personas]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }));
+    await router.push('/personas/personas-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit personas')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit personas'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Nombre'>
+                <Field name='nombre' placeholder='Nombre' />
+              </FormField>
+
+              <FormField label='ApellidoPaterno'>
+                <Field name='ap_paterno' placeholder='ApellidoPaterno' />
+              </FormField>
+
+              <FormField label='ApellidoMaterno'>
+                <Field name='ap_materno' placeholder='ApellidoMaterno' />
+              </FormField>
+
+              <FormField label='FechadeNacimiento'>
+                <DatePicker
+                  dateFormat='yyyy-MM-dd hh:mm'
+                  showTimeSelect
+                  selected={
+                    initialValues.fecha_nacimiento
+                      ? new Date(
+                          dayjs(initialValues.fecha_nacimiento).format(
+                            'YYYY-MM-DD hh:mm',
+                          ),
+                        )
+                      : null
+                  }
+                  onChange={(date) =>
+                    setInitialValues({
+                      ...initialValues,
+                      fecha_nacimiento: date,
+                    })
+                  }
+                />
+              </FormField>
+
+              <FormField label='CURP'>
+                <Field name='curp' placeholder='CURP' />
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/personas/personas-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditPersonasPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_PERSONAS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditPersonasPage;
diff --git a/frontend/src/pages/personas/personas-list.tsx b/frontend/src/pages/personas/personas-list.tsx
new file mode 100644
index 0000000..e542f0e
--- /dev/null
+++ b/frontend/src/pages/personas/personas-list.tsx
@@ -0,0 +1,173 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TablePersonas from '../../components/Personas/TablePersonas';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import { setRefetch, uploadCsv } from '../../stores/personas/personasSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const PersonasTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([
+    { label: 'Nombre', title: 'nombre' },
+    { label: 'ApellidoPaterno', title: 'ap_paterno' },
+    { label: 'ApellidoMaterno', title: 'ap_materno' },
+    { label: 'CURP', title: 'curp' },
+
+    { label: 'FechadeNacimiento', title: 'fecha_nacimiento', date: 'true' },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_PERSONAS');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getPersonasCSV = async () => {
+    const response = await axios({
+      url: '/personas?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'personasCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Personas')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Personas'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/personas/personas-new'}
+              color='info'
+              label='New Item'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getPersonasCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <Link href={'/personas/personas-table'}>Switch to Table</Link>
+          </div>
+        </CardBox>
+
+        <CardBox className='mb-6' hasTable>
+          <TablePersonas
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+PersonasTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_PERSONAS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default PersonasTablesPage;
diff --git a/frontend/src/pages/personas/personas-new.tsx b/frontend/src/pages/personas/personas-new.tsx
new file mode 100644
index 0000000..b119d67
--- /dev/null
+++ b/frontend/src/pages/personas/personas-new.tsx
@@ -0,0 +1,126 @@
+import {
+  mdiAccount,
+  mdiChartTimelineVariant,
+  mdiMail,
+  mdiUpload,
+} from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SwitchField } from '../../components/SwitchField';
+
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { RichTextField } from '../../components/RichTextField';
+
+import { create } from '../../stores/personas/personasSlice';
+import { useAppDispatch } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import moment from 'moment';
+
+const initialValues = {
+  nombre: '',
+
+  ap_paterno: '',
+
+  ap_materno: '',
+
+  fecha_nacimiento: '',
+
+  curp: '',
+};
+
+const PersonasNew = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data));
+    await router.push('/personas/personas-list');
+  };
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='New Item'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Nombre'>
+                <Field name='nombre' placeholder='Nombre' />
+              </FormField>
+
+              <FormField label='ApellidoPaterno'>
+                <Field name='ap_paterno' placeholder='ApellidoPaterno' />
+              </FormField>
+
+              <FormField label='ApellidoMaterno'>
+                <Field name='ap_materno' placeholder='ApellidoMaterno' />
+              </FormField>
+
+              <FormField label='FechadeNacimiento'>
+                <Field
+                  type='datetime-local'
+                  name='fecha_nacimiento'
+                  placeholder='FechadeNacimiento'
+                />
+              </FormField>
+
+              <FormField label='CURP'>
+                <Field name='curp' placeholder='CURP' />
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/personas/personas-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+PersonasNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'CREATE_PERSONAS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default PersonasNew;
diff --git a/frontend/src/pages/personas/personas-table.tsx b/frontend/src/pages/personas/personas-table.tsx
new file mode 100644
index 0000000..dffad1f
--- /dev/null
+++ b/frontend/src/pages/personas/personas-table.tsx
@@ -0,0 +1,172 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TablePersonas from '../../components/Personas/TablePersonas';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import { setRefetch, uploadCsv } from '../../stores/personas/personasSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const PersonasTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([
+    { label: 'Nombre', title: 'nombre' },
+    { label: 'ApellidoPaterno', title: 'ap_paterno' },
+    { label: 'ApellidoMaterno', title: 'ap_materno' },
+    { label: 'CURP', title: 'curp' },
+
+    { label: 'FechadeNacimiento', title: 'fecha_nacimiento', date: 'true' },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_PERSONAS');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getPersonasCSV = async () => {
+    const response = await axios({
+      url: '/personas?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'personasCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Personas')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Personas'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/personas/personas-new'}
+              color='info'
+              label='New Item'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getPersonasCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+
+            <Link href={'/personas/personas-list'}>
+              Back to <span className='capitalize'>list</span>
+            </Link>
+          </div>
+        </CardBox>
+        <CardBox className='mb-6' hasTable>
+          <TablePersonas
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+PersonasTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_PERSONAS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default PersonasTablesPage;
diff --git a/frontend/src/pages/personas/personas-view.tsx b/frontend/src/pages/personas/personas-view.tsx
new file mode 100644
index 0000000..2fe8999
--- /dev/null
+++ b/frontend/src/pages/personas/personas-view.tsx
@@ -0,0 +1,195 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { fetch } from '../../stores/personas/personasSlice';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import { getPageTitle } from '../../config';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import SectionMain from '../../components/SectionMain';
+import CardBox from '../../components/CardBox';
+import BaseButton from '../../components/BaseButton';
+import BaseDivider from '../../components/BaseDivider';
+import { mdiChartTimelineVariant } from '@mdi/js';
+import { SwitchField } from '../../components/SwitchField';
+import FormField from '../../components/FormField';
+
+const PersonasView = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const { personas } = useAppSelector((state) => state.personas);
+
+  const { id } = router.query;
+
+  function removeLastCharacter(str) {
+    console.log(str, `str`);
+    return str.slice(0, -1);
+  }
+
+  useEffect(() => {
+    dispatch(fetch({ id }));
+  }, [dispatch, id]);
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('View personas')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={removeLastCharacter('View personas')}
+          main
+        >
+          <BaseButton
+            color='info'
+            label='Edit'
+            href={`/personas/personas-edit/?id=${id}`}
+          />
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Nombre</p>
+            <p>{personas?.nombre}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>ApellidoPaterno</p>
+            <p>{personas?.ap_paterno}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>ApellidoMaterno</p>
+            <p>{personas?.ap_materno}</p>
+          </div>
+
+          <FormField label='FechadeNacimiento'>
+            {personas.fecha_nacimiento ? (
+              <DatePicker
+                dateFormat='yyyy-MM-dd hh:mm'
+                showTimeSelect
+                selected={
+                  personas.fecha_nacimiento
+                    ? new Date(
+                        dayjs(personas.fecha_nacimiento).format(
+                          'YYYY-MM-DD hh:mm',
+                        ),
+                      )
+                    : null
+                }
+                disabled
+              />
+            ) : (
+              <p>No FechadeNacimiento</p>
+            )}
+          </FormField>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>CURP</p>
+            <p>{personas?.curp}</p>
+          </div>
+
+          <>
+            <p className={'block font-bold mb-2'}>Alumnos Persona</p>
+            <CardBox
+              className='mb-6 border border-gray-300 rounded overflow-hidden'
+              hasTable
+            >
+              <div className='overflow-x-auto'>
+                <table>
+                  <thead>
+                    <tr>
+                      <th>NúmerodeControl</th>
+
+                      <th>Observaciones</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {personas.alumnos_persona &&
+                      Array.isArray(personas.alumnos_persona) &&
+                      personas.alumnos_persona.map((item: any) => (
+                        <tr
+                          key={item.id}
+                          onClick={() =>
+                            router.push(`/alumnos/alumnos-view/?id=${item.id}`)
+                          }
+                        >
+                          <td data-label='num_control'>{item.num_control}</td>
+
+                          <td data-label='obs'>{item.obs}</td>
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
+              </div>
+              {!personas?.alumnos_persona?.length && (
+                <div className={'text-center py-4'}>No data</div>
+              )}
+            </CardBox>
+          </>
+
+          <>
+            <p className={'block font-bold mb-2'}>Instructores Persona</p>
+            <CardBox
+              className='mb-6 border border-gray-300 rounded overflow-hidden'
+              hasTable
+            >
+              <div className='overflow-x-auto'>
+                <table>
+                  <thead>
+                    <tr>
+                      <th>EstadodelInstructor</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {personas.instructores_persona &&
+                      Array.isArray(personas.instructores_persona) &&
+                      personas.instructores_persona.map((item: any) => (
+                        <tr
+                          key={item.id}
+                          onClick={() =>
+                            router.push(
+                              `/instructores/instructores-view/?id=${item.id}`,
+                            )
+                          }
+                        >
+                          <td data-label='status'>{item.status}</td>
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
+              </div>
+              {!personas?.instructores_persona?.length && (
+                <div className={'text-center py-4'}>No data</div>
+              )}
+            </CardBox>
+          </>
+
+          <BaseDivider />
+
+          <BaseButton
+            color='info'
+            label='Back'
+            onClick={() => router.push('/personas/personas-list')}
+          />
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+PersonasView.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_PERSONAS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default PersonasView;
diff --git a/frontend/src/pages/privacy-policy.tsx b/frontend/src/pages/privacy-policy.tsx
new file mode 100644
index 0000000..d7e8cd0
--- /dev/null
+++ b/frontend/src/pages/privacy-policy.tsx
@@ -0,0 +1,292 @@
+import React, { useEffect, useState } from 'react';
+import type { ReactElement } from 'react';
+import Head from 'next/head';
+import LayoutGuest from '../layouts/Guest';
+import { getPageTitle } from '../config';
+
+export default function PrivacyPolicy() {
+  const title = 'CtrlE';
+  const [projectUrl, setProjectUrl] = useState('');
+
+  useEffect(() => {
+    setProjectUrl(location.origin);
+  }, []);
+
+  const Introduction = () => {
+    return (
+      <>
+        <h3>1. Introduction</h3>
+        <p>
+          {/* eslint-disable-next-line react/no-unescaped-entities */}
+          We at <span>{title}</span> ("we", "us", "our") are committed to
+          protecting your privacy. This Privacy Policy explains how we collect,
+          use, disclose, and safeguard your information when you visit our
+          website <a href={projectUrl}>{projectUrl}</a>, use our services, or
+          interact with us in other ways. By using our services, you agree to
+          the collection and use of information in accordance with this policy.
+        </p>
+      </>
+    );
+  };
+
+  const Information = () => {
+    return (
+      <>
+        <h3>2. Information We Collect</h3>
+        <div className='ml-2'>
+          <h4>2.1 Personal Identification Information</h4>
+          <p>
+            We collect various types of personal information in connection with
+            the services we provide, including:
+          </p>
+          <ul role='list'>
+            <li>
+              Contact Information: Name, email address, phone number, mailing
+              address.
+            </li>
+            <li>Account Information: Username, password, profile picture.</li>
+            <li>Payment Information: Credit card details, billing address.</li>
+            <li>Demographic Information: Age, gender, interests.</li>
+          </ul>
+          <h4>2.2 Technical Data</h4>
+          <p>
+            We automatically collect certain information when you visit, use, or
+            navigate our services. This information may include:
+          </p>
+          <ul role='list'>
+            <li>
+              Device Information: IP address, browser type, operating system,
+              device type.
+            </li>
+            <li>
+              Usage Data: Pages visited, time spent on each page, links clicked,
+              and other actions taken on our site.
+            </li>
+          </ul>
+          <h4>2.3 Cookies and Tracking Technologies</h4>
+          <p>
+            We use cookies and similar tracking technologies to track the
+            activity on our service and hold certain information. You can
+            instruct your browser to refuse all cookies or to indicate when a
+            cookie is being sent.
+          </p>
+        </div>
+      </>
+    );
+  };
+
+  const HowToUser = () => {
+    return (
+      <>
+        <h3>3. How We Use Your Information</h3>
+        <p>We use the information we collect in various ways, including to:</p>
+        <ul role='list' className=''>
+          <li>Provide, operate, and maintain our website and services.</li>
+          <li>Improve, personalize, and expand our website and services.</li>
+          <li>Understand and analyze how you use our website and services.</li>
+          <li>Develop new products, services, features, and functionality.</li>
+          <li>
+            Communicate with you, either directly or through one of our
+            partners, including for customer service, to provide you with
+            updates and other information relating to the website, and for
+            marketing and promotional purposes.
+          </li>
+          <li>
+            Process your transactions and send you related information,
+            including purchase confirmations and invoices.
+          </li>
+          <li>Find and prevent fraud.</li>
+          <li>Comply with legal obligations.</li>
+        </ul>
+      </>
+    );
+  };
+
+  const DataProtection = () => {
+    return (
+      <>
+        <h3>4. Data Protection and Security</h3>
+        <p>
+          We implement a variety of security measures to maintain the safety of
+          your personal information. These measures include:
+        </p>
+        <ul role='list'>
+          <li>
+            Encryption: We use encryption to protect sensitive information
+            transmitted online. Access Controls: We restrict access to your
+            personal data to authorized personnel only. Regular Security Audits:
+            We conduct regular audits to identify and address potential security
+            vulnerabilities.
+          </li>
+        </ul>
+      </>
+    );
+  };
+
+  const Sharing = () => {
+    return (
+      <>
+        <h3>5. Sharing Your Information</h3>
+        <p>
+          We do not sell, trade, or otherwise transfer your Personally
+          Identifiable Information to outside parties without your consent,
+          except in the following cases:
+        </p>
+        <ul role='list'>
+          <li>
+            Service Providers: We may share your information with third-party
+            service providers who perform services on our behalf, such as
+            payment processing, data analysis, email delivery, hosting services,
+            customer service, and marketing assistance.
+          </li>
+          <li>
+            Business Transfers: In the event of a merger, acquisition, or sale
+            of all or a portion of our assets, your information may be
+            transferred as part of that transaction.
+          </li>
+          <li>
+            Legal Requirements: We may disclose your information if required to
+            do so by law or in response to valid requests by public authorities
+            (e.g., a court or a government agency).
+          </li>
+        </ul>
+      </>
+    );
+  };
+
+  const ProtectionRights = () => {
+    return (
+      <>
+        <h3>6. Your Data Protection Rights</h3>
+        <p>
+          Depending on your location, you may have the following rights
+          regarding your personal data:
+        </p>
+        <ul role='list'>
+          <li>
+            The Right to Access: You have the right to request copies of your
+            personal data.
+          </li>
+          <li>
+            The Right to Rectification: You have the right to request that we
+            correct any information you believe is inaccurate or complete
+            information you believe is incomplete.
+          </li>
+          <li>
+            The Right to Erasure: You have the right to request that we erase
+            your personal data, under certain conditions.
+          </li>
+          <li>
+            The Right to Restrict Processing: You have the right to request that
+            we restrict the processing of your personal data, under certain
+            conditions.
+          </li>
+          <li>
+            The Right to Object to Processing: You have the right to object to
+            our processing of your personal data, under certain conditions.
+          </li>
+          <li>
+            The Right to Data Portability: You have the right to request that we
+            transfer the data that we have collected to another organization, or
+            directly to you, under certain conditions.
+          </li>
+        </ul>
+      </>
+    );
+  };
+
+  const DataTransfers = () => {
+    return (
+      <>
+        <h3>7. International Data Transfers</h3>
+        <p>
+          Your information, including personal data, may be transferred to — and
+          maintained on — computers located outside of your state, province,
+          country, or other governmental jurisdiction where the data protection
+          laws may differ from those of your jurisdiction. We will take all
+          steps reasonably necessary to ensure that your data is treated
+          securely and in accordance with this Privacy Policy.
+        </p>
+      </>
+    );
+  };
+
+  const RetentionOfData = () => {
+    return (
+      <>
+        <h3>8. Retention of Data</h3>
+        <p>
+          We will retain your personal data only for as long as is necessary for
+          the purposes set out in this Privacy Policy. We will retain and use
+          your personal data to the extent necessary to comply with our legal
+          obligations, resolve disputes, and enforce our policies.
+        </p>
+      </>
+    );
+  };
+
+  const ChangePrivacy = () => {
+    return (
+      <>
+        <h3>9. Changes to This Privacy Policy</h3>
+        <p>
+          We may update our Privacy Policy from time to time. We will notify you
+          of any changes by posting the new Privacy Policy on this page. You are
+          advised to review this Privacy Policy periodically for any changes.
+          Changes to this Privacy Policy are effective when they are posted on
+          this page.
+        </p>
+      </>
+    );
+  };
+
+  const ContactUs = () => {
+    return (
+      <>
+        <h3>10. Contact Us</h3>
+        <p>
+          If you have any questions about this Privacy Policy, please contact
+          us:
+        </p>
+        <div>
+          By email:{' '}
+          <a href='mailto:support@flatlogic.com'> [support@flatlogic.com]</a>
+        </div>
+        <div>
+          By visiting this page on our website:{' '}
+          <a href='https://flatlogic.com/contact'>Contact Us</a>
+        </div>
+      </>
+    );
+  };
+
+  return (
+    <div className='prose prose-slate mx-auto max-w-none'>
+      <Head>
+        <title>{getPageTitle('Privacy Policy')}</title>
+      </Head>
+
+      <div className='flex justify-center'>
+        <div className='z-10 md:w-10/12 my-4 bg-white border border-pavitra-400 rounded'>
+          <div className='p-8 lg:px-12 lg:py-10'>
+            <h1>Privacy Policy</h1>
+            <Introduction />
+            <Information />
+            <HowToUser />
+            <DataProtection />
+            <Sharing />
+            <ProtectionRights />
+            <DataTransfers />
+            <RetentionOfData />
+            <ChangePrivacy />
+            <ContactUs />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+PrivacyPolicy.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutGuest>{page}</LayoutGuest>;
+};
diff --git a/frontend/src/pages/profile.tsx b/frontend/src/pages/profile.tsx
new file mode 100644
index 0000000..efc9070
--- /dev/null
+++ b/frontend/src/pages/profile.tsx
@@ -0,0 +1,178 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import { ToastContainer, toast } from 'react-toastify';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+
+import CardBox from '../components/CardBox';
+import LayoutAuthenticated from '../layouts/Authenticated';
+import SectionMain from '../components/SectionMain';
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../components/FormField';
+import BaseDivider from '../components/BaseDivider';
+import BaseButtons from '../components/BaseButtons';
+import BaseButton from '../components/BaseButton';
+import FormCheckRadio from '../components/FormCheckRadio';
+import FormCheckRadioGroup from '../components/FormCheckRadioGroup';
+import FormImagePicker from '../components/FormImagePicker';
+import { SwitchField } from '../components/SwitchField';
+import { SelectField } from '../components/SelectField';
+
+import { update, fetch } from '../stores/users/usersSlice';
+import { useAppDispatch, useAppSelector } from '../stores/hooks';
+import { useRouter } from 'next/router';
+import { findMe } from '../stores/authSlice';
+
+const EditUsers = () => {
+  const { currentUser, isFetching, token } = useAppSelector(
+    (state) => state.auth,
+  );
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const notify = (type, msg) => toast(msg, { type });
+  const initVals = {
+    firstName: '',
+    lastName: '',
+    phoneNumber: '',
+    email: '',
+    app_role: '',
+    disabled: false,
+    avatar: [],
+    password: '',
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  useEffect(() => {
+    if (currentUser?.id && typeof currentUser === 'object') {
+      const newInitialVal = { ...initVals };
+
+      Object.keys(initVals).forEach(
+        (el) => (newInitialVal[el] = currentUser[el]),
+      );
+
+      setInitialValues(newInitialVal);
+    }
+  }, [currentUser]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: currentUser.id, data }));
+    await dispatch(findMe());
+    await router.push('/users/users-list');
+    notify('success', 'Profile was updated!');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit profile')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Edit profile'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          {currentUser?.avatar[0]?.publicUrl && (
+            <div className={'grid grid-cols-6 gap-4 mb-4'}>
+              <div className='col-span-1 w-80 h-80 overflow-hidden border-2 rounded-full inline-flex items-center justify-center mb-8'>
+                <img
+                  className='w-80 h-80 max-w-full max-h-full object-cover object-center'
+                  src={`${currentUser?.avatar[0]?.publicUrl}`}
+                  alt='Avatar'
+                />
+              </div>
+            </div>
+          )}
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField>
+                <Field
+                  label='Avatar'
+                  color='info'
+                  icon={mdiUpload}
+                  path={'users/avatar'}
+                  name='avatar'
+                  id='avatar'
+                  schema={{
+                    size: undefined,
+                    formats: undefined,
+                  }}
+                  component={FormImagePicker}
+                ></Field>
+              </FormField>
+              <FormField label='First Name'>
+                <Field name='firstName' placeholder='First Name' />
+              </FormField>
+
+              <FormField label='Last Name'>
+                <Field name='lastName' placeholder='Last Name' />
+              </FormField>
+
+              <FormField label='Phone Number'>
+                <Field name='phoneNumber' placeholder='Phone Number' />
+              </FormField>
+
+              <FormField label='E-Mail'>
+                <Field name='email' placeholder='E-Mail' disabled />
+              </FormField>
+
+              <FormField label='App Role' labelFor='app_role'>
+                <Field
+                  name='app_role'
+                  id='app_role'
+                  component={SelectField}
+                  options={initialValues.app_role}
+                  itemRef={'roles'}
+                  showField={'name'}
+                ></Field>
+              </FormField>
+
+              <FormField label='Disabled' labelFor='disabled'>
+                <Field
+                  name='disabled'
+                  id='disabled'
+                  component={SwitchField}
+                ></Field>
+              </FormField>
+
+              <FormField label='Password'>
+                <Field name='password' placeholder='password' />
+              </FormField>
+
+              <BaseDivider />
+
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/users/users-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditUsers.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
+};
+
+export default EditUsers;
diff --git a/frontend/src/pages/register.tsx b/frontend/src/pages/register.tsx
new file mode 100644
index 0000000..40ab874
--- /dev/null
+++ b/frontend/src/pages/register.tsx
@@ -0,0 +1,88 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import { ToastContainer, toast } from 'react-toastify';
+import Head from 'next/head';
+import BaseButton from '../components/BaseButton';
+import CardBox from '../components/CardBox';
+import SectionFullScreen from '../components/SectionFullScreen';
+import LayoutGuest from '../layouts/Guest';
+import { Field, Form, Formik } from 'formik';
+import FormField from '../components/FormField';
+import BaseDivider from '../components/BaseDivider';
+import BaseButtons from '../components/BaseButtons';
+import { useRouter } from 'next/router';
+import { getPageTitle } from '../config';
+
+import axios from 'axios';
+
+export default function Register() {
+  const [loading, setLoading] = React.useState(false);
+  const router = useRouter();
+  const notify = (type, msg) => toast(msg, { type, position: 'bottom-center' });
+
+  const handleSubmit = async (value) => {
+    setLoading(true);
+    try {
+      const { data: response } = await axios.post('/auth/signup', value);
+      await router.push('/login');
+      setLoading(false);
+      notify('success', 'Please check your email for verification link');
+    } catch (error) {
+      setLoading(false);
+      console.log('error: ', error);
+      notify('error', 'Something was wrong. Try again');
+    }
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Login')}</title>
+      </Head>
+
+      <SectionFullScreen bg='violet'>
+        <CardBox className='w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12'>
+          <Formik
+            initialValues={{
+              email: '',
+              password: '',
+              confirm: '',
+            }}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Email' help='Please enter your email'>
+                <Field type='email' name='email' />
+              </FormField>
+              <FormField label='Password' help='Please enter your password'>
+                <Field type='password' name='password' />
+              </FormField>
+              <FormField
+                label='Confirm Password'
+                help='Please confirm your password'
+              >
+                <Field type='password' name='confirm' />
+              </FormField>
+
+              <BaseDivider />
+
+              <BaseButtons>
+                <BaseButton
+                  type='submit'
+                  label={loading ? 'Loading...' : 'Register'}
+                  color='info'
+                />
+                <BaseButton href={'/login'} label={'Login'} color='info' />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionFullScreen>
+      <ToastContainer />
+    </>
+  );
+}
+
+Register.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutGuest>{page}</LayoutGuest>;
+};
diff --git a/frontend/src/pages/requisitos/[requisitosId].tsx b/frontend/src/pages/requisitos/[requisitosId].tsx
new file mode 100644
index 0000000..6ea5687
--- /dev/null
+++ b/frontend/src/pages/requisitos/[requisitosId].tsx
@@ -0,0 +1,136 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import { update, fetch } from '../../stores/requisitos/requisitosSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditRequisitos = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    documento: '',
+
+    obligatorio: false,
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { requisitos } = useAppSelector((state) => state.requisitos);
+
+  const { requisitosId } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: requisitosId }));
+  }, [requisitosId]);
+
+  useEffect(() => {
+    if (typeof requisitos === 'object') {
+      setInitialValues(requisitos);
+    }
+  }, [requisitos]);
+
+  useEffect(() => {
+    if (typeof requisitos === 'object') {
+      const newInitialVal = { ...initVals };
+
+      Object.keys(initVals).forEach(
+        (el) => (newInitialVal[el] = requisitos[el]),
+      );
+
+      setInitialValues(newInitialVal);
+    }
+  }, [requisitos]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: requisitosId, data }));
+    await router.push('/requisitos/requisitos-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit requisitos')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit requisitos'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='NombredelDocumento'>
+                <Field name='documento' placeholder='NombredelDocumento' />
+              </FormField>
+
+              <FormField label='Obligatorio' labelFor='obligatorio'>
+                <Field
+                  name='obligatorio'
+                  id='obligatorio'
+                  component={SwitchField}
+                ></Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/requisitos/requisitos-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditRequisitos.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_REQUISITOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditRequisitos;
diff --git a/frontend/src/pages/requisitos/requisitos-edit.tsx b/frontend/src/pages/requisitos/requisitos-edit.tsx
new file mode 100644
index 0000000..13886ce
--- /dev/null
+++ b/frontend/src/pages/requisitos/requisitos-edit.tsx
@@ -0,0 +1,134 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import { update, fetch } from '../../stores/requisitos/requisitosSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditRequisitosPage = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    documento: '',
+
+    obligatorio: false,
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { requisitos } = useAppSelector((state) => state.requisitos);
+
+  const { id } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }));
+  }, [id]);
+
+  useEffect(() => {
+    if (typeof requisitos === 'object') {
+      setInitialValues(requisitos);
+    }
+  }, [requisitos]);
+
+  useEffect(() => {
+    if (typeof requisitos === 'object') {
+      const newInitialVal = { ...initVals };
+      Object.keys(initVals).forEach(
+        (el) => (newInitialVal[el] = requisitos[el]),
+      );
+      setInitialValues(newInitialVal);
+    }
+  }, [requisitos]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }));
+    await router.push('/requisitos/requisitos-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit requisitos')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit requisitos'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='NombredelDocumento'>
+                <Field name='documento' placeholder='NombredelDocumento' />
+              </FormField>
+
+              <FormField label='Obligatorio' labelFor='obligatorio'>
+                <Field
+                  name='obligatorio'
+                  id='obligatorio'
+                  component={SwitchField}
+                ></Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/requisitos/requisitos-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditRequisitosPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_REQUISITOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditRequisitosPage;
diff --git a/frontend/src/pages/requisitos/requisitos-list.tsx b/frontend/src/pages/requisitos/requisitos-list.tsx
new file mode 100644
index 0000000..4aa0961
--- /dev/null
+++ b/frontend/src/pages/requisitos/requisitos-list.tsx
@@ -0,0 +1,168 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TableRequisitos from '../../components/Requisitos/TableRequisitos';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import { setRefetch, uploadCsv } from '../../stores/requisitos/requisitosSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const RequisitosTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([
+    { label: 'NombredelDocumento', title: 'documento' },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_REQUISITOS');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getRequisitosCSV = async () => {
+    const response = await axios({
+      url: '/requisitos?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'requisitosCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Requisitos')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Requisitos'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/requisitos/requisitos-new'}
+              color='info'
+              label='New Item'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getRequisitosCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <Link href={'/requisitos/requisitos-table'}>Switch to Table</Link>
+          </div>
+        </CardBox>
+
+        <CardBox className='mb-6' hasTable>
+          <TableRequisitos
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+RequisitosTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_REQUISITOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default RequisitosTablesPage;
diff --git a/frontend/src/pages/requisitos/requisitos-new.tsx b/frontend/src/pages/requisitos/requisitos-new.tsx
new file mode 100644
index 0000000..c690e14
--- /dev/null
+++ b/frontend/src/pages/requisitos/requisitos-new.tsx
@@ -0,0 +1,108 @@
+import {
+  mdiAccount,
+  mdiChartTimelineVariant,
+  mdiMail,
+  mdiUpload,
+} from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SwitchField } from '../../components/SwitchField';
+
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { RichTextField } from '../../components/RichTextField';
+
+import { create } from '../../stores/requisitos/requisitosSlice';
+import { useAppDispatch } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import moment from 'moment';
+
+const initialValues = {
+  documento: '',
+
+  obligatorio: false,
+};
+
+const RequisitosNew = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data));
+    await router.push('/requisitos/requisitos-list');
+  };
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='New Item'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='NombredelDocumento'>
+                <Field name='documento' placeholder='NombredelDocumento' />
+              </FormField>
+
+              <FormField label='Obligatorio' labelFor='obligatorio'>
+                <Field
+                  name='obligatorio'
+                  id='obligatorio'
+                  component={SwitchField}
+                ></Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/requisitos/requisitos-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+RequisitosNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'CREATE_REQUISITOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default RequisitosNew;
diff --git a/frontend/src/pages/requisitos/requisitos-table.tsx b/frontend/src/pages/requisitos/requisitos-table.tsx
new file mode 100644
index 0000000..e448512
--- /dev/null
+++ b/frontend/src/pages/requisitos/requisitos-table.tsx
@@ -0,0 +1,167 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TableRequisitos from '../../components/Requisitos/TableRequisitos';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import { setRefetch, uploadCsv } from '../../stores/requisitos/requisitosSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const RequisitosTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([
+    { label: 'NombredelDocumento', title: 'documento' },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_REQUISITOS');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getRequisitosCSV = async () => {
+    const response = await axios({
+      url: '/requisitos?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'requisitosCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Requisitos')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Requisitos'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/requisitos/requisitos-new'}
+              color='info'
+              label='New Item'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getRequisitosCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+
+            <Link href={'/requisitos/requisitos-list'}>
+              Back to <span className='capitalize'>list</span>
+            </Link>
+          </div>
+        </CardBox>
+        <CardBox className='mb-6' hasTable>
+          <TableRequisitos
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+RequisitosTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_REQUISITOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default RequisitosTablesPage;
diff --git a/frontend/src/pages/requisitos/requisitos-view.tsx b/frontend/src/pages/requisitos/requisitos-view.tsx
new file mode 100644
index 0000000..f091f02
--- /dev/null
+++ b/frontend/src/pages/requisitos/requisitos-view.tsx
@@ -0,0 +1,142 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { fetch } from '../../stores/requisitos/requisitosSlice';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import { getPageTitle } from '../../config';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import SectionMain from '../../components/SectionMain';
+import CardBox from '../../components/CardBox';
+import BaseButton from '../../components/BaseButton';
+import BaseDivider from '../../components/BaseDivider';
+import { mdiChartTimelineVariant } from '@mdi/js';
+import { SwitchField } from '../../components/SwitchField';
+import FormField from '../../components/FormField';
+
+const RequisitosView = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const { requisitos } = useAppSelector((state) => state.requisitos);
+
+  const { id } = router.query;
+
+  function removeLastCharacter(str) {
+    console.log(str, `str`);
+    return str.slice(0, -1);
+  }
+
+  useEffect(() => {
+    dispatch(fetch({ id }));
+  }, [dispatch, id]);
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('View requisitos')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={removeLastCharacter('View requisitos')}
+          main
+        >
+          <BaseButton
+            color='info'
+            label='Edit'
+            href={`/requisitos/requisitos-edit/?id=${id}`}
+          />
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>NombredelDocumento</p>
+            <p>{requisitos?.documento}</p>
+          </div>
+
+          <FormField label='Obligatorio'>
+            <SwitchField
+              field={{ name: 'obligatorio', value: requisitos?.obligatorio }}
+              form={{ setFieldValue: () => null }}
+              disabled
+            />
+          </FormField>
+
+          <>
+            <p className={'block font-bold mb-2'}>Documentos Requisito</p>
+            <CardBox
+              className='mb-6 border border-gray-300 rounded overflow-hidden'
+              hasTable
+            >
+              <div className='overflow-x-auto'>
+                <table>
+                  <thead>
+                    <tr>
+                      <th>RutadelArchivo</th>
+
+                      <th>EstadodelDocumento</th>
+
+                      <th>FechadeSubida</th>
+
+                      <th>VersióndelDocumento</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {requisitos.documentos_requisito &&
+                      Array.isArray(requisitos.documentos_requisito) &&
+                      requisitos.documentos_requisito.map((item: any) => (
+                        <tr
+                          key={item.id}
+                          onClick={() =>
+                            router.push(
+                              `/documentos/documentos-view/?id=${item.id}`,
+                            )
+                          }
+                        >
+                          <td data-label='archivo'>{item.archivo}</td>
+
+                          <td data-label='estatus'>{item.estatus}</td>
+
+                          <td data-label='fecha_subida'>
+                            {dataFormatter.dateTimeFormatter(item.fecha_subida)}
+                          </td>
+
+                          <td data-label='version'>{item.version}</td>
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
+              </div>
+              {!requisitos?.documentos_requisito?.length && (
+                <div className={'text-center py-4'}>No data</div>
+              )}
+            </CardBox>
+          </>
+
+          <BaseDivider />
+
+          <BaseButton
+            color='info'
+            label='Back'
+            onClick={() => router.push('/requisitos/requisitos-list')}
+          />
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+RequisitosView.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_REQUISITOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default RequisitosView;
diff --git a/frontend/src/pages/roles/[rolesId].tsx b/frontend/src/pages/roles/[rolesId].tsx
new file mode 100644
index 0000000..3918191
--- /dev/null
+++ b/frontend/src/pages/roles/[rolesId].tsx
@@ -0,0 +1,137 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import { update, fetch } from '../../stores/roles/rolesSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditRoles = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    name: '',
+
+    permissions: [],
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { roles } = useAppSelector((state) => state.roles);
+
+  const { rolesId } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: rolesId }));
+  }, [rolesId]);
+
+  useEffect(() => {
+    if (typeof roles === 'object') {
+      setInitialValues(roles);
+    }
+  }, [roles]);
+
+  useEffect(() => {
+    if (typeof roles === 'object') {
+      const newInitialVal = { ...initVals };
+
+      Object.keys(initVals).forEach((el) => (newInitialVal[el] = roles[el]));
+
+      setInitialValues(newInitialVal);
+    }
+  }, [roles]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: rolesId, data }));
+    await router.push('/roles/roles-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit roles')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit roles'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Name'>
+                <Field name='name' placeholder='Name' />
+              </FormField>
+
+              <FormField label='Permissions' labelFor='permissions'>
+                <Field
+                  name='permissions'
+                  id='permissions'
+                  component={SelectFieldMany}
+                  options={initialValues.permissions}
+                  itemRef={'permissions'}
+                  showField={'name'}
+                ></Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/roles/roles-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditRoles.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_ROLES'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditRoles;
diff --git a/frontend/src/pages/roles/roles-edit.tsx b/frontend/src/pages/roles/roles-edit.tsx
new file mode 100644
index 0000000..88500cd
--- /dev/null
+++ b/frontend/src/pages/roles/roles-edit.tsx
@@ -0,0 +1,135 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import { update, fetch } from '../../stores/roles/rolesSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditRolesPage = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    name: '',
+
+    permissions: [],
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { roles } = useAppSelector((state) => state.roles);
+
+  const { id } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }));
+  }, [id]);
+
+  useEffect(() => {
+    if (typeof roles === 'object') {
+      setInitialValues(roles);
+    }
+  }, [roles]);
+
+  useEffect(() => {
+    if (typeof roles === 'object') {
+      const newInitialVal = { ...initVals };
+      Object.keys(initVals).forEach((el) => (newInitialVal[el] = roles[el]));
+      setInitialValues(newInitialVal);
+    }
+  }, [roles]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }));
+    await router.push('/roles/roles-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit roles')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit roles'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Name'>
+                <Field name='name' placeholder='Name' />
+              </FormField>
+
+              <FormField label='Permissions' labelFor='permissions'>
+                <Field
+                  name='permissions'
+                  id='permissions'
+                  component={SelectFieldMany}
+                  options={initialValues.permissions}
+                  itemRef={'permissions'}
+                  showField={'name'}
+                ></Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/roles/roles-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditRolesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_ROLES'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditRolesPage;
diff --git a/frontend/src/pages/roles/roles-list.tsx b/frontend/src/pages/roles/roles-list.tsx
new file mode 100644
index 0000000..5c07566
--- /dev/null
+++ b/frontend/src/pages/roles/roles-list.tsx
@@ -0,0 +1,164 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TableRoles from '../../components/Roles/TableRoles';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import { setRefetch, uploadCsv } from '../../stores/roles/rolesSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const RolesTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([
+    { label: 'Name', title: 'name' },
+
+    { label: 'Permissions', title: 'permissions' },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_ROLES');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getRolesCSV = async () => {
+    const response = await axios({
+      url: '/roles?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'rolesCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Roles')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Roles'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/roles/roles-new'}
+              color='info'
+              label='New Item'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getRolesCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>
+        </CardBox>
+
+        <CardBox className='mb-6' hasTable>
+          <TableRoles
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+RolesTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_ROLES'}>{page}</LayoutAuthenticated>
+  );
+};
+
+export default RolesTablesPage;
diff --git a/frontend/src/pages/roles/roles-new.tsx b/frontend/src/pages/roles/roles-new.tsx
new file mode 100644
index 0000000..1c068c1
--- /dev/null
+++ b/frontend/src/pages/roles/roles-new.tsx
@@ -0,0 +1,110 @@
+import {
+  mdiAccount,
+  mdiChartTimelineVariant,
+  mdiMail,
+  mdiUpload,
+} from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SwitchField } from '../../components/SwitchField';
+
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { RichTextField } from '../../components/RichTextField';
+
+import { create } from '../../stores/roles/rolesSlice';
+import { useAppDispatch } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import moment from 'moment';
+
+const initialValues = {
+  name: '',
+
+  permissions: [],
+};
+
+const RolesNew = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data));
+    await router.push('/roles/roles-list');
+  };
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='New Item'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='Name'>
+                <Field name='name' placeholder='Name' />
+              </FormField>
+
+              <FormField label='Permissions' labelFor='permissions'>
+                <Field
+                  name='permissions'
+                  id='permissions'
+                  itemRef={'permissions'}
+                  options={[]}
+                  component={SelectFieldMany}
+                ></Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/roles/roles-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+RolesNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'CREATE_ROLES'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default RolesNew;
diff --git a/frontend/src/pages/roles/roles-table.tsx b/frontend/src/pages/roles/roles-table.tsx
new file mode 100644
index 0000000..380cca9
--- /dev/null
+++ b/frontend/src/pages/roles/roles-table.tsx
@@ -0,0 +1,163 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TableRoles from '../../components/Roles/TableRoles';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import { setRefetch, uploadCsv } from '../../stores/roles/rolesSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const RolesTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([
+    { label: 'Name', title: 'name' },
+
+    { label: 'Permissions', title: 'permissions' },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_ROLES');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getRolesCSV = async () => {
+    const response = await axios({
+      url: '/roles?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'rolesCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Roles')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Roles'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/roles/roles-new'}
+              color='info'
+              label='New Item'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getRolesCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>
+        </CardBox>
+        <CardBox className='mb-6' hasTable>
+          <TableRoles
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+RolesTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_ROLES'}>{page}</LayoutAuthenticated>
+  );
+};
+
+export default RolesTablesPage;
diff --git a/frontend/src/pages/roles/roles-view.tsx b/frontend/src/pages/roles/roles-view.tsx
new file mode 100644
index 0000000..b7368ff
--- /dev/null
+++ b/frontend/src/pages/roles/roles-view.tsx
@@ -0,0 +1,171 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { fetch } from '../../stores/roles/rolesSlice';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import { getPageTitle } from '../../config';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import SectionMain from '../../components/SectionMain';
+import CardBox from '../../components/CardBox';
+import BaseButton from '../../components/BaseButton';
+import BaseDivider from '../../components/BaseDivider';
+import { mdiChartTimelineVariant } from '@mdi/js';
+import { SwitchField } from '../../components/SwitchField';
+import FormField from '../../components/FormField';
+
+const RolesView = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const { roles } = useAppSelector((state) => state.roles);
+
+  const { id } = router.query;
+
+  function removeLastCharacter(str) {
+    console.log(str, `str`);
+    return str.slice(0, -1);
+  }
+
+  useEffect(() => {
+    dispatch(fetch({ id }));
+  }, [dispatch, id]);
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('View roles')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={removeLastCharacter('View roles')}
+          main
+        >
+          <BaseButton
+            color='info'
+            label='Edit'
+            href={`/roles/roles-edit/?id=${id}`}
+          />
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Name</p>
+            <p>{roles?.name}</p>
+          </div>
+
+          <>
+            <p className={'block font-bold mb-2'}>Permissions</p>
+            <CardBox
+              className='mb-6 border border-gray-300 rounded overflow-hidden'
+              hasTable
+            >
+              <div className='overflow-x-auto'>
+                <table>
+                  <thead>
+                    <tr>
+                      <th>Name</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {roles.permissions &&
+                      Array.isArray(roles.permissions) &&
+                      roles.permissions.map((item: any) => (
+                        <tr
+                          key={item.id}
+                          onClick={() =>
+                            router.push(
+                              `/permissions/permissions-view/?id=${item.id}`,
+                            )
+                          }
+                        >
+                          <td data-label='name'>{item.name}</td>
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
+              </div>
+              {!roles?.permissions?.length && (
+                <div className={'text-center py-4'}>No data</div>
+              )}
+            </CardBox>
+          </>
+
+          <>
+            <p className={'block font-bold mb-2'}>Users App Role</p>
+            <CardBox
+              className='mb-6 border border-gray-300 rounded overflow-hidden'
+              hasTable
+            >
+              <div className='overflow-x-auto'>
+                <table>
+                  <thead>
+                    <tr>
+                      <th>First Name</th>
+
+                      <th>Last Name</th>
+
+                      <th>Phone Number</th>
+
+                      <th>E-Mail</th>
+
+                      <th>Disabled</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {roles.users_app_role &&
+                      Array.isArray(roles.users_app_role) &&
+                      roles.users_app_role.map((item: any) => (
+                        <tr
+                          key={item.id}
+                          onClick={() =>
+                            router.push(`/users/users-view/?id=${item.id}`)
+                          }
+                        >
+                          <td data-label='firstName'>{item.firstName}</td>
+
+                          <td data-label='lastName'>{item.lastName}</td>
+
+                          <td data-label='phoneNumber'>{item.phoneNumber}</td>
+
+                          <td data-label='email'>{item.email}</td>
+
+                          <td data-label='disabled'>
+                            {dataFormatter.booleanFormatter(item.disabled)}
+                          </td>
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
+              </div>
+              {!roles?.users_app_role?.length && (
+                <div className={'text-center py-4'}>No data</div>
+              )}
+            </CardBox>
+          </>
+
+          <BaseDivider />
+
+          <BaseButton
+            color='info'
+            label='Back'
+            onClick={() => router.push('/roles/roles-list')}
+          />
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+RolesView.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_ROLES'}>{page}</LayoutAuthenticated>
+  );
+};
+
+export default RolesView;
diff --git a/frontend/src/pages/search.tsx b/frontend/src/pages/search.tsx
new file mode 100644
index 0000000..f64cd5c
--- /dev/null
+++ b/frontend/src/pages/search.tsx
@@ -0,0 +1,93 @@
+import React, { ReactElement, useEffect, useState } from 'react';
+import Head from 'next/head';
+import 'react-datepicker/dist/react-datepicker.css';
+import { useAppDispatch } from '../stores/hooks';
+
+import { useRouter } from 'next/router';
+import LayoutAuthenticated from '../layouts/Authenticated';
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
+import SectionMain from '../components/SectionMain';
+import CardBox from '../components/CardBox';
+import SearchResults from '../components/SearchResults';
+import LoadingSpinner from '../components/LoadingSpinner';
+import BaseButton from '../components/BaseButton';
+import BaseDivider from '../components/BaseDivider';
+import { mdiChartTimelineVariant } from '@mdi/js';
+import { createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+
+const SearchView = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const searchQuery = router.query.query;
+  const [loading, setLoading] = useState(false);
+  const [searchResults, setSearchResults] = useState([]);
+
+  useEffect(() => {
+    dispatch(fetchData());
+  }, [dispatch, searchQuery]);
+
+  const fetchData = createAsyncThunk('/search', async () => {
+    setLoading(true);
+    try {
+      const response = await axios.post('/search', { searchQuery });
+      setSearchResults(response.data);
+      setLoading(false);
+      return response.data;
+    } catch (error) {
+      console.error(error.response);
+      setLoading(false);
+      throw error;
+    }
+  });
+
+  const groupedResults = searchResults.reduce((acc, item) => {
+    const { tableName } = item;
+    acc[tableName] = acc[tableName] || [];
+    acc[tableName].push(item);
+    return acc;
+  }, {});
+
+  return (
+    <>
+      <Head>
+        <title>Search Result</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Search Result'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          {loading ? (
+            <LoadingSpinner />
+          ) : (
+            <SearchResults
+              searchResults={groupedResults}
+              searchQuery={searchQuery}
+            />
+          )}
+          <BaseDivider />
+          <BaseButton
+            color='info'
+            label='Back'
+            onClick={() => router.push('/dashboard')}
+          />
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+SearchView.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'CREATE_SEARCH'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default SearchView;
diff --git a/frontend/src/pages/tables.tsx b/frontend/src/pages/tables.tsx
new file mode 100644
index 0000000..626dc0e
--- /dev/null
+++ b/frontend/src/pages/tables.tsx
@@ -0,0 +1,37 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement } from 'react';
+import CardBox from '../components/CardBox';
+import LayoutAuthenticated from '../layouts/Authenticated';
+import SectionMain from '../components/SectionMain';
+import SectionTitleLineWithButton from '../components/SectionTitleLineWithButton';
+import TableSampleClients from '../components/TableSampleClients';
+import { getPageTitle } from '../config';
+
+const TablesPage = () => {
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Tables')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Table'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' hasTable>
+          <TableSampleClients />
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+TablesPage.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutAuthenticated>{page}</LayoutAuthenticated>;
+};
+
+export default TablesPage;
diff --git a/frontend/src/pages/terms-of-use.tsx b/frontend/src/pages/terms-of-use.tsx
new file mode 100644
index 0000000..90e92d1
--- /dev/null
+++ b/frontend/src/pages/terms-of-use.tsx
@@ -0,0 +1,205 @@
+import React, { useEffect, useState } from 'react';
+import type { ReactElement } from 'react';
+import Head from 'next/head';
+import LayoutGuest from '../layouts/Guest';
+import { getPageTitle } from '../config';
+
+export default function PrivacyPolicy() {
+  const title = 'CtrlE';
+  const [projectUrl, setProjectUrl] = useState('');
+
+  useEffect(() => {
+    setProjectUrl(location.origin);
+  }, []);
+
+  const Information = () => {
+    return (
+      <>
+        <h3>1. Acceptance of Terms</h3>
+        <div className=''>
+          <p>
+            By accessing and using our application, you agree to comply with and
+            be bound by these Terms of Use. If you do not agree to these terms,
+            please do not use the application.
+          </p>
+        </div>
+      </>
+    );
+  };
+
+  const ChangesTerms = () => {
+    return (
+      <>
+        <h3>2. Changes to Terms</h3>
+        <p>
+          We reserve the right to modify these Terms of Use at any time. Any
+          changes will be effective immediately upon posting. Your continued use
+          of the application after any such changes constitutes your acceptance
+          of the new terms.
+        </p>
+      </>
+    );
+  };
+
+  const UseApplication = () => {
+    return (
+      <>
+        <h3>3. Use of the Application</h3>
+        <p>
+          You agree to use the application only for lawful purposes and in a way
+          that does not infringe the rights of, restrict, or inhibit anyone
+          else’s use and enjoyment of the application. Prohibited behavior
+          includes harassing or causing distress or inconvenience to any other
+          user, transmitting obscene or offensive content, or disrupting the
+          normal flow of dialogue within the application.
+        </p>
+      </>
+    );
+  };
+
+  const IntellectualProperty = () => {
+    return (
+      <>
+        <h3>4. Intellectual Property</h3>
+        <p>
+          All content included on the application, such as text, graphics,
+          logos, images, and software, is the property of {title} or its content
+          suppliers and protected by international copyright laws. Unauthorized
+          use of the content may violate copyright, trademark, and other laws.
+        </p>
+      </>
+    );
+  };
+
+  const UserContent = () => {
+    return (
+      <>
+        <h3>5. User Content</h3>
+        <p>
+          You are responsible for any content you upload, post, or otherwise
+          make available through the application. You grant {title}a worldwide,
+          irrevocable, non-exclusive, royalty-free license to use, reproduce,
+          modify, publish, and distribute such content for any purpose.
+        </p>
+      </>
+    );
+  };
+
+  const Privacy = () => {
+    return (
+      <>
+        <h3>6. Privacy</h3>
+        <p>
+          Your privacy is important to us. Please review our Privacy Policy to
+          understand our practices regarding the collection, use, and disclosure
+          of your personal information.
+        </p>
+      </>
+    );
+  };
+
+  const Liability = () => {
+    return (
+      <>
+        <h3>7. Limitation of Liability</h3>
+        <p>
+          The application is provided “as is” and “as available” without any
+          warranties of any kind, either express or implied. {title}
+          does not warrant that the application will be uninterrupted or
+          error-free. In no event shall {title} be liable for any damages
+          arising out of your use of the application.
+        </p>
+      </>
+    );
+  };
+
+  const Indemnification = () => {
+    return (
+      <>
+        <h3>8. Indemnification</h3>
+        <p>
+          You agree to indemnify, defend, and hold harmless {title}, its
+          officers, directors, employees, and agents from and against any
+          claims, liabilities, damages, losses, and expenses, including without
+          limitation reasonable legal and accounting fees, arising out of or in
+          any way connected with your access to or use of the application or
+          your violation of these Terms of Use.
+        </p>
+      </>
+    );
+  };
+
+  const Termination = () => {
+    return (
+      <>
+        <h3>9. Termination</h3>
+        <p>
+          We reserve the right to terminate or suspend your access to the
+          application at our sole discretion, without notice and without
+          liability, for any reason, including if we believe you have violated
+          these Terms of Use.
+        </p>
+      </>
+    );
+  };
+
+  const GoverningLaw = () => {
+    return (
+      <>
+        <h3>10. Governing Law</h3>
+        <p>
+          These Terms of Use are governed by and interpreted in accordance with
+          applicable laws, without regard to any conflict of law principles. You
+          agree to submit to the exclusive jurisdiction of the courts that have
+          authority to resolve any dispute arising from the use of the
+          application.
+        </p>
+      </>
+    );
+  };
+
+  const ContactUs = () => {
+    return (
+      <>
+        <h3>11. Contact Information</h3>
+        <p>
+          If you have any questions about these Terms of Use, please contact us
+          at:{' '}
+          <a href='mailto:support@flatlogic.com'> [support@flatlogic.com]</a>
+        </p>
+      </>
+    );
+  };
+
+  return (
+    <div className='prose prose-slate mx-auto max-w-none'>
+      <Head>
+        <title>{getPageTitle('Terms of Use')}</title>
+      </Head>
+
+      <div className='flex justify-center'>
+        <div className='z-10 md:w-10/12 my-4 bg-white border border-pavitra-400 rounded'>
+          <div className='p-8 lg:px-12 lg:py-10'>
+            <h1>Terms of Use</h1>
+
+            <Information />
+            <ChangesTerms />
+            <UseApplication />
+            <IntellectualProperty />
+            <UserContent />
+            <Privacy />
+            <Liability />
+            <Indemnification />
+            <Termination />
+            <GoverningLaw />
+            <ContactUs />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+PrivacyPolicy.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutGuest>{page}</LayoutGuest>;
+};
diff --git a/frontend/src/pages/users/[usersId].tsx b/frontend/src/pages/users/[usersId].tsx
new file mode 100644
index 0000000..e16077f
--- /dev/null
+++ b/frontend/src/pages/users/[usersId].tsx
@@ -0,0 +1,205 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import { update, fetch } from '../../stores/users/usersSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditUsers = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    firstName: '',
+
+    lastName: '',
+
+    phoneNumber: '',
+
+    email: '',
+
+    disabled: false,
+
+    avatar: [],
+
+    app_role: null,
+
+    custom_permissions: [],
+
+    password: '',
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { users } = useAppSelector((state) => state.users);
+
+  const { usersId } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: usersId }));
+  }, [usersId]);
+
+  useEffect(() => {
+    if (typeof users === 'object') {
+      setInitialValues(users);
+    }
+  }, [users]);
+
+  useEffect(() => {
+    if (typeof users === 'object') {
+      const newInitialVal = { ...initVals };
+
+      Object.keys(initVals).forEach((el) => (newInitialVal[el] = users[el]));
+
+      setInitialValues(newInitialVal);
+    }
+  }, [users]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: usersId, data }));
+    await router.push('/users/users-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit users')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit users'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='First Name'>
+                <Field name='firstName' placeholder='First Name' />
+              </FormField>
+
+              <FormField label='Last Name'>
+                <Field name='lastName' placeholder='Last Name' />
+              </FormField>
+
+              <FormField label='Phone Number'>
+                <Field name='phoneNumber' placeholder='Phone Number' />
+              </FormField>
+
+              <FormField label='E-Mail'>
+                <Field name='email' placeholder='E-Mail' />
+              </FormField>
+
+              <FormField label='Disabled' labelFor='disabled'>
+                <Field
+                  name='disabled'
+                  id='disabled'
+                  component={SwitchField}
+                ></Field>
+              </FormField>
+
+              <FormField>
+                <Field
+                  label='Avatar'
+                  color='info'
+                  icon={mdiUpload}
+                  path={'users/avatar'}
+                  name='avatar'
+                  id='avatar'
+                  schema={{
+                    size: undefined,
+                    formats: undefined,
+                  }}
+                  component={FormImagePicker}
+                ></Field>
+              </FormField>
+
+              <FormField label='App Role' labelFor='app_role'>
+                <Field
+                  name='app_role'
+                  id='app_role'
+                  component={SelectField}
+                  options={initialValues.app_role}
+                  itemRef={'roles'}
+                  showField={'name'}
+                ></Field>
+              </FormField>
+
+              <FormField
+                label='Custom Permissions'
+                labelFor='custom_permissions'
+              >
+                <Field
+                  name='custom_permissions'
+                  id='custom_permissions'
+                  component={SelectFieldMany}
+                  options={initialValues.custom_permissions}
+                  itemRef={'permissions'}
+                  showField={'name'}
+                ></Field>
+              </FormField>
+
+              <FormField label='Password'>
+                <Field name='password' placeholder='password' />
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/users/users-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditUsers.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_USERS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditUsers;
diff --git a/frontend/src/pages/users/users-edit.tsx b/frontend/src/pages/users/users-edit.tsx
new file mode 100644
index 0000000..87d7090
--- /dev/null
+++ b/frontend/src/pages/users/users-edit.tsx
@@ -0,0 +1,203 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import { update, fetch } from '../../stores/users/usersSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditUsersPage = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    firstName: '',
+
+    lastName: '',
+
+    phoneNumber: '',
+
+    email: '',
+
+    disabled: false,
+
+    avatar: [],
+
+    app_role: null,
+
+    custom_permissions: [],
+
+    password: '',
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { users } = useAppSelector((state) => state.users);
+
+  const { id } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }));
+  }, [id]);
+
+  useEffect(() => {
+    if (typeof users === 'object') {
+      setInitialValues(users);
+    }
+  }, [users]);
+
+  useEffect(() => {
+    if (typeof users === 'object') {
+      const newInitialVal = { ...initVals };
+      Object.keys(initVals).forEach((el) => (newInitialVal[el] = users[el]));
+      setInitialValues(newInitialVal);
+    }
+  }, [users]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }));
+    await router.push('/users/users-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit users')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit users'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='First Name'>
+                <Field name='firstName' placeholder='First Name' />
+              </FormField>
+
+              <FormField label='Last Name'>
+                <Field name='lastName' placeholder='Last Name' />
+              </FormField>
+
+              <FormField label='Phone Number'>
+                <Field name='phoneNumber' placeholder='Phone Number' />
+              </FormField>
+
+              <FormField label='E-Mail'>
+                <Field name='email' placeholder='E-Mail' />
+              </FormField>
+
+              <FormField label='Disabled' labelFor='disabled'>
+                <Field
+                  name='disabled'
+                  id='disabled'
+                  component={SwitchField}
+                ></Field>
+              </FormField>
+
+              <FormField>
+                <Field
+                  label='Avatar'
+                  color='info'
+                  icon={mdiUpload}
+                  path={'users/avatar'}
+                  name='avatar'
+                  id='avatar'
+                  schema={{
+                    size: undefined,
+                    formats: undefined,
+                  }}
+                  component={FormImagePicker}
+                ></Field>
+              </FormField>
+
+              <FormField label='App Role' labelFor='app_role'>
+                <Field
+                  name='app_role'
+                  id='app_role'
+                  component={SelectField}
+                  options={initialValues.app_role}
+                  itemRef={'roles'}
+                  showField={'name'}
+                ></Field>
+              </FormField>
+
+              <FormField
+                label='Custom Permissions'
+                labelFor='custom_permissions'
+              >
+                <Field
+                  name='custom_permissions'
+                  id='custom_permissions'
+                  component={SelectFieldMany}
+                  options={initialValues.custom_permissions}
+                  itemRef={'permissions'}
+                  showField={'name'}
+                ></Field>
+              </FormField>
+
+              <FormField label='Password'>
+                <Field name='password' placeholder='password' />
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/users/users-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditUsersPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_USERS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditUsersPage;
diff --git a/frontend/src/pages/users/users-list.tsx b/frontend/src/pages/users/users-list.tsx
new file mode 100644
index 0000000..6d03ebc
--- /dev/null
+++ b/frontend/src/pages/users/users-list.tsx
@@ -0,0 +1,173 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TableUsers from '../../components/Users/TableUsers';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import { setRefetch, uploadCsv } from '../../stores/users/usersSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const UsersTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([
+    { label: 'First Name', title: 'firstName' },
+    { label: 'Last Name', title: 'lastName' },
+    { label: 'Phone Number', title: 'phoneNumber' },
+    { label: 'E-Mail', title: 'email' },
+
+    { label: 'App Role', title: 'app_role' },
+
+    { label: 'Custom Permissions', title: 'custom_permissions' },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_USERS');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getUsersCSV = async () => {
+    const response = await axios({
+      url: '/users?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'usersCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Users')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Users'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox
+          id='usersList'
+          className='mb-6'
+          cardBoxClassName='flex flex-wrap'
+        >
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/users/users-new'}
+              color='info'
+              label='Add/Invite User'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getUsersCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>
+        </CardBox>
+
+        <CardBox className='mb-6' hasTable>
+          <TableUsers
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+UsersTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_USERS'}>{page}</LayoutAuthenticated>
+  );
+};
+
+export default UsersTablesPage;
diff --git a/frontend/src/pages/users/users-new.tsx b/frontend/src/pages/users/users-new.tsx
new file mode 100644
index 0000000..4f3fa45
--- /dev/null
+++ b/frontend/src/pages/users/users-new.tsx
@@ -0,0 +1,171 @@
+import {
+  mdiAccount,
+  mdiChartTimelineVariant,
+  mdiMail,
+  mdiUpload,
+} from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SwitchField } from '../../components/SwitchField';
+
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { RichTextField } from '../../components/RichTextField';
+
+import { create } from '../../stores/users/usersSlice';
+import { useAppDispatch } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import moment from 'moment';
+
+const initialValues = {
+  firstName: '',
+
+  lastName: '',
+
+  phoneNumber: '',
+
+  email: '',
+
+  disabled: false,
+
+  avatar: [],
+
+  app_role: '',
+
+  custom_permissions: [],
+};
+
+const UsersNew = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data));
+    await router.push('/users/users-list');
+  };
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='New Item'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='First Name'>
+                <Field name='firstName' placeholder='First Name' />
+              </FormField>
+
+              <FormField label='Last Name'>
+                <Field name='lastName' placeholder='Last Name' />
+              </FormField>
+
+              <FormField label='Phone Number'>
+                <Field name='phoneNumber' placeholder='Phone Number' />
+              </FormField>
+
+              <FormField label='E-Mail'>
+                <Field name='email' placeholder='E-Mail' />
+              </FormField>
+
+              <FormField label='Disabled' labelFor='disabled'>
+                <Field
+                  name='disabled'
+                  id='disabled'
+                  component={SwitchField}
+                ></Field>
+              </FormField>
+
+              <FormField>
+                <Field
+                  label='Avatar'
+                  color='info'
+                  icon={mdiUpload}
+                  path={'users/avatar'}
+                  name='avatar'
+                  id='avatar'
+                  schema={{
+                    size: undefined,
+                    formats: undefined,
+                  }}
+                  component={FormImagePicker}
+                ></Field>
+              </FormField>
+
+              <FormField label='App Role' labelFor='app_role'>
+                <Field
+                  name='app_role'
+                  id='app_role'
+                  component={SelectField}
+                  options={[]}
+                  itemRef={'roles'}
+                ></Field>
+              </FormField>
+
+              <FormField
+                label='Custom Permissions'
+                labelFor='custom_permissions'
+              >
+                <Field
+                  name='custom_permissions'
+                  id='custom_permissions'
+                  itemRef={'permissions'}
+                  options={[]}
+                  component={SelectFieldMany}
+                ></Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/users/users-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+UsersNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'CREATE_USERS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default UsersNew;
diff --git a/frontend/src/pages/users/users-table.tsx b/frontend/src/pages/users/users-table.tsx
new file mode 100644
index 0000000..a408cd6
--- /dev/null
+++ b/frontend/src/pages/users/users-table.tsx
@@ -0,0 +1,168 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TableUsers from '../../components/Users/TableUsers';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import { setRefetch, uploadCsv } from '../../stores/users/usersSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const UsersTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([
+    { label: 'First Name', title: 'firstName' },
+    { label: 'Last Name', title: 'lastName' },
+    { label: 'Phone Number', title: 'phoneNumber' },
+    { label: 'E-Mail', title: 'email' },
+
+    { label: 'App Role', title: 'app_role' },
+
+    { label: 'Custom Permissions', title: 'custom_permissions' },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_USERS');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getUsersCSV = async () => {
+    const response = await axios({
+      url: '/users?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'usersCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Users')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Users'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/users/users-new'}
+              color='info'
+              label='Add/Invite User'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getUsersCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>
+        </CardBox>
+        <CardBox className='mb-6' hasTable>
+          <TableUsers
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+UsersTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_USERS'}>{page}</LayoutAuthenticated>
+  );
+};
+
+export default UsersTablesPage;
diff --git a/frontend/src/pages/users/users-view.tsx b/frontend/src/pages/users/users-view.tsx
new file mode 100644
index 0000000..ce0851d
--- /dev/null
+++ b/frontend/src/pages/users/users-view.tsx
@@ -0,0 +1,160 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { fetch } from '../../stores/users/usersSlice';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import { getPageTitle } from '../../config';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import SectionMain from '../../components/SectionMain';
+import CardBox from '../../components/CardBox';
+import BaseButton from '../../components/BaseButton';
+import BaseDivider from '../../components/BaseDivider';
+import { mdiChartTimelineVariant } from '@mdi/js';
+import { SwitchField } from '../../components/SwitchField';
+import FormField from '../../components/FormField';
+
+const UsersView = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const { users } = useAppSelector((state) => state.users);
+
+  const { id } = router.query;
+
+  function removeLastCharacter(str) {
+    console.log(str, `str`);
+    return str.slice(0, -1);
+  }
+
+  useEffect(() => {
+    dispatch(fetch({ id }));
+  }, [dispatch, id]);
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('View users')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={removeLastCharacter('View users')}
+          main
+        >
+          <BaseButton
+            color='info'
+            label='Edit'
+            href={`/users/users-edit/?id=${id}`}
+          />
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>First Name</p>
+            <p>{users?.firstName}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Last Name</p>
+            <p>{users?.lastName}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Phone Number</p>
+            <p>{users?.phoneNumber}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>E-Mail</p>
+            <p>{users?.email}</p>
+          </div>
+
+          <FormField label='Disabled'>
+            <SwitchField
+              field={{ name: 'disabled', value: users?.disabled }}
+              form={{ setFieldValue: () => null }}
+              disabled
+            />
+          </FormField>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>Avatar</p>
+            {users?.avatar?.length ? (
+              <ImageField
+                name={'avatar'}
+                image={users?.avatar}
+                className='w-20 h-20'
+              />
+            ) : (
+              <p>No Avatar</p>
+            )}
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>App Role</p>
+
+            <p>{users?.app_role?.name ?? 'No data'}</p>
+          </div>
+
+          <>
+            <p className={'block font-bold mb-2'}>Custom Permissions</p>
+            <CardBox
+              className='mb-6 border border-gray-300 rounded overflow-hidden'
+              hasTable
+            >
+              <div className='overflow-x-auto'>
+                <table>
+                  <thead>
+                    <tr>
+                      <th>Name</th>
+                    </tr>
+                  </thead>
+                  <tbody>
+                    {users.custom_permissions &&
+                      Array.isArray(users.custom_permissions) &&
+                      users.custom_permissions.map((item: any) => (
+                        <tr
+                          key={item.id}
+                          onClick={() =>
+                            router.push(
+                              `/permissions/permissions-view/?id=${item.id}`,
+                            )
+                          }
+                        >
+                          <td data-label='name'>{item.name}</td>
+                        </tr>
+                      ))}
+                  </tbody>
+                </table>
+              </div>
+              {!users?.custom_permissions?.length && (
+                <div className={'text-center py-4'}>No data</div>
+              )}
+            </CardBox>
+          </>
+
+          <BaseDivider />
+
+          <BaseButton
+            color='info'
+            label='Back'
+            onClick={() => router.push('/users/users-list')}
+          />
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+UsersView.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_USERS'}>{page}</LayoutAuthenticated>
+  );
+};
+
+export default UsersView;
diff --git a/frontend/src/pages/usuarios/[usuariosId].tsx b/frontend/src/pages/usuarios/[usuariosId].tsx
new file mode 100644
index 0000000..487d5d3
--- /dev/null
+++ b/frontend/src/pages/usuarios/[usuariosId].tsx
@@ -0,0 +1,144 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import { update, fetch } from '../../stores/usuarios/usuariosSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditUsuarios = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    usuario: '',
+
+    pass: '',
+
+    tipo: '',
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { usuarios } = useAppSelector((state) => state.usuarios);
+
+  const { usuariosId } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: usuariosId }));
+  }, [usuariosId]);
+
+  useEffect(() => {
+    if (typeof usuarios === 'object') {
+      setInitialValues(usuarios);
+    }
+  }, [usuarios]);
+
+  useEffect(() => {
+    if (typeof usuarios === 'object') {
+      const newInitialVal = { ...initVals };
+
+      Object.keys(initVals).forEach((el) => (newInitialVal[el] = usuarios[el]));
+
+      setInitialValues(newInitialVal);
+    }
+  }, [usuarios]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: usuariosId, data }));
+    await router.push('/usuarios/usuarios-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit usuarios')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit usuarios'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='NombredeUsuario'>
+                <Field name='usuario' placeholder='NombredeUsuario' />
+              </FormField>
+
+              <FormField label='ContraseñaCifrada'>
+                <Field name='pass' placeholder='ContraseñaCifrada' />
+              </FormField>
+
+              <FormField label='RoldelUsuario' labelFor='tipo'>
+                <Field name='tipo' id='tipo' component='select'>
+                  <option value='SuperUsuario'>SuperUsuario</option>
+
+                  <option value='AdminEscolar'>AdminEscolar</option>
+
+                  <option value='Instructor'>Instructor</option>
+
+                  <option value='Alumno'>Alumno</option>
+                </Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/usuarios/usuarios-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditUsuarios.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_USUARIOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditUsuarios;
diff --git a/frontend/src/pages/usuarios/usuarios-edit.tsx b/frontend/src/pages/usuarios/usuarios-edit.tsx
new file mode 100644
index 0000000..a9db7e1
--- /dev/null
+++ b/frontend/src/pages/usuarios/usuarios-edit.tsx
@@ -0,0 +1,142 @@
+import { mdiChartTimelineVariant, mdiUpload } from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement, useEffect, useState } from 'react';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { SwitchField } from '../../components/SwitchField';
+import { RichTextField } from '../../components/RichTextField';
+
+import { update, fetch } from '../../stores/usuarios/usuariosSlice';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+
+const EditUsuariosPage = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const initVals = {
+    usuario: '',
+
+    pass: '',
+
+    tipo: '',
+  };
+  const [initialValues, setInitialValues] = useState(initVals);
+
+  const { usuarios } = useAppSelector((state) => state.usuarios);
+
+  const { id } = router.query;
+
+  useEffect(() => {
+    dispatch(fetch({ id: id }));
+  }, [id]);
+
+  useEffect(() => {
+    if (typeof usuarios === 'object') {
+      setInitialValues(usuarios);
+    }
+  }, [usuarios]);
+
+  useEffect(() => {
+    if (typeof usuarios === 'object') {
+      const newInitialVal = { ...initVals };
+      Object.keys(initVals).forEach((el) => (newInitialVal[el] = usuarios[el]));
+      setInitialValues(newInitialVal);
+    }
+  }, [usuarios]);
+
+  const handleSubmit = async (data) => {
+    await dispatch(update({ id: id, data }));
+    await router.push('/usuarios/usuarios-list');
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Edit usuarios')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={'Edit usuarios'}
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            enableReinitialize
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='NombredeUsuario'>
+                <Field name='usuario' placeholder='NombredeUsuario' />
+              </FormField>
+
+              <FormField label='ContraseñaCifrada'>
+                <Field name='pass' placeholder='ContraseñaCifrada' />
+              </FormField>
+
+              <FormField label='RoldelUsuario' labelFor='tipo'>
+                <Field name='tipo' id='tipo' component='select'>
+                  <option value='SuperUsuario'>SuperUsuario</option>
+
+                  <option value='AdminEscolar'>AdminEscolar</option>
+
+                  <option value='Instructor'>Instructor</option>
+
+                  <option value='Alumno'>Alumno</option>
+                </Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/usuarios/usuarios-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+EditUsuariosPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'UPDATE_USUARIOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default EditUsuariosPage;
diff --git a/frontend/src/pages/usuarios/usuarios-list.tsx b/frontend/src/pages/usuarios/usuarios-list.tsx
new file mode 100644
index 0000000..2f98931
--- /dev/null
+++ b/frontend/src/pages/usuarios/usuarios-list.tsx
@@ -0,0 +1,176 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TableUsuarios from '../../components/Usuarios/TableUsuarios';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import { setRefetch, uploadCsv } from '../../stores/usuarios/usuariosSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const UsuariosTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([
+    { label: 'NombredeUsuario', title: 'usuario' },
+    { label: 'ContraseñaCifrada', title: 'pass' },
+
+    {
+      label: 'RoldelUsuario',
+      title: 'tipo',
+      type: 'enum',
+      options: ['SuperUsuario', 'AdminEscolar', 'Instructor', 'Alumno'],
+    },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_USUARIOS');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getUsuariosCSV = async () => {
+    const response = await axios({
+      url: '/usuarios?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'usuariosCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Usuarios')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Usuarios'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/usuarios/usuarios-new'}
+              color='info'
+              label='New Item'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getUsuariosCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+          </div>
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <Link href={'/usuarios/usuarios-table'}>Switch to Table</Link>
+          </div>
+        </CardBox>
+
+        <CardBox className='mb-6' hasTable>
+          <TableUsuarios
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={false}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+UsuariosTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_USUARIOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default UsuariosTablesPage;
diff --git a/frontend/src/pages/usuarios/usuarios-new.tsx b/frontend/src/pages/usuarios/usuarios-new.tsx
new file mode 100644
index 0000000..6ce2201
--- /dev/null
+++ b/frontend/src/pages/usuarios/usuarios-new.tsx
@@ -0,0 +1,118 @@
+import {
+  mdiAccount,
+  mdiChartTimelineVariant,
+  mdiMail,
+  mdiUpload,
+} from '@mdi/js';
+import Head from 'next/head';
+import React, { ReactElement } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+
+import { Field, Form, Formik } from 'formik';
+import FormField from '../../components/FormField';
+import BaseDivider from '../../components/BaseDivider';
+import BaseButtons from '../../components/BaseButtons';
+import BaseButton from '../../components/BaseButton';
+import FormCheckRadio from '../../components/FormCheckRadio';
+import FormCheckRadioGroup from '../../components/FormCheckRadioGroup';
+import FormFilePicker from '../../components/FormFilePicker';
+import FormImagePicker from '../../components/FormImagePicker';
+import { SwitchField } from '../../components/SwitchField';
+
+import { SelectField } from '../../components/SelectField';
+import { SelectFieldMany } from '../../components/SelectFieldMany';
+import { RichTextField } from '../../components/RichTextField';
+
+import { create } from '../../stores/usuarios/usuariosSlice';
+import { useAppDispatch } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import moment from 'moment';
+
+const initialValues = {
+  usuario: '',
+
+  pass: '',
+
+  tipo: 'SuperUsuario',
+};
+
+const UsuariosNew = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+
+  const handleSubmit = async (data) => {
+    await dispatch(create(data));
+    await router.push('/usuarios/usuarios-list');
+  };
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('New Item')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='New Item'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <Formik
+            initialValues={initialValues}
+            onSubmit={(values) => handleSubmit(values)}
+          >
+            <Form>
+              <FormField label='NombredeUsuario'>
+                <Field name='usuario' placeholder='NombredeUsuario' />
+              </FormField>
+
+              <FormField label='ContraseñaCifrada'>
+                <Field name='pass' placeholder='ContraseñaCifrada' />
+              </FormField>
+
+              <FormField label='RoldelUsuario' labelFor='tipo'>
+                <Field name='tipo' id='tipo' component='select'>
+                  <option value='SuperUsuario'>SuperUsuario</option>
+
+                  <option value='AdminEscolar'>AdminEscolar</option>
+
+                  <option value='Instructor'>Instructor</option>
+
+                  <option value='Alumno'>Alumno</option>
+                </Field>
+              </FormField>
+
+              <BaseDivider />
+              <BaseButtons>
+                <BaseButton type='submit' color='info' label='Submit' />
+                <BaseButton type='reset' color='info' outline label='Reset' />
+                <BaseButton
+                  type='reset'
+                  color='danger'
+                  outline
+                  label='Cancel'
+                  onClick={() => router.push('/usuarios/usuarios-list')}
+                />
+              </BaseButtons>
+            </Form>
+          </Formik>
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+UsuariosNew.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'CREATE_USUARIOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default UsuariosNew;
diff --git a/frontend/src/pages/usuarios/usuarios-table.tsx b/frontend/src/pages/usuarios/usuarios-table.tsx
new file mode 100644
index 0000000..4a41e9f
--- /dev/null
+++ b/frontend/src/pages/usuarios/usuarios-table.tsx
@@ -0,0 +1,175 @@
+import { mdiChartTimelineVariant } from '@mdi/js';
+import Head from 'next/head';
+import { uniqueId } from 'lodash';
+import React, { ReactElement, useState } from 'react';
+import CardBox from '../../components/CardBox';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import SectionMain from '../../components/SectionMain';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import { getPageTitle } from '../../config';
+import TableUsuarios from '../../components/Usuarios/TableUsuarios';
+import BaseButton from '../../components/BaseButton';
+import axios from 'axios';
+import Link from 'next/link';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import CardBoxModal from '../../components/CardBoxModal';
+import DragDropFilePicker from '../../components/DragDropFilePicker';
+import { setRefetch, uploadCsv } from '../../stores/usuarios/usuariosSlice';
+
+import { hasPermission } from '../../helpers/userPermissions';
+
+const UsuariosTablesPage = () => {
+  const [filterItems, setFilterItems] = useState([]);
+  const [csvFile, setCsvFile] = useState<File | null>(null);
+  const [isModalActive, setIsModalActive] = useState(false);
+  const [showTableView, setShowTableView] = useState(false);
+
+  const { currentUser } = useAppSelector((state) => state.auth);
+
+  const dispatch = useAppDispatch();
+
+  const [filters] = useState([
+    { label: 'NombredeUsuario', title: 'usuario' },
+    { label: 'ContraseñaCifrada', title: 'pass' },
+
+    {
+      label: 'RoldelUsuario',
+      title: 'tipo',
+      type: 'enum',
+      options: ['SuperUsuario', 'AdminEscolar', 'Instructor', 'Alumno'],
+    },
+  ]);
+
+  const hasCreatePermission =
+    currentUser && hasPermission(currentUser, 'CREATE_USUARIOS');
+
+  const addFilter = () => {
+    const newItem = {
+      id: uniqueId(),
+      fields: {
+        filterValue: '',
+        filterValueFrom: '',
+        filterValueTo: '',
+        selectedField: '',
+      },
+    };
+    newItem.fields.selectedField = filters[0].title;
+    setFilterItems([...filterItems, newItem]);
+  };
+
+  const getUsuariosCSV = async () => {
+    const response = await axios({
+      url: '/usuarios?filetype=csv',
+      method: 'GET',
+      responseType: 'blob',
+    });
+    const type = response.headers['content-type'];
+    const blob = new Blob([response.data], { type: type });
+    const link = document.createElement('a');
+    link.href = window.URL.createObjectURL(blob);
+    link.download = 'usuariosCSV.csv';
+    link.click();
+  };
+
+  const onModalConfirm = async () => {
+    if (!csvFile) return;
+    await dispatch(uploadCsv(csvFile));
+    dispatch(setRefetch(true));
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  const onModalCancel = () => {
+    setCsvFile(null);
+    setIsModalActive(false);
+  };
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Usuarios')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title='Usuarios'
+          main
+        >
+          {''}
+        </SectionTitleLineWithButton>
+        <CardBox className='mb-6' cardBoxClassName='flex flex-wrap'>
+          {hasCreatePermission && (
+            <BaseButton
+              className={'mr-3'}
+              href={'/usuarios/usuarios-new'}
+              color='info'
+              label='New Item'
+            />
+          )}
+
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Filter'
+            onClick={addFilter}
+          />
+          <BaseButton
+            className={'mr-3'}
+            color='info'
+            label='Download CSV'
+            onClick={getUsuariosCSV}
+          />
+
+          {hasCreatePermission && (
+            <BaseButton
+              color='info'
+              label='Upload CSV'
+              onClick={() => setIsModalActive(true)}
+            />
+          )}
+
+          <div className='md:inline-flex items-center ms-auto'>
+            <div id='delete-rows-button'></div>
+
+            <Link href={'/usuarios/usuarios-list'}>
+              Back to <span className='capitalize'>list</span>
+            </Link>
+          </div>
+        </CardBox>
+        <CardBox className='mb-6' hasTable>
+          <TableUsuarios
+            filterItems={filterItems}
+            setFilterItems={setFilterItems}
+            filters={filters}
+            showGrid={true}
+          />
+        </CardBox>
+      </SectionMain>
+      <CardBoxModal
+        title='Upload CSV'
+        buttonColor='info'
+        buttonLabel={'Confirm'}
+        // buttonLabel={false ? 'Deleting...' : 'Confirm'}
+        isActive={isModalActive}
+        onConfirm={onModalConfirm}
+        onCancel={onModalCancel}
+      >
+        <DragDropFilePicker
+          file={csvFile}
+          setFile={setCsvFile}
+          formats={'.csv'}
+        />
+      </CardBoxModal>
+    </>
+  );
+};
+
+UsuariosTablesPage.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_USUARIOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default UsuariosTablesPage;
diff --git a/frontend/src/pages/usuarios/usuarios-view.tsx b/frontend/src/pages/usuarios/usuarios-view.tsx
new file mode 100644
index 0000000..7b395cf
--- /dev/null
+++ b/frontend/src/pages/usuarios/usuarios-view.tsx
@@ -0,0 +1,93 @@
+import React, { ReactElement, useEffect } from 'react';
+import Head from 'next/head';
+import DatePicker from 'react-datepicker';
+import 'react-datepicker/dist/react-datepicker.css';
+import dayjs from 'dayjs';
+import { useAppDispatch, useAppSelector } from '../../stores/hooks';
+import { useRouter } from 'next/router';
+import { fetch } from '../../stores/usuarios/usuariosSlice';
+import { saveFile } from '../../helpers/fileSaver';
+import dataFormatter from '../../helpers/dataFormatter';
+import ImageField from '../../components/ImageField';
+import LayoutAuthenticated from '../../layouts/Authenticated';
+import { getPageTitle } from '../../config';
+import SectionTitleLineWithButton from '../../components/SectionTitleLineWithButton';
+import SectionMain from '../../components/SectionMain';
+import CardBox from '../../components/CardBox';
+import BaseButton from '../../components/BaseButton';
+import BaseDivider from '../../components/BaseDivider';
+import { mdiChartTimelineVariant } from '@mdi/js';
+import { SwitchField } from '../../components/SwitchField';
+import FormField from '../../components/FormField';
+
+const UsuariosView = () => {
+  const router = useRouter();
+  const dispatch = useAppDispatch();
+  const { usuarios } = useAppSelector((state) => state.usuarios);
+
+  const { id } = router.query;
+
+  function removeLastCharacter(str) {
+    console.log(str, `str`);
+    return str.slice(0, -1);
+  }
+
+  useEffect(() => {
+    dispatch(fetch({ id }));
+  }, [dispatch, id]);
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('View usuarios')}</title>
+      </Head>
+      <SectionMain>
+        <SectionTitleLineWithButton
+          icon={mdiChartTimelineVariant}
+          title={removeLastCharacter('View usuarios')}
+          main
+        >
+          <BaseButton
+            color='info'
+            label='Edit'
+            href={`/usuarios/usuarios-edit/?id=${id}`}
+          />
+        </SectionTitleLineWithButton>
+        <CardBox>
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>NombredeUsuario</p>
+            <p>{usuarios?.usuario}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>ContraseñaCifrada</p>
+            <p>{usuarios?.pass}</p>
+          </div>
+
+          <div className={'mb-4'}>
+            <p className={'block font-bold mb-2'}>RoldelUsuario</p>
+            <p>{usuarios?.tipo ?? 'No data'}</p>
+          </div>
+
+          <BaseDivider />
+
+          <BaseButton
+            color='info'
+            label='Back'
+            onClick={() => router.push('/usuarios/usuarios-list')}
+          />
+        </CardBox>
+      </SectionMain>
+    </>
+  );
+};
+
+UsuariosView.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <LayoutAuthenticated permission={'READ_USUARIOS'}>
+      {page}
+    </LayoutAuthenticated>
+  );
+};
+
+export default UsuariosView;
diff --git a/frontend/src/pages/verify-email.tsx b/frontend/src/pages/verify-email.tsx
new file mode 100644
index 0000000..a088720
--- /dev/null
+++ b/frontend/src/pages/verify-email.tsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import type { ReactElement } from 'react';
+import { ToastContainer, toast } from 'react-toastify';
+import Head from 'next/head';
+import CardBox from '../components/CardBox';
+import SectionFullScreen from '../components/SectionFullScreen';
+import LayoutGuest from '../layouts/Guest';
+import { useRouter } from 'next/router';
+import { getPageTitle } from '../config';
+import axios from 'axios';
+
+export default function Verify() {
+  const [loading, setLoading] = React.useState(false);
+  const router = useRouter();
+  const { token } = router.query;
+  const notify = (type, msg) => toast(msg, { type });
+
+  React.useEffect(() => {
+    if (!token) {
+      router.push('/login');
+      return;
+    }
+    const handleSubmit = async () => {
+      setLoading(true);
+      await axios
+        .put('/auth/verify-email', {
+          token,
+        })
+        .then((verified) => {
+          if (verified) {
+            setLoading(false);
+            notify('success', 'Your email was verified');
+          }
+        })
+        .catch((error) => {
+          setLoading(false);
+          console.log('error: ', error);
+          notify('error', error.response);
+        })
+        .finally(async () => {
+          await router.push('/login');
+        });
+    };
+    handleSubmit().then();
+  }, [token]);
+
+  return (
+    <>
+      <Head>
+        <title>{getPageTitle('Verify Email')}</title>
+      </Head>
+      <SectionFullScreen bg='violet'>
+        <CardBox className='w-11/12 md:w-7/12 lg:w-6/12 xl:w-4/12'>
+          <p>{loading ? 'Loading...' : ''}</p>
+        </CardBox>
+      </SectionFullScreen>
+
+      <ToastContainer />
+    </>
+  );
+}
+
+Verify.getLayout = function getLayout(page: ReactElement) {
+  return <LayoutGuest>{page}</LayoutGuest>;
+};
diff --git a/frontend/src/stores/alumnos/alumnosSlice.ts b/frontend/src/stores/alumnos/alumnosSlice.ts
new file mode 100644
index 0000000..5b35997
--- /dev/null
+++ b/frontend/src/stores/alumnos/alumnosSlice.ts
@@ -0,0 +1,236 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import axios from 'axios';
+import {
+  fulfilledNotify,
+  rejectNotify,
+  resetNotify,
+} from '../../helpers/notifyStateHandler';
+
+interface MainState {
+  alumnos: any;
+  loading: boolean;
+  count: number;
+  refetch: boolean;
+  rolesWidgets: any[];
+  notify: {
+    showNotification: boolean;
+    textNotification: string;
+    typeNotification: string;
+  };
+}
+
+const initialState: MainState = {
+  alumnos: [],
+  loading: false,
+  count: 0,
+  refetch: false,
+  rolesWidgets: [],
+  notify: {
+    showNotification: false,
+    textNotification: '',
+    typeNotification: 'warn',
+  },
+};
+
+export const fetch = createAsyncThunk('alumnos/fetch', async (data: any) => {
+  const { id, query } = data;
+  const result = await axios.get(`alumnos${query || (id ? `/${id}` : '')}`);
+  return id
+    ? result.data
+    : { rows: result.data.rows, count: result.data.count };
+});
+
+export const deleteItemsByIds = createAsyncThunk(
+  'alumnos/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('alumnos/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk(
+  'alumnos/deleteAlumnos',
+  async (id: string, { rejectWithValue }) => {
+    try {
+      await axios.delete(`alumnos/${id}`);
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const create = createAsyncThunk(
+  'alumnos/createAlumnos',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.post('alumnos', { data });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const uploadCsv = createAsyncThunk(
+  'alumnos/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+    try {
+      const data = new FormData();
+      data.append('file', file);
+      data.append('filename', file.name);
+
+      const result = await axios.post('alumnos/bulk-import', data, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const update = createAsyncThunk(
+  'alumnos/updateAlumnos',
+  async (payload: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.put(`alumnos/${payload.id}`, {
+        id: payload.id,
+        data: payload.data,
+      });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const alumnosSlice = createSlice({
+  name: 'alumnos',
+  initialState,
+  reducers: {
+    setRefetch: (state, action: PayloadAction<boolean>) => {
+      state.refetch = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetch.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(fetch.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(fetch.fulfilled, (state, action) => {
+      if (action.payload.rows && action.payload.count >= 0) {
+        state.alumnos = action.payload.rows;
+        state.count = action.payload.count;
+      } else {
+        state.alumnos = action.payload;
+      }
+      state.loading = false;
+    });
+
+    builder.addCase(deleteItemsByIds.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Alumnos has been deleted');
+    });
+
+    builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(deleteItem.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItem.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Alumnos'.slice(0, -1)} has been deleted`);
+    });
+
+    builder.addCase(deleteItem.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(create.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Alumnos'.slice(0, -1)} has been created`);
+    });
+
+    builder.addCase(update.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(update.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Alumnos'.slice(0, -1)} has been updated`);
+    });
+    builder.addCase(update.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(uploadCsv.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(uploadCsv.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Alumnos has been uploaded');
+    });
+    builder.addCase(uploadCsv.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { setRefetch } = alumnosSlice.actions;
+
+export default alumnosSlice.reducer;
diff --git a/frontend/src/stores/alumnos_cursos/alumnos_cursosSlice.ts b/frontend/src/stores/alumnos_cursos/alumnos_cursosSlice.ts
new file mode 100644
index 0000000..8fd9c8e
--- /dev/null
+++ b/frontend/src/stores/alumnos_cursos/alumnos_cursosSlice.ts
@@ -0,0 +1,250 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import axios from 'axios';
+import {
+  fulfilledNotify,
+  rejectNotify,
+  resetNotify,
+} from '../../helpers/notifyStateHandler';
+
+interface MainState {
+  alumnos_cursos: any;
+  loading: boolean;
+  count: number;
+  refetch: boolean;
+  rolesWidgets: any[];
+  notify: {
+    showNotification: boolean;
+    textNotification: string;
+    typeNotification: string;
+  };
+}
+
+const initialState: MainState = {
+  alumnos_cursos: [],
+  loading: false,
+  count: 0,
+  refetch: false,
+  rolesWidgets: [],
+  notify: {
+    showNotification: false,
+    textNotification: '',
+    typeNotification: 'warn',
+  },
+};
+
+export const fetch = createAsyncThunk(
+  'alumnos_cursos/fetch',
+  async (data: any) => {
+    const { id, query } = data;
+    const result = await axios.get(
+      `alumnos_cursos${query || (id ? `/${id}` : '')}`,
+    );
+    return id
+      ? result.data
+      : { rows: result.data.rows, count: result.data.count };
+  },
+);
+
+export const deleteItemsByIds = createAsyncThunk(
+  'alumnos_cursos/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('alumnos_cursos/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk(
+  'alumnos_cursos/deleteAlumnos_cursos',
+  async (id: string, { rejectWithValue }) => {
+    try {
+      await axios.delete(`alumnos_cursos/${id}`);
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const create = createAsyncThunk(
+  'alumnos_cursos/createAlumnos_cursos',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.post('alumnos_cursos', { data });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const uploadCsv = createAsyncThunk(
+  'alumnos_cursos/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+    try {
+      const data = new FormData();
+      data.append('file', file);
+      data.append('filename', file.name);
+
+      const result = await axios.post('alumnos_cursos/bulk-import', data, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const update = createAsyncThunk(
+  'alumnos_cursos/updateAlumnos_cursos',
+  async (payload: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.put(`alumnos_cursos/${payload.id}`, {
+        id: payload.id,
+        data: payload.data,
+      });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const alumnos_cursosSlice = createSlice({
+  name: 'alumnos_cursos',
+  initialState,
+  reducers: {
+    setRefetch: (state, action: PayloadAction<boolean>) => {
+      state.refetch = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetch.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(fetch.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(fetch.fulfilled, (state, action) => {
+      if (action.payload.rows && action.payload.count >= 0) {
+        state.alumnos_cursos = action.payload.rows;
+        state.count = action.payload.count;
+      } else {
+        state.alumnos_cursos = action.payload;
+      }
+      state.loading = false;
+    });
+
+    builder.addCase(deleteItemsByIds.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Alumnos_cursos has been deleted');
+    });
+
+    builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(deleteItem.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItem.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(
+        state,
+        `${'Alumnos_cursos'.slice(0, -1)} has been deleted`,
+      );
+    });
+
+    builder.addCase(deleteItem.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(create.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(
+        state,
+        `${'Alumnos_cursos'.slice(0, -1)} has been created`,
+      );
+    });
+
+    builder.addCase(update.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(update.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(
+        state,
+        `${'Alumnos_cursos'.slice(0, -1)} has been updated`,
+      );
+    });
+    builder.addCase(update.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(uploadCsv.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(uploadCsv.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Alumnos_cursos has been uploaded');
+    });
+    builder.addCase(uploadCsv.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { setRefetch } = alumnos_cursosSlice.actions;
+
+export default alumnos_cursosSlice.reducer;
diff --git a/frontend/src/stores/authSlice.ts b/frontend/src/stores/authSlice.ts
new file mode 100644
index 0000000..1d405da
--- /dev/null
+++ b/frontend/src/stores/authSlice.ts
@@ -0,0 +1,125 @@
+import { createSlice, createAsyncThunk, createAction } from '@reduxjs/toolkit';
+import axios from 'axios';
+import jwt from 'jsonwebtoken';
+
+interface MainState {
+  isFetching: boolean;
+  errorMessage: string;
+  currentUser: any;
+  notify: any;
+  token: string;
+}
+
+const initialState: MainState = {
+  /* User */
+  isFetching: false,
+  errorMessage: '',
+  currentUser: null,
+  token: '',
+  notify: {
+    showNotification: false,
+    textNotification: '',
+    typeNotification: 'warn',
+  },
+};
+
+export const resetAction = createAction('auth/passwordReset/reset');
+
+export const loginUser = createAsyncThunk(
+  'auth/loginUser',
+  async (creds: Record<string, string>, { rejectWithValue }) => {
+    try {
+      const response = await axios.post('auth/signin/local', creds);
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const passwordReset = createAsyncThunk(
+  'auth/passwordReset',
+  async (value: Record<string, string>, { rejectWithValue }) => {
+    try {
+      const { data: response } = await axios.put('/auth/password-reset', {
+        token: value.token,
+        password: value.password,
+        type: value.type,
+      });
+
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const findMe = createAsyncThunk('auth/findMe', async () => {
+  const response = await axios.get('auth/me');
+  return response.data;
+});
+
+export const authSlice = createSlice({
+  name: 'auth',
+  initialState,
+  reducers: {
+    logoutUser: (state) => {
+      localStorage.removeItem('token');
+      localStorage.removeItem('user');
+      axios.defaults.headers.common['Authorization'] = '';
+      state.currentUser = null;
+      state.token = '';
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(loginUser.pending, (state) => {
+      state.isFetching = true;
+    });
+    builder.addCase(loginUser.fulfilled, (state, action) => {
+      const token = action.payload;
+      const user = jwt.decode(token);
+
+      state.errorMessage = '';
+      state.token = token;
+      localStorage.setItem('token', token);
+      localStorage.setItem('user', JSON.stringify(user));
+      axios.defaults.headers.common['Authorization'] = 'Bearer ' + token;
+    });
+
+    builder.addCase(loginUser.rejected, (state, action) => {
+      state.errorMessage =
+        String(action.payload) || 'Something went wrong. Try again';
+      state.isFetching = false;
+    });
+    builder.addCase(findMe.pending, () => {
+      console.log('Pending findMe');
+    });
+    builder.addCase(findMe.fulfilled, (state, action) => {
+      state.currentUser = action.payload;
+      state.isFetching = false;
+    });
+
+    builder.addCase(passwordReset.fulfilled, (state, action) => {
+      state.notify.showNotification = true;
+      state.notify.textNotification = 'Password has been reset successfully';
+    });
+
+    builder.addCase(resetAction, (state) => initialState);
+
+    builder.addCase(passwordReset.rejected, (state) => {
+      state.errorMessage = 'Something was wrong. Try again';
+    });
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { logoutUser } = authSlice.actions;
+
+export default authSlice.reducer;
diff --git a/frontend/src/stores/cursos/cursosSlice.ts b/frontend/src/stores/cursos/cursosSlice.ts
new file mode 100644
index 0000000..2b4849f
--- /dev/null
+++ b/frontend/src/stores/cursos/cursosSlice.ts
@@ -0,0 +1,236 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import axios from 'axios';
+import {
+  fulfilledNotify,
+  rejectNotify,
+  resetNotify,
+} from '../../helpers/notifyStateHandler';
+
+interface MainState {
+  cursos: any;
+  loading: boolean;
+  count: number;
+  refetch: boolean;
+  rolesWidgets: any[];
+  notify: {
+    showNotification: boolean;
+    textNotification: string;
+    typeNotification: string;
+  };
+}
+
+const initialState: MainState = {
+  cursos: [],
+  loading: false,
+  count: 0,
+  refetch: false,
+  rolesWidgets: [],
+  notify: {
+    showNotification: false,
+    textNotification: '',
+    typeNotification: 'warn',
+  },
+};
+
+export const fetch = createAsyncThunk('cursos/fetch', async (data: any) => {
+  const { id, query } = data;
+  const result = await axios.get(`cursos${query || (id ? `/${id}` : '')}`);
+  return id
+    ? result.data
+    : { rows: result.data.rows, count: result.data.count };
+});
+
+export const deleteItemsByIds = createAsyncThunk(
+  'cursos/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('cursos/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk(
+  'cursos/deleteCursos',
+  async (id: string, { rejectWithValue }) => {
+    try {
+      await axios.delete(`cursos/${id}`);
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const create = createAsyncThunk(
+  'cursos/createCursos',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.post('cursos', { data });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const uploadCsv = createAsyncThunk(
+  'cursos/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+    try {
+      const data = new FormData();
+      data.append('file', file);
+      data.append('filename', file.name);
+
+      const result = await axios.post('cursos/bulk-import', data, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const update = createAsyncThunk(
+  'cursos/updateCursos',
+  async (payload: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.put(`cursos/${payload.id}`, {
+        id: payload.id,
+        data: payload.data,
+      });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const cursosSlice = createSlice({
+  name: 'cursos',
+  initialState,
+  reducers: {
+    setRefetch: (state, action: PayloadAction<boolean>) => {
+      state.refetch = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetch.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(fetch.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(fetch.fulfilled, (state, action) => {
+      if (action.payload.rows && action.payload.count >= 0) {
+        state.cursos = action.payload.rows;
+        state.count = action.payload.count;
+      } else {
+        state.cursos = action.payload;
+      }
+      state.loading = false;
+    });
+
+    builder.addCase(deleteItemsByIds.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Cursos has been deleted');
+    });
+
+    builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(deleteItem.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItem.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Cursos'.slice(0, -1)} has been deleted`);
+    });
+
+    builder.addCase(deleteItem.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(create.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Cursos'.slice(0, -1)} has been created`);
+    });
+
+    builder.addCase(update.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(update.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Cursos'.slice(0, -1)} has been updated`);
+    });
+    builder.addCase(update.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(uploadCsv.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(uploadCsv.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Cursos has been uploaded');
+    });
+    builder.addCase(uploadCsv.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { setRefetch } = cursosSlice.actions;
+
+export default cursosSlice.reducer;
diff --git a/frontend/src/stores/documentos/documentosSlice.ts b/frontend/src/stores/documentos/documentosSlice.ts
new file mode 100644
index 0000000..511d662
--- /dev/null
+++ b/frontend/src/stores/documentos/documentosSlice.ts
@@ -0,0 +1,236 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import axios from 'axios';
+import {
+  fulfilledNotify,
+  rejectNotify,
+  resetNotify,
+} from '../../helpers/notifyStateHandler';
+
+interface MainState {
+  documentos: any;
+  loading: boolean;
+  count: number;
+  refetch: boolean;
+  rolesWidgets: any[];
+  notify: {
+    showNotification: boolean;
+    textNotification: string;
+    typeNotification: string;
+  };
+}
+
+const initialState: MainState = {
+  documentos: [],
+  loading: false,
+  count: 0,
+  refetch: false,
+  rolesWidgets: [],
+  notify: {
+    showNotification: false,
+    textNotification: '',
+    typeNotification: 'warn',
+  },
+};
+
+export const fetch = createAsyncThunk('documentos/fetch', async (data: any) => {
+  const { id, query } = data;
+  const result = await axios.get(`documentos${query || (id ? `/${id}` : '')}`);
+  return id
+    ? result.data
+    : { rows: result.data.rows, count: result.data.count };
+});
+
+export const deleteItemsByIds = createAsyncThunk(
+  'documentos/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('documentos/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk(
+  'documentos/deleteDocumentos',
+  async (id: string, { rejectWithValue }) => {
+    try {
+      await axios.delete(`documentos/${id}`);
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const create = createAsyncThunk(
+  'documentos/createDocumentos',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.post('documentos', { data });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const uploadCsv = createAsyncThunk(
+  'documentos/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+    try {
+      const data = new FormData();
+      data.append('file', file);
+      data.append('filename', file.name);
+
+      const result = await axios.post('documentos/bulk-import', data, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const update = createAsyncThunk(
+  'documentos/updateDocumentos',
+  async (payload: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.put(`documentos/${payload.id}`, {
+        id: payload.id,
+        data: payload.data,
+      });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const documentosSlice = createSlice({
+  name: 'documentos',
+  initialState,
+  reducers: {
+    setRefetch: (state, action: PayloadAction<boolean>) => {
+      state.refetch = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetch.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(fetch.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(fetch.fulfilled, (state, action) => {
+      if (action.payload.rows && action.payload.count >= 0) {
+        state.documentos = action.payload.rows;
+        state.count = action.payload.count;
+      } else {
+        state.documentos = action.payload;
+      }
+      state.loading = false;
+    });
+
+    builder.addCase(deleteItemsByIds.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Documentos has been deleted');
+    });
+
+    builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(deleteItem.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItem.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Documentos'.slice(0, -1)} has been deleted`);
+    });
+
+    builder.addCase(deleteItem.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(create.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Documentos'.slice(0, -1)} has been created`);
+    });
+
+    builder.addCase(update.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(update.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Documentos'.slice(0, -1)} has been updated`);
+    });
+    builder.addCase(update.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(uploadCsv.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(uploadCsv.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Documentos has been uploaded');
+    });
+    builder.addCase(uploadCsv.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { setRefetch } = documentosSlice.actions;
+
+export default documentosSlice.reducer;
diff --git a/frontend/src/stores/evaluaciones/evaluacionesSlice.ts b/frontend/src/stores/evaluaciones/evaluacionesSlice.ts
new file mode 100644
index 0000000..c2fcdb1
--- /dev/null
+++ b/frontend/src/stores/evaluaciones/evaluacionesSlice.ts
@@ -0,0 +1,241 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import axios from 'axios';
+import {
+  fulfilledNotify,
+  rejectNotify,
+  resetNotify,
+} from '../../helpers/notifyStateHandler';
+
+interface MainState {
+  evaluaciones: any;
+  loading: boolean;
+  count: number;
+  refetch: boolean;
+  rolesWidgets: any[];
+  notify: {
+    showNotification: boolean;
+    textNotification: string;
+    typeNotification: string;
+  };
+}
+
+const initialState: MainState = {
+  evaluaciones: [],
+  loading: false,
+  count: 0,
+  refetch: false,
+  rolesWidgets: [],
+  notify: {
+    showNotification: false,
+    textNotification: '',
+    typeNotification: 'warn',
+  },
+};
+
+export const fetch = createAsyncThunk(
+  'evaluaciones/fetch',
+  async (data: any) => {
+    const { id, query } = data;
+    const result = await axios.get(
+      `evaluaciones${query || (id ? `/${id}` : '')}`,
+    );
+    return id
+      ? result.data
+      : { rows: result.data.rows, count: result.data.count };
+  },
+);
+
+export const deleteItemsByIds = createAsyncThunk(
+  'evaluaciones/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('evaluaciones/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk(
+  'evaluaciones/deleteEvaluaciones',
+  async (id: string, { rejectWithValue }) => {
+    try {
+      await axios.delete(`evaluaciones/${id}`);
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const create = createAsyncThunk(
+  'evaluaciones/createEvaluaciones',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.post('evaluaciones', { data });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const uploadCsv = createAsyncThunk(
+  'evaluaciones/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+    try {
+      const data = new FormData();
+      data.append('file', file);
+      data.append('filename', file.name);
+
+      const result = await axios.post('evaluaciones/bulk-import', data, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const update = createAsyncThunk(
+  'evaluaciones/updateEvaluaciones',
+  async (payload: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.put(`evaluaciones/${payload.id}`, {
+        id: payload.id,
+        data: payload.data,
+      });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const evaluacionesSlice = createSlice({
+  name: 'evaluaciones',
+  initialState,
+  reducers: {
+    setRefetch: (state, action: PayloadAction<boolean>) => {
+      state.refetch = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetch.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(fetch.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(fetch.fulfilled, (state, action) => {
+      if (action.payload.rows && action.payload.count >= 0) {
+        state.evaluaciones = action.payload.rows;
+        state.count = action.payload.count;
+      } else {
+        state.evaluaciones = action.payload;
+      }
+      state.loading = false;
+    });
+
+    builder.addCase(deleteItemsByIds.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Evaluaciones has been deleted');
+    });
+
+    builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(deleteItem.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItem.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Evaluaciones'.slice(0, -1)} has been deleted`);
+    });
+
+    builder.addCase(deleteItem.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(create.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Evaluaciones'.slice(0, -1)} has been created`);
+    });
+
+    builder.addCase(update.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(update.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Evaluaciones'.slice(0, -1)} has been updated`);
+    });
+    builder.addCase(update.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(uploadCsv.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(uploadCsv.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Evaluaciones has been uploaded');
+    });
+    builder.addCase(uploadCsv.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { setRefetch } = evaluacionesSlice.actions;
+
+export default evaluacionesSlice.reducer;
diff --git a/frontend/src/stores/hooks.ts b/frontend/src/stores/hooks.ts
new file mode 100644
index 0000000..beb95c0
--- /dev/null
+++ b/frontend/src/stores/hooks.ts
@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
+import type { RootState, AppDispatch } from './store';
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch: () => AppDispatch = useDispatch;
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;
diff --git a/frontend/src/stores/instructores/instructoresSlice.ts b/frontend/src/stores/instructores/instructoresSlice.ts
new file mode 100644
index 0000000..af85498
--- /dev/null
+++ b/frontend/src/stores/instructores/instructoresSlice.ts
@@ -0,0 +1,241 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import axios from 'axios';
+import {
+  fulfilledNotify,
+  rejectNotify,
+  resetNotify,
+} from '../../helpers/notifyStateHandler';
+
+interface MainState {
+  instructores: any;
+  loading: boolean;
+  count: number;
+  refetch: boolean;
+  rolesWidgets: any[];
+  notify: {
+    showNotification: boolean;
+    textNotification: string;
+    typeNotification: string;
+  };
+}
+
+const initialState: MainState = {
+  instructores: [],
+  loading: false,
+  count: 0,
+  refetch: false,
+  rolesWidgets: [],
+  notify: {
+    showNotification: false,
+    textNotification: '',
+    typeNotification: 'warn',
+  },
+};
+
+export const fetch = createAsyncThunk(
+  'instructores/fetch',
+  async (data: any) => {
+    const { id, query } = data;
+    const result = await axios.get(
+      `instructores${query || (id ? `/${id}` : '')}`,
+    );
+    return id
+      ? result.data
+      : { rows: result.data.rows, count: result.data.count };
+  },
+);
+
+export const deleteItemsByIds = createAsyncThunk(
+  'instructores/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('instructores/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk(
+  'instructores/deleteInstructores',
+  async (id: string, { rejectWithValue }) => {
+    try {
+      await axios.delete(`instructores/${id}`);
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const create = createAsyncThunk(
+  'instructores/createInstructores',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.post('instructores', { data });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const uploadCsv = createAsyncThunk(
+  'instructores/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+    try {
+      const data = new FormData();
+      data.append('file', file);
+      data.append('filename', file.name);
+
+      const result = await axios.post('instructores/bulk-import', data, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const update = createAsyncThunk(
+  'instructores/updateInstructores',
+  async (payload: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.put(`instructores/${payload.id}`, {
+        id: payload.id,
+        data: payload.data,
+      });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const instructoresSlice = createSlice({
+  name: 'instructores',
+  initialState,
+  reducers: {
+    setRefetch: (state, action: PayloadAction<boolean>) => {
+      state.refetch = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetch.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(fetch.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(fetch.fulfilled, (state, action) => {
+      if (action.payload.rows && action.payload.count >= 0) {
+        state.instructores = action.payload.rows;
+        state.count = action.payload.count;
+      } else {
+        state.instructores = action.payload;
+      }
+      state.loading = false;
+    });
+
+    builder.addCase(deleteItemsByIds.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Instructores has been deleted');
+    });
+
+    builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(deleteItem.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItem.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Instructores'.slice(0, -1)} has been deleted`);
+    });
+
+    builder.addCase(deleteItem.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(create.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Instructores'.slice(0, -1)} has been created`);
+    });
+
+    builder.addCase(update.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(update.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Instructores'.slice(0, -1)} has been updated`);
+    });
+    builder.addCase(update.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(uploadCsv.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(uploadCsv.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Instructores has been uploaded');
+    });
+    builder.addCase(uploadCsv.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { setRefetch } = instructoresSlice.actions;
+
+export default instructoresSlice.reducer;
diff --git a/frontend/src/stores/introSteps.ts b/frontend/src/stores/introSteps.ts
new file mode 100644
index 0000000..70bb647
--- /dev/null
+++ b/frontend/src/stores/introSteps.ts
@@ -0,0 +1,135 @@
+interface Step {
+  element: string;
+  intro: string;
+  position?: string;
+  tooltipClass?: string;
+  highlightClass?: string;
+  disableInteraction?: boolean;
+}
+
+interface Hint {
+  element: string;
+  hint: string;
+  hintPosition?: string;
+}
+
+export const loginSteps: Step[] = [
+  {
+    element: '#elementId1',
+    intro: `
+          <div class="text-center text-black ">
+            <img src="https://flatlogic.com/blog/wp-content/uploads/2024/10/good_img.png" alt="Description" class="w-full mb-2 object-cover" />
+            <p>Welcome to our app tutorial! Get a sneak peek into the key functionalities and learn how to navigate seamlessly. Here's a quick overview to get you started.</p>
+          </div>
+        `,
+    position: 'auto',
+    tooltipClass: ' good-img',
+  },
+  {
+    element: '#loginRoles',
+    intro:
+      'Choose your login role to proceed. Experience the app as   Admin, or  User, or create your own account to get started.',
+    position: 'auto',
+  },
+];
+
+export const appSteps: Step[] = [
+  {
+    element: '#profilEdit',
+    intro:
+      "Update your profile information, including name, email, and password. Don't forget to save your changes to keep your profile current.",
+    position: 'auto',
+    disableInteraction: true,
+  },
+  {
+    element: '#themeToggle',
+    intro: 'Switch between light and dark modes to suit your preference.',
+    position: 'auto',
+    disableInteraction: true,
+  },
+  {
+    element: '#logout',
+    intro: 'Log out or switch users/roles with ease to manage your access.',
+    position: 'auto',
+    disableInteraction: true,
+  },
+  {
+    element: '#search',
+    intro:
+      'Quickly find specific data or items by entering your query in the search field. Navigate directly to the desired element.',
+    position: 'auto',
+    disableInteraction: true,
+  },
+  {
+    element: '#widgetCreator',
+    intro:
+      'Use Text-to-Chart and Text-to-Widget to create charts or widgets from text descriptions. Type what you need, like "Orders by Month," and customize your dashboard.',
+    position: 'auto',
+    disableInteraction: true,
+  },
+  {
+    element: '#dashboard',
+    intro:
+      'View all the entities available to your role, offering insights into the data categories and total items in each.',
+    position: 'auto',
+    disableInteraction: true,
+  },
+  {
+    element: '#asideMenu',
+    intro:
+      'Access various entities and manage your data. Find links to  Swagger API documentation for more information.',
+    position: 'auto',
+    disableInteraction: true,
+  },
+  {
+    element: '#asideMenu',
+    intro: "Let's explore the User entity.",
+    position: 'auto',
+    disableInteraction: true,
+  },
+];
+
+export const usersSteps: Step[] = [
+  {
+    element: '#usersList',
+    intro:
+      'Invite new users, filter data, and work with CSV files in this section.',
+    position: 'auto',
+    disableInteraction: true,
+  },
+  {
+    element: '#usersTable',
+    intro:
+      'View, modify, or delete items with the necessary permissions. Inline editing is available within the table.',
+    position: 'auto',
+    disableInteraction: true,
+  },
+  {
+    element: '#asideMenu',
+    intro: "Let's explore the Roles entity.",
+    position: 'auto',
+    disableInteraction: true,
+  },
+];
+
+export const rolesSteps: Step[] = [
+  {
+    element: '#rolesTable',
+    intro:
+      'Super Admin can manage roles and permissions. Adjust access levels and permissions for each role or user in the Roles and Permissions sections.',
+    position: 'auto',
+    disableInteraction: true,
+  },
+  {
+    element: '#feedbackSection',
+    intro: `
+    <div class="text-center ">
+      <img src="https://flatlogic.com/blog/wp-content/uploads/2024/10/end_guide.png" alt="Description" class="w-full mb-2 object-cover" />
+      <p>Thank you for completing the tour! We hope you now have a better understanding of the app.</p>
+      <p>If you have any questions, feel free to reach out to us at <a href="mailto:support@flatlogic.com" class="text-blue-500 underline">support@flatlogic.com</a>.</p>
+    </div>
+  `,
+    position: 'auto',
+    tooltipClass: 'end-img',
+  },
+];
diff --git a/frontend/src/stores/mainSlice.ts b/frontend/src/stores/mainSlice.ts
new file mode 100644
index 0000000..92b8935
--- /dev/null
+++ b/frontend/src/stores/mainSlice.ts
@@ -0,0 +1,36 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import { UserPayloadObject } from '../interfaces';
+
+interface MainState {
+  userName: string;
+  userEmail: null | string;
+  userAvatar: null | string;
+  isFieldFocusRegistered: boolean;
+}
+
+const initialState: MainState = {
+  /* User */
+  userName: '',
+  userEmail: null,
+  userAvatar: null,
+
+  /* Field focus with ctrl+k (to register only once) */
+  isFieldFocusRegistered: false,
+};
+
+export const mainSlice = createSlice({
+  name: 'main',
+  initialState,
+  reducers: {
+    setUser: (state, action: PayloadAction<UserPayloadObject>) => {
+      state.userName = action.payload.name;
+      state.userEmail = action.payload.email;
+      state.userAvatar = action.payload.avatar;
+    },
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { setUser } = mainSlice.actions;
+
+export default mainSlice.reducer;
diff --git a/frontend/src/stores/openAiSlice.ts b/frontend/src/stores/openAiSlice.ts
new file mode 100644
index 0000000..8b81bd8
--- /dev/null
+++ b/frontend/src/stores/openAiSlice.ts
@@ -0,0 +1,116 @@
+import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';
+import axios from 'axios';
+
+interface MainState {
+  isFetchingQuery: boolean;
+  errorMessage: string;
+  smartWidgets: any[];
+  gptResponse: string | null;
+  isAskingQuestion: boolean;
+  notify: {
+    showNotification: boolean;
+    textNotification: string;
+    typeNotification: string;
+  };
+}
+const initialState: MainState = {
+  isFetchingQuery: false,
+  errorMessage: '',
+  smartWidgets: [],
+  gptResponse: null,
+  isAskingQuestion: false,
+  notify: {
+    showNotification: false,
+    textNotification: '',
+    typeNotification: 'warn',
+  },
+};
+
+const fulfilledNotify = (state, msg, type?: string) => {
+  state.notify.textNotification = msg;
+  state.notify.typeNotification = type || 'success';
+  state.notify.showNotification = true;
+};
+
+export const aiPrompt = createAsyncThunk(
+  'openai/aiPrompt',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      return await axios.post('/openai/create_widget', data);
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const askGpt = createAsyncThunk(
+  'openai/askGpt',
+  async (prompt: string, { rejectWithValue }) => {
+    try {
+      const response = await axios.post('/openai/ask-gpt', { prompt });
+      return response.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const openAiSlice = createSlice({
+  name: 'openAiSlice',
+  initialState,
+  reducers: {
+    resetNotify: (state) => {
+      state.notify.showNotification = false;
+      state.notify.typeNotification = '';
+      state.notify.textNotification = '';
+    },
+    setErrorNotification: (state, action) => {
+      fulfilledNotify(state, action.payload, 'error');
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(aiPrompt.pending, (state) => {
+      state.isFetchingQuery = true;
+    });
+    builder.addCase(aiPrompt.fulfilled, (state, action: Record<any, any>) => {
+      state.isFetchingQuery = false;
+      state.errorMessage = '';
+      state.smartWidgets.unshift(action.payload.data);
+    });
+
+    builder.addCase(aiPrompt.rejected, (state) => {
+      state.errorMessage = 'Something was wrong. Try again';
+      state.isFetchingQuery = false;
+      state.smartWidgets = null;
+    });
+
+    builder.addCase(askGpt.pending, (state) => {
+      state.isAskingQuestion = true;
+      state.gptResponse = null;
+      state.errorMessage = '';
+    });
+    builder.addCase(askGpt.fulfilled, (state, action) => {
+      state.isAskingQuestion = false;
+      state.gptResponse = action.payload.data;
+      state.errorMessage = '';
+    });
+    builder.addCase(askGpt.rejected, (state) => {
+      state.isAskingQuestion = false;
+      state.gptResponse = null;
+      state.errorMessage =
+        'Failed to get response from ChatGPT. Please try again.';
+      fulfilledNotify(state, 'Failed to get response from ChatGPT', 'error');
+    });
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { resetNotify, setErrorNotification } = openAiSlice.actions;
+
+export default openAiSlice.reducer;
diff --git a/frontend/src/stores/permissions/permissionsSlice.ts b/frontend/src/stores/permissions/permissionsSlice.ts
new file mode 100644
index 0000000..11b8224
--- /dev/null
+++ b/frontend/src/stores/permissions/permissionsSlice.ts
@@ -0,0 +1,241 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import axios from 'axios';
+import {
+  fulfilledNotify,
+  rejectNotify,
+  resetNotify,
+} from '../../helpers/notifyStateHandler';
+
+interface MainState {
+  permissions: any;
+  loading: boolean;
+  count: number;
+  refetch: boolean;
+  rolesWidgets: any[];
+  notify: {
+    showNotification: boolean;
+    textNotification: string;
+    typeNotification: string;
+  };
+}
+
+const initialState: MainState = {
+  permissions: [],
+  loading: false,
+  count: 0,
+  refetch: false,
+  rolesWidgets: [],
+  notify: {
+    showNotification: false,
+    textNotification: '',
+    typeNotification: 'warn',
+  },
+};
+
+export const fetch = createAsyncThunk(
+  'permissions/fetch',
+  async (data: any) => {
+    const { id, query } = data;
+    const result = await axios.get(
+      `permissions${query || (id ? `/${id}` : '')}`,
+    );
+    return id
+      ? result.data
+      : { rows: result.data.rows, count: result.data.count };
+  },
+);
+
+export const deleteItemsByIds = createAsyncThunk(
+  'permissions/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('permissions/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk(
+  'permissions/deletePermissions',
+  async (id: string, { rejectWithValue }) => {
+    try {
+      await axios.delete(`permissions/${id}`);
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const create = createAsyncThunk(
+  'permissions/createPermissions',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.post('permissions', { data });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const uploadCsv = createAsyncThunk(
+  'permissions/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+    try {
+      const data = new FormData();
+      data.append('file', file);
+      data.append('filename', file.name);
+
+      const result = await axios.post('permissions/bulk-import', data, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const update = createAsyncThunk(
+  'permissions/updatePermissions',
+  async (payload: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.put(`permissions/${payload.id}`, {
+        id: payload.id,
+        data: payload.data,
+      });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const permissionsSlice = createSlice({
+  name: 'permissions',
+  initialState,
+  reducers: {
+    setRefetch: (state, action: PayloadAction<boolean>) => {
+      state.refetch = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetch.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(fetch.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(fetch.fulfilled, (state, action) => {
+      if (action.payload.rows && action.payload.count >= 0) {
+        state.permissions = action.payload.rows;
+        state.count = action.payload.count;
+      } else {
+        state.permissions = action.payload;
+      }
+      state.loading = false;
+    });
+
+    builder.addCase(deleteItemsByIds.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Permissions has been deleted');
+    });
+
+    builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(deleteItem.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItem.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Permissions'.slice(0, -1)} has been deleted`);
+    });
+
+    builder.addCase(deleteItem.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(create.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Permissions'.slice(0, -1)} has been created`);
+    });
+
+    builder.addCase(update.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(update.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Permissions'.slice(0, -1)} has been updated`);
+    });
+    builder.addCase(update.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(uploadCsv.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(uploadCsv.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Permissions has been uploaded');
+    });
+    builder.addCase(uploadCsv.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { setRefetch } = permissionsSlice.actions;
+
+export default permissionsSlice.reducer;
diff --git a/frontend/src/stores/personas/personasSlice.ts b/frontend/src/stores/personas/personasSlice.ts
new file mode 100644
index 0000000..e8ae266
--- /dev/null
+++ b/frontend/src/stores/personas/personasSlice.ts
@@ -0,0 +1,236 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import axios from 'axios';
+import {
+  fulfilledNotify,
+  rejectNotify,
+  resetNotify,
+} from '../../helpers/notifyStateHandler';
+
+interface MainState {
+  personas: any;
+  loading: boolean;
+  count: number;
+  refetch: boolean;
+  rolesWidgets: any[];
+  notify: {
+    showNotification: boolean;
+    textNotification: string;
+    typeNotification: string;
+  };
+}
+
+const initialState: MainState = {
+  personas: [],
+  loading: false,
+  count: 0,
+  refetch: false,
+  rolesWidgets: [],
+  notify: {
+    showNotification: false,
+    textNotification: '',
+    typeNotification: 'warn',
+  },
+};
+
+export const fetch = createAsyncThunk('personas/fetch', async (data: any) => {
+  const { id, query } = data;
+  const result = await axios.get(`personas${query || (id ? `/${id}` : '')}`);
+  return id
+    ? result.data
+    : { rows: result.data.rows, count: result.data.count };
+});
+
+export const deleteItemsByIds = createAsyncThunk(
+  'personas/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('personas/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk(
+  'personas/deletePersonas',
+  async (id: string, { rejectWithValue }) => {
+    try {
+      await axios.delete(`personas/${id}`);
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const create = createAsyncThunk(
+  'personas/createPersonas',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.post('personas', { data });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const uploadCsv = createAsyncThunk(
+  'personas/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+    try {
+      const data = new FormData();
+      data.append('file', file);
+      data.append('filename', file.name);
+
+      const result = await axios.post('personas/bulk-import', data, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const update = createAsyncThunk(
+  'personas/updatePersonas',
+  async (payload: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.put(`personas/${payload.id}`, {
+        id: payload.id,
+        data: payload.data,
+      });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const personasSlice = createSlice({
+  name: 'personas',
+  initialState,
+  reducers: {
+    setRefetch: (state, action: PayloadAction<boolean>) => {
+      state.refetch = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetch.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(fetch.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(fetch.fulfilled, (state, action) => {
+      if (action.payload.rows && action.payload.count >= 0) {
+        state.personas = action.payload.rows;
+        state.count = action.payload.count;
+      } else {
+        state.personas = action.payload;
+      }
+      state.loading = false;
+    });
+
+    builder.addCase(deleteItemsByIds.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Personas has been deleted');
+    });
+
+    builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(deleteItem.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItem.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Personas'.slice(0, -1)} has been deleted`);
+    });
+
+    builder.addCase(deleteItem.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(create.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Personas'.slice(0, -1)} has been created`);
+    });
+
+    builder.addCase(update.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(update.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Personas'.slice(0, -1)} has been updated`);
+    });
+    builder.addCase(update.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(uploadCsv.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(uploadCsv.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Personas has been uploaded');
+    });
+    builder.addCase(uploadCsv.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { setRefetch } = personasSlice.actions;
+
+export default personasSlice.reducer;
diff --git a/frontend/src/stores/requisitos/requisitosSlice.ts b/frontend/src/stores/requisitos/requisitosSlice.ts
new file mode 100644
index 0000000..5ba2740
--- /dev/null
+++ b/frontend/src/stores/requisitos/requisitosSlice.ts
@@ -0,0 +1,236 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import axios from 'axios';
+import {
+  fulfilledNotify,
+  rejectNotify,
+  resetNotify,
+} from '../../helpers/notifyStateHandler';
+
+interface MainState {
+  requisitos: any;
+  loading: boolean;
+  count: number;
+  refetch: boolean;
+  rolesWidgets: any[];
+  notify: {
+    showNotification: boolean;
+    textNotification: string;
+    typeNotification: string;
+  };
+}
+
+const initialState: MainState = {
+  requisitos: [],
+  loading: false,
+  count: 0,
+  refetch: false,
+  rolesWidgets: [],
+  notify: {
+    showNotification: false,
+    textNotification: '',
+    typeNotification: 'warn',
+  },
+};
+
+export const fetch = createAsyncThunk('requisitos/fetch', async (data: any) => {
+  const { id, query } = data;
+  const result = await axios.get(`requisitos${query || (id ? `/${id}` : '')}`);
+  return id
+    ? result.data
+    : { rows: result.data.rows, count: result.data.count };
+});
+
+export const deleteItemsByIds = createAsyncThunk(
+  'requisitos/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('requisitos/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk(
+  'requisitos/deleteRequisitos',
+  async (id: string, { rejectWithValue }) => {
+    try {
+      await axios.delete(`requisitos/${id}`);
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const create = createAsyncThunk(
+  'requisitos/createRequisitos',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.post('requisitos', { data });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const uploadCsv = createAsyncThunk(
+  'requisitos/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+    try {
+      const data = new FormData();
+      data.append('file', file);
+      data.append('filename', file.name);
+
+      const result = await axios.post('requisitos/bulk-import', data, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const update = createAsyncThunk(
+  'requisitos/updateRequisitos',
+  async (payload: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.put(`requisitos/${payload.id}`, {
+        id: payload.id,
+        data: payload.data,
+      });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const requisitosSlice = createSlice({
+  name: 'requisitos',
+  initialState,
+  reducers: {
+    setRefetch: (state, action: PayloadAction<boolean>) => {
+      state.refetch = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetch.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(fetch.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(fetch.fulfilled, (state, action) => {
+      if (action.payload.rows && action.payload.count >= 0) {
+        state.requisitos = action.payload.rows;
+        state.count = action.payload.count;
+      } else {
+        state.requisitos = action.payload;
+      }
+      state.loading = false;
+    });
+
+    builder.addCase(deleteItemsByIds.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Requisitos has been deleted');
+    });
+
+    builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(deleteItem.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItem.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Requisitos'.slice(0, -1)} has been deleted`);
+    });
+
+    builder.addCase(deleteItem.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(create.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Requisitos'.slice(0, -1)} has been created`);
+    });
+
+    builder.addCase(update.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(update.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Requisitos'.slice(0, -1)} has been updated`);
+    });
+    builder.addCase(update.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(uploadCsv.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(uploadCsv.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Requisitos has been uploaded');
+    });
+    builder.addCase(uploadCsv.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { setRefetch } = requisitosSlice.actions;
+
+export default requisitosSlice.reducer;
diff --git a/frontend/src/stores/roles/rolesSlice.ts b/frontend/src/stores/roles/rolesSlice.ts
new file mode 100644
index 0000000..177e83b
--- /dev/null
+++ b/frontend/src/stores/roles/rolesSlice.ts
@@ -0,0 +1,283 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import axios from 'axios';
+import {
+  fulfilledNotify,
+  rejectNotify,
+  resetNotify,
+} from '../../helpers/notifyStateHandler';
+
+interface MainState {
+  roles: any;
+  loading: boolean;
+  count: number;
+  refetch: boolean;
+  rolesWidgets: any[];
+  notify: {
+    showNotification: boolean;
+    textNotification: string;
+    typeNotification: string;
+  };
+}
+
+const initialState: MainState = {
+  roles: [],
+  loading: false,
+  count: 0,
+  refetch: false,
+  rolesWidgets: [],
+  notify: {
+    showNotification: false,
+    textNotification: '',
+    typeNotification: 'warn',
+  },
+};
+
+export const fetch = createAsyncThunk('roles/fetch', async (data: any) => {
+  const { id, query } = data;
+  const result = await axios.get(`roles${query || (id ? `/${id}` : '')}`);
+  return id
+    ? result.data
+    : { rows: result.data.rows, count: result.data.count };
+});
+
+export const deleteItemsByIds = createAsyncThunk(
+  'roles/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('roles/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk(
+  'roles/deleteRoles',
+  async (id: string, { rejectWithValue }) => {
+    try {
+      await axios.delete(`roles/${id}`);
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const create = createAsyncThunk(
+  'roles/createRoles',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.post('roles', { data });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const uploadCsv = createAsyncThunk(
+  'roles/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+    try {
+      const data = new FormData();
+      data.append('file', file);
+      data.append('filename', file.name);
+
+      const result = await axios.post('roles/bulk-import', data, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const update = createAsyncThunk(
+  'roles/updateRoles',
+  async (payload: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.put(`roles/${payload.id}`, {
+        id: payload.id,
+        data: payload.data,
+      });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const removeWidget = createAsyncThunk(
+  'openai/removeWidget',
+  async (payload: any) => {
+    const result = await axios.delete(`openai/roles-info/${payload.id}`, {
+      params: {
+        roleId: payload.roleId,
+        infoId: payload.widgetId,
+        key: 'widgets',
+      },
+    });
+    return result.data;
+  },
+);
+
+export const fetchWidgets = createAsyncThunk(
+  'openai/fetchWidgets',
+  async (roleId: any) => {
+    const result = await axios.get(
+      `openai/info-by-key?key=widgets&roleId=${roleId}`,
+    );
+    return result.data;
+  },
+);
+
+export const rolesSlice = createSlice({
+  name: 'roles',
+  initialState,
+  reducers: {
+    setRefetch: (state, action: PayloadAction<boolean>) => {
+      state.refetch = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetch.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(fetch.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(fetch.fulfilled, (state, action) => {
+      if (action.payload.rows && action.payload.count >= 0) {
+        state.roles = action.payload.rows;
+        state.count = action.payload.count;
+      } else {
+        state.roles = action.payload;
+      }
+      state.loading = false;
+    });
+
+    builder.addCase(deleteItemsByIds.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Roles has been deleted');
+    });
+
+    builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(deleteItem.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItem.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Roles'.slice(0, -1)} has been deleted`);
+    });
+
+    builder.addCase(deleteItem.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(create.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Roles'.slice(0, -1)} has been created`);
+    });
+
+    builder.addCase(update.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(update.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Roles'.slice(0, -1)} has been updated`);
+    });
+    builder.addCase(update.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(uploadCsv.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(uploadCsv.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Roles has been uploaded');
+    });
+    builder.addCase(uploadCsv.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(removeWidget.pending, (state) => {
+      state.loading = true;
+    });
+    builder.addCase(removeWidget.fulfilled, (state) => {
+      state.loading = false;
+    });
+    builder.addCase(removeWidget.rejected, (state) => {
+      state.loading = false;
+    });
+
+    builder.addCase(fetchWidgets.pending, (state) => {
+      state.loading = true;
+      state.rolesWidgets = [];
+    });
+    builder.addCase(fetchWidgets.fulfilled, (state, action) => {
+      state.loading = false;
+      state.rolesWidgets = action.payload;
+    });
+    builder.addCase(fetchWidgets.rejected, (state) => {
+      state.loading = false;
+      state.rolesWidgets = [];
+    });
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { setRefetch } = rolesSlice.actions;
+
+export default rolesSlice.reducer;
diff --git a/frontend/src/stores/store.ts b/frontend/src/stores/store.ts
new file mode 100644
index 0000000..d30c5ca
--- /dev/null
+++ b/frontend/src/stores/store.ts
@@ -0,0 +1,45 @@
+import { configureStore } from '@reduxjs/toolkit';
+import styleReducer from './styleSlice';
+import mainReducer from './mainSlice';
+import authSlice from './authSlice';
+import openAiSlice from './openAiSlice';
+
+import usersSlice from './users/usersSlice';
+import alumnosSlice from './alumnos/alumnosSlice';
+import alumnos_cursosSlice from './alumnos_cursos/alumnos_cursosSlice';
+import cursosSlice from './cursos/cursosSlice';
+import documentosSlice from './documentos/documentosSlice';
+import evaluacionesSlice from './evaluaciones/evaluacionesSlice';
+import instructoresSlice from './instructores/instructoresSlice';
+import personasSlice from './personas/personasSlice';
+import requisitosSlice from './requisitos/requisitosSlice';
+import usuariosSlice from './usuarios/usuariosSlice';
+import rolesSlice from './roles/rolesSlice';
+import permissionsSlice from './permissions/permissionsSlice';
+
+export const store = configureStore({
+  reducer: {
+    style: styleReducer,
+    main: mainReducer,
+    auth: authSlice,
+    openAi: openAiSlice,
+
+    users: usersSlice,
+    alumnos: alumnosSlice,
+    alumnos_cursos: alumnos_cursosSlice,
+    cursos: cursosSlice,
+    documentos: documentosSlice,
+    evaluaciones: evaluacionesSlice,
+    instructores: instructoresSlice,
+    personas: personasSlice,
+    requisitos: requisitosSlice,
+    usuarios: usuariosSlice,
+    roles: rolesSlice,
+    permissions: permissionsSlice,
+  },
+});
+
+// Infer the `RootState` and `AppDispatch` types from the store itself
+export type RootState = ReturnType<typeof store.getState>;
+// Inferred type: {posts: PostsState, comments: CommentsState, users: UsersState}
+export type AppDispatch = typeof store.dispatch;
diff --git a/frontend/src/stores/styleSlice.ts b/frontend/src/stores/styleSlice.ts
new file mode 100644
index 0000000..fc94aa7
--- /dev/null
+++ b/frontend/src/stores/styleSlice.ts
@@ -0,0 +1,108 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+import * as styles from '../styles';
+import { localStorageDarkModeKey, localStorageStyleKey } from '../config';
+import { StyleKey } from '../interfaces';
+
+interface StyleState {
+  asideStyle: string;
+  asideScrollbarsStyle: string;
+  asideBrandStyle: string;
+  asideMenuItemStyle: string;
+  asideMenuItemActiveStyle: string;
+  asideMenuDropdownStyle: string;
+  navBarItemLabelStyle: string;
+  navBarItemLabelHoverStyle: string;
+  navBarItemLabelActiveColorStyle: string;
+  overlayStyle: string;
+  darkMode: boolean;
+  bgLayoutColor: string;
+  iconsColor: string;
+  activeLinkColor: string;
+  cardsColor: string;
+  focusRingColor: string;
+  corners: string;
+  cardsStyle: string;
+  linkColor: string;
+  websiteHeder: string;
+  borders: string;
+  shadow: string;
+  websiteSectionStyle: string;
+  textSecondary: string;
+}
+
+const initialState: StyleState = {
+  asideStyle: styles.skyBlueTheme.aside,
+  asideScrollbarsStyle: styles.white.asideScrollbars,
+  asideBrandStyle: styles.white.asideBrand,
+  asideMenuItemStyle: styles.skyBlueTheme.asideMenuItem,
+  asideMenuItemActiveStyle: styles.skyBlueTheme.asideMenuItemActive,
+  activeLinkColor: styles.skyBlueTheme.activeLinkColor,
+  asideMenuDropdownStyle: styles.white.asideMenuDropdown,
+  navBarItemLabelStyle: styles.skyBlueTheme.navBarItemLabel,
+  navBarItemLabelHoverStyle: styles.skyBlueTheme.navBarItemLabelHover,
+  navBarItemLabelActiveColorStyle:
+    styles.skyBlueTheme.navBarItemLabelActiveColor,
+  overlayStyle: styles.skyBlueTheme.overlay,
+  darkMode: false,
+  bgLayoutColor: styles.skyBlueTheme.bgLayoutColor,
+  iconsColor: styles.skyBlueTheme.iconsColor,
+  cardsColor: styles.skyBlueTheme.cardsColor,
+  focusRingColor: styles.skyBlueTheme.focusRingColor,
+  corners: styles.skyBlueTheme.corners,
+  cardsStyle: styles.skyBlueTheme.cardsStyle,
+  linkColor: styles.skyBlueTheme.linkColor,
+  websiteHeder: styles.skyBlueTheme.websiteHeder,
+  borders: styles.skyBlueTheme.borders,
+  shadow: styles.skyBlueTheme.shadow,
+  websiteSectionStyle: styles.skyBlueTheme.websiteSectionStyle,
+  textSecondary: styles.skyBlueTheme.textSecondary,
+};
+
+export const styleSlice = createSlice({
+  name: 'style',
+  initialState,
+  reducers: {
+    setDarkMode: (state, action: PayloadAction<boolean | null>) => {
+      state.darkMode =
+        action.payload !== null ? action.payload : !state.darkMode;
+
+      if (typeof localStorage !== 'undefined') {
+        localStorage.setItem(
+          localStorageDarkModeKey,
+          state.darkMode ? '1' : '0',
+        );
+      }
+
+      if (typeof document !== 'undefined') {
+        document.body.classList[state.darkMode ? 'add' : 'remove'](
+          'dark-scrollbars',
+        );
+
+        document.documentElement.classList[state.darkMode ? 'add' : 'remove'](
+          'dark-scrollbars-compat',
+        );
+      }
+    },
+
+    setStyle: (state, action: PayloadAction<StyleKey>) => {
+      if (!styles[action.payload]) {
+        return;
+      }
+
+      if (typeof localStorage !== 'undefined') {
+        localStorage.setItem(localStorageStyleKey, action.payload);
+      }
+
+      const style = styles[action.payload];
+
+      for (const key in style) {
+        state[`${key}Style`] = style[key];
+      }
+    },
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { setDarkMode, setStyle } = styleSlice.actions;
+
+export default styleSlice.reducer;
diff --git a/frontend/src/stores/users/usersSlice.ts b/frontend/src/stores/users/usersSlice.ts
new file mode 100644
index 0000000..f182315
--- /dev/null
+++ b/frontend/src/stores/users/usersSlice.ts
@@ -0,0 +1,236 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import axios from 'axios';
+import {
+  fulfilledNotify,
+  rejectNotify,
+  resetNotify,
+} from '../../helpers/notifyStateHandler';
+
+interface MainState {
+  users: any;
+  loading: boolean;
+  count: number;
+  refetch: boolean;
+  rolesWidgets: any[];
+  notify: {
+    showNotification: boolean;
+    textNotification: string;
+    typeNotification: string;
+  };
+}
+
+const initialState: MainState = {
+  users: [],
+  loading: false,
+  count: 0,
+  refetch: false,
+  rolesWidgets: [],
+  notify: {
+    showNotification: false,
+    textNotification: '',
+    typeNotification: 'warn',
+  },
+};
+
+export const fetch = createAsyncThunk('users/fetch', async (data: any) => {
+  const { id, query } = data;
+  const result = await axios.get(`users${query || (id ? `/${id}` : '')}`);
+  return id
+    ? result.data
+    : { rows: result.data.rows, count: result.data.count };
+});
+
+export const deleteItemsByIds = createAsyncThunk(
+  'users/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('users/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk(
+  'users/deleteUsers',
+  async (id: string, { rejectWithValue }) => {
+    try {
+      await axios.delete(`users/${id}`);
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const create = createAsyncThunk(
+  'users/createUsers',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.post('users', { data });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const uploadCsv = createAsyncThunk(
+  'users/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+    try {
+      const data = new FormData();
+      data.append('file', file);
+      data.append('filename', file.name);
+
+      const result = await axios.post('users/bulk-import', data, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const update = createAsyncThunk(
+  'users/updateUsers',
+  async (payload: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.put(`users/${payload.id}`, {
+        id: payload.id,
+        data: payload.data,
+      });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const usersSlice = createSlice({
+  name: 'users',
+  initialState,
+  reducers: {
+    setRefetch: (state, action: PayloadAction<boolean>) => {
+      state.refetch = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetch.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(fetch.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(fetch.fulfilled, (state, action) => {
+      if (action.payload.rows && action.payload.count >= 0) {
+        state.users = action.payload.rows;
+        state.count = action.payload.count;
+      } else {
+        state.users = action.payload;
+      }
+      state.loading = false;
+    });
+
+    builder.addCase(deleteItemsByIds.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Users has been deleted');
+    });
+
+    builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(deleteItem.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItem.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Users'.slice(0, -1)} has been deleted`);
+    });
+
+    builder.addCase(deleteItem.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(create.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Users'.slice(0, -1)} has been created`);
+    });
+
+    builder.addCase(update.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(update.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Users'.slice(0, -1)} has been updated`);
+    });
+    builder.addCase(update.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(uploadCsv.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(uploadCsv.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Users has been uploaded');
+    });
+    builder.addCase(uploadCsv.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { setRefetch } = usersSlice.actions;
+
+export default usersSlice.reducer;
diff --git a/frontend/src/stores/usersSlice.ts b/frontend/src/stores/usersSlice.ts
new file mode 100644
index 0000000..aa7f5be
--- /dev/null
+++ b/frontend/src/stores/usersSlice.ts
@@ -0,0 +1,119 @@
+import { createSlice, createAsyncThunk } from '@reduxjs/toolkit';
+import axios from 'axios';
+
+interface MainState {
+  users: any;
+  loading: boolean;
+  notify: {
+    showNotification: boolean;
+    textNotification: string;
+    typeNotification: string;
+  };
+}
+
+const initialState: MainState = {
+  users: [],
+  loading: false,
+  notify: {
+    showNotification: false,
+    textNotification: '',
+    typeNotification: 'warn',
+  },
+};
+
+export const fetch = createAsyncThunk('users/fetch', async (data: any) => {
+  const { id, query } = data;
+  const result = await axios.get(`users${query || (id ? `/${id}` : '')}`);
+  return id ? result.data : result.data.rows;
+});
+
+export const deleteItem = createAsyncThunk(
+  'users/deleteUser',
+  async (id: string, thunkAPI) => {
+    try {
+      await axios.delete(`users/${id}`);
+      thunkAPI.dispatch(fetch({ id: '', query: '' }));
+    } catch (error) {
+      console.log(error);
+    }
+
+    // showNotification('Users has been deleted', 'success');
+  },
+);
+
+export const create = createAsyncThunk(
+  'users/createUser',
+  async (data: any) => {
+    const result = await axios.post('users', { data });
+    // showNotification('Users has been created', 'success');
+    return result.data;
+  },
+);
+
+export const update = createAsyncThunk(
+  'users/updateUser',
+  async (payload: any) => {
+    const result = await axios.put(`users/${payload.id}`, {
+      id: payload.id,
+      data: payload.data,
+    });
+    return result.data;
+  },
+);
+
+export const usersSlice = createSlice({
+  name: 'users',
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addCase(fetch.pending, (state) => {
+      state.loading = true;
+    });
+    builder.addCase(fetch.rejected, (state) => {
+      state.loading = false;
+    });
+
+    builder.addCase(fetch.fulfilled, (state, action) => {
+      state.users = action.payload;
+      state.loading = false;
+    });
+
+    builder.addCase(deleteItem.pending, (state) => {
+      state.loading = true;
+    });
+
+    builder.addCase(deleteItem.fulfilled, (state) => {
+      state.loading = false;
+    });
+
+    builder.addCase(deleteItem.rejected, (state) => {
+      state.loading = false;
+    });
+
+    builder.addCase(create.pending, (state) => {
+      state.loading = true;
+    });
+    builder.addCase(create.rejected, (state) => {
+      state.loading = false;
+    });
+
+    builder.addCase(create.fulfilled, (state) => {
+      state.loading = false;
+    });
+
+    builder.addCase(update.pending, (state) => {
+      state.loading = true;
+    });
+    builder.addCase(update.fulfilled, (state) => {
+      state.loading = false;
+    });
+    builder.addCase(update.rejected, (state) => {
+      state.loading = false;
+    });
+  },
+});
+
+// Action creators are generated for each case reducer function
+// export const {  } = usersSlice.actions
+
+export default usersSlice.reducer;
diff --git a/frontend/src/stores/usuarios/usuariosSlice.ts b/frontend/src/stores/usuarios/usuariosSlice.ts
new file mode 100644
index 0000000..b64a345
--- /dev/null
+++ b/frontend/src/stores/usuarios/usuariosSlice.ts
@@ -0,0 +1,236 @@
+import { createSlice, createAsyncThunk, PayloadAction } from '@reduxjs/toolkit';
+import axios from 'axios';
+import {
+  fulfilledNotify,
+  rejectNotify,
+  resetNotify,
+} from '../../helpers/notifyStateHandler';
+
+interface MainState {
+  usuarios: any;
+  loading: boolean;
+  count: number;
+  refetch: boolean;
+  rolesWidgets: any[];
+  notify: {
+    showNotification: boolean;
+    textNotification: string;
+    typeNotification: string;
+  };
+}
+
+const initialState: MainState = {
+  usuarios: [],
+  loading: false,
+  count: 0,
+  refetch: false,
+  rolesWidgets: [],
+  notify: {
+    showNotification: false,
+    textNotification: '',
+    typeNotification: 'warn',
+  },
+};
+
+export const fetch = createAsyncThunk('usuarios/fetch', async (data: any) => {
+  const { id, query } = data;
+  const result = await axios.get(`usuarios${query || (id ? `/${id}` : '')}`);
+  return id
+    ? result.data
+    : { rows: result.data.rows, count: result.data.count };
+});
+
+export const deleteItemsByIds = createAsyncThunk(
+  'usuarios/deleteByIds',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      await axios.post('usuarios/deleteByIds', { data });
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const deleteItem = createAsyncThunk(
+  'usuarios/deleteUsuarios',
+  async (id: string, { rejectWithValue }) => {
+    try {
+      await axios.delete(`usuarios/${id}`);
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const create = createAsyncThunk(
+  'usuarios/createUsuarios',
+  async (data: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.post('usuarios', { data });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const uploadCsv = createAsyncThunk(
+  'usuarios/uploadCsv',
+  async (file: File, { rejectWithValue }) => {
+    try {
+      const data = new FormData();
+      data.append('file', file);
+      data.append('filename', file.name);
+
+      const result = await axios.post('usuarios/bulk-import', data, {
+        headers: {
+          'Content-Type': 'multipart/form-data',
+        },
+      });
+
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const update = createAsyncThunk(
+  'usuarios/updateUsuarios',
+  async (payload: any, { rejectWithValue }) => {
+    try {
+      const result = await axios.put(`usuarios/${payload.id}`, {
+        id: payload.id,
+        data: payload.data,
+      });
+      return result.data;
+    } catch (error) {
+      if (!error.response) {
+        throw error;
+      }
+
+      return rejectWithValue(error.response.data);
+    }
+  },
+);
+
+export const usuariosSlice = createSlice({
+  name: 'usuarios',
+  initialState,
+  reducers: {
+    setRefetch: (state, action: PayloadAction<boolean>) => {
+      state.refetch = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(fetch.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(fetch.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(fetch.fulfilled, (state, action) => {
+      if (action.payload.rows && action.payload.count >= 0) {
+        state.usuarios = action.payload.rows;
+        state.count = action.payload.count;
+      } else {
+        state.usuarios = action.payload;
+      }
+      state.loading = false;
+    });
+
+    builder.addCase(deleteItemsByIds.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItemsByIds.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Usuarios has been deleted');
+    });
+
+    builder.addCase(deleteItemsByIds.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(deleteItem.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+
+    builder.addCase(deleteItem.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Usuarios'.slice(0, -1)} has been deleted`);
+    });
+
+    builder.addCase(deleteItem.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(create.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(create.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Usuarios'.slice(0, -1)} has been created`);
+    });
+
+    builder.addCase(update.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(update.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, `${'Usuarios'.slice(0, -1)} has been updated`);
+    });
+    builder.addCase(update.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+
+    builder.addCase(uploadCsv.pending, (state) => {
+      state.loading = true;
+      resetNotify(state);
+    });
+    builder.addCase(uploadCsv.fulfilled, (state) => {
+      state.loading = false;
+      fulfilledNotify(state, 'Usuarios has been uploaded');
+    });
+    builder.addCase(uploadCsv.rejected, (state, action) => {
+      state.loading = false;
+      rejectNotify(state, action);
+    });
+  },
+});
+
+// Action creators are generated for each case reducer function
+export const { setRefetch } = usuariosSlice.actions;
+
+export default usuariosSlice.reducer;
diff --git a/frontend/src/styles.ts b/frontend/src/styles.ts
new file mode 100644
index 0000000..424aa87
--- /dev/null
+++ b/frontend/src/styles.ts
@@ -0,0 +1,135 @@
+interface StyleObject {
+  aside: string;
+  asideScrollbars: string;
+  asideBrand: string;
+  asideMenuItem: string;
+  asideMenuItemActive: string;
+  asideMenuDropdown: string;
+  navBarItemLabel: string;
+  navBarItemLabelHover: string;
+  navBarItemLabelActiveColor: string;
+  overlay: string;
+  activeLinkColor: string;
+  bgLayoutColor: string;
+  iconsColor: string;
+  cardsColor: string;
+  focusRingColor: string;
+  corners: string;
+  cardsStyle: string;
+  linkColor: string;
+  websiteHeder: string;
+  borders: string;
+  shadow: string;
+  websiteSectionStyle: string;
+  textSecondary: string;
+}
+
+export const white: StyleObject = {
+  aside: 'bg-white dark:text-white',
+  asideScrollbars: 'aside-scrollbars-light',
+  asideBrand: '',
+  asideMenuItem:
+    'text-gray-700 hover:bg-gray-100/70 dark:text-dark-500 dark:hover:text-white dark:hover:bg-dark-800',
+  asideMenuItemActive: 'font-bold text-black dark:text-white',
+  asideMenuDropdown: 'bg-gray-100/75',
+  navBarItemLabel: 'text-blue-600',
+  navBarItemLabelHover: 'hover:text-black',
+  navBarItemLabelActiveColor: 'text-black',
+  overlay: 'from-white via-gray-100 to-white',
+  activeLinkColor: 'bg-gray-100/70',
+  bgLayoutColor: 'bg-gray-50',
+  iconsColor: 'text-blue-500',
+  cardsColor: 'bg-white',
+  focusRingColor:
+    'focus:ring focus:ring-blue-600 focus:border-blue-600 focus:outline-none border-gray-300 dark:focus:ring-blue-600 dark:focus:border-blue-600',
+  corners: 'rounded',
+  cardsStyle: 'bg-white border border-pavitra-400',
+  linkColor: 'text-blue-600',
+  websiteHeder: 'border-b border-gray-200',
+  borders: 'border-gray-200',
+  shadow: '',
+  websiteSectionStyle: '',
+  textSecondary: 'text-gray-500',
+};
+
+export const skyBlueTheme: StyleObject = {
+  aside:
+    'bg-skyBlueTheme-800 text-skyBlueTheme-text dark:text-white  lg:rounded-lg',
+  asideScrollbars: 'aside-scrollbars-blue',
+  asideBrand: 'text-blue-500 bg-white',
+  asideMenuItem:
+    'text-skyBlueTheme-text  hover:text-white dark:text-dark-500 dark:hover:text-white dark:hover:bg-dark-800 dark:text-white',
+  asideMenuItemActive: 'font-bold text-skyBlueTheme-iconsColor dark:text-white',
+  activeLinkColor: 'bg-white rounded-lg',
+  asideMenuDropdown: 'bg-blue-700/50',
+  navBarItemLabel: 'text-primaryText',
+  iconsColor: 'text-skyBlueTheme-iconsColor dark:text-blue-500',
+  navBarItemLabelHover: 'hover:text-stone-400',
+  navBarItemLabelActiveColor: 'text-skyBlueTheme-800',
+  overlay: 'bg-skyBlueTheme-mainBG',
+  bgLayoutColor: 'bg-skyBlueTheme-mainBG',
+  cardsColor: 'bg-skyBlueTheme-cardColor',
+  focusRingColor:
+    'focus:ring focus:ring-skyBlueTheme-800 focus:border-skyBlueTheme-800 focus:outline-none dark:focus:ring-blue-600 border-gray-300 dark:focus:border-blue-600',
+  corners: 'rounded-lg',
+  cardsStyle: 'bg-white border border-pavitra-400',
+  linkColor: 'text-skyBlueTheme-buttonColor',
+  websiteHeder: 'border-b border-gray-200',
+  borders: 'border-gray-200',
+  shadow: '',
+  websiteSectionStyle: ' bg-skyBlueTheme-webSiteComponentBg',
+  textSecondary: 'text-slate-600',
+};
+
+export const dataGridStyles = {
+  '& .MuiDataGrid-cell': {
+    paddingX: 3,
+    border: 'none',
+  },
+  '& .MuiDataGrid-columnHeader': {
+    paddingX: 3,
+  },
+  '& .MuiDataGrid-columnHeaderCheckbox': {
+    paddingX: 0,
+  },
+  '& .MuiDataGrid-columnHeaders': {
+    paddingY: 4,
+    borderStartStartRadius: 7,
+    borderStartEndRadius: 7,
+  },
+  '& .MuiDataGrid-footerContainer': {
+    paddingY: 0.5,
+    borderEndStartRadius: 7,
+    borderEndEndRadius: 7,
+  },
+  '& .MuiDataGrid-root': {
+    border: 'none',
+  },
+};
+
+export const basic: StyleObject = {
+  aside: 'bg-gray-800',
+  asideScrollbars: 'aside-scrollbars-gray',
+  asideBrand: 'bg-gray-900 text-white',
+  asideMenuItem: 'text-gray-300 hover:text-white',
+  asideMenuItemActive: 'font-bold text-white',
+  asideMenuDropdown: 'bg-gray-700/50',
+  navBarItemLabel: 'text-black',
+  navBarItemLabelHover: 'hover:text-blue-500',
+  navBarItemLabelActiveColor: 'text-blue-600',
+  overlay: 'from-gray-700 via-gray-900 to-gray-700',
+  activeLinkColor: 'bg-gray-100/70',
+  bgLayoutColor: 'bg-gray-50',
+  iconsColor: 'text-blue-500',
+  cardsColor: 'bg-white',
+  focusRingColor:
+    'focus:ring focus:ring-blue-600 focus:border-blue-600 focus:outline-none dark:focus:ring-blue-600 border-gray-300 dark:focus:border-blue-600',
+  corners: 'rounded',
+  cardsStyle: 'bg-white border border-pavitra-400',
+  linkColor: 'text-black',
+  websiteHeder: '',
+  borders: '',
+  shadow: '',
+  websiteSectionStyle: '',
+  textSecondary: '',
+};
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
new file mode 100644
index 0000000..6001487
--- /dev/null
+++ b/frontend/tailwind.config.js
@@ -0,0 +1,129 @@
+/* eslint-env node */
+/* eslint-disable-next-line */
+const plugin = require('tailwindcss/plugin');
+
+module.exports = {
+  content: ['./src/**/*.{js,ts,jsx,tsx}'],
+  darkMode: 'class', // or 'media' or 'class'
+  theme: {
+    asideScrollbars: {
+      light: 'light',
+      gray: 'gray',
+    },
+    extend: {
+      zIndex: {
+        '-1': '-1',
+      },
+      flexGrow: {
+        5: '5',
+      },
+      maxHeight: {
+        'screen-menu': 'calc(100vh - 3.5rem)',
+        modal: 'calc(100vh - 160px)',
+      },
+      transitionProperty: {
+        position: 'right, left, top, bottom, margin, padding',
+        textColor: 'color',
+      },
+      keyframes: {
+        'fade-out': {
+          from: { opacity: 1 },
+          to: { opacity: 0 },
+        },
+        'fade-in': {
+          from: { opacity: 0 },
+          to: { opacity: 1 },
+        },
+      },
+      animation: {
+        'fade-out': 'fade-out 250ms ease-in-out',
+        'fade-in': 'fade-in 250ms ease-in-out',
+      },
+      colors: {
+        dark: {
+          900: '#131618',
+          800: '#21242A',
+          700: '#2C2F36',
+          600: '#9CA3AF',
+          500: '#CBD5E1',
+        },
+        green: {
+          text: '#45B26B',
+        },
+        pavitra: {
+          blue: '#0162FD',
+          green: '#00B448',
+          orange: '#FFAA00',
+          red: '#F20041',
+          900: '#14142A',
+          800: '#4E4B66',
+          700: '#6E7191',
+          600: '#A0A3BD',
+          500: '#D9DBE9',
+          400: '#EFF0F6',
+          300: '#F7F7FC',
+        },
+
+        skyBlueTheme: {
+          text: '#515564',
+          iconsColor: '#5A7BEB',
+          mainBG: '#EDF2FA',
+          buttonColor: '#5A7BEB',
+          outsideCardColor: '#FFFFFF',
+          cardColor: '#F5F7FA',
+          webSiteComponentBg: '#FFFFFF',
+          testimonials: '#FFFFFF',
+          pricing: '#FFFFFF',
+          diversityContact: '#FFFFFF',
+          diversityMain: '#5A7BEB',
+          diversityHeader: '#5A7BEB',
+
+          websiteBG: '#FFFFFF',
+          900: '#14142A',
+          800: '#DFE7F4',
+        },
+        primaryText: '#2F4CAD',
+      },
+      fontFamily: {
+        sans: ['Poppins', 'sans-serif'],
+      },
+      borderRadius: {
+        '3xl': '2rem',
+      },
+    },
+  },
+  plugins: [
+    require('@tailwindcss/forms'),
+    require('@tailwindcss/typography'),
+    plugin(function ({ matchUtilities, theme }) {
+      matchUtilities(
+        {
+          'aside-scrollbars': (value) => {
+            const track = value === 'light' ? '100' : '900';
+            const thumb = value === 'light' ? '300' : '600';
+            const color = value === 'light' ? 'gray' : value;
+
+            return {
+              scrollbarWidth: 'thin',
+              scrollbarColor: `${theme(`colors.${color}.${thumb}`)} ${theme(
+                `colors.${color}.${track}`,
+              )}`,
+              '&::-webkit-scrollbar': {
+                width: '8px',
+                height: '8px',
+              },
+              '&::-webkit-scrollbar-track': {
+                backgroundColor: theme(`colors.${color}.${track}`),
+              },
+              '&::-webkit-scrollbar-thumb': {
+                borderRadius: '0.25rem',
+                backgroundColor: theme(`colors.${color}.${thumb}`),
+              },
+            };
+          },
+        },
+        { values: theme('asideScrollbars') },
+      );
+    }),
+  ],
+};
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
new file mode 100644
index 0000000..b8d5978
--- /dev/null
+++ b/frontend/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": false,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
new file mode 100644
index 0000000..5c2e352
--- /dev/null
+++ b/frontend/yarn.lock
@@ -0,0 +1,3608 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@alloc/quick-lru@^5.2.0":
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz"
+  integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
+
+"@babel/code-frame@^7.0.0", "@babel/code-frame@^7.25.9", "@babel/code-frame@^7.26.2":
+  version "7.26.2"
+  resolved "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.26.2.tgz"
+  integrity sha512-RJlIHRueQgwWitWgF8OdFYGZX328Ax5BCemNGlqHfplnRT9ESi8JkFlvaVYbS+UubVY6dpv87Fs2u5M29iNFVQ==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.25.9"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
+"@babel/generator@^7.26.3":
+  version "7.26.3"
+  resolved "https://registry.npmjs.org/@babel/generator/-/generator-7.26.3.tgz"
+  integrity sha512-6FF/urZvD0sTeO7k6/B15pMLC4CHUv1426lzr3N01aHJTl046uCAh9LXW/fzeXXjPNCJ6iABW5XaWOsIZB93aQ==
+  dependencies:
+    "@babel/parser" "^7.26.3"
+    "@babel/types" "^7.26.3"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^3.0.2"
+
+"@babel/helper-module-imports@^7.16.7":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.25.9.tgz"
+  integrity sha512-tnUA4RsrmflIM6W6RFTLFSXITtl0wKjgpnLgXyowocVPrbYrLUXSBXDgTs8BlbmIzIdlBySRQjINYs2BAkiLtw==
+  dependencies:
+    "@babel/traverse" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/helper-string-parser@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.25.9.tgz"
+  integrity sha512-4A/SCr/2KLd5jrtOMFzaKjVtAei3+2r/NChoBNoZ3EyP/+GlhoaEGoWOZUmFmoITP7zOJyHIMm+DYRd8o3PvHA==
+
+"@babel/helper-validator-identifier@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.25.9.tgz"
+  integrity sha512-Ed61U6XJc3CVRfkERJWDz4dJwKe7iLmmJsbOGu9wSloNSFttHV0I8g6UAgb7qnK5ly5bGLPd4oXZlxCdANBOWQ==
+
+"@babel/parser@^7.25.9", "@babel/parser@^7.26.3":
+  version "7.26.3"
+  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.26.3.tgz"
+  integrity sha512-WJ/CvmY8Mea8iDXo6a7RK2wbmJITT5fN3BEkRuFlxVyNx8jOKIIhmC4fSkTcPcf8JyavbBwIe6OpiCOBXt/IcA==
+  dependencies:
+    "@babel/types" "^7.26.3"
+
+"@babel/runtime-corejs3@^7.10.2":
+  version "7.19.0"
+  resolved "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.19.0.tgz"
+  integrity sha512-JyXXoCu1N8GLuKc2ii8y5RGma5FMpFeO2nAQIe0Yzrbq+rQnN+sFj47auLblR5ka6aHNGPDgv8G/iI2Grb0ldQ==
+  dependencies:
+    core-js-pure "^3.20.2"
+    regenerator-runtime "^0.13.4"
+
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.9", "@babel/runtime@^7.20.7", "@babel/runtime@^7.21.0", "@babel/runtime@^7.23.2", "@babel/runtime@^7.23.9", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+  version "7.26.0"
+  resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz"
+  integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
+"@babel/template@^7.25.9":
+  version "7.25.9"
+  resolved "https://registry.npmjs.org/@babel/template/-/template-7.25.9.tgz"
+  integrity sha512-9DGttpmPvIxBb/2uwpVo3dqJ+O6RooAFOS+lB+xDqoE2PVCE8nfoHMdZLpfCQRLwvohzXISPZcgxt80xLfsuwg==
+  dependencies:
+    "@babel/code-frame" "^7.25.9"
+    "@babel/parser" "^7.25.9"
+    "@babel/types" "^7.25.9"
+
+"@babel/traverse@^7.25.9":
+  version "7.26.4"
+  resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.26.4.tgz"
+  integrity sha512-fH+b7Y4p3yqvApJALCPJcwb0/XaOSgtK4pzV6WVjPR5GLFQBRI7pfoX2V2iM48NXvX07NUxxm1Vw98YjqTcU5w==
+  dependencies:
+    "@babel/code-frame" "^7.26.2"
+    "@babel/generator" "^7.26.3"
+    "@babel/parser" "^7.26.3"
+    "@babel/template" "^7.25.9"
+    "@babel/types" "^7.26.3"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
+"@babel/types@^7.25.9", "@babel/types@^7.26.3":
+  version "7.26.3"
+  resolved "https://registry.npmjs.org/@babel/types/-/types-7.26.3.tgz"
+  integrity sha512-vN5p+1kl59GVKMvTHt55NzzmYVxprfJD+ql7U9NFIfKCBkYE55LYtS+WtPlaYOyzydrKI8Nezd+aZextrd+FMA==
+  dependencies:
+    "@babel/helper-string-parser" "^7.25.9"
+    "@babel/helper-validator-identifier" "^7.25.9"
+
+"@emotion/babel-plugin@^11.13.5":
+  version "11.13.5"
+  resolved "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz"
+  integrity sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==
+  dependencies:
+    "@babel/helper-module-imports" "^7.16.7"
+    "@babel/runtime" "^7.18.3"
+    "@emotion/hash" "^0.9.2"
+    "@emotion/memoize" "^0.9.0"
+    "@emotion/serialize" "^1.3.3"
+    babel-plugin-macros "^3.1.0"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.2.0"
+
+"@emotion/cache@^11.13.5", "@emotion/cache@^11.14.0", "@emotion/cache@^11.4.0":
+  version "11.14.0"
+  resolved "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz"
+  integrity sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==
+  dependencies:
+    "@emotion/memoize" "^0.9.0"
+    "@emotion/sheet" "^1.4.0"
+    "@emotion/utils" "^1.4.2"
+    "@emotion/weak-memoize" "^0.4.0"
+    stylis "4.2.0"
+
+"@emotion/hash@^0.9.2":
+  version "0.9.2"
+  resolved "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz"
+  integrity sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==
+
+"@emotion/is-prop-valid@^1.3.0":
+  version "1.3.1"
+  resolved "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz"
+  integrity sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==
+  dependencies:
+    "@emotion/memoize" "^0.9.0"
+
+"@emotion/memoize@^0.9.0":
+  version "0.9.0"
+  resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz"
+  integrity sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==
+
+"@emotion/react@^11.11.3", "@emotion/react@^11.8.1":
+  version "11.14.0"
+  resolved "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz"
+  integrity sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.13.5"
+    "@emotion/cache" "^11.14.0"
+    "@emotion/serialize" "^1.3.3"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.2.0"
+    "@emotion/utils" "^1.4.2"
+    "@emotion/weak-memoize" "^0.4.0"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@^1.3.3":
+  version "1.3.3"
+  resolved "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz"
+  integrity sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==
+  dependencies:
+    "@emotion/hash" "^0.9.2"
+    "@emotion/memoize" "^0.9.0"
+    "@emotion/unitless" "^0.10.0"
+    "@emotion/utils" "^1.4.2"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.4.0":
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz"
+  integrity sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==
+
+"@emotion/styled@^11.11.0":
+  version "11.14.0"
+  resolved "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.0.tgz"
+  integrity sha512-XxfOnXFffatap2IyCeJyNov3kiDQWoR08gPUQxvbL7fxKryGBKUZUkG6Hz48DZwVrJSVh9sJboyV1Ds4OW6SgA==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    "@emotion/babel-plugin" "^11.13.5"
+    "@emotion/is-prop-valid" "^1.3.0"
+    "@emotion/serialize" "^1.3.3"
+    "@emotion/use-insertion-effect-with-fallbacks" "^1.2.0"
+    "@emotion/utils" "^1.4.2"
+
+"@emotion/unitless@^0.10.0":
+  version "0.10.0"
+  resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz"
+  integrity sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==
+
+"@emotion/use-insertion-effect-with-fallbacks@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz"
+  integrity sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==
+
+"@emotion/utils@^1.4.2":
+  version "1.4.2"
+  resolved "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz"
+  integrity sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==
+
+"@emotion/weak-memoize@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz"
+  integrity sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==
+
+"@eslint/eslintrc@^1.3.2":
+  version "1.3.2"
+  resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.2.tgz"
+  integrity sha512-AXYd23w1S/bv3fTs3Lz0vjiYemS08jWkI3hYyS9I1ry+0f+Yjs1wm+sU0BS8qDOPrBIkp4qHYC16I8uVtpLajQ==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.3.2"
+    espree "^9.4.0"
+    globals "^13.15.0"
+    ignore "^5.2.0"
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    minimatch "^3.1.2"
+    strip-json-comments "^3.1.1"
+
+"@floating-ui/core@^1.6.0":
+  version "1.6.8"
+  resolved "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz"
+  integrity sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==
+  dependencies:
+    "@floating-ui/utils" "^0.2.8"
+
+"@floating-ui/dom@^1.0.1":
+  version "1.6.12"
+  resolved "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz"
+  integrity sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==
+  dependencies:
+    "@floating-ui/core" "^1.6.0"
+    "@floating-ui/utils" "^0.2.8"
+
+"@floating-ui/utils@^0.2.8":
+  version "0.2.8"
+  resolved "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz"
+  integrity sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==
+
+"@humanwhocodes/config-array@^0.10.4":
+  version "0.10.4"
+  resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.10.4.tgz"
+  integrity sha512-mXAIHxZT3Vcpg83opl1wGlVZ9xydbfZO3r5YfRSH6Gpp2J/PfdBP0wbDa2sO6/qRbcalpoevVyW6A/fI6LfeMw==
+  dependencies:
+    "@humanwhocodes/object-schema" "^1.2.1"
+    debug "^4.1.1"
+    minimatch "^3.0.4"
+
+"@humanwhocodes/gitignore-to-minimatch@^1.0.2":
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/@humanwhocodes/gitignore-to-minimatch/-/gitignore-to-minimatch-1.0.2.tgz"
+  integrity sha512-rSqmMJDdLFUsyxR6FMtD00nfQKKLFb1kv+qBbOVKqErvloEIJLo5bDTJTQNTYgeyp78JsA7u/NPi5jT1GR/MuA==
+
+"@humanwhocodes/module-importer@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz"
+  integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
+
+"@humanwhocodes/object-schema@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz"
+  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==
+
+"@isaacs/cliui@^8.0.2":
+  version "8.0.2"
+  resolved "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz"
+  integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
+  dependencies:
+    string-width "^5.1.2"
+    string-width-cjs "npm:string-width@^4.2.0"
+    strip-ansi "^7.0.1"
+    strip-ansi-cjs "npm:strip-ansi@^6.0.1"
+    wrap-ansi "^8.1.0"
+    wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"
+
+"@jridgewell/gen-mapping@^0.3.2", "@jridgewell/gen-mapping@^0.3.5":
+  version "0.3.8"
+  resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz"
+  integrity sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==
+  dependencies:
+    "@jridgewell/set-array" "^1.2.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz"
+  integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
+
+"@jridgewell/set-array@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz"
+  integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
+
+"@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14":
+  version "1.5.0"
+  resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz"
+  integrity sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==
+
+"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
+  version "0.3.25"
+  resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz"
+  integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
+"@kurkle/color@^0.3.0":
+  version "0.3.4"
+  resolved "https://registry.npmjs.org/@kurkle/color/-/color-0.3.4.tgz"
+  integrity sha512-M5UknZPHRu3DEDWoipU6sE8PdkZ6Z/S+v4dD+Ke8IaNlpdSQah50lz1KtcFBa2vsdOnwbbnxJwVM4wty6udA5w==
+
+"@mdi/js@^7.4.47":
+  version "7.4.47"
+  resolved "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz"
+  integrity sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==
+
+"@mui/core-downloads-tracker@^5.16.13":
+  version "5.16.13"
+  resolved "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-5.16.13.tgz"
+  integrity sha512-xe5RwI0Q2O709Bd2Y7l1W1NIwNmln0y+xaGk5VgX3vDJbkQEqzdfTFZ73e0CkEZgJwyiWgk5HY0l8R4nysOxjw==
+
+"@mui/material@^5.15.7":
+  version "5.16.13"
+  resolved "https://registry.npmjs.org/@mui/material/-/material-5.16.13.tgz"
+  integrity sha512-FhLDkDPYDzvrWCHFsdXzRArhS4AdYufU8d69rmLL+bwhodPcbm2C7cS8Gq5VR32PsW6aKZb58gvAgvEVaiiJbA==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/core-downloads-tracker" "^5.16.13"
+    "@mui/system" "^5.16.13"
+    "@mui/types" "^7.2.15"
+    "@mui/utils" "^5.16.13"
+    "@popperjs/core" "^2.11.8"
+    "@types/react-transition-group" "^4.4.10"
+    clsx "^2.1.0"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+    react-is "^19.0.0"
+    react-transition-group "^4.4.5"
+
+"@mui/private-theming@^5.16.13":
+  version "5.16.13"
+  resolved "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.16.13.tgz"
+  integrity sha512-+s0FklvDvO7j0yBZn19DIIT3rLfub2fWvXGtMX49rG/xHfDFcP7fbWbZKHZMMP/2/IoTRDrZCbY1iP0xZlmuJA==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/utils" "^5.16.13"
+    prop-types "^15.8.1"
+
+"@mui/styled-engine@^5.16.13":
+  version "5.16.13"
+  resolved "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.16.13.tgz"
+  integrity sha512-2XNHEG8/o1ucSLhTA9J+HIIXjzlnEc0OV7kneeUQ5JukErPYT2zc6KYBDLjlKWrzQyvnQzbiffjjspgHUColZg==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@emotion/cache" "^11.13.5"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+
+"@mui/system@^5.16.13":
+  version "5.16.13"
+  resolved "https://registry.npmjs.org/@mui/system/-/system-5.16.13.tgz"
+  integrity sha512-JnO3VH3yNoAmgyr44/2jiS1tcNwshwAqAaG5fTEEjHQbkuZT/mvPYj2GC1cON0zEQ5V03xrCNl/D+gU9AXibpw==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/private-theming" "^5.16.13"
+    "@mui/styled-engine" "^5.16.13"
+    "@mui/types" "^7.2.15"
+    "@mui/utils" "^5.16.13"
+    clsx "^2.1.0"
+    csstype "^3.1.3"
+    prop-types "^15.8.1"
+
+"@mui/types@^7.2.15":
+  version "7.2.20"
+  resolved "https://registry.npmjs.org/@mui/types/-/types-7.2.20.tgz"
+  integrity sha512-straFHD7L8v05l/N5vcWk+y7eL9JF0C2mtph/y4BPm3gn2Eh61dDwDB65pa8DLss3WJfDXYC7Kx5yjP0EmXpgw==
+
+"@mui/utils@^5.14.16", "@mui/utils@^5.16.13":
+  version "5.16.13"
+  resolved "https://registry.npmjs.org/@mui/utils/-/utils-5.16.13.tgz"
+  integrity sha512-35kLiShnDPByk57Mz4PP66fQUodCFiOD92HfpW6dK9lc7kjhZsKHRKeYPgWuwEHeXwYsCSFtBCW4RZh/8WT+TQ==
+  dependencies:
+    "@babel/runtime" "^7.23.9"
+    "@mui/types" "^7.2.15"
+    "@types/prop-types" "^15.7.12"
+    clsx "^2.1.1"
+    prop-types "^15.8.1"
+    react-is "^19.0.0"
+
+"@mui/x-data-grid@^6.19.2":
+  version "6.20.4"
+  resolved "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-6.20.4.tgz"
+  integrity sha512-I0JhinVV4e25hD2dB+R6biPBtpGeFrXf8RwlMPQbr9gUggPmPmNtWKo8Kk2PtBBMlGtdMAgHWe7PqhmucUxU1w==
+  dependencies:
+    "@babel/runtime" "^7.23.2"
+    "@mui/utils" "^5.14.16"
+    clsx "^2.0.0"
+    prop-types "^15.8.1"
+    reselect "^4.1.8"
+
+"@next/env@14.2.22":
+  version "14.2.22"
+  resolved "https://registry.npmjs.org/@next/env/-/env-14.2.22.tgz"
+  integrity sha512-EQ6y1QeNQglNmNIXvwP/Bb+lf7n9WtgcWvtoFsHquVLCJUuxRs+6SfZ5EK0/EqkkLex4RrDySvKgKNN7PXip7Q==
+
+"@next/eslint-plugin-next@13.0.4":
+  version "13.0.4"
+  resolved "https://registry.npmjs.org/@next/eslint-plugin-next/-/eslint-plugin-next-13.0.4.tgz"
+  integrity sha512-jZ4urKT+aO9QHm3ttihrIQscQISDSKK8isAom750+EySn9o3LCSkTdPGBtvBqY7Yku+NqhfQempR5J58DqTaVg==
+  dependencies:
+    glob "7.1.7"
+
+"@next/swc-darwin-arm64@14.2.22":
+  version "14.2.22"
+  resolved "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.22.tgz"
+  integrity sha512-HUaLiehovgnqY4TMBZJ3pDaOsTE1spIXeR10pWgdQVPYqDGQmHJBj3h3V6yC0uuo/RoY2GC0YBFRkOX3dI9WVQ==
+
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
+  integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
+  dependencies:
+    "@nodelib/fs.stat" "2.0.5"
+    run-parallel "^1.1.9"
+
+"@nodelib/fs.stat@^2.0.2", "@nodelib/fs.stat@2.0.5":
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
+  integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
+
+"@nodelib/fs.walk@^1.2.3":
+  version "1.2.8"
+  resolved "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
+"@pkgjs/parseargs@^0.11.0":
+  version "0.11.0"
+  resolved "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz"
+  integrity sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==
+
+"@pkgr/utils@^2.3.1":
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/@pkgr/utils/-/utils-2.3.1.tgz"
+  integrity sha512-wfzX8kc1PMyUILA+1Z/EqoE4UCXGy0iRGMhPwdfae1+f0OXlLqCk+By+aMzgJBzR9AzS4CDizioG6Ss1gvAFJw==
+  dependencies:
+    cross-spawn "^7.0.3"
+    is-glob "^4.0.3"
+    open "^8.4.0"
+    picocolors "^1.0.0"
+    tiny-glob "^0.2.9"
+    tslib "^2.4.0"
+
+"@popperjs/core@^2.11.6", "@popperjs/core@^2.11.8":
+  version "2.11.8"
+  resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
+"@reduxjs/toolkit@^2.1.0":
+  version "2.5.0"
+  resolved "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.5.0.tgz"
+  integrity sha512-awNe2oTodsZ6LmRqmkFhtb/KH03hUhxOamEQy411m3Njj3BbFvoBovxo4Q1cBWnV1ErprVj9MlF0UPXkng0eyg==
+  dependencies:
+    immer "^10.0.3"
+    redux "^5.0.1"
+    redux-thunk "^3.1.0"
+    reselect "^5.1.0"
+
+"@restart/hooks@^0.4.7":
+  version "0.4.16"
+  resolved "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz"
+  integrity sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==
+  dependencies:
+    dequal "^2.0.3"
+
+"@rushstack/eslint-patch@^1.1.3":
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.1.4.tgz"
+  integrity sha512-LwzQKA4vzIct1zNZzBmRKI9QuNpLgTQMEjsQLf3BXuGYb3QPTP4Yjf6mkdX+X1mYttZ808QpOwAzZjv28kq7DA==
+
+"@seznam/compose-react-refs@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/@seznam/compose-react-refs/-/compose-react-refs-1.0.6.tgz"
+  integrity sha512-izzOXQfeQLonzrIQb8u6LQ8dk+ymz3WXTIXjvOlTXHq6sbzROg3NWU+9TTAOpEoK9Bth24/6F/XrfHJ5yR5n6Q==
+
+"@swc/counter@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz"
+  integrity sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==
+
+"@swc/helpers@0.5.5":
+  version "0.5.5"
+  resolved "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz"
+  integrity sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==
+  dependencies:
+    "@swc/counter" "^0.1.3"
+    tslib "^2.4.0"
+
+"@tailwindcss/forms@^0.5.7":
+  version "0.5.9"
+  resolved "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.9.tgz"
+  integrity sha512-tM4XVr2+UVTxXJzey9Twx48c1gcxFStqn1pQz0tRsX8o3DvxhN5oY5pvyAbUx7VTaZxpej4Zzvc6h+1RJBzpIg==
+  dependencies:
+    mini-svg-data-uri "^1.2.3"
+
+"@tailwindcss/line-clamp@^0.4.4":
+  version "0.4.4"
+  resolved "https://registry.npmjs.org/@tailwindcss/line-clamp/-/line-clamp-0.4.4.tgz"
+  integrity sha512-5U6SY5z8N42VtrCrKlsTAA35gy2VSyYtHWCsg1H87NU1SXnEfekTVlrga9fzUDrrHcGi2Lb5KenUWb4lRQT5/g==
+
+"@tailwindcss/typography@^0.5.13":
+  version "0.5.15"
+  resolved "https://registry.npmjs.org/@tailwindcss/typography/-/typography-0.5.15.tgz"
+  integrity sha512-AqhlCXl+8grUz8uqExv5OTtgpjuVIwFTSXTrh8y9/pw6q2ek7fJ+Y8ZEVw7EB2DCcuCOtEjf9w3+J3rzts01uA==
+  dependencies:
+    lodash.castarray "^4.4.0"
+    lodash.isplainobject "^4.0.6"
+    lodash.merge "^4.6.2"
+    postcss-selector-parser "6.0.10"
+
+"@tinymce/tinymce-react@^4.3.2":
+  version "4.3.2"
+  resolved "https://registry.npmjs.org/@tinymce/tinymce-react/-/tinymce-react-4.3.2.tgz"
+  integrity sha512-wJHZhPf2Mk3yTtdVC/uIGh+kvDgKuTw/qV13uzdChTNo68JI1l7jYMrSQOpyimDyn5LHAw0E1zFByrm1WHAVeA==
+  dependencies:
+    prop-types "^15.6.2"
+    tinymce "^6.0.0 || ^5.5.1"
+
+"@types/date-arithmetic@*":
+  version "4.1.4"
+  resolved "https://registry.npmjs.org/@types/date-arithmetic/-/date-arithmetic-4.1.4.tgz"
+  integrity sha512-p9eZ2X9B80iKiTW4ukVj8B4K6q9/+xFtQ5MGYA5HWToY9nL4EkhV9+6ftT2VHpVMEZb5Tv00Iel516bVdO+yRw==
+
+"@types/hoist-non-react-statics@^3.3.0", "@types/hoist-non-react-statics@^3.3.1":
+  version "3.3.1"
+  resolved "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz"
+  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
+  dependencies:
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+
+"@types/json-schema@^7.0.9":
+  version "7.0.11"
+  resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz"
+  integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
+
+"@types/json5@^0.0.29":
+  version "0.0.29"
+  resolved "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz"
+  integrity sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==
+
+"@types/node@18.7.16":
+  version "18.7.16"
+  resolved "https://registry.npmjs.org/@types/node/-/node-18.7.16.tgz"
+  integrity sha512-EQHhixfu+mkqHMZl1R2Ovuvn47PUw18azMJOTwSZr9/fhzHNGXAJ0ma0dayRVchprpCj0Kc1K1xKoWaATWF1qg==
+
+"@types/numeral@^2.0.2":
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/@types/numeral/-/numeral-2.0.2.tgz"
+  integrity sha512-A8F30k2gYJ/6e07spSCPpkuZu79LCnkPTvqmIWQzNGcrzwFKpVOydG41lNt5wZXjSI149qjyzC2L1+F2PD/NUA==
+
+"@types/parse-json@^4.0.0":
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz"
+  integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
+
+"@types/prop-types@*", "@types/prop-types@^15.7.12":
+  version "15.7.14"
+  resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz"
+  integrity sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==
+
+"@types/react-big-calendar@^1.8.8":
+  version "1.16.0"
+  resolved "https://registry.npmjs.org/@types/react-big-calendar/-/react-big-calendar-1.16.0.tgz"
+  integrity sha512-1w2GXAJWlGmaPZOd9J9cyWA/XBNOGRZ4MmRNypEQhwEMIIL9cfd1UdcvzSrQsnBm0qYF/scqmsISNbUzPBE1vg==
+  dependencies:
+    "@types/date-arithmetic" "*"
+    "@types/prop-types" "*"
+    "@types/react" "*"
+
+"@types/react-redux@^7.1.24":
+  version "7.1.24"
+  resolved "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.24.tgz"
+  integrity sha512-7FkurKcS1k0FHZEtdbbgN8Oc6b+stGSfZYjQGicofJ0j4U0qIn/jaSvnP2pLwZKiai3/17xqqxkkrxTgN8UNbQ==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.0"
+    "@types/react" "*"
+    hoist-non-react-statics "^3.3.0"
+    redux "^4.0.0"
+
+"@types/react-transition-group@^4.4.0", "@types/react-transition-group@^4.4.10":
+  version "4.4.12"
+  resolved "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz"
+  integrity sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==
+
+"@types/react@*", "@types/react@>=16.9.11":
+  version "18.0.19"
+  resolved "https://registry.npmjs.org/@types/react/-/react-18.0.19.tgz"
+  integrity sha512-BDc3Q+4Q3zsn7k9xZrKfjWyJsSlEDMs38gD1qp2eDazLCdcPqAT+vq1ND+Z8AGel/UiwzNUk8ptpywgNQcJ1MQ==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
+"@types/scheduler@*":
+  version "0.16.2"
+  resolved "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz"
+  integrity sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==
+
+"@types/use-sync-external-store@^0.0.3":
+  version "0.0.3"
+  resolved "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz"
+  integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
+
+"@types/warning@^3.0.0":
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/@types/warning/-/warning-3.0.3.tgz"
+  integrity sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q==
+
+"@typescript-eslint/eslint-plugin@^5.37.0":
+  version "5.37.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.37.0.tgz"
+  integrity sha512-Fde6W0IafXktz1UlnhGkrrmnnGpAo1kyX7dnyHHVrmwJOn72Oqm3eYtddrpOwwel2W8PAK9F3pIL5S+lfoM0og==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.37.0"
+    "@typescript-eslint/type-utils" "5.37.0"
+    "@typescript-eslint/utils" "5.37.0"
+    debug "^4.3.4"
+    functional-red-black-tree "^1.0.1"
+    ignore "^5.2.0"
+    regexpp "^3.2.0"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/parser@^5.37.0", "@typescript-eslint/parser@^5.42.0":
+  version "5.43.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.43.0.tgz"
+  integrity sha512-2iHUK2Lh7PwNUlhFxxLI2haSDNyXvebBO9izhjhMoDC+S3XI9qt2DGFUsiJ89m2k7gGYch2aEpYqV5F/+nwZug==
+  dependencies:
+    "@typescript-eslint/scope-manager" "5.43.0"
+    "@typescript-eslint/types" "5.43.0"
+    "@typescript-eslint/typescript-estree" "5.43.0"
+    debug "^4.3.4"
+
+"@typescript-eslint/scope-manager@5.37.0":
+  version "5.37.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.37.0.tgz"
+  integrity sha512-F67MqrmSXGd/eZnujjtkPgBQzgespu/iCZ+54Ok9X5tALb9L2v3G+QBSoWkXG0p3lcTJsL+iXz5eLUEdSiJU9Q==
+  dependencies:
+    "@typescript-eslint/types" "5.37.0"
+    "@typescript-eslint/visitor-keys" "5.37.0"
+
+"@typescript-eslint/scope-manager@5.43.0":
+  version "5.43.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.43.0.tgz"
+  integrity sha512-XNWnGaqAtTJsUiZaoiGIrdJYHsUOd3BZ3Qj5zKp9w6km6HsrjPk/TGZv0qMTWyWj0+1QOqpHQ2gZOLXaGA9Ekw==
+  dependencies:
+    "@typescript-eslint/types" "5.43.0"
+    "@typescript-eslint/visitor-keys" "5.43.0"
+
+"@typescript-eslint/type-utils@5.37.0":
+  version "5.37.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.37.0.tgz"
+  integrity sha512-BSx/O0Z0SXOF5tY0bNTBcDEKz2Ec20GVYvq/H/XNKiUorUFilH7NPbFUuiiyzWaSdN3PA8JV0OvYx0gH/5aFAQ==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "5.37.0"
+    "@typescript-eslint/utils" "5.37.0"
+    debug "^4.3.4"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/types@5.37.0":
+  version "5.37.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.37.0.tgz"
+  integrity sha512-3frIJiTa5+tCb2iqR/bf7XwU20lnU05r/sgPJnRpwvfZaqCJBrl8Q/mw9vr3NrNdB/XtVyMA0eppRMMBqdJ1bA==
+
+"@typescript-eslint/types@5.43.0":
+  version "5.43.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.43.0.tgz"
+  integrity sha512-jpsbcD0x6AUvV7tyOlyvon0aUsQpF8W+7TpJntfCUWU1qaIKu2K34pMwQKSzQH8ORgUrGYY6pVIh1Pi8TNeteg==
+
+"@typescript-eslint/typescript-estree@5.37.0":
+  version "5.37.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.37.0.tgz"
+  integrity sha512-JkFoFIt/cx59iqEDSgIGnQpCTRv96MQnXCYvJi7QhBC24uyuzbD8wVbajMB1b9x4I0octYFJ3OwjAwNqk1AjDA==
+  dependencies:
+    "@typescript-eslint/types" "5.37.0"
+    "@typescript-eslint/visitor-keys" "5.37.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/typescript-estree@5.43.0":
+  version "5.43.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.43.0.tgz"
+  integrity sha512-BZ1WVe+QQ+igWal2tDbNg1j2HWUkAa+CVqdU79L4HP9izQY6CNhXfkNwd1SS4+sSZAP/EthI1uiCSY/+H0pROg==
+  dependencies:
+    "@typescript-eslint/types" "5.43.0"
+    "@typescript-eslint/visitor-keys" "5.43.0"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    semver "^7.3.7"
+    tsutils "^3.21.0"
+
+"@typescript-eslint/utils@5.37.0":
+  version "5.37.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.37.0.tgz"
+  integrity sha512-jUEJoQrWbZhmikbcWSMDuUSxEE7ID2W/QCV/uz10WtQqfOuKZUqFGjqLJ+qhDd17rjgp+QJPqTdPIBWwoob2NQ==
+  dependencies:
+    "@types/json-schema" "^7.0.9"
+    "@typescript-eslint/scope-manager" "5.37.0"
+    "@typescript-eslint/types" "5.37.0"
+    "@typescript-eslint/typescript-estree" "5.37.0"
+    eslint-scope "^5.1.1"
+    eslint-utils "^3.0.0"
+
+"@typescript-eslint/visitor-keys@5.37.0":
+  version "5.37.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.37.0.tgz"
+  integrity sha512-Hp7rT4cENBPIzMwrlehLW/28EVCOcE9U1Z1BQTc8EA8v5qpr7GRGuG+U58V5tTY48zvUOA3KHvw3rA8tY9fbdA==
+  dependencies:
+    "@typescript-eslint/types" "5.37.0"
+    eslint-visitor-keys "^3.3.0"
+
+"@typescript-eslint/visitor-keys@5.43.0":
+  version "5.43.0"
+  resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.43.0.tgz"
+  integrity sha512-icl1jNH/d18OVHLfcwdL3bWUKsBeIiKYTGxMJCoGe7xFht+E4QgzOqoWYrU8XSLJWhVw8nTacbm03v23J/hFTg==
+  dependencies:
+    "@typescript-eslint/types" "5.43.0"
+    eslint-visitor-keys "^3.3.0"
+
+"@vtaits/use-lazy-ref@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.npmjs.org/@vtaits/use-lazy-ref/-/use-lazy-ref-0.1.3.tgz"
+  integrity sha512-ZTLuFBHSivPcgWrwkXe5ExVt6R3/ybD+N0yFPy4ClzCztk/9bUD/1udKQ/jd7eCal+lapSrRWXbffqI9jkpDlg==
+
+"@yr/monotone-cubic-spline@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/@yr/monotone-cubic-spline/-/monotone-cubic-spline-1.0.3.tgz"
+  integrity sha512-FQXkOta0XBSUPHndIKON2Y9JeQz5ZeMqLYZVVK93FliNBFm7LNMIZmY6FrMEB9XPcDbE2bekMbZD6kzDkxwYjA==
+
+acorn-jsx@^5.3.2:
+  version "5.3.2"
+  resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
+  integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
+
+acorn@^8.8.0:
+  version "8.8.0"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-8.8.0.tgz"
+  integrity sha512-QOxyigPVrpZ2GXT+PFyZTl6TtOFc5egxHIP9IlQ+RbupQuX4RkT/Bee4/kQuC02Xkzg84JcT7oLYtDIQxp+v7w==
+
+ajv@^6.10.0, ajv@^6.12.4:
+  version "6.12.6"
+  resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz"
+  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
+
+ansi-regex@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.1.0.tgz"
+  integrity sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==
+
+ansi-styles@^4.0.0, ansi-styles@^4.1.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz"
+  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
+  dependencies:
+    color-convert "^2.0.1"
+
+ansi-styles@^6.1.0:
+  version "6.2.1"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz"
+  integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==
+
+any-promise@^1.0.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz"
+  integrity sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==
+
+anymatch@~3.1.2:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+apexcharts@^3.45.2:
+  version "3.54.1"
+  resolved "https://registry.npmjs.org/apexcharts/-/apexcharts-3.54.1.tgz"
+  integrity sha512-E4et0h/J1U3r3EwS/WlqJCQIbepKbp6wGUmaAwJOMjHUP4Ci0gxanLa7FR3okx6p9coi4st6J853/Cb1NP0vpA==
+  dependencies:
+    "@yr/monotone-cubic-spline" "^1.0.3"
+    svg.draggable.js "^2.2.2"
+    svg.easing.js "^2.0.0"
+    svg.filter.js "^2.0.2"
+    svg.pathmorphing.js "^0.1.3"
+    svg.resize.js "^1.4.3"
+    svg.select.js "^3.0.1"
+
+arg@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz"
+  integrity sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==
+
+argparse@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz"
+  integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
+
+aria-query@^4.2.2:
+  version "4.2.2"
+  resolved "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz"
+  integrity sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==
+  dependencies:
+    "@babel/runtime" "^7.10.2"
+    "@babel/runtime-corejs3" "^7.10.2"
+
+array-includes@^3.1.4, array-includes@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.npmjs.org/array-includes/-/array-includes-3.1.5.tgz"
+  integrity sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
+    get-intrinsic "^1.1.1"
+    is-string "^1.0.7"
+
+array-union@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz"
+  integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
+
+array.prototype.flat@^1.2.5:
+  version "1.3.1"
+  resolved "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.1.tgz"
+  integrity sha512-roTU0KWIOmJ4DRLmwKd19Otg0/mT3qPNt0Qb3GWW8iObuZXxrjB/pzn0R3hqpRSWg4HCwqx+0vwOnWnvlOyeIA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.20.4"
+    es-shim-unscopables "^1.0.0"
+
+array.prototype.flatmap@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz"
+  integrity sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.2"
+    es-shim-unscopables "^1.0.0"
+
+ast-types-flow@^0.0.7:
+  version "0.0.7"
+  resolved "https://registry.npmjs.org/ast-types-flow/-/ast-types-flow-0.0.7.tgz"
+  integrity sha512-eBvWn1lvIApYMhzQMsu9ciLfkBY499mFZlNqG+/9WR7PVlroQw0vG30cOQQbaKz3sCEc44TAOu2ykzqXSNnwag==
+
+asynckit@^0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz"
+  integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
+
+autoprefixer@^10.4.0:
+  version "10.4.9"
+  resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.9.tgz"
+  integrity sha512-Uu67eduPEmOeA0vyJby5ghu1AAELCCNSsLAjK+lz6kYzNM5sqnBO36MqfsjhPjQF/BaJM5U/UuFYyl7PavY/wQ==
+  dependencies:
+    browserslist "^4.21.3"
+    caniuse-lite "^1.0.30001394"
+    fraction.js "^4.2.0"
+    normalize-range "^0.1.2"
+    picocolors "^1.0.0"
+    postcss-value-parser "^4.2.0"
+
+axe-core@^4.4.3:
+  version "4.4.3"
+  resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.4.3.tgz"
+  integrity sha512-32+ub6kkdhhWick/UjvEwRchgoetXqTK14INLqbGm5U2TzBkBNF3nQtLYm8ovxSkQWArjEQvftCKryjZaATu3w==
+
+axios@^1.6.7:
+  version "1.7.9"
+  resolved "https://registry.npmjs.org/axios/-/axios-1.7.9.tgz"
+  integrity sha512-LhLcE7Hbiryz8oMDdDptSrWowmB4Bl6RCt6sIJKpRB4XtVf0iEgewX3au/pJqm+Py1kCASkb/FFKjxQaLtxJvw==
+  dependencies:
+    follow-redirects "^1.15.6"
+    form-data "^4.0.0"
+    proxy-from-env "^1.1.0"
+
+axobject-query@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz"
+  integrity sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA==
+
+babel-plugin-macros@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz"
+  integrity sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    cosmiconfig "^7.0.0"
+    resolve "^1.19.0"
+
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+binary-extensions@^2.0.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz"
+  integrity sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz"
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+  dependencies:
+    balanced-match "^1.0.0"
+
+braces@^3.0.3, braces@~3.0.2:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz"
+  integrity sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==
+  dependencies:
+    fill-range "^7.1.1"
+
+browserslist@^4.21.3:
+  version "4.21.3"
+  resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.21.3.tgz"
+  integrity sha512-898rgRXLAyRkM1GryrrBHGkqA5hlpkV5MhtZwg9QXeiyLUYs2k00Un05aX5l2/yJIOObYKOpS2JNo8nJDE7fWQ==
+  dependencies:
+    caniuse-lite "^1.0.30001370"
+    electron-to-chromium "^1.4.202"
+    node-releases "^2.0.6"
+    update-browserslist-db "^1.0.5"
+
+buffer-equal-constant-time@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/buffer-equal-constant-time/-/buffer-equal-constant-time-1.0.1.tgz"
+  integrity sha512-zRpUiDwd/xk6ADqPMATG8vc9VPrkck7T07OIx0gnjmJAnHnTVXNQG3vfvWNuiZIkwu9KrKdA1iJKfsfTVxE6NA==
+
+busboy@1.6.0:
+  version "1.6.0"
+  resolved "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz"
+  integrity sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==
+  dependencies:
+    streamsearch "^1.1.0"
+
+call-bind@^1.0.0, call-bind@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz"
+  integrity sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==
+  dependencies:
+    function-bind "^1.1.1"
+    get-intrinsic "^1.0.2"
+
+callsites@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz"
+  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
+
+camelcase-css@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz"
+  integrity sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==
+
+caniuse-lite@^1.0.30001370, caniuse-lite@^1.0.30001394, caniuse-lite@^1.0.30001579:
+  version "1.0.30001690"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001690.tgz"
+  integrity sha512-5ExiE3qQN6oF8Clf8ifIDcMRCRE/dMGcETG/XGMD8/XiXm6HXQgQTh1yZYLXXpSOsEUlJm1Xr7kGULZTuGtP/w==
+
+chalk@^4.0.0:
+  version "4.1.2"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chart.js@^4.4.1:
+  version "4.4.7"
+  resolved "https://registry.npmjs.org/chart.js/-/chart.js-4.4.7.tgz"
+  integrity sha512-pwkcKfdzTMAU/+jNosKhNL2bHtJc/sSmYgVbuGTEDhzkrhmyihmP7vUc/5ZK9WopidMDHNe3Wm7jOd/WhuHWuw==
+  dependencies:
+    "@kurkle/color" "^0.3.0"
+
+chokidar@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+chroma-js@^2.4.2:
+  version "2.6.0"
+  resolved "https://registry.npmjs.org/chroma-js/-/chroma-js-2.6.0.tgz"
+  integrity sha512-BLHvCB9s8Z1EV4ethr6xnkl/P2YRFOGqfgvuMG/MyCbZPrTA+NeiByY6XvgF0zP4/2deU2CXnWyMa3zu1LqQ3A==
+
+classnames@^2.2.6:
+  version "2.5.1"
+  resolved "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
+
+client-only@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz"
+  integrity sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==
+
+clsx@^1.1.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
+clsx@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
+clsx@^2.0.0, clsx@^2.1.0, clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz"
+  integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
+  dependencies:
+    color-name "~1.1.4"
+
+color-name@~1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
+  integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
+
+combined-stream@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz"
+  integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==
+  dependencies:
+    delayed-stream "~1.0.0"
+
+commander@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz"
+  integrity sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==
+
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
+  integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
+
+convert-source-map@^1.5.0:
+  version "1.9.0"
+  resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz"
+  integrity sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==
+
+core-js-pure@^3.20.2:
+  version "3.25.1"
+  resolved "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.25.1.tgz"
+  integrity sha512-7Fr74bliUDdeJCBMxkkIuQ4xfxn/SwrVg+HkJUAoNEXVqYLv55l6Af0dJ5Lq2YBUW9yKqSkLXaS5SYPK6MGa/A==
+
+cosmiconfig@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz"
+  integrity sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.2.1"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.10.0"
+
+cross-env@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz"
+  integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==
+  dependencies:
+    cross-spawn "^7.0.1"
+
+cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+cssesc@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz"
+  integrity sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==
+
+csstype@^3.0.2, csstype@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz"
+  integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
+
+damerau-levenshtein@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz"
+  integrity sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==
+
+date-arithmetic@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/date-arithmetic/-/date-arithmetic-4.1.0.tgz"
+  integrity sha512-QWxYLR5P/6GStZcdem+V1xoto6DMadYWpMXU82ES3/RfR3Wdwr3D0+be7mgOJ+Ov0G9D5Dmb9T17sNLQYj9XOg==
+
+date-fns@^2.30.0:
+  version "2.30.0"
+  resolved "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz"
+  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
+dayjs@^1.11.10, dayjs@^1.11.7:
+  version "1.11.13"
+  resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz"
+  integrity sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==
+
+debug@^2.6.9:
+  version "2.6.9"
+  resolved "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz"
+  integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
+  dependencies:
+    ms "2.0.0"
+
+debug@^3.2.7:
+  version "3.2.7"
+  resolved "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz"
+  integrity sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==
+  dependencies:
+    ms "^2.1.1"
+
+debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4:
+  version "4.3.4"
+  resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
+  integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
+  dependencies:
+    ms "2.1.2"
+
+decode-uri-component@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.4.1.tgz"
+  integrity sha512-+8VxcR21HhTy8nOt6jf20w0c9CADrw1O8d+VZ/YzzCt4bJ3uBjw+D1q2osAB8RnpwwaeYBxy0HyKQxD5JBMuuQ==
+
+deep-is@^0.1.3:
+  version "0.1.4"
+  resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
+  integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
+
+deepmerge@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-2.2.1.tgz"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
+define-lazy-prop@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz"
+  integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
+
+define-properties@^1.1.3, define-properties@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz"
+  integrity sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==
+  dependencies:
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
+
+delayed-stream@~1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz"
+  integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==
+
+dequal@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz"
+  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
+
+didyoumean@^1.2.2:
+  version "1.2.2"
+  resolved "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz"
+  integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
+
+dir-glob@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz"
+  integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
+  dependencies:
+    path-type "^4.0.0"
+
+dlv@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz"
+  integrity sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==
+
+doctrine@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz"
+  integrity sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==
+  dependencies:
+    esutils "^2.0.2"
+
+doctrine@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz"
+  integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
+  dependencies:
+    esutils "^2.0.2"
+
+dom-helpers@^5.0.1, dom-helpers@^5.2.0, dom-helpers@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
+eastasianwidth@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz"
+  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==
+
+ecdsa-sig-formatter@1.0.11:
+  version "1.0.11"
+  resolved "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz"
+  integrity sha512-nagl3RYrbNv6kQkeJIpt6NJZy8twLB/2vtz6yN9Z4vRKHN4/QZJIEbqohALSgwKdnksuY3k5Addp5lg8sVoVcQ==
+  dependencies:
+    safe-buffer "^5.0.1"
+
+electron-to-chromium@^1.4.202:
+  version "1.4.248"
+  resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.248.tgz"
+  integrity sha512-qShjzEYpa57NnhbW2K+g+Fl+eNoDvQ7I+2MRwWnU6Z6F0HhXekzsECCLv+y2OJUsRodjqoSfwHkIX42VUFtUzg==
+
+emoji-regex@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz"
+  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
+
+emoji-regex@^9.2.2:
+  version "9.2.2"
+  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz"
+  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==
+
+enhanced-resolve@^5.10.0:
+  version "5.10.0"
+  resolved "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.10.0.tgz"
+  integrity sha512-T0yTFjdpldGY8PmuXXR0PyQ1ufZpEGiHVrp7zHKB7jdR4qlmZHhONVM5AQOAWXuF/w3dnHbEQVrNptJgt7F+cQ==
+  dependencies:
+    graceful-fs "^4.2.4"
+    tapable "^2.2.0"
+
+error-ex@^1.3.1:
+  version "1.3.2"
+  resolved "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz"
+  integrity sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==
+  dependencies:
+    is-arrayish "^0.2.1"
+
+es-abstract@^1.19.0, es-abstract@^1.19.1, es-abstract@^1.19.2, es-abstract@^1.19.5, es-abstract@^1.20.4:
+  version "1.20.4"
+  resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.4.tgz"
+  integrity sha512-0UtvRN79eMe2L+UNEF1BwRe364sj/DXhQ/k5FmivgoSdpM90b8Jc0mDzKMGo7QS0BVbOP/bTwBKNnDc9rNzaPA==
+  dependencies:
+    call-bind "^1.0.2"
+    es-to-primitive "^1.2.1"
+    function-bind "^1.1.1"
+    function.prototype.name "^1.1.5"
+    get-intrinsic "^1.1.3"
+    get-symbol-description "^1.0.0"
+    has "^1.0.3"
+    has-property-descriptors "^1.0.0"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.3"
+    is-callable "^1.2.7"
+    is-negative-zero "^2.0.2"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.2"
+    is-string "^1.0.7"
+    is-weakref "^1.0.2"
+    object-inspect "^1.12.2"
+    object-keys "^1.1.1"
+    object.assign "^4.1.4"
+    regexp.prototype.flags "^1.4.3"
+    safe-regex-test "^1.0.0"
+    string.prototype.trimend "^1.0.5"
+    string.prototype.trimstart "^1.0.5"
+    unbox-primitive "^1.0.2"
+
+es-shim-unscopables@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz"
+  integrity sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==
+  dependencies:
+    has "^1.0.3"
+
+es-to-primitive@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz"
+  integrity sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==
+  dependencies:
+    is-callable "^1.1.4"
+    is-date-object "^1.0.1"
+    is-symbol "^1.0.2"
+
+escalade@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz"
+  integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
+
+escape-string-regexp@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz"
+  integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
+
+eslint-config-next@^13.0.4:
+  version "13.0.4"
+  resolved "https://registry.npmjs.org/eslint-config-next/-/eslint-config-next-13.0.4.tgz"
+  integrity sha512-moEC7BW2TK7JKq3QfnaauqRjWzVcEf71gp5DbClpFPHM6QXE0u0uVvSTiHlmOgtCe1vyWAO+AhF87ZITd8mIDw==
+  dependencies:
+    "@next/eslint-plugin-next" "13.0.4"
+    "@rushstack/eslint-patch" "^1.1.3"
+    "@typescript-eslint/parser" "^5.42.0"
+    eslint-import-resolver-node "^0.3.6"
+    eslint-import-resolver-typescript "^3.5.2"
+    eslint-plugin-import "^2.26.0"
+    eslint-plugin-jsx-a11y "^6.5.1"
+    eslint-plugin-react "^7.31.7"
+    eslint-plugin-react-hooks "^4.5.0"
+
+eslint-config-prettier@^8.5.0:
+  version "8.5.0"
+  resolved "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.5.0.tgz"
+  integrity sha512-obmWKLUNCnhtQRKc+tmnYuQl0pFU1ibYJQ5BGhTVB08bHe9wC8qUeG7c08dj9XX+AuPj1YSGSQIHl1pnDHZR0Q==
+
+eslint-import-resolver-node@^0.3.6:
+  version "0.3.6"
+  resolved "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.6.tgz"
+  integrity sha512-0En0w03NRVMn9Uiyn8YRPDKvWjxCWkslUEhGNTdGx15RvPJYQ+lbOlqrlNI2vEAs4pDYK4f/HN2TbDmk5TP0iw==
+  dependencies:
+    debug "^3.2.7"
+    resolve "^1.20.0"
+
+eslint-import-resolver-typescript@^3.5.2:
+  version "3.5.2"
+  resolved "https://registry.npmjs.org/eslint-import-resolver-typescript/-/eslint-import-resolver-typescript-3.5.2.tgz"
+  integrity sha512-zX4ebnnyXiykjhcBvKIf5TNvt8K7yX6bllTRZ14MiurKPjDpCAZujlszTdB8pcNXhZcOf+god4s9SjQa5GnytQ==
+  dependencies:
+    debug "^4.3.4"
+    enhanced-resolve "^5.10.0"
+    get-tsconfig "^4.2.0"
+    globby "^13.1.2"
+    is-core-module "^2.10.0"
+    is-glob "^4.0.3"
+    synckit "^0.8.4"
+
+eslint-module-utils@^2.7.3:
+  version "2.7.4"
+  resolved "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.4.tgz"
+  integrity sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==
+  dependencies:
+    debug "^3.2.7"
+
+eslint-plugin-import@^2.26.0:
+  version "2.26.0"
+  resolved "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.26.0.tgz"
+  integrity sha512-hYfi3FXaM8WPLf4S1cikh/r4IxnO6zrhZbEGz2b660EJRbuxgpDS5gkCuYgGWg2xxh2rBuIr4Pvhve/7c31koA==
+  dependencies:
+    array-includes "^3.1.4"
+    array.prototype.flat "^1.2.5"
+    debug "^2.6.9"
+    doctrine "^2.1.0"
+    eslint-import-resolver-node "^0.3.6"
+    eslint-module-utils "^2.7.3"
+    has "^1.0.3"
+    is-core-module "^2.8.1"
+    is-glob "^4.0.3"
+    minimatch "^3.1.2"
+    object.values "^1.1.5"
+    resolve "^1.22.0"
+    tsconfig-paths "^3.14.1"
+
+eslint-plugin-jsx-a11y@^6.5.1:
+  version "6.6.1"
+  resolved "https://registry.npmjs.org/eslint-plugin-jsx-a11y/-/eslint-plugin-jsx-a11y-6.6.1.tgz"
+  integrity sha512-sXgFVNHiWffBq23uiS/JaP6eVR622DqwB4yTzKvGZGcPq6/yZ3WmOZfuBks/vHWo9GaFOqC2ZK4i6+C35knx7Q==
+  dependencies:
+    "@babel/runtime" "^7.18.9"
+    aria-query "^4.2.2"
+    array-includes "^3.1.5"
+    ast-types-flow "^0.0.7"
+    axe-core "^4.4.3"
+    axobject-query "^2.2.0"
+    damerau-levenshtein "^1.0.8"
+    emoji-regex "^9.2.2"
+    has "^1.0.3"
+    jsx-ast-utils "^3.3.2"
+    language-tags "^1.0.5"
+    minimatch "^3.1.2"
+    semver "^6.3.0"
+
+eslint-plugin-react-hooks@^4.5.0:
+  version "4.6.0"
+  resolved "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.0.tgz"
+  integrity sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==
+
+eslint-plugin-react@^7.31.7:
+  version "7.31.8"
+  resolved "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.31.8.tgz"
+  integrity sha512-5lBTZmgQmARLLSYiwI71tiGVTLUuqXantZM6vlSY39OaDSV0M7+32K5DnLkmFrwTe+Ksz0ffuLUC91RUviVZfw==
+  dependencies:
+    array-includes "^3.1.5"
+    array.prototype.flatmap "^1.3.0"
+    doctrine "^2.1.0"
+    estraverse "^5.3.0"
+    jsx-ast-utils "^2.4.1 || ^3.0.0"
+    minimatch "^3.1.2"
+    object.entries "^1.1.5"
+    object.fromentries "^2.0.5"
+    object.hasown "^1.1.1"
+    object.values "^1.1.5"
+    prop-types "^15.8.1"
+    resolve "^2.0.0-next.3"
+    semver "^6.3.0"
+    string.prototype.matchall "^4.0.7"
+
+eslint-scope@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz"
+  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^4.1.1"
+
+eslint-scope@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz"
+  integrity sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^5.2.0"
+
+eslint-utils@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz"
+  integrity sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==
+  dependencies:
+    eslint-visitor-keys "^2.0.0"
+
+eslint-visitor-keys@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz"
+  integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
+
+eslint-visitor-keys@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz"
+  integrity sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==
+
+eslint@^8.23.1:
+  version "8.23.1"
+  resolved "https://registry.npmjs.org/eslint/-/eslint-8.23.1.tgz"
+  integrity sha512-w7C1IXCc6fNqjpuYd0yPlcTKKmHlHHktRkzmBPZ+7cvNBQuiNjx0xaMTjAJGCafJhQkrFJooREv0CtrVzmHwqg==
+  dependencies:
+    "@eslint/eslintrc" "^1.3.2"
+    "@humanwhocodes/config-array" "^0.10.4"
+    "@humanwhocodes/gitignore-to-minimatch" "^1.0.2"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    ajv "^6.10.0"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.3.2"
+    doctrine "^3.0.0"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^7.1.1"
+    eslint-utils "^3.0.0"
+    eslint-visitor-keys "^3.3.0"
+    espree "^9.4.0"
+    esquery "^1.4.0"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    find-up "^5.0.0"
+    glob-parent "^6.0.1"
+    globals "^13.15.0"
+    globby "^11.1.0"
+    grapheme-splitter "^1.0.4"
+    ignore "^5.2.0"
+    import-fresh "^3.0.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    js-sdsl "^4.1.4"
+    js-yaml "^4.1.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
+    natural-compare "^1.4.0"
+    optionator "^0.9.1"
+    regexpp "^3.2.0"
+    strip-ansi "^6.0.1"
+    strip-json-comments "^3.1.0"
+    text-table "^0.2.0"
+
+espree@^9.4.0:
+  version "9.4.0"
+  resolved "https://registry.npmjs.org/espree/-/espree-9.4.0.tgz"
+  integrity sha512-DQmnRpLj7f6TgN/NYb0MTzJXL+vJF9h3pHy4JhCIs3zwcgez8xmGg3sXHcEO97BrmO2OSvCwMdfdlyl+E9KjOw==
+  dependencies:
+    acorn "^8.8.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^3.3.0"
+
+esquery@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/esquery/-/esquery-1.4.0.tgz"
+  integrity sha512-cCDispWt5vHHtwMY2YrAQ4ibFkAL8RbH5YGBnZBc90MolvvfkkQcJro/aZiAQUlQ3qgrYS6D6v8Gc5G5CQsc9w==
+  dependencies:
+    estraverse "^5.1.0"
+
+esrecurse@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz"
+  integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
+  dependencies:
+    estraverse "^5.2.0"
+
+estraverse@^4.1.1:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz"
+  integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
+
+estraverse@^5.1.0, estraverse@^5.2.0, estraverse@^5.3.0:
+  version "5.3.0"
+  resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz"
+  integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
+
+esutils@^2.0.2:
+  version "2.0.3"
+  resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz"
+  integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
+
+fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
+  integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
+
+fast-glob@^3.2.11, fast-glob@^3.2.9, fast-glob@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz"
+  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
+fast-json-stable-stringify@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz"
+  integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
+
+fast-levenshtein@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz"
+  integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
+
+fastq@^1.6.0:
+  version "1.13.0"
+  resolved "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz"
+  integrity sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==
+  dependencies:
+    reusify "^1.0.4"
+
+file-entry-cache@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz"
+  integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
+  dependencies:
+    flat-cache "^3.0.4"
+
+file-saver@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/file-saver/-/file-saver-2.0.5.tgz"
+  integrity sha512-P9bmyZ3h/PRG+Nzga+rbdI4OEpNDzAVyy74uVO9ATgzLK6VtAsYybF/+TOCvrc0MO793d6+42lLyZTw7/ArVzA==
+
+fill-range@^7.1.1:
+  version "7.1.1"
+  resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz"
+  integrity sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==
+  dependencies:
+    to-regex-range "^5.0.1"
+
+filter-obj@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.npmjs.org/filter-obj/-/filter-obj-5.1.0.tgz"
+  integrity sha512-qWeTREPoT7I0bifpPUXtxkZJ1XJzxWtfoWWkdVGqa+eCr3SHW/Ocp89o8vLvbUuQnadybJpjOKu4V+RwO6sGng==
+
+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
+find-up@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz"
+  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
+  dependencies:
+    locate-path "^6.0.0"
+    path-exists "^4.0.0"
+
+flat-cache@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz"
+  integrity sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==
+  dependencies:
+    flatted "^3.1.0"
+    rimraf "^3.0.2"
+
+flatted@^3.1.0:
+  version "3.2.7"
+  resolved "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz"
+  integrity sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==
+
+follow-redirects@^1.15.6:
+  version "1.15.9"
+  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz"
+  integrity sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==
+
+foreground-child@^3.1.0:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.0.tgz"
+  integrity sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==
+  dependencies:
+    cross-spawn "^7.0.0"
+    signal-exit "^4.0.1"
+
+form-data@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz"
+  integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==
+  dependencies:
+    asynckit "^0.4.0"
+    combined-stream "^1.0.8"
+    mime-types "^2.1.12"
+
+formik@^2.4.5:
+  version "2.4.6"
+  resolved "https://registry.npmjs.org/formik/-/formik-2.4.6.tgz"
+  integrity sha512-A+2EI7U7aG296q2TLGvNapDNTZp1khVt5Vk0Q/fyfSROss0V/V6+txt2aJnwEos44IxTCW/LYAi/zgWzlevj+g==
+  dependencies:
+    "@types/hoist-non-react-statics" "^3.3.1"
+    deepmerge "^2.1.1"
+    hoist-non-react-statics "^3.3.0"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    react-fast-compare "^2.0.1"
+    tiny-warning "^1.0.2"
+    tslib "^2.0.0"
+
+fraction.js@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz"
+  integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
+  integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
+
+function-bind@^1.1.1, function-bind@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz"
+  integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
+
+function.prototype.name@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz"
+  integrity sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.0"
+    functions-have-names "^1.2.2"
+
+functional-red-black-tree@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz"
+  integrity sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==
+
+functions-have-names@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz"
+  integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
+
+get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1, get-intrinsic@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.1.3.tgz"
+  integrity sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-symbols "^1.0.3"
+
+get-symbol-description@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz"
+  integrity sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.1"
+
+get-tsconfig@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/get-tsconfig/-/get-tsconfig-4.2.0.tgz"
+  integrity sha512-X8u8fREiYOE6S8hLbq99PeykTDoLVnxvF4DjWKJmz9xy2nNRdUcV8ZN9tniJFeKyTU3qnC9lL8n4Chd6LmVKHg==
+
+glob-parent@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob-parent@^6.0.1, glob-parent@^6.0.2:
+  version "6.0.2"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz"
+  integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
+  dependencies:
+    is-glob "^4.0.3"
+
+glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
+glob@^10.3.10:
+  version "10.4.5"
+  resolved "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz"
+  integrity sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==
+  dependencies:
+    foreground-child "^3.1.0"
+    jackspeak "^3.1.2"
+    minimatch "^9.0.4"
+    minipass "^7.1.2"
+    package-json-from-dist "^1.0.0"
+    path-scurry "^1.11.1"
+
+glob@^7.1.3, glob@7.1.7:
+  version "7.1.7"
+  resolved "https://registry.npmjs.org/glob/-/glob-7.1.7.tgz"
+  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+globalize@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.npmjs.org/globalize/-/globalize-0.1.1.tgz"
+  integrity sha512-5e01v8eLGfuQSOvx2MsDMOWS0GFtCx1wPzQSmcHw4hkxFzrQDBO3Xwg/m8Hr/7qXMrHeOIE29qWVzyv06u1TZA==
+
+globals@^11.1.0:
+  version "11.12.0"
+  resolved "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz"
+  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
+
+globals@^13.15.0:
+  version "13.17.0"
+  resolved "https://registry.npmjs.org/globals/-/globals-13.17.0.tgz"
+  integrity sha512-1C+6nQRb1GwGMKm2dH/E7enFAMxGTmGI7/dEdhy/DNelv85w9B72t3uc5frtMNXIbzrarJJ/lTCjcaZwbLJmyw==
+  dependencies:
+    type-fest "^0.20.2"
+
+globalyzer@0.1.0:
+  version "0.1.0"
+  resolved "https://registry.npmjs.org/globalyzer/-/globalyzer-0.1.0.tgz"
+  integrity sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==
+
+globby@^11.1.0:
+  version "11.1.0"
+  resolved "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz"
+  integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.9"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^3.0.0"
+
+globby@^13.1.2:
+  version "13.1.2"
+  resolved "https://registry.npmjs.org/globby/-/globby-13.1.2.tgz"
+  integrity sha512-LKSDZXToac40u8Q1PQtZihbNdTYSNMuWe+K5l+oa6KgDzSvVrHXlJy40hUP522RjAIoNLJYBJi7ow+rbFpIhHQ==
+  dependencies:
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.11"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^4.0.0"
+
+globrex@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.npmjs.org/globrex/-/globrex-0.1.2.tgz"
+  integrity sha512-uHJgbwAMwNFf5mLst7IWLNg14x1CkeqglJb/K3doi4dw6q2IvAAmM/Y81kevy83wP+Sst+nutFTYOGg3d1lsxg==
+
+graceful-fs@^4.2.11, graceful-fs@^4.2.4:
+  version "4.2.11"
+  resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
+grapheme-splitter@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz"
+  integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
+
+has-bigints@^1.0.1, has-bigints@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz"
+  integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
+
+has-flag@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+has-property-descriptors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz"
+  integrity sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==
+  dependencies:
+    get-intrinsic "^1.1.1"
+
+has-symbols@^1.0.2, has-symbols@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz"
+  integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
+
+has-tostringtag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz"
+  integrity sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==
+  dependencies:
+    has-symbols "^1.0.2"
+
+has@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/has/-/has-1.0.3.tgz"
+  integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
+  dependencies:
+    function-bind "^1.1.1"
+
+hasown@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz"
+  integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
+  dependencies:
+    function-bind "^1.1.2"
+
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
+ignore@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz"
+  integrity sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==
+
+immer@^10.0.3:
+  version "10.1.1"
+  resolved "https://registry.npmjs.org/immer/-/immer-10.1.1.tgz"
+  integrity sha512-s2MPrmjovJcoMaHtx6K11Ra7oD05NT97w1IC5zpMkT6Atjr7H8LjaDd81iIxUYpMKSRRNMJE703M1Fhr/TctHw==
+
+import-fresh@^3.0.0, import-fresh@^3.2.1:
+  version "3.3.0"
+  resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
+  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz"
+  integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
+
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz"
+  integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2:
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
+  integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
+
+internal-slot@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz"
+  integrity sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==
+  dependencies:
+    get-intrinsic "^1.1.0"
+    has "^1.0.3"
+    side-channel "^1.0.4"
+
+intro.js-react@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/intro.js-react/-/intro.js-react-1.0.0.tgz"
+  integrity sha512-zR8pbTyX20RnCZpJMc0nuHBpsjcr1wFkj3ZookV6Ly4eE/LGpFTQwPsaA61Cryzwiy/tTFsusf4hPU9NpI9UOg==
+
+intro.js@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/intro.js/-/intro.js-7.2.0.tgz"
+  integrity sha512-qbMfaB70rOXVBceIWNYnYTpVTiZsvQh/MIkfdQbpA9di9VBfj1GigUPfcCv3aOfsbrtPcri8vTLTA4FcEDcHSQ==
+
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
+is-arrayish@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz"
+  integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
+
+is-bigint@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz"
+  integrity sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==
+  dependencies:
+    has-bigints "^1.0.1"
+
+is-binary-path@~2.1.0:
+  version "2.1.0"
+  resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz"
+  integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
+  dependencies:
+    binary-extensions "^2.0.0"
+
+is-boolean-object@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz"
+  integrity sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+is-callable@^1.1.4, is-callable@^1.2.7:
+  version "1.2.7"
+  resolved "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz"
+  integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
+
+is-core-module@^2.10.0, is-core-module@^2.16.0, is-core-module@^2.8.1, is-core-module@^2.9.0:
+  version "2.16.1"
+  resolved "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz"
+  integrity sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==
+  dependencies:
+    hasown "^2.0.2"
+
+is-date-object@^1.0.1:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz"
+  integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-docker@^2.0.0, is-docker@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz"
+  integrity sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==
+
+is-extglob@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz"
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
+
+is-fullwidth-code-point@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-3.0.0.tgz"
+  integrity sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
+
+is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz"
+  integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
+  dependencies:
+    is-extglob "^2.1.1"
+
+is-negative-zero@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz"
+  integrity sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==
+
+is-number-object@^1.0.4:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz"
+  integrity sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-number@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz"
+  integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
+
+is-regex@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz"
+  integrity sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==
+  dependencies:
+    call-bind "^1.0.2"
+    has-tostringtag "^1.0.0"
+
+is-shared-array-buffer@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz"
+  integrity sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==
+  dependencies:
+    call-bind "^1.0.2"
+
+is-string@^1.0.5, is-string@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz"
+  integrity sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==
+  dependencies:
+    has-tostringtag "^1.0.0"
+
+is-symbol@^1.0.2, is-symbol@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz"
+  integrity sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==
+  dependencies:
+    has-symbols "^1.0.2"
+
+is-weakref@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz"
+  integrity sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==
+  dependencies:
+    call-bind "^1.0.2"
+
+is-wsl@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz"
+  integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
+  dependencies:
+    is-docker "^2.0.0"
+
+isexe@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
+
+jackspeak@^3.1.2:
+  version "3.4.3"
+  resolved "https://registry.npmjs.org/jackspeak/-/jackspeak-3.4.3.tgz"
+  integrity sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==
+  dependencies:
+    "@isaacs/cliui" "^8.0.2"
+  optionalDependencies:
+    "@pkgjs/parseargs" "^0.11.0"
+
+jiti@^1.21.6:
+  version "1.21.7"
+  resolved "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz"
+  integrity sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==
+
+js-sdsl@^4.1.4:
+  version "4.1.4"
+  resolved "https://registry.npmjs.org/js-sdsl/-/js-sdsl-4.1.4.tgz"
+  integrity sha512-Y2/yD55y5jteOAmY50JbUZYwk3CP3wnLPEZnlR1w9oKhITrBEtAxwuWKebFf8hMrPMgbYwFoWK/lH2sBkErELw==
+
+"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
+  integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
+
+js-yaml@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz"
+  integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
+  dependencies:
+    argparse "^2.0.1"
+
+jsesc@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz"
+  integrity sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==
+
+json-parse-even-better-errors@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz"
+  integrity sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==
+
+json-schema-traverse@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz"
+  integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
+
+json-stable-stringify-without-jsonify@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz"
+  integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
+
+json5@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz"
+  integrity sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==
+  dependencies:
+    minimist "^1.2.0"
+
+jsonwebtoken@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.npmjs.org/jsonwebtoken/-/jsonwebtoken-9.0.2.tgz"
+  integrity sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ==
+  dependencies:
+    jws "^3.2.2"
+    lodash.includes "^4.3.0"
+    lodash.isboolean "^3.0.3"
+    lodash.isinteger "^4.0.4"
+    lodash.isnumber "^3.0.3"
+    lodash.isplainobject "^4.0.6"
+    lodash.isstring "^4.0.1"
+    lodash.once "^4.0.0"
+    ms "^2.1.1"
+    semver "^7.5.4"
+
+"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.3.2:
+  version "3.3.3"
+  resolved "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz"
+  integrity sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==
+  dependencies:
+    array-includes "^3.1.5"
+    object.assign "^4.1.3"
+
+jwa@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.npmjs.org/jwa/-/jwa-1.4.1.tgz"
+  integrity sha512-qiLX/xhEEFKUAJ6FiBMbes3w9ATzyk5W7Hvzpa/SLYdxNtng+gcurvrI7TbACjIXlsJyr05/S1oUhZrc63evQA==
+  dependencies:
+    buffer-equal-constant-time "1.0.1"
+    ecdsa-sig-formatter "1.0.11"
+    safe-buffer "^5.0.1"
+
+jws@^3.2.2:
+  version "3.2.2"
+  resolved "https://registry.npmjs.org/jws/-/jws-3.2.2.tgz"
+  integrity sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==
+  dependencies:
+    jwa "^1.4.1"
+    safe-buffer "^5.0.1"
+
+jwt-decode@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz"
+  integrity sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==
+
+krustykrab@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/krustykrab/-/krustykrab-1.1.0.tgz"
+  integrity sha512-xpX9MPbw+nJseewe6who9Oq46RQwrBfps+dO/N4fSjJhsf2+y4XWC2kz46oBGX8yzMHyYJj35ug0X5s5yxB6tA==
+
+language-subtag-registry@~0.3.2:
+  version "0.3.22"
+  resolved "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.22.tgz"
+  integrity sha512-tN0MCzyWnoz/4nHS6uxdlFWoUZT7ABptwKPQ52Ea7URk6vll88bWBVhodtnlfEuCcKWNGoc+uGbw1cwa9IKh/w==
+
+language-tags@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/language-tags/-/language-tags-1.0.5.tgz"
+  integrity sha512-qJhlO9cGXi6hBGKoxEG/sKZDAHD5Hnu9Hs4WbOY3pCWXDhw0N8x1NenNzm2EnNLkLkk7J2SdxAkDSbb6ftT+UQ==
+  dependencies:
+    language-subtag-registry "~0.3.2"
+
+levn@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz"
+  integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
+  dependencies:
+    prelude-ls "^1.2.1"
+    type-check "~0.4.0"
+
+lilconfig@^3.0.0, lilconfig@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz"
+  integrity sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==
+
+lines-and-columns@^1.1.6:
+  version "1.2.4"
+  resolved "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz"
+  integrity sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==
+
+locate-path@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz"
+  integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
+  dependencies:
+    p-locate "^5.0.0"
+
+lodash-es@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
+lodash.castarray@^4.4.0:
+  version "4.4.0"
+  resolved "https://registry.npmjs.org/lodash.castarray/-/lodash.castarray-4.4.0.tgz"
+  integrity sha512-aVx8ztPv7/2ULbArGJ2Y42bG1mEQ5mGjpdvrbJcJFU3TbYybe+QlLS4pst9zV52ymy2in1KpFPiZnAOATxD4+Q==
+
+lodash.includes@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.npmjs.org/lodash.includes/-/lodash.includes-4.3.0.tgz"
+  integrity sha512-W3Bx6mdkRTGtlJISOvVD/lbqjTlPPUDTMnlXZFnVwi9NKJ6tiAk6LVdlhZMm17VZisqhKcgzpO5Wz91PCt5b0w==
+
+lodash.isboolean@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz"
+  integrity sha512-Bz5mupy2SVbPHURB98VAcw+aHh4vRV5IPNhILUCsOzRmsTmSQ17jIuqopAentWoehktxGd9e/hbIXq980/1QJg==
+
+lodash.isinteger@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.npmjs.org/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz"
+  integrity sha512-DBwtEWN2caHQ9/imiNeEA5ys1JoRtRfY3d7V9wkqtbycnAmTvRRmbHKDV4a0EYc678/dia0jrte4tjYwVBaZUA==
+
+lodash.isnumber@^3.0.3:
+  version "3.0.3"
+  resolved "https://registry.npmjs.org/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz"
+  integrity sha512-QYqzpfwO3/CWf3XP+Z+tkQsfaLL/EnUlXWVkIk5FUPc4sBdTehEqZONuyRt2P67PXAk+NXmTBcc97zw9t1FQrw==
+
+lodash.isplainobject@^4.0.6:
+  version "4.0.6"
+  resolved "https://registry.npmjs.org/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz"
+  integrity sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==
+
+lodash.isstring@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/lodash.isstring/-/lodash.isstring-4.0.1.tgz"
+  integrity sha512-0wJxfxH1wgO3GrbuP+dTTk7op+6L41QCXbGINEmD+ny/G/eCqGzxyCsh7159S+mgDDcoarnBw6PC1PS5+wUGgw==
+
+lodash.merge@^4.6.2:
+  version "4.6.2"
+  resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
+lodash.once@^4.0.0:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/lodash.once/-/lodash.once-4.1.1.tgz"
+  integrity sha512-Sb487aTOCr9drQVL8pIxOzVhafOjZN9UU54hiN8PU3uAiSV7lx1yYNpbNmex2PK6dSJoNTSJUUswT651yww3Mg==
+
+lodash@^4.17.21:
+  version "4.17.21"
+  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
+  integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
+
+loose-envify@^1.0.0, loose-envify@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
+  integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
+  dependencies:
+    js-tokens "^3.0.0 || ^4.0.0"
+
+lru-cache@^10.2.0:
+  version "10.4.3"
+  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz"
+  integrity sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==
+
+luxon@^3.2.1:
+  version "3.5.0"
+  resolved "https://registry.npmjs.org/luxon/-/luxon-3.5.0.tgz"
+  integrity sha512-rh+Zjr6DNfUYR3bPwJEnuwDdqMbxZW7LOQfUN4B54+Cl+0o5zaU9RJ6bcidfDtC1cWCZXQ+nvX8bf6bAji37QQ==
+
+memoize-one@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz"
+  integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
+
+merge2@^1.3.0, merge2@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
+  integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
+
+micromatch@^4.0.4, micromatch@^4.0.8:
+  version "4.0.8"
+  resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz"
+  integrity sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==
+  dependencies:
+    braces "^3.0.3"
+    picomatch "^2.3.1"
+
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@^2.1.12:
+  version "2.1.35"
+  resolved "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
+mini-svg-data-uri@^1.2.3:
+  version "1.4.4"
+  resolved "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz"
+  integrity sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==
+
+minimatch@^3.0.4, minimatch@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimatch@^9.0.4:
+  version "9.0.5"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz"
+  integrity sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==
+  dependencies:
+    brace-expansion "^2.0.1"
+
+minimist@^1.2.0, minimist@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz"
+  integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
+
+"minipass@^5.0.0 || ^6.0.2 || ^7.0.0", minipass@^7.1.2:
+  version "7.1.2"
+  resolved "https://registry.npmjs.org/minipass/-/minipass-7.1.2.tgz"
+  integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==
+
+moment-timezone@^0.5.40:
+  version "0.5.46"
+  resolved "https://registry.npmjs.org/moment-timezone/-/moment-timezone-0.5.46.tgz"
+  integrity sha512-ZXm9b36esbe7OmdABqIWJuBBiLLwAjrN7CE+7sYdCCx82Nabt1wHDj8TVseS59QIlfFPbOoiBPm6ca9BioG4hw==
+  dependencies:
+    moment "^2.29.4"
+
+moment@^2.29.4:
+  version "2.30.1"
+  resolved "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz"
+  integrity sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==
+
+ms@^2.1.1, ms@2.1.2:
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
+  integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
+
+ms@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz"
+  integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
+
+mz@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz"
+  integrity sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==
+  dependencies:
+    any-promise "^1.0.0"
+    object-assign "^4.0.1"
+    thenify-all "^1.0.0"
+
+nanoid@^3.3.6, nanoid@^3.3.7:
+  version "3.3.8"
+  resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz"
+  integrity sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==
+
+natural-compare@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
+  integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
+
+next@^14.1.0:
+  version "14.2.22"
+  resolved "https://registry.npmjs.org/next/-/next-14.2.22.tgz"
+  integrity sha512-Ps2caobQ9hlEhscLPiPm3J3SYhfwfpMqzsoCMZGWxt9jBRK9hoBZj2A37i8joKhsyth2EuVKDVJCTF5/H4iEDw==
+  dependencies:
+    "@next/env" "14.2.22"
+    "@swc/helpers" "0.5.5"
+    busboy "1.6.0"
+    caniuse-lite "^1.0.30001579"
+    graceful-fs "^4.2.11"
+    postcss "8.4.31"
+    styled-jsx "5.1.1"
+  optionalDependencies:
+    "@next/swc-darwin-arm64" "14.2.22"
+    "@next/swc-darwin-x64" "14.2.22"
+    "@next/swc-linux-arm64-gnu" "14.2.22"
+    "@next/swc-linux-arm64-musl" "14.2.22"
+    "@next/swc-linux-x64-gnu" "14.2.22"
+    "@next/swc-linux-x64-musl" "14.2.22"
+    "@next/swc-win32-arm64-msvc" "14.2.22"
+    "@next/swc-win32-ia32-msvc" "14.2.22"
+    "@next/swc-win32-x64-msvc" "14.2.22"
+
+node-releases@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.6.tgz"
+  integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==
+
+normalize-path@^3.0.0, normalize-path@~3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz"
+  integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
+
+normalize-range@^0.1.2:
+  version "0.1.2"
+  resolved "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz"
+  integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
+
+numeral@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.npmjs.org/numeral/-/numeral-2.0.6.tgz"
+  integrity sha512-qaKRmtYPZ5qdw4jWJD6bxEf1FJEqllJrwxCLIm0sQU/A7v2/czigzOb+C2uSiFsa9lBUzeH7M1oK+Q+OLxL3kA==
+
+object-assign@^4.0.1, object-assign@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz"
+  integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
+
+object-hash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz"
+  integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
+
+object-inspect@^1.12.2, object-inspect@^1.9.0:
+  version "1.12.2"
+  resolved "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz"
+  integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==
+
+object-keys@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz"
+  integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
+
+object.assign@^4.1.3, object.assign@^4.1.4:
+  version "4.1.4"
+  resolved "https://registry.npmjs.org/object.assign/-/object.assign-4.1.4.tgz"
+  integrity sha512-1mxKf0e58bvyjSCtKYY4sRe9itRk3PJpquJOjeIkz885CczcI4IvJJDLPS72oowuSh+pBxUFROpX+TU++hxhZQ==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    has-symbols "^1.0.3"
+    object-keys "^1.1.1"
+
+object.entries@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.npmjs.org/object.entries/-/object.entries-1.1.5.tgz"
+  integrity sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+
+object.fromentries@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.5.tgz"
+  integrity sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+
+object.hasown@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.1.tgz"
+  integrity sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==
+  dependencies:
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
+
+object.values@^1.1.5:
+  version "1.1.5"
+  resolved "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz"
+  integrity sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz"
+  integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
+  dependencies:
+    wrappy "1"
+
+open@^8.4.0:
+  version "8.4.0"
+  resolved "https://registry.npmjs.org/open/-/open-8.4.0.tgz"
+  integrity sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==
+  dependencies:
+    define-lazy-prop "^2.0.0"
+    is-docker "^2.1.1"
+    is-wsl "^2.2.0"
+
+optionator@^0.9.1:
+  version "0.9.1"
+  resolved "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz"
+  integrity sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==
+  dependencies:
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+    word-wrap "^1.2.3"
+
+p-limit@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz"
+  integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
+  dependencies:
+    yocto-queue "^0.1.0"
+
+p-locate@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz"
+  integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
+  dependencies:
+    p-limit "^3.0.2"
+
+package-json-from-dist@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz"
+  integrity sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==
+
+parent-module@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz"
+  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
+  dependencies:
+    callsites "^3.0.0"
+
+parse-json@^5.0.0:
+  version "5.2.0"
+  resolved "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz"
+  integrity sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-even-better-errors "^2.3.0"
+    lines-and-columns "^1.1.6"
+
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz"
+  integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
+
+path-key@^3.1.0:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz"
+  integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
+
+path-parse@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
+  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
+
+path-scurry@^1.11.1:
+  version "1.11.1"
+  resolved "https://registry.npmjs.org/path-scurry/-/path-scurry-1.11.1.tgz"
+  integrity sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==
+  dependencies:
+    lru-cache "^10.2.0"
+    minipass "^5.0.0 || ^6.0.2 || ^7.0.0"
+
+path-type@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
+picocolors@^1.0.0, picocolors@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz"
+  integrity sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==
+
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+pify@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz"
+  integrity sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==
+
+pirates@^4.0.1:
+  version "4.0.6"
+  resolved "https://registry.npmjs.org/pirates/-/pirates-4.0.6.tgz"
+  integrity sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==
+
+postcss-import@^14.1.0:
+  version "14.1.0"
+  resolved "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz"
+  integrity sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==
+  dependencies:
+    postcss-value-parser "^4.0.0"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
+postcss-import@^15.1.0:
+  version "15.1.0"
+  resolved "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz"
+  integrity sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==
+  dependencies:
+    postcss-value-parser "^4.0.0"
+    read-cache "^1.0.0"
+    resolve "^1.1.7"
+
+postcss-js@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz"
+  integrity sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==
+  dependencies:
+    camelcase-css "^2.0.1"
+
+postcss-load-config@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-4.0.2.tgz"
+  integrity sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==
+  dependencies:
+    lilconfig "^3.0.0"
+    yaml "^2.3.4"
+
+postcss-nested@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz"
+  integrity sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==
+  dependencies:
+    postcss-selector-parser "^6.1.1"
+
+postcss-selector-parser@^6.1.1:
+  version "6.1.2"
+  resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz"
+  integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-selector-parser@^6.1.2:
+  version "6.1.2"
+  resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz"
+  integrity sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-selector-parser@6.0.10:
+  version "6.0.10"
+  resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz"
+  integrity sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
+postcss-value-parser@^4.0.0, postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
+postcss@^8.4.4, postcss@^8.4.47:
+  version "8.4.49"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz"
+  integrity sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.1.1"
+    source-map-js "^1.2.1"
+
+postcss@8.4.31:
+  version "8.4.31"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz"
+  integrity sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==
+  dependencies:
+    nanoid "^3.3.6"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+prelude-ls@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
+  integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
+
+prettier@^3.2.4:
+  version "3.4.2"
+  resolved "https://registry.npmjs.org/prettier/-/prettier-3.4.2.tgz"
+  integrity sha512-e9MewbtFo+Fevyuxn/4rrcDAaq0IYxPGLvObpQjiZBMAzB9IGmzlnG9RZy3FFas+eBMu2vA0CszMeduow5dIuQ==
+
+prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
+proxy-from-env@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz"
+  integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==
+
+punycode@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz"
+  integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
+
+query-string@^8.1.0:
+  version "8.2.0"
+  resolved "https://registry.npmjs.org/query-string/-/query-string-8.2.0.tgz"
+  integrity sha512-tUZIw8J0CawM5wyGBiDOAp7ObdRQh4uBor/fUR9ZjmbZVvw95OD9If4w3MQxr99rg0DJZ/9CIORcpEqU5hQG7g==
+  dependencies:
+    decode-uri-component "^0.4.1"
+    filter-obj "^5.1.0"
+    split-on-first "^3.0.0"
+
+queue-microtask@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
+  integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
+
+react-apexcharts@^1.4.1:
+  version "1.7.0"
+  resolved "https://registry.npmjs.org/react-apexcharts/-/react-apexcharts-1.7.0.tgz"
+  integrity sha512-03oScKJyNLRf0Oe+ihJxFZliBQM9vW3UWwomVn4YVRTN1jsIR58dLWt0v1sb8RwJVHDMbeHiKQueM0KGpn7nOA==
+  dependencies:
+    prop-types "^15.8.1"
+
+react-big-calendar@^1.10.3:
+  version "1.17.1"
+  resolved "https://registry.npmjs.org/react-big-calendar/-/react-big-calendar-1.17.1.tgz"
+  integrity sha512-LltUAMSGODWQBKx4013bRe6R0jaINV9hrs970+F860KedpozwRGGMT66esV9mA3mAhfSKoazF/QH1WCyLkXYZA==
+  dependencies:
+    "@babel/runtime" "^7.20.7"
+    clsx "^1.2.1"
+    date-arithmetic "^4.1.0"
+    dayjs "^1.11.7"
+    dom-helpers "^5.2.1"
+    globalize "^0.1.1"
+    invariant "^2.2.4"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    luxon "^3.2.1"
+    memoize-one "^6.0.0"
+    moment "^2.29.4"
+    moment-timezone "^0.5.40"
+    prop-types "^15.8.1"
+    react-overlays "^5.2.1"
+    uncontrollable "^7.2.1"
+
+react-chartjs-2@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.3.1.tgz"
+  integrity sha512-5i3mjP6tU7QSn0jvb8I4hudTzHJqS8l00ORJnVwI2sYu0ihpj83Lv2YzfxunfxTZkscKvZu2F2w9LkwNBhj6xA==
+
+react-datepicker@^4.10.0:
+  version "4.25.0"
+  resolved "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.25.0.tgz"
+  integrity sha512-zB7CSi44SJ0sqo8hUQ3BF1saE/knn7u25qEMTO1CQGofY1VAKahO8k9drZtp0cfW1DMfoYLR3uSY1/uMvbEzbg==
+  dependencies:
+    "@popperjs/core" "^2.11.8"
+    classnames "^2.2.6"
+    date-fns "^2.30.0"
+    prop-types "^15.7.2"
+    react-onclickoutside "^6.13.0"
+    react-popper "^2.3.0"
+
+react-dom@^19.0.0:
+  version "19.0.0"
+  resolved "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz"
+  integrity sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==
+  dependencies:
+    scheduler "^0.25.0"
+
+react-fast-compare@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-2.0.4.tgz"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
+react-fast-compare@^3.0.1:
+  version "3.2.2"
+  resolved "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz"
+  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
+
+react-is@^16.13.1, react-is@^16.7.0:
+  version "16.13.1"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+
+react-is@^18.0.0:
+  version "18.2.0"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
+  integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
+
+react-is@^19.0.0:
+  version "19.0.0"
+  resolved "https://registry.npmjs.org/react-is/-/react-is-19.0.0.tgz"
+  integrity sha512-H91OHcwjZsbq3ClIDHMzBShc1rotbfACdWENsmEf0IFvZ3FgGPtdHMcsv45bQ1hAbgdfiA8SnxTKfDS+x/8m2g==
+
+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
+react-onclickoutside@^6.13.0:
+  version "6.13.1"
+  resolved "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.1.tgz"
+  integrity sha512-LdrrxK/Yh9zbBQdFbMTXPp3dTSN9B+9YJQucdDu3JNKRrbdU+H+/TVONJoWtOwy4II8Sqf1y/DTI6w/vGPYW0w==
+
+react-overlays@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.npmjs.org/react-overlays/-/react-overlays-5.2.1.tgz"
+  integrity sha512-GLLSOLWr21CqtJn8geSwQfoJufdt3mfdsnIiQswouuQ2MMPns+ihZklxvsTDKD3cR2tF8ELbi5xUsvqVhR6WvA==
+  dependencies:
+    "@babel/runtime" "^7.13.8"
+    "@popperjs/core" "^2.11.6"
+    "@restart/hooks" "^0.4.7"
+    "@types/warning" "^3.0.0"
+    dom-helpers "^5.2.0"
+    prop-types "^15.7.2"
+    uncontrollable "^7.2.1"
+    warning "^4.0.3"
+
+react-popper@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz"
+  integrity sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==
+  dependencies:
+    react-fast-compare "^3.0.1"
+    warning "^4.0.2"
+
+react-redux@^8.0.2:
+  version "8.0.2"
+  resolved "https://registry.npmjs.org/react-redux/-/react-redux-8.0.2.tgz"
+  integrity sha512-nBwiscMw3NoP59NFCXFf02f8xdo+vSHT/uZ1ldDwF7XaTpzm+Phk97VT4urYBl5TYAPNVaFm12UHAEyzkpNzRA==
+  dependencies:
+    "@babel/runtime" "^7.12.1"
+    "@types/hoist-non-react-statics" "^3.3.1"
+    "@types/use-sync-external-store" "^0.0.3"
+    hoist-non-react-statics "^3.3.2"
+    react-is "^18.0.0"
+    use-sync-external-store "^1.0.0"
+
+react-select-async-paginate@^0.7.9:
+  version "0.7.9"
+  resolved "https://registry.npmjs.org/react-select-async-paginate/-/react-select-async-paginate-0.7.9.tgz"
+  integrity sha512-oGdmXWatj06MNUcLwFkyt8qLBA0km0gFvDF52qaQQEArRjprbTajaYwhtjVotKTw1IXfw3fiq3G9Lgsjfpjz/Q==
+  dependencies:
+    "@seznam/compose-react-refs" "^1.0.6"
+    "@vtaits/use-lazy-ref" "^0.1.3"
+    krustykrab "^1.1.0"
+    sleep-promise "^9.1.0"
+    use-is-mounted-ref "^1.5.0"
+    use-latest "^1.3.0"
+
+react-select@^5.7.0:
+  version "5.9.0"
+  resolved "https://registry.npmjs.org/react-select/-/react-select-5.9.0.tgz"
+  integrity sha512-nwRKGanVHGjdccsnzhFte/PULziueZxGD8LL2WojON78Mvnq7LdAMEtu2frrwld1fr3geixg3iiMBIc/LLAZpw==
+  dependencies:
+    "@babel/runtime" "^7.12.0"
+    "@emotion/cache" "^11.4.0"
+    "@emotion/react" "^11.8.1"
+    "@floating-ui/dom" "^1.0.1"
+    "@types/react-transition-group" "^4.4.0"
+    memoize-one "^6.0.0"
+    prop-types "^15.6.0"
+    react-transition-group "^4.3.0"
+    use-isomorphic-layout-effect "^1.2.0"
+
+react-switch@^7.0.0:
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/react-switch/-/react-switch-7.1.0.tgz"
+  integrity sha512-4xVeyImZE8QOTDw2FmhWz0iqo2psoRiS7XzdjaZBCIP8Dzo3rT0esHUjLee5WsAPSFXWWl1eVA5arp9n2C6yQA==
+  dependencies:
+    prop-types "^15.7.2"
+
+react-toastify@^9.1.2:
+  version "9.1.3"
+  resolved "https://registry.npmjs.org/react-toastify/-/react-toastify-9.1.3.tgz"
+  integrity sha512-fPfb8ghtn/XMxw3LkxQBk3IyagNpF/LIKjOBflbexr2AWxAH1MJgvnESwEwBn9liLFXgTKWgBSdZpw9m4OTHTg==
+  dependencies:
+    clsx "^1.1.1"
+
+react-transition-group@^4.3.0, react-transition-group@^4.4.5:
+  version "4.4.5"
+  resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
+react@^19.0.0:
+  version "19.0.0"
+  resolved "https://registry.npmjs.org/react/-/react-19.0.0.tgz"
+  integrity sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==
+
+read-cache@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz"
+  integrity sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==
+  dependencies:
+    pify "^2.3.0"
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz"
+  integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
+  dependencies:
+    picomatch "^2.2.1"
+
+redux-thunk@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz"
+  integrity sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==
+
+redux@^4.0.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz"
+  integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+
+redux@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz"
+  integrity sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==
+
+regenerator-runtime@^0.13.4:
+  version "0.13.9"
+  resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz"
+  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
+
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
+regexp.prototype.flags@^1.4.1, regexp.prototype.flags@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz"
+  integrity sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    functions-have-names "^1.2.2"
+
+regexpp@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz"
+  integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
+
+reselect@^4.1.8:
+  version "4.1.8"
+  resolved "https://registry.npmjs.org/reselect/-/reselect-4.1.8.tgz"
+  integrity sha512-ab9EmR80F/zQTMNeneUr4cv+jSwPJgIlvEmVwLerwrWVbpLlBuls9XHzIeTFy4cegU2NHBp3va0LKOzU5qFEYQ==
+
+reselect@^5.1.0:
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz"
+  integrity sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==
+
+resolve-from@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
+  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
+
+resolve@^1.1.7, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0, resolve@^1.22.8:
+  version "1.22.10"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz"
+  integrity sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==
+  dependencies:
+    is-core-module "^2.16.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+resolve@^2.0.0-next.3:
+  version "2.0.0-next.4"
+  resolved "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.4.tgz"
+  integrity sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==
+  dependencies:
+    is-core-module "^2.9.0"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
+reusify@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz"
+  integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
+
+rimraf@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
+run-parallel@^1.1.9:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz"
+  integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
+  dependencies:
+    queue-microtask "^1.2.2"
+
+safe-buffer@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
+
+safe-regex-test@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.0.0.tgz"
+  integrity sha512-JBUUzyOgEwXQY1NuPtvcj/qcBDbDmEvWufhlnXZIm75DEHp+afM1r1ujJpJsV/gSM4t59tpDyPi1sd6ZaPFfsA==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.3"
+    is-regex "^1.1.4"
+
+scheduler@^0.25.0:
+  version "0.25.0"
+  resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.25.0.tgz"
+  integrity sha512-xFVuu11jh+xcO7JOAGJNOXld8/TcEHK/4CituBUeUb5hqxJLj9YuemAEuvm9gQ/+pgXYfbQuqAkiYu+u7YEsNA==
+
+semver@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
+  integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
+
+semver@^7.3.7, semver@^7.5.4:
+  version "7.6.3"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz"
+  integrity sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==
+
+shebang-command@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz"
+  integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
+  dependencies:
+    shebang-regex "^3.0.0"
+
+shebang-regex@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+side-channel@^1.0.4:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz"
+  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
+  dependencies:
+    call-bind "^1.0.0"
+    get-intrinsic "^1.0.2"
+    object-inspect "^1.9.0"
+
+signal-exit@^4.0.1:
+  version "4.1.0"
+  resolved "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz"
+  integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==
+
+slash@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz"
+  integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
+
+slash@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.npmjs.org/slash/-/slash-4.0.0.tgz"
+  integrity sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==
+
+sleep-promise@^9.1.0:
+  version "9.1.0"
+  resolved "https://registry.npmjs.org/sleep-promise/-/sleep-promise-9.1.0.tgz"
+  integrity sha512-UHYzVpz9Xn8b+jikYSD6bqvf754xL2uBUzDFwiU6NcdZeifPr6UfgU43xpkPu67VMS88+TI2PSI7Eohgqf2fKA==
+
+source-map-js@^1.0.2, source-map-js@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz"
+  integrity sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==
+
+source-map@^0.5.7:
+  version "0.5.7"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
+  integrity sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==
+
+split-on-first@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/split-on-first/-/split-on-first-3.0.0.tgz"
+  integrity sha512-qxQJTx2ryR0Dw0ITYyekNQWpz6f8dGd7vffGNflQQ3Iqj9NJ6qiZ7ELpZsJ/QBhIVAiDfXdag3+Gp8RvWa62AA==
+
+streamsearch@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz"
+  integrity sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==
+
+"string-width-cjs@npm:string-width@^4.2.0":
+  version "4.2.3"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^4.1.0:
+  version "4.2.3"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz"
+  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+  dependencies:
+    emoji-regex "^8.0.0"
+    is-fullwidth-code-point "^3.0.0"
+    strip-ansi "^6.0.1"
+
+string-width@^5.0.1, string-width@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/string-width/-/string-width-5.1.2.tgz"
+  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
+  dependencies:
+    eastasianwidth "^0.2.0"
+    emoji-regex "^9.2.2"
+    strip-ansi "^7.0.1"
+
+string.prototype.matchall@^4.0.7:
+  version "4.0.7"
+  resolved "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz"
+  integrity sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.3"
+    es-abstract "^1.19.1"
+    get-intrinsic "^1.1.1"
+    has-symbols "^1.0.3"
+    internal-slot "^1.0.3"
+    regexp.prototype.flags "^1.4.1"
+    side-channel "^1.0.4"
+
+string.prototype.trimend@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz"
+  integrity sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
+
+string.prototype.trimstart@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz"
+  integrity sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.1.4"
+    es-abstract "^1.19.5"
+
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+  version "6.0.1"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
+  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+  dependencies:
+    ansi-regex "^5.0.1"
+
+strip-ansi@^7.0.1:
+  version "7.1.0"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz"
+  integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
+  dependencies:
+    ansi-regex "^6.0.1"
+
+strip-bom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/strip-bom/-/strip-bom-3.0.0.tgz"
+  integrity sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==
+
+strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz"
+  integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
+
+styled-jsx@5.1.1:
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz"
+  integrity sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==
+  dependencies:
+    client-only "0.0.1"
+
+stylis@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz"
+  integrity sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==
+
+sucrase@^3.35.0:
+  version "3.35.0"
+  resolved "https://registry.npmjs.org/sucrase/-/sucrase-3.35.0.tgz"
+  integrity sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.2"
+    commander "^4.0.0"
+    glob "^10.3.10"
+    lines-and-columns "^1.1.6"
+    mz "^2.7.0"
+    pirates "^4.0.1"
+    ts-interface-checker "^0.1.9"
+
+supports-color@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
+svg.draggable.js@^2.2.2:
+  version "2.2.2"
+  resolved "https://registry.npmjs.org/svg.draggable.js/-/svg.draggable.js-2.2.2.tgz"
+  integrity sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==
+  dependencies:
+    svg.js "^2.0.1"
+
+svg.easing.js@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/svg.easing.js/-/svg.easing.js-2.0.0.tgz"
+  integrity sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==
+  dependencies:
+    svg.js ">=2.3.x"
+
+svg.filter.js@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/svg.filter.js/-/svg.filter.js-2.0.2.tgz"
+  integrity sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==
+  dependencies:
+    svg.js "^2.2.5"
+
+svg.js@^2.0.1, svg.js@^2.2.5, svg.js@^2.4.0, svg.js@^2.6.5, svg.js@>=2.3.x:
+  version "2.7.1"
+  resolved "https://registry.npmjs.org/svg.js/-/svg.js-2.7.1.tgz"
+  integrity sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==
+
+svg.pathmorphing.js@^0.1.3:
+  version "0.1.3"
+  resolved "https://registry.npmjs.org/svg.pathmorphing.js/-/svg.pathmorphing.js-0.1.3.tgz"
+  integrity sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==
+  dependencies:
+    svg.js "^2.4.0"
+
+svg.resize.js@^1.4.3:
+  version "1.4.3"
+  resolved "https://registry.npmjs.org/svg.resize.js/-/svg.resize.js-1.4.3.tgz"
+  integrity sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==
+  dependencies:
+    svg.js "^2.6.5"
+    svg.select.js "^2.1.2"
+
+svg.select.js@^2.1.2:
+  version "2.1.2"
+  resolved "https://registry.npmjs.org/svg.select.js/-/svg.select.js-2.1.2.tgz"
+  integrity sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==
+  dependencies:
+    svg.js "^2.2.5"
+
+svg.select.js@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/svg.select.js/-/svg.select.js-3.0.1.tgz"
+  integrity sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==
+  dependencies:
+    svg.js "^2.6.5"
+
+swr@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/swr/-/swr-1.3.0.tgz"
+  integrity sha512-dkghQrOl2ORX9HYrMDtPa7LTVHJjCTeZoB1dqTbnnEDlSvN8JEKpYIYurDfvbQFUUS8Cg8PceFVZNkW0KNNYPw==
+
+synckit@^0.8.4:
+  version "0.8.4"
+  resolved "https://registry.npmjs.org/synckit/-/synckit-0.8.4.tgz"
+  integrity sha512-Dn2ZkzMdSX827QbowGbU/4yjWuvNaCoScLLoMo/yKbu+P4GBR6cRGKZH27k6a9bRzdqcyd1DE96pQtQ6uNkmyw==
+  dependencies:
+    "@pkgr/utils" "^2.3.1"
+    tslib "^2.4.0"
+
+tailwindcss@^3.4.1:
+  version "3.4.17"
+  resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.17.tgz"
+  integrity sha512-w33E2aCvSDP0tW9RZuNXadXlkHXqFzSkQew/aIa2i/Sj8fThxwovwlXHSPXTbAHwEIhBFXAedUhP2tueAKP8Og==
+  dependencies:
+    "@alloc/quick-lru" "^5.2.0"
+    arg "^5.0.2"
+    chokidar "^3.6.0"
+    didyoumean "^1.2.2"
+    dlv "^1.1.3"
+    fast-glob "^3.3.2"
+    glob-parent "^6.0.2"
+    is-glob "^4.0.3"
+    jiti "^1.21.6"
+    lilconfig "^3.1.3"
+    micromatch "^4.0.8"
+    normalize-path "^3.0.0"
+    object-hash "^3.0.0"
+    picocolors "^1.1.1"
+    postcss "^8.4.47"
+    postcss-import "^15.1.0"
+    postcss-js "^4.0.1"
+    postcss-load-config "^4.0.2"
+    postcss-nested "^6.2.0"
+    postcss-selector-parser "^6.1.2"
+    resolve "^1.22.8"
+    sucrase "^3.35.0"
+
+tapable@^2.2.0:
+  version "2.2.1"
+  resolved "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz"
+  integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
+
+text-table@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
+  integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
+
+thenify-all@^1.0.0:
+  version "1.6.0"
+  resolved "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz"
+  integrity sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==
+  dependencies:
+    thenify ">= 3.1.0 < 4"
+
+"thenify@>= 3.1.0 < 4":
+  version "3.3.1"
+  resolved "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz"
+  integrity sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==
+  dependencies:
+    any-promise "^1.0.0"
+
+tiny-glob@^0.2.9:
+  version "0.2.9"
+  resolved "https://registry.npmjs.org/tiny-glob/-/tiny-glob-0.2.9.tgz"
+  integrity sha512-g/55ssRPUjShh+xkfx9UPDXqhckHEsHr4Vd9zX55oSdGZc/MD0m3sferOkwWtp98bv+kcVfEHtRJgBVJzelrzg==
+  dependencies:
+    globalyzer "0.1.0"
+    globrex "^0.1.2"
+
+tiny-warning@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
+"tinymce@^6.0.0 || ^5.5.1":
+  version "6.8.5"
+  resolved "https://registry.npmjs.org/tinymce/-/tinymce-6.8.5.tgz"
+  integrity sha512-qAL/FxL7cwZHj4BfaF818zeJJizK9jU5IQzTcSLL4Rj5MaJdiVblEj7aDr80VCV1w9h4Lak9hlnALhq/kVtN1g==
+
+to-regex-range@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+ts-interface-checker@^0.1.9:
+  version "0.1.13"
+  resolved "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz"
+  integrity sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==
+
+tsconfig-paths@^3.14.1:
+  version "3.14.1"
+  resolved "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz"
+  integrity sha512-fxDhWnFSLt3VuTwtvJt5fpwxBHg5AdKWMsgcPOOIilyjymcYVZoCQF8fvFRezCNfblEXmi+PcM1eYHeOAgXCOQ==
+  dependencies:
+    "@types/json5" "^0.0.29"
+    json5 "^1.0.1"
+    minimist "^1.2.6"
+    strip-bom "^3.0.0"
+
+tslib@^1.8.1:
+  version "1.14.1"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz"
+  integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
+
+tslib@^2.0.0, tslib@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
+tsutils@^3.21.0:
+  version "3.21.0"
+  resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz"
+  integrity sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==
+  dependencies:
+    tslib "^1.8.1"
+
+type-check@^0.4.0, type-check@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz"
+  integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
+  dependencies:
+    prelude-ls "^1.2.1"
+
+type-fest@^0.20.2:
+  version "0.20.2"
+  resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz"
+  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
+
+typescript@^4.8.3:
+  version "4.8.3"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-4.8.3.tgz"
+  integrity sha512-goMHfm00nWPa8UvR/CPSvykqf6dVV8x/dp0c5mFTMTIu0u0FlGWRioyy7Nn0PGAdHxpJZnuO/ut+PpQ8UiHAig==
+
+unbox-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz"
+  integrity sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==
+  dependencies:
+    call-bind "^1.0.2"
+    has-bigints "^1.0.2"
+    has-symbols "^1.0.3"
+    which-boxed-primitive "^1.0.2"
+
+uncontrollable@^7.2.1:
+  version "7.2.1"
+  resolved "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz"
+  integrity sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==
+  dependencies:
+    "@babel/runtime" "^7.6.3"
+    "@types/react" ">=16.9.11"
+    invariant "^2.2.4"
+    react-lifecycles-compat "^3.0.4"
+
+update-browserslist-db@^1.0.5:
+  version "1.0.9"
+  resolved "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.9.tgz"
+  integrity sha512-/xsqn21EGVdXI3EXSum1Yckj3ZVZugqyOZQ/CxYPBD/R+ko9NSUScf8tFF4dOKY+2pvSSJA/S+5B8s4Zr4kyvg==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
+uri-js@^4.2.2:
+  version "4.4.1"
+  resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
+  dependencies:
+    punycode "^2.1.0"
+
+use-is-mounted-ref@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.npmjs.org/use-is-mounted-ref/-/use-is-mounted-ref-1.5.0.tgz"
+  integrity sha512-p5FksHf/ospZUr5KU9ese6u3jp9fzvZ3wuSb50i0y6fdONaHWgmOqQtxR/PUcwi6hnhQDbNxWSg3eTK3N6m+dg==
+
+use-isomorphic-layout-effect@^1.1.1, use-isomorphic-layout-effect@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.2.0.tgz"
+  integrity sha512-q6ayo8DWoPZT0VdG4u3D3uxcgONP3Mevx2i2b0434cwWBoL+aelL1DzkXI6w3PhTZzUeR2kaVlZn70iCiseP6w==
+
+use-latest@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/use-latest/-/use-latest-1.3.0.tgz"
+  integrity sha512-mhg3xdm9NaM8q+gLT8KryJPnRFOz1/5XPBhmDEVZK1webPzDjrPk7f/mbpeLqTgB9msytYWANxgALOCJKnLvcQ==
+  dependencies:
+    use-isomorphic-layout-effect "^1.1.1"
+
+use-sync-external-store@^1.0.0:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
+util-deprecate@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
+  integrity sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==
+
+uuid@^9.0.0:
+  version "9.0.1"
+  resolved "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz"
+  integrity sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==
+
+warning@^4.0.2, warning@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
+which-boxed-primitive@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz"
+  integrity sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==
+  dependencies:
+    is-bigint "^1.0.1"
+    is-boolean-object "^1.1.0"
+    is-number-object "^1.0.4"
+    is-string "^1.0.5"
+    is-symbol "^1.0.3"
+
+which@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz"
+  integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
+  dependencies:
+    isexe "^2.0.0"
+
+word-wrap@^1.2.3:
+  version "1.2.3"
+  resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.3.tgz"
+  integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
+
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
+  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+  dependencies:
+    ansi-styles "^4.0.0"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+
+wrap-ansi@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz"
+  integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
+  dependencies:
+    ansi-styles "^6.1.0"
+    string-width "^5.0.1"
+    strip-ansi "^7.0.1"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
+  integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
+
+yaml@^1.10.0:
+  version "1.10.2"
+  resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
+  integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==
+
+yaml@^2.3.4:
+  version "2.7.0"
+  resolved "https://registry.npmjs.org/yaml/-/yaml-2.7.0.tgz"
+  integrity sha512-+hSoy/QHluxmC9kCIJyL/uyFmLmc+e5CFR5Wa+bpIhIj85LVb9ZH2nVnqrHoSvKogwODv0ClqZkmiSSaIH5LTA==
+
+yocto-queue@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
diff --git a/nginx.conf b/nginx.conf
new file mode 100644
index 0000000..926fcdd
--- /dev/null
+++ b/nginx.conf
@@ -0,0 +1,96 @@
+worker_processes 1;
+
+events {
+    worker_connections 1024;
+}
+
+http {
+    client_max_body_size 10M;
+    map $http_upgrade $connection_upgrade {
+        default upgrade;
+        ''      close;
+    }
+
+    server {
+        listen 8080;
+
+        error_page 502 /502.html;
+        location = /502.html {
+            root /usr/share/nginx/html;
+            internal;
+        }
+
+        location /api/logError {
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_pass http://127.0.0.1:3001/api/logError;
+        }
+
+
+        location /api-docs/ {
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_pass http://127.0.0.1:3000/api-docs/;
+        }
+
+        location /api/ {
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            add_header 'Access-Control-Allow-Origin' '*';
+            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
+            add_header 'Access-Control-Allow-Headers' 'DNT, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type, Range';
+            add_header 'Access-Control-Expose-Headers' 'Content-Length, Content-Range';
+            proxy_pass http://127.0.0.1:3000/api/;
+        }
+
+        location / {
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_pass http://127.0.0.1:3001/;
+        }
+
+        location /app-shell/ {
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_pass http://127.0.0.1:4000/;
+        }
+
+        location /locales/ {
+            root /app/frontend/public;
+            expires 1h;
+            add_header Cache-Control "public, must-revalidate";
+            try_files $uri =404;
+        }
+
+        location ~ /_next/webpack-hmr {
+            proxy_pass http://127.0.0.1:3001;
+            proxy_http_version 1.1;
+            proxy_set_header Upgrade $http_upgrade;
+            proxy_set_header Connection $connection_upgrade;
+            proxy_set_header Host $host;
+            proxy_cache_bypass $http_upgrade;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+
+        location ~ ^/_next/ {
+            proxy_pass http://127.0.0.1:3001;
+            proxy_http_version 1.1;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+        }
+    }
+}
\ No newline at end of file
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..eb89994
--- /dev/null
+++ b/package.json
@@ -0,0 +1,9 @@
+{
+  "name": "app",
+  "version": "0.0.0",
+"scripts": {
+    "build:production": "cd ./frontend && yarn install && yarn run build && rm -rf ./node_modules && cd ../backend && yarn install",
+    "start:production": "cd ./backend && NODE_ENV=production yarn start"
+  }
+
+}
diff --git a/pids/backend.pid b/pids/backend.pid
new file mode 100644
index 0000000..b8626c4
--- /dev/null
+++ b/pids/backend.pid
@@ -0,0 +1 @@
+4
diff --git a/pids/frontend.pid b/pids/frontend.pid
new file mode 100644
index 0000000..00750ed
--- /dev/null
+++ b/pids/frontend.pid
@@ -0,0 +1 @@
+3

Loading the app, just a moment…

CtrlE

{title}

+ Something went wrong +

+ Howdy, {userName}! +