socialappslab · fego-dev · Dec 11, 2024 · Nov 5, 2024 · Nov 5, 2024 · Nov 5, 2024
diff --git a/.env.development b/.env.development
@@ -3,3 +3,4 @@ VITE_API_URL="https://apisandbox.denguechatplus.org"
 VITE_HOST="develop.denguechatplus.org"
 VITE_DEFAULT_LANG="es"
 VITE_LOCALE="es-ES"
+ROLLBAR_ACCESS_TOKEN=
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# DengueChat+
+# DengueChatPlus
 
 Web project for DengueChat
 

diff --git a/index.html b/index.html
@@ -10,7 +10,7 @@
     />
     <link rel="icon" type="image/svg+xml" href="/src/assets/images/favicon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>DengueChat+</title>
+    <title>DengueChatPlus</title>
   </head>
   <body>
     <div id="root-app"></div>

diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "@mui/icons-material": "^5.16.1",
     "@mui/material": "^5.15.20",
     "@mui/x-date-pickers": "^7.7.1",
+    "@rollbar/react": "^0.12.0-beta",
     "@tanstack/react-query": "^5.59.16",
     "axios": "^1.7.2",
     "axios-auth-refresh": "^3.3.6",
@@ -44,6 +45,7 @@
     "react-infinite-scroll-component": "^6.1.0",
     "react-number-format": "^5.4.0",
     "react-router-dom": "^6.24.0",
+    "rollbar": "^2.26.4",
     "tailwind-merge": "^2.3.0",
     "vite-plugin-svgr": "^4.2.0",
     "zod": "^3.23.8"

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,7 +1,7 @@
 const App: React.FC = () => (
   <>
     <div className="text-center selection:bg-green-900 bg-[#282c34] text-white min-h-screen pt-32" />
-    <div>DengueChat+</div>
+    <div>DengueChatPlus</div>
   </>
 );
 

