feat(meetings): add month sorting | fix #3239

src/components/icons/IconSortDown.tsx

@@ -0,0 +1,43 @@
+import { SvgIcon, SxProps, Theme } from '@mui/material';
+
+type IconProps = {
+  color?: string;
+  width?: number;
+  height?: number;
+  sx?: SxProps<Theme>;
+  className?: string;
+};
+
+const IconSortDown = ({
+  color = '#222222',
+  width = 24,
+  height = 24,
+  sx = {},
+  className,
+}: IconProps) => {
+  return (
+    <SvgIcon
+      className={`organized-icon-sort-down ${className}`}
+      sx={{ width: `${width}px`, height: `${height}px`, ...sx }}
+    >
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M4.78833 6V15.9312L5.8972 14.8189L7 15.9427L4 19L1 15.9427L2.1028 14.8189L3.21167 15.9312V6H4.78833Z"
+          fill={color}
+        />
+        <path
+          d="M9 16V18H13.3333V16H9ZM9 11V13H17.6667V11H9ZM9 6V8H22V6H9Z"
+          fill={color}
+        />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default IconSortDown;

src/components/icons/IconSortUp.tsx

@@ -0,0 +1,43 @@
+import { SvgIcon, SxProps, Theme } from '@mui/material';
+
+type IconProps = {
+  color?: string;
+  width?: number;
+  height?: number;
+  sx?: SxProps<Theme>;
+  className?: string;
+};
+
+const IconSortUp = ({
+  color = '#222222',
+  width = 24,
+  height = 24,
+  sx = {},
+  className,
+}: IconProps) => {
+  return (
+    <SvgIcon
+      className={`organized-icon-sort-up ${className}`}
+      sx={{ width: `${width}px`, height: `${height}px`, ...sx }}
+    >
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M3.21167 18V8.06875L2.1028 9.18113L1 8.05728L4 5L7 8.05728L5.8972 9.18113L4.78833 8.06875V18H3.21167Z"
+          fill={color}
+        />
+        <path
+          d="M9 8V6H13.3333V8H9ZM9 13V11H17.6667V13H9ZM9 18V16H22V18H9Z"
+          fill={color}
+        />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default IconSortUp;

src/components/icons/index.ts

@@ -293,3 +293,5 @@ export { default as IconWeek } from './IconWeek';
 export { default as IconWine } from './IconWine';
 export { default as IconWork } from './IconWork';
 export { default as IconYahoo } from './IconYahoo';
+export { default as IconSortDown } from './IconSortDown';
+export { default as IconSortUp } from './IconSortUp';

src/components/tabs/index.types.ts

@@ -57,13 +57,33 @@ export interface CustomTabProps extends TabOwnProps {
    */
   indicatorMode?: boolean;
 
+  /**
+   * Callback function triggered when the active tab changes.
+   * Provides the new active tab index as a parameter.
+   *
+   * @param activeTab - The index of the newly selected tab.
+   */
   onChange?: (activeTab: number) => void;
 
+  /**
+   * Optional class name for styling the tab container or component.
+   */
   className?: string;
 
+  /**
+   * The variant of the tabs, aligning with the MUI `TabsOwnProps` variant.
+   * Examples include `"scrollable"` or `"standard"`.
+   */
   variant?: TabsOwnProps['variant'];
 
+  /**
+   * Minimum height for the tab component.
+   * Useful for ensuring consistent tab sizes.
+   */
   minHeight?: string;
 
+  /**
+   * Custom styling applied to the tab component using MUI's `sx` prop.
+   */
   sx?: SxProps<Theme>;
 }

src/features/meetings/week_selector/index.tsx

@@ -1,5 +1,10 @@
 import { Box, Collapse } from '@mui/material';
-import { IconClearMultiple, IconCollapse } from '@components/icons';
+import {
+  IconClearMultiple,
+  IconCollapse,
+  IconSortDown,
+  IconSortUp,
+} from '@components/icons';
 import { useAppTranslation, useBreakpoints } from '@hooks/index';
 import useWeekSelector from './useWeekSelector';
 import AssignmentsDelete from '../assignments_delete';
@@ -22,6 +27,8 @@ const WeekSelector = () => {
     openDelete,
     handleOpenDelete,
     meeting,
+    sortDown,
+    handleToggleSort,
   } = useWeekSelector();
 
   return (
@@ -58,15 +65,36 @@ const WeekSelector = () => {
         onClick={desktopUp ? null : handleToggleExpand}
       >
         <Typography className="h2">{t('tr_meetingWeeks')}</Typography>
-        {!desktopUp && (
-          <IconCollapse
-            color="var(--black)"
-            sx={{
-              transform: expanded ? 'rotate(0deg)' : 'rotate(180deg)',
-              transition: 'transform 0.3s',
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: 'row',
+            gap: '8px',
+            alignItems: 'center',
+          }}
+        >
+          <Box
+            onClick={(e) => {
+              e.stopPropagation();
+              handleToggleSort();
             }}
-          />
-        )}
+          >
+            {sortDown ? (
+              <IconSortDown color="var(--black)" />
+            ) : (
+              <IconSortUp color="var(--black)" />
+            )}
+          </Box>
+          {!desktopUp && (
+            <IconCollapse
+              color="var(--black)"
+              sx={{
+                transform: expanded ? 'rotate(0deg)' : 'rotate(180deg)',
+                transition: 'transform 0.3s',
+              }}
+            />
+          )}
+        </Box>
       </Box>
 
       <Collapse in={desktopUp || expanded} timeout="auto" unmountOnExit>

src/features/meetings/week_selector/months_container/index.tsx

@@ -2,7 +2,9 @@ import { Box } from '@mui/material';
 import { MonthsContainerType } from './index.types';
 import MonthItem from '../month_item';
 
-const MonthsContainer = ({ months }: MonthsContainerType) => {
+const MonthsContainer = ({ months, reverse = false }: MonthsContainerType) => {
+  const displayedMonths = reverse ? [...months].reverse() : months;
+
   return (
     <Box
       sx={{
@@ -14,7 +16,7 @@ const MonthsContainer = ({ months }: MonthsContainerType) => {
         },
       }}
     >
-      {months.map((month) => (
+      {displayedMonths.map((month) => (
         <MonthItem key={month.value} month={month.value} weeks={month.weeks} />
       ))}
     </Box>

src/features/meetings/week_selector/months_container/index.types.ts

@@ -2,4 +2,5 @@ import { SourcesFormattedType } from '@definition/sources';
 
 export type MonthsContainerType = {
   months: SourcesFormattedType['months'];
+  reverse?: boolean;
 };

src/features/meetings/week_selector/useWeekSelector.tsx

@@ -19,13 +19,14 @@ const useWeekSelector = () => {
 
   const [expanded, setExpanded] = useState(true);
   const [openDelete, setOpenDelete] = useState(false);
+  const [sortDown, setSortDown] = useState(false);
 
   const meeting: MeetingType =
     location.pathname === '/midweek-meeting' ? 'midweek' : 'weekend';
 
   const tabs = sources.map((year) => ({
     label: year.value.toString(),
-    Component: <MonthsContainer months={year.months} />,
+    Component: <MonthsContainer months={year.months} reverse={sortDown} />,
   }));
 
   const currentYear =
@@ -41,6 +42,10 @@ const useWeekSelector = () => {
     setExpanded((prev) => !prev);
   };
 
+  const handleToggleSort = () => {
+    setSortDown((prev) => !prev);
+  };
+
   const handleOpenDelete = () => setOpenDelete(true);
 
   const handleCloseDelete = () => setOpenDelete(false);
@@ -67,6 +72,8 @@ const useWeekSelector = () => {
     handleCloseDelete,
     handleOpenDelete,
     meeting,
+    sortDown,
+    handleToggleSort,
   };
 };