[Admin && Client] Badge Management System - Completed

admin-frontend/src/App.js

@@ -39,6 +39,7 @@ import ManageFeaturedActivities from "./components/featured/ManageFeaturedActivi
 import EditFeaturedActivity from "./components/featured/EditFeaturedActivity.jsx";
 import DashboardPage from "./components/analytics/DashboardPage.jsx";
 import ScheduledTaskDemo from "./components/ScheduledTaskDemo";
+import BadgesDetails from "./components/badges/BadgesDetails.js";
 import VendorDetails from "./components/vendor/VendorDetails";
 
 function App() {
@@ -364,6 +365,15 @@ function App() {
               </ProtectedRoute>
             }
           />
+          <Route
+            exact
+            path="/badgeDetails/:badgeId"
+            element={
+              <ProtectedRoute>
+                <BadgesDetails />
+              </ProtectedRoute>
+            }
+          />
           <Route
             exact
             path="/verifyEmail/:token"

admin-frontend/src/components/activity/CreateActivityForm.jsx

@@ -121,9 +121,9 @@ const CreateActivityForm = ({ themes, theme, vendors, admin, activity }) => {
     activity?.activityType === null
       ? null
       : activity?.activityType === "Popups (Food)" ||
-        activity?.activityType === "Popups (Non-food)"
-      ? ActivityTypeEnum.POPUP
-      : activity?.activityType,
+          activity?.activityType === "Popups (Non-food)"
+        ? ActivityTypeEnum.POPUP
+        : activity?.activityType,
   );
   const [title, setTitle] = useState(activity?.title ?? null);
   const [description, setDescription] = useState(activity?.description ?? null);
@@ -211,10 +211,10 @@ const CreateActivityForm = ({ themes, theme, vendors, admin, activity }) => {
       activity?.weekendPricing?.amount
       ? 3
       : activity?.clientMarkupPercentage
-      ? 2
-      : activity?.activityPricingRules?.length > 0
-      ? 1
-      : 0,
+        ? 2
+        : activity?.activityPricingRules?.length > 0
+          ? 1
+          : 0,
   );
   const [bookingNotice, setBookingNotice] = useState(
     activity?.bookingNotice ?? null,

admin-frontend/src/components/analytics/ActivityProfitTable.jsx

@@ -4,7 +4,7 @@ import {
   FormControl,
   FormHelperText,
   Typography,
-  useTheme
+  useTheme,
 } from "@mui/material";
 import { DataGrid, GridToolbarFilterButton } from "@mui/x-data-grid";
 import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";

admin-frontend/src/components/analytics/DashboardPage.jsx

@@ -48,7 +48,7 @@ const DashboardPage = () => {
   const [activityReviews, setActivityReviews] = useState();
   const handleOpen = (activity) => {
     const filteredReviews = reviews.filter(
-      (review) => review?.activity?._id === activity?._id
+      (review) => review?.activity?._id === activity?._id,
     );
     setActivityReviews(filteredReviews);
     setActivity(activity);
@@ -70,7 +70,7 @@ const DashboardPage = () => {
       avgReviewRating: sentiment.avgReviewRating,
       totalReviewSentiments: sentiment.totalReviewSentiments,
       reviewSentimentScore: sentiment.reviewSentimentScore,
-    }))
+    })),
   );
   const getDefaultStartDate = () => {
     const currentDate = new Date();
@@ -97,7 +97,7 @@ const DashboardPage = () => {
       setError("");
       await calculateAdminProfit(
         startDate.toISOString(),
-        endDate.toISOString()
+        endDate.toISOString(),
       );
     }
   };
@@ -127,7 +127,7 @@ const DashboardPage = () => {
       const endOfMonth = new Date(currentYear, currentMonth + 1, 0);
       await calculateAdminProfit(
         startOfMonth.toISOString(),
-        endOfMonth.toISOString()
+        endOfMonth.toISOString(),
       );
     };
     fetchData();
