- {/* span needed so Tooltip can attach ref to a DOM element */}
{itemEl}
) : (
@@ -167,8 +224,7 @@ export default function BaseSidebar({
})}
- {/* Spacer */}
-
+
{/* Profile zone */}
@@ -177,13 +233,13 @@ export default function BaseSidebar({
placement="right"
>
setAnchorEl(e.currentTarget)}
className={`${styles.profileZone} ${collapsed ? styles.profileZoneCollapsed : ""}`}
aria-label="Open profile menu"
aria-haspopup="true"
- aria-expanded={popoverOpen}
+ aria-expanded={Boolean(anchorEl)}
>
- {avatarEl}
+ {avatar}
{!collapsed && session?.user?.name && (
- {/* Profile popover */}
-
- {session?.user?.email && (
- <>
-
- {session.user.email}
-
- {
- closePopover();
- router.push("/volunteer/profile");
- }}
- sx={{ py: 1.25, gap: 1.5 }}
- >
-
-
- Profile
-
- {
- closePopover();
- router.push("/volunteer/profile?tab=settings");
- }}
- sx={{ py: 1.25, gap: 1.5 }}
- >
-
-
- Settings
-
-
- ) : (
- <>
- {
- closePopover();
- router.push("/staff/profile");
- }}
- sx={{ py: 1.25, gap: 1.5 }}
- >
-
-
- Profile
-
- {
- closePopover();
- router.push("/staff/profile?tab=settings");
- }}
- sx={{ py: 1.25, gap: 1.5 }}
- >
-
-
- Settings
-
-
- )}
- {
- closePopover();
- handleSignOut();
- }}
- sx={{ py: 1.25, gap: 1.5, color: "error.main" }}
- >
-
-
- Sign Out
-
-
-
+ open={Boolean(anchorEl)}
+ onClose={() => setAnchorEl(null)}
+ />
+
);
}
diff --git a/src/components/layout/mobile-top-bar.tsx b/src/components/layout/mobile-top-bar.tsx
new file mode 100644
index 0000000..fa2cb17
--- /dev/null
+++ b/src/components/layout/mobile-top-bar.tsx
@@ -0,0 +1,119 @@
+"use client";
+import MenuIcon from "@mui/icons-material/Menu";
+import PersonIcon from "@mui/icons-material/Person";
+import { Avatar, Box, ButtonBase, IconButton } from "@mui/material";
+import Image from "next/image";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useSession } from "next-auth/react";
+import { type JSX, useState } from "react";
+
+import ProfileMenu from "./profile-menu";
+
+type MobileTopBarProps = {
+ onOpenNav: () => void;
+};
+
+/**
+ * MobileTopBar
+ *
+ * Sticky app bar shown only on viewports below the md breakpoint.
+ * Houses the hamburger (opens the sidebar drawer), the Persevere logo
+ * (links back to the active portal's dashboard), and the profile avatar
+ * (opens the shared ProfileMenu popover).
+ */
+export default function MobileTopBar({
+ onOpenNav,
+}: MobileTopBarProps): JSX.Element {
+ const { data: session } = useSession();
+ const pathname = usePathname();
+ const [anchorEl, setAnchorEl] = useState
(null);
+
+ const dashboardHref = pathname?.startsWith("/staff")
+ ? "/staff/dashboard"
+ : pathname?.startsWith("/volunteer")
+ ? "/volunteer/dashboard"
+ : "/home";
+
+ return (
+ t.zIndex.appBar,
+ bgcolor: "primary.main",
+ color: "primary.contrastText",
+ pt: "env(safe-area-inset-top, 0px)",
+ px: 1,
+ alignItems: "center",
+ justifyContent: "space-between",
+ flexShrink: 0,
+ }}
+ >
+
+
+
+ setAnchorEl(e.currentTarget)}
+ aria-label="Open profile menu"
+ aria-haspopup="true"
+ aria-expanded={Boolean(anchorEl)}
+ sx={{
+ minWidth: 44,
+ minHeight: 44,
+ display: "flex",
+ alignItems: "center",
+ justifyContent: "center",
+ borderRadius: "50%",
+ "&:hover": { bgcolor: "rgba(255,255,255,0.12)" },
+ }}
+ >
+ {session?.user?.image ? (
+
+
+ )}
+
+
+ setAnchorEl(null)}
+ anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
+ transformOrigin={{ vertical: "top", horizontal: "right" }}
+ />
+
+ );
+}
diff --git a/src/components/layout/profile-menu.tsx b/src/components/layout/profile-menu.tsx
new file mode 100644
index 0000000..dc6c6ec
--- /dev/null
+++ b/src/components/layout/profile-menu.tsx
@@ -0,0 +1,113 @@
+"use client";
+import LogoutIcon from "@mui/icons-material/Logout";
+import PersonIcon from "@mui/icons-material/Person";
+import SettingsIcon from "@mui/icons-material/Settings";
+import {
+ Divider,
+ ListItemIcon,
+ MenuItem,
+ Popover,
+ Typography,
+} from "@mui/material";
+import { useRouter } from "next/navigation";
+import { useSession } from "next-auth/react";
+import type { JSX } from "react";
+
+import { useSignOut } from "@/hooks/use-auth";
+
+type ProfileMenuProps = {
+ anchorEl: HTMLElement | null;
+ open: boolean;
+ onClose: () => void;
+ /**
+ * Anchor origin for the popover. Defaults match the sidebar footer
+ * placement (popover opens upward from a bottom-anchored trigger).
+ */
+ anchorOrigin?: React.ComponentProps["anchorOrigin"];
+ transformOrigin?: React.ComponentProps["transformOrigin"];
+};
+
+/**
+ * ProfileMenu
+ *
+ * Shared identity popover used by both the desktop sidebar footer and the
+ * mobile top-bar profile avatar. Reads the active session and routes to the
+ * correct portal's profile/settings pages.
+ */
+export default function ProfileMenu({
+ anchorEl,
+ open,
+ onClose,
+ anchorOrigin = { vertical: "top", horizontal: "center" },
+ transformOrigin = { vertical: "bottom", horizontal: "center" },
+}: ProfileMenuProps): JSX.Element {
+ const router = useRouter();
+ const { data: session } = useSession();
+ const handleSignOut = useSignOut();
+
+ const isVolunteer = session?.user?.role === "volunteer";
+ const profileBase = isVolunteer ? "/volunteer/profile" : "/staff/profile";
+
+ const go = (href: string): void => {
+ onClose();
+ router.push(href);
+ };
+
+ return (
+
+ {session?.user?.email && (
+ <>
+
+ {session.user.email}
+
+ go(profileBase)} sx={{ py: 1.25, gap: 1.5 }}>
+
+
+ Profile
+
+ go(`${profileBase}?tab=settings`)}
+ sx={{ py: 1.25, gap: 1.5 }}
+ >
+
+
+ Settings
+
+ {
+ onClose();
+ handleSignOut();
+ }}
+ sx={{ py: 1.25, gap: 1.5, color: "error.main" }}
+ >
+
+
+ Sign Out
+
+
+ );
+}
diff --git a/src/components/layout/role-layout.tsx b/src/components/layout/role-layout.tsx
index e42fac1..45fe6e3 100644
--- a/src/components/layout/role-layout.tsx
+++ b/src/components/layout/role-layout.tsx
@@ -1,35 +1,63 @@
"use client";
import { Box } from "@mui/material";
-import { ReactNode } from "react";
+import {
+ cloneElement,
+ isValidElement,
+ type JSX,
+ type ReactElement,
+ type ReactNode,
+ useState,
+} from "react";
+
+import MobileTopBar from "./mobile-top-bar";
type RoleLayoutProps = {
- sidebar: ReactNode;
+ /**
+ * The portal sidebar (StaffSidebar or VolunteerSidebar). On mobile,
+ * RoleLayout injects `mobileOpen` and `onMobileClose` so the sidebar
+ * renders inside a temporary Drawer.
+ */
+ sidebar: ReactElement<{
+ mobileOpen?: boolean;
+ onMobileClose?: () => void;
+ }>;
children: ReactNode;
};
/**
* RoleLayout
*
- * Shared layout wrapper combining a sidebar and main content area. Used by all
- * role-specific layouts (staff, admin, volunteer). The sidebar handles its own
- * session/profile state; this wrapper is a pure structural shell.
- *
- * Note: overflow is "hidden" so each page controls its own scrolling behavior.
+ * Shared shell combining a sidebar and main content area. Used by the staff,
+ * admin, and volunteer route trees. On viewports below the md breakpoint the
+ * sidebar collapses into a drawer opened by the MobileTopBar's hamburger; on
+ * larger viewports the sidebar remains permanent on the left.
*/
export default function RoleLayout({
sidebar,
children,
-}: RoleLayoutProps): ReactNode {
+}: RoleLayoutProps): JSX.Element {
+ const [mobileOpen, setMobileOpen] = useState(false);
+
+ const sidebarWithDrawerProps = isValidElement(sidebar)
+ ? cloneElement(sidebar, {
+ mobileOpen,
+ onMobileClose: () => setMobileOpen(false),
+ })
+ : sidebar;
+
return (
-
- {sidebar}
+ setMobileOpen(true)} />
+
+ {sidebarWithDrawerProps}
{children}
-
+
);
}
diff --git a/src/components/layout/staff-sidebar.tsx b/src/components/layout/staff-sidebar.tsx
index 5508637..09fe08b 100644
--- a/src/components/layout/staff-sidebar.tsx
+++ b/src/components/layout/staff-sidebar.tsx
@@ -150,7 +150,15 @@ const ApprovalsIcon = (): JSX.Element => (
);
-export default function StaffSidebar(): JSX.Element {
+type StaffSidebarProps = {
+ mobileOpen?: boolean;
+ onMobileClose?: () => void;
+};
+
+export default function StaffSidebar({
+ mobileOpen,
+ onMobileClose,
+}: StaffSidebarProps = {}): JSX.Element {
const { data: session } = useSession();
const user = session?.user as { role?: string } | undefined;
@@ -193,5 +201,11 @@ export default function StaffSidebar(): JSX.Element {
];
}, [isAdmin]);
- return
+ {children}
+
+ );
+ }
+
+ return (
+ <>
+
+
+
+ setOpen(false)}
+ slotProps={{
+ paper: {
+ sx: {
+ borderTopLeftRadius: 16,
+ borderTopRightRadius: 16,
+ maxHeight: "85vh",
+ pb: "env(safe-area-inset-bottom, 0px)",
+ },
+ },
+ }}
+ >
+
+
+ {title}
+
+ setOpen(false)}
+ sx={{ color: "text.secondary" }}
+ >
+
+
+
+
+ {children}
+
+
+
+ {onClear && (
+
+ Clear all
+
+ )}
+ setOpen(false)} fullWidth>
+ Done
+
+
+
+
+ );
+}
diff --git a/src/components/shared/index.ts b/src/components/shared/index.ts
index 1f0adbc..fa9df8b 100644
--- a/src/components/shared/index.ts
+++ b/src/components/shared/index.ts
@@ -2,6 +2,9 @@ export { AsyncContent } from "./async-content";
export { ChangePasswordSection } from "./change-password-section";
export { ConfirmDialog } from "./confirm-dialog";
export { DetailField } from "./detail-field";
+export { FilterDrawer } from "./filter-drawer";
+export { MobileDialog } from "./mobile-dialog";
export { ModalTitleBar } from "./modal-title-bar";
export { PageHeader } from "./page-header";
+export { ResponsiveTable } from "./responsive-table";
export { TablePaginationFooter } from "./table-pagination-footer";
diff --git a/src/components/shared/mobile-dialog.tsx b/src/components/shared/mobile-dialog.tsx
new file mode 100644
index 0000000..9c2d4d3
--- /dev/null
+++ b/src/components/shared/mobile-dialog.tsx
@@ -0,0 +1,24 @@
+"use client";
+import Dialog, { type DialogProps } from "@mui/material/Dialog";
+import type { JSX } from "react";
+
+import { useIsMobile } from "@/hooks/use-is-mobile";
+
+/**
+ * MobileDialog
+ *
+ * Drop-in replacement for MUI `` that automatically goes full-screen
+ * on viewports below the md breakpoint. Forwards every other prop.
+ *
+ * The theme already collapses the paper border-radius to 0 and applies
+ * safe-area padding when `fullScreen` is true (see `MuiDialog.styleOverrides`),
+ * so consumers just need to swap the import.
+ *
+ * Pass `fullScreen` explicitly to override (e.g. `fullScreen={false}` for
+ * dialogs that should stay centered even on mobile).
+ */
+export function MobileDialog(props: DialogProps): JSX.Element {
+ const isMobile = useIsMobile();
+ const { fullScreen, ...rest } = props;
+ return
+
+
{eyebrow && (
{title}
@@ -63,7 +67,15 @@ export function PageHeader({
)}
{actions && (
-
+ *": { width: { xs: "100%", sm: "auto" } },
+ }}
+ >
{actions}
)}
diff --git a/src/components/shared/responsive-table.tsx b/src/components/shared/responsive-table.tsx
new file mode 100644
index 0000000..421e7e4
--- /dev/null
+++ b/src/components/shared/responsive-table.tsx
@@ -0,0 +1,57 @@
+"use client";
+import { Box } from "@mui/material";
+import { type JSX, type ReactNode } from "react";
+
+import { useIsMobile } from "@/hooks/use-is-mobile";
+
+type ResponsiveTableProps = {
+ /** Rendered when viewport is at md or wider. Typically a ``. */
+ desktop: ReactNode;
+ /** Rendered below md. Typically a vertical stack of cards. */
+ mobile: ReactNode;
+};
+
+/**
+ * ResponsiveTable
+ *
+ * Branches between a desktop table view and a mobile card-list view at the
+ * md breakpoint. The component itself is intentionally thin — it does not
+ * own loading or empty states; consumers provide those inside the slot they
+ * pass. This keeps the per-page table semantics (sticky header, fixed
+ * heights, overlay spinners) intact on desktop while letting mobile use a
+ * looser card-stack layout.
+ *
+ * @example
+ *
+ * …
+ * {items.map(renderRow)}
+ *
+ * }
+ * mobile={
+ *
+ * {items.map(renderMobileCard)}
+ *
+ * }
+ * />
+ */
+export function ResponsiveTable({
+ desktop,
+ mobile,
+}: ResponsiveTableProps): JSX.Element {
+ const isMobile = useIsMobile();
+ return (
+
+ {isMobile ? mobile : desktop}
+
+ );
+}
diff --git a/src/components/staff/approvals/attendance-modal.tsx b/src/components/staff/approvals/attendance-modal.tsx
index 98512e1..862322a 100644
--- a/src/components/staff/approvals/attendance-modal.tsx
+++ b/src/components/staff/approvals/attendance-modal.tsx
@@ -7,7 +7,6 @@ import {
Box,
Button,
CircularProgress,
- Dialog,
DialogContent,
Stack,
Table,
@@ -19,7 +18,7 @@ import {
} from "@mui/material";
import { JSX } from "react";
-import { ModalTitleBar } from "@/components/shared";
+import { MobileDialog, ModalTitleBar } from "@/components/shared";
import { StatusBadge } from "@/components/ui";
import type {
AttendanceEvent,
@@ -74,7 +73,7 @@ export default function AttendanceModal({
});
return (
-
+
@@ -225,6 +224,6 @@ export default function AttendanceModal({
)}
-
+
);
}
diff --git a/src/components/staff/approvals/hours-tab.tsx b/src/components/staff/approvals/hours-tab.tsx
index 8e71927..f548595 100644
--- a/src/components/staff/approvals/hours-tab.tsx
+++ b/src/components/staff/approvals/hours-tab.tsx
@@ -94,9 +94,9 @@ export default function HoursTab({
-
+
+
@@ -210,6 +209,6 @@ export default function LogHoursModal({
{submitting ?
-
+
);
}
diff --git a/src/components/staff/approvals/rsvps-tab.tsx b/src/components/staff/approvals/rsvps-tab.tsx
index 558ec4f..87560d0 100644
--- a/src/components/staff/approvals/rsvps-tab.tsx
+++ b/src/components/staff/approvals/rsvps-tab.tsx
@@ -106,9 +106,9 @@ export default function RsvpsTab({
-
+
;
compact?: boolean;
+ initialView?: ViewName;
};
export default function Calendar({
@@ -47,8 +55,14 @@ export default function Calendar({
onEventDrop,
eventColors,
compact = false,
+ initialView,
}: CalendarProps): JSX.Element {
const theme = useTheme();
+ const isMobile = useIsMobile();
+ // Touch devices can't reliably drag FullCalendar events — pixel precision
+ // fights with native scroll. Make the calendar tap-only on mobile and let
+ // the existing detail/edit modal handle changes.
+ const effectiveReadOnly = readOnly || isMobile;
const [selectedEvent, setSelectedEvent] = useState(
null,
);
@@ -56,7 +70,9 @@ export default function Calendar({
// Custom toolbar state (staff full-view only)
const calendarRef = useRef(null);
- const [currentView, setCurrentView] = useState("dayGridMonth");
+ const [currentView, setCurrentView] = useState(
+ initialView ?? "dayGridMonth",
+ );
const [currentTitle, setCurrentTitle] = useState(
new Date().toLocaleDateString("en-US", { month: "long", year: "numeric" }),
);
@@ -202,13 +218,22 @@ export default function Calendar({
sx={{
display: "flex",
justifyContent: "space-between",
- alignItems: "center",
+ alignItems: { xs: "stretch", md: "center" },
+ flexDirection: { xs: "column", md: "row" },
+ gap: { xs: 1.5, md: 0 },
mb: 1.5,
flexShrink: 0,
}}
>
{/* Left: view toggle + category filter */}
-
+
{/* Right: prev / month-year title / next / today */}
-
+
{
const color =
arg.event.backgroundColor || theme.palette.primary.main;
@@ -554,14 +592,16 @@ export default function Calendar({
{arg.dayNumberText.replace(".", "")}
)}
- height={compact ? "auto" : "100%"}
- nowIndicator={!compact}
- scrollTime={compact ? undefined : currentTimeStr}
+ height={
+ compact ? (isMobile ? "calc(100dvh - 180px)" : "auto") : "100%"
+ }
+ nowIndicator={!compact || isMobile}
+ scrollTime={!compact || isMobile ? currentTimeStr : undefined}
/>
{/* View Event Modal (readOnly volunteer calendar only) */}
- {
setIsViewModalOpen(false);
@@ -700,7 +740,7 @@ export default function Calendar({
Close
-
+
);
}
diff --git a/src/components/staff/calendar/event-detail-modal.tsx b/src/components/staff/calendar/event-detail-modal.tsx
index b5805a6..7942b3c 100644
--- a/src/components/staff/calendar/event-detail-modal.tsx
+++ b/src/components/staff/calendar/event-detail-modal.tsx
@@ -9,7 +9,6 @@ import {
Chip,
CircularProgress,
Divider,
- Drawer,
FormControl,
IconButton,
InputLabel,
@@ -21,6 +20,7 @@ import {
import { enqueueSnackbar } from "notistack";
import { JSX, useEffect, useState } from "react";
+import { MobileDialog } from "@/components/shared";
import { EmptyState, getRsvpStatusColor, StatusBadge } from "@/components/ui";
import type { CalendarEvent } from "@/hooks/use-calendar-events";
import { useCalendarEvents } from "@/hooks/use-calendar-events";
@@ -301,12 +301,7 @@ export default function EventDetailModal({
const maxVol = event?.extendedProps?.maxVolunteers;
return (
-
+
{/* Header */}
-
+
);
}
diff --git a/src/components/staff/calendar/event-form-modal.tsx b/src/components/staff/calendar/event-form-modal.tsx
index d3b518e..0b6def4 100644
--- a/src/components/staff/calendar/event-form-modal.tsx
+++ b/src/components/staff/calendar/event-form-modal.tsx
@@ -6,7 +6,6 @@ import {
Box,
Button,
Chip,
- Drawer,
FormControl,
FormControlLabel,
FormLabel,
@@ -23,6 +22,7 @@ import {
import { enqueueSnackbar } from "notistack";
import { JSX, useEffect, useState } from "react";
+import { MobileDialog } from "@/components/shared";
import { useCalendarEvents } from "@/hooks/use-calendar-events";
import { useEventCategories } from "@/hooks/use-event-categories";
import { useOpportunitySkills } from "@/hooks/use-opportunity-skills";
@@ -207,12 +207,7 @@ export default function EventFormModal({
};
return (
-
+
{/* Header */}
+
-
+
occurrences
@@ -555,6 +563,6 @@ export default function EventFormModal({
-
+
);
}
diff --git a/src/components/staff/communications/communications-list.tsx b/src/components/staff/communications/communications-list.tsx
index 2e5d4ca..ab64a6e 100644
--- a/src/components/staff/communications/communications-list.tsx
+++ b/src/components/staff/communications/communications-list.tsx
@@ -1,5 +1,6 @@
"use client";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import CreateIcon from "@mui/icons-material/Create";
import DeleteIcon from "@mui/icons-material/Delete";
import PersonIcon from "@mui/icons-material/Person";
@@ -8,6 +9,7 @@ import {
Alert,
Avatar,
Box,
+ Button,
CircularProgress,
Divider,
Fab,
@@ -26,6 +28,7 @@ import { type ReactElement, useCallback, useState } from "react";
import { ConfirmDialog } from "@/components/shared/confirm-dialog";
import { EmptyState } from "@/components/ui";
import { useCommunications } from "@/hooks/use-communications";
+import { useIsMobile } from "@/hooks/use-is-mobile";
import ComposeModal from "./compose-modal";
@@ -42,6 +45,7 @@ export type CommunicationsListProps = {
export default function CommunicationsList({
userRole,
}: CommunicationsListProps): ReactElement {
+ const isMobile = useIsMobile();
const {
communications,
selectedCommunication,
@@ -53,6 +57,7 @@ export default function CommunicationsList({
loadCommunications,
selectCommunication,
deleteCommunication,
+ clearSelection,
} = useCommunications();
const [composeModalOpen, setComposeModalOpen] = useState(false);
const [confirmDelete, setConfirmDelete] = useState<{
@@ -116,6 +121,7 @@ export default function CommunicationsList({
+ {/* Back button (mobile only) */}
+ {isMobile && (
+
-
+
);
}
diff --git a/src/components/staff/onboarding/document-manager.tsx b/src/components/staff/onboarding/document-manager.tsx
index 1320ebb..24777b8 100644
--- a/src/components/staff/onboarding/document-manager.tsx
+++ b/src/components/staff/onboarding/document-manager.tsx
@@ -12,7 +12,6 @@ import Button from "@mui/material/Button";
import Card from "@mui/material/Card";
import Chip from "@mui/material/Chip";
import CircularProgress from "@mui/material/CircularProgress";
-import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import FormControl from "@mui/material/FormControl";
@@ -39,7 +38,12 @@ import {
useState,
} from "react";
-import { ConfirmDialog, ModalTitleBar, PageHeader } from "@/components/shared";
+import {
+ ConfirmDialog,
+ MobileDialog,
+ ModalTitleBar,
+ PageHeader,
+} from "@/components/shared";
import { EmptyState } from "@/components/ui";
import {
type CreateDocumentInput,
@@ -473,7 +477,12 @@ export default function DocumentManager(): JSX.Element {
{/* Add / Edit Modal */}
-
+
-
+
setPreviewTarget(null)}
maxWidth="lg"
@@ -689,7 +698,7 @@ export default function DocumentManager(): JSX.Element {
)}
)}
-
+
);
}
diff --git a/src/components/staff/people-management/people-list.tsx b/src/components/staff/people-management/people-list.tsx
index f8bdd6f..15f3428 100644
--- a/src/components/staff/people-management/people-list.tsx
+++ b/src/components/staff/people-management/people-list.tsx
@@ -1,7 +1,6 @@
"use client";
import DownloadIcon from "@mui/icons-material/Download";
-import FilterListIcon from "@mui/icons-material/FilterList";
import GroupAddIcon from "@mui/icons-material/GroupAdd";
import PersonAddIcon from "@mui/icons-material/PersonAdd";
import UploadFileIcon from "@mui/icons-material/UploadFile";
@@ -11,28 +10,20 @@ import {
Button,
Checkbox,
CircularProgress,
- Dialog,
- DialogActions,
- DialogContent,
- Divider,
Drawer,
FormControl,
FormControlLabel,
- FormGroup,
- IconButton,
InputLabel,
MenuItem,
Select,
SelectChangeEvent,
- Stack,
TextField,
- Tooltip,
Typography,
} from "@mui/material";
import { useSnackbar } from "notistack";
import { type ReactElement, useCallback, useState } from "react";
-import { ModalTitleBar, PageHeader } from "@/components/shared";
+import { FilterDrawer, ModalTitleBar, PageHeader } from "@/components/shared";
import ImportVolunteerModal from "@/components/staff/volunteer-management/import-modal";
import AddVolunteerModal from "@/components/staff/volunteer-management/volunteer-add-modal";
import VolunteerProfile from "@/components/staff/volunteer-management/volunteer-profile";
@@ -56,10 +47,12 @@ export default function PeopleList(): ReactElement {
const [statusFilter, setStatusFilter] = useState("");
const [typeFilter, setTypeFilter] = useState();
const [alumniFilter, setAlumniFilter] = useState();
- const [filterModalOpen, setFilterModalOpen] = useState(false);
- const hasAdditionalFilters =
- typeFilter !== undefined || alumniFilter !== undefined;
+ const activeFilterCount =
+ (roleFilter ? 1 : 0) +
+ (statusFilter ? 1 : 0) +
+ (typeFilter ? 1 : 0) +
+ (alumniFilter ? 1 : 0);
const { activeTypes } = useVolunteerTypes();
@@ -151,6 +144,8 @@ export default function PeopleList(): ReactElement {
);
const handleClearFilters = useCallback((): void => {
+ setRoleFilter("");
+ setStatusFilter("");
setTypeFilter(undefined);
setAlumniFilter(undefined);
setPage(1);
@@ -204,8 +199,7 @@ export default function PeopleList(): ReactElement {
}
}, [selectedVolunteerId, resendCredentials, enqueueSnackbar]);
- // Show pagination only when role-filtered (paginated fetch); hide for "all" (full fetch)
- const showPagination = roleFilter !== "";
+ // Pagination is now applied to all views (even when no role filter is active)
return (
- Role
-
- All roles
- Admin
- Staff
- Volunteer
-
-
-
- Status
-
- All statuses
- Active
- Inactive
- Pending
-
-
-
- setFilterModalOpen(true)}
- sx={{
- backgroundColor: hasAdditionalFilters
- ? "primary.main"
- : "transparent",
- color: hasAdditionalFilters
- ? "primary.contrastText"
- : "primary.main",
- "&:hover": {
- backgroundColor: hasAdditionalFilters
- ? "primary.dark"
- : "action.hover",
- },
- }}
- >
-
-
+
+
+ Role
+
+ All roles
+ Admin
+ Staff
+ Volunteer
+
+
+
+ Status
+
+ All statuses
+ Active
+ Inactive
+ Pending
+
+
+
+ Volunteer Type
+
+ All types
+ {activeTypes.map((t) => (
+
+ {t.name}
+
+ ))}
+
+
+
{total} result{total === 1 ? "" : "s"}
@@ -370,7 +373,6 @@ export default function PeopleList(): ReactElement {
onLimitChange={handleLimitChange}
onPersonClick={(p) => void handlePersonClick(p)}
loading={loading}
- showPagination={showPagination}
/>
@@ -463,78 +465,6 @@ export default function PeopleList(): ReactElement {
void loadPeople();
}}
/>
-
- {/* More filters dialog (volunteer type + alumni) */}
- setFilterModalOpen(false)}
- fullWidth
- maxWidth="sm"
- >
- setFilterModalOpen(false)}
- />
-
-
-
-
- Volunteer Type
-
-
-
- Volunteer Type
-
-
-
- All Types
-
- {activeTypes.map((t) => (
-
- {t.name}
-
- ))}
-
-
-
-
-
- Additional Filters
-
-
-
-
-
-
-
-
- Clear Filters
-
- setFilterModalOpen(false)} variant="contained">
- Apply Filters
-
-
-
);
}
diff --git a/src/components/staff/people-management/people-table.tsx b/src/components/staff/people-management/people-table.tsx
index d592086..84fc270 100644
--- a/src/components/staff/people-management/people-table.tsx
+++ b/src/components/staff/people-management/people-table.tsx
@@ -3,6 +3,7 @@
import {
Avatar,
Box,
+ Card,
Chip,
type ChipProps,
CircularProgress,
@@ -17,7 +18,7 @@ import {
} from "@mui/material";
import { type ReactElement, useCallback } from "react";
-import { TablePaginationFooter } from "@/components/shared";
+import { ResponsiveTable, TablePaginationFooter } from "@/components/shared";
import { EmptyState } from "@/components/ui";
import type { Person, PersonRole } from "@/hooks/use-people";
@@ -95,156 +96,299 @@ export default function PeopleTable({
overflow: "hidden",
}}
>
-
- {loading && (
-
-
- )}
-
-
-
-
- Name
-
-
- Role
-
-
- Status
-
-
- Hours
-
-
- Joined
-
-
-
-
- {people.length > 0 ? (
- people.map((person) => {
- const status = deriveStatus(person);
- const roleMeta = ROLE_META[person.personType];
- return (
- handleRowClick(person)}
- onKeyDown={(e) => {
- if (e.key === "Enter" || e.key === " ") {
- e.preventDefault();
- handleRowClick(person);
- }
+
+
+
+
+ Name
+
+
-
+ Role
+
+
+ Status
+
+
+ Hours
+
+
+ Joined
+
+
+
+
+ {people.length > 0 ? (
+ people.map((person) => {
+ const status = deriveStatus(person);
+ const roleMeta = ROLE_META[person.personType];
+ return (
+ handleRowClick(person)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ handleRowClick(person);
+ }
+ }}
+ tabIndex={0}
+ role="button"
+ aria-label={`View profile for ${person.firstName} ${person.lastName}`}
+ sx={{
+ cursor: "pointer",
+ "&:hover": { backgroundColor: "action.hover" },
+ }}
+ >
+
+
+
+ {`${person.firstName?.[0] ?? ""}${person.lastName?.[0] ?? ""}`.toUpperCase() ||
+ "?"}
+
+
+
+ {person.firstName} {person.lastName}
+
+
+ {person.email}
+
+
+
+
+
+
+
+
+
+
+ {person.personType === "volunteer"
+ ? (person.totalHours ?? 0).toFixed(1)
+ : "—"}
+
+
+
+
+ {fmtJoined(person.createdAt)}
+
+
+
+ );
+ })
+ ) : loading ? null : (
+
+
+
+
+ )}
+
+
+
+ }
+ mobile={
+
+ {loading ? (
+
+
+ ) : people.length === 0 ? (
+
+ {people.map((person) => {
+ const status = deriveStatus(person);
+ const roleMeta = ROLE_META[person.personType];
+ const initials =
+ `${person.firstName?.[0] ?? ""}${person.lastName?.[0] ?? ""}`.toUpperCase() ||
+ "?";
+ return (
+ handleRowClick(person)}
+ sx={{
+ cursor: "pointer",
+ "&:hover": { bgcolor: "action.hover" },
+ }}
+ >
- {`${person.firstName?.[0] ?? ""}${person.lastName?.[0] ?? ""}`.toUpperCase() ||
- "?"}
+ {initials}
-
-
+
+
{person.firstName} {person.lastName}
-
+
{person.email}
+
+
+ {person.personType === "volunteer"
+ ? `${(person.totalHours ?? 0).toFixed(1)} hrs`
+ : "—"}{" "}
+ · {fmtJoined(person.createdAt)}
+
+
-
-
-
-
-
-
-
- {person.personType === "volunteer"
- ? (person.totalHours ?? 0).toFixed(1)
- : "—"}
-
-
-
-
- {fmtJoined(person.createdAt)}
-
-
-
- );
- })
- ) : loading ? null : (
-
-
-
-
+
+ );
+ })}
+
)}
-
-
-
+
+ }
+ />
{showPagination && (
-
-
+
);
}
diff --git a/src/components/staff/volunteer-management/import-modal.tsx b/src/components/staff/volunteer-management/import-modal.tsx
index 56e3747..8989e38 100644
--- a/src/components/staff/volunteer-management/import-modal.tsx
+++ b/src/components/staff/volunteer-management/import-modal.tsx
@@ -9,7 +9,6 @@ import {
Box,
Button,
CircularProgress,
- Dialog,
DialogActions,
DialogContent,
Paper,
@@ -25,7 +24,7 @@ import {
import Papa from "papaparse";
import { type ReactElement, useCallback, useRef, useState } from "react";
-import { ModalTitleBar } from "@/components/shared";
+import { MobileDialog, ModalTitleBar } from "@/components/shared";
import { useVolunteerImport } from "@/hooks/use-volunteer-import";
type Stage = "idle" | "preview" | "importing" | "results";
@@ -149,7 +148,7 @@ export default function ImportVolunteerModal({
}, [reset]);
return (
-
+
@@ -365,6 +364,6 @@ export default function ImportVolunteerModal({
)}
-
+
);
}
diff --git a/src/components/staff/volunteer-management/skills-modal.tsx b/src/components/staff/volunteer-management/skills-modal.tsx
index c155103..d2f4586 100644
--- a/src/components/staff/volunteer-management/skills-modal.tsx
+++ b/src/components/staff/volunteer-management/skills-modal.tsx
@@ -5,7 +5,6 @@ import {
Button,
Checkbox,
CircularProgress,
- Dialog,
DialogActions,
DialogContent,
DialogTitle,
@@ -16,6 +15,7 @@ import {
import { useSnackbar } from "notistack";
import { JSX, useCallback, useEffect, useState } from "react";
+import { MobileDialog } from "@/components/shared";
import { useSkills } from "@/hooks/use-skills";
type CurrentSkill = {
@@ -191,7 +191,7 @@ export default function SkillsModal({
]);
return (
-
+
Edit {mode === "skills" ? "Skills" : "Interests"}
@@ -279,6 +279,6 @@ export default function SkillsModal({
{saving ? "Saving..." : "Save"}
-
+
);
}
diff --git a/src/components/staff/volunteer-management/volunteer-add-modal.tsx b/src/components/staff/volunteer-management/volunteer-add-modal.tsx
index 1a6dbae..e8e2437 100644
--- a/src/components/staff/volunteer-management/volunteer-add-modal.tsx
+++ b/src/components/staff/volunteer-management/volunteer-add-modal.tsx
@@ -9,7 +9,6 @@ import {
Button,
Checkbox,
CircularProgress,
- Dialog,
DialogActions,
DialogContent,
DialogTitle,
@@ -31,6 +30,7 @@ import {
import { type ReactElement, useCallback, useMemo, useState } from "react";
import validator from "validator";
+import { MobileDialog } from "@/components/shared";
import { useVolunteerTypes } from "@/hooks/use-volunteer-types";
import { useVolunteers } from "@/hooks/use-volunteers";
@@ -237,7 +237,7 @@ export default function AddVolunteerModal({
);
return (
-
+
+
+
);
}
diff --git a/src/components/staff/volunteer-management/volunteer-list.tsx b/src/components/staff/volunteer-management/volunteer-list.tsx
index de6dbf8..e2cd13b 100644
--- a/src/components/staff/volunteer-management/volunteer-list.tsx
+++ b/src/components/staff/volunteer-management/volunteer-list.tsx
@@ -2,7 +2,6 @@
import AddIcon from "@mui/icons-material/Add";
import DownloadIcon from "@mui/icons-material/Download";
-import FilterListIcon from "@mui/icons-material/FilterList";
import UploadFileIcon from "@mui/icons-material/UploadFile";
import {
Alert,
@@ -10,28 +9,20 @@ import {
Button,
Checkbox,
CircularProgress,
- Dialog,
- DialogActions,
- DialogContent,
- Divider,
Drawer,
FormControl,
FormControlLabel,
- FormGroup,
- IconButton,
InputLabel,
MenuItem,
Select,
SelectChangeEvent,
- Stack,
TextField,
- Tooltip,
Typography,
} from "@mui/material";
import { useSnackbar } from "notistack";
import { type ReactElement, useCallback, useState } from "react";
-import { ModalTitleBar, PageHeader } from "@/components/shared";
+import { FilterDrawer, ModalTitleBar, PageHeader } from "@/components/shared";
import { useVolunteerDetail } from "@/hooks/use-volunteer-detail";
import { useVolunteerTypes } from "@/hooks/use-volunteer-types";
import {
@@ -89,7 +80,6 @@ export default function VolunteerList(): ReactElement {
const [addModalOpen, setAddModalOpen] = useState(false);
const [importModalOpen, setImportModalOpen] = useState(false);
- const [filterModalOpen, setFilterModalOpen] = useState(false);
const handleSearchChange = useCallback(
(event: React.ChangeEvent): void => {
@@ -127,6 +117,7 @@ export default function VolunteerList(): ReactElement {
);
const handleClearFilters = useCallback((): void => {
+ setStatusFilter("");
setFilters({});
setPage(1);
}, [setPage]);
@@ -171,14 +162,14 @@ export default function VolunteerList(): ReactElement {
}
}, [selectedVolunteerId, resendCredentials, enqueueSnackbar]);
- const hasAdditionalFilters =
- filters.type !== undefined || filters.alumni !== undefined;
+ const activeFilterCount =
+ (statusFilter ? 1 : 0) + (filters.type ? 1 : 0) + (filters.alumni ? 1 : 0);
return (
- Status
-
- All statuses
- Active
- Inactive
- Pending
-
-
-
- setFilterModalOpen(true)}
- sx={{
- backgroundColor: hasAdditionalFilters
- ? "primary.main"
- : "transparent",
- color: hasAdditionalFilters
- ? "primary.contrastText"
- : "primary.main",
- "&:hover": {
- backgroundColor: hasAdditionalFilters
- ? "primary.dark"
- : "action.hover",
- },
- }}
- >
-
-
+
+
+ Status
+
+ All statuses
+ Active
+ Inactive
+ Pending
+
+
+
+ Volunteer Type
+
+ All types
+ {activeTypes.map((t) => (
+
+ {t.name}
+
+ ))}
+
+
+
{total} result{total === 1 ? "" : "s"}
@@ -375,78 +375,6 @@ export default function VolunteerList(): ReactElement {
void loadVolunteers();
}}
/>
-
- {/* More filters modal (type + alumni) */}
- setFilterModalOpen(false)}
- fullWidth
- maxWidth="sm"
- >
- setFilterModalOpen(false)}
- />
-
-
-
-
- Volunteer Type
-
-
-
- Volunteer Type
-
-
-
- All Types
-
- {activeTypes.map((t) => (
-
- {t.name}
-
- ))}
-
-
-
-
-
- Additional Filters
-
-
-
-
-
-
-
-
- Clear Filters
-
- setFilterModalOpen(false)} variant="contained">
- Apply Filters
-
-
-
);
}
diff --git a/src/components/staff/volunteer-management/volunteer-overview-tab.tsx b/src/components/staff/volunteer-management/volunteer-overview-tab.tsx
index 950763d..b42c5c5 100644
--- a/src/components/staff/volunteer-management/volunteer-overview-tab.tsx
+++ b/src/components/staff/volunteer-management/volunteer-overview-tab.tsx
@@ -22,7 +22,6 @@ import {
Chip,
CircularProgress,
Collapse,
- Dialog,
DialogActions,
DialogContent,
Divider,
@@ -42,7 +41,12 @@ import {
import { useSnackbar } from "notistack";
import { JSX, useCallback, useEffect, useState } from "react";
-import { ConfirmDialog, DetailField, ModalTitleBar } from "@/components/shared";
+import {
+ ConfirmDialog,
+ DetailField,
+ MobileDialog,
+ ModalTitleBar,
+} from "@/components/shared";
import {
getBackgroundCheckColor,
getBackgroundCheckLabel,
@@ -344,7 +348,7 @@ function StaffEditVolunteerModal({
};
return (
-
+
-
+
);
}
@@ -565,7 +569,7 @@ function StaffSignDocumentDialog({
signing: boolean;
}): JSX.Element {
return (
-
+
{doc && (
<>
+
);
}
diff --git a/src/components/staff/volunteer-management/volunteer-table.tsx b/src/components/staff/volunteer-management/volunteer-table.tsx
index 7d9f287..e14b0dc 100644
--- a/src/components/staff/volunteer-management/volunteer-table.tsx
+++ b/src/components/staff/volunteer-management/volunteer-table.tsx
@@ -4,6 +4,7 @@ import PersonIcon from "@mui/icons-material/Person";
import {
Avatar,
Box,
+ Card,
Chip,
type ChipProps,
CircularProgress,
@@ -18,7 +19,7 @@ import {
} from "@mui/material";
import { type ReactElement, useCallback } from "react";
-import { TablePaginationFooter } from "@/components/shared";
+import { ResponsiveTable, TablePaginationFooter } from "@/components/shared";
import { EmptyState } from "@/components/ui";
import { type Volunteer } from "./types";
@@ -84,140 +85,254 @@ export default function VolunteerTable({
overflow: "hidden",
}}
>
-
- {loading && (
-
-
- )}
-
-
-
-
- Name
-
-
- Status
-
-
- Hours
-
-
- Joined
-
-
-
-
- {volunteers.length > 0 ? (
- volunteers.map((volunteer) => {
- const status = deriveStatus(volunteer);
- return (
- handleRowClick(volunteer.id)}
- onKeyDown={(e) => {
- if (e.key === "Enter" || e.key === " ") {
- e.preventDefault();
- handleRowClick(volunteer.id);
- }
+
+
+
+
+ Name
+
+
+ Status
+
+
+ Hours
+
+
-
+ Joined
+
+
+
+
+ {volunteers.length > 0 ? (
+ volunteers.map((volunteer) => {
+ const status = deriveStatus(volunteer);
+ return (
+ handleRowClick(volunteer.id)}
+ onKeyDown={(e) => {
+ if (e.key === "Enter" || e.key === " ") {
+ e.preventDefault();
+ handleRowClick(volunteer.id);
+ }
+ }}
+ tabIndex={0}
+ role="button"
+ aria-label={`View profile for ${volunteer.firstName} ${volunteer.lastName}`}
+ sx={{
+ cursor: "pointer",
+ "&:hover": { backgroundColor: "action.hover" },
+ }}
+ >
+
+
+
+ {!volunteer.profilePicture && (
+
+
+
+ {volunteer.firstName} {volunteer.lastName}
+
+
+ {volunteer.email}
+
+
+
+
+
+
+
+
+ {(volunteer.totalHours ?? 0).toFixed(1)}
+
+
+
+
+ {fmtJoined(volunteer.createdAt)}
+
+
+
+ );
+ })
+ ) : loading ? null : (
+
+
+
+
+ )}
+
+
+
+ }
+ mobile={
+
+ {loading ? (
+
+
+ ) : volunteers.length === 0 ? (
+
+ {volunteers.map((volunteer) => {
+ const status = deriveStatus(volunteer);
+ return (
+ handleRowClick(volunteer.id)}
+ sx={{
+ cursor: "pointer",
+ "&:hover": { bgcolor: "action.hover" },
+ }}
+ >
- {!volunteer.profilePicture && (
-
-
-
+
- {volunteer.firstName} {volunteer.lastName}
+
+ {volunteer.firstName} {volunteer.lastName}
+
+
+
+ {volunteer.email}
- {volunteer.email}
+ {(volunteer.totalHours ?? 0).toFixed(1)} hrs ·{" "}
+ {fmtJoined(volunteer.createdAt)}
-
-
-
-
-
- {(volunteer.totalHours ?? 0).toFixed(1)}
-
-
-
-
- {fmtJoined(volunteer.createdAt)}
-
-
-
- );
- })
- ) : loading ? null : (
-
-
-
-
+
+ );
+ })}
+
)}
-
-
-
+
+ }
+ />
+
-
+
);
}
diff --git a/src/components/volunteer/availability-editor.tsx b/src/components/volunteer/availability-editor.tsx
index 32a7af5..3c5f43a 100644
--- a/src/components/volunteer/availability-editor.tsx
+++ b/src/components/volunteer/availability-editor.tsx
@@ -99,8 +99,10 @@ export default function AvailabilityEditor({
border: 1,
borderColor: "grey.200",
borderRadius: 2,
- maxHeight: 340,
- overflowY: "scroll",
+ // On mobile, let the parent scroll naturally — an inner scrollbar
+ // fights with native touch scroll and cramps the time pickers.
+ maxHeight: { xs: "none", sm: 340 },
+ overflowY: { xs: "visible", sm: "scroll" },
width: "100%",
}}
>
diff --git a/src/components/volunteer/dashboard-recommendations.tsx b/src/components/volunteer/dashboard-recommendations.tsx
index c66e8d1..055be0f 100644
--- a/src/components/volunteer/dashboard-recommendations.tsx
+++ b/src/components/volunteer/dashboard-recommendations.tsx
@@ -41,7 +41,7 @@ export default function DashboardRecommendations({
effectiveRsvpStatus !== "declined";
return (
-
+
{recommendations.map((opp) => (
diff --git a/src/components/volunteer/onboarding/document-viewer.tsx b/src/components/volunteer/onboarding/document-viewer.tsx
index 3eeeb50..1993d1f 100644
--- a/src/components/volunteer/onboarding/document-viewer.tsx
+++ b/src/components/volunteer/onboarding/document-viewer.tsx
@@ -8,9 +8,9 @@ import Button from "@mui/material/Button";
import Card from "@mui/material/Card";
import Chip from "@mui/material/Chip";
import CircularProgress from "@mui/material/CircularProgress";
-import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
+import Stack from "@mui/material/Stack";
import Table from "@mui/material/Table";
import TableBody from "@mui/material/TableBody";
import TableCell from "@mui/material/TableCell";
@@ -21,7 +21,11 @@ import Typography from "@mui/material/Typography";
import { useSnackbar } from "notistack";
import { type JSX, useCallback, useEffect, useState } from "react";
-import { ModalTitleBar } from "@/components/shared";
+import {
+ MobileDialog,
+ ModalTitleBar,
+ ResponsiveTable,
+} from "@/components/shared";
import { useOnboardingDocuments } from "@/hooks/use-onboarding-documents";
type DocumentViewerProps = {
@@ -107,66 +111,159 @@ export default function DocumentViewer({
)}
{!loading && !error && documents.length > 0 && (
-
-
-
-
-
- Name
-
-
- Category
-
-
- Status
-
-
- Completed
-
-
-
-
+
+
+
+
+
+ Name
+
+
+ Category
+
+
+ Status
+
+
+ Completed
+
+
+
+
+ {documents.map((doc) => {
+ const response = responseMap.get(doc.id);
+ const hasResponded = response !== undefined;
+
+ return (
+ setSelectedDocId(doc.id)}
+ sx={{ cursor: "pointer" }}
+ >
+
+
+
+
+ {doc.title}
+
+ {doc.description && (
+
+ {doc.description}
+
+ )}
+
+
+
+
+
+ {typeLabel(doc.type)}
+
+
+
+ {doc.actionType === "informational" ? (
+
+ —
+
+ ) : hasResponded ? (
+
+
+
+ {response?.signedAt
+ ? new Date(
+ response.signedAt,
+ ).toLocaleDateString()
+ : "—"}
+
+
+
+ );
+ })}
+
+
+
+ }
+ mobile={
+
{documents.map((doc) => {
const response = responseMap.get(doc.id);
const hasResponded = response !== undefined;
return (
- setSelectedDocId(doc.id)}
- sx={{ cursor: "pointer" }}
+ sx={{
+ cursor: "pointer",
+ display: "flex",
+ alignItems: "center",
+ gap: 1.5,
+ py: 1.5,
+ px: 0.5,
+ borderBottom: "1px solid",
+ borderColor: "grey.100",
+ "&:last-child": { borderBottom: "none" },
+ "&:hover": { bgcolor: "action.hover" },
+ borderRadius: 1,
+ }}
>
-
-
-
-
- {doc.title}
-
- {doc.description && (
-
- {doc.description}
-
- )}
-
-
-
-
-
- {typeLabel(doc.type)}
+
+
+ {doc.title}
-
-
+ {doc.description && (
+
+ {doc.description}
+
+ )}
+
+
{doc.actionType === "informational" ? (
-
+
—
) : hasResponded ? (
@@ -183,20 +280,18 @@ export default function DocumentViewer({
variant="outlined"
/>
)}
-
-
-
+
{response?.signedAt
? new Date(response.signedAt).toLocaleDateString()
: "—"}
-
-
+
+
);
})}
-
-
-
+
+ }
+ />
)}
@@ -284,7 +379,7 @@ function DocumentModal({
const hasResponded = response !== undefined;
return (
-
+
{doc && (
<>
{doc.type === "pdf" && (
-
+