+ + + ); + + 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..75d43d9 --- /dev/null +++ b/frontend/src/components/Users/CardUsers.tsx @@ -0,0 +1,207 @@ +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(', ')} +
+
+
+ +
+
+ Agences +
+
+
+ {dataFormatter.agencesOneListFormatter(item.agences)} +
+
+
+
+

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..68d3e0b --- /dev/null +++ b/frontend/src/components/Users/ListUsers.tsx @@ -0,0 +1,152 @@ +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(', ')} +

+ +

Agences

+ {dataFormatter.agencesOneListFormatter(item.agences)} +

+ + +

+ +

+ ))} + {!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..f39c7f5 --- /dev/null +++ b/frontend/src/components/Users/TableUsers.tsx @@ -0,0 +1,482 @@ +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..3e048a3 --- /dev/null +++ b/frontend/src/components/Users/configureUsersCols.tsx @@ -0,0 +1,203 @@ +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: 'agences', + headerName: 'Agences', + 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('agences'), + valueGetter: (params: GridValueGetterParams) => + params?.value?.id ?? params?.value, + }, + + { + field: 'actions', + type: 'actions', + minWidth: 30, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + getActions: (params: GridRowParams) => { + return [ +

+ +

, + ]; + }, + }, + ]; +}; diff --git a/frontend/src/components/Vehicle_conditions/CardVehicle_conditions.tsx b/frontend/src/components/Vehicle_conditions/CardVehicle_conditions.tsx new file mode 100644 index 0000000..4250793 --- /dev/null +++ b/frontend/src/components/Vehicle_conditions/CardVehicle_conditions.tsx @@ -0,0 +1,143 @@ +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 = { + vehicle_conditions: any[]; + loading: boolean; + onDelete: (id: string) => void; + currentPage: number; + numPages: number; + onPageChange: (page: number) => void; +}; + +const CardVehicle_conditions = ({ + vehicle_conditions, + 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_VEHICLE_CONDITIONS', + ); + + return ( +

+ {loading && } +

+
+ + {item.before} + + +
+ +
+
+
+
+
+ Tenant +
+
+
+ {dataFormatter.tenantsOneListFormatter(item.tenant)} +
+
+
+ +
+
+ Reservation +
+
+
+ {dataFormatter.reservationsOneListFormatter( + item.reservation, + )} +
+
+
+ +
+
+ Before +
+
+
+ {item.before} +
+
+
+ +
+
After
+
+
{item.after}
+
+
+
+

No data to display

+ +

+ ); +}; + +export default CardVehicle_conditions; diff --git a/frontend/src/components/Vehicle_conditions/ListVehicle_conditions.tsx b/frontend/src/components/Vehicle_conditions/ListVehicle_conditions.tsx new file mode 100644 index 0000000..fc933e0 --- /dev/null +++ b/frontend/src/components/Vehicle_conditions/ListVehicle_conditions.tsx @@ -0,0 +1,111 @@ +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 = { + vehicle_conditions: any[]; + loading: boolean; + onDelete: (id: string) => void; + currentPage: number; + numPages: number; + onPageChange: (page: number) => void; +}; + +const ListVehicle_conditions = ({ + vehicle_conditions, + loading, + onDelete, + currentPage, + numPages, + onPageChange, +}: Props) => { + const currentUser = useAppSelector((state) => state.auth.currentUser); + const hasUpdatePermission = hasPermission( + currentUser, + 'UPDATE_VEHICLE_CONDITIONS', + ); + + const corners = useAppSelector((state) => state.style.corners); + const bgColor = useAppSelector((state) => state.style.cardsColor); + + return ( + <> +

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

+ +

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

Tenant

+ {dataFormatter.tenantsOneListFormatter(item.tenant)} +

+ +

Reservation

+ {dataFormatter.reservationsOneListFormatter( + item.reservation, + )} +

+ +

Before

{item.before}

+ +

After

{item.after}

+ + +

+ +

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

No data to display

+ )} +

+ +

+ + ); +}; + +export default ListVehicle_conditions; diff --git a/frontend/src/components/Vehicle_conditions/TableVehicle_conditions.tsx b/frontend/src/components/Vehicle_conditions/TableVehicle_conditions.tsx new file mode 100644 index 0000000..d9af1f2 --- /dev/null +++ b/frontend/src/components/Vehicle_conditions/TableVehicle_conditions.tsx @@ -0,0 +1,499 @@ +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/vehicle_conditions/vehicle_conditionsSlice'; +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 './configureVehicle_conditionsCols'; +import _ from 'lodash'; +import dataFormatter from '../../helpers/dataFormatter'; +import { dataGridStyles } from '../../styles'; + +import ListVehicle_conditions from './ListVehicle_conditions'; + +const perPage = 10; + +const TableSampleVehicle_conditions = ({ + 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 { + vehicle_conditions, + loading, + count, + notify: vehicle_conditionsNotify, + refetch, + } = useAppSelector((state) => state.vehicle_conditions); + 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 (vehicle_conditionsNotify.showNotification) { + notify( + vehicle_conditionsNotify.typeNotification, + vehicle_conditionsNotify.textNotification, + ); + } + }, [vehicle_conditionsNotify.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, + `vehicle_conditions`, + 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={vehicle_conditions ?? []} + 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?

+ + + {vehicle_conditions && Array.isArray(vehicle_conditions) && !showGrid && ( + + )} + + {showGrid && dataGrid} + + {selectedRows.length > 0 && + createPortal( + onDeleteRows(selectedRows)} + />, + document.getElementById('delete-rows-button'), + )} + + + ); +}; + +export default TableSampleVehicle_conditions; diff --git a/frontend/src/components/Vehicle_conditions/configureVehicle_conditionsCols.tsx b/frontend/src/components/Vehicle_conditions/configureVehicle_conditionsCols.tsx new file mode 100644 index 0000000..9875e61 --- /dev/null +++ b/frontend/src/components/Vehicle_conditions/configureVehicle_conditionsCols.tsx @@ -0,0 +1,126 @@ +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_VEHICLE_CONDITIONS'); + + return [ + { + field: 'tenant', + headerName: 'Tenant', + 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('tenants'), + valueGetter: (params: GridValueGetterParams) => + params?.value?.id ?? params?.value, + }, + + { + field: 'reservation', + headerName: 'Reservation', + 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('reservations'), + valueGetter: (params: GridValueGetterParams) => + params?.value?.id ?? params?.value, + }, + + { + field: 'before', + headerName: 'Before', + flex: 1, + minWidth: 120, + filterable: false, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + + editable: hasUpdatePermission, + }, + + { + field: 'after', + headerName: 'After', + 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/Vehicles/CardVehicles.tsx b/frontend/src/components/Vehicles/CardVehicles.tsx new file mode 100644 index 0000000..c668faa --- /dev/null +++ b/frontend/src/components/Vehicles/CardVehicles.tsx @@ -0,0 +1,247 @@ +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 = { + vehicles: any[]; + loading: boolean; + onDelete: (id: string) => void; + currentPage: number; + numPages: number; + onPageChange: (page: number) => void; +}; + +const CardVehicles = ({ + vehicles, + 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_VEHICLES'); + + return ( +

+ {loading && } +

+
+ + {item.plate_number} + + +
+ +
+
+
+
+
+ Tenant +
+
+
+ {dataFormatter.tenantsOneListFormatter(item.tenant)} +
+
+
+ +
+
+ PlateNumber +
+
+
+ {item.plate_number} +
+
+
+ +
+
Brand
+
+
{item.brand}
+
+
+ +
+
Model
+
+
{item.model}
+
+
+ +
+
Year
+
+
{item.year}
+
+
+ +
+
Color
+
+
{item.color}
+
+
+ +
+
+ Category +
+
+
+ {item.category} +
+
+
+ +
+
+ FuelType +
+
+
+ {item.fuel_type} +
+
+
+ +
+
+ Transmission +
+
+
+ {item.transmission} +
+
+
+ +
+
+ Mileage +
+
+
+ {item.mileage} +
+
+
+ +
+
+ DailyPrice +
+
+
+ {item.daily_price} +
+
+
+ +
+
+ Status +
+
+
+ {item.status} +
+
+
+ +
+
+ InsuranceExpiry +
+
+
+ {dataFormatter.dateTimeFormatter(item.insurance_expiry)} +
+
+
+ +
+
+ TechVisitExpiry +
+
+
+ {dataFormatter.dateTimeFormatter(item.tech_visit_expiry)} +
+
+
+ +
+
+ Photos +
+
+
+ {item.photos} +
+
+
+
+

No data to display

+ +

+ ); +}; + +export default CardVehicles; diff --git a/frontend/src/components/Vehicles/ListVehicles.tsx b/frontend/src/components/Vehicles/ListVehicles.tsx new file mode 100644 index 0000000..94305a5 --- /dev/null +++ b/frontend/src/components/Vehicles/ListVehicles.tsx @@ -0,0 +1,169 @@ +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 = { + vehicles: any[]; + loading: boolean; + onDelete: (id: string) => void; + currentPage: number; + numPages: number; + onPageChange: (page: number) => void; +}; + +const ListVehicles = ({ + vehicles, + loading, + onDelete, + currentPage, + numPages, + onPageChange, +}: Props) => { + const currentUser = useAppSelector((state) => state.auth.currentUser); + const hasUpdatePermission = hasPermission(currentUser, 'UPDATE_VEHICLES'); + + const corners = useAppSelector((state) => state.style.corners); + const bgColor = useAppSelector((state) => state.style.cardsColor); + + return ( + <> +

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

+ +

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

Tenant

+ {dataFormatter.tenantsOneListFormatter(item.tenant)} +

+ +

PlateNumber

{item.plate_number}

+ +

Brand

{item.brand}

+ +

Model

{item.model}

+ +

Year

{item.year}

+ +

Color

{item.color}

+ +

Category

{item.category}

+ +

FuelType

{item.fuel_type}

+ +

Transmission

{item.transmission}

+ +

Mileage

{item.mileage}

+ +

DailyPrice

{item.daily_price}

+ +

Status

{item.status}

+ +

+ InsuranceExpiry +

+ {dataFormatter.dateTimeFormatter(item.insurance_expiry)} +

+ +

+ TechVisitExpiry +

+ {dataFormatter.dateTimeFormatter( + item.tech_visit_expiry, + )} +

+ +

Photos

{item.photos}

+ + +

+ +

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

No data to display

+ )} +

+ +

+ + ); +}; + +export default ListVehicles; diff --git a/frontend/src/components/Vehicles/TableVehicles.tsx b/frontend/src/components/Vehicles/TableVehicles.tsx new file mode 100644 index 0000000..5e4e00f --- /dev/null +++ b/frontend/src/components/Vehicles/TableVehicles.tsx @@ -0,0 +1,494 @@ +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/vehicles/vehiclesSlice'; +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 './configureVehiclesCols'; +import _ from 'lodash'; +import dataFormatter from '../../helpers/dataFormatter'; +import { dataGridStyles } from '../../styles'; + +import ListVehicles from './ListVehicles'; + +const perPage = 10; + +const TableSampleVehicles = ({ + 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 { + vehicles, + loading, + count, + notify: vehiclesNotify, + refetch, + } = useAppSelector((state) => state.vehicles); + 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 (vehiclesNotify.showNotification) { + notify(vehiclesNotify.typeNotification, vehiclesNotify.textNotification); + } + }, [vehiclesNotify.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, `vehicles`, 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={vehicles ?? []} + 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?

