Merge pull request #54 from socialappslab/fix/no-ticket/router

fix: Fix Router
socialappslab · Nov 4, 2024 · ad42b6e · ad42b6e
2 parents c9e803e + dff045e
commit ad42b6e
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 22 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 Stuio"
+      width="100%"
+      height="450"
+      src="https://lookerstudio.google.com/embed/reporting/3e09d10b-e76e-4540-9627-4068431ff44b/page/e1SEE"
+      className="border-0"
+      allowFullScreen
+      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
@@ -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>