Merge branch 'nepal' of github.com:WBG-Coach/coach-admin-sl

WBG-Coach · Dec 14, 2023 · b84d4d1 · b84d4d1
2 parents b3b750f + 47a78b9
commit b84d4d1
Show file tree

Hide file tree

Showing 20 changed files with 2,639 additions and 257 deletions.
diff --git a/.github/workflows/nepal.yml b/.github/workflows/nepal.yml
@@ -4,6 +4,7 @@ on:
   push:
     branches:
       - main
+      - nepal
 
 jobs:
   build:
@@ -12,6 +13,7 @@ jobs:
     env:
       VITE_API_URL: https://coachdigital.org/np/api/
       VITE_COUNTRY: np
+      VITE_MAX_REGION_LEVEL: 2
     steps:
       - name: 🛎️ Checkout
         uses: actions/checkout@v3

diff --git a/src/assets/images/logos/CoachLogoNP.png b/src/assets/images/logos/CoachLogoNP.png
diff --git a/src/assets/images/logos/CoachLogoNP.svg b/src/assets/images/logos/CoachLogoNP.svg
diff --git a/src/assets/images/logos/index.ts b/src/assets/images/logos/index.ts
@@ -1 +1,4 @@
-export { default as CoachLogo } from "./CoachLogo.png";
+import CoachLogoSL from './CoachLogo.png';
+import CoachLogoNP from './CoachLogoNP.svg';
+
+export const CoachLogo = import.meta.env.VITE_COUNTRY === 'sl' ? CoachLogoSL : CoachLogoNP;
diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx
@@ -32,6 +32,7 @@ const Menu: React.FC<Props<any>> = ({ items, currentItem }) => {
         <VStack
           top={'44px'}
           right={0}
+          zIndex={999}
           boxShadow={'0px 0px 10.040825843811035px 0px rgba(0, 0, 0, 0.10);'}
           borderRadius={'12px'}
           position={'absolute'}

diff --git a/src/components/Navbar/index.tsx b/src/components/Navbar/index.tsx
@@ -79,15 +79,15 @@ const Navbar: React.FC = () => {
           zIndex={9999}
         >
           <HStack w="full" justifyContent="space-between">
-            <HamburgerIcon w={8} h={8} mx="24px" onClick={() => setOpen(!open)} cursor="pointer" />
+            <HamburgerIcon w={8} h={8} mx="24px" onClick={() => setOpen(!open)} cursor="pointer" maxW="180px" />
             <Image mx="auto" src={CoachLogo} alt={'Logo do coach'} m="24px" mb="16px" />
             <Box w="72px" />
           </HStack>
           {menu}
         </VStack>
       ) : (
         <>
-          <Image src={CoachLogo} alt={'Logo do coach'} m="24px" mb="16px" />
+          <Image src={CoachLogo} alt={'Logo do coach'} m="24px" mb="16px" maxW="180px" />
           {menu}
         </>
       )}