+ + + {vehicles && Array.isArray(vehicles) && !showGrid && ( + + )} + + {showGrid && dataGrid} + + {selectedRows.length > 0 && + createPortal( + onDeleteRows(selectedRows)} + />, + document.getElementById('delete-rows-button'), + )} + + + ); +}; + +export default TableSampleVehicles; diff --git a/frontend/src/components/Vehicles/configureVehiclesCols.tsx b/frontend/src/components/Vehicles/configureVehiclesCols.tsx new file mode 100644 index 0000000..6574db9 --- /dev/null +++ b/frontend/src/components/Vehicles/configureVehiclesCols.tsx @@ -0,0 +1,264 @@ +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_VEHICLES'); + + return [ + { + field: 'tenant', + headerName: 'Tenant', + 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('tenants'), + valueGetter: (params: GridValueGetterParams) => + params?.value?.id ?? params?.value, + }, + + { + field: 'plate_number', + headerName: 'PlateNumber', + flex: 1, + minWidth: 120, + filterable: false, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + + editable: hasUpdatePermission, + }, + + { + field: 'brand', + headerName: 'Brand', + flex: 1, + minWidth: 120, + filterable: false, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + + editable: hasUpdatePermission, + }, + + { + field: 'model', + headerName: 'Model', + flex: 1, + minWidth: 120, + filterable: false, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + + editable: hasUpdatePermission, + }, + + { + field: 'year', + headerName: 'Year', + flex: 1, + minWidth: 120, + filterable: false, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + + editable: hasUpdatePermission, + + type: 'number', + }, + + { + field: 'color', + headerName: 'Color', + flex: 1, + minWidth: 120, + filterable: false, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + + editable: hasUpdatePermission, + }, + + { + field: 'category', + headerName: 'Category', + flex: 1, + minWidth: 120, + filterable: false, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + + editable: hasUpdatePermission, + }, + + { + field: 'fuel_type', + headerName: 'FuelType', + flex: 1, + minWidth: 120, + filterable: false, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + + editable: hasUpdatePermission, + }, + + { + field: 'transmission', + headerName: 'Transmission', + flex: 1, + minWidth: 120, + filterable: false, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + + editable: hasUpdatePermission, + }, + + { + field: 'mileage', + headerName: 'Mileage', + flex: 1, + minWidth: 120, + filterable: false, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + + editable: hasUpdatePermission, + + type: 'number', + }, + + { + field: 'daily_price', + headerName: 'DailyPrice', + flex: 1, + minWidth: 120, + filterable: false, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + + editable: hasUpdatePermission, + + type: 'number', + }, + + { + field: 'status', + headerName: 'Status', + flex: 1, + minWidth: 120, + filterable: false, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + + editable: hasUpdatePermission, + }, + + { + field: 'insurance_expiry', + headerName: 'InsuranceExpiry', + flex: 1, + minWidth: 120, + filterable: false, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + + editable: hasUpdatePermission, + + type: 'dateTime', + valueGetter: (params: GridValueGetterParams) => + new Date(params.row.insurance_expiry), + }, + + { + field: 'tech_visit_expiry', + headerName: 'TechVisitExpiry', + flex: 1, + minWidth: 120, + filterable: false, + headerClassName: 'datagrid--header', + cellClassName: 'datagrid--cell', + + editable: hasUpdatePermission, + + type: 'dateTime', + valueGetter: (params: GridValueGetterParams) => + new Date(params.row.tech_visit_expiry), + }, + + { + field: 'photos', + headerName: 'Photos', + 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..d39a226 --- /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 = '35035'; + + 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..79f8fe3 --- /dev/null +++ b/frontend/src/css/_calendar.css @@ -0,0 +1,37 @@ +.rbc-event { + @apply bg-blue-600 !important; +} + +.rbc-show-more { + @apply dark:text-white bg-transparent !important; +} + +.rbc-btn-group button { + @apply dark:text-white !important; +} + +.rbc-btn-group button:hover { + @apply text-white dark:bg-dark-700 !important; +} + +.rbc-btn-group button.rbc-active { + @apply text-black dark:bg-blue-600 !important; +} + +.rbc-btn-group button:focus { + @apply dark:bg-blue-600 !important; +} + +.rbc-day-bg.rbc-off-range-bg { + @apply 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; +} diff --git a/frontend/src/css/_checkbox-radio-switch.css b/frontend/src/css/_checkbox-radio-switch.css new file mode 100644 index 0000000..f05523e --- /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-blue-700; + } + + .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-blue-600 border-blue-600; + } + + .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..e69de29 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..980f207 --- /dev/null +++ b/frontend/src/css/_select-dropdown.css @@ -0,0 +1,32 @@ +.react-select__control { + @apply dark:bg-dark-800 dark:border-dark-700 !important; +} + +.react-select__single-value { + @apply dark:text-white !important; +} + +.react-select__menu { + @apply dark:border-dark-700; +} + +.react-select__menu-list { + @apply dark:bg-dark-800 dark:border-dark-700 dark:rounded !important; +} + +.react-select__option { + @apply cursor-pointer hover:bg-gray-200 dark:hover:bg-dark-700 !important; +} + +.react-select__option--is-focused { + @apply 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 dark:bg-dark-600 !important; +} + +.react-select__multi-value__remove { + @apply 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..3e62e83 --- /dev/null +++ b/frontend/src/css/_table.css @@ -0,0 +1,117 @@ +@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-pavitra-300/70; + } + + tbody tr:nth-child(even) { + @apply lg:bg-pavitra-300 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-pavitra-900 dark:text-white; + } + + .datagrid--table, + .MuiDataGrid-root { + @apply rounded border-none !important; + } + + .datagrid--header { + @apply uppercase !important; + } + + .datagrid--header, + .datagrid--header .MuiIconButton-root, + .datagrid--cell, + .datagrid--cell .MuiIconButton-root { + @apply dark:text-white; + } + + .datagrid--cell .MuiDataGrid-booleanCell { + @apply dark:text-white !important; + } + + .datagrid--cell .MuiIconButton-root:hover { + @apply dark:text-white dark:bg-dark-700; + } + + .datagrid--row { + @apply even:bg-gray-100 dark:even:bg-[#1B1D22] dark:odd:bg-dark-900 !important; + } + + .datagrid--table .MuiTablePagination-root { + @apply dark:text-white; + } + + .datagrid--table .MuiTablePagination-root .MuiButtonBase-root:disabled { + @apply dark:text-dark-700; + } + + .datagrid--table .MuiTablePagination-root .MuiButtonBase-root:hover { + @apply dark:bg-dark-700; + } + + .MuiButton-colorInherit { + @apply text-blue-600 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..62d1477 --- /dev/null +++ b/frontend/src/css/main.css @@ -0,0 +1,34 @@ +@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'; + +.introjs-tooltip { + @apply min-w-[400px] max-w-[480px] p-2 !important; +} + +.good-img { + @apply -mt-96 !important; +} +.end-img { + @apply -mt-72 !important; +} +.introjs-button { + @apply bg-blue-600 text-white !important; + text-shadow: none !important; +} +.introjs-bullets ul li a.active { + @apply bg-blue-600 !important; +} +.introjs-prevbutton { + @apply bg-transparent border border-blue-600 text-blue-600 !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..15810ae --- /dev/null +++ b/frontend/src/helpers/dataFormatter.js @@ -0,0 +1,212 @@ +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; + } + }); + }, + + clientsManyListFormatter(val) { + if (!val || !val.length) return []; + return val.map((item) => item.first_name); + }, + clientsOneListFormatter(val) { + if (!val) return ''; + return val.first_name; + }, + clientsManyListFormatterEdit(val) { + if (!val || !val.length) return []; + return val.map((item) => { + return { id: item.id, label: item.first_name }; + }); + }, + clientsOneListFormatterEdit(val) { + if (!val) return ''; + return { label: val.first_name, id: val.id }; + }, + + plansManyListFormatter(val) { + if (!val || !val.length) return []; + return val.map((item) => item.name); + }, + plansOneListFormatter(val) { + if (!val) return ''; + return val.name; + }, + plansManyListFormatterEdit(val) { + if (!val || !val.length) return []; + return val.map((item) => { + return { id: item.id, label: item.name }; + }); + }, + plansOneListFormatterEdit(val) { + if (!val) return ''; + return { label: val.name, id: val.id }; + }, + + reservationsManyListFormatter(val) { + if (!val || !val.length) return []; + return val.map((item) => item.ref); + }, + reservationsOneListFormatter(val) { + if (!val) return ''; + return val.ref; + }, + reservationsManyListFormatterEdit(val) { + if (!val || !val.length) return []; + return val.map((item) => { + return { id: item.id, label: item.ref }; + }); + }, + reservationsOneListFormatterEdit(val) { + if (!val) return ''; + return { label: val.ref, id: val.id }; + }, + + subscriptionsManyListFormatter(val) { + if (!val || !val.length) return []; + return val.map((item) => item.provider_customer_id); + }, + subscriptionsOneListFormatter(val) { + if (!val) return ''; + return val.provider_customer_id; + }, + subscriptionsManyListFormatterEdit(val) { + if (!val || !val.length) return []; + return val.map((item) => { + return { id: item.id, label: item.provider_customer_id }; + }); + }, + subscriptionsOneListFormatterEdit(val) { + if (!val) return ''; + return { label: val.provider_customer_id, id: val.id }; + }, + + tenantsManyListFormatter(val) { + if (!val || !val.length) return []; + return val.map((item) => item.name); + }, + tenantsOneListFormatter(val) { + if (!val) return ''; + return val.name; + }, + tenantsManyListFormatterEdit(val) { + if (!val || !val.length) return []; + return val.map((item) => { + return { id: item.id, label: item.name }; + }); + }, + tenantsOneListFormatterEdit(val) { + if (!val) return ''; + return { label: val.name, id: val.id }; + }, + + vehiclesManyListFormatter(val) { + if (!val || !val.length) return []; + return val.map((item) => item.plate_number); + }, + vehiclesOneListFormatter(val) { + if (!val) return ''; + return val.plate_number; + }, + vehiclesManyListFormatterEdit(val) { + if (!val || !val.length) return []; + return val.map((item) => { + return { id: item.id, label: item.plate_number }; + }); + }, + vehiclesOneListFormatterEdit(val) { + if (!val) return ''; + return { label: val.plate_number, 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 }; + }, + + agencesManyListFormatter(val) { + if (!val || !val.length) return []; + return val.map((item) => item.name); + }, + agencesOneListFormatter(val) { + if (!val) return ''; + return val.name; + }, + agencesManyListFormatterEdit(val) { + if (!val || !val.length) return []; + return val.map((item) => { + return { id: item.id, label: item.name }; + }); + }, + agencesOneListFormatterEdit(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..c2d9032 --- /dev/null +++ b/frontend/src/helpers/userPermissions.ts @@ -0,0 +1,16 @@ +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.globalAccess; + } 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..0b55f95 --- /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_35035', + 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..067f3b3 --- /dev/null +++ b/frontend/src/menuAside.ts @@ -0,0 +1,234 @@ +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: '/claims/claims-list', + label: 'Claims', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + icon: + 'mdiCommentAlert' in icon + ? icon['mdiCommentAlert' as keyof typeof icon] + : icon.mdiTable ?? icon.mdiTable, + permissions: 'READ_CLAIMS', + }, + { + href: '/clients/clients-list', + label: 'Clients', + // 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_CLIENTS', + }, + { + href: '/company_profiles/company_profiles-list', + label: 'Company profiles', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + icon: + 'mdiDomain' in icon + ? icon['mdiDomain' as keyof typeof icon] + : icon.mdiTable ?? icon.mdiTable, + permissions: 'READ_COMPANY_PROFILES', + }, + { + href: '/drivers/drivers-list', + label: 'Drivers', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + icon: + 'mdiCar' in icon + ? icon['mdiCar' as keyof typeof icon] + : icon.mdiTable ?? icon.mdiTable, + permissions: 'READ_DRIVERS', + }, + { + href: '/expenses/expenses-list', + label: 'Expenses', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + icon: + 'mdiCurrencyUsd' in icon + ? icon['mdiCurrencyUsd' as keyof typeof icon] + : icon.mdiTable ?? icon.mdiTable, + permissions: 'READ_EXPENSES', + }, + { + href: '/guarantees/guarantees-list', + label: 'Guarantees', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + icon: + 'mdiShieldCheck' in icon + ? icon['mdiShieldCheck' as keyof typeof icon] + : icon.mdiTable ?? icon.mdiTable, + permissions: 'READ_GUARANTEES', + }, + { + href: '/infractions/infractions-list', + label: 'Infractions', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + icon: + 'mdiAlertCircle' in icon + ? icon['mdiAlertCircle' as keyof typeof icon] + : icon.mdiTable ?? icon.mdiTable, + permissions: 'READ_INFRACTIONS', + }, + { + href: '/invoices_saas/invoices_saas-list', + label: 'Invoices saas', + // 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_INVOICES_SAAS', + }, + { + href: '/maintenance/maintenance-list', + label: 'Maintenance', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + icon: + 'mdiWrench' in icon + ? icon['mdiWrench' as keyof typeof icon] + : icon.mdiTable ?? icon.mdiTable, + permissions: 'READ_MAINTENANCE', + }, + { + href: '/payments/payments-list', + label: 'Payments', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + icon: + 'mdiCash' in icon + ? icon['mdiCash' as keyof typeof icon] + : icon.mdiTable ?? icon.mdiTable, + permissions: 'READ_PAYMENTS', + }, + { + href: '/plans/plans-list', + label: 'Plans', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + icon: + 'mdiPackageVariant' in icon + ? icon['mdiPackageVariant' as keyof typeof icon] + : icon.mdiTable ?? icon.mdiTable, + permissions: 'READ_PLANS', + }, + { + href: '/reservations/reservations-list', + label: 'Reservations', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + icon: + 'mdiCalendar' in icon + ? icon['mdiCalendar' as keyof typeof icon] + : icon.mdiTable ?? icon.mdiTable, + permissions: 'READ_RESERVATIONS', + }, + { + href: '/subscriptions/subscriptions-list', + label: 'Subscriptions', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + icon: + 'mdiReceipt' in icon + ? icon['mdiReceipt' as keyof typeof icon] + : icon.mdiTable ?? icon.mdiTable, + permissions: 'READ_SUBSCRIPTIONS', + }, + { + href: '/tenants/tenants-list', + label: 'Tenants', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + icon: + 'mdiOfficeBuilding' in icon + ? icon['mdiOfficeBuilding' as keyof typeof icon] + : icon.mdiTable ?? icon.mdiTable, + permissions: 'READ_TENANTS', + }, + { + href: '/vehicle_conditions/vehicle_conditions-list', + label: 'Vehicle conditions', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + icon: + 'mdiCar' in icon + ? icon['mdiCar' as keyof typeof icon] + : icon.mdiTable ?? icon.mdiTable, + permissions: 'READ_VEHICLE_CONDITIONS', + }, + { + href: '/vehicles/vehicles-list', + label: 'Vehicles', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + icon: + 'mdiCar' in icon + ? icon['mdiCar' as keyof typeof icon] + : icon.mdiTable ?? icon.mdiTable, + permissions: 'READ_VEHICLES', + }, + { + 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: '/agences/agences-list', + label: 'Agences', + // eslint-disable-next-line @typescript-eslint/ban-ts-comment + // @ts-ignore + icon: icon.mdiTable ?? icon.mdiTable, + permissions: 'READ_AGENCES', + }, + { + 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..ce74989 --- /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 = 'Car zone'; + const description = 'Car zone 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/agences/[agencesId].tsx b/frontend/src/pages/agences/[agencesId].tsx new file mode 100644 index 0000000..f8e57a1 --- /dev/null +++ b/frontend/src/pages/agences/[agencesId].tsx @@ -0,0 +1,128 @@ +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/agences/agencesSlice'; +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'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const EditAgences = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + const initVals = { + name: '', + }; + const [initialValues, setInitialValues] = useState(initVals); + + const { agences } = useAppSelector((state) => state.agences); + + const { currentUser } = useAppSelector((state) => state.auth); + + const { agencesId } = router.query; + + useEffect(() => { + dispatch(fetch({ id: agencesId })); + }, [agencesId]); + + useEffect(() => { + if (typeof agences === 'object') { + setInitialValues(agences); + } + }, [agences]); + + useEffect(() => { + if (typeof agences === 'object') { + const newInitialVal = { ...initVals }; + + Object.keys(initVals).forEach((el) => (newInitialVal[el] = agences[el])); + + setInitialValues(newInitialVal); + } + }, [agences]); + + const handleSubmit = async (data) => { + await dispatch(update({ id: agencesId, data })); + await router.push('/agences/agences-list'); + }; + + return ( + <> + + {getPageTitle('Edit agences')} + + + + {''} + + + handleSubmit(values)} + > +

+ + + + + + + + + router.push('/agences/agences-list')} + /> + + + + + + + ); +}; + +EditAgences.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default EditAgences; diff --git a/frontend/src/pages/agences/agences-edit.tsx b/frontend/src/pages/agences/agences-edit.tsx new file mode 100644 index 0000000..373a97e --- /dev/null +++ b/frontend/src/pages/agences/agences-edit.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/agences/agencesSlice'; +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'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const EditAgencesPage = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + const initVals = { + name: '', + }; + const [initialValues, setInitialValues] = useState(initVals); + + const { agences } = useAppSelector((state) => state.agences); + + const { currentUser } = useAppSelector((state) => state.auth); + + const { id } = router.query; + + useEffect(() => { + dispatch(fetch({ id: id })); + }, [id]); + + useEffect(() => { + if (typeof agences === 'object') { + setInitialValues(agences); + } + }, [agences]); + + useEffect(() => { + if (typeof agences === 'object') { + const newInitialVal = { ...initVals }; + Object.keys(initVals).forEach((el) => (newInitialVal[el] = agences[el])); + setInitialValues(newInitialVal); + } + }, [agences]); + + const handleSubmit = async (data) => { + await dispatch(update({ id: id, data })); + await router.push('/agences/agences-list'); + }; + + return ( + <> + + {getPageTitle('Edit agences')} + + + + {''} + + + handleSubmit(values)} + > + + + + + ); +}; + +EditAgencesPage.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default EditAgencesPage; diff --git a/frontend/src/pages/agences/agences-list.tsx b/frontend/src/pages/agences/agences-list.tsx new file mode 100644 index 0000000..cbbf6b0 --- /dev/null +++ b/frontend/src/pages/agences/agences-list.tsx @@ -0,0 +1,162 @@ +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 TableAgences from '../../components/Agences/TableAgences'; +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/agences/agencesSlice'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const AgencesTablesPage = () => { + 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: 'Name', title: 'name' }]); + + const hasCreatePermission = + currentUser && hasPermission(currentUser, 'CREATE_AGENCES'); + + const addFilter = () => { + const newItem = { + id: uniqueId(), + fields: { + filterValue: '', + filterValueFrom: '', + filterValueTo: '', + selectedField: '', + }, + }; + newItem.fields.selectedField = filters[0].title; + setFilterItems([...filterItems, newItem]); + }; + + const getAgencesCSV = async () => { + const response = await axios({ + url: '/agences?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 = 'agencesCSV.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('Agences')} + + + + {''} + + + {hasCreatePermission && ( + + )} + + + + + {hasCreatePermission && ( + setIsModalActive(true)} + /> + )} + +

