Merge pull request #57 from socialappslab/develop

fix: Fix router
socialappslab · Nov 5, 2024 · 17fdd27 · 17fdd27
2 parents 9635793 + ca2335b
commit 17fdd27
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 25 deletions.
diff --git a/src/components/RiskChart.tsx b/src/components/RiskChart.tsx
@@ -35,9 +35,13 @@ const RiskChart = () => {
         {loading && <Loader />}
         {!loading && (
           <>
-            <ProgressBar label={t('riskChart.greenSites')} progress={data?.greenQuantity || 0} color="green-600" />
-            <ProgressBar label={t('riskChart.yellowSites')} progress={data?.orangeQuantity || 0} color="yellow-600" />
-            <ProgressBar label={t('riskChart.redSites')} progress={data?.redQuantity || 0} color="red-600" />
+            <ProgressBar label={t('riskChart.greenSites')} progress={data?.greenQuantity || 0} color="bg-green-600" />
+            <ProgressBar
+              label={t('riskChart.yellowSites')}
+              progress={data?.orangeQuantity || 0}
+              color="bg-yellow-600"
+            />
+            <ProgressBar label={t('riskChart.redSites')} progress={data?.redQuantity || 0} color="bg-red-600" />
           </>
         )}
       </Box>

diff --git a/src/components/SitesReport.tsx b/src/components/SitesReport.tsx
@@ -11,8 +11,8 @@ const SitesReport = () => {
       <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="green-600" />
-          <ProgressBar label={t('sitesReport.quantity')} progress={80} color="green-800" />
+          <ProgressBar label={t('sitesReport.title')} progress={60} color="bg-green-600" />
+          <ProgressBar label={t('sitesReport.quantity')} progress={80} color="bg-green-800" />
         </>
       </Box>
     </Box>

diff --git a/src/pages/my-community/MyCommunityPage.tsx b/src/pages/my-community/MyCommunityPage.tsx
@@ -13,6 +13,20 @@ import Title from '@/themed/title/Title';
 
 type Sort = 'asc' | 'desc';
 
+const LookerStudioEmbed = () => {
+  return (
+    <iframe
+      title="Looker Studio Report"
+      width="100%"
+      height="1000"
+      src="https://lookerstudio.google.com/embed/reporting/52ffa4b7-c386-4c77-b5c8-ad765c9f15cc/page/2hjKE"
+      scrolling="no"
+      className="border-0 p-0 h-min-max overscroll-none overflow-hidden"
+      sandbox="allow-storage-access-by-user-activation allow-scripts allow-same-origin allow-popups allow-popups-to-escape-sandbox"
+    />
+  );
+};
+
 const MyCommunity = () => {
   const { t } = useTranslation(['feed', 'errorCodes']);
   const [error, setError] = useState('');
@@ -103,6 +117,7 @@ const MyCommunity = () => {
       <Box className="flex pt-6 gap-6">
         <Box className="bg-gray-300 h-full w-full">
           <SitesReport />
+          <LookerStudioEmbed />
           <InfiniteScroll
             loader={<Loader />}
             hasMore={hasMore}

diff --git a/src/routes/AppRouter.tsx b/src/routes/AppRouter.tsx
@@ -1,6 +1,6 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { Suspense } from 'react';
-import { Outlet, RouterProvider, createBrowserRouter } from 'react-router-dom';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 import BaseLayout from '../layout/BaseLayout';
 
 import MuiTheme from '../mui-theme';
@@ -11,8 +11,10 @@ import LangContextProvider from '../providers/LangContextProvider';
 import StateContextProvider from '../providers/StateContextProvider';
 
 import TeamList from '@/components/list/TeamsList';
+import AppHome from '@/pages/AppHome';
 import LoadCity from '@/pages/loader/LoadCity';
 import MyCity from '@/pages/my-city/MyCityPage';
+import MyCommunity from '@/pages/my-community/MyCommunityPage';
 import CityList from '../components/list/CityList';
 import OrganizationList from '../components/list/OrganizationList';
 import RoleList from '../components/list/RoleList';
@@ -26,8 +28,6 @@ import CreateSuccessPage from '../pages/auth/CreateSuccess';
 import LoadUser from '../pages/loader/LoadUser';
 import Loader from '../themed/loader/Loader';
 import ProtectedRoute from './ProtectedRoute';
-import AppHome from '@/pages/AppHome';
-import MyCommunity from '@/pages/my-community/MyCommunityPage';
 
 // Create a React Query client
 const queryClient = new QueryClient({
@@ -41,24 +41,32 @@ const queryClient = new QueryClient({
 const router = createBrowserRouter([
   {
     path: '/',
+    element: (
+      <PageLayout>
+        <AppHome />
+      </PageLayout>
+    ),
+    errorElement: <RouterErrorPage />,
+  },
+  {
+    path: 'my-city',
     element: (
       <ProtectedRoute>
         <PageLayout>
-          <AppHome />
-          <Outlet />
+          <MyCity />,
+        </PageLayout>
+      </ProtectedRoute>
+    ),
+  },
+  {
+    path: 'my-community',
+    element: (
+      <ProtectedRoute>
+        <PageLayout>
+          <MyCommunity />,
         </PageLayout>
       </ProtectedRoute>
     ),
-    children: [
-      {
-        path: 'my-city',
-        element: <MyCity />,
-      },
-      {
-        path: 'my-community',
-        element: <MyCommunity />,
-      },
-    ],
     errorElement: <RouterErrorPage />,
   },
   {

diff --git a/src/themed/progress-bar/ProgressBar.tsx b/src/themed/progress-bar/ProgressBar.tsx
@@ -17,11 +17,8 @@ export const ProgressBar: React.FC<ProgressBarProps> = ({ label, progress, color
       </Box>
       <Box className="flex-row items-center">
         <Box className="relative w-11/12 rounded-full h-2" style={{ width: '100%' }}>
-          <Box
-            className={`absolute top-0 left-0 h-full rounded-full bg-${color} opacity-30`}
-            style={{ width: `100%` }}
-          />
-          <Box className={`absolute top-0 left-0 h-full rounded-full bg-${color}`} style={{ width: `${progress}%` }} />
+          <Box className={`absolute top-0 left-0 h-full rounded-full ${color} opacity-30`} style={{ width: `100%` }} />
+          <Box className={`absolute top-0 left-0 h-full rounded-full ${color}`} style={{ width: `${progress}%` }} />
         </Box>
       </Box>
     </Box>