[SSF-196] update date picker to use chakra

apps/frontend/src/chakra-ui.d.ts

@@ -114,4 +114,73 @@ declare module '@chakra-ui/react' {
   export interface TextareaProps extends ComponentPropsStrictChildren {}
   export interface NumberInputInputProps
     extends ComponentPropsLenientChildren {}
+
+  // DatePicker component props
+  export interface DatePickerRootProps extends ComponentPropsLenientChildren {
+    min?: CalendarDate;
+    max?: CalendarDate;
+    value?: CalendarDate[];
+    onValueChange?: (details: {
+      valueAsString: string[];
+      value: CalendarDate[];
+    }) => void;
+    closeOnSelect?: boolean;
+    positioning?: {
+      placement?: string;
+    };
+  }
+
+  export interface DatePickerControlProps
+    extends ComponentPropsStrictChildren {}
+  export interface DatePickerInputProps extends ComponentPropsLenientChildren {}
+  export interface DatePickerIndicatorGroupProps
+    extends ComponentPropsStrictChildren {}
+  export interface DatePickerTriggerProps
+    extends ComponentPropsStrictChildren {}
+  export interface DatePickerPositionerProps
+    extends ComponentPropsStrictChildren {}
+  export interface DatePickerContentProps
+    extends ComponentPropsStrictChildren {}
+  export interface DatePickerViewProps extends ComponentPropsStrictChildren {
+    view: 'day' | 'month' | 'year';
+  }
+  export interface DatePickerHeaderProps
+    extends ComponentPropsLenientChildren {}
+  export interface DatePickerDayTableProps
+    extends ComponentPropsLenientChildren {}
+  export interface DatePickerMonthTableProps
+    extends ComponentPropsLenientChildren {}
+  export interface DatePickerYearTableProps
+    extends ComponentPropsLenientChildren {}
+
+  export const DatePicker: {
+    Root: React.ForwardRefExoticComponent<
+      DatePickerRootProps & React.RefAttributes<HTMLDivElement>
+    >;
+    Control: React.ForwardRefExoticComponent<
+      DatePickerControlProps & React.RefAttributes<HTMLDivElement>
+    >;
+    Input: React.ForwardRefExoticComponent<
+      DatePickerInputProps & React.RefAttributes<HTMLInputElement>
+    >;
+    IndicatorGroup: React.ForwardRefExoticComponent<
+      DatePickerIndicatorGroupProps & React.RefAttributes<HTMLDivElement>
+    >;
+    Trigger: React.ForwardRefExoticComponent<
+      DatePickerTriggerProps & React.RefAttributes<HTMLButtonElement>
+    >;
+    Positioner: React.ForwardRefExoticComponent<
+      DatePickerPositionerProps & React.RefAttributes<HTMLDivElement>
+    >;
+    Content: React.ForwardRefExoticComponent<
+      DatePickerContentProps & React.RefAttributes<HTMLDivElement>
+    >;
+    View: React.ForwardRefExoticComponent<
+      DatePickerViewProps & React.RefAttributes<HTMLDivElement>
+    >;
+    Header: React.FC<DatePickerHeaderProps>;
+    DayTable: React.FC<DatePickerDayTableProps>;
+    MonthTable: React.FC<DatePickerMonthTableProps>;
+    YearTable: React.FC<DatePickerYearTableProps>;
+  };
 }

apps/frontend/src/components/forms/addNewVolunteerModal.tsx

@@ -13,6 +13,7 @@ import { Role, UserDto } from '../../types/types';
 import ApiClient from '@api/apiClient';
 import { USPhoneInput } from './usPhoneInput';
 import { PlusIcon } from 'lucide-react';