+ + + + + + + + + + + ); +}; + +AgencesTablesPage.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default AgencesTablesPage; diff --git a/frontend/src/pages/agences/agences-new.tsx b/frontend/src/pages/agences/agences-new.tsx new file mode 100644 index 0000000..2d7bccb --- /dev/null +++ b/frontend/src/pages/agences/agences-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/agences/agencesSlice'; +import { useAppDispatch } from '../../stores/hooks'; +import { useRouter } from 'next/router'; +import moment from 'moment'; + +const initialValues = { + name: '', +}; + +const AgencesNew = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + + const handleSubmit = async (data) => { + await dispatch(create(data)); + await router.push('/agences/agences-list'); + }; + return ( + <> + + {getPageTitle('New Item')} + + + + {''} + + + handleSubmit(values)} + > + + + + + ); +}; + +AgencesNew.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default AgencesNew; diff --git a/frontend/src/pages/agences/agences-table.tsx b/frontend/src/pages/agences/agences-table.tsx new file mode 100644 index 0000000..43b8257 --- /dev/null +++ b/frontend/src/pages/agences/agences-table.tsx @@ -0,0 +1,161 @@ +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 TableAgences from '../../components/Agences/TableAgences'; +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/agences/agencesSlice'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const AgencesTablesPage = () => { + 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: 'Name', title: 'name' }]); + + const hasCreatePermission = + currentUser && hasPermission(currentUser, 'CREATE_AGENCES'); + + const addFilter = () => { + const newItem = { + id: uniqueId(), + fields: { + filterValue: '', + filterValueFrom: '', + filterValueTo: '', + selectedField: '', + }, + }; + newItem.fields.selectedField = filters[0].title; + setFilterItems([...filterItems, newItem]); + }; + + const getAgencesCSV = async () => { + const response = await axios({ + url: '/agences?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 = 'agencesCSV.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('Agences')} + + + + {''} + + + {hasCreatePermission && ( + + )} + + + + + {hasCreatePermission && ( + setIsModalActive(true)} + /> + )} + +

+ + + + + + + + + + ); +}; + +AgencesTablesPage.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default AgencesTablesPage; diff --git a/frontend/src/pages/agences/agences-view.tsx b/frontend/src/pages/agences/agences-view.tsx new file mode 100644 index 0000000..4c31f6a --- /dev/null +++ b/frontend/src/pages/agences/agences-view.tsx @@ -0,0 +1,1216 @@ +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/agences/agencesSlice'; +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'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const AgencesView = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + const { agences } = useAppSelector((state) => state.agences); + + const { currentUser } = useAppSelector((state) => state.auth); + + 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 agences')} + + + + + + +

Name

{agences?.name}

+ + <> +

Users Agences

+ +

+ + + + + + + + + + + + + + + + {agences.users_agences && + Array.isArray(agences.users_agences) && + agences.users_agences.map((item: any) => ( + + router.push(`/users/users-view/?id=${item.id}`) + } + > + + + + + + + + + + + ))} + +

First Name	Last Name	Phone Number	E-Mail	Disabled
{item.firstName}	{item.lastName}	{item.phoneNumber}	{item.email}	+ {dataFormatter.booleanFormatter(item.disabled)} +

+ {!agences?.users_agences?.length && ( +

No data

+ )} + + + + <> +

Claims agences

+ +

+ + + + + + + + + + + + + + {agences.claims_agences && + Array.isArray(agences.claims_agences) && + agences.claims_agences.map((item: any) => ( + + router.push(`/claims/claims-view/?id=${item.id}`) + } + > + + + + + + + + + ))} + +

Category	Description	Status	Attachments
{item.category}	{item.description}	{item.status}	{item.attachments}

+ {!agences?.claims_agences?.length && ( +

No data

+ )} + + + + <> +

Clients agences

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {agences.clients_agences && + Array.isArray(agences.clients_agences) && + agences.clients_agences.map((item: any) => ( + + router.push(`/clients/clients-view/?id=${item.id}`) + } + > + + + + + + + + + + + + + + + + + + + + + + + + + ))} + +

FirstName	LastName	BirthDate	Phone	Address	IDType	IDNumber	IDIssueDate	LicenseNumber	LicenseIssueDate	IDCopyURL	LicenseCopyURL
{item.first_name}	{item.last_name}	+ {dataFormatter.dateTimeFormatter(item.birth_date)} +	{item.phone}	{item.address}	{item.id_type}	{item.id_number}	+ {dataFormatter.dateTimeFormatter( + item.id_issue_date, + )} +	+ {item.license_number} +	+ {dataFormatter.dateTimeFormatter( + item.license_issue_date, + )} +	{item.id_copy_url}	+ {item.license_copy_url} +

+ {!agences?.clients_agences?.length && ( +

No data

+ )} + + + + <> +

Company_profiles agences

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + {agences.company_profiles_agences && + Array.isArray(agences.company_profiles_agences) && + agences.company_profiles_agences.map((item: any) => ( + + router.push( + `/company_profiles/company_profiles-view/?id=${item.id}`, + ) + } + > + + + + + + + + + + + + + + + + + + + + + ))} + +

LegalName	Address	Phone	Email	Website	RC	ICE	Patente	LogoURL	PDFFooter
{item.legal_name}	{item.address}	{item.phone}	{item.email}	{item.website}	{item.rc}	{item.ice}	{item.patente}	{item.logo_url}	{item.pdf_footer}

+ {!agences?.company_profiles_agences?.length && ( +

No data

+ )} + + + + <> +

Drivers agences

+ +

+ + + + + + + + + + + + + + + + {agences.drivers_agences && + Array.isArray(agences.drivers_agences) && + agences.drivers_agences.map((item: any) => ( + + router.push(`/drivers/drivers-view/?id=${item.id}`) + } + > + + + + + + + + + + + ))} + +

FullName	LicenseNumber	LicenseIssueDate	IDCopyURL	LicenseCopyURL
{item.full_name}	+ {item.license_number} +	+ {dataFormatter.dateTimeFormatter( + item.license_issue_date, + )} +	{item.id_copy_url}	+ {item.license_copy_url} +

+ {!agences?.drivers_agences?.length && ( +

No data

+ )} + + + + <> +

Expenses agences

+ +

+ + + + + + + + + + + + + + + + + + {agences.expenses_agences && + Array.isArray(agences.expenses_agences) && + agences.expenses_agences.map((item: any) => ( + + router.push( + `/expenses/expenses-view/?id=${item.id}`, + ) + } + > + + + + + + + + + + + + + ))} + +

Type	Category	Amount	Date	Note	AttachmentURL
{item.type}	{item.category}	{item.amount}	+ {dataFormatter.dateTimeFormatter(item.date)} +	{item.note}	+ {item.attachment_url} +

+ {!agences?.expenses_agences?.length && ( +

No data

+ )} + + + + <> +

