Merge pull request #35 from vidyaaKhandekar/metabase-dashboard

Task #234692-Integrate Public Metabase URL in Profile Section

src/components/layouts/header/Profile.tsx

@@ -12,6 +12,7 @@ import { firstLetterInUpperCase } from "@/utils/Helper";
 import useSubmittedButtonStore from "@/utils/useSharedState";
 import LogoutIcon from "@mui/icons-material/Logout";
 import MailIcon from "@mui/icons-material/Mail";
+import DatasetIcon from "@mui/icons-material/Dataset";
 import PhoneIcon from "@mui/icons-material/Phone";
 import { Box, Button, Divider, Menu, Typography } from "@mui/material";
 import { useRouter } from "next/router";
@@ -205,6 +206,12 @@ const Profile = () => {
     }
   })();
 
+  const handleDashboard = () => {
+    const id = localStorage.getItem("userId");
+    setAnchorEl4(null);
+    router.push(`/dashboard?userId=${id}`);
+  };
+
   return (
     <>
       <Button
@@ -355,6 +362,21 @@ const Profile = () => {
               {adminInfo?.email}
             </Typography>
           </Box>
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              marginBottom: "20px",
+              px: "20px",
+              cursor: "pointer",
+            }}
+            onClick={handleDashboard}
+          >
+            <DatasetIcon sx={{ marginRight: "10px" }} />
+            <Typography variant="body1" sx={{ fontSize: "14px" }}>
+              Dashboard
+            </Typography>
+          </Box>
 
           <Divider sx={{ color: "#D0C5B4" }} />
           <Box sx={{ px: "20px" }}>

src/pages/dashboard.tsx

@@ -0,0 +1,52 @@
+import { serverSideTranslations } from "next-i18next/serverSideTranslations";
+import { useRouter } from "next/router";
+import { useEffect, useState } from "react";
+
+const Dashboard = () => {
+  const router = useRouter();
+  const { userId } = router.query;
+  const [isError, setIsError] = useState(false);
+
+  // Validate userId
+  useEffect(() => {
+    if (!userId) {
+      setIsError(true);
+    }
+  }, [userId]);
+
+  const metabaseUrl = `${process.env.NEXT_PUBLIC_METABASE_URL}${userId}`;
+
+  return (
+    <div>
+      {isError ? (
+        <p style={{ fontWeight: "bold" }}>
+          User ID is missing. Please go back and try again.
+        </p>
+      ) : (
+        <iframe
+          src={metabaseUrl}
+          width="100%"
+          height="600px"
+          style={{ border: "none" }}
+          onError={() => setIsError(true)} // Handle iframe load failure
+          title="metabase-dashboard"
+        />
+      )}
+
+      {isError && (
+        <p>
+          Dashboard not available. Please check your access or try again later.
+        </p>
+      )}
+    </div>
+  );
+};
+export async function getStaticProps({ locale }: any) {
+  return {
+    props: {
+      ...(await serverSideTranslations(locale, ["common"])),
+    },
+  };
+}
+
+export default Dashboard;