Events Pages

src/components/AppModal/AppModal.tsx

@@ -7,13 +7,13 @@ import {
   ModalContent,
   ModalFooter,
   ModalHeader,
-  ModalOverlay,
   Input,
   Box,
   Center,
   Spinner,
   Text,
   ModalCloseButton,
+  ModalOverlay,
 } from '@chakra-ui/react';
 import { CheckIcon, CloseIcon } from '@chakra-ui/icons';
 
@@ -28,107 +28,114 @@ export const AppModal = () => {
   const [values, setValues] = useState({});
   const [loading, setLoading] = useState(false);
 
+  const canClose = appModal.canClose !== undefined ? appModal.canClose : true;
   return (
     <Modal
       isCentered
-      closeOnOverlayClick={appModal.closeOnOverlayClick || false}
+      closeOnEsc={canClose}
+      closeOnOverlayClick={canClose && (appModal.closeOnOverlayClick || false)}
       isOpen={appModal.isOpen}
+      size={appModal.size || 'md'}
       onClose={() => {
-        setAppModal({
-          isOpen: false,
-        });
+        if (canClose) {
+          setAppModal({ isOpen: false });
+        }
       }}
     >
-      <ModalOverlay />
-      <ModalContent p={{ base: '8', md: '16' }} textAlign="center" top={'-10rem'}>
-        <ModalHeader
-          alignItems="center"
-          display="flex"
-          flexDir="column"
-          fontSize={{ base: 'xl', md: '2xl' }}
-          pb="0"
-        >
-          {appModal.header && <h4>{appModal.header}</h4>}
-        </ModalHeader>
-        {appModal.closeButtonVisible && <ModalCloseButton />}
-        <ModalBody>
-          {appModal.isLoading && (
-            <Center>
-              <Spinner
-                color="blue.400"
-                h={{ base: '16', md: '20' }}
-                mb="6"
-                w={{ base: '16', md: '20' }}
-              />
-            </Center>
-          )}
+      <ModalOverlay backdropFilter="blur(0px)" bg="blackAlpha.600" opacity="1" />
+      {appModal.modalContent !== undefined ? (
+        appModal.modalContent
+      ) : (
+        <ModalContent p={{ base: '4', md: '8' }} textAlign="center" top={'-5rem'}>
+          <ModalHeader
+            alignItems="center"
+            display="flex"
+            flexDir="column"
+            fontSize={{ base: 'xl', md: '2xl' }}
+            pb="0"
+          >
+            {appModal.header && <h4>{appModal.header}</h4>}
+          </ModalHeader>
+          {appModal.closeButtonVisible && <ModalCloseButton />}
+          <ModalBody>
+            {appModal.isLoading && (
+              <Center>
+                <Spinner
+                  color="blue.400"
+                  h={{ base: '16', md: '20' }}
+                  mb="6"
+                  w={{ base: '16', md: '20' }}
+                />
+              </Center>
+            )}
 
-          {appModal.isSuccess && (
-            <Center>
-              <RoundIcon icon={<CheckIcon color="blue.400" />} mb="6" />
-            </Center>
-          )}
+            {appModal.isSuccess && (
+              <Center>
+                <RoundIcon icon={<CheckIcon color="blue.400" />} mb="6" />
+              </Center>
+            )}
 
-          {appModal.isError && (
-            <Center>
-              <RoundIcon icon={<CloseIcon color="blue.400" />} mb="6" />
-            </Center>
-          )}
+            {appModal.isError && (
+              <Center>
+                <RoundIcon icon={<CloseIcon color="blue.400" />} mb="6" />
+              </Center>
+            )}
 
-          {appModal.message && <Text my={2}>{appModal.message}</Text>}
+            {appModal.message && <Text my={2}>{appModal.message}</Text>}
 
-          {appModal.bodyComponent !== undefined && <Box>{appModal.bodyComponent}</Box>}
+            {appModal.bodyComponent !== undefined && <Box>{appModal.bodyComponent}</Box>}
 
-          {appModal.inputs && appModal.inputs.length > 0 && (
-            <>
-              {appModal.inputs.map(({ placeholder, valueKey }, i) => (
-                <Input
-                  key={i}
-                  placeholder={placeholder}
-                  type="text"
-                  onChange={(e) => {
-                    setValues({
-                      ...values,
-                      ...{ [valueKey]: e.target.value },
-                    });
-                  }}
-                />
-              ))}
-            </>
-          )}
-        </ModalBody>
+            {appModal.inputs && appModal.inputs.length > 0 && (
+              <>
+                {appModal.inputs.map(({ placeholder, valueKey }, i) => (
+                  <Input
+                    key={i}
+                    placeholder={placeholder}
+                    type="text"
+                    onChange={(e) => {
+                      setValues({
+                        ...values,
+                        ...{ [valueKey]: e.target.value },
+                      });
+                    }}
+                  />
+                ))}
+              </>
+            )}
+          </ModalBody>
 
-        {appModal.options && appModal.options.length > 0 && (
-          <ModalFooter>
-            <ButtonGroup justifyContent="center" w="full">
-              {appModal.options.map(({ label, func, buttonProps, lazy }, i) => (
-                <Button
-                  key={i}
-                  isLoading={loading}
-                  onClick={async () => {
-                    if (lazy) {
-                      setAppModal({ isOpen: false });
+          {appModal.options && appModal.options.length > 0 && (
+            <ModalFooter>
+              <ButtonGroup justifyContent="space-between" w="full">
+                {appModal.options.map(({ label, func, buttonProps, lazy }, i) => (
+                  <Button
+                    key={i}
+                    isLoading={loading}
+                    onClick={async () => {
+                      if (lazy) {
+                        setAppModal({ isOpen: false });
+                        if (func) {
+                          await func(values);
+                        }
+                        return;
+                      }
+                      setLoading(true);
                       if (func) {
                         await func(values);
                       }
-                      return;
-                    }
-                    setLoading(true);
-                    if (func) {
-                      await func(values);
-                    }
-                    setLoading(false);
-                    setAppModal({ isOpen: false });
-                  }}
-                  {...buttonProps}
-                >
-                  {label}
-                </Button>
-              ))}
-            </ButtonGroup>
-          </ModalFooter>
-        )}
-      </ModalContent>
+                      setLoading(false);
+                      setAppModal({ isOpen: false });
+                    }}
+                    {...buttonProps}
+                  >
+                    {label}
+                  </Button>
+                ))}
+              </ButtonGroup>
+            </ModalFooter>
+          )}
+        </ModalContent>
+      )}
     </Modal>
   );
 };