Guarantees agences

+ +

+ + + + + + + + + + + + + + {agences.guarantees_agences && + Array.isArray(agences.guarantees_agences) && + agences.guarantees_agences.map((item: any) => ( + + router.push( + `/guarantees/guarantees-view/?id=${item.id}`, + ) + } + > + + + + + + + + + ))} + +

Method	Amount	Status	ProofURL
{item.method}	{item.amount}	{item.status}	{item.proof_url}

+ {!agences?.guarantees_agences?.length && ( +

No data

+ )} + + + + <> +

Infractions agences

+ +

+ + + + + + + + + + + + + + + + + + {agences.infractions_agences && + Array.isArray(agences.infractions_agences) && + agences.infractions_agences.map((item: any) => ( + + router.push( + `/infractions/infractions-view/?id=${item.id}`, + ) + } + > + + + + + + + + + + + + + ))} + +

ReferenceNumber	Date	Location	Amount	Status	ProofURL
{item.ref_no}	+ {dataFormatter.dateTimeFormatter(item.date)} +	{item.location}	{item.amount}	{item.status}	{item.proof_url}

+ {!agences?.infractions_agences?.length && ( +

No data

+ )} + + + + <> +

Invoices_saas agences

+ +

+ + + + + + + + + + + + + + + + {agences.invoices_saas_agences && + Array.isArray(agences.invoices_saas_agences) && + agences.invoices_saas_agences.map((item: any) => ( + + router.push( + `/invoices_saas/invoices_saas-view/?id=${item.id}`, + ) + } + > + + + + + + + + + + + ))} + +

InvoiceNumber	AmountMAD	Status	IssuedAt	PDFURL
+ {item.invoice_number} +	{item.amount_mad}	{item.status}	+ {dataFormatter.dateTimeFormatter(item.issued_at)} +	{item.pdf_url}

+ {!agences?.invoices_saas_agences?.length && ( +

No data

+ )} + + + + <> +

Maintenance agences

+ +

+ + + + + + + + + + + + + + + + + + {agences.maintenance_agences && + Array.isArray(agences.maintenance_agences) && + agences.maintenance_agences.map((item: any) => ( + + router.push( + `/maintenance/maintenance-view/?id=${item.id}`, + ) + } + > + + + + + + + + + + + + + ))} + +

Type	ScheduledAt	Odometer	Cost	Notes	Attachments
{item.type}	+ {dataFormatter.dateTimeFormatter(item.scheduled_at)} +	{item.odometer}	{item.cost}	{item.notes}	{item.attachments}

+ {!agences?.maintenance_agences?.length && ( +

No data

+ )} + + + + <> +

Payments agences

+ +

+ + + + + + + + + + + + + + + + {agences.payments_agences && + Array.isArray(agences.payments_agences) && + agences.payments_agences.map((item: any) => ( + + router.push( + `/payments/payments-view/?id=${item.id}`, + ) + } + > + + + + + + + + + + + ))} + +

Method	Amount	PaidAt	ReceiptReference	AttachmentURL
{item.method}	{item.amount}	+ {dataFormatter.dateTimeFormatter(item.paid_at)} +	{item.receipt_ref}	+ {item.attachment_url} +

+ {!agences?.payments_agences?.length && ( +

No data

+ )} + + + + <> +

Plans agences

+ +

+ + + + + + + + + + + + + + + + {agences.plans_agences && + Array.isArray(agences.plans_agences) && + agences.plans_agences.map((item: any) => ( + + router.push(`/plans/plans-view/?id=${item.id}`) + } + > + + + + + + + + + + + ))} + +

Code	Name	Period	PriceMAD	Limits
{item.code}	{item.name}	{item.period}	{item.price_mad}	{item.limits}

+ {!agences?.plans_agences?.length && ( +

No data

+ )} + + + + <> +

Reservations agences

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {agences.reservations_agences && + Array.isArray(agences.reservations_agences) && + agences.reservations_agences.map((item: any) => ( + + router.push( + `/reservations/reservations-view/?id=${item.id}`, + ) + } + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ))} + +

Reference	StatusManual	StatusComputed	StartAt	EndAt	PickupAddress	ReturnAddress	Options	Days	PricePerDay	TotalPrice	PaidAmount	BalanceAmount	GuaranteeMethod	GuaranteeAmount	GuaranteeStatus	DepartureValidatedAt	ReturnValidatedAt	Notes
{item.ref}	+ {item.status_manual} +	+ {item.status_computed} +	+ {dataFormatter.dateTimeFormatter(item.start_at)} +	+ {dataFormatter.dateTimeFormatter(item.end_at)} +	+ {item.pickup_address} +	+ {item.return_address} +	{item.options}	{item.days}	+ {item.price_per_day} +	{item.total_price}	{item.paid_amount}	+ {item.balance_amount} +	+ {item.guarantee_method} +	+ {item.guarantee_amount} +	+ {item.guarantee_status} +	+ {dataFormatter.dateTimeFormatter( + item.departure_validated_at, + )} +	+ {dataFormatter.dateTimeFormatter( + item.return_validated_at, + )} +	{item.notes}

+ {!agences?.reservations_agences?.length && ( +

No data

+ )} + + + + <> +

Subscriptions agences

+ +

+ + + + + + + + + + + + + + + + + + {agences.subscriptions_agences && + Array.isArray(agences.subscriptions_agences) && + agences.subscriptions_agences.map((item: any) => ( + + router.push( + `/subscriptions/subscriptions-view/?id=${item.id}`, + ) + } + > + + + + + + + + + + + + + ))} + +

Status	CurrentPeriodStart	CurrentPeriodEnd	PaymentProvider	ProviderCustomerID	ProviderSubscriptionID
{item.status}	+ {dataFormatter.dateTimeFormatter( + item.current_period_start, + )} +	+ {dataFormatter.dateTimeFormatter( + item.current_period_end, + )} +	+ {item.payment_provider} +	+ {item.provider_customer_id} +	+ {item.provider_subscription_id} +

+ {!agences?.subscriptions_agences?.length && ( +

No data

+ )} + + + + <> +

Tenants agences

+ +

+ + + + + + + + + + + + + + + + + + {agences.tenants_agences && + Array.isArray(agences.tenants_agences) && + agences.tenants_agences.map((item: any) => ( + + router.push(`/tenants/tenants-view/?id=${item.id}`) + } + > + + + + + + + + + + + + + ))} + +

Name	Subdomain	Status	TrialEndsAt	BillingEmail	BillingPhone
{item.name}	{item.subdomain}	{item.status}	+ {dataFormatter.dateTimeFormatter( + item.trial_ends_at, + )} +	+ {item.billing_email} +	+ {item.billing_phone} +

+ {!agences?.tenants_agences?.length && ( +

No data

+ )} + + + + <> +

Vehicle_conditions agences

+ +

+ + + + + + + + + + {agences.vehicle_conditions_agences && + Array.isArray(agences.vehicle_conditions_agences) && + agences.vehicle_conditions_agences.map((item: any) => ( + + router.push( + `/vehicle_conditions/vehicle_conditions-view/?id=${item.id}`, + ) + } + > + + + + + ))} + +

Before	After
{item.before}	{item.after}

+ {!agences?.vehicle_conditions_agences?.length && ( +

No data

+ )} + + + + <> +

Vehicles agences

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + {agences.vehicles_agences && + Array.isArray(agences.vehicles_agences) && + agences.vehicles_agences.map((item: any) => ( + + router.push( + `/vehicles/vehicles-view/?id=${item.id}`, + ) + } + > + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ))} + +

PlateNumber	Brand	Model	Year	Color	Category	FuelType	Transmission	Mileage	DailyPrice	Status	InsuranceExpiry	TechVisitExpiry	Photos
{item.plate_number}	{item.brand}	{item.model}	{item.year}	{item.color}	{item.category}	{item.fuel_type}	{item.transmission}	{item.mileage}	{item.daily_price}	{item.status}	+ {dataFormatter.dateTimeFormatter( + item.insurance_expiry, + )} +	+ {dataFormatter.dateTimeFormatter( + item.tech_visit_expiry, + )} +	{item.photos}

+ {!agences?.vehicles_agences?.length && ( +

No data

+ )} + + + + + + router.push('/agences/agences-list')} + /> + + + + ); +}; + +AgencesView.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default AgencesView; 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/claims/[claimsId].tsx b/frontend/src/pages/claims/[claimsId].tsx new file mode 100644 index 0000000..51d0188 --- /dev/null +++ b/frontend/src/pages/claims/[claimsId].tsx @@ -0,0 +1,204 @@ +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/claims/claimsSlice'; +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'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const EditClaims = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + const initVals = { + tenant: null, + + client: null, + + reservation: null, + + category: '', + + description: '', + + status: '', + + attachments: '', + + agences: null, + }; + const [initialValues, setInitialValues] = useState(initVals); + + const { claims } = useAppSelector((state) => state.claims); + + const { currentUser } = useAppSelector((state) => state.auth); + + const { claimsId } = router.query; + + useEffect(() => { + dispatch(fetch({ id: claimsId })); + }, [claimsId]); + + useEffect(() => { + if (typeof claims === 'object') { + setInitialValues(claims); + } + }, [claims]); + + useEffect(() => { + if (typeof claims === 'object') { + const newInitialVal = { ...initVals }; + + Object.keys(initVals).forEach((el) => (newInitialVal[el] = claims[el])); + + setInitialValues(newInitialVal); + } + }, [claims]); + + const handleSubmit = async (data) => { + await dispatch(update({ id: claimsId, data })); + await router.push('/claims/claims-list'); + }; + + return ( + <> + + {getPageTitle('Edit claims')} + + + + {''} + + + handleSubmit(values)} + > + + + + + ); +}; + +EditClaims.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default EditClaims; diff --git a/frontend/src/pages/claims/claims-edit.tsx b/frontend/src/pages/claims/claims-edit.tsx new file mode 100644 index 0000000..9879d76 --- /dev/null +++ b/frontend/src/pages/claims/claims-edit.tsx @@ -0,0 +1,202 @@ +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/claims/claimsSlice'; +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'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const EditClaimsPage = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + const initVals = { + tenant: null, + + client: null, + + reservation: null, + + category: '', + + description: '', + + status: '', + + attachments: '', + + agences: null, + }; + const [initialValues, setInitialValues] = useState(initVals); + + const { claims } = useAppSelector((state) => state.claims); + + const { currentUser } = useAppSelector((state) => state.auth); + + const { id } = router.query; + + useEffect(() => { + dispatch(fetch({ id: id })); + }, [id]); + + useEffect(() => { + if (typeof claims === 'object') { + setInitialValues(claims); + } + }, [claims]); + + useEffect(() => { + if (typeof claims === 'object') { + const newInitialVal = { ...initVals }; + Object.keys(initVals).forEach((el) => (newInitialVal[el] = claims[el])); + setInitialValues(newInitialVal); + } + }, [claims]); + + const handleSubmit = async (data) => { + await dispatch(update({ id: id, data })); + await router.push('/claims/claims-list'); + }; + + return ( + <> + + {getPageTitle('Edit claims')} + + + + {''} + + + handleSubmit(values)} + > + + + + + ); +}; + +EditClaimsPage.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default EditClaimsPage; diff --git a/frontend/src/pages/claims/claims-list.tsx b/frontend/src/pages/claims/claims-list.tsx new file mode 100644 index 0000000..743e37a --- /dev/null +++ b/frontend/src/pages/claims/claims-list.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 TableClaims from '../../components/Claims/TableClaims'; +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/claims/claimsSlice'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const ClaimsTablesPage = () => { + 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: 'Category', title: 'category' }, + { label: 'Description', title: 'description' }, + { label: 'Attachments', title: 'attachments' }, + + { label: 'Tenant', title: 'tenant' }, + + { label: 'Client', title: 'client' }, + + { label: 'Reservation', title: 'reservation' }, + + { + label: 'Status', + title: 'status', + type: 'enum', + options: ['ouverte', 'en_cours', 'resolue'], + }, + ]); + + const hasCreatePermission = + currentUser && hasPermission(currentUser, 'CREATE_CLAIMS'); + + const addFilter = () => { + const newItem = { + id: uniqueId(), + fields: { + filterValue: '', + filterValueFrom: '', + filterValueTo: '', + selectedField: '', + }, + }; + newItem.fields.selectedField = filters[0].title; + setFilterItems([...filterItems, newItem]); + }; + + const getClaimsCSV = async () => { + const response = await axios({ + url: '/claims?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 = 'claimsCSV.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('Claims')} + + + + {''} + + + {hasCreatePermission && ( + + )} + + + + + {hasCreatePermission && ( + setIsModalActive(true)} + /> + )} + +

