Repository: SkappHQ/skapp-fe
Pull request #318: Fix/588, 425: Custom Allocation Modal People Search UI Issue And Leave Dashboard Skeleton Overflow Issue
Author: login: shakyaatrootcode
Created: 2025-03-17T06:18:49Z | Merged: 2025-03-20T04:35:10Z

## I have read the [CONTRIBUTING.md](https://github.com/skappHQ/skapp-fe/blob/main/CONTRIBUTING.md) file - YES/NO

## PR checklist

### Issue ID: [#588](https://github.com/SkappHQ/skapp-fe/issues/588)
### Issue ID: [#425](https://github.com/SkappHQ/skapp-fe/issues/425)

### Summary
-

### How to test
1.

### Project Checklist

Please add an `x` to mark the checkbox:

- [ ] Changes build without any errors
- [ ] Have written adequate test cases
- [ ] Done developer testing in
  - [ ] Chrome
  - [ ] Firefox
  - [ ] Safari
- [ ] Code is formatted with `npm run format`
- [ ] Code is checked for lint issues with `npm run check-lint` and issues are fixed with `npm run lint-fix`
- [ ] No unnecessary comments left in the code
- [ ] User-displaying text is added as translations
- [ ] Made corresponding changes to the documentation

#### Other

- [ ] New atomic components added
- [ ] New molecules added
- [ ] New pages(routes) added
- [ ] New dependencies installed

### PR Checklist

- [ ] Pull request is created to the correct base branch
- [ ] Pull request is created with the correct branch name
- [ ] Pull request is created with a meaningful title
- [ ] Pull request is self reviewed
- [ ] Suitable pull request status labels are added (`ready-for-code-review` & `waiting-for-developer-testing`)

### Additional Information



Diff:
diff --git a/pages/api/enterprise b/pages/api/enterprise
index f9bbe0bc5..8829fe83a 160000
--- a/pages/api/enterprise
+++ b/pages/api/enterprise
@@ -1 +1 @@
-Subproject commit f9bbe0bc5e0b6deaf6dc289d9aa92749cc23580e
+Subproject commit 8829fe83a4623586af87d60791863766fc9e7ebd
diff --git a/pages/enterprise b/pages/enterprise
index 613a637a0..6562c5b37 160000
--- a/pages/enterprise
+++ b/pages/enterprise
@@ -1 +1 @@
-Subproject commit 613a637a00b9c2572d42a9763a996438024c00cd
+Subproject commit 6562c5b375bdf1a676af73289157ee2cbba75ec1
diff --git a/src/community/common/components/molecules/PeopleSearch/PeopleSearch.tsx b/src/community/common/components/molecules/PeopleSearch/PeopleSearch.tsx
index 691249b0c..506e3b645 100644
--- a/src/community/common/components/molecules/PeopleSearch/PeopleSearch.tsx
+++ b/src/community/common/components/molecules/PeopleSearch/PeopleSearch.tsx
@@ -2,6 +2,7 @@ import {
   Box,
   InputBase,
   Paper,
+  Stack,
   type SxProps,
   Typography
 } from "@mui/material/";
@@ -23,9 +24,14 @@ import Popper from "~community/common/components/molecules/Popper/Popper";
 import { numericPatternWithSpaces } from "~community/common/regex/regexPatterns";
 import { IconName } from "~community/common/types/IconTypes";
 import { MenuTypes } from "~community/common/types/MoleculeTypes";
-import { removeSpecialCharacters } from "~community/common/utils/commonUtil";
+import {
+  mergeSx,
+  removeSpecialCharacters
+} from "~community/common/utils/commonUtil";
 import { EmployeeType } from "~community/people/types/EmployeeTypes";
 
