Add birth date to patients and users

app/(dashboard)/patients/PatientForm.tsx

@@ -9,6 +9,7 @@
 import { z } from 'zod'
 import { type User } from '@/modules/firebase/utils'
 import { Button } from '@/packages/design-system/src/components/Button'
+import { DatePicker } from '@/packages/design-system/src/components/DatePicker'
 import { Input } from '@/packages/design-system/src/components/Input'
 import {
   Select,
@@ -25,10 +26,11 @@
 } from '@/packages/design-system/src/modules/auth/user'
 
 export const patientFormSchema = z.object({
-  email: z.string().min(1, 'Email is required'),
+  email: z.string().email().min(1, 'Email is required'),
   displayName: z.string(),
   invitationCode: z.string(),
-  clinician: z.string(),
+  clinician: z.string().min(1, 'Clinician is required'),
+  dateOfBirth: z.date().optional(),
 })
 
 export type PatientFormSchema = z.infer<typeof patientFormSchema>
@@ -40,7 +42,10 @@
     email: string | null
   }>
   userInfo?: Pick<UserInfo, 'email' | 'displayName' | 'uid'>
-  user?: Pick<User, 'organization' | 'invitationCode' | 'clinician'>
+  user?: Pick<
+    User,
+    'organization' | 'invitationCode' | 'clinician' | 'dateOfBirth'
+  >
   onSubmit: (data: PatientFormSchema) => Promise<void>
   clinicianPreselectId?: string
 }
@@ -60,6 +65,7 @@
       displayName: userInfo?.displayName ?? '',
       invitationCode: user?.invitationCode ?? '',
       clinician: user?.clinician ?? clinicianPreselectId ?? '',
+      dateOfBirth: user?.dateOfBirth ? new Date(user.dateOfBirth) : undefined,
     },
   })
 
@@ -81,6 +87,20 @@
         label="Display name"
         render={({ field }) => <Input {...field} />}
       />
+      <Field
+        control={form.control}
+        name="dateOfBirth"
+        label="Date of Birth"
+        render={({ field }) => (
+          <DatePicker
+            mode="single"
+            selected={field.value}
+            onSelect={(date) => field.onChange(date)}
+            defaultMonth={field.value}
+            toYear={new Date().getFullYear()}
+          />
+        )}
+      />
       {isEdit && (
         <Field
           control={form.control}

app/(dashboard)/patients/[id]/page.tsx

@@ -90,6 +90,7 @@ const PatientPage = async ({ params }: PatientPageProps) => {
       invitationCode: form.invitationCode,
       clinician: form.clinician,
       organization: clinician.organization,
+      dateOfBirth: form.dateOfBirth?.toISOString(),
     }
     if (resourceType === 'user') {
       await callables.updateUserInformation({

app/(dashboard)/patients/invite/page.tsx

@@ -31,9 +31,10 @@
         type: UserType.patient,
         clinician: form.clinician,
         organization: clinician.organization,
+        dateOfBirth: form.dateOfBirth?.toISOString(),
       },
     })
-    redirect(routes.patients.patient(result.data.code))
+    redirect(routes.patients.patient(result.data.id))
   }
 
   return (

app/(dashboard)/users/UserForm.tsx

@@ -14,6 +14,7 @@
   UserType,
 } from '@/modules/firebase/utils'
 import { Button } from '@/packages/design-system/src/components/Button'
+import { DatePicker } from '@/packages/design-system/src/components/DatePicker'
 import { Input } from '@/packages/design-system/src/components/Input'
 import {
   Select,
@@ -28,9 +29,10 @@
 
 export const userFormSchema = z
   .object({
-    email: z.string().min(1, 'Email is required'),
+    email: z.string().email().min(1, 'Email is required'),
     displayName: z.string(),
     invitationCode: z.string(),
+    dateOfBirth: z.date().optional(),
     organizationId: z.string().optional(),
     type: z.nativeEnum(UserType),
   })
@@ -49,7 +51,7 @@
 interface UserFormProps {
   organizations: Array<Pick<Organization, 'name' | 'id'>>
   userInfo?: Pick<UserInfo, 'email' | 'displayName' | 'uid'>
-  user?: Pick<User, 'organization' | 'invitationCode'>
+  user?: Pick<User, 'organization' | 'invitationCode' | 'dateOfBirth'>
   type?: UserType
   onSubmit: (data: UserFormSchema) => Promise<void>
 }
@@ -74,6 +76,7 @@
           authUser.user.organization
         : user?.organization,
       invitationCode: user?.invitationCode ?? '',
+      dateOfBirth: user?.dateOfBirth ? new Date(user.dateOfBirth) : undefined,
     },
   })
 
@@ -95,6 +98,20 @@
         label="Display name"
         render={({ field }) => <Input {...field} />}
       />