+ +

+ Switch to Table +

+ + + + + + + + + + + ); +}; + +ClaimsTablesPage.getLayout = function getLayout(page: ReactElement) { + return ( + {page} + ); +}; + +export default ClaimsTablesPage; diff --git a/frontend/src/pages/claims/claims-new.tsx b/frontend/src/pages/claims/claims-new.tsx new file mode 100644 index 0000000..dd0eaf6 --- /dev/null +++ b/frontend/src/pages/claims/claims-new.tsx @@ -0,0 +1,170 @@ +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/claims/claimsSlice'; +import { useAppDispatch } from '../../stores/hooks'; +import { useRouter } from 'next/router'; +import moment from 'moment'; + +const initialValues = { + tenant: '', + + client: '', + + reservation: '', + + category: '', + + description: '', + + status: 'ouverte', + + attachments: '', + + agences: '', +}; + +const ClaimsNew = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + + const handleSubmit = async (data) => { + await dispatch(create(data)); + await router.push('/claims/claims-list'); + }; + return ( + <> + + {getPageTitle('New Item')} + + + + {''} + + + handleSubmit(values)} + > + + + + + ); +}; + +ClaimsNew.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default ClaimsNew; diff --git a/frontend/src/pages/claims/claims-table.tsx b/frontend/src/pages/claims/claims-table.tsx new file mode 100644 index 0000000..152c6e2 --- /dev/null +++ b/frontend/src/pages/claims/claims-table.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 TableClaims from '../../components/Claims/TableClaims'; +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/claims/claimsSlice'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const ClaimsTablesPage = () => { + 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: 'Category', title: 'category' }, + { label: 'Description', title: 'description' }, + { label: 'Attachments', title: 'attachments' }, + + { label: 'Tenant', title: 'tenant' }, + + { label: 'Client', title: 'client' }, + + { label: 'Reservation', title: 'reservation' }, + + { + label: 'Status', + title: 'status', + type: 'enum', + options: ['ouverte', 'en_cours', 'resolue'], + }, + ]); + + const hasCreatePermission = + currentUser && hasPermission(currentUser, 'CREATE_CLAIMS'); + + const addFilter = () => { + const newItem = { + id: uniqueId(), + fields: { + filterValue: '', + filterValueFrom: '', + filterValueTo: '', + selectedField: '', + }, + }; + newItem.fields.selectedField = filters[0].title; + setFilterItems([...filterItems, newItem]); + }; + + const getClaimsCSV = async () => { + const response = await axios({ + url: '/claims?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 = 'claimsCSV.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('Claims')} + + + + {''} + + + {hasCreatePermission && ( + + )} + + + + + {hasCreatePermission && ( + setIsModalActive(true)} + /> + )} + +

+ + + Back to list + +

+ + + + + + + + + + ); +}; + +ClaimsTablesPage.getLayout = function getLayout(page: ReactElement) { + return ( + {page} + ); +}; + +export default ClaimsTablesPage; diff --git a/frontend/src/pages/claims/claims-view.tsx b/frontend/src/pages/claims/claims-view.tsx new file mode 100644 index 0000000..3480579 --- /dev/null +++ b/frontend/src/pages/claims/claims-view.tsx @@ -0,0 +1,124 @@ +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/claims/claimsSlice'; +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'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const ClaimsView = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + const { claims } = useAppSelector((state) => state.claims); + + const { currentUser } = useAppSelector((state) => state.auth); + + 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 claims')} + + + + + + +

Tenant

+ +

{claims?.tenant?.name ?? 'No data'}

+ +

Client

+ +

{claims?.client?.first_name ?? 'No data'}

+ +

Reservation

+ +

{claims?.reservation?.ref ?? 'No data'}

+ +

Unhandled exception

+ +

An Error Occurred

+ + + + ); +} + +Error.getLayout = function getLayout(page: ReactElement) { + return {page}; +}; diff --git a/frontend/src/pages/expenses/[expensesId].tsx b/frontend/src/pages/expenses/[expensesId].tsx new file mode 100644 index 0000000..89bf719 --- /dev/null +++ b/frontend/src/pages/expenses/[expensesId].tsx @@ -0,0 +1,214 @@ +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/expenses/expensesSlice'; +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'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const EditExpenses = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + const initVals = { + tenant: null, + + type: '', + + category: '', + + amount: '', + + date: new Date(), + + vehicle: null, + + note: '', + + attachment_url: '', + + agences: null, + }; + const [initialValues, setInitialValues] = useState(initVals); + + const { expenses } = useAppSelector((state) => state.expenses); + + const { currentUser } = useAppSelector((state) => state.auth); + + const { expensesId } = router.query; + + useEffect(() => { + dispatch(fetch({ id: expensesId })); + }, [expensesId]); + + useEffect(() => { + if (typeof expenses === 'object') { + setInitialValues(expenses); + } + }, [expenses]); + + useEffect(() => { + if (typeof expenses === 'object') { + const newInitialVal = { ...initVals }; + + Object.keys(initVals).forEach((el) => (newInitialVal[el] = expenses[el])); + + setInitialValues(newInitialVal); + } + }, [expenses]); + + const handleSubmit = async (data) => { + await dispatch(update({ id: expensesId, data })); + await router.push('/expenses/expenses-list'); + }; + + return ( + <> + + {getPageTitle('Edit expenses')} + + + + {''} + + + handleSubmit(values)} + > +

+ + + + + + + + + + + + + + + + + + + + + + + setInitialValues({ ...initialValues, date: date }) + } + /> + + + + + + + + + + + + + + + + + + + + + + + router.push('/expenses/expenses-list')} + /> + + +

+ + + + ); +}; + +EditExpenses.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default EditExpenses; diff --git a/frontend/src/pages/expenses/expenses-edit.tsx b/frontend/src/pages/expenses/expenses-edit.tsx new file mode 100644 index 0000000..5cd701b --- /dev/null +++ b/frontend/src/pages/expenses/expenses-edit.tsx @@ -0,0 +1,212 @@ +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/expenses/expensesSlice'; +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'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const EditExpensesPage = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + const initVals = { + tenant: null, + + type: '', + + category: '', + + amount: '', + + date: new Date(), + + vehicle: null, + + note: '', + + attachment_url: '', + + agences: null, + }; + const [initialValues, setInitialValues] = useState(initVals); + + const { expenses } = useAppSelector((state) => state.expenses); + + const { currentUser } = useAppSelector((state) => state.auth); + + const { id } = router.query; + + useEffect(() => { + dispatch(fetch({ id: id })); + }, [id]); + + useEffect(() => { + if (typeof expenses === 'object') { + setInitialValues(expenses); + } + }, [expenses]); + + useEffect(() => { + if (typeof expenses === 'object') { + const newInitialVal = { ...initVals }; + Object.keys(initVals).forEach((el) => (newInitialVal[el] = expenses[el])); + setInitialValues(newInitialVal); + } + }, [expenses]); + + const handleSubmit = async (data) => { + await dispatch(update({ id: id, data })); + await router.push('/expenses/expenses-list'); + }; + + return ( + <> + + {getPageTitle('Edit expenses')} + + + + {''} + + + handleSubmit(values)} + > +

+ + + + ); +}; + +EditExpensesPage.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default EditExpensesPage; diff --git a/frontend/src/pages/expenses/expenses-list.tsx b/frontend/src/pages/expenses/expenses-list.tsx new file mode 100644 index 0000000..36613d5 --- /dev/null +++ b/frontend/src/pages/expenses/expenses-list.tsx @@ -0,0 +1,184 @@ +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 TableExpenses from '../../components/Expenses/TableExpenses'; +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/expenses/expensesSlice'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const ExpensesTablesPage = () => { + 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: 'Category', title: 'category' }, + { label: 'Note', title: 'note' }, + { label: 'AttachmentURL', title: 'attachment_url' }, + + { label: 'Amount', title: 'amount', number: 'true' }, + { label: 'Date', title: 'date', date: 'true' }, + + { label: 'Tenant', title: 'tenant' }, + + { label: 'Vehicle', title: 'vehicle' }, + + { + label: 'Type', + title: 'type', + type: 'enum', + options: ['depense', 'revenu'], + }, + ]); + + const hasCreatePermission = + currentUser && hasPermission(currentUser, 'CREATE_EXPENSES'); + + const addFilter = () => { + const newItem = { + id: uniqueId(), + fields: { + filterValue: '', + filterValueFrom: '', + filterValueTo: '', + selectedField: '', + }, + }; + newItem.fields.selectedField = filters[0].title; + setFilterItems([...filterItems, newItem]); + }; + + const getExpensesCSV = async () => { + const response = await axios({ + url: '/expenses?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 = 'expensesCSV.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('Expenses')} + + + + {''} + + + {hasCreatePermission && ( + + )} + + + + + {hasCreatePermission && ( + setIsModalActive(true)} + /> + )} + +

+ +

+ Switch to Table +

+ + + + + + + + + + + ); +}; + +ExpensesTablesPage.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default ExpensesTablesPage; diff --git a/frontend/src/pages/expenses/expenses-new.tsx b/frontend/src/pages/expenses/expenses-new.tsx new file mode 100644 index 0000000..b5bac71 --- /dev/null +++ b/frontend/src/pages/expenses/expenses-new.tsx @@ -0,0 +1,168 @@ +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/expenses/expensesSlice'; +import { useAppDispatch } from '../../stores/hooks'; +import { useRouter } from 'next/router'; +import moment from 'moment'; + +const initialValues = { + tenant: '', + + type: 'depense', + + category: '', + + amount: '', + + date: '', + + vehicle: '', + + note: '', + + attachment_url: '', + + agences: '', +}; + +const ExpensesNew = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + + const handleSubmit = async (data) => { + await dispatch(create(data)); + await router.push('/expenses/expenses-list'); + }; + return ( + <> + + {getPageTitle('New Item')} + + + + {''} + + + handleSubmit(values)} + > + + + + + ); +}; + +ExpensesNew.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default ExpensesNew; diff --git a/frontend/src/pages/expenses/expenses-table.tsx b/frontend/src/pages/expenses/expenses-table.tsx new file mode 100644 index 0000000..40d3fab --- /dev/null +++ b/frontend/src/pages/expenses/expenses-table.tsx @@ -0,0 +1,183 @@ +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 TableExpenses from '../../components/Expenses/TableExpenses'; +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/expenses/expensesSlice'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const ExpensesTablesPage = () => { + 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: 'Category', title: 'category' }, + { label: 'Note', title: 'note' }, + { label: 'AttachmentURL', title: 'attachment_url' }, + + { label: 'Amount', title: 'amount', number: 'true' }, + { label: 'Date', title: 'date', date: 'true' }, + + { label: 'Tenant', title: 'tenant' }, + + { label: 'Vehicle', title: 'vehicle' }, + + { + label: 'Type', + title: 'type', + type: 'enum', + options: ['depense', 'revenu'], + }, + ]); + + const hasCreatePermission = + currentUser && hasPermission(currentUser, 'CREATE_EXPENSES'); + + const addFilter = () => { + const newItem = { + id: uniqueId(), + fields: { + filterValue: '', + filterValueFrom: '', + filterValueTo: '', + selectedField: '', + }, + }; + newItem.fields.selectedField = filters[0].title; + setFilterItems([...filterItems, newItem]); + }; + + const getExpensesCSV = async () => { + const response = await axios({ + url: '/expenses?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 = 'expensesCSV.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('Expenses')} + + + + {''} + + + {hasCreatePermission && ( + + )} + + + + + {hasCreatePermission && ( + setIsModalActive(true)} + /> + )} + +

+ + + Back to list + +

+ + + + + + + + + + ); +}; + +ExpensesTablesPage.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default ExpensesTablesPage; diff --git a/frontend/src/pages/expenses/expenses-view.tsx b/frontend/src/pages/expenses/expenses-view.tsx new file mode 100644 index 0000000..a3c1ab3 --- /dev/null +++ b/frontend/src/pages/expenses/expenses-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/expenses/expensesSlice'; +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'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const ExpensesView = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + const { expenses } = useAppSelector((state) => state.expenses); + + const { currentUser } = useAppSelector((state) => state.auth); + + 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 expenses')} + + + + + + +

Tenant

+ +

{expenses?.tenant?.name ?? 'No data'}

+ +

Type

{expenses?.type ?? 'No data'}

+ +

{title}

+ +

+ Use{' '} + setLogin(e.target)} + > + super_admin@flatlogic.com + + {' / '} + 9023ec63 + {' / '} + to login as Super Admin +

