family profile

src/caretogether-pwa/package.json

@@ -41,19 +41,23 @@
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "^7.16.0",
     "@vitejs/plugin-react-swc": "^3.7.0",
+    "@vitest/coverage-v8": "^2.0.5",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.8",
     "prettier": "3.3.3",
     "typescript": "^5.5.3",
-    "vite": "^5.3.3"
+    "vite": "^5.3.3",
+    "vitest": "^2.0.5"
   },
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest",
+    "coverage": "vitest run --coverage"
   },
   "eslintConfig": {
     "extends": [

src/caretogether-pwa/src/Families/FamilyCustomField.tsx

@@ -7,11 +7,13 @@ import { useDirectoryModel } from '../Model/DirectoryModel';
 type FamilyCustomFieldProps = {
   familyId: string;
   customField: CompletedCustomFieldInfo | string;
+  isEditable?: boolean;
 };
 
 export function FamilyCustomField({
   familyId,
   customField,
+  isEditable = false,
 }: FamilyCustomFieldProps) {
   const policy = useRecoilValue(policyData);
 
@@ -33,13 +35,14 @@ export function FamilyCustomField({
           ? customField
           : undefined
       }
-      onSave={async (value) => {
+      onSave={async (value: string | boolean | null) => {
         await directoryModel.updateCustomFamilyField(
           familyId,
           customFieldPolicy,
           value
         );
       }}
+      isEditable={isEditable}
     />
   );
 }

src/caretogether-pwa/src/Families/FamilyProfile/CustomFieldEditorNoIcon.tsx

@@ -0,0 +1,112 @@
+import {
+  Autocomplete,
+  Box,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+  TextField,
+} from '@mui/material';
+import {
+  CompletedCustomFieldInfo,
+  CustomField,
+  CustomFieldType,
+  CustomFieldValidation,
+} from '../../GeneratedClient';
+import { useInlineEditor } from '../../Hooks/useInlineEditor';
+
+type CustomFieldEditorProps = {
+  customFieldPolicy: CustomField;
+  completedCustomFieldInfo?: CompletedCustomFieldInfo;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  onSave: (value: any) => Promise<void>;
+  isEditable?: boolean;
+};
+
+export function CustomFieldEditorV2({
+  customFieldPolicy,
+  completedCustomFieldInfo,
+  onSave,
+  isEditable = true,
+}: CustomFieldEditorProps) {
+  const savedValue = completedCustomFieldInfo?.value;
+  const type = customFieldPolicy.type!;
+
+  const editor = useInlineEditor(onSave, savedValue);
+
+  return (
+    <Box style={{ margin: 0 }}>
+      <span>
+        {customFieldPolicy.name}:&nbsp;
+        {editor.editing ? (
+          type === CustomFieldType.Boolean ? (
+            <>
+              <RadioGroup
+                name="boolean-custom-field"
+                row
+                value={
+                  (editor.value as boolean | null) == null
+                    ? ''
+                    : editor.value
+                      ? 'yes'
+                      : 'no'
+                }
+                onChange={(e) =>
+                  editor.setValue(
+                    e.target.value === 'yes'
+                      ? true
+                      : e.target.value === 'no'
+                        ? false
+                        : null
+                  )
+                }
+              >
+                <FormControlLabel value="yes" control={<Radio />} label="Yes" />
+                <FormControlLabel value="no" control={<Radio />} label="No" />
+                <FormControlLabel
+                  value=""
+                  control={<Radio />}
+                  label="(blank)"
+                />
+              </RadioGroup>
+            </>
+          ) : customFieldPolicy.validation ===
+            CustomFieldValidation.SuggestOnly ? (
+            <Autocomplete
+              freeSolo
+              onInputChange={(_event, newValue: string) => {
+                editor.setValue(newValue.length > 0 ? newValue : null);
+              }}
+              options={(customFieldPolicy.validValues || [])
+                .slice()
+                .sort((a, b) => -b.localeCompare(a))}
+              renderInput={(params) => <TextField required {...params} />}
+              inputValue={editor.value || ''}
+            />
+          ) : (
+            <TextField
+              variant="outlined"
+              size="medium"
+              value={editor.value || ''}
+              onChange={(e) => editor.setValue(e.target.value)}
+            />
+          )
+        ) : type === CustomFieldType.Boolean ? (
+          savedValue ? (
+            'Yes'
+          ) : (
+            'No'
+          )
+        ) : (
+          savedValue
+        )}
+      </span>
+      {isEditable && (
+        <>
+          {editor.editButton}
+          {editor.cancelButton}
+          {editor.saveButton}
+        </>
+      )}
+    </Box>
+  );
+}

src/caretogether-pwa/src/Families/FamilyProfile/FamilyCustomFieldV2.tsx

@@ -0,0 +1,48 @@
+import { CompletedCustomFieldInfo, CustomField } from '../../GeneratedClient';
+import { useRecoilValue } from 'recoil';
+import { policyData } from '../../Model/ConfigurationModel';
+import { CustomFieldEditorV2 } from '../../Families/FamilyProfile/CustomFieldEditorNoIcon';
+import { useDirectoryModel } from '../../Model/DirectoryModel';
+
+type FamilyCustomFieldV2Props = {
+  familyId: string;
+  customField: CompletedCustomFieldInfo | string;
+  isEditable?: boolean;
+};
+
+export function FamilyCustomFieldV2({
+  familyId,
+  customField,
+  isEditable = false,
+}: FamilyCustomFieldV2Props) {
+  const policy = useRecoilValue(policyData);
+
+  const savedCustomField =
+    customField instanceof CompletedCustomFieldInfo ? customField : null;
+  const customFieldPolicy = policy.customFamilyFields!.find((cf) =>
+    savedCustomField
+      ? cf.name === savedCustomField.customFieldName
+      : cf.name === customField
+  ) as CustomField;
+
+  const directoryModel = useDirectoryModel();
+
+  return (
+    <CustomFieldEditorV2
+      customFieldPolicy={customFieldPolicy}
+      completedCustomFieldInfo={
+        customField instanceof CompletedCustomFieldInfo
+          ? customField
+          : undefined
+      }
+      onSave={async (value: string | boolean | null) => {
+        await directoryModel.updateCustomFamilyField(
+          familyId,
+          customFieldPolicy,
+          value
+        );
+      }}
+      isEditable={isEditable}
+    />
+  );
+}

src/caretogether-pwa/src/Families/FamilyProfile/RequirementsList.tsx

@@ -0,0 +1,39 @@
+import { Badge, Grid } from '@mui/material';
+import { Referral } from '../../GeneratedClient';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import BlockIcon from '@mui/icons-material/Block';
+import CloseIcon from '@mui/icons-material/Close';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+
+export default function RequirementsList({ referral }: { referral: Referral }) {
+  const completedRequirements = referral.completedRequirements || [];
+  const exemptedRequirements = referral.exemptedRequirements || [];
+  const missingRequirements = referral.missingRequirements || [];
+
+  return (
+    <>
+      <Grid container>
+        <Grid item xs={3}>
+          <Badge color="success" badgeContent={completedRequirements?.length}>
+            <CheckCircleIcon sx={{ color: 'green' }} />
+          </Badge>
+        </Grid>
+        <Grid item xs={3}>
+          <Badge color="warning" badgeContent={exemptedRequirements?.length}>
+            <BlockIcon sx={{ color: 'red' }} />
+          </Badge>
+        </Grid>
+        <Grid item xs={3}>
+          <Badge color="error" badgeContent={missingRequirements?.length}>
+            <CloseIcon sx={{ color: 'red' }} />
+          </Badge>
+        </Grid>
+        <Grid item xs={3}>
+          <Badge color="info">
+            <CalendarTodayIcon sx={{ color: '#005B64' }} />
+          </Badge>
+        </Grid>
+      </Grid>
+    </>
+  );
+}