diff --git a/client/src/App.jsx b/client/src/App.jsx index b5db465..f32349e 100644 --- a/client/src/App.jsx +++ b/client/src/App.jsx @@ -30,6 +30,7 @@ import { AuthProvider } from "./contexts/AuthContext"; import { BackendProvider } from "./contexts/BackendContext"; import { RoleProvider } from "./contexts/RoleContext"; import { Home } from "./components/home/Home"; +import { ArchivedPrograms } from "./components/programs/ArchivedPrograms"; import { Settings } from "./components/settings/Settings"; const App = () => { @@ -130,6 +131,10 @@ const App = () => { path="*" element={} />} /> + } />} + /> diff --git a/client/src/assets/ArchiveIcon.jsx b/client/src/assets/ArchiveIcon.jsx new file mode 100644 index 0000000..1679c95 --- /dev/null +++ b/client/src/assets/ArchiveIcon.jsx @@ -0,0 +1,10 @@ +import React from 'react'; + +export const ArchiveIcon = () => { + return ( + + + + + ); +}; \ No newline at end of file diff --git a/client/src/assets/icons/ProgramIcons.jsx b/client/src/assets/icons/ProgramIcons.jsx index f4b9250..6094498 100644 --- a/client/src/assets/icons/ProgramIcons.jsx +++ b/client/src/assets/icons/ProgramIcons.jsx @@ -81,4 +81,79 @@ export const sessionsFilterMapPin = (props) => { ) }; +export const archiveBox = (props) => { + return ( + + + + + ) +}; + +export const archiveCalendar = (props) => { + return ( + + + + ) +}; + +export const archiveClock = (props) => { + return ( + + + + ) +}; + +export const archiveMapPin = (props) => { + return ( + + + + ) +}; + +export const archivePerson = (props) => { + return ( + + + + ) +}; + +export const archiveMagnifyingGlass = (props) => { + return ( + + + + ) +}; + +export const duplicateIcon = (props) => { + return ( + + + + ) +}; + +export const reactivateIcon = (props) => { + return ( + + + + ) +}; + +export const deleteIcon = (props) => { + return ( + + + + ) +}; + + + diff --git a/client/src/components/home/HomeComponents.jsx b/client/src/components/home/HomeComponents.jsx index 87b3331..b68201d 100644 --- a/client/src/components/home/HomeComponents.jsx +++ b/client/src/components/home/HomeComponents.jsx @@ -1,26 +1,32 @@ import React, { useCallback, useEffect, useRef, useState } from "react"; import { - AlertDialog, - AlertDialogBody, - AlertDialogContent, - AlertDialogFooter, - AlertDialogHeader, - AlertDialogOverlay, + Alert, + AlertTitle, + AlertDescription, Box, Button, + Checkbox, Flex, HStack, + Icon, IconButton, Menu, MenuButton, MenuItem, MenuList, + Modal, + ModalBody, + ModalContent, + ModalFooter, + ModalHeader, + ModalOverlay, Table, TableContainer, Tbody, Td, Text, + Textarea, Th, Thead, Tr, @@ -29,6 +35,15 @@ import { VStack, } from "@chakra-ui/react"; +import { + DeleteIcon, + ChevronDownIcon, +} from "@chakra-ui/icons"; + +import { + Info, +} from "lucide-react"; + import { useNavigate } from "react-router-dom"; // Icon imports @@ -47,6 +62,7 @@ import noneSvg from "../../assets/icons/none.svg"; import { useBackendContext } from "../../contexts/hooks/useBackendContext"; import { ProgramFiltersModal } from "./ProgramFiltersModal"; import StatusTooltip from "./StatusIcon"; +import {ArchiveIcon} from '../../assets/ArchiveIcon'; import "./Home.css"; @@ -83,6 +99,8 @@ export const ProgramsTable = () => { const navigate = useNavigate(); const toast = useToast(); const cancelRef = useRef(); + const [selectedAction, setSelectedAction] = useState("Archive"); + const [selectedIcon, setSelectedIcon] = useState(ArchiveIcon); // Fetch Programs const fetchPrograms = useCallback(async () => { @@ -96,6 +114,8 @@ export const ProgramsTable = () => { return; } + const activePrograms = response.data.filter(program => program.archived === false); + // Format date and time const formatDate = (dateString) => { const date = new Date(dateString); @@ -118,7 +138,7 @@ export const ProgramsTable = () => { }; // Format programs data for display - const programsData = response.data.map((program) => { + const programsData = activePrograms.map((program) => { // Handle multiple instructors or payees: const instructor = Array.isArray(program.instructorName) ? program.instructorName.join(", ") @@ -260,15 +280,41 @@ export const ProgramsTable = () => { navigate(`/programs/${id}`); }; - const handleDeleteClick = (id, e) => { - e.stopPropagation(); - setProgramToDelete(id); + + const handleDeactivate = (id, e) => { + console.log("what") onOpen(); + setProgramToDelete(id) + }; + + const handleSelect = (action, iconSrc) => { + setSelectedAction(action); + setSelectedIcon(iconSrc); }; + const handleArchive = async () => { + try { + await backend.put(`/events/${programToDelete}`, { + archived: true + }); + setPrograms((prev) => prev.filter((p) => p.id !== programToDelete)); + onClose(); + + } catch (error) { + console.log("Couldn't deactivate", error); + } + } + + const handleConfirm = async () => { + if (selectedAction === "Archive") { + await handleArchive() + } else if (selectedAction === "Delete"){ + await handleDelete(); + } + } + // Delete Program and all related records const handleDelete = async () => { - if (programToDelete) { try { const response = await backend.delete(`/events/${programToDelete}`); if (response.data.result === "success") { @@ -296,7 +342,6 @@ export const ProgramsTable = () => { isClosable: true, }); } - } onClose(); }; @@ -490,11 +535,10 @@ export const ProgramsTable = () => { Edit handleDeleteClick(program.id, e)} - className="menu-item menu-item--delete" + icon={} + onClick={() => handleDeactivate(program.id)} > - - Delete + Deactivate @@ -507,8 +551,67 @@ export const ProgramsTable = () => { - + + + + Deactivate Program? + + + + + + + + The deactivation fee deadline for this program is + Thu. 1/2/2025. + + + + + Waive fee + + + + + + Reason for Deactivation: + +