@@ -183,7 +183,7 @@ const DashboardPage = () => {
                   sx={{
                     backgroundColor: alpha(
                       theme.palette.light_purple.main,
-                      0.5
+                      0.5,
                     ),
                     marginBottom: 2,
                   }}
@@ -230,7 +230,7 @@ const DashboardPage = () => {
                   sx={{
                     backgroundColor: alpha(
                       theme.palette.light_purple.main,
-                      0.5
+                      0.5,
                     ),
                     marginBottom: 2,
                   }}

admin-frontend/src/components/analytics/RevenueChart.jsx

@@ -40,7 +40,7 @@ const RevenueChart = ({ data }) => {
         };
       }
       const monthIndex = predefinedMonthRange.findIndex(
-        ({ month, year }) => month === currentMonth && year === currentYear
+        ({ month, year }) => month === currentMonth && year === currentYear,
       );
       if (monthIndex !== -1) {
         activityIdProfitsMap[key].profits[monthIndex] = profit;
@@ -53,7 +53,7 @@ const RevenueChart = ({ data }) => {
       activityId,
       activityTitle,
       profits,
-    })
+    }),
   );
   const options = {
     toolbox: {

admin-frontend/src/components/badges/BadgeDetailsForm.jsx

@@ -0,0 +1,156 @@
+import styled from "@emotion/styled";
+import DeleteIcon from "@mui/icons-material/Delete";
+import React, { useState } from "react";
+
+import { Box, Grid, Typography, useTheme } from "@mui/material";
+import Paper from "@mui/material/Paper";
+const StyledContainer = styled(Paper)`
+  padding: 20px;
+  padding-top: 6px;
+  border-radius: 10px;
+  box-shadow: 4px 4px 0px 0px rgb(159 145 204 / 40%);
+`;
+
+export const CustomBox = styled(Box)`
+  &.MuiBox-root {
+    background-color: #fff;
+    border-radius: 2rem;
+    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
+    padding: 1rem;
+  }
+
+  &:hover,
+  &.dragover {
+    opacity: 0.6;
+  }
+`;
+
+const BadgeDetailsForm = ({ badge }) => {
+  const theme = useTheme();
+  let containerStyle = {
+    minHeight: "10rem", // Default for extra-large screens
+    width: "10rem",
+    objectFit: "cover",
+    borderTopLeftRadius: "4px",
+    borderTopRightRadius: "4px",
+    borderBottomRightRadius: "4px",
+    borderBottomLeftRadius: "4px",
+    borderRadius: "4px",
+  };
+  console.log(badge);
+  return (
+    <div>
+      <div
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          gap: "16px",
+        }}
+      >
+        <StyledContainer elevation={3}>
+          <Grid container spacing={2} alignItems="left" justifyContent="left">
+            <Grid item xs={12}>
+              <Typography
+                color={theme.palette.primary.main}
+                paddingTop={2}
+                component="div"
+                fontSize={"1.25rem"}
+                fontWeight={700}
+              >
+                Badge Details
+              </Typography>
+            </Grid>
+            <Grid item xs={4}>
+              <Box display="flex" flexDirection="column">
+                <Typography color={theme.palette.primary.main} fontWeight={700}>
+                  Badge Name:{" "}
+                </Typography>
+                <Typography>{badge.name}</Typography>
+              </Box>
+            </Grid>
+            <Grid item xs={4}>
+              <Box display="flex" flexDirection="column">
+                <Typography color={theme.palette.primary.main} fontWeight={700}>
+                  Badge Type:{" "}
+                </Typography>
+                <Typography>{badge.sdgBadgeType}</Typography>
+              </Box>
+            </Grid>
+            <Grid item xs={4}>
+              <Box display="flex" flexDirection="column">
+                <Typography color={theme.palette.primary.main} fontWeight={700}>
+                  Badge Caption:{" "}
+                </Typography>
+                <Typography>{badge.caption}</Typography>
+              </Box>
+            </Grid>
+            <Grid item xs={4}>
+              <Box display="flex" flexDirection="column">
+                <Typography color={theme.palette.primary.main} fontWeight={700}>
+                  Badge Description:{" "}
+                </Typography>
+                <Typography>{badge.description}</Typography>
+              </Box>
+            </Grid>
+            {badge.sdgBadgeType === "BRONZE" && (
+              <Grid item xs={4}>
+                <Box display="flex" flexDirection="column">
+                  <Typography
+                    color={theme.palette.primary.main}
+                    fontWeight={700}
+                  >
+                    Badge Sustainable Development Goal:{" "}
+                  </Typography>
+                  <Typography>{badge.sdg}</Typography>
+                </Box>
+              </Grid>
+            )}
+            {(badge.sdgBadgeType === "GOLD" ||
+              badge.sdgBadgeType === "SILVER") && (
+              <Grid item xs={4}>
+                <Box display="flex" flexDirection="column">
+                  <Typography
+                    color={theme.palette.primary.main}
+                    fontWeight={700}
+                  >
+                    Badge Sustainable Development Goal Threshold:{" "}
+                  </Typography>
+                  <Typography color={theme.palette.primary.main}>
+                    {badge.sdgThreshold}
+                  </Typography>
+                </Box>
+              </Grid>
+            )}
+            {badge.sdgBadgeType === "OTHER" && (
+              <Grid item xs={4}>
+                <Box display="flex" flexDirection="column">
+                  <Typography
+                    color={theme.palette.primary.main}
+                    fontWeight={700}
+                  >
+                    Badge Booking Threshold:{" "}
+                  </Typography>
+                  <Typography>{badge.bookingThreshold}</Typography>
+                </Box>
+              </Grid>
+            )}
+            <Grid item xs={6}>
+              <Typography color={theme.palette.primary.main} fontWeight={700}>
+                Badge Image:
+              </Typography>
+              {badge.badgePreSignedImage && (
+                <img
+                  src={badge.badgePreSignedImage}
+                  alt={badge.name}
+                  style={containerStyle}
+                />
+              )}
+            </Grid>
+          </Grid>
+        </StyledContainer>
+      </div>
+    </div>
+  );
+};
+
+export default BadgeDetailsForm;