+ +

+ Use{' '} + setLogin(e.target)} + > + admin@flatlogic.com + + {' / '} + 9023ec63 + {' / '} + to login as Admin +

+ Use{' '} + setLogin(e.target)} + > + client@hello.com + + {' / '} + 4d8ac698b0e7 + {' / '} + to login as User +

+ +

+ + + + handleSubmit(values)} + > +

+ + + + +

+ + + +

+ +

+ + + + + + {t('pages.login.form.forgotPassword', { + defaultValue: 'Forgot password?', + })} + +

+ + + + + + +
+

+ {t('pages.login.form.noAccountYet', { + defaultValue: 'Don’t have an account yet?', + })}{' '} + + {t('pages.login.form.newAccount', { + defaultValue: 'New Account', + })} + +

+ +

+ + {t('pages.login.footer.privacy', { defaultValue: 'Privacy Policy' })} + +

+ +

+ ); +} + +Login.getLayout = function getLayout(page: ReactElement) { + return {page}; +}; diff --git a/frontend/src/pages/maintenance/[maintenanceId].tsx b/frontend/src/pages/maintenance/[maintenanceId].tsx new file mode 100644 index 0000000..0baf265 --- /dev/null +++ b/frontend/src/pages/maintenance/[maintenanceId].tsx @@ -0,0 +1,218 @@ +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/maintenance/maintenanceSlice'; +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'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const EditMaintenance = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + const initVals = { + tenant: null, + + vehicle: null, + + type: '', + + scheduled_at: new Date(), + + odometer: '', + + cost: '', + + notes: '', + + attachments: '', + + agences: null, + }; + const [initialValues, setInitialValues] = useState(initVals); + + const { maintenance } = useAppSelector((state) => state.maintenance); + + const { currentUser } = useAppSelector((state) => state.auth); + + const { maintenanceId } = router.query; + + useEffect(() => { + dispatch(fetch({ id: maintenanceId })); + }, [maintenanceId]); + + useEffect(() => { + if (typeof maintenance === 'object') { + setInitialValues(maintenance); + } + }, [maintenance]); + + useEffect(() => { + if (typeof maintenance === 'object') { + const newInitialVal = { ...initVals }; + + Object.keys(initVals).forEach( + (el) => (newInitialVal[el] = maintenance[el]), + ); + + setInitialValues(newInitialVal); + } + }, [maintenance]); + + const handleSubmit = async (data) => { + await dispatch(update({ id: maintenanceId, data })); + await router.push('/maintenance/maintenance-list'); + }; + + return ( + <> + + {getPageTitle('Edit maintenance')} + + + + {''} + + + handleSubmit(values)} + > +

+ + + + + + + + + + + + + + + + + + + setInitialValues({ ...initialValues, scheduled_at: date }) + } + /> + + + + + + + + + + + + + + + + + + + + + + + + + + + router.push('/maintenance/maintenance-list')} + /> + + +

+ + + + ); +}; + +EditMaintenance.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default EditMaintenance; diff --git a/frontend/src/pages/maintenance/maintenance-edit.tsx b/frontend/src/pages/maintenance/maintenance-edit.tsx new file mode 100644 index 0000000..fffc451 --- /dev/null +++ b/frontend/src/pages/maintenance/maintenance-edit.tsx @@ -0,0 +1,216 @@ +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/maintenance/maintenanceSlice'; +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'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const EditMaintenancePage = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + const initVals = { + tenant: null, + + vehicle: null, + + type: '', + + scheduled_at: new Date(), + + odometer: '', + + cost: '', + + notes: '', + + attachments: '', + + agences: null, + }; + const [initialValues, setInitialValues] = useState(initVals); + + const { maintenance } = useAppSelector((state) => state.maintenance); + + const { currentUser } = useAppSelector((state) => state.auth); + + const { id } = router.query; + + useEffect(() => { + dispatch(fetch({ id: id })); + }, [id]); + + useEffect(() => { + if (typeof maintenance === 'object') { + setInitialValues(maintenance); + } + }, [maintenance]); + + useEffect(() => { + if (typeof maintenance === 'object') { + const newInitialVal = { ...initVals }; + Object.keys(initVals).forEach( + (el) => (newInitialVal[el] = maintenance[el]), + ); + setInitialValues(newInitialVal); + } + }, [maintenance]); + + const handleSubmit = async (data) => { + await dispatch(update({ id: id, data })); + await router.push('/maintenance/maintenance-list'); + }; + + return ( + <> + + {getPageTitle('Edit maintenance')} + + + + {''} + + + handleSubmit(values)} + > +

+ + + + ); +}; + +EditMaintenancePage.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default EditMaintenancePage; diff --git a/frontend/src/pages/maintenance/maintenance-list.tsx b/frontend/src/pages/maintenance/maintenance-list.tsx new file mode 100644 index 0000000..0383265 --- /dev/null +++ b/frontend/src/pages/maintenance/maintenance-list.tsx @@ -0,0 +1,186 @@ +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 TableMaintenance from '../../components/Maintenance/TableMaintenance'; +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/maintenance/maintenanceSlice'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const MaintenanceTablesPage = () => { + 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: 'Notes', title: 'notes' }, + { label: 'Attachments', title: 'attachments' }, + { label: 'Odometer', title: 'odometer', number: 'true' }, + { label: 'Cost', title: 'cost', number: 'true' }, + { label: 'ScheduledAt', title: 'scheduled_at', date: 'true' }, + + { label: 'Tenant', title: 'tenant' }, + + { label: 'Vehicle', title: 'vehicle' }, + + { + label: 'Type', + title: 'type', + type: 'enum', + options: ['preventive', 'corrective'], + }, + ]); + + const hasCreatePermission = + currentUser && hasPermission(currentUser, 'CREATE_MAINTENANCE'); + + const addFilter = () => { + const newItem = { + id: uniqueId(), + fields: { + filterValue: '', + filterValueFrom: '', + filterValueTo: '', + selectedField: '', + }, + }; + newItem.fields.selectedField = filters[0].title; + setFilterItems([...filterItems, newItem]); + }; + + const getMaintenanceCSV = async () => { + const response = await axios({ + url: '/maintenance?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 = 'maintenanceCSV.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('Maintenance')} + + + + {''} + + + {hasCreatePermission && ( + + )} + + + + + {hasCreatePermission && ( + setIsModalActive(true)} + /> + )} + +

+ +

+ Switch to Table +

+ + + + + + + + + + + ); +}; + +MaintenanceTablesPage.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default MaintenanceTablesPage; diff --git a/frontend/src/pages/maintenance/maintenance-new.tsx b/frontend/src/pages/maintenance/maintenance-new.tsx new file mode 100644 index 0000000..be8bb67 --- /dev/null +++ b/frontend/src/pages/maintenance/maintenance-new.tsx @@ -0,0 +1,172 @@ +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/maintenance/maintenanceSlice'; +import { useAppDispatch } from '../../stores/hooks'; +import { useRouter } from 'next/router'; +import moment from 'moment'; + +const initialValues = { + tenant: '', + + vehicle: '', + + type: 'preventive', + + scheduled_at: '', + + odometer: '', + + cost: '', + + notes: '', + + attachments: '', + + agences: '', +}; + +const MaintenanceNew = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + + const handleSubmit = async (data) => { + await dispatch(create(data)); + await router.push('/maintenance/maintenance-list'); + }; + return ( + <> + + {getPageTitle('New Item')} + + + + {''} + + + handleSubmit(values)} + > + + + + + ); +}; + +MaintenanceNew.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default MaintenanceNew; diff --git a/frontend/src/pages/maintenance/maintenance-table.tsx b/frontend/src/pages/maintenance/maintenance-table.tsx new file mode 100644 index 0000000..a791098 --- /dev/null +++ b/frontend/src/pages/maintenance/maintenance-table.tsx @@ -0,0 +1,185 @@ +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 TableMaintenance from '../../components/Maintenance/TableMaintenance'; +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/maintenance/maintenanceSlice'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const MaintenanceTablesPage = () => { + 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: 'Notes', title: 'notes' }, + { label: 'Attachments', title: 'attachments' }, + { label: 'Odometer', title: 'odometer', number: 'true' }, + { label: 'Cost', title: 'cost', number: 'true' }, + { label: 'ScheduledAt', title: 'scheduled_at', date: 'true' }, + + { label: 'Tenant', title: 'tenant' }, + + { label: 'Vehicle', title: 'vehicle' }, + + { + label: 'Type', + title: 'type', + type: 'enum', + options: ['preventive', 'corrective'], + }, + ]); + + const hasCreatePermission = + currentUser && hasPermission(currentUser, 'CREATE_MAINTENANCE'); + + const addFilter = () => { + const newItem = { + id: uniqueId(), + fields: { + filterValue: '', + filterValueFrom: '', + filterValueTo: '', + selectedField: '', + }, + }; + newItem.fields.selectedField = filters[0].title; + setFilterItems([...filterItems, newItem]); + }; + + const getMaintenanceCSV = async () => { + const response = await axios({ + url: '/maintenance?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 = 'maintenanceCSV.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('Maintenance')} + + + + {''} + + + {hasCreatePermission && ( + + )} + + + + + {hasCreatePermission && ( + setIsModalActive(true)} + /> + )} + +

+ + + Back to list + +

+ + + + + + + + + + ); +}; + +MaintenanceTablesPage.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default MaintenanceTablesPage; diff --git a/frontend/src/pages/maintenance/maintenance-view.tsx b/frontend/src/pages/maintenance/maintenance-view.tsx new file mode 100644 index 0000000..3d8e6fb --- /dev/null +++ b/frontend/src/pages/maintenance/maintenance-view.tsx @@ -0,0 +1,146 @@ +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/maintenance/maintenanceSlice'; +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'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const MaintenanceView = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + const { maintenance } = useAppSelector((state) => state.maintenance); + + const { currentUser } = useAppSelector((state) => state.auth); + + 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 maintenance')} + + + + + + +

Tenant

+ +

{maintenance?.tenant?.name ?? 'No data'}

+ +

Vehicle

+ +

{maintenance?.vehicle?.plate_number ?? 'No data'}

+ +

Type

{maintenance?.type ?? 'No data'}

+ + + {maintenance.scheduled_at ? ( + + ) : ( +

No ScheduledAt

+ )} + + +

Odometer

{maintenance?.odometer || 'No data'}

+ +

Cost

{maintenance?.cost || 'No data'}

+ +

Notes

{maintenance?.notes}

+ +

Attachments

{maintenance?.attachments}

+ +

agences

+ +

{maintenance?.agences?.name ?? 'No data'}

+ + + + router.push('/maintenance/maintenance-list')} + /> + + + + ); +}; + +MaintenanceView.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default MaintenanceView; 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 ; +} + +Reset.getLayout = function getLayout(page: ReactElement) { + return {page}; +}; diff --git a/frontend/src/pages/payments/[paymentsId].tsx b/frontend/src/pages/payments/[paymentsId].tsx new file mode 100644 index 0000000..bed6dea --- /dev/null +++ b/frontend/src/pages/payments/[paymentsId].tsx @@ -0,0 +1,214 @@ +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/payments/paymentsSlice'; +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'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const EditPayments = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + const initVals = { + tenant: null, + + reservation: null, + + method: '', + + amount: '', + + paid_at: new Date(), + + receipt_ref: '', + + attachment_url: '', + + agences: null, + }; + const [initialValues, setInitialValues] = useState(initVals); + + const { payments } = useAppSelector((state) => state.payments); + + const { currentUser } = useAppSelector((state) => state.auth); + + const { paymentsId } = router.query; + + useEffect(() => { + dispatch(fetch({ id: paymentsId })); + }, [paymentsId]); + + useEffect(() => { + if (typeof payments === 'object') { + setInitialValues(payments); + } + }, [payments]); + + useEffect(() => { + if (typeof payments === 'object') { + const newInitialVal = { ...initVals }; + + Object.keys(initVals).forEach((el) => (newInitialVal[el] = payments[el])); + + setInitialValues(newInitialVal); + } + }, [payments]); + + const handleSubmit = async (data) => { + await dispatch(update({ id: paymentsId, data })); + await router.push('/payments/payments-list'); + }; + + return ( + <> + + {getPageTitle('Edit payments')} + + + + {''} + + + handleSubmit(values)} + > +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + setInitialValues({ ...initialValues, paid_at: date }) + } + /> + + + + + + + + + + + + + + + + + + + router.push('/payments/payments-list')} + /> + + +

