Members month (#175)

* initial commit

* second commmit, for utils and stuff

* update to use startMonth, endMonth instead of My

* made some final changes

* few changes

* change of input format to YYYY-MM,type="month"

* Refactor date handling in member positions and bulk edit forms

* Fix valueGetter to use optional chaining for start and end month/year in UserMemberships

* Add optional chaining to value getters in BulkEditForm and UserForm

* fix delete button logic

* Refactor sorting and date handling in member components for improved clarity and consistency

* Remove unused date formatting imports from member components for cleaner code

* Refactor imports in member components for improved organization and consistency

* Remove unnecessary blank line in ClubsCouncil component for cleaner code

* added month to bulk add form description

---------

Co-authored-by: rithikreddypalla <rithikreddypalla@gmail.com>
Co-authored-by: abhiramtilakiiit <abhiram.potula@research.iiit.ac.in>

Author: 3 people

src/app/clubs-council/page.jsx

@@ -141,9 +141,7 @@ const filterRoles = (roles, filterWords, unfilterWords = []) => {
         );
         return matchesFilterWords && !matchesUnfilterWords;
       })
-      ?.sort((a, b) => {
-        sortMonthYear(a, b);
-      });
+      ?.sort((a, b) => sortMonthYear(a, b));
   } else {
     return filteredRoles;
   }

src/app/manage/members/page.jsx

