Merge pull request #566 from Black-Dot-2024/staging

Staging

Author: DHurtado714

.github/ISSUE_TEMPLATE/issue-de-defecto.md

@@ -1,15 +1,11 @@
 ---
 name: Issue de Defecto
 about: Registrar un defecto encontrado
-title: Modulo/RFXX/Detalle
+title: MOD-RF00-ID00/Eliminar tarea cuando se elimina usario
 labels: ''
 assignees: ''
 ---
 
-# Contenido
-
-## Test ID
-
 ## Descripción de la tarea
 
 ¿Qué esta mal?

.gitignore

@@ -30,4 +30,4 @@ dist-ssr
 .env.*
 
 *.http
-.vercel
+.vercel

package.json

@@ -7,13 +7,14 @@
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings=1000",
-    "start": "vite preview",
+    "start": "vite preview --port 3000",
     "test": "mocha -r ts-node/register 'src/**/*.spec.ts'",
     "prepare": "husky install"
   },
   "dependencies": {
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.0",
+    "@lottiefiles/react-lottie-player": "^3.5.3",
     "@mui/icons-material": "^5.15.15",
     "@mui/joy": "5.0.0-beta.30",
     "@mui/material": "^5.15.15",

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 import { Snackbar } from '@mui/joy';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+import 'dayjs/locale/es-mx';
 import { useEffect, useState } from 'react';
 import { Outlet, Route, BrowserRouter as Router, Routes } from 'react-router-dom';
 import Layout from './components/common/Layout';
@@ -9,6 +10,7 @@ import OfflineModal from './components/common/OfflineModal';
 import ProtectedRoute from './components/common/ProtectedRoute';
 import { EmployeeBodyType, EmployeeContext } from './hooks/employeeContext';
 import { SnackbarContext, SnackbarState } from './hooks/snackbarContext';
+import { configDayjs } from './lib/dayjs/dayjs';
 import Auth from './pages/Auth';
 import Clients from './pages/Clients';
 import Employees from './pages/Employees';
@@ -18,6 +20,8 @@ import Tasks from './pages/Tasks';
 import { RoutesPath } from './utils/constants';
 
 function App() {
+  configDayjs();
+
   const [state, setState] = useState<SnackbarState>({ open: false, message: '' });
   const [employee, setEmployee] = useState<EmployeeBodyType | null>(null);
 
@@ -42,7 +46,7 @@ function App() {
 
   return (
     <EmployeeContext.Provider value={{ employee, setEmployee }}>
-      <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale='es-mx'>
         <SnackbarContext.Provider value={{ state, setState }}>
           <OfflineModal />
           <Router>

src/App.tsx

@@ -33,7 +33,7 @@ const ClientCard = ({
           {name}
         </span>
       </header>
-      <div className='grid grid-cols-2 gap-2 flex-wrap'>
+      <div className='grid grid-cols-2 gap-2'>
         <Chip
           sx={{
             bgcolor: colors.orangeChip,
@@ -46,7 +46,6 @@ const ClientCard = ({
           sx={{
             bgcolor: colors.orangeChip,
             fontSize: '13px',
-            width: 'max-content',
             overflow: 'hidden',
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap',
@@ -58,7 +57,6 @@ const ClientCard = ({
           sx={{
             bgcolor: colors.brownChip,
             fontSize: '13px',
-            width: 'max-content',
             overflow: 'hidden',
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap',
@@ -72,7 +70,6 @@ const ClientCard = ({
             color: '#0B6BCB',
             border: '1px solid #97C3F0',
             fontSize: '13px',
-            width: 'max-content',
             overflow: 'hidden',
             textOverflow: 'ellipsis',
             whiteSpace: 'nowrap',

src/components/common/ClientCard.tsx

@@ -7,7 +7,9 @@ interface ColorChipProps {
 
 function ColorChip(props: ColorChipProps) {
   return (
-    <Chip style={{ backgroundColor: props.color, color: 'black', fontSize: '1rem' }}>
+    <Chip
+      style={{ backgroundColor: props.color, color: 'black', fontSize: '1rem', maxWidth: '100%' }}
+    >
       {props.label}
     </Chip>
   );

src/components/common/ColorChip.tsx

@@ -1,20 +1,36 @@
 import { Option, Select } from '@mui/joy';
-import { FormState } from '../../hooks/useNewProject';
+import { FormState, FormStateTypes } from '../../hooks/useProjectForm';
 
-interface CustomSelectProps {
-  values: string[];
-  handleChange: (field: keyof FormState, value: string | Date | boolean | null) => void;
+type CustomSelectProps = {
+  options: string[];
+  value: string;
+  values?: string[];
+  handleChange: (field: keyof FormState, value: FormStateTypes) => void;
   name: keyof FormState;
   defaultValue?: string;
-}
+  disabled?: boolean;
+};
+
+const CustomSelect = ({
+  options,
+  values,
+  handleChange,
+  name,
+  value,
+  disabled = false,
+}: CustomSelectProps) => {
+  function onChange(_: React.SyntheticEvent | null, newVal: string | null) {
+    handleChange(name, newVal);
+  }
+
+  const valuesSet = values ?? options;
 
-const CustomSelect = ({ values, handleChange, name, defaultValue = '' }: CustomSelectProps) => {
   return (
-    <Select defaultValue={defaultValue} onChange={(_, newVal) => handleChange(name, newVal ?? '')}>
-      {values.map(value => {
+    <Select value={value} onChange={onChange} disabled={disabled}>
+      {options.map((option, i) => {
         return (
-          <Option key={value} value={value}>
-            {value}
+          <Option key={i} value={valuesSet[i]}>
+            {option}
           </Option>
         );
       })}

src/components/common/CustomSelect.tsx

@@ -8,7 +8,6 @@ import Sheet from '@mui/joy/Sheet';
 import Typography from '@mui/joy/Typography';
 import * as React from 'react';
 import Colors from '../../colors';
-import useDeleteEmployee from '../../hooks/useDeleteEmployee';
 
 interface ModalInterface {
   open: boolean;
@@ -17,7 +16,7 @@ interface ModalInterface {
   id: string;
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
   toggleModal?: () => void;
-  handleDeleteEmployee: (id: string) => void;
+  handleDelete: (id: string) => void;
 }
 
 export default function DeleteModal({
@@ -26,14 +25,11 @@ export default function DeleteModal({
   title,
   description,
   id,
-  handleDeleteEmployee,
+  handleDelete,
 }: ModalInterface) {
-  const useDeleteEmployees = useDeleteEmployee();
-
-  const handleDelete = () => {
-    useDeleteEmployees.deleteEmployee(id);
+  const handleOnDelete = () => {
     setOpen(false); // This will close the modal or dialog
-    handleDeleteEmployee(id); // This will update the UI
+    handleDelete(id); // This will update the UI
   };
 
   return (
@@ -97,7 +93,7 @@ export default function DeleteModal({
                   backgroundColor: Colors.darkerGold,
                 },
               }}
-              onClick={() => handleDelete()}
+              onClick={() => handleOnDelete()}
             >
               Delete
             </Button>

src/components/common/DeleteModal.tsx

@@ -1,5 +1,4 @@
-import { Typography } from '@mui/joy';
-import { colors } from '@mui/material';
+import { Typography, colors } from '@mui/joy';
 
 interface ErrorViewProps<T> {
   error: T;