+ + + + ); +}; + +EditPayments.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default EditPayments; diff --git a/frontend/src/pages/payments/payments-edit.tsx b/frontend/src/pages/payments/payments-edit.tsx new file mode 100644 index 0000000..87c9af4 --- /dev/null +++ b/frontend/src/pages/payments/payments-edit.tsx @@ -0,0 +1,212 @@ +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/payments/paymentsSlice'; +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'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const EditPaymentsPage = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + const initVals = { + tenant: null, + + reservation: null, + + method: '', + + amount: '', + + paid_at: new Date(), + + receipt_ref: '', + + attachment_url: '', + + agences: null, + }; + const [initialValues, setInitialValues] = useState(initVals); + + const { payments } = useAppSelector((state) => state.payments); + + const { currentUser } = useAppSelector((state) => state.auth); + + const { id } = router.query; + + useEffect(() => { + dispatch(fetch({ id: id })); + }, [id]); + + useEffect(() => { + if (typeof payments === 'object') { + setInitialValues(payments); + } + }, [payments]); + + useEffect(() => { + if (typeof payments === 'object') { + const newInitialVal = { ...initVals }; + Object.keys(initVals).forEach((el) => (newInitialVal[el] = payments[el])); + setInitialValues(newInitialVal); + } + }, [payments]); + + const handleSubmit = async (data) => { + await dispatch(update({ id: id, data })); + await router.push('/payments/payments-list'); + }; + + return ( + <> + + {getPageTitle('Edit payments')} + + + + {''} + + + handleSubmit(values)} + > +

+ + + + ); +}; + +EditPaymentsPage.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default EditPaymentsPage; diff --git a/frontend/src/pages/payments/payments-list.tsx b/frontend/src/pages/payments/payments-list.tsx new file mode 100644 index 0000000..75d1e4e --- /dev/null +++ b/frontend/src/pages/payments/payments-list.tsx @@ -0,0 +1,183 @@ +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 TablePayments from '../../components/Payments/TablePayments'; +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/payments/paymentsSlice'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const PaymentsTablesPage = () => { + 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: 'ReceiptReference', title: 'receipt_ref' }, + { label: 'AttachmentURL', title: 'attachment_url' }, + + { label: 'Amount', title: 'amount', number: 'true' }, + { label: 'PaidAt', title: 'paid_at', date: 'true' }, + + { label: 'Tenant', title: 'tenant' }, + + { label: 'Reservation', title: 'reservation' }, + + { + label: 'Method', + title: 'method', + type: 'enum', + options: ['especes', 'carte', 'virement', 'cheque'], + }, + ]); + + const hasCreatePermission = + currentUser && hasPermission(currentUser, 'CREATE_PAYMENTS'); + + const addFilter = () => { + const newItem = { + id: uniqueId(), + fields: { + filterValue: '', + filterValueFrom: '', + filterValueTo: '', + selectedField: '', + }, + }; + newItem.fields.selectedField = filters[0].title; + setFilterItems([...filterItems, newItem]); + }; + + const getPaymentsCSV = async () => { + const response = await axios({ + url: '/payments?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 = 'paymentsCSV.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('Payments')} + + + + {''} + + + {hasCreatePermission && ( + + )} + + + + + {hasCreatePermission && ( + setIsModalActive(true)} + /> + )} + +

+ +

+ Switch to Table +

+ + + + + + + + + + + ); +}; + +PaymentsTablesPage.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default PaymentsTablesPage; diff --git a/frontend/src/pages/payments/payments-new.tsx b/frontend/src/pages/payments/payments-new.tsx new file mode 100644 index 0000000..4e39770 --- /dev/null +++ b/frontend/src/pages/payments/payments-new.tsx @@ -0,0 +1,170 @@ +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/payments/paymentsSlice'; +import { useAppDispatch } from '../../stores/hooks'; +import { useRouter } from 'next/router'; +import moment from 'moment'; + +const initialValues = { + tenant: '', + + reservation: '', + + method: 'especes', + + amount: '', + + paid_at: '', + + receipt_ref: '', + + attachment_url: '', + + agences: '', +}; + +const PaymentsNew = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + + const handleSubmit = async (data) => { + await dispatch(create(data)); + await router.push('/payments/payments-list'); + }; + return ( + <> + + {getPageTitle('New Item')} + + + + {''} + + + handleSubmit(values)} + > + + + + + ); +}; + +PaymentsNew.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default PaymentsNew; diff --git a/frontend/src/pages/payments/payments-table.tsx b/frontend/src/pages/payments/payments-table.tsx new file mode 100644 index 0000000..01e9336 --- /dev/null +++ b/frontend/src/pages/payments/payments-table.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 TablePayments from '../../components/Payments/TablePayments'; +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/payments/paymentsSlice'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const PaymentsTablesPage = () => { + 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: 'ReceiptReference', title: 'receipt_ref' }, + { label: 'AttachmentURL', title: 'attachment_url' }, + + { label: 'Amount', title: 'amount', number: 'true' }, + { label: 'PaidAt', title: 'paid_at', date: 'true' }, + + { label: 'Tenant', title: 'tenant' }, + + { label: 'Reservation', title: 'reservation' }, + + { + label: 'Method', + title: 'method', + type: 'enum', + options: ['especes', 'carte', 'virement', 'cheque'], + }, + ]); + + const hasCreatePermission = + currentUser && hasPermission(currentUser, 'CREATE_PAYMENTS'); + + const addFilter = () => { + const newItem = { + id: uniqueId(), + fields: { + filterValue: '', + filterValueFrom: '', + filterValueTo: '', + selectedField: '', + }, + }; + newItem.fields.selectedField = filters[0].title; + setFilterItems([...filterItems, newItem]); + }; + + const getPaymentsCSV = async () => { + const response = await axios({ + url: '/payments?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 = 'paymentsCSV.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('Payments')} + + + + {''} + + + {hasCreatePermission && ( + + )} + + + + + {hasCreatePermission && ( + setIsModalActive(true)} + /> + )} + +

+ + + Back to list + +

+ + + + + + + + + + ); +}; + +PaymentsTablesPage.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default PaymentsTablesPage; diff --git a/frontend/src/pages/payments/payments-view.tsx b/frontend/src/pages/payments/payments-view.tsx new file mode 100644 index 0000000..428a06e --- /dev/null +++ b/frontend/src/pages/payments/payments-view.tsx @@ -0,0 +1,139 @@ +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/payments/paymentsSlice'; +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'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const PaymentsView = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + const { payments } = useAppSelector((state) => state.payments); + + const { currentUser } = useAppSelector((state) => state.auth); + + 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 payments')} + + + + + + +

Tenant

+ +

{payments?.tenant?.name ?? 'No data'}

+ +

Reservation

+ +

{payments?.reservation?.ref ?? 'No data'}

+ +

Method

{payments?.method ?? 'No data'}

+ +

Amount

{payments?.amount || 'No data'}

+ + + {payments.paid_at ? ( + + ) : ( +

No PaidAt

+ )} + + +

ReceiptReference

{payments?.receipt_ref}

+ +

AttachmentURL

{payments?.attachment_url}

+ +

agences

+ +

{payments?.agences?.name ?? 'No data'}

+ + + + router.push('/payments/payments-list')} + /> + + + + ); +}; + +PaymentsView.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default PaymentsView; diff --git a/frontend/src/pages/permissions/[permissionsId].tsx b/frontend/src/pages/permissions/[permissionsId].tsx new file mode 100644 index 0000000..c49d722 --- /dev/null +++ b/frontend/src/pages/permissions/[permissionsId].tsx @@ -0,0 +1,130 @@ +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'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const EditPermissions = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + const initVals = { + name: '', + }; + const [initialValues, setInitialValues] = useState(initVals); + + const { permissions } = useAppSelector((state) => state.permissions); + + const { currentUser } = useAppSelector((state) => state.auth); + + 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 ( + <> + + {getPageTitle('Edit permissions')} + + + + {''} + + + handleSubmit(values)} + > + + + + + ); +}; + +EditPermissions.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +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..c540bf7 --- /dev/null +++ b/frontend/src/pages/permissions/permissions-edit.tsx @@ -0,0 +1,128 @@ +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'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const EditPermissionsPage = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + const initVals = { + name: '', + }; + const [initialValues, setInitialValues] = useState(initVals); + + const { permissions } = useAppSelector((state) => state.permissions); + + const { currentUser } = useAppSelector((state) => state.auth); + + 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 ( + <> + + {getPageTitle('Edit permissions')} + + + + {''} + + + handleSubmit(values)} + > + + + + + ); +}; + +EditPermissionsPage.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +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(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 ( + <> + + {getPageTitle('Permissions')} + + + + {''} + + + {hasCreatePermission && ( + + )} + + + + + {hasCreatePermission && ( + setIsModalActive(true)} + /> + )} + +

+ + + + + + + + + + + ); +}; + +PermissionsTablesPage.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +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 ( + <> + + {getPageTitle('New Item')} + + + + {''} + + + handleSubmit(values)} + > + + + + + ); +}; + +PermissionsNew.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +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(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 ( + <> + + {getPageTitle('Permissions')} + + + + {''} + + + {hasCreatePermission && ( + + )} + + + + + {hasCreatePermission && ( + setIsModalActive(true)} + /> + )} + +

+ + + + + + + + + + ); +}; + +PermissionsTablesPage.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +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..aae7c5e --- /dev/null +++ b/frontend/src/pages/permissions/permissions-view.tsx @@ -0,0 +1,87 @@ +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'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const PermissionsView = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + const { permissions } = useAppSelector((state) => state.permissions); + + const { currentUser } = useAppSelector((state) => state.auth); + + 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 permissions')} + + + + + + +

Name

{permissions?.name}

+ + + + router.push('/permissions/permissions-list')} + /> + + + + ); +}; + +PermissionsView.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default PermissionsView; diff --git a/frontend/src/pages/plans/[plansId].tsx b/frontend/src/pages/plans/[plansId].tsx new file mode 100644 index 0000000..8d74211 --- /dev/null +++ b/frontend/src/pages/plans/[plansId].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/plans/plansSlice'; +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'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const EditPlans = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + const initVals = { + code: '', + + name: '', + + period: '', + + price_mad: '', + + limits: '', + + agences: null, + }; + const [initialValues, setInitialValues] = useState(initVals); + + const { plans } = useAppSelector((state) => state.plans); + + const { currentUser } = useAppSelector((state) => state.auth); + + const { plansId } = router.query; + + useEffect(() => { + dispatch(fetch({ id: plansId })); + }, [plansId]); + + useEffect(() => { + if (typeof plans === 'object') { + setInitialValues(plans); + } + }, [plans]); + + useEffect(() => { + if (typeof plans === 'object') { + const newInitialVal = { ...initVals }; + + Object.keys(initVals).forEach((el) => (newInitialVal[el] = plans[el])); + + setInitialValues(newInitialVal); + } + }, [plans]); + + const handleSubmit = async (data) => { + await dispatch(update({ id: plansId, data })); + await router.push('/plans/plans-list'); + }; + + return ( + <> + + {getPageTitle('Edit plans')} + + + + {''} + + + handleSubmit(values)} + > + + + + + ); +}; + +EditPlans.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default EditPlans; diff --git a/frontend/src/pages/plans/plans-edit.tsx b/frontend/src/pages/plans/plans-edit.tsx new file mode 100644 index 0000000..8eebea4 --- /dev/null +++ b/frontend/src/pages/plans/plans-edit.tsx @@ -0,0 +1,169 @@ +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/plans/plansSlice'; +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'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const EditPlansPage = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + const initVals = { + code: '', + + name: '', + + period: '', + + price_mad: '', + + limits: '', + + agences: null, + }; + const [initialValues, setInitialValues] = useState(initVals); + + const { plans } = useAppSelector((state) => state.plans); + + const { currentUser } = useAppSelector((state) => state.auth); + + const { id } = router.query; + + useEffect(() => { + dispatch(fetch({ id: id })); + }, [id]); + + useEffect(() => { + if (typeof plans === 'object') { + setInitialValues(plans); + } + }, [plans]); + + useEffect(() => { + if (typeof plans === 'object') { + const newInitialVal = { ...initVals }; + Object.keys(initVals).forEach((el) => (newInitialVal[el] = plans[el])); + setInitialValues(newInitialVal); + } + }, [plans]); + + const handleSubmit = async (data) => { + await dispatch(update({ id: id, data })); + await router.push('/plans/plans-list'); + }; + + return ( + <> + + {getPageTitle('Edit plans')} + + + + {''} + + + handleSubmit(values)} + > + + + + + ); +}; + +EditPlansPage.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default EditPlansPage; diff --git a/frontend/src/pages/plans/plans-list.tsx b/frontend/src/pages/plans/plans-list.tsx new file mode 100644 index 0000000..cd19e24 --- /dev/null +++ b/frontend/src/pages/plans/plans-list.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 TablePlans from '../../components/Plans/TablePlans'; +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/plans/plansSlice'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const PlansTablesPage = () => { + 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: 'Code', title: 'code' }, + { label: 'Name', title: 'name' }, + { label: 'Limits', title: 'limits' }, + + { label: 'PriceMAD', title: 'price_mad', number: 'true' }, + + { + label: 'Period', + title: 'period', + type: 'enum', + options: ['monthly', 'yearly', 'both'], + }, + ]); + + const hasCreatePermission = + currentUser && hasPermission(currentUser, 'CREATE_PLANS'); + + const addFilter = () => { + const newItem = { + id: uniqueId(), + fields: { + filterValue: '', + filterValueFrom: '', + filterValueTo: '', + selectedField: '', + }, + }; + newItem.fields.selectedField = filters[0].title; + setFilterItems([...filterItems, newItem]); + }; + + const getPlansCSV = async () => { + const response = await axios({ + url: '/plans?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 = 'plansCSV.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('Plans')} + + + + {''} + + + {hasCreatePermission && ( + + )} + + + + + {hasCreatePermission && ( + setIsModalActive(true)} + /> + )} + +