+import styles from "./styles";
+
 interface Props {
   id?: string;
   isPopperOpen: boolean;
@@ -90,8 +96,27 @@ const PeopleSearch: FC<Props> = ({
   setIsPopperOpen
 }) => {
   const theme: Theme = useTheme();
+  const classes = styles(theme);
+
   const ref = useRef<HTMLHeadingElement | null>(null);
-  const [isUserSelected, setIsUserSelected] = useState(false);
+
+  const [isUserSelected, setIsUserSelected] = useState<boolean>(false);
+  const [width, setWidth] = useState<number>(0);
+
+  useEffect(() => {
+    const updateWidth = () => {
+      if (ref.current) {
+        setWidth(ref.current.clientWidth);
+      }
+    };
+
+    updateWidth();
+    window.addEventListener("resize", updateWidth);
+
+    return () => {
+      window.removeEventListener("resize", updateWidth);
+    };
+  }, []);
 
   useEffect(() => {
     if (value && !isDisabled && !isUserSelected) {
@@ -128,115 +153,98 @@ const PeopleSearch: FC<Props> = ({
     }
   };
 
+  const handleFocus = () => {
+    if (onFocus) onFocus();
+    setIsUserSelected(false);
+  };
+
   return (
-    <Box sx={{ my: "1.2rem", ...componentStyles }}>
+    <Stack sx={mergeSx([classes.wrapper, componentStyles])}>
       {label && (
         <Typography
           variant="h5"
           gutterBottom
           sx={{
-            fontWeight: "500",
-            fontSize: "1rem",
             color: (theme) =>
               error
                 ? theme.palette.error.contrastText
                 : isDisabled
                   ? theme.palette.text.disabled
                   : theme.palette.common.black,
-            mb: "0.625rem",
+            ...classes.label,
             ...labelStyles
           }}
         >
-          {label} {required && <span style={{ color: "red" }}>*</span>}
+          {label} {required && <span style={classes.asterisk}>*</span>}
         </Typography>
       )}
       <Box ref={ref}>
-        <Box>
-          <Paper
-            component="div"
-            elevation={0}
+        <Paper
+          component="div"
+          elevation={0}
+          sx={{
+            background: error
+              ? theme.palette.error.light
+              : theme.palette.grey[100],
+            border: error
+              ? `0.0625rem solid ${theme.palette.error.contrastText}`
+              : "",
+            ...classes.paper,
+            ...searchBoxStyles
+          }}
+        >
+          <InputBase
+            id={id ?? "search-input"}
             sx={{
-              p: "0.5rem 0.9375rem",
-              display: "flex",
-              alignItems: "center",
-              background: error
-                ? theme.palette.error.light
-                : theme.palette.grey[100],
-              borderRadius: "0.5rem",
-              border: error
-                ? `0.0625rem solid ${theme.palette.error.contrastText}`
-                : "",
-              ...searchBoxStyles
+              ...classes.inputBase,
+              ...inputStyles
             }}
-          >
-            <InputBase
-              id={id ?? "search-input"}
-              sx={{
-                flex: 1,
-                "& input::placeholder": {
-                  fontSize: "1rem"
-                },
-                ...inputStyles
-              }}
-              placeholder={placeHolder}
-              fullWidth={isFullWidth}
-              onChange={handleInputChange}
-              value={value}
-              disabled={isDisabled}
-              autoFocus={isAutoFocus}
-              onBlur={onBlur}
-              onFocus={() => {
-                if (onFocus) onFocus();
-                setIsUserSelected(false);
-              }}
-              name={inputName}
-            />
-            {needSearchIcon && <Icon name={IconName.SEARCH_ICON} />}
-          </Paper>
-          {!!error && (
-            <Typography
-              variant="body2"
-              sx={{
-                color: theme.palette.error.contrastText,
-                fontSize: "0.875rem",
-                mt: "0.5rem",
-                lineHeight: "1rem"
-              }}
-            >
-              {error}
-            </Typography>
-          )}
-        </Box>
+            placeholder={placeHolder}
+            fullWidth={isFullWidth}
+            onChange={handleInputChange}
+            value={value}
+            disabled={isDisabled}
+            autoFocus={isAutoFocus}
+            onBlur={onBlur}
+            onFocus={handleFocus}
+            name={inputName}
+          />
+          {needSearchIcon && <Icon name={IconName.SEARCH_ICON} />}
+        </Paper>
+        {!!error && (
+          <Typography variant="body2" sx={classes.error}>
+            {error}
+          </Typography>
+        )}
       </Box>
       {(ref.current || parentRef) && !isDisabled && (
         <Popper
           open={isPopperOpen}
+          anchorElWidth={width}
           anchorEl={parentRef ? parentRef.current : ref.current}
           position={"bottom-start"}
           menuType={MenuTypes.SEARCH}
           isManager={true}
           handleClose={() => setIsPopperOpen?.(false)}
           id={"suggestionPopper"}
-          containerStyles={{ width: "100%", ...popperStyles }}
+          containerStyles={{ width: "inherit", ...popperStyles }}
         >
           <Box
-            sx={{
-              backgroundColor:
-                suggestions?.length === 0
-                  ? theme.palette.common.white
-                  : theme.palette.grey[100],
-              borderRadius: "0.75rem",
-              maxHeight: "11.25rem",
-              overflowY: "auto",
-              overflowX: "hidden",
-              width: "100%",
-              ...suggestionBoxStyles
-            }}
+            sx={mergeSx([
+              classes.suggestionBox,
+              {
+                backgroundColor:
+                  suggestions?.length === 0
+                    ? theme.palette.common.white
+                    : theme.palette.grey[100]
+              },
+              suggestionBoxStyles
+            ])}
           >
             {suggestions?.length === 0 && !error && (
               <Box
                 sx={{
-                  p: "1.25rem",
+                  ...classes.noSearchResultText,
                   ...noSearchResultTextStyles
                 }}
               >
@@ -256,17 +264,7 @@ const PeopleSearch: FC<Props> = ({
                   return (
                     <Box
                       key={user.employeeId}
-                      sx={{
-                        display: "flex",
-                        flexDirection: "row",
-                        justifyContent: "space-between",
-                        py: "0.5rem",
-                        "&:hover": {
-                          cursor: "pointer",
-                          borderRadius: "0.75rem"
-                        },
-                        ...suggestionStyles
-                      }}
+                      sx={mergeSx([classes.suggestion, suggestionStyles])}
                       onClick={() => handleSelectMember(user)}
                     >
                       <Box width="100%">
@@ -274,10 +272,7 @@ const PeopleSearch: FC<Props> = ({
                           firstName={user?.firstName}
                           lastName={user?.lastName}
                           avatarUrl={user?.avatarUrl}
-                          chipStyles={{
-                            cursor: "pointer",
-                            maxWidth: "fit-content"
-                          }}
+                          chipStyles={classes.chip}
                         />
                       </Box>
                     </Box>
@@ -287,7 +282,7 @@ const PeopleSearch: FC<Props> = ({
           </Box>
         </Popper>
       )}
-    </Box>
+    </Stack>
   );
 };
 
diff --git a/src/community/common/components/molecules/PeopleSearch/styles.ts b/src/community/common/components/molecules/PeopleSearch/styles.ts
index bcbfd8db5..652f67ed2 100644
--- a/src/community/common/components/molecules/PeopleSearch/styles.ts
+++ b/src/community/common/components/molecules/PeopleSearch/styles.ts
@@ -1,16 +1,21 @@
 import { Theme } from "@mui/material";
 
 const styles = (theme: Theme) => ({
+  wrapper: {
+    width: "100%"
+  },
   label: {
-    fontWeight: 500,
-    color: theme.palette.common.black,
-    mb: "0.5rem"
+    fontWeight: "500",
+    fontSize: "1rem",
+    mb: "0.625rem"
+  },
+  asterisk: {
+    color: theme.palette.error.contrastText
   },
   paper: {
     p: "0.5rem 0.9375rem",
     display: "flex",
     alignItems: "center",
-    background: theme.palette.grey[100],
     borderRadius: "0.5rem"
   },
   inputBase: {
@@ -18,6 +23,34 @@ const styles = (theme: Theme) => ({
     "& input::placeholder": {
       fontSize: "1rem"
     }
+  },
+  error: {
+    color: theme.palette.error.contrastText,
+    mt: "0.5rem"
+  },
+  suggestionBox: {
+    borderRadius: "0.75rem",
+    maxHeight: "11.25rem",
+    overflowY: "auto",
+    overflowX: "hidden",
+    width: "100%"
+  },
+  noSearchResultText: {
+    p: "1.25rem"
+  },
+  suggestion: {
+    display: "flex",
+    flexDirection: "row",
+    justifyContent: "space-between",
+    py: "0.5rem",
+    "&:hover": {
+      cursor: "pointer",
+      borderRadius: "0.75rem"
+    }
+  },
+  chip: {
+    cursor: "pointer",
+    maxWidth: "fit-content"
   }
 });
 
diff --git a/src/community/common/components/molecules/Popper/Popper.tsx b/src/community/common/components/molecules/Popper/Popper.tsx
index 97deb99bc..306a2d7e7 100644
--- a/src/community/common/components/molecules/Popper/Popper.tsx
+++ b/src/community/common/components/molecules/Popper/Popper.tsx
@@ -16,6 +16,7 @@ import styles from "./styles";
 
 type Props = {
   anchorEl: null | HTMLElement;
+  anchorElWidth?: number;
   handleClose?: (e: MouseEvent | TouchEvent) => void;
   position: PopperAndTooltipPositionTypes;
   menuType?: MenuTypes;
@@ -34,6 +35,7 @@ type Props = {
 
 const Popper = ({
   anchorEl,
+  anchorElWidth,
   handleClose = () => {},
   position,
   menuType,
@@ -52,13 +54,13 @@ const Popper = ({
   const classes = styles();
 
   const wrapperWidth = useMemo(() => {
-    switch (menuType) {
-      case MenuTypes.SEARCH:
-        return anchorEl ? `${anchorEl.clientWidth}px` : "auto";
-      default:
-        return undefined;
+    if (menuType === MenuTypes.SEARCH) {
+      if (anchorElWidth) return `${anchorElWidth}px`;
+      if (anchorEl) return `${anchorEl.clientWidth}px`;
+      return "auto";
     }
-  }, [menuType, anchorEl]);
+    return undefined;
+  }, [menuType, anchorElWidth, anchorEl]);
 
   const marginY = useMemo(() => {
     switch (menuType) {
diff --git a/src/community/common/utils/dateTimeUtils.ts b/src/community/common/utils/dateTimeUtils.ts
index 3c37650a5..a85b97116 100644
--- a/src/community/common/utils/dateTimeUtils.ts
+++ b/src/community/common/utils/dateTimeUtils.ts
@@ -581,3 +581,14 @@ const getDaySuffix = (day: number): string => {
       return "th";
   }
 };
+export const getAllMonthsAsString = (
+  format: "short" | "long" = "short",
+  language: string = "en"
+): string[] => {
+  const months = [];
+  for (let i = 1; i <= 12; i++) {
+    const dateTime = DateTime.fromObject({ month: i }).setLocale(language);
+    months.push(dateTime.toFormat(format === "short" ? "LLL" : "MMMM"));
+  }
+  return months;
+};
diff --git a/src/community/leave/components/molecules/AvailabilityCalendar/AvailabilityCalendarCard.tsx b/src/community/leave/components/molecules/AvailabilityCalendar/AvailabilityCalendarCard.tsx
index ccc3fdd00..51aa46723 100644
--- a/src/community/leave/components/molecules/AvailabilityCalendar/AvailabilityCalendarCard.tsx
+++ b/src/community/leave/components/molecules/AvailabilityCalendar/AvailabilityCalendarCard.tsx
@@ -25,7 +25,7 @@ interface AvailabilityCalendarCardProps {
   actualDate: string;
 }
 
-export const AvailabilityCalendarCard = ({
+const AvailabilityCalendarCard = ({
   day,
   dateAndMonth,
   holidays,
diff --git a/src/community/leave/components/molecules/AvailabilityCalendar/AvailabilityCalendarWidget.tsx b/src/community/leave/components/molecules/AvailabilityCalendar/AvailabilityCalendarWidget.tsx
index 3f420b35f..159c9aa51 100644
--- a/src/community/leave/components/molecules/AvailabilityCalendar/AvailabilityCalendarWidget.tsx
+++ b/src/community/leave/components/molecules/AvailabilityCalendar/AvailabilityCalendarWidget.tsx
@@ -28,7 +28,7 @@ interface AvailabilityCalendarWidgetProps {
   teams: string | number;
 }
 
-export const AvailabilityCalendarWidget = ({
+const AvailabilityCalendarWidget = ({
   teams
 }: AvailabilityCalendarWidgetProps): JSX.Element => {
   const { data: timeConfigData } = useDefaultCapacity();
diff --git a/src/community/leave/components/molecules/CustomLeaveAllocationForm/CustomLeaveAllocationForm.tsx b/src/community/leave/components/molecules/CustomLeaveAllocationForm/CustomLeaveAllocationForm.tsx
index 2627498aa..9c2347c8e 100644
--- a/src/community/leave/components/molecules/CustomLeaveAllocationForm/CustomLeaveAllocationForm.tsx
+++ b/src/community/leave/components/molecules/CustomLeaveAllocationForm/CustomLeaveAllocationForm.tsx
@@ -287,7 +287,7 @@ const CustomLeaveAllocationForm: React.FC<Props> = ({
         setIsPopperOpen={setIsPopperOpen}
         isPopperOpen={isPopperOpen}
         labelStyles={{ mb: "0.25rem" }}
-        componentStyles={{ my: 2 }}
+        componentStyles={{ mb: 2 }}
         onChange={(e) => setSearchTerm(e.target.value)}
         value={searchTerm}
         error={
diff --git a/src/community/leave/components/molecules/LeaveUtilizationGraph/LeaveTypeBreakdownChart.tsx b/src/community/leave/components/molecules/LeaveUtilizationGraph/LeaveTypeBreakdownChart.tsx
index 6ca4f0760..a222be2ae 100644
--- a/src/community/leave/components/molecules/LeaveUtilizationGraph/LeaveTypeBreakdownChart.tsx
+++ b/src/community/leave/components/molecules/LeaveUtilizationGraph/LeaveTypeBreakdownChart.tsx
@@ -13,7 +13,8 @@ import { LeaveTypeBreakDownReturnTypes } from "~community/leave/types/LeaveUtili
 import { useLeaveUtilizationChartOptions } from "~community/leave/utils/eChartOptions/leaveUtilizationChartOptions";
 
 import LeaveTypeBreakdownButtons from "./LeaveTypeBreakdownButtons";
-import LeaveTypeBreakdownSkeleton from "./LeaveTypeBreakdownSkeleton";
+import LeaveTypeBreakdownSkeleton from "./Skeletons/LeaveTypeBreakdownSkeleton/LeaveTypeBreakdownSkeleton";
+import styles from "./styles";
 
 interface Props {
   isLoading: boolean;
@@ -25,9 +26,10 @@ const LeaveTypeBreakdownChart = ({
   error,
   datasets
 }: Props): JSX.Element => {
-  const chartRef = useRef();
+  const chartRef = useRef<ReactECharts>(null);
 
   const theme: Theme = useTheme();
+  const classes = styles(theme);
 
   const translateTexts = useTranslator("leaveModule", "dashboard");
 
@@ -64,30 +66,9 @@ const LeaveTypeBreakdownChart = ({
   return (
     <>
       {!isLoading ? (
-        <Stack
-          sx={{
-            backgroundColor: theme.palette.grey[100],
-            borderRadius: ".75rem",
-            display: "flex",
-            flexDirection: "column",
-            padding: ".9375rem 1.5rem",
-            minHeight: "18.6875rem"
-          }}
-        >
-          <Stack
-            sx={{
-              height: "100%",
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "space-between"
-            }}
-          >
-            <Stack
-              direction={"row"}
-              sx={{
-                justifyContent: "space-between"
-              }}
-            >
+        <Stack sx={classes.container}>
+          <Stack sx={classes.innerContainer}>
+            <Stack sx={classes.header}>
               <Typography variant="h4">
                 {translateTexts(["leaveUtilization"])}
               </Typography>
@@ -102,25 +83,9 @@ const LeaveTypeBreakdownChart = ({
               />
             </Stack>
             {isLoading || toggle === undefined ? (
-              <Box
-                sx={{
-                  display: "flex",
-                  justifyContent: "center",
-                  alignItems: "center",
-                  height: "100%",
-                  width: "100%"
-                }}
-              />
+              <Box sx={classes.loadingPlaceholder} />
             ) : error ? (
-              <Box
-                sx={{
-                  display: "flex",
-                  justifyContent: "center",
-                  alignItems: "center",
-                  height: "100%",
-                  width: "100%"
-                }}
-              >
+              <Box sx={classes.errorContainer}>
                 <Typography>
                   {translateTexts(["somethingWentWrong"])}
                 </Typography>
diff --git a/src/community/leave/components/molecules/LeaveUtilizationGraph/LeaveTypeBreakdownSkeleton.tsx b/src/community/leave/components/molecules/LeaveUtilizationGraph/LeaveTypeBreakdownSkeleton.tsx
deleted file mode 100644
index 347024b64..000000000
--- a/src/community/leave/components/molecules/LeaveUtilizationGraph/LeaveTypeBreakdownSkeleton.tsx
+++ /dev/null
@@ -1,214 +0,0 @@
-import { ArrowBackIos, ArrowForwardIos } from "@mui/icons-material";
-import { Skeleton, Theme, Typography, useTheme } from "@mui/material";
-import { Box, Stack, type SxProps } from "@mui/system";
-import { JSX } from "react";
-
-interface Props {
-  styles?: SxProps;
-}
-
-const LeaveTypeBreakdownSkeleton = ({ styles }: Props): JSX.Element => {
-  const theme: Theme = useTheme();
-  const MonthSelector = () => {
-    return (
-      <Box
-        display="flex"
-        justifyContent="space-between"
-        alignItems="center"
-        width={"100%"}
-        px={"10px"}
-        pt={"5px"}
-      >
-        <ArrowBackIos
-          sx={{ color: theme.palette.grey[200], fontSize: "15px" }}
-        />
-        <Box
-          display="flex"
-          justifyContent="space-between"
-          alignItems="center"
-          width={"100%"}
-          px={"15px"}
-        >
-          {["Jan", "Feb", "March", "April", "May", "June", "July"].map(
-            (month, index) => (
-              <Typography
-                key={index}
-                component="span"
-                sx={{ color: theme.palette.grey[200], fontSize: "15px" }}
-              >
-                {month}
-              </Typography>
-            )
-          )}
-        </Box>
-        <ArrowForwardIos
-          sx={{ color: theme.palette.grey[200], fontSize: "15px" }}
-        />
-      </Box>
-    );
-  };
-
-  const BarChartSkeleton = () => {
-    return (
-      <Stack
-        display={"flex"}
-        direction={"column"}
-        height={"180px"}
-        width={"100%"}
-        mx="auto"
-      >
-        <Box position="relative" height={"150px"} width={"100%"} mx="auto">
-          {[...Array(7)].map((_, index) => (
-            <Box
-              key={index}
-              position="absolute"
-              left={0}
-              right={0}
-              height="1px"
-              bgcolor={theme.palette.grey[200]}
-              style={{ bottom: `${(index / 6.5) * 100}%` }}
-            />
-          ))}
-          <Box
-            display="flex"
-            justifyContent="space-around"
-            height="100%"
-            alignItems="flex-end"
-          >
-            {[...Array(12)].map((_, groupIndex) => (
-              <Box
-                display="flex"
-                key={groupIndex}
-                flexDirection="row"
-                justifyContent="space-between"
-                width="92px"
-                alignItems="flex-end"
-                gap="4px"
-              >
-                <Skeleton
-                  variant="rectangular"
-                  width="40px"
-                  height="148px"
-                  animation="wave"
-                  sx={{
-                    borderRadius: "8px 8px 0 0",
-                    backgroundColor: theme.palette.grey[200]
-                  }}
-                />
-              </Box>
-            ))}
-          </Box>
-        </Box>
-        <MonthSelector />
-      </Stack>
-    );
-  };
-
-  return (
-    <Box
-      sx={{
-        backgroundColor: theme.palette.grey[100],
-        width: "100%",
-        height: "265px",
-        borderRadius: "12px",
-        pt: "12px",
-        pr: "24px",
-        pb: "12px",
-        pl: "24px",
-        gap: "12px",
-        ...styles
-      }}
-    >
-      <Stack
-        display={"flex"}
-        direction={"row"}
-        justifyContent={"space-between"}
-        alignItems={"center"}
-      >
-        <Skeleton
-          variant="rounded"
-          height="23px"
-          sx={{
-            borderRadius: "12px",
-            backgroundColor: theme.palette.grey[200]
-          }}
-          width="118px"
-          animation={"wave"}
-        />
-        <Stack
-          height="32px"
-          sx={{
-            borderRadius: "12px",
-            backgroundColor: theme.palette.grey[200]
-          }}
-          direction={"row"}
-          width="288px"
-          justifyContent={"space-evenly"}
-          alignItems={"center"}
-        >
-          <Skeleton
-            variant="rounded"
-            height="24px"
-            sx={{
-              borderRadius: "12px",
-              backgroundColor: theme.palette.grey[100]
-            }}
-            width="75px"
-            animation={"wave"}
-          />
-          <Skeleton
-            variant="rounded"
-            height="24px"
-            sx={{
-              borderRadius: "12px",
-              backgroundColor: theme.palette.grey[100]
-            }}
-            width="75px"
-            animation={"wave"}
-          />
-          <Skeleton
-            variant="rounded"
-            height="24px"
-            sx={{
-              borderRadius: "12px",
-              backgroundColor: theme.palette.grey[100]
-            }}
-            width="56px"
-            animation={"wave"}
-          />
-          <Skeleton
-            variant="rounded"
-            height="24px"
-            sx={{
-              borderRadius: "12px",
-              backgroundColor: theme.palette.grey[100]
-            }}
-            width="56px"
-            animation={"wave"}
-          />
-        </Stack>
-      </Stack>
-      <Stack
-        direction={"row"}
-        gap={"4px"}
-        sx={{ ml: "5px", mt: "30px" }}
-        justifyContent={"space-between"}
-      >
-        <Skeleton
-          variant="rounded"
-          height="170px"
-          sx={{
-            borderRadius: "6px",
-            backgroundColor: theme.palette.grey[200],
-            mr: "5px"
-          }}
-          width="6px"
-          animation={"wave"}
-        />
-        <BarChartSkeleton />
-      </Stack>
-    </Box>
-  );
-};
-
-export default LeaveTypeBreakdownSkeleton;
diff --git a/src/community/leave/components/molecules/LeaveUtilizationGraph/Skeletons/LeaveTypeBreakdownBarChartSkeleton/LeaveTypeBreakdownBarChartSkeleton.tsx b/src/community/leave/components/molecules/LeaveUtilizationGraph/Skeletons/LeaveTypeBreakdownBarChartSkeleton/LeaveTypeBreakdownBarChartSkeleton.tsx
new file mode 100644
index 000000000..3912315f8
--- /dev/null
+++ b/src/community/leave/components/molecules/LeaveUtilizationGraph/Skeletons/LeaveTypeBreakdownBarChartSkeleton/LeaveTypeBreakdownBarChartSkeleton.tsx
@@ -0,0 +1,37 @@
+import { Skeleton, Theme, useTheme } from "@mui/material";
+import { Box, Stack } from "@mui/system";
+
+import LeaveTypeBreakdownMonthSelectorSkeleton from "~community/leave/components/molecules/LeaveUtilizationGraph/Skeletons/LeaveTypeBreakdownMonthSelectorSkeleton/LeaveTypeBreakdownMonthSelectorSkeleton";
+
+import styles from "./styles";
+
+const LeaveTypeBreakdownBarChartSkeleton = () => {
+  const theme: Theme = useTheme();
+  const classes = styles(theme);
+
+  return (
+    <Stack sx={classes.container}>
+      <Stack sx={classes.chartWrapper}>
+        {[...Array(7)].map((value, index) => (
+          <Box
+            key={value}
+            sx={{ ...classes.gridLine, bottom: `${(index / 6.5) * 100}%` }}
+          />
+        ))}
+        <Stack sx={classes.barContainer}>
+          {[...Array(12)].map((value) => (
+            <Skeleton
+              key={value}
+              variant="rectangular"
+              sx={classes.barSkeleton}
+              animation="wave"
+            />
+          ))}
+        </Stack>
+      </Stack>
+      <LeaveTypeBreakdownMonthSelectorSkeleton />
+    </Stack>
+  );
+};
+
+export default LeaveTypeBreakdownBarChartSkeleton;
diff --git a/src/community/leave/components/molecules/LeaveUtilizationGraph/Skeletons/LeaveTypeBreakdownBarChartSkeleton/styles.ts b/src/community/leave/components/molecules/LeaveUtilizationGraph/Skeletons/LeaveTypeBreakdownBarChartSkeleton/styles.ts
new file mode 100644
index 000000000..a4ba83b80
--- /dev/null
+++ b/src/community/leave/components/molecules/LeaveUtilizationGraph/Skeletons/LeaveTypeBreakdownBarChartSkeleton/styles.ts
@@ -0,0 +1,40 @@
+import { Theme } from "@mui/material";
+
+import { StyleProps } from "~community/common/types/CommonTypes";
+
+const styles = (theme: Theme): StyleProps => ({
+  container: {
+    flexDirection: "column",
+    height: "11.25rem",
+    width: "100%"
+  },
+  chartWrapper: {
+    position: "relative",
+    height: "9.375rem",
+    width: "100%"
+  },
+  gridLine: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    height: "0.0625rem",
+    backgroundColor: theme.palette.grey[200]
+  },
+  barContainer: {
+    flexDirection: "row",
+    justifyContent: "space-around",
+    alignItems: "flex-end",
+    height: "100%"
+  },
+
+  barSkeleton: {
+    borderRadius: "0.5rem 0.5rem 0 0",
+    backgroundColor: theme.palette.grey[200],
+    minWidth: "1.875rem",
+    width: "max-content",
+    maxWidth: "2.5rem",
+    height: "9.25rem"
+  }
+});
+
+export default styles;
diff --git a/src/community/leave/components/molecules/LeaveUtilizationGraph/Skeletons/LeaveTypeBreakdownMonthSelectorSkeleton/LeaveTypeBreakdownMonthSelectorSkeleton.tsx b/src/community/leave/components/molecules/LeaveUtilizationGraph/Skeletons/LeaveTypeBreakdownMonthSelectorSkeleton/LeaveTypeBreakdownMonthSelectorSkeleton.tsx
new file mode 100644
index 000000000..bb70c2af0
--- /dev/null
+++ b/src/community/leave/components/molecules/LeaveUtilizationGraph/Skeletons/LeaveTypeBreakdownMonthSelectorSkeleton/LeaveTypeBreakdownMonthSelectorSkeleton.tsx
@@ -0,0 +1,28 @@
+import { ArrowBackIos, ArrowForwardIos } from "@mui/icons-material";
+import { Theme, Typography, useTheme } from "@mui/material";
+import { Stack } from "@mui/system";
+
+import { getAllMonthsAsString } from "~community/common/utils/dateTimeUtils";
+
+import styles from "./styles";
+
+const LeaveTypeBreakdownMonthSelectorSkeleton = () => {
+  const theme: Theme = useTheme();
+  const classes = styles(theme);
+
+  return (
+    <Stack sx={classes.monthSelectorContainer}>
+      <ArrowBackIos sx={classes.iconText} />
+      <Stack sx={classes.monthList}>
+        {getAllMonthsAsString().map((month) => (
+          <Typography key={month} component="span" sx={classes.iconText}>
+            {month}
+          </Typography>
+        ))}
+      </Stack>
+      <ArrowForwardIos sx={classes.iconText} />
+    </Stack>
+  );
+};
+
+export default LeaveTypeBreakdownMonthSelectorSkeleton;
diff --git a/src/community/leave/components/molecules/LeaveUtilizationGraph/Skeletons/LeaveTypeBreakdownMonthSelectorSkeleton/styles.ts b/src/community/leave/components/molecules/LeaveUtilizationGraph/Skeletons/LeaveTypeBreakdownMonthSelectorSkeleton/styles.ts
new file mode 100644
index 000000000..de818d07f
--- /dev/null
+++ b/src/community/leave/components/molecules/LeaveUtilizationGraph/Skeletons/LeaveTypeBreakdownMonthSelectorSkeleton/styles.ts
@@ -0,0 +1,28 @@
+import { Theme } from "@mui/material";
+
+import { StyleProps } from "~community/common/types/CommonTypes";
+
+const styles = (theme: Theme): StyleProps => ({
+  monthSelectorContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%",
+    px: "0.625rem",
+    pt: "0.3125rem"
+  },
+  iconText: {
+    color: theme.palette.grey[200],
+    fontSize: "0.625rem",
+    fontWeight: 300
+  },
+  monthList: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    width: "100%",
+    px: "0.9375rem"
+  }
+});
+
+export default styles;
diff --git a/src/community/leave/components/molecules/LeaveUtilizationGraph/Skeletons/LeaveTypeBreakdownSkeleton/LeaveTypeBreakdownSkeleton.tsx b/src/community/leave/components/molecules/LeaveUtilizationGraph/Skeletons/LeaveTypeBreakdownSkeleton/LeaveTypeBreakdownSkeleton.tsx
new file mode 100644
index 000000000..5f3e291f4
--- /dev/null
+++ b/src/community/leave/components/molecules/LeaveUtilizationGraph/Skeletons/LeaveTypeBreakdownSkeleton/LeaveTypeBreakdownSkeleton.tsx
@@ -0,0 +1,31 @@
+import { Skeleton, Theme, useTheme } from "@mui/material";
+import { Stack } from "@mui/system";
+import { JSX } from "react";
+
+import LeaveTypeBreakdownBarChartSkeleton from "~community/leave/components/molecules/LeaveUtilizationGraph/Skeletons/LeaveTypeBreakdownBarChartSkeleton/LeaveTypeBreakdownBarChartSkeleton";
+
+import styles from "./styles";
+
+const LeaveTypeBreakdownSkeleton = (): JSX.Element => {
+  const theme: Theme = useTheme();
+  const classes = styles(theme);
+
+  return (
+    <Stack sx={classes.container}>
+      <Stack sx={classes.headerStack}>
+        <Skeleton sx={classes.titleSkeleton} animation={"wave"} />
+        <Stack sx={classes.buttonGroup}>
+          <Skeleton sx={classes.buttonSkeleton} animation={"wave"} />
+          <Skeleton sx={classes.buttonSkeleton} animation={"wave"} />
+          <Skeleton sx={classes.buttonSkeleton} animation={"wave"} />
+        </Stack>
+      </Stack>
+      <Stack sx={classes.chartContainer}>
+        <Skeleton component="div" sx={classes.barSkeleton} animation={"wave"} />
+        <LeaveTypeBreakdownBarChartSkeleton />
+      </Stack>
+    </Stack>
+  );
+};
+
+export default LeaveTypeBreakdownSkeleton;
diff --git a/src/community/leave/components/molecules/LeaveUtilizationGraph/Skeletons/LeaveTypeBreakdownSkeleton/styles.ts b/src/community/leave/components/molecules/LeaveUtilizationGraph/Skeletons/LeaveTypeBreakdownSkeleton/styles.ts
new file mode 100644
index 000000000..c88fb2e8f
--- /dev/null
+++ b/src/community/leave/components/molecules/LeaveUtilizationGraph/Skeletons/LeaveTypeBreakdownSkeleton/styles.ts
@@ -0,0 +1,57 @@
+import { Theme } from "@mui/material";
+
+import { StyleProps } from "~community/common/types/CommonTypes";
+
+const styles = (theme: Theme): StyleProps => ({
+  container: {
+    width: "100%",
+    backgroundColor: theme.palette.grey[100],
+    height: "16.5625rem",
+    borderRadius: "0.75rem",
+    padding: "0.75rem 1.5rem",
+    gap: "2.625rem"
+  },
+  headerStack: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
+  },
+  titleSkeleton: {
+    borderRadius: "0.75rem",
+    backgroundColor: theme.palette.grey[200],
+    width: "7.375rem",
+    height: "2rem"
+  },
+  buttonGroup: {
+    flexDirection: "row",
+    justifyContent: "space-evenly",
+    alignItems: "center",
+    maxWidth: "18rem",
+    height: "2rem",
+    boxSizing: "border-box",
+    padding: "0rem 0.625rem",
+    gap: "0.625rem",
+    borderRadius: "0.75rem",
+    backgroundColor: theme.palette.grey[200]
+  },
+  buttonSkeleton: {
+    borderRadius: "0.75rem",
+    backgroundColor: theme.palette.grey[100],
+    width: "4.6875rem",
+    height: "1.5rem"
+  },
+  chartContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    gap: "0.625rem",
+    height: "100%"
+  },
+  barSkeleton: {
+    borderRadius: "0.375rem",
+    backgroundColor: theme.palette.grey[200],
+    width: "0.375rem",
+    height: "10.625rem"
+  }
+});
+
+export default styles;
diff --git a/src/community/leave/components/molecules/LeaveUtilizationGraph/styles.ts b/src/community/leave/components/molecules/LeaveUtilizationGraph/styles.ts
new file mode 100644
index 000000000..f0fd884bf
--- /dev/null
+++ b/src/community/leave/components/molecules/LeaveUtilizationGraph/styles.ts
@@ -0,0 +1,40 @@
+import { Theme } from "@mui/material";
+
+import { StyleProps } from "~community/common/types/CommonTypes";
+
+const styles = (theme: Theme): StyleProps => ({
+  container: {
+    backgroundColor: theme.palette.grey[100],
+    borderRadius: ".75rem",
+    display: "flex",
+    flexDirection: "column",
+    padding: ".9375rem 1.5rem",
+    minHeight: "18.6875rem"
+  },
+  innerContainer: {
+    height: "100%",
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "space-between"
+  },
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between"
+  },
+  loadingPlaceholder: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    height: "100%",
+    width: "100%"
+  },
+  errorContainer: {
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    height: "100%",
+    width: "100%"
+  }
+});
+
+export default styles;
diff --git a/src/community/leave/components/organisms/LeaveDashboard/LeaveDashboard.tsx b/src/community/leave/components/organisms/LeaveDashboard/LeaveDashboard.tsx
index f82a60fbe..fef5558a7 100644
--- a/src/community/leave/components/organisms/LeaveDashboard/LeaveDashboard.tsx
+++ b/src/community/leave/components/organisms/LeaveDashboard/LeaveDashboard.tsx
@@ -18,13 +18,13 @@ import {
   useGetLeaveTypeBreakdownChartData,
   useGetPendingLeavesData
 } from "~community/leave/api/LeaveDashboard";
+import AvailabilityCalendarWidget from "~community/leave/components/molecules/AvailabilityCalendar/AvailabilityCalendarWidget";
+import AvailableChip from "~community/leave/components/molecules/LeaveDashboardChips/AvailableChip";
+import AwayChip from "~community/leave/components/molecules/LeaveDashboardChips/AwayChip";
+import HolidayChip from "~community/leave/components/molecules/LeaveDashboardChips/HolidayChip";
+import LeaveTypeBreakdownChart from "~community/leave/components/molecules/LeaveUtilizationGraph/LeaveTypeBreakdownChart";
 import { useLeaveStore } from "~community/leave/store/store";
 
-import AvailabilityCalendarWidget from "../../molecules/AvailabilityCalendar/AvailabilityCalendarWidget";
-import AvailableChip from "../../molecules/LeaveDashboardChips/AvailableChip";
-import AwayChip from "../../molecules/LeaveDashboardChips/AwayChip";
-import HolidayChip from "../../molecules/LeaveDashboardChips/HolidayChip";
-import LeaveTypeBreakdownChart from "../../molecules/LeaveUtilizationGraph/LeaveTypeBreakdownChart";
 import styles from "./styles";
 
 const LeaveDashboard = (): JSX.Element => {
@@ -39,7 +39,6 @@ const LeaveDashboard = (): JSX.Element => {
   const {
     viewedPendingLeaveCount,
     setViewedPendingLeaveCount,
-    pendingLeaveCount,
     setPendingLeaveCount
   } = useLeaveStore((state) => state);
 
@@ -117,122 +116,118 @@ const LeaveDashboard = (): JSX.Element => {
   };
 
   return (
-    <Box>
-      <Box sx={classes.container}>
-        <Box sx={classes.header}>
-          <Typography style={{ textTransform: "uppercase" }}>
-            {` ${translateText(["records"])} ${
-              teamId === -1 ? translateText(["all"]) : `${teamName}`
-            }`}
-          </Typography>
-          <TeamSelector
-            setTeamId={setTeamId}
-            setTeamName={setTeamName}
-            moduleAdminType={AdminTypes.LEAVE_ADMIN}
-          />
-        </Box>
-        <Grid container spacing={1}>
-          <Grid sx={{ width: { xs: "100%", md: "32.5%" } }}>
-            <AnalyticCard title={translateText(["todayAvailability"]) ?? ""}>
-              {todaysAvailability && resourceDetails()}
-            </AnalyticCard>
-          </Grid>
-          <Grid sx={{ width: { xs: "100%", md: "32.5%" } }}>
-            <AnalyticCard
-              title={translateText(["pendingLeaves"]) ?? ""}
-              isExpandable={
-                pendingLeaves?.[0]?.items?.length > 0 ? true : false
-              }
-              onExpand={() => {
-                setPendingLeaveCount(pendingLeaves?.[0]?.items?.length),
-                  setViewedPendingLeaveCount(pendingLeaves?.[0]?.items?.length),
-                  router.replace(ROUTES.LEAVE.LEAVE_PENDING);
-              }}
-            >
-              {pendingLeaves?.[0]?.items?.length > 0 ? (
-                <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
-                  <Typography sx={classes.analytic}>
-                    {pendingLeaves?.[0]?.items?.length}
-                  </Typography>
-                  {newPendingRequests > 0 && (
-                    <Stack
-                      sx={{
-                        flexDirection: "row",
-                        gap: 1,
-                        alignItems: "center",
-                        backgroundColor: theme.palette.amber.mid,
-                        padding: "0.25rem .75rem",
-                        borderRadius: 10,
-                        height: "2rem"
-                      }}
-                    >
-                      <Typography
-                        sx={{ color: theme.palette.amber.chipText }}
-                        variant="caption"
-                      >
-                        {`${newPendingRequests} ${translateText(["newRequest"])}`}
-                      </Typography>
-                    </Stack>
-                  )}
-                </div>
-              ) : (
-                <Typography sx={classes.analytic}>{"-"}</Typography>
-              )}
-            </AnalyticCard>
-          </Grid>
-
-          <Grid sx={{ width: { xs: "100%", md: "32.5%" } }}>
-            <AnalyticCard title={translateText(["absenceRate"]) ?? ""}>
-              {absenceRate?.[0] ? (
-                <div style={{ display: "flex", alignItems: "center" }}>
-                  <Typography sx={classes.analytic}>
-                    {`${String(absenceRate[0]?.currentAbsenceRate?.toFixed(1))} %`}
-                  </Typography>
-                  <Chip
-                    icon={
-                      <TrendingUp
-                        style={{
-                          color:
-                            absenceRate[0]?.monthBeforeAbsenceRate >= 0
-                              ? theme.palette.greens.midDark
-                              : theme.palette.error.contrastText
-                        }}
-                      />
-                    }
-                    label={`${absenceRate[0]?.monthBeforeAbsenceRate?.toFixed(
-                      0
-                    )}% ${translateText(["trend"])}`}
+    <Box sx={classes.container}>
+      <Box sx={classes.header}>
+        <Typography style={{ textTransform: "uppercase" }}>
+          {` ${translateText(["records"])} ${
+            teamId === -1 ? translateText(["all"]) : `${teamName}`
+          }`}
+        </Typography>
+        <TeamSelector
+          setTeamId={setTeamId}
+          setTeamName={setTeamName}
+          moduleAdminType={AdminTypes.LEAVE_ADMIN}
+        />
+      </Box>
+      <Grid container spacing={1}>
+        <Grid sx={{ width: { xs: "100%", md: "32.5%" } }}>
+          <AnalyticCard title={translateText(["todayAvailability"]) ?? ""}>
+            {todaysAvailability && resourceDetails()}
+          </AnalyticCard>
+        </Grid>
+        <Grid sx={{ width: { xs: "100%", md: "32.5%" } }}>
+          <AnalyticCard
+            title={translateText(["pendingLeaves"]) ?? ""}
+            isExpandable={pendingLeaves?.[0]?.items?.length > 0}
+            onExpand={() => {
+              setPendingLeaveCount(pendingLeaves?.[0]?.items?.length),
+                setViewedPendingLeaveCount(pendingLeaves?.[0]?.items?.length),
+                router.replace(ROUTES.LEAVE.LEAVE_PENDING);
+            }}
+          >
+            {pendingLeaves?.[0]?.items?.length > 0 ? (
+              <div style={{ display: "flex", alignItems: "center", gap: 5 }}>
+                <Typography sx={classes.analytic}>
+                  {pendingLeaves?.[0]?.items?.length}
+                </Typography>
+                {newPendingRequests > 0 && (
+                  <Stack
                     sx={{
-                      color:
-                        absenceRate[0]?.monthBeforeAbsenceRate >= 0
-                          ? theme.palette.greens.midDark
-                          : theme.palette.error.contrastText,
-                      backgroundColor:
-                        absenceRate[0]?.monthBeforeAbsenceRate >= 0
-                          ? theme.palette.greens.lightBackground
-                          : theme.palette.error.light,
-                      [theme.breakpoints.down("md")]: {
-                        fontSize: "0.625rem",
-                        lineHeight: "0.625rem"
-                      },
-                      ml: 1,
-                      fontSize: "0.75rem"
+                      flexDirection: "row",
+                      gap: 1,
+                      alignItems: "center",
+                      backgroundColor: theme.palette.amber.mid,
+                      padding: "0.25rem .75rem",
+                      borderRadius: 10,
+                      height: "2rem"
                     }}
-                  />
-                </div>
-              ) : (
-                <Typography sx={classes.analytic}>{"-"}</Typography>
-              )}
-            </AnalyticCard>
-          </Grid>
+                  >
+                    <Typography
+                      sx={{ color: theme.palette.amber.chipText }}
+                      variant="caption"
+                    >
+                      {`${newPendingRequests} ${translateText(["newRequest"])}`}
+                    </Typography>
+                  </Stack>
+                )}
+              </div>
+            ) : (
+              <Typography sx={classes.analytic}>{"-"}</Typography>
+            )}
+          </AnalyticCard>
         </Grid>
-        <AvailabilityCalendarWidget teams={teamId} />
-        <LeaveTypeBreakdownChart
-          datasets={datasets}
-          isLoading={isLoading}
-          error={error}
-        />
-      </Box>
+
+        <Grid sx={{ width: { xs: "100%", md: "32.5%" } }}>
+          <AnalyticCard title={translateText(["absenceRate"]) ?? ""}>
+            {absenceRate?.[0] ? (
+              <div style={{ display: "flex", alignItems: "center" }}>
+                <Typography sx={classes.analytic}>
+                  {`${String(absenceRate[0]?.currentAbsenceRate?.toFixed(1))} %`}
+                </Typography>
+                <Chip
+                  icon={
+                    <TrendingUp
+                      style={{
+                        color:
+                          absenceRate[0]?.monthBeforeAbsenceRate >= 0
+                            ? theme.palette.greens.midDark
+                            : theme.palette.error.contrastText
+                      }}
+                    />
+                  }
+                  label={`${absenceRate[0]?.monthBeforeAbsenceRate?.toFixed(
+                    0
+                  )}% ${translateText(["trend"])}`}
+                  sx={{
+                    color:
+                      absenceRate[0]?.monthBeforeAbsenceRate >= 0
+                        ? theme.palette.greens.midDark
+                        : theme.palette.error.contrastText,
+                    backgroundColor:
+                      absenceRate[0]?.monthBeforeAbsenceRate >= 0
+                        ? theme.palette.greens.lightBackground
+                        : theme.palette.error.light,
+                    [theme.breakpoints.down("md")]: {
+                      fontSize: "0.625rem",
+                      lineHeight: "0.625rem"
+                    },
+                    ml: 1,
+                    fontSize: "0.75rem"
+                  }}
+                />
+              </div>
+            ) : (
+              <Typography sx={classes.analytic}>{"-"}</Typography>
+            )}
+          </AnalyticCard>
+        </Grid>
+      </Grid>
+      <AvailabilityCalendarWidget teams={teamId} />
+      <LeaveTypeBreakdownChart
+        datasets={datasets}
+        isLoading={isLoading}
+        error={error}
+      />
     </Box>
   );
 };
diff --git a/src/community/leave/components/organisms/LeaveDashboard/ResourceAvailability.tsx b/src/community/leave/components/organisms/LeaveDashboard/ResourceAvailability.tsx
index c9e325941..d40c68da1 100644
--- a/src/community/leave/components/organisms/LeaveDashboard/ResourceAvailability.tsx
+++ b/src/community/leave/components/organisms/LeaveDashboard/ResourceAvailability.tsx
@@ -12,14 +12,14 @@ import { AdminTypes } from "~community/common/types/AuthTypes";
 import { getMonthName } from "~community/common/utils/dateTimeUtils";
 import { useDefaultCapacity } from "~community/configurations/api/timeConfigurationApi";
 import { useGetResourceAvailabilityCalendar } from "~community/leave/api/LeaveDashboard";
+import AvailabilityCalendarCard from "~community/leave/components/molecules/AvailabilityCalendar/AvailabilityCalendarCard";
+import AvailabilityWidgetSkeleton from "~community/leave/components/molecules/AvailabilityCalendar/AvailabilityWidgetSkeleton";
 import { ResourceAvailabilityRecord } from "~community/leave/types/ResourceAvailabilityTypes";
 import { getNavigateDays } from "~community/leave/utils/dashboardUtils";
 
-import AvailabilityCalendarCard from "../../molecules/AvailabilityCalendar/AvailabilityCalendarCard";
-import AvailabilityWidgetSkeleton from "../../molecules/AvailabilityCalendar/AvailabilityWidgetSkeleton";
-
-export const ResourceAvailabilityCalendar = (): JSX.Element => {
+const ResourceAvailabilityCalendar = (): JSX.Element => {
   const { data: timeConfigData } = useDefaultCapacity();
+
   let navigateDates = getNavigateDays(timeConfigData) * 2;
 
   const [month, setMonth] = useState<number>(DateTime.now().month);
diff --git a/src/community/leave/components/organisms/LeaveDashboard/styles.ts b/src/community/leave/components/organisms/LeaveDashboard/styles.ts
index 41958ae45..10f0f71f1 100644
--- a/src/community/leave/components/organisms/LeaveDashboard/styles.ts
+++ b/src/community/leave/components/organisms/LeaveDashboard/styles.ts
@@ -6,7 +6,8 @@ const styles = (theme: Theme): StyleProps => ({
   container: {
     border: `0.0625rem solid ${theme.palette.grey[200]}`,
     p: 2,
-    borderRadius: "0.75rem"
+    borderRadius: "0.75rem",
+    width: "100%"
   },
   header: {
     display: "flex",
diff --git a/src/enterprise b/src/enterprise
index 82558396a..dc6d20f79 160000
--- a/src/enterprise
+++ b/src/enterprise
@@ -1 +1 @@
-Subproject commit 82558396a8eec3574f0fc6d859bc274e590b7ac7
+Subproject commit dc6d20f790451880843f6e6c74aa80b9b1fe2e9b


Reviews:
user: login: ThinuwanW
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T04:36:01Z
user: login: shakyaatrootcode
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T04:44:55Z
user: login: shakyaatrootcode
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-18T04:44:58Z

Review comments:
diff_hunk: @@ -0,0 +1,37 @@
+import { Skeleton, Theme, useTheme } from "@mui/material";
+import { Box, Stack } from "@mui/system";
+
+import LeaveTypeBreakdownMonthSelectorSkeleton from "~community/leave/components/molecules/LeaveUtilizationGraph/Skeletons/LeaveTypeBreakdownMonthSelectorSkeleton.tsx/LeaveTypeBreakdownMonthSelectorSkeleton";
path: src/community/leave/components/molecules/LeaveUtilizationGraph/Skeletons/LeaveTypeBreakdownBarChartSkeleton/LeaveTypeBreakdownBarChartSkeleton.tsx
user: login: ThinuwanW
body: import correction
created_at: 2025-03-18T04:29:50Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,39 @@
+import { ArrowBackIos, ArrowForwardIos } from "@mui/icons-material";
+import { Theme, Typography, useTheme } from "@mui/material";
+import { Stack } from "@mui/system";
+
+import styles from "./styles";
+
+const LeaveTypeBreakdownMonthSelectorSkeleton = () => {
+  const theme: Theme = useTheme();
+  const classes = styles(theme);
+
+  return (
+    <Stack sx={classes.monthSelectorContainer}>
+      <ArrowBackIos sx={classes.iconText} />
+      <Stack sx={classes.monthList}>
+        {[
+          "Jan",
path: src/community/leave/components/molecules/LeaveUtilizationGraph/Skeletons/LeaveTypeBreakdownMonthSelectorSkeleton.tsx/LeaveTypeBreakdownMonthSelectorSkeleton.tsx
user: login: ThinuwanW
body: move to lang
created_at: 2025-03-18T04:30:48Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,39 @@
+import { ArrowBackIos, ArrowForwardIos } from "@mui/icons-material";
+import { Theme, Typography, useTheme } from "@mui/material";
+import { Stack } from "@mui/system";
+
+import styles from "./styles";
+
+const LeaveTypeBreakdownMonthSelectorSkeleton = () => {
+  const theme: Theme = useTheme();
+  const classes = styles(theme);
+
+  return (
+    <Stack sx={classes.monthSelectorContainer}>
+      <ArrowBackIos sx={classes.iconText} />
+      <Stack sx={classes.monthList}>
+        {[
+          "Jan",
path: src/community/leave/components/molecules/LeaveUtilizationGraph/Skeletons/LeaveTypeBreakdownMonthSelectorSkeleton.tsx/LeaveTypeBreakdownMonthSelectorSkeleton.tsx
user: login: ThinuwanW
body: luxon utilities
created_at: 2025-03-18T04:35:22Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,37 @@
+import { Skeleton, Theme, useTheme } from "@mui/material";
+import { Box, Stack } from "@mui/system";
+
+import LeaveTypeBreakdownMonthSelectorSkeleton from "~community/leave/components/molecules/LeaveUtilizationGraph/Skeletons/LeaveTypeBreakdownMonthSelectorSkeleton.tsx/LeaveTypeBreakdownMonthSelectorSkeleton";
path: src/community/leave/components/molecules/LeaveUtilizationGraph/Skeletons/LeaveTypeBreakdownBarChartSkeleton/LeaveTypeBreakdownBarChartSkeleton.tsx
user: login: shakyaatrootcode
body: done
created_at: 2025-03-18T04:44:54Z
author_association: CONTRIBUTOR
diff_hunk: @@ -0,0 +1,39 @@
+import { ArrowBackIos, ArrowForwardIos } from "@mui/icons-material";
+import { Theme, Typography, useTheme } from "@mui/material";
+import { Stack } from "@mui/system";
+
+import styles from "./styles";
+
+const LeaveTypeBreakdownMonthSelectorSkeleton = () => {
+  const theme: Theme = useTheme();
+  const classes = styles(theme);
+
+  return (
+    <Stack sx={classes.monthSelectorContainer}>
+      <ArrowBackIos sx={classes.iconText} />
+      <Stack sx={classes.monthList}>
+        {[
+          "Jan",
path: src/community/leave/components/molecules/LeaveUtilizationGraph/Skeletons/LeaveTypeBreakdownMonthSelectorSkeleton.tsx/LeaveTypeBreakdownMonthSelectorSkeleton.tsx
user: login: shakyaatrootcode
body: done
created_at: 2025-03-18T04:44:58Z
author_association: CONTRIBUTOR

PR comments:
user: login: ThinuwanW
created_at: 2025-03-19T04:37:51Z
body: fix sonar issues
author_association: CONTRIBUTOR
user: login: sonarqubecloud[bot]
created_at: 2025-03-20T04:35:43Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=SkappHQ_skapp-fe&pullRequest=318) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=SkappHQ_skapp-fe&pullRequest=318&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=SkappHQ_skapp-fe&pullRequest=318&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=SkappHQ_skapp-fe&pullRequest=318&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=SkappHQ_skapp-fe&pullRequest=318&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=SkappHQ_skapp-fe&pullRequest=318&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=SkappHQ_skapp-fe&pullRequest=318)


author_association: NONE