feature/modal-referral-record

src/app/(dashboard)/pacientes/[id]/informacoes/page.tsx

@@ -1,12 +1,12 @@
-import { ForwardIcon, UserRoundIcon } from 'lucide-react'
+import { UserRoundIcon } from 'lucide-react'
 import type { Metadata } from 'next'
 import { redirect } from 'next/navigation'
 
 import { getPatient } from '@/actions/patients/get-patient'
-import { Button } from '@/components/ui/button'
 import { ROUTES } from '@/constants/routes'
 import { PatientForm } from '@/modules/patients/form'
 import { InactivatePatientButton } from '@/modules/patients/inactivate-button'
+import { ReferPatientButton } from '@/modules/referrals/referral-button'
 
 export const metadata: Metadata = {
   title: 'Informações do paciente',
@@ -45,10 +45,7 @@ export default async function Page({
 
         <div className='flex gap-2'>
           {isPatientActive && <InactivatePatientButton patient={patient} />}
-          <Button>
-            <ForwardIcon />
-            Encaminhar paciente
-          </Button>
+          <ReferPatientButton id={patient.id} />
         </div>
       </header>
 

src/modules/referrals/referral-button.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import { ForwardIcon } from 'lucide-react'
+import { useState } from 'react'
+
+import { Dialog, DialogTrigger } from '@/components/ui/dialog'
+
+import type { ButtonProps } from '../../components/ui/button'
+import { ReferralPatientModal } from './referrals-modal'
+
+interface ReferPatientButtonProps extends ButtonProps {
+  id?: string
+}
+export function ReferPatientButton({
+  id,
+  ...props
+}: Readonly<ReferPatientButtonProps>) {
+  const [modalOpen, setModalOpen] = useState(false)
+
+  return (
+    <Dialog open={modalOpen} onOpenChange={setModalOpen}>
+      <DialogTrigger {...props}>
+        <ForwardIcon />
+        Encaminhar paciente
+      </DialogTrigger>
+
+      {modalOpen && (
+        <ReferralPatientModal id={id} onClose={() => setModalOpen(false)} />
+      )}
+    </Dialog>
+  )
+}

src/modules/referrals/referrals-modal.tsx

@@ -0,0 +1,170 @@
+'use client'
+
+import { zodResolver } from '@hookform/resolvers/zod'
+import { ForwardIcon } from 'lucide-react'
+import { FormProvider, useForm } from 'react-hook-form'
+import { toast } from 'sonner'
+import { z } from 'zod'
+
+import { revalidateCache } from '@/actions/cache'
+import { ComboboxInput } from '@/components/form/combobox-input'
+import { DateInput } from '@/components/form/date-input'
+import { FormContainer } from '@/components/form/form-container'
+import { SelectInput } from '@/components/form/select-input'
+import { TextInput } from '@/components/form/text-input'
+import { TextareaInput } from '@/components/form/textarea-input'
+import { Button } from '@/components/ui/button'
+import {
+  DialogClose,
+  DialogContainer,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogIcon,
+  DialogTitle,
+} from '@/components/ui/dialog'
+import { NEXT_CACHE_TAGS, QUERY_CACHE_KEYS } from '@/constants/cache'
+import { usePatientOptions } from '@/hooks/use-patient-otions'
+import { api } from '@/lib/api'
+import { queryClient } from '@/lib/tanstack-query'
+import {
+  PATIENT_CONDITION_ENUM,
+  PATIENT_CONDITION_OPTIONS,
+} from '@/types/patients'
+import {
+  REFERRAL_CATEGORY_ENUM,
+  REFERRAL_CATEGORY_OPTIONS,
+} from '@/types/referrals'
+
+interface ReferralModalProps {
+  onClose(): void
+  id?: string
+}
+
+export function ReferralPatientModal({ onClose, id }: ReferralModalProps) {
+  const { patientOptions } = usePatientOptions()
+  const referralFormSchema = z.object({
+    patient_id: z.string().uuid('Paciente é obrigatório'),
+    date: z.string().datetime('A data é obrigatória'),
+    category: z.enum(REFERRAL_CATEGORY_ENUM, {
+      message: 'Categoria é obrigatório',
+    }),
+    condition: z.enum(PATIENT_CONDITION_ENUM, {
+      message: 'O quadro é obrigatório',
+    }),
+    annotation: z
+      .string()
+      .max(500)
+      .nullable()
+      .transform((value) => (!value ? null : value)),
+    referred_to: z
+      .string()
+      .nullable()
+      .transform((value) => (!value ? null : value)),
+  })
+  type ReferralsFormSchema = z.infer<typeof referralFormSchema>
+
+  const formMethods = useForm<ReferralsFormSchema>({
+    resolver: zodResolver(referralFormSchema),
+    defaultValues: {
+      patient_id: id ?? '',
+      date: '',
+      category: '',
+      referred_to: '',
+      condition: '',
+      annotation: '',
+    } as unknown as ReferralsFormSchema,
+    mode: 'onBlur',
+  })
+
+  async function submitForm(data: ReferralsFormSchema) {
+    const response = await api('/referrals', {
+      method: 'POST',
+      body: JSON.stringify(data),
+    })
+    if (!response.success) {
+      toast.error(response.message)
+      return
+    }
+    queryClient.invalidateQueries({
+      queryKey: [QUERY_CACHE_KEYS.referrals.list],
+    })
+    revalidateCache(NEXT_CACHE_TAGS.patient(data.patient_id))
+    toast.success(response.message)
+    onClose()
+  }
+
+  return (
+    <DialogContainer className='max-w-2xl'>
+      <DialogHeader icon={<DialogIcon icon={ForwardIcon} />}>
+        <DialogTitle>Encaminhar paciente</DialogTitle>
+      </DialogHeader>
+
+      <DialogContent>
+        <FormProvider {...formMethods}>
+          <FormContainer
+            className='grid gap-4 sm:grid-cols-4'
+            onSubmit={formMethods.handleSubmit(submitForm)}
+          >
+            <ComboboxInput
+              name='patient_id'
+              label='Paciente'
+              className='sm:col-span-4'
+              placeholder='Selecione um paciente'
+              options={patientOptions}
+              isRequired
+              readOnly={!!id}
+            />
+            <SelectInput
+              name='condition'
+              label='Quadro geral'
+              options={PATIENT_CONDITION_OPTIONS}
+              className='sm:col-span-2'
+              isRequired
+            />
+            <DateInput
+              name='date'
+              label='Data do encaminhamento'
+              wrapperClassName='sm:col-span-2'
+              allowFutureDates
+              isRequired
+            />
+            <TextInput
+              name='referred_to'
+              label='Profissional responsável'
+              wrapperClassName='sm:col-span-2'
+            />
+            <SelectInput
+              name='category'
+              label='Categoria'
+              options={REFERRAL_CATEGORY_OPTIONS}
+              className='sm:col-span-2'
+              isRequired
+            />
+            <TextareaInput
+              rows={8}
+              maxLength={500}
+              name='annotation'
+              label='Observações'
+              placeholder='Insira observações sobre o paciente'
+              wrapperClassName='sm:col-span-4'
+            />
+          </FormContainer>
+        </FormProvider>
+      </DialogContent>
+
+      <DialogFooter>
+        <Button
+          className='flex-1'
+          loading={formMethods.formState.isSubmitting}
+          onClick={formMethods.handleSubmit(submitForm)}
+        >
+          Encaminhar
+        </Button>
+        <DialogClose className='flex-1' variant='outline'>
+          Cancelar
+        </DialogClose>
+      </DialogFooter>
+    </DialogContainer>
+  )
+}