+ +

+ Switch to Table +

+ + + + + + + + + + + ); +}; + +PlansTablesPage.getLayout = function getLayout(page: ReactElement) { + return ( + {page} + ); +}; + +export default PlansTablesPage; diff --git a/frontend/src/pages/plans/plans-new.tsx b/frontend/src/pages/plans/plans-new.tsx new file mode 100644 index 0000000..d83871e --- /dev/null +++ b/frontend/src/pages/plans/plans-new.tsx @@ -0,0 +1,140 @@ +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/plans/plansSlice'; +import { useAppDispatch } from '../../stores/hooks'; +import { useRouter } from 'next/router'; +import moment from 'moment'; + +const initialValues = { + code: '', + + name: '', + + period: 'monthly', + + price_mad: '', + + limits: '', + + agences: '', +}; + +const PlansNew = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + + const handleSubmit = async (data) => { + await dispatch(create(data)); + await router.push('/plans/plans-list'); + }; + return ( + <> + + {getPageTitle('New Item')} + + + + {''} + + + handleSubmit(values)} + > + + + + + ); +}; + +PlansNew.getLayout = function getLayout(page: ReactElement) { + return ( + + {page} + + ); +}; + +export default PlansNew; diff --git a/frontend/src/pages/plans/plans-table.tsx b/frontend/src/pages/plans/plans-table.tsx new file mode 100644 index 0000000..698d698 --- /dev/null +++ b/frontend/src/pages/plans/plans-table.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 TablePlans from '../../components/Plans/TablePlans'; +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/plans/plansSlice'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const PlansTablesPage = () => { + 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: 'Code', title: 'code' }, + { label: 'Name', title: 'name' }, + { label: 'Limits', title: 'limits' }, + + { label: 'PriceMAD', title: 'price_mad', number: 'true' }, + + { + label: 'Period', + title: 'period', + type: 'enum', + options: ['monthly', 'yearly', 'both'], + }, + ]); + + const hasCreatePermission = + currentUser && hasPermission(currentUser, 'CREATE_PLANS'); + + const addFilter = () => { + const newItem = { + id: uniqueId(), + fields: { + filterValue: '', + filterValueFrom: '', + filterValueTo: '', + selectedField: '', + }, + }; + newItem.fields.selectedField = filters[0].title; + setFilterItems([...filterItems, newItem]); + }; + + const getPlansCSV = async () => { + const response = await axios({ + url: '/plans?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 = 'plansCSV.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('Plans')} + + + + {''} + + + {hasCreatePermission && ( + + )} + + + + + {hasCreatePermission && ( + setIsModalActive(true)} + /> + )} + +

+ + + Back to list + +

+ + + + + + + + + + ); +}; + +PlansTablesPage.getLayout = function getLayout(page: ReactElement) { + return ( + {page} + ); +}; + +export default PlansTablesPage; diff --git a/frontend/src/pages/plans/plans-view.tsx b/frontend/src/pages/plans/plans-view.tsx new file mode 100644 index 0000000..6354105 --- /dev/null +++ b/frontend/src/pages/plans/plans-view.tsx @@ -0,0 +1,245 @@ +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/plans/plansSlice'; +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'; + +import { hasPermission } from '../../helpers/userPermissions'; + +const PlansView = () => { + const router = useRouter(); + const dispatch = useAppDispatch(); + const { plans } = useAppSelector((state) => state.plans); + + const { currentUser } = useAppSelector((state) => state.auth); + + 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 plans')} + + + + + + +

Code

{plans?.code}

+ +

Name

{plans?.name}

+ +

Period

{plans?.period ?? 'No data'}

+ +

PriceMAD

{plans?.price_mad || 'No data'}

+ +

Limits

{plans?.limits}

+ +

agences

+ +

{plans?.agences?.name ?? 'No data'}

+ + <> +

Subscriptions Plan

+ +

+ + + + + + + + + + + + + + + + + + {plans.subscriptions_plan && + Array.isArray(plans.subscriptions_plan) && + plans.subscriptions_plan.map((item: any) => ( + + router.push( + `/subscriptions/subscriptions-view/?id=${item.id}`, + ) + } + > + + + + + + + + + + + + + ))} + +

Status	CurrentPeriodStart	CurrentPeriodEnd	PaymentProvider	ProviderCustomerID	ProviderSubscriptionID
{item.status}	+ {dataFormatter.dateTimeFormatter( + item.current_period_start, + )} +	+ {dataFormatter.dateTimeFormatter( + item.current_period_end, + )} +	+ {item.payment_provider} +	+ {item.provider_customer_id} +	+ {item.provider_subscription_id} +

+ {!plans?.subscriptions_plan?.length && ( +

No data

+ )} + + + + <> +

Tenants Plan

+ +

+ + + + + + + + + + + + + + + + + + {plans.tenants_plan && + Array.isArray(plans.tenants_plan) && + plans.tenants_plan.map((item: any) => ( + + router.push(`/tenants/tenants-view/?id=${item.id}`) + } + > + + + + + + + + + + + + + ))} + +

Name	Subdomain	Status	TrialEndsAt	BillingEmail	BillingPhone
{item.name}	{item.subdomain}	{item.status}	+ {dataFormatter.dateTimeFormatter( + item.trial_ends_at, + )} +	+ {item.billing_email} +	+ {item.billing_phone} +

+ {!plans?.tenants_plan?.length && ( +

No data

+ )} + + + + + + router.push('/plans/plans-list')} + /> + + + + ); +}; + +PlansView.getLayout = function getLayout(page: ReactElement) { + return ( + {page} + ); +}; + +export default PlansView; diff --git a/frontend/src/pages/privacy-policy.tsx b/frontend/src/pages/privacy-policy.tsx new file mode 100644 index 0000000..6452bc1 --- /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 = 'Car zone'; + const [projectUrl, setProjectUrl] = useState(''); + + useEffect(() => { + setProjectUrl(location.origin); + }, []); + + const Introduction = () => { + return ( + <> +

1. Introduction

+ {/* eslint-disable-next-line react/no-unescaped-entities */} + We at {title} ("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 {projectUrl}, 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. +

+ + ); + }; + + const Information = () => { + return ( + <> +

2. Information We Collect

2.1 Personal Identification Information

+ We collect various types of personal information in connection with + the services we provide, including: +

+ Contact Information: Name, email address, phone number, mailing + address. +
Account Information: Username, password, profile picture.
Payment Information: Credit card details, billing address.
Demographic Information: Age, gender, interests.

2.2 Technical Data

+ We automatically collect certain information when you visit, use, or + navigate our services. This information may include: +

+ Device Information: IP address, browser type, operating system, + device type. +
+ Usage Data: Pages visited, time spent on each page, links clicked, + and other actions taken on our site. +

2.3 Cookies and Tracking Technologies

+ 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. +

+ + ); + }; + + const HowToUser = () => { + return ( + <> +

3. How We Use Your Information

We use the information we collect in various ways, including to:

Provide, operate, and maintain our website and services.
Improve, personalize, and expand our website and services.
Understand and analyze how you use our website and services.
Develop new products, services, features, and functionality.
+ 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. +
+ Process your transactions and send you related information, + including purchase confirmations and invoices. +
Find and prevent fraud.
Comply with legal obligations.

+ + ); + }; + + const DataProtection = () => { + return ( + <> +

4. Data Protection and Security

+ We implement a variety of security measures to maintain the safety of + your personal information. These measures include: +

+ 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. +

+ + ); + }; + + const Sharing = () => { + return ( + <> +

5. Sharing Your Information

+ We do not sell, trade, or otherwise transfer your Personally + Identifiable Information to outside parties without your consent, + except in the following cases: +

+ 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. +
+ 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. +
+ 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). +

+ + ); + }; + + const ProtectionRights = () => { + return ( + <> +

6. Your Data Protection Rights

+ Depending on your location, you may have the following rights + regarding your personal data: +

+ The Right to Access: You have the right to request copies of your + personal data. +
+ 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. +
+ The Right to Erasure: You have the right to request that we erase + your personal data, under certain conditions. +
+ The Right to Restrict Processing: You have the right to request that + we restrict the processing of your personal data, under certain + conditions. +
+ The Right to Object to Processing: You have the right to object to + our processing of your personal data, under certain conditions. +
+ 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. +

+ + ); + }; + + const DataTransfers = () => { + return ( + <> +

7. International Data Transfers

+ 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. +

+ + ); + }; + + const RetentionOfData = () => { + return ( + <> +

8. Retention of Data

+ 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. +

+ + ); + }; + + const ChangePrivacy = () => { + return ( + <> +

9. Changes to This Privacy Policy

+ 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. +

+ + ); + }; + + const ContactUs = () => { + return ( + <> +

10. Contact Us

+ If you have any questions about this Privacy Policy, please contact + us: +

+ By email:{' '} + [support@flatlogic.com] +

+ By visiting this page on our website:{' '} + Contact Us +

+ + ); + }; + + return ( +

+ + {getPageTitle('Privacy Policy')} + + +

Privacy Policy

+ + + + + + + + + + +

+ ); +} + +PrivacyPolicy.getLayout = function getLayout(page: ReactElement) { + return {page}; +}; 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 ( + <> + + {getPageTitle('Edit profile')} + + + + {''} + + + {currentUser?.avatar[0]?.publicUrl && ( +

+ )} + handleSubmit(values)} + > + + + + + ); +}; + +EditUsers.getLayout = function getLayout(page: ReactElement) { + return {page}; +}; + +export default EditUsers; diff --git a/frontend/src/pages/register.tsx b/frontend/src/pages/register.tsx new file mode 100644 index 0000000..35bf2d4 --- /dev/null +++ b/frontend/src/pages/register.tsx @@ -0,0 +1,127 @@ +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 Select from 'react-select'; +import { useAppDispatch } from '../stores/hooks'; +import { createAsyncThunk } from '@reduxjs/toolkit'; + +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 [organizations, setOrganizations] = React.useState(null); + const [selectedOrganization, setSelectedOrganization] = React.useState(null); + const dispatch = useAppDispatch(); + const fetchOrganizations = createAsyncThunk('/org-for-auth', async () => { + try { + const response = await axios.get('/org-for-auth'); + setOrganizations(response.data); + return response.data; + } catch (error) { + console.error(error.response); + throw error; + } + }); + React.useEffect(() => { + dispatch(fetchOrganizations()); + }, [dispatch]); + const options = organizations?.map((org) => ({ + value: org.id, + label: org.name, + })); + + const handleSubmit = async (value) => { + setLoading(true); + try { + const formData = { ...value, organizationId: selectedOrganization.value }; + + const { data: response } = await axios.post('/auth/signup', formData); + 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 ( + <> + + {getPageTitle('Login')} + + + + + handleSubmit(values)} + > +

+ Organization + +

Loading the app, just a moment…

Car zone

{title}

+ Something went wrong +

+ Howdy, {userName}! +

Unhandled exception

{title}

1. Introduction

2. Information We Collect

2.1 Personal Identification Information

2.2 Technical Data

2.3 Cookies and Tracking Technologies

3. How We Use Your Information

4. Data Protection and Security

5. Sharing Your Information

6. Your Data Protection Rights

7. International Data Transfers

8. Retention of Data

9. Changes to This Privacy Policy

10. Contact Us

Privacy Policy