@@ -147,8 +147,7 @@ export default async function ManageMembers(props) {
 }
 
 async function PendingMembersDataGrid() {
-  const { data: { pendingMembers } = {} } =
-    await getClient().query(GET_PENDING_MEMBERS);
+    const { data: { pendingMembers } = {} } = await getClient().query(GET_PENDING_MEMBERS);
 
   // TODO: convert MembersTable to a server component and fetch user profile for each row (for lazy-loading perf improvement)
   // concurrently fetch user profile for each member
@@ -246,8 +245,8 @@ async function MembersDataGrid({
 // if member is still present, return current year + 1
 function extractLatestYear(member) {
   return Math.max(
-    ...member.roles.map((r) =>
-      !r.endYear ? new Date().getFullYear() + 1 : r.endYear,
+      ...member.roles.map((r)=>
+        !r.endYear ? new Date().getFullYear() + 1 : r.endYear,
     ),
   );
 }

src/components/members/BulkEditForm.jsx

@@ -437,7 +437,7 @@ export default function BulkEdit({ mode = "add" }) {
           - Please ensure that the members being added do not already exist in
           the selected club/body.
           <br />- The default start year for all members will be set as{" "}
-          {currentYear}.
+          {currentYear}{"-"}{currentMonth}.
           <br />- Any invalid entries marked in red will be skipped during
           submission.
         </Typography>
@@ -909,16 +909,13 @@ function MembersTable({
             }
             required
             min={`2010-01`}
-            max={`${currentYear}-${currentMonth + 1}`}
+            max={currentMonth === 12
+                ? `${currentYear + 1}-01`
+                : `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}`}
             onBlur={() => {
               api.stopCellEditMode({ id, field });
             }}
-            style={{
-              width: "100%",
-              padding: 6,
-              borderRadius: 6,
-              border: "1px solid #ccc",
-            }}
+            style={{ width: "100%", padding: 6, borderRadius: 6, border: "1px solid #ccc" }}
           />
         );
       },
@@ -975,7 +972,9 @@ function MembersTable({
             })
           }
           min={`2010-01`}
-          max={`${currentYear}-${currentMonth + 1}`}
+          max={currentMonth === 12
+              ? `${currentYear + 1}-01`
+              : `${currentYear}-${String(currentMonth + 1).padStart(2, "0")}`}
           style={{
             width: "100%",
             padding: 6,

src/components/members/MemberCard.jsx

@@ -104,9 +104,7 @@ export default async function MemberCard({ uid, poc, roles }) {
         ) : null}
 
         {roles
-          ?.sort((a, b) => {
-            sortMonthYear(a, b);
-          })
+          ?.sort((a, b) => sortMonthYear(a, b))
           .map((role, key) => (
             <Box
               key={key}
@@ -129,8 +127,11 @@ export default async function MemberCard({ uid, poc, roles }) {
                   display: "inline-block",
                 }}
               >
-                ({fmtMonthYear(role.startMonth, role.startYear)} -
-                {fmtMonthYear(role.endMonth, role.endYear)})
+                (
+                  {fmtMonthYear(role.startMonth, role.startYear)}
+                  {" "}-{" "}
+                  {fmtMonthYear(role.endMonth, role.endYear)}
+                )
               </Typography>
             </Box>
           ))}

src/components/members/MemberPositions.jsx

@@ -24,6 +24,7 @@ import { fmtMonthYear } from "utils/membersDates";
 import { approveMemberAction } from "actions/members/approve/server_action";
 import { rejectMemberAction } from "actions/members/reject/server_action";
 
+
 const showActions = (rows, user) => {
   if (user?.role !== "cc") return false;
   if (rows.length > 0) {
@@ -83,11 +84,7 @@ export default function MemberPositions({
     if (row.startYear < minYear) row.startYear = minYear;
 
     // Only clamp if the month is actually set
-    if (
-      row.startMonth &&
-      (row.startYear > currentYear ||
-        (row.startYear === currentYear && row.startMonth > currentMonth))
-    ) {
+    if (row.startMonth && (row.startYear > currentYear || (row.startYear === currentYear && row.startMonth > currentMonth))) {
       row.startYear = currentYear;
       row.startMonth = currentMonth;
     }
@@ -147,9 +144,12 @@ export default function MemberPositions({
           }}
         >
           {p.value || (
-            <span style={{ color: "text.secondary", fontStyle: "italic" }}>
+            <Box
+              component="span"
+              sx={{ color: "text.secondary", fontStyle: "italic" }}
+            >
               Double click to edit
-            </span>
+            </Box>
           )}
         </Typography>
       ),
@@ -291,83 +291,82 @@ export default function MemberPositions({
     },
     ...(editable
       ? [
-          {
-            field: "isValid",
-            type: "boolean",
-            headerName: "Valid?",
-            align: "center",
-            width: 80,
-            renderCell: (p) => (
-              <Tooltip
-                title={p.row.error || "Valid"}
-                disableHoverListener={p.row.isValid}
-              >
-                <span>
-                  <Icon
-                    color={p.row.isValid ? "success.main" : "error.main"}
-                    variant={p.row.isValid ? "check-circle" : "cancel"}
-                    sx={{ height: 20, width: 20 }}
-                  />
-                </span>
-              </Tooltip>
-            ),
-            display: "flex",
-            disableColumnMenu: true,
-            sortable: false,
-          },
-          {
-            field: "action",
-            align: "center",
-            headerName: "",
-            width: 50,
-            renderCell: (p) => (
-              <IconButton
-                onMouseDown={(e) => e.stopPropagation()}
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onDelete(p.row);
-                }}
-                size="small"
-              >
+        {
+          field: "isValid",
+          type: "boolean",
+          headerName: "Valid?",
+          align: "center",
+          width: 80,
+          renderCell: (p) => (
+            <Tooltip
+              title={p.row.error || "Valid"}
+              disableHoverListener={p.row.isValid}
+            >
+              <span>
                 <Icon
-                  color="error.main"
-                  variant="delete-forever-outline"
-                  sx={{ height: 16, width: 16 }}
+                  color={p.row.isValid ? "success.main" : "error.main"}
+                  variant={p.row.isValid ? "check-circle" : "cancel"}
+                  sx={{ height: 20, width: 20 }}
                 />
-              </IconButton>
-            ),
-            display: "flex",
-            disableColumnMenu: true,
-            sortable: false,
-          },
-        ]
+              </span>
+            </Tooltip>
+          ),
+          display: "flex",
+          disableColumnMenu: true,
+          sortable: false,
+        },
+        {
+          field: "action",
+          align: "center",
+          headerName: "",
+          width: 50,
+          renderCell: (p) => (
+            <IconButton onMouseDown={(e) => e.stopPropagation()}
+              onClick={(e) => {
+                e.stopPropagation();
+                onDelete(p.row)
+              }}
+              size="small"
+            >
+              <Icon
+                color="error.main"
+                variant="delete-forever-outline"
+                sx={{ height: 16, width: 16 }}
+              />
+            </IconButton>
+          ),
+          display: "flex",
+          disableColumnMenu: true,
+          sortable: false,
+        },
+      ]
       : [
-          {
-            field: "approved",
-            headerName: "Status",
-            align: "center",
-            headerAlign: "center",
-            flex: isMobile ? null : 2,
-            valueGetter: (value, row) => ({
-              approved: row.approved,
-              approvalTime: row.approvalTime,
-              rejected: row.rejected,
-              rejectionTime: row.rejectionTime,
-            }),
-            disableExport: true,
-            renderCell: ({
-              value: { approved, approvalTime, rejected, rejectionTime },
-            }) => (
-              <Tooltip
-                title={
-                  approved
-                    ? approvalTime || "No Information Available"
-                    : rejected
-                      ? rejectionTime || "No Information Available"
-                      : null
-                }
-                placement="left-start"
-              >
+        {
+          field: "approved",
+          headerName: "Status",
+          align: "center",
+          headerAlign: "center",
+          flex: isMobile ? null : 2,
+          valueGetter: (value, row) => ({
+            approved: row.approved,
+            approvalTime: row.approvalTime,
+            rejected: row.rejected,
+            rejectionTime: row.rejectionTime,
+          }),
+          disableExport: true,
+          renderCell: ({
+                         value: { approved, approvalTime, rejected, rejectionTime },
+                       }) => (
+            <Tooltip
+              title={
+                approved
+                  ? approvalTime || "No Information Available"
+                  : rejected
+                    ? rejectionTime || "No Information Available"
+                    : null
+              }
+              placement="left-start"
+            >
                 <span>
                   <Tag
                     label={
@@ -379,41 +378,41 @@ export default function MemberPositions({
                     sx={{ my: 2 }}
                   />
                 </span>
-              </Tooltip>
-            ),
-            display: "flex",
-          },
-          ...(showActions(rows, user)
-            ? [
-                {
-                  field: "actions",
-                  align: "center",
-                  headerName: "",
-                  width: 100,
-                  valueGetter: (value, row) => ({
-                    approved: row.approved,
-                    rejected: row.rejected,
-                    rid: row.rid,
-                  }),
-                  disableExport: true,
-                  disableColumnMenu: true,
-                  sortable: false,
-                  renderCell: ({ value: { approved, rejected, rid } }) => (
+            </Tooltip>
+          ),
+          display: "flex",
+        },
+        ...(showActions(rows, user)
+          ? [
+            {
+              field: "actions",
+              align: "center",
+              headerName: "",
+              width: 100,
+              valueGetter: (value, row) => ({
+                approved: row.approved,
+                rejected: row.rejected,
+                rid: row.rid,
+              }),
+              disableExport: true,
+              disableColumnMenu: true,
+              sortable: false,
+              renderCell: ({ value: { approved, rejected, rid } }) => (
+                <>
+                  {approved || rejected ? null : (
                     <>
-                      {approved || rejected ? null : (
-                        <>
-                          <ApproveButton rid={rid} member={member} />
-                          <Box sx={{ mx: 1 }} />
-                          <RejectButton rid={rid} member={member} />
-                        </>
-                      )}
+                      <ApproveButton rid={rid} member={member} />
+                      <Box sx={{ mx: 1 }} />
+                      <RejectButton rid={rid} member={member} />
                     </>
-                  ),
-                  display: "flex",
-                },
-              ]
-            : []),
-        ]),
+                  )}
+                </>
+              ),
+              display: "flex",
+            },
+          ]
+          : []),
+      ]),
   ];
 
   return (

src/components/members/MembersGrid.jsx

@@ -69,5 +69,7 @@ export function extractLatestYear(member) {
 // get the first year a member was in the club
 // if member is still present, return -1
 export function extractFirstYear(member) {
-  return Math.min(...member.roles.map((r) => (!r.endYear ? -1 : r.startYear)));
+  return Math.min(
+    ...member.roles.map((r) => (!r.endYear ? -1 : r.startYear)),
+  );
 }

src/components/members/MembersTable.jsx

@@ -158,8 +158,11 @@ export default function MembersTable({
                             flexShrink: 0,
                           }}
                         >
-                          ({fmtMonthYear(role?.startMonth, role?.startYear)} -
-                          {fmtMonthYear(role?.endMonth, role?.endYear)})
+                          (
+                            {fmtMonthYear(role?.startMonth, role?.startYear)}
+                            {" "}-{" "}
+                            {fmtMonthYear(role?.endMonth, role?.endYear)}
+                          )
                         </Box>
                       </Typography>
                       {showIcon && (

src/components/members/TechMemberCard.jsx

@@ -97,9 +97,7 @@ export default async function TechMemberCard({ uid, poc, roles }) {
         />
 
         {roles
-          ?.sort((a, b) => {
-            sortMonthYear(a, b);
-          })
+          ?.sort((a, b) => sortMonthYear(a, b))
           .map((role, key) => {
             const start = fmtMonthYear(role?.startMonth, role?.startYear);
             const end = fmtMonthYear(role?.endMonth, role?.endYear);