feat(persons): add CSV import functionality

src/components/icons/IconUpload.tsx

@@ -0,0 +1,52 @@
+import { SvgIcon, SxProps, Theme } from '@mui/material';
+
+type IconProps = {
+  color?: string;
+  width?: number;
+  height?: number;
+  sx?: SxProps<Theme>;
+  className?: string;
+};
+
+const IconUpload = ({
+  color = '#222222',
+  width = 24,
+  height = 24,
+  sx = {},
+  className,
+}: IconProps) => {
+  return (
+    <SvgIcon
+      className={`organized-icon-upload ${className}`}
+      sx={{ width: `${width}px`, height: `${height}px`, ...sx }}
+    >
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <mask
+          id="mask0_2513_2830"
+          style={{ maskType: 'alpha' }}
+          maskUnits="userSpaceOnUse"
+          x="0"
+          y="0"
+          width="24"
+          height="25"
+        >
+          <rect y="0.000488281" width="24" height="24" fill="#D9D9D9" />
+        </mask>
+        <g mask="url(#mask0_2513_2830)">
+          <path
+            d="M9 16V10L6.5 12.5L5.4 11.4L12 4.8L18.6 11.4L17.5 12.5L15 10V16H9ZM6 20C5.45 20 4.979 19.804 4.587 19.412C4.195 19.02 3.99934 18.5493 4 18V15H6V18H18V15H20V18C20 18.55 19.804 19.021 19.412 19.413C19.02 19.805 18.5493 20.0007 18 20H6Z"
+            fill={color}
+          />
+        </g>
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default IconUpload;

src/components/icons/index.ts

@@ -299,3 +299,4 @@ export { default as IconWeek } from './IconWeek';
 export { default as IconWine } from './IconWine';
 export { default as IconWork } from './IconWork';
 export { default as IconYahoo } from './IconYahoo';
+export { default as IconUpload } from './IconUpload';

src/definition/person.ts

@@ -1,8 +1,18 @@
 import { AssignmentCode } from './assignment';
 
-export type PrivilegeType = 'elder' | 'ms';
+export const ALL_PRIVILEGE_TYPES = ['elder', 'ms'] as const;
+export type PrivilegeType = (typeof ALL_PRIVILEGE_TYPES)[number];
 
-export type EnrollmentType = 'AP' | 'FR' | 'FS' | 'FMF';
+export const isPrivilegeType = (value: string): value is PrivilegeType => {
+  return ALL_PRIVILEGE_TYPES.includes(value as PrivilegeType);
+};
+
+export const ALL_ENROLLMENT_TYPES = ['AP', 'FR', 'FS', 'FMF'] as const;
+export type EnrollmentType = (typeof ALL_ENROLLMENT_TYPES)[number];
+
+export const isEnrollmentType = (value: string): value is EnrollmentType => {
+  return ALL_ENROLLMENT_TYPES.includes(value as EnrollmentType);
+};
 
 export type AssignmentType = {
   type: string;

src/features/persons/assignments/useAssignments.tsx

@@ -138,6 +138,31 @@ const useAssignments = () => {
     ];
   }, [t]);
 
+  const assignmentLookup = useMemo(() => {
+    const lookup: Record<string, string> = {};
+
+    assignments.forEach((section) => {
+      const codeHeader = section.header;
+      section.items.forEach((item) => {
+        let codeName: string;
+
+        if (typeof item.code === 'string') {
+          codeName = item.code;
+        } else {
+          codeName = AssignmentCode[item.code] || String(item.code);
+        }
+
+        lookup[codeName] = codeHeader + '.' + item.name;
+      });
+    });
+
+    return lookup;
+  }, [assignments]);
+
+  const getAssignmentName = (code: string): string => {
+    return assignmentLookup[code] || code;
+  };
+
   const handleToggleGroup = async (checked: boolean, id: string) => {
     const newPerson = structuredClone(person);
 
@@ -307,6 +332,7 @@ const useAssignments = () => {
     handleToggleGroup,
     male,
     disqualified,
+    getAssignmentName,
   };
 };
 

src/features/persons/import_persons/index.tsx

@@ -0,0 +1,82 @@
+import { useRef, useState } from 'react';
+import { Box, DialogActions, Stack } from '@mui/material';
+import Dialog from '@components/dialog';
+import Button from '@components/button';
+import usePersonsImport from './useImportPersons';
+import { useAppTranslation } from '@hooks/index';
+import { IconUpload } from '@components/icons';
+import Typography from '@components/typography';
+
+const PersonsImport = () => {
+  const { t } = useAppTranslation();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  const { handleCsvImport, handleDownloadTemplate } = usePersonsImport();
+
+  const handleImportClick = () => {
+    setIsDialogOpen(true);
+  };
+
+  const handleFileSelect = () => {
+    setIsDialogOpen(false);
+    fileInputRef.current?.click();
+  };
+
+  const handleDialogClose = () => {
+    setIsDialogOpen(false);
+  };
+
+  return (
+    <Box>
+      <Button
+        variant="main"
+        startIcon={<IconUpload />}
+        onClick={handleImportClick}
+      >
+        {t('tr_import')}
+      </Button>
+
+      <Dialog open={isDialogOpen} onClose={handleDialogClose}>
+        <Stack spacing="16px">
+          <Typography className="h2">{t('tr_fileImport')}</Typography>
+
+          <Typography
+            variant="body1"
+            gutterBottom
+            sx={{ whiteSpace: 'pre-line' }}
+            color="var(--grey-400)"
+          >
+            {t('tr_csvImportDescription')}
+          </Typography>
+
+          <DialogActions>
+            <Button variant="secondary" onClick={handleDialogClose}>
+              {t('tr_cancel')}
+            </Button>
+            <Button
+              variant="main"
+              onClick={handleDownloadTemplate}
+              // startIcon={<Download />}
+            >
+              {t('tr_templateDownload')}
+            </Button>
+            <Button variant="main" onClick={handleFileSelect}>
+              {t('tr_fileChoose')}
+            </Button>
+          </DialogActions>
+        </Stack>
+      </Dialog>
+
+      <input
+        type="file"
+        hidden
+        ref={fileInputRef}
+        accept=".csv"
+        onChange={handleCsvImport}
+      />
+    </Box>
+  );
+};
+
+export default PersonsImport;