diff --git a/src/i18n/langs/en.ts b/src/i18n/langs/en.ts
@@ -11,6 +11,14 @@ const enTranslation = {
     cancel: 'Cancel',
     download: 'Download data',
     'items-per-page': 'Items per page',
+    'all-time': 'All time',
+    'last-7-days': 'Last 7 days',
+    'last-30-days': 'Last 30 days',
+    'last-60-days': 'Last 60 days',
+    'last-90-days': 'Last 90 days',
+    'all-regions': 'All regions',
+    'all-schools': 'All schools',
+    'all-districts': 'All districts',
   },
 
   Navbar: {
@@ -100,6 +108,13 @@ const enTranslation = {
       'teachers-count': 'Teachers count',
       actions: 'Actions',
     },
+    form: {
+      new: 'New school',
+      update: 'Update school',
+      region: 'Region: ',
+      name: 'School name',
+      emis: 'Emis number',
+    },
   },
 
   'coach-over-time': {
@@ -194,10 +209,30 @@ const enTranslation = {
       region: {
         title: 'Regions',
         new: 'New region',
+        'sub-subregion-title': 'Municipalities',
+        'subregion-title': 'Districts',
+        'new-subregion': 'New district',
+        'new-sub-subregion': 'New municipality',
         edit: 'Edit',
         total_schools: 'Total school: {{ value }}',
-        form: {
-          name: 'Name',
+        placeholder: 'Region name',
+        0: {
+          title: 'Regions',
+          new: 'New region',
+          placeholder: 'Region name',
+          select: 'Select a region',
+        },
+        1: {
+          title: 'Districts',
+          new: 'New district',
+          placeholder: 'District name',
+          select: 'Select a district',
+        },
+        2: {
+          title: 'Municipalities',
+          new: 'New Municipality',
+          placeholder: 'Municipality name',
+          select: 'Select a municipality',
         },
       },
     },

diff --git a/src/i18n/langs/np.ts b/src/i18n/langs/np.ts
@@ -9,6 +9,14 @@ const npTranslation = {
     generateQRCode: 'QR कोड सिर्जना गर्नुहोस्',
     cancel: 'रद्द गर्नुहोस्',
     download: 'डाटा डाउनलोड गर्नुहोस्',
+    'all-time': 'सधैं',
+    'last-7-days': 'पछिल्लो ७ दिन',
+    'last-30-days': 'पछिल्लो ३० दिन',
+    'last-60-days': 'पछिल्लो ६० दिन',
+    'last-90-days': 'पछिल्लो ९० दिन',
+    'all-regions': 'सबै क्षेत्रहरू',
+    'all-schools': 'सबै विद्यालयहरू',
+    'all-districts': 'सबै जिल्लाहरू',
     actions: 'कार्यहरू',
   },
   Navbar: {
@@ -181,6 +189,36 @@ const npTranslation = {
       language: {
         title: 'भाषा परिवर्तन गर्नुहोस्',
       },
+
+      region: {
+        title: 'क्षेत्रहरू',
+        new: 'नयाँ क्षेत्र',
+        'sub-subregion-title': 'नगरपालिकाहरू',
+        'subregion-title': 'जिल्लाहरू',
+        'new-subregion': 'नयाँ जिल्ला',
+        'new-sub-subregion': 'नयाँ नगरपालिका',
+        edit: 'सम्पादन गर्नुहोस्',
+        total_schools: 'कुल विद्यालय: {{ value }}',
+        placeholder: 'क्षेत्रको नाम',
+        0: {
+          title: 'क्षेत्रहरू',
+          new: 'नयाँ क्षेत्र',
+          placeholder: 'क्षेत्रको नाम',
+          select: 'क्षेत्र छान्नुहोस्',
+        },
+        1: {
+          title: 'जिल्लाहरू',
+          new: 'नयाँ जिल्ला',
+          placeholder: 'जिल्लाको नाम',
+          select: 'जिल्ला छान्नुहोस्',
+        },
+        2: {
+          title: 'नगरपालिकाहरू',
+          new: 'नयाँ नगरपालिका',
+          placeholder: 'नगरपालिकाको नाम',
+          select: 'नगरपालिका छान्नुहोस्',
+        },
+      },
     },
   },
 };

diff --git a/src/pages/Dashboard/index.tsx b/src/pages/Dashboard/index.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
-import { Box, Button, Center, Flex, HStack, Select, Spinner, Text, VStack, useBreakpointValue } from '@chakra-ui/react';
-import { IDashboard, IRegion, ISchool, ITeachingPractices } from '@/types';
+import { Box, Button, Center, Flex, HStack, Text, VStack, useBreakpointValue } from '@chakra-ui/react';
+import { IDashboard, ITeachingPractices } from '@/types';
 import DashboardService from '@/services/dashboard';
 import Loader from '@/components/Base/Loader';
 import { CardValue } from './components/CardValue';
@@ -9,114 +9,41 @@ import { DoughnutGraph } from './components/DoughnutGraph';
 import { BarGraph } from './components/BarGraph';
 import { HorizontalBar } from './components/HorizontalBar';
 import { useUserContext } from '@/contexts/UserContext';
-import { ROLES } from '@/common/user';
-import SelectDistrict from '@/components/SelectDistrict';
 import { useTranslation } from 'react-i18next';
-import RegionService from '@/services/region';
+import RegionSelect from '../Schools/SchoolForm/RegionSelect';
 
 const DashboardPage: React.FC = () => {
   const { user } = useUserContext();
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
   const [dashboard, setDashboard] = useState<IDashboard>();
-  const [regions, setRegions] = useState<IRegion[]>();
   const [regionId, setRegionId] = useState(user?.region_id);
   const [district, setDistrict] = useState(user?.district);
-  const [schoolName, setSchoolName] = useState<string>();
-  const [schoolList, setSchoolList] = useState<ISchool[]>([]);
   const [selected, setSelected] = useState<ITeachingPractices>();
   const isMobile = useBreakpointValue({ base: true, md: false });
 
   useEffect(() => {
     if (!loading) {
       setLoading(true);
 
-      if (!regions) {
-        RegionService.getRegions().then(setRegions);
-      }
-
-      let schoolId: string | undefined;
-
-      if (schoolName) {
-        schoolId = schoolList.find((school) => school.name === schoolName)?.id;
-      }
-
-      DashboardService.getData(regionId, district, schoolId).then((data) => {
+      DashboardService.getData(regionId, district).then((data) => {
         const { schools, ...dash } = data;
-        if (schools) {
-          setSchoolList(schools);
-        }
         setDashboard(dash);
         setSelected(dash?.teachingPractices[0]);
         setLoading(false);
       });
     }
-  }, [regionId, district, schoolName]);
+  }, [regionId, district]);
 
-  const handleRegion = (regionId: string) => {
+  const handleRegion = (regionId?: string) => {
     setRegionId(regionId);
-    setSchoolList([]);
-    setSchoolName(undefined);
     setDistrict(undefined);
   };
 
-  const handleDistrict = (newDistrict: string) => {
-    setDistrict(newDistrict);
-    setSchoolList([]);
-    setSchoolName(undefined);
-  };
-
   return (
     <VStack mx="auto" minH="100vh" maxW="1200px" position="relative" overflow="scroll" alignItems="flex-start" p="56px">
-      <Flex flexDir={isMobile ? 'column' : 'row'} w="full">
-        <VStack alignItems="start" mb="12px" mr="12px" minW={250}>
-          {regions && (
-            <>
-              <Text fontWeight="600">{t('dashboard.filters.region')}</Text>
-              {user?.role === ROLES.admin ? (
-                <Select placeholder="..." onChange={(e) => handleRegion(e.target.value)} value={regionId}>
-                  {regions?.map((region) => (
-                    <option key={region.id} value={region.id}>
-                      {region.name}
-                    </option>
-                  ))}
-                </Select>
-              ) : (
-                <Text>{regions?.find((region) => region.id === regionId)?.name}</Text>
-              )}
-            </>
-          )}
-        </VStack>
-
-        <VStack alignItems="start" mb="12px" mr="12px" minW={250}>
-          <Text fontWeight="600">{t('dashboard.filters.district')}</Text>
-          {user?.role === ROLES.admin || user?.role === ROLES['region-analyst'] ? (
-            <SelectDistrict
-              role={user.role}
-              region={regionId}
-              onChange={(e) => handleDistrict(e.target.value)}
-              value={district}
-            />
-          ) : (
-            <Text>{district}</Text>
-          )}
-        </VStack>
-
-        <VStack alignItems="start" mb="12px" mr="12px" minW={250}>
-          <Text fontWeight="600">{t('dashboard.filters.school')}</Text>
-          {loading ? (
-            <Spinner />
-          ) : (
-            <Select onChange={(e) => setSchoolName(e.target.value)} value={schoolName}>
-              <option value={undefined}></option>
-              {schoolList.map((school) => (
-                <option key={school.name} value={school.name}>
-                  {school.name}
-                </option>
-              ))}
-            </Select>
-          )}
-        </VStack>
+      <Flex mb="20px" ml={'-12px'} flexDir={isMobile ? 'column' : 'row'} w="full">
+        <RegionSelect direction="row" level={0} onSelect={handleRegion} />
       </Flex>
 
       {loading || !dashboard || !selected ? (

diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
@@ -1,13 +1,13 @@
-import { CoachLogo } from "@/assets/images/logos";
-import Loader from "@/components/Base/Loader";
-import { UserContext } from "@/contexts/UserContext";
-import { Button, Center, Image, Input, VStack } from "@chakra-ui/react";
-import React, { useContext } from "react";
-import { useForm, SubmitHandler, Controller } from "react-hook-form";
+import { CoachLogo } from '@/assets/images/logos';
+import Loader from '@/components/Base/Loader';
+import { UserContext } from '@/contexts/UserContext';
+import { Button, Center, Image, Input, VStack } from '@chakra-ui/react';
+import React, { useContext } from 'react';
+import { useForm, SubmitHandler, Controller } from 'react-hook-form';
 
 const defaultValues = {
-  email: "",
-  password: "",
+  email: '',
+  password: '',
 };
 
 const Login: React.FC = () => {
@@ -26,32 +26,27 @@ const Login: React.FC = () => {
   };
 
   return (
-    <Center w={"100vw"} h={"100vh"}>
+    <Center w={'100vw'} h={'100vh'}>
       <VStack
-        p={"24px"}
-        background={"Gray.$200"}
-        borderRadius={"16px"}
-        boxShadow={"0px 0px 10.0408px rgba(0, 0, 0, 0.1);"}
+        p={'24px'}
+        background={'Gray.$200'}
+        borderRadius={'16px'}
+        boxShadow={'0px 0px 10.0408px rgba(0, 0, 0, 0.1);'}
       >
-        <Image src={CoachLogo} />
+        <Image src={CoachLogo} maxH="100px" />
         {isSubmitting ? (
-          <Center minW={"350px"} h={"200px"}>
+          <Center minW={'350px'} h={'200px'}>
             <Loader />
           </Center>
         ) : (
           <>
-            <VStack minW={"350px"} mt={"28px !important"} spacing={"16px"}>
+            <VStack minW={'350px'} mt={'28px !important'} spacing={'16px'}>
               <Controller
                 control={control}
                 rules={{ required: true }}
                 name="email"
                 render={({ field, fieldState: { error } }) => (
-                  <Input
-                    placeholder="E-mail"
-                    {...field}
-                    isInvalid={!!error}
-                    h={"48px"}
-                  />
+                  <Input placeholder="E-mail" {...field} isInvalid={!!error} h={'48px'} />
                 )}
               />
 
@@ -60,21 +55,11 @@ const Login: React.FC = () => {
                 rules={{ required: true }}
                 name="password"
                 render={({ field, fieldState: { error } }) => (
-                  <Input
-                    placeholder="Password"
-                    type="password"
-                    {...field}
-                    isInvalid={!!error}
-                    h={"48px"}
-                  />
+                  <Input placeholder="Password" type="password" {...field} isInvalid={!!error} h={'48px'} />
                 )}
               />
             </VStack>
-            <Button
-              mt={"32px !important"}
-              w={"100%"}
-              onClick={handleSubmit(handleLogin)}
-            >
+            <Button mt={'32px !important'} w={'100%'} onClick={handleSubmit(handleLogin)}>
               SignIn
             </Button>
           </>