+      <Field
+        control={form.control}
+        name="dateOfBirth"
+        label="Date of Birth"
+        render={({ field }) => (
+          <DatePicker
+            mode="single"
+            selected={field.value}
+            onSelect={(date) => field.onChange(date)}
+            defaultMonth={field.value}
+            toYear={new Date().getFullYear()}
+          />
+        )}
+      />
       {isEdit && (
         <Field
           control={form.control}

app/(dashboard)/users/[id]/page.tsx

@@ -5,7 +5,7 @@
 //
 // SPDX-License-Identifier: MIT
 //
-import { deleteField, updateDoc } from '@firebase/firestore'
+import { updateDoc } from '@firebase/firestore'
 import { Users } from 'lucide-react'
 import { revalidatePath } from 'next/cache'
 import { notFound } from 'next/navigation'
@@ -45,8 +45,9 @@
     }
     const userData = {
       invitationCode: form.invitationCode,
-      organization: form.organizationId ?? deleteField(),
+      organization: form.organizationId,
       type: form.type,
+      dateOfBirth: form.dateOfBirth?.toISOString(),
     }
     if (resourceType === 'user') {
       await callables.updateUserInformation({

app/(dashboard)/users/invite/page.tsx

@@ -30,9 +30,10 @@
       user: {
         ...(form.organizationId ? { organization: form.organizationId } : {}),
         type: form.type,
+        dateOfBirth: form.dateOfBirth?.toISOString(),
       },
     })
-    redirect(routes.users.user(result.data.code))
+    redirect(routes.users.user(result.data.id))
   }
 
   return (

app/globals.css

@@ -41,4 +41,8 @@ SPDX-License-Identifier: MIT
   .interactive-opacity {
     @apply focus-ring transition-opacity hover:opacity-60;
   }
+
+  .hide-all-hidden [aria-hidden="true"] {
+    display: none;
+  }
 }

modules/firebase/models/baseTypes.ts

@@ -34,8 +34,8 @@ export interface FHIRExtension {
 }
 
 export interface FHIRPeriod {
-  start?: Date
-  end?: Date
+  start?: string
+  end?: string
 }
 
 export interface FHIRRatio {

modules/firebase/utils.ts

@@ -52,9 +52,9 @@ export enum UserType {
 
 export interface User {
   type: UserType
-  dateOfBirth?: Date
+  dateOfBirth?: string | null
   clinician?: string
-  dateOfEnrollment?: Date
+  dateOfEnrollment?: string
   invitationCode?: string
   messagesSettings?: UserMessagesSettings
   organization?: string
@@ -199,9 +199,10 @@ export const getCallables = (functions: Functions) => ({
         clinician?: string
         language?: string
         timeZone?: string
+        dateOfBirth?: string | null
       }
     },
-    { code: string }
+    { id: string }
   >(functions, 'createInvitation'),
   getUsersInformation: httpsCallable<
     GetUsersInformationInput,

packages/design-system/src/components/Calendar/Calendar.tsx

@@ -23,11 +23,16 @@ export const Calendar = ({
   <DayPicker
     showOutsideDays={showOutsideDays}
     className={cn('p-3', className)}
+    captionLayout="dropdown-buttons"
+    fromYear={1900}
+    toYear={2100}
     classNames={{
       months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
       month: 'space-y-4',
       caption: 'flex justify-center pt-1 relative items-center',
       caption_label: 'text-sm font-medium',
+      vhidden: 'hidden',
+      caption_dropdowns: 'hide-all-hidden flex gap-2 text-sm items-center',
       nav: 'space-x-1 flex items-center',
       nav_button: cn(
         buttonVariance({ variant: 'outline' }),

packages/design-system/src/components/DatePicker/DatePicker.tsx

@@ -9,30 +9,34 @@
 import { format, isDate } from 'date-fns'
 import { Calendar as CalendarIcon } from 'lucide-react'
 import { type ComponentProps } from 'react'
-import { type DayPicker } from 'react-day-picker'
 import { cn } from '../../utils/className'
 import { Button } from '../Button'
 import { Calendar } from '../Calendar'
 import { Popover, PopoverTrigger, PopoverContent } from '../Popover'
 
-export type DatePickerProps = ComponentProps<typeof DayPicker>
+export type DatePickerProps = ComponentProps<typeof Calendar>
 
-export const DatePicker = ({ selected, ...props }: DatePickerProps) => (
-  <Popover>
-    <PopoverTrigger asChild>
-      <Button
-        variant="outline"
-        className={cn(
-          '!w-[280px] !justify-start !text-left',
-          !selected && '!text-muted-foreground',
-        )}
-      >
-        <CalendarIcon className="size-4" />
-        {selected && isDate(selected) ? format(selected, 'PPP') : 'Pick a date'}
-      </Button>
-    </PopoverTrigger>
-    <PopoverContent className="!w-auto !p-0">
-      <Calendar {...props} />
-    </PopoverContent>
-  </Popover>
-)
+export const DatePicker = (props: DatePickerProps) => {
+  const { selected } = props
+  return (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          className={cn(
+            '!w-full !justify-start !bg-surface-primary !text-left !text-sm',
+            !selected && '!text-muted-foreground',
+          )}
+        >
+          <CalendarIcon className="size-4" />
+          {selected && isDate(selected) ?
+            format(selected, 'PPP')
+          : 'Pick a date'}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="!w-auto !p-0">
+        <Calendar {...props} />
+      </PopoverContent>
+    </Popover>
+  )
+}