+import { useModalBodyCleanup } from '../../hooks/modalBodyCleanup';
 
 interface NewVolunteerModalProps {
   onSubmitSuccess?: () => void;
@@ -23,6 +24,7 @@ const NewVolunteerModal: React.FC<NewVolunteerModalProps> = ({
   onSubmitSuccess,
   onSubmitFail,
 }) => {
+  useModalBodyCleanup();
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
   const [email, setEmail] = useState('');

apps/frontend/src/components/forms/completeRequiredActionsModal.tsx

@@ -17,6 +17,7 @@ import {
 } from '../../types/types';
 import { FloatingAlert } from '@components/floatingAlert';
 import { useAlert } from '../../hooks/alert';
+import { useModalBodyCleanup } from '../../hooks/modalBodyCleanup';
 
 interface CompleteRequiredActionsModalProps {
   order: VolunteerOrder;
@@ -28,6 +29,7 @@ interface CompleteRequiredActionsModalProps {
 const CompleteRequiredActionsModal: React.FC<
   CompleteRequiredActionsModalProps
 > = ({ order, isOpen, onClose, onActionCompleted }) => {
+  useModalBodyCleanup();
   const [alertState, setAlertMessage] = useAlert();
   const [loadingAction, setLoadingAction] = useState<VolunteerAction | null>(
     null,

apps/frontend/src/components/forms/confirmFoodManufacturerDecisionModal.tsx

@@ -1,5 +1,6 @@
 import { Dialog, Text, Box, Button, CloseButton } from '@chakra-ui/react';
 import { capitalize } from '@utils/utils';
+import { useModalBodyCleanup } from '../../hooks/modalBodyCleanup';
 
 interface ConfirmFoodManufacturerDecisionModalProps {
   isOpen: boolean;
@@ -20,6 +21,7 @@ const ConfirmFoodManufacturerDecisionModal: React.FC<
   foodManufacturerName,
   dateApplied,
 }) => {
+  useModalBodyCleanup();
   return (
     <Dialog.Root
       open={isOpen}

apps/frontend/src/components/forms/confirmPantryDecisionModal.tsx

@@ -1,5 +1,6 @@
 import { Dialog, Text, Box, Button, CloseButton } from '@chakra-ui/react';
 import { capitalize } from '@utils/utils';
+import { useModalBodyCleanup } from '../../hooks/modalBodyCleanup';
 
 interface ConfirmPantryDecisionModalProps {
   isOpen: boolean;
@@ -18,6 +19,7 @@ const ConfirmPantryDecisionModal: React.FC<ConfirmPantryDecisionModalProps> = ({
   pantryName,
   dateApplied,
 }) => {
+  useModalBodyCleanup();
   return (
     <Dialog.Root
       open={isOpen}

apps/frontend/src/components/forms/createNewOrderModal.tsx

@@ -26,6 +26,7 @@ import apiClient from '@api/apiClient';
 import { useAlert } from '../../hooks/alert';
 import { FloatingAlert } from '@components/floatingAlert';
 import { useGroupedItemsByFoodType } from '../../hooks/groupedItemsByFoodType';
+import { useModalBodyCleanup } from '../../hooks/modalBodyCleanup';
 
 interface CreateNewOrderModalModalProps {
   request: FoodRequestSummaryDto;
@@ -40,6 +41,7 @@ const CreateNewOrderModal: React.FC<CreateNewOrderModalModalProps> = ({
   onClose,
   onSuccess,
 }) => {
+  useModalBodyCleanup();
   const [alertState, setAlertMessage] = useAlert();
   const [selectedManufacturer, setSelectedManufacturer] =
     useState<FoodManufacturerWithoutRelations | null>(null);

apps/frontend/src/components/forms/donationDetailsModal.tsx

@@ -1,17 +1,11 @@
 import React, { useState, useEffect } from 'react';
-import {
-  Box,
-  Text,
-  VStack,
-  Dialog,
-  Portal,
-  CloseButton,
-} from '@chakra-ui/react';
+import { Box, Text, VStack, Dialog, CloseButton } from '@chakra-ui/react';
 import ApiClient from '@api/apiClient';
 import { Donation, DonationItem, FoodType } from 'types/types';
 import { formatDate } from '@utils/utils';
 import { FloatingAlert } from '@components/floatingAlert';
 import { useAlert } from '../../hooks/alert';
+import { useModalBodyCleanup } from '../../hooks/modalBodyCleanup';
 
 interface DonationDetailsModalProps {
   donation: Donation;
@@ -24,6 +18,7 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
   isOpen,
   onClose,
 }) => {
+  useModalBodyCleanup();
   const [items, setItems] = useState<DonationItem[]>([]);
 
   const [alertState, setAlertMessage] = useAlert();
@@ -72,82 +67,80 @@ const DonationDetailsModal: React.FC<DonationDetailsModalProps> = ({
           timeout={6000}
         />
       )}
-      <Portal>
-        <Dialog.Backdrop bg="blackAlpha.300" />
-
-        <Dialog.Positioner>
-          <Dialog.Content>
-            <Dialog.CloseTrigger asChild>
-              <CloseButton />
-            </Dialog.CloseTrigger>
-
-            <Dialog.Header>
-              <VStack align="stretch" gap={0}>
-                <Dialog.Title fontSize="lg" mb={2} fontWeight="600">
-                  Donation #{donationId} Stock
-                </Dialog.Title>
-                <Text fontSize="sm">
-                  {donation.foodManufacturer?.foodManufacturerName}
-                </Text>
-                <Text fontSize="sm">{formatDate(donation.dateDonated)}</Text>
-              </VStack>
-            </Dialog.Header>
-
-            <Dialog.Body>
-              <VStack align="stretch" gap={4} my={2}>
-                {Object.entries(groupedItems).map(([foodType, typeItems]) => (
-                  <Box key={foodType}>
-                    <Text
-                      fontSize="sm"
-                      fontWeight="600"
-                      color="neutral.800"
-                      mb={2}
-                    >
-                      {foodType}
-                    </Text>
-
-                    <VStack align="stretch" gap={2}>
-                      {typeItems.map((item, index) => (
+      <Dialog.Backdrop bg="blackAlpha.300" />
+
+      <Dialog.Positioner>
+        <Dialog.Content>
+          <Dialog.CloseTrigger asChild>
+            <CloseButton />
+          </Dialog.CloseTrigger>
+
+          <Dialog.Header>
+            <VStack align="stretch" gap={0}>
+              <Dialog.Title fontSize="lg" mb={2} fontWeight="600">
+                Donation #{donationId} Stock
+              </Dialog.Title>
+              <Text fontSize="sm">
+                {donation.foodManufacturer?.foodManufacturerName}
+              </Text>
+              <Text fontSize="sm">{formatDate(donation.dateDonated)}</Text>
+            </VStack>
+          </Dialog.Header>
+
+          <Dialog.Body>
+            <VStack align="stretch" gap={4} my={2}>
+              {Object.entries(groupedItems).map(([foodType, typeItems]) => (
+                <Box key={foodType}>
+                  <Text
+                    fontSize="sm"
+                    fontWeight="600"
+                    color="neutral.800"
+                    mb={2}
+                  >
+                    {foodType}
+                  </Text>
+
+                  <VStack align="stretch" gap={2}>
+                    {typeItems.map((item, index) => (
+                      <Box
+                        key={index}
+                        display="flex"
+                        p={0}
+                        border="1px solid"
+                        borderColor="neutral.100"
+                        borderRadius="md"
+                        overflow="hidden"
+                        color="neutral.800"
+                        fontSize="sm"
+                      >
+                        <Box flex={1} p={3} bg="white">
+                          <Text>{item.itemName}</Text>
+                        </Box>
+
                         <Box
-                          key={index}
-                          display="flex"
-                          p={0}
-                          border="1px solid"
+                          borderLeft="1px solid"
                           borderColor="neutral.100"
-                          borderRadius="md"
-                          overflow="hidden"
-                          color="neutral.800"
-                          fontSize="sm"
+                          p={3}
+                          minW="50px"
+                          display="flex"
+                          alignItems="center"
+                          justifyContent="center"
+                          bg="white"
                         >
-                          <Box flex={1} p={3} bg="white">
-                            <Text>{item.itemName}</Text>
-                          </Box>
-
-                          <Box
-                            borderLeft="1px solid"
-                            borderColor="neutral.100"
-                            p={3}
-                            minW="50px"
-                            display="flex"
-                            alignItems="center"
-                            justifyContent="center"
-                            bg="white"
-                          >
-                            <Text>
-                              {item.quantity - item.reservedQuantity} of{' '}
-                              {item.quantity} remaining
-                            </Text>
-                          </Box>
+                          <Text>
+                            {item.quantity - item.reservedQuantity} of{' '}
+                            {item.quantity} remaining
+                          </Text>
                         </Box>
-                      ))}
-                    </VStack>
-                  </Box>
-                ))}
-              </VStack>
-            </Dialog.Body>
-          </Dialog.Content>
-        </Dialog.Positioner>
-      </Portal>
+                      </Box>
+                    ))}
+                  </VStack>
+                </Box>
+              ))}
+            </VStack>
+          </Dialog.Body>
+        </Dialog.Content>
+      </Dialog.Positioner>
     </Dialog.Root>
   );
 };