diff --git a/src/assets/icons/fact-check.svg b/src/assets/icons/fact-check.svg
diff --git a/src/assets/icons/help.svg b/src/assets/icons/help.svg
diff --git a/src/assets/icons/reports.svg b/src/assets/icons/reports.svg
diff --git a/src/components/CommentBox.tsx b/src/components/CommentBox.tsx
@@ -55,7 +55,7 @@ const CommentBox = ({ postId }: CommentBoxProps) => {
 
           return (
             <Box>
-              <Box className="flex items-center gap-4 mt-6">
+              <Box className="flex grid gap-2 mt-6">
                 <Box className="min-w-20 min-h-20 -tracking-4 bg-green-100 rounded-full flex items-center justify-center">
                   <Text className="mb-0 text-green-800 font-bold -tracking-4 uppercase">{acronym}</Text>
                 </Box>

diff --git a/src/components/PostBox.tsx b/src/components/PostBox.tsx
@@ -6,11 +6,13 @@ import ThumbsUp from '@/assets/icons/thumbs-up.svg';
 import Trash from '@/assets/icons/trash.svg';
 import Text from '@/themed/text/Text';
 import CommentBox from './CommentBox';
+import { formatDateFromString } from '@/util';
+import useLangContext from '@/hooks/useLangContext';
 
 interface PostProps {
   id: number;
   author: string;
-  date: number;
+  date: string;
   location: string;
   text: string;
   image?: { photo_url: string };
@@ -20,20 +22,21 @@ interface PostProps {
 }
 
 const PostBox = ({ author, date, location, text, likes, image, id, comments, acronym }: PostProps) => {
+  const langContext = useLangContext();
   const { t } = useTranslation('feed');
   const [imageLoaded, setImageLoaded] = useState(false);
   const [openComments, setOpenComments] = useState(false);
 
   return (
-    <Box key={id} className="flex-col border-solid border-neutral-100 rounded-md p-8 flex justify-between mb-4">
+    <Box key={id} className="flex-col border-solid border-neutral-100 rounded-md p-6 flex justify-between mb-4">
       <Box className="flex items-center gap-4 mb-6">
-        <Box className="w-20 h-20 -tracking-4 bg-green-100 rounded-full flex items-center justify-center">
+        <Box className="w-10 h-10 -tracking-4 bg-green-100 rounded-full flex items-center justify-center">
           <Text className="mb-0 text-green-800 font-bold -tracking-4 uppercase">{acronym}</Text>
         </Box>
         <Box>
           <Text className="mb-0 font-semibold">{author}</Text>
           <Text className="mb-0 opacity-60">
-            {date} • {location}
+            {formatDateFromString(langContext.state.selected, date)} • {location}
           </Text>
         </Box>
       </Box>

diff --git a/src/components/RiskChart.tsx b/src/components/RiskChart.tsx
@@ -24,24 +24,38 @@ const RiskChart = () => {
 
   const [{ data, loading }] = useAxios<HouseReport, null, ErrorResponse>({
     url: `reports/house_status`,
+    headers: {
+      source: 'visits',
+    },
   });
 
   const label = `${(user?.team as BaseObject)?.name}: ${t('riskChart.title')}`;
-
+  const totalQuantity = (data?.redQuantity || 0) + (data?.orangeQuantity || 0) + (data?.greenQuantity || 0);
   return (
     <Box className="border-solid border-neutral-100 rounded-md p-6 mb-4">
       <Title label={label} type="subsection" className="mb-0" />
       <Box className="flex flex-col mt-6">
         {loading && <Loader />}
         {!loading && (
           <>
-            <ProgressBar label={t('riskChart.greenSites')} progress={data?.greenQuantity || 0} color="bg-green-600" />
+            <ProgressBar
+              label={t('riskChart.greenSites')}
+              value={data?.greenQuantity || 0}
+              progress={totalQuantity > 0 ? Math.round(((data?.greenQuantity || 0) / totalQuantity) * 100) : 0}
+              color="bg-green-600"
+            />
             <ProgressBar
               label={t('riskChart.yellowSites')}
-              progress={data?.orangeQuantity || 0}
+              value={data?.orangeQuantity || 0}
+              progress={totalQuantity > 0 ? Math.round(((data?.orangeQuantity || 0) / totalQuantity) * 100) : 0}
               color="bg-yellow-600"
             />
-            <ProgressBar label={t('riskChart.redSites')} progress={data?.redQuantity || 0} color="bg-red-600" />
+            <ProgressBar
+              label={t('riskChart.redSites')}
+              value={data?.redQuantity || 0}
+              progress={totalQuantity > 0 ? Math.round(((data?.redQuantity || 0) / totalQuantity) * 100) : 0}
+              color="bg-red-600"
+            />
           </>
         )}
       </Box>

diff --git a/src/components/SelectLanguageComponent.tsx b/src/components/SelectLanguageComponent.tsx
@@ -31,7 +31,7 @@ const getLocaleDisplayName = (locale: string, displayLocale?: string) => {
   return displayName.charAt(0).toLocaleUpperCase() + displayName.slice(1);
 };
 
-function SelectLanguageComponent() {
+function SelectLanguageComponent({ className }: { className?: string }) {
   const { i18n } = useTranslation();
   const { resolvedLanguage: currentLanguage } = i18n;
 
@@ -70,6 +70,7 @@ function SelectLanguageComponent() {
           onChange(e.target.value);
         }
       }}
+      className={className}
     >
       {options.map((option) => (
         <MenuItem key={`key-${option.value}`} value={option.value}>

diff --git a/src/components/SitesReport.tsx b/src/components/SitesReport.tsx
@@ -7,12 +7,24 @@ const SitesReport = () => {
   const { t } = useTranslation('feed');
 
   return (
-    <Box className="border-solid border-neutral-100 rounded-md p-6 mb-4">
+    <Box className="border-solid border-neutral-100 rounded-md p-6 mb-10">
       <Title label={t('sitesReport.title')} type="subsection" className="mb-0" />
       <Box className="flex flex-col mt-6">
         <>
-          <ProgressBar label={t('sitesReport.title')} progress={60} color="bg-green-600" />
-          <ProgressBar label={t('sitesReport.quantity')} progress={80} color="bg-green-800" />
+          <ProgressBar
+            label={t('sitesReport.title')}
+            value={60}
+            progress={60}
+            color="bg-green-600"
+            tooltip={t('sitesReport.tarikiSiteInfo')}
+          />
+          <ProgressBar
+            label={t('sitesReport.quantity')}
+            value={80}
+            progress={80}
+            color="bg-green-800"
+            tooltip={t('sitesReport.greenContainersInfo')}
+          />
         </>
       </Box>
     </Box>

diff --git a/src/components/dialog/CreateCityDialog.tsx b/src/components/dialog/CreateCityDialog.tsx
@@ -120,7 +120,7 @@ export function CreateCityDialog({ handleClose, updateTable }: CreateCityDialogP
               <FormInput
                 className="mt-2"
                 name="name"
-                label={t('admin:cities.form.name')}
+                label={t('admin:cities.form.name_placeholder')}
                 type="text"
                 placeholder={t('admin:cities.form.name_placeholder')}
               />

diff --git a/src/components/dialog/CreateTeamDialog.tsx b/src/components/dialog/CreateTeamDialog.tsx
@@ -11,7 +11,7 @@ import { ErrorResponse } from 'react-router-dom';
 import useAxios from 'axios-hooks';
 import { zodResolver } from '@hookform/resolvers/zod';
 import useCreateMutation from '@/hooks/useCreateMutation';
-import { FormSelectOption } from '@/schemas';
+import { BaseObject, FormSelectOption } from '@/schemas';
 import { CreateTeam, CreateTeamInputType, createTeamSchema } from '@/schemas/create';
 import { Team } from '@/schemas/entities';
 import FormMultipleSelect from '@/themed/form-multiple-select/FormMultipleSelect';
@@ -21,6 +21,7 @@ import { Button } from '../../themed/button/Button';
 import { FormInput } from '../../themed/form-input/FormInput';
 import { Title } from '../../themed/title/Title';
 import { convertToFormSelectOptions, extractAxiosErrorData } from '../../util';
+import useStateContext from '@/hooks/useStateContext';
 
 export interface EditUserProps {
   user: IUser;
@@ -32,8 +33,8 @@ interface CreateTeamDialogProps {
 }
 
 export function CreateTeamDialog({ handleClose, updateTable }: CreateTeamDialogProps) {
-  // const { state } = useStateContext();
-  // const user = state.user as IUser;
+  const { state } = useStateContext();
+  const user = state.user as IUser;
   const { t } = useTranslation(['register', 'errorCodes', 'admin', 'translation']);
   const { createMutation: createTeamMutation, loading: mutationLoading } = useCreateMutation<CreateTeam, Team>(
     `/teams`,
@@ -103,6 +104,21 @@ export function CreateTeamDialog({ handleClose, updateTable }: CreateTeamDialogP
     }
   }, [wedgesData]);
 
+  const [cityOptions, setCityOptions] = useState<FormSelectOption[]>([]);
+
+  const [{ data: cityData, loading: loadingCities }] = useAxios<ExistingDocumentObject, unknown, ErrorResponse>({
+    url: `countries/${(user.country as BaseObject).id}/states/${user.state.id}/cities`,
+  });
+
+  useEffect(() => {
+    if (!cityData) return;
+    const deserializedData = deserialize(cityData);
+    if (Array.isArray(deserializedData)) {
+      const cities = convertToFormSelectOptions(deserializedData);
+      setCityOptions(cities);
+    }
+  }, [cityData]);
+
   const { enqueueSnackbar } = useSnackbar();
 
   const methods = useForm<CreateTeamInputType>({
@@ -166,7 +182,7 @@ export function CreateTeamDialog({ handleClose, updateTable }: CreateTeamDialogP
           autoComplete="off"
           className="w-full p-8"
         >
-          <Title type="section" className="self-center mb-8i w-full" label="Create team" />
+          <Title type="section" className="self-center mb-8i w-full" label={t('admin:teams.create_team')} />
           <Grid container spacing={2}>
             <Grid item xs={12} sm={12}>
               <FormInput
@@ -188,22 +204,12 @@ export function CreateTeamDialog({ handleClose, updateTable }: CreateTeamDialogP
             </Grid>
             <Grid item xs={12} sm={12}>
               <FormSelect
-                name="leaderId"
+                name="cityId"
                 className="mt-2"
-                label={t('admin:teams.form.team_leader')}
-                loading={loadingUsers}
-                options={userOptions}
-                placeholder={t('admin:teams.form.team_leader_placeholder')}
-              />
-            </Grid>
-            <Grid item xs={12} sm={12}>
-              <FormSelect
-                name="organizationId"
-                className="mt-2"
-                label={t('admin:teams.form.organization')}
-                loading={loadingOrganizations}
-                options={organizationOptions}
-                placeholder={t('admin:teams.form.organization_placeholder')}
+                label={t('admin:teams.form.city')}
+                loading={loadingCities}
+                options={cityOptions}
+                placeholder={t('admin:teams.form.city_placeholder')}
               />
             </Grid>
             <Grid item xs={12} sm={12}>
@@ -226,6 +232,16 @@ export function CreateTeamDialog({ handleClose, updateTable }: CreateTeamDialogP
                 placeholder={t('admin:teams.form.wedge_placeholder')}
               />
             </Grid>
+            <Grid item xs={12} sm={12}>
+              <FormSelect
+                name="organizationId"
+                className="mt-2"
+                label={t('admin:teams.form.organization')}
+                loading={loadingOrganizations}
+                options={organizationOptions}
+                placeholder={t('admin:teams.form.organization_placeholder')}
+              />
+            </Grid>
           </Grid>
 
           <div className="mt-8 grid grid-cols-1 gap-4 md:flex md:justify-end md:gap-0">

diff --git a/src/components/icon/index.tsx b/src/components/icon/index.tsx
@@ -15,6 +15,7 @@ import Community from '@/assets/icons/community.svg?react';
 import Data from '@/assets/icons/data.svg?react';
 import Register from '@/assets/icons/register.svg?react';
 import Export from '@/assets/icons/export.svg?react';
+import FactCheck from '@/assets/icons/fact-check.svg?react';
 import { COLORS } from '@/constants';
 
 const IconMap = {
@@ -29,6 +30,7 @@ const IconMap = {
   Comment,
   Trash,
   ThumbsUp,
+  FactCheck,
 };
 
 const Icon = ({

diff --git a/src/components/list/CityList.tsx b/src/components/list/CityList.tsx
@@ -22,7 +22,7 @@ const headCells: HeadCell<City>[] = [
   },
   {
     id: 'name',
-    label: 'name',
+    label: 'city',
     filterable: true,
     sortable: true,
   },

diff --git a/src/components/list/FilteredDataTable.tsx b/src/components/list/FilteredDataTable.tsx
@@ -15,7 +15,7 @@ import { deserialize } from 'jsonapi-fractal';
 import { useSnackbar } from 'notistack';
 import { useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { PAGE_SIZES } from '../../constants';
+import { PAGE_SIZES, PageSizes } from '../../constants';
 import { PaginationInput } from '../../schemas/entities';
 import Button from '../../themed/button/Button';
 import DataTable, { DataTableProps, Order } from '../../themed/table/DataTable';
@@ -32,6 +32,7 @@ interface FilteredDataTableProps<T> extends Omit<DataTableProps<T>, 'rows'> {
   updateControl?: number;
   actions?: (row: T, loading?: boolean) => JSX.Element;
   create?: () => JSX.Element;
+  pageSize?: PageSizes;
 }
 
 interface FilterOptionsObject {
@@ -49,6 +50,7 @@ export default function FilteredDataTable<T>({
   updateControl,
   actions,
   create,
+  pageSize = PAGE_SIZES[0],
   ...otherDataTableProps
 }: FilteredDataTableProps<T>) {
   const { t } = useTranslation('translation');
@@ -59,7 +61,7 @@ export default function FilteredDataTable<T>({
   const [searchText, setSearchText] = useState('');
   const [searchSelect, setSearchSelect] = useState('');
   const [selectedOption, setSelectedOption] = useState(defaultFilter || '');
-  const options = headCells.filter((cell) => cell.filterable).map((cell) => cell.id);
+  const options = headCells.filter((cell) => cell.filterable).map((cell) => ({ value: cell.id, label: cell.label }));
   const filterOptions = useMemo(() => {
     const filterOptionsObject: FilterOptionsObject = {};
 
@@ -74,7 +76,7 @@ export default function FilteredDataTable<T>({
 
   const [payload, setPayload] = useState<PaginationInput>({
     'page[number]': 1,
-    'page[size]': PAGE_SIZES[0],
+    'page[size]': pageSize,
     sort: defaultSort,
     order: defaultSort ? defaultOrder : undefined,
   });
@@ -225,11 +227,12 @@ export default function FilteredDataTable<T>({
               <MenuItem disabled value="">
                 {t(`table.selectAttribute`)}
               </MenuItem>
+
               {options.map((option, index) => (
-                <MenuItem key={`${option}-${index}`} value={option}>
+                <MenuItem key={`${option.value}-${index}`} value={option.value}>
                   {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
                   {/* @ts-expect-error */}
-                  {t(`columns.${option}`)}
+                  {t(`columns.${option.label}`)}
                 </MenuItem>
               ))}
             </Select>
@@ -257,6 +260,7 @@ export default function FilteredDataTable<T>({
         }}
         isLoading={loading}
         actions={actions}
+        pageSize={pageSize}
       />
     </>
   );