feat(reports): counter for meeting attendance records

package.json

@@ -74,6 +74,7 @@
     "validator": "^13.15.35",
     "vite": "^8.0.16",
     "vite-plugin-comlink": "^5.3.0",
+    "web-haptics": "^0.0.6",
     "write-excel-file": "^3.0.6"
   },
   "devDependencies": {

src/components/subpage_navbar/index.tsx

@@ -0,0 +1,102 @@
+import { Box, useTheme } from '@mui/material';
+import { useAtomValue } from 'jotai';
+import { navBarOptionsState } from '@states/app';
+import { IconArrowBack } from '@components/icons';
+import IconButton from '@components/icon_button';
+import Typography from '@components/typography';
+import { SubpageNavbarProps } from './index.types';
+
+/** Navigation bar for subpages/overlays shown as their own screen (e.g. on mobile). */
+const SubpageNavbar = ({
+  title,
+  secondaryTitle,
+  onBack,
+  backLabel,
+  trailing,
+}: SubpageNavbarProps) => {
+  const theme = useTheme();
+
+  const navBarOptions = useAtomValue(navBarOptionsState);
+  const subtitle = secondaryTitle ?? navBarOptions.title;
+
+  const ellipsis = {
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    maxWidth: '100%',
+  } as const;
+
+  return (
+    <Box
+      sx={{
+        flexShrink: 0,
+        minHeight: '62px',
+        display: 'flex',
+        alignItems: 'center',
+        gap: { mobile: '8px', tablet: '16px' },
+        backgroundColor: 'var(--accent-100)',
+        borderBottom: '1px solid var(--accent-200)',
+        padding: { mobile: '4px 16px', tablet: '6px 32px' },
+      }}
+    >
+      <IconButton
+        aria-label={backLabel}
+        onClick={onBack}
+        sx={{
+          flexShrink: 0,
+          marginLeft: '-10px',
+          '&:hover': {
+            backgroundColor: 'var(--accent-200)',
+            '& svg': {
+              transform:
+                theme.direction === 'rtl'
+                  ? 'translateX(-4px) scaleX(-1)'
+                  : 'translateX(4px)',
+            },
+          },
+          '& svg': { transition: 'transform 0.2s ease-in-out' },
+        }}
+      >
+        <IconArrowBack color="var(--black)" />
+      </IconButton>
+
+      <Box
+        sx={{
+          flex: 1,
+          minWidth: 0,
+          display: 'flex',
+          flexDirection: 'column',
+          marginLeft: '-8px',
+          alignItems: { mobile: 'center', tablet688: 'flex-start' },
+          textAlign: { mobile: 'center', tablet688: 'left' },
+        }}
+      >
+        <Typography className="h3" color="var(--black)" sx={ellipsis}>
+          {title}
+        </Typography>
+        {subtitle && (
+          <Typography
+            className="label-small-regular"
+            color="var(--accent-400)"
+            sx={ellipsis}
+          >
+            {subtitle}
+          </Typography>
+        )}
+      </Box>
+
+      {trailing ?? (
+        <Box
+          sx={{
+            width: '22px',
+            height: '22px',
+            flexShrink: 0,
+            display: { mobile: 'block', tablet688: 'none' },
+          }}
+        />
+      )}
+    </Box>
+  );
+};
+
+export default SubpageNavbar;

src/components/subpage_navbar/index.types.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+
+export type SubpageNavbarProps = {
+  title: string;
+  // Falls back to the parent page's navbar title when omitted.
+  secondaryTitle?: string;
+  onBack: () => void;
+  backLabel: string;
+  trailing?: ReactNode;
+};

src/components/tab_switcher/index.tsx

@@ -0,0 +1,111 @@
+import { Box, ButtonBase } from '@mui/material';
+import { cloneElement } from 'react';
+import { TabSwitcherOption, TabSwitcherProps } from './index.types';
+
+/** Reusable segmented tab control. */
+const TabSwitcher = <T extends string = string>({
+  options,
+  value,
+  onChange,
+  ariaLabel,
+  sx,
+}: TabSwitcherProps<T>) => {
+  const activeIndex = options.findIndex((option) => option.value === value);
+  const gap = 8;
+
+  return (
+    <Box
+      role="tablist"
+      aria-label={ariaLabel}
+      sx={{
+        position: 'relative',
+        display: 'flex',
+        gap: `${gap}px`,
+        padding: '4px',
+        borderRadius: 'var(--radius-l)',
+        backgroundColor: 'var(--accent-150)',
+        border: '1px solid var(--accent-200)',
+        ...sx,
+      }}
+    >
+      <Box
+        aria-hidden
+        sx={{
+          position: 'absolute',
+          top: '4px',
+          bottom: '4px',
+          left: '4px',
+          width: `calc((100% - ${(options.length - 1) * gap + 8}px) / ${options.length})`,
+          borderRadius: 'var(--radius-m)',
+          backgroundColor: 'var(--accent-200)',
+          border: '1px solid var(--accent-main)',
+          transform: `translateX(calc(${Math.max(activeIndex, 0)} * (100% + ${gap}px)))`,
+          transition: 'transform 0.2s cubic-bezier(0.22, 1, 0.36, 1)',
+          opacity: activeIndex === -1 ? 0 : 1,
+        }}
+      />
+
+      {options.map((option: TabSwitcherOption<T>) => {
+        const isActive = option.value === value;
+
+        return (
+          <ButtonBase
+            key={option.value}
+            role="tab"
+            aria-selected={isActive}
+            disabled={option.disabled}
+            disableRipple
+            onClick={() => onChange(option.value)}
+            sx={{
+              position: 'relative',
+              zIndex: 1,
+              flex: 1,
+              minWidth: 0,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: '8px',
+              padding: '4px 16px',
+              minHeight: '28px',
+              borderRadius: 'var(--radius-m)',
+              fontFamily: 'inherit',
+              fontSize: '15px',
+              lineHeight: '20px',
+              fontWeight: isActive ? 500 : 400,
+              color: isActive ? 'var(--accent-dark)' : 'var(--accent-400)',
+              transition: 'color 0.16s ease-out',
+              '&.Mui-disabled': { opacity: 0.5 },
+              '& svg, & svg g, & svg g path': {
+                fill: isActive ? 'var(--accent-dark)' : 'var(--accent-400)',
+                transition: 'fill 0.16s ease-out',
+              },
+              '&:focus-visible': { outline: 'var(--accent-main) auto 1px' },
+            }}
+          >
+            {option.icon && (
+              <Box
+                component="span"
+                sx={{ display: 'inline-flex', flexShrink: 0 }}
+              >
+                {cloneElement(option.icon, { width: 20, height: 20 })}
+              </Box>
+            )}
+            <Box
+              component="span"
+              sx={{
+                minWidth: 0,
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+              }}
+            >
+              {option.label}
+            </Box>
+          </ButtonBase>
+        );
+      })}
+    </Box>
+  );
+};
+
+export default TabSwitcher;

src/components/tab_switcher/index.types.ts

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+import { SxProps, Theme } from '@mui/material';
+
+export type TabSwitcherOption<T extends string = string> = {
+  value: T;
+  label: string;
+  icon?: ReactElement<{ width?: number; height?: number; color?: string }>;
+  disabled?: boolean;
+};
+
+export type TabSwitcherProps<T extends string = string> = {
+  options: TabSwitcherOption<T>[];
+  value: T;
+  onChange: (value: T) => void;
+  ariaLabel?: string;
+  sx?: SxProps<Theme>;
+};