src/components/AppModal/CompletionModal.tsx

@@ -0,0 +1,26 @@
+import { ModalContent, VStack, Text, Progress, Button } from '@chakra-ui/react';
+
+interface CompletionModalContentProps {
+  onClose: () => void;
+  completionMessage?: string;
+}
+
+const CompletionModalContent = ({
+  onClose,
+  completionMessage = 'Deletion complete.',
+}: CompletionModalContentProps) => (
+  <ModalContent padding={6}>
+    <VStack align="stretch" spacing={4}>
+      <Text fontSize="lg" fontWeight="semibold">
+        Deletion Complete
+      </Text>
+      <Progress hasStripe isAnimated value={100} />
+      <Text>{completionMessage}</Text>
+      <Button autoFocus={false} variant="secondary" width="full" onClick={onClose}>
+        Close
+      </Button>
+    </VStack>
+  </ModalContent>
+);
+
+export default CompletionModalContent;

src/components/AppModal/ConfirmDeletionModal.tsx

@@ -0,0 +1,32 @@
+import { ModalContent, VStack, Text, HStack, Button } from '@chakra-ui/react';
+
+interface ConfirmDeletionModalProps {
+  onConfirm: () => void;
+  onCancel: () => void;
+  confirmMessage?: string;
+}
+
+const ConfirmDeletionModal = ({
+  onConfirm,
+  onCancel,
+  confirmMessage = 'Are you sure you want to delete this item? This action cannot be undone.',
+}: ConfirmDeletionModalProps) => (
+  <ModalContent padding={6}>
+    <VStack align="stretch" spacing={4}>
+      <Text fontSize="lg" fontWeight="semibold">
+        Confirm Deletion
+      </Text>
+      <Text>{confirmMessage}</Text>
+      <HStack justify="space-between">
+        <Button colorScheme="red" onClick={onConfirm}>
+          Delete
+        </Button>
+        <Button variant="ghost" onClick={onCancel}>
+          Cancel
+        </Button>
+      </HStack>
+    </VStack>
+  </ModalContent>
+);
+
+export default ConfirmDeletionModal;