Merge pull request #3657 from Northeastern-Electric-Racing/#3209-SABO-number-limit

#3209 sabo number limit

Author: chpy04

src/frontend/src/pages/FinancePage/FinanceComponents/ReimbursementRequestInfo.tsx

@@ -14,7 +14,14 @@ import { Link as RouterLink, useLocation } from 'react-router-dom';
 import { useState } from 'react';
 import { isGuest, ReimbursementRequest } from 'shared';
 import { ReimbursementRequestRow, ReimbursementStatusType } from 'shared/src/types/reimbursement-requests-types';
-import { undefinedPipe, fullNamePipe, centsToDollar, datePipe, dateUndefinedPipe } from '../../../utils/pipes';
+import {
+  undefinedPipe,
+  fullNamePipe,
+  centsToDollar,
+  datePipe,
+  dateUndefinedPipe,
+  formatSaboIdPipe
+} from '../../../utils/pipes';
 import {
   createReimbursementRequestRowData,
   vendorDescendingComparator,
@@ -291,7 +298,7 @@ const ReimbursementRequestInfo = ({
                   {currentTab !== 0 && <TableCell align="center">{fullNamePipe(row.submitter)}</TableCell>}
                   <TableCell align="center">{`$${centsToDollar(row.amount)}`}</TableCell>
                   <TableCell align="center">{undefinedPipe(row.identifier)}</TableCell>
-                  <TableCell align="center">{undefinedPipe(row.saboId)}</TableCell>
+                  <TableCell align="center">{formatSaboIdPipe(row.saboId)}</TableCell>
                   <TableCell align="center">{datePipe(row.dateSubmitted)}</TableCell>
                   <TableCell align="center">{dateUndefinedPipe(row.dateSubmittedToSabo)}</TableCell>
                   {currentTab === 1 && <TableCell align="center">{fullNamePipe(row.financeMemberAssigned)}</TableCell>}

src/frontend/src/pages/FinancePage/ReimbursementRequestDetailPage/AddSABONumberModal.tsx

@@ -7,12 +7,15 @@ import ReactHookTextField from '../../../components/ReactHookTextField';
 import { useSetSaboNumber } from '../../../hooks/finance.hooks';
 import { useToast } from '../../../hooks/toasts.hooks';
 
-const schema = yup.object().shape({
+const schema = yup.object({
   saboNumber: yup
     .number()
     .typeError('The SABO number should be a valid number')
-    .required()
-    .test('length', 'The SABO number must be at least 5 digits', (num) => String(num).length >= 5)
+    .required('The SABO number is required')
+    .test('exact-5-digits', 'The SABO number must be exactly 5 digits', function () {
+      const original = this.originalValue?.toString().trim();
+      return /^\d{5}$/.test(original || '');
+    })
 });
 
 interface AddSABONumberModalProps {

src/frontend/src/pages/FinancePage/ReimbursementRequestDetailPage/ReimbursementRequestDetailsView.tsx

@@ -3,7 +3,7 @@
  * See the LICENSE file in the repository root folder for details.
  */
 
-import { accountCodePipe, displayEnum } from '../../../utils/pipes';
+import { accountCodePipe, displayEnum, formatSaboIdPipe } from '../../../utils/pipes';
 import { Assignment, ChangeCircle, Edit, Pending } from '@mui/icons-material';
 import CheckIcon from '@mui/icons-material/Check';
 import CloseIcon from '@mui/icons-material/Close';
@@ -40,7 +40,7 @@ import {
 } from '../../../hooks/finance.hooks';
 import { useToast } from '../../../hooks/toasts.hooks';
 import { useCurrentUser } from '../../../hooks/users.hooks';
-import { centsToDollar, fullNamePipe, undefinedPipe } from '../../../utils/pipes';
+import { centsToDollar, fullNamePipe } from '../../../utils/pipes';
 import {
   imageDownloadUrl,
   imageFileUrl,
@@ -479,7 +479,7 @@ const ReimbursementRequestDetailsView: React.FC<ReimbursementRequestDetailsViewP
     },
     { content: `$${centsToDollar(reimbursementRequest.totalCost)}` },
     { content: reimbursementRequest.vendor.name },
-    { content: `${undefinedPipe(reimbursementRequest.saboId)}` },
+    { content: `${formatSaboIdPipe(reimbursementRequest.saboId)}` },
     {
       content: refundSourceNames.join(', ')
     },

src/frontend/src/utils/pipes.ts

@@ -209,3 +209,14 @@ export const labelPipe = (label: string) => {
 
   return result;
 };
+
+// Pad SABO ID with leading zeroes
+export const formatSaboIdPipe = (saboId: number | undefined): string => {
+  if (saboId === undefined || saboId === null) return undefinedPipe(saboId as any);
+  const str = String(saboId);
+  // Only pad if it's shorter than 5
+  if (str.length < 5) {
+    return str.padStart(5, '0');
+  }
+  return str;
+};