From 3d3f60cc63e0f1317277f2bacefb0d0291f2e94c Mon Sep 17 00:00:00 2001
From: Carol Silveira <carolinesv.dev@gmail.com>
Date: Wed, 17 Sep 2025 20:54:51 -0300
Subject: [PATCH 1/7] feat: new-service-modal

---
 .../new-service/new-service-modal.tsx         | 151 ++++++++++++++++++
 1 file changed, 151 insertions(+)
 create mode 100644 src/components/new-service/new-service-modal.tsx

diff --git a/src/components/new-service/new-service-modal.tsx b/src/components/new-service/new-service-modal.tsx
new file mode 100644
index 00000000..463d3cbd
--- /dev/null
+++ b/src/components/new-service/new-service-modal.tsx
@@ -0,0 +1,151 @@
+import React, { useState } from 'react'
+
+export default function NewServiceModal() {
+  const [isOpen, setIsOpen] = useState(false)
+  const [patientName, setPatientName] = useState('')
+  const [responsible, setResponsible] = useState('')
+  const [specialty, setSpecialty] = useState('')
+  const [date, setDate] = useState('')
+  const [status, setStatus] = useState('')
+  const [notes, setNotes] = useState('')
+
+  const openModal = () => setIsOpen(true)
+  const closeModal = () => setIsOpen(false)
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    console.log({ patientName, responsible, specialty, date, status, notes })
+    closeModal()
+  }
+
+  return (
+    <>
+      <button
+        onClick={openModal}
+        className='bg-primary text-primary-foreground hover:bg-primary-soft rounded-lg px-4 py-2 font-medium transition'
+      >
+        Novo Atendimento
+      </button>
+
+      {isOpen && (
+        <div className='fixed inset-0 z-50 flex items-center justify-center'>
+          <div
+            className='bg-opacity-30 fixed inset-0 bg-black'
+            onClick={closeModal}
+          />
+
+          <div className='bg-card animate-fade-in z-10 w-full max-w-md scale-100 transform rounded-2xl p-6 shadow-xl transition-transform'>
+            <h3 className='text-foreground mb-4 text-lg font-semibold'>
+              Novo Atendimento
+            </h3>
+
+            <form onSubmit={handleSubmit} className='space-y-4'>
+              <div>
+                <label className='text-foreground mb-1 block text-sm font-medium'>
+                  Nome do paciente *
+                </label>
+                <input
+                  type='text'
+                  value={patientName}
+                  onChange={(e) => setPatientName(e.target.value)}
+                  className='border-border focus:ring-primary w-full rounded-lg border p-2 text-sm focus:ring-2 focus:outline-none'
+                  required
+                />
+              </div>
+
+              <div className='flex gap-4'>
+                <div className='flex-1'>
+                  <label className='text-foreground mb-1 block text-sm font-medium'>
+                    Profissional responsável *
+                  </label>
+                  <input
+                    type='text'
+                    value={responsible}
+                    onChange={(e) => setResponsible(e.target.value)}
+                    className='border-border focus:ring-primary w-full rounded-lg border p-2 text-sm focus:ring-2 focus:outline-none'
+                    required
+                  />
+                </div>
+
+                <div className='flex-1'>
+                  <label className='text-foreground mb-1 block text-sm font-medium'>
+                    Especialidade médica *
+                  </label>
+                  <input
+                    type='text'
+                    value={specialty}
+                    onChange={(e) => setSpecialty(e.target.value)}
+                    className='border-border focus:ring-primary w-full rounded-lg border p-2 text-sm focus:ring-2 focus:outline-none'
+                    required
+                  />
+                </div>
+              </div>
+
+              <div>
+                <label className='text-foreground mb-1 block text-sm font-medium'>
+                  Data do atendimento *
+                </label>
+                <input
+                  type='date'
+                  value={date}
+                  onChange={(e) => setDate(e.target.value)}
+                  className='border-border focus:ring-primary w-full rounded-lg border p-2 text-sm focus:ring-2 focus:outline-none'
+                  required
+                />
+              </div>
+
+              <div>
+                <label className='text-foreground mb-1 block text-sm font-medium'>
+                  Quadro geral
+                </label>
+                <select
+                  value={status}
+                  onChange={(e) => setStatus(e.target.value)}
+                  className='border-border focus:ring-primary w-full rounded-lg border p-2 text-sm focus:ring-2 focus:outline-none'
+                >
+                  <option value=''>Selecionar</option>
+                  <option value='leve'>Leve</option>
+                  <option value='moderado'>Moderado</option>
+                  <option value='grave'>Grave</option>
+                </select>
+              </div>
+
+              <div>
+                <label className='text-foreground mb-1 block text-sm font-medium'>
+                  Observações
+                </label>
+                <textarea
+                  value={notes}
+                  onChange={(e) => setNotes(e.target.value)}
+                  maxLength={200}
+                  rows={4}
+                  className='border-border focus:ring-primary w-full rounded-lg border p-2 text-sm focus:ring-2 focus:outline-none'
+                  placeholder='Insira observações sobre o paciente'
+                />
+                <p className='text-foreground-soft mt-1 text-xs'>
+                  {notes.length}/200
+                </p>
+              </div>
+
+              <div className='mt-4 flex justify-end gap-2'>
+                <button
+                  type='button'
+                  onClick={closeModal}
+                  className='border-border rounded-lg border px-4 py-2 text-sm transition hover:bg-gray-100'
+                >
+                  Cancelar
+                </button>
+                <button
+                  type='submit'
+                  className='bg-primary text-primary-foreground hover:bg-primary-soft rounded-lg px-4 py-2 font-medium transition'
+                >
+                  Cadastrar
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </>
+  )
+}

From 68f37bb4c307399b28d9a51664f1771586871960 Mon Sep 17 00:00:00 2001
From: Carol Silveira <carolinesv.dev@gmail.com>
Date: Thu, 13 Nov 2025 11:47:16 -0300
Subject: [PATCH 2/7] =?UTF-8?q?chore:=20resolvendo=20conflitos=20mantendo?=
 =?UTF-8?q?=20altera=C3=A7=C3=B5es=20do=20remoto?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/images/brand/icon.svg                  |   2 +-
 .../(dashboard)/_cards/patients-by-city.tsx   |   4 +-
 src/app/(dashboard)/_sidebar/container.tsx    |   2 +-
 src/app/(dashboard)/_sidebar/header.tsx       |   8 +-
 src/app/(dashboard)/_sidebar/index.tsx        |  45 +--
 src/app/(dashboard)/_sidebar/menu-section.tsx |  11 +-
 src/app/(dashboard)/aprovacoes/page.tsx       |  10 +-
 src/app/(dashboard)/encaminhados/page.tsx     |   8 +-
 .../equipes/(members-list)/table.tsx          |  11 +-
 .../pacientes/(patients-list)/table.tsx       |   6 +-
 .../[id]/historico/patient-history-table.tsx  |  21 +-
 .../[id]/informacoes/inactivate-button.tsx    |   4 +-
 .../pacientes/[id]/informacoes/page.tsx       |  10 +-
 src/app/paciente/_action-help/index.tsx       |  18 +-
 .../paciente/documentos/enviados/table.tsx    |   4 +-
 .../paciente/documentos/pendentes/page.tsx    |  74 +++--
 src/app/paciente/triagem/hooks.ts             |   6 +-
 .../PatientRequirementCard.tsx                |  69 +++++
 src/components/data-table/header/order-by.tsx |   4 +-
 src/components/patients/form.tsx              | 278 +++++-------------
 src/components/tags/document-status.tsx       |   4 +-
 src/components/ui/date-picker.tsx             |   8 +-
 src/constants/breadcrumbs/dashboard.ts        |  25 +-
 src/constants/routes.ts                       |   4 +
 24 files changed, 271 insertions(+), 365 deletions(-)
 create mode 100644 src/components/PatientRequirementCard/PatientRequirementCard.tsx

diff --git a/public/images/brand/icon.svg b/public/images/brand/icon.svg
index 81e3c2b4..7f0751a9 100644
--- a/public/images/brand/icon.svg
+++ b/public/images/brand/icon.svg
@@ -1,3 +1,3 @@
 <svg width="196" height="183" viewBox="0 0 196 183" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M194.941 91.7156C195.554 91.4099 195.7 91.4718 195.78 92.1228C195.858 92.7599 195.94 93.4014 195.952 94.0427C196.023 97.8286 196.057 101.617 195.741 105.394C195.205 111.78 194.137 118.073 192.415 124.252C190.576 130.849 188.09 137.19 184.921 143.26C181.636 149.551 177.741 155.44 173.164 160.873C170.976 163.469 168.709 165.991 166.264 168.347C160.814 173.598 154.84 178.17 148.356 182.073C147.975 182.303 147.556 182.761 147.115 182.527C146.649 182.28 146.869 181.683 146.867 181.241C146.856 177.881 146.863 174.523 146.863 171.164C146.863 167.841 146.864 164.519 146.862 161.196C146.862 160.661 146.869 160.127 146.688 159.607C145.991 157.612 143.683 156.796 141.736 157.894C139.776 158.999 137.837 160.142 135.889 161.267C127.257 166.249 118.624 171.231 109.994 176.214C106.591 178.178 103.171 180.115 99.7948 182.125C97.8879 183.259 96.1043 183.285 94.161 182.155C84.2801 176.408 74.3669 170.716 64.4667 165.003C61.0948 163.056 57.7029 161.142 54.3622 159.143C52.3642 157.948 50.0396 158.94 49.3563 160.738C49.1343 161.324 49.1337 161.927 49.1337 162.534C49.1337 168.715 49.1402 174.895 49.1219 181.077C49.1209 181.581 49.4011 182.276 48.8456 182.548C48.3974 182.767 47.9285 182.266 47.5135 182.011C41.7661 178.503 36.3811 174.519 31.4305 169.938C23.5177 162.616 17.0179 154.215 11.8602 144.757C6.40032 134.743 2.85576 124.085 1.10437 112.828C0.632472 109.795 0.34828 106.74 0.143433 103.672C-0.0635603 100.562 0.0176308 97.4592 0.00476074 94.3533C0.00476461 94.2816 0.00653058 94.2111 0.00866699 94.1394C0.0601471 92.4845 0.160635 92.4172 1.57312 93.2312C8.32127 97.1179 15.0635 101.015 21.8085 104.907C30.9041 110.156 40.002 115.402 49.0966 120.653C56.5515 124.958 64.0028 129.272 71.4589 133.576C79.3169 138.111 87.1824 142.634 95.035 147.179C96.3446 147.938 97.5913 147.915 98.8837 147.169C112.556 139.272 126.233 131.382 139.906 123.488C151.909 116.559 163.912 109.627 175.915 102.698C182.133 99.1084 188.353 95.5219 194.572 91.9333C194.695 91.8615 194.814 91.7789 194.941 91.7156ZM172.75 36.5134C173.788 35.9171 173.805 35.9101 174.587 36.8796C177.488 40.4725 180.079 44.2802 182.427 48.2527C184.903 52.4418 187.038 56.8026 188.871 61.3113C189.316 62.4063 189.306 62.4045 188.313 62.9783C178.881 68.4308 169.451 73.8896 160.016 79.3357C148.6 85.9251 137.175 92.5032 125.759 99.0916C117.251 104.001 108.746 108.919 100.244 113.841C99.4257 114.314 98.5951 114.703 97.6073 114.571C96.5832 114.722 95.738 114.239 94.8983 113.756C92.112 112.151 89.3309 110.537 86.5468 108.93C78.7197 104.412 70.8904 99.8972 63.0634 95.3777C56.9695 91.8589 50.879 88.332 44.7841 84.8142C37.0191 80.3311 29.2493 75.8548 21.4833 71.3728C16.8426 68.6948 12.2019 66.014 7.56335 63.3328C6.58441 62.7666 6.55215 62.6893 6.97253 61.6394C9.86506 54.4076 13.5656 47.6141 18.0819 41.2693C19.0963 39.8442 20.1631 38.4554 21.2333 37.071C21.8939 36.2153 21.9961 36.2139 22.9042 36.7371C32.7432 42.4137 42.5827 48.0936 52.4218 53.7703C62.8497 59.787 73.2792 65.8002 83.705 71.8191C87.4489 73.9801 91.1859 76.1517 94.9266 78.3181C95.2043 78.4789 95.4869 78.6339 95.7645 78.7947C97.0601 79.5465 98.3359 79.5082 99.6229 78.7478C101.406 77.6936 103.203 76.6606 104.997 75.6257C112.762 71.1427 120.529 66.6624 128.294 62.1794C134.234 58.7507 140.173 55.3182 146.112 51.8894C153.073 47.8708 160.035 43.8533 166.995 39.8347C168.912 38.728 170.829 37.617 172.75 36.5134ZM96.6005 0.00463867C110.64 -0.0156911 122.925 2.40978 134.774 7.1394C135.79 7.54479 136.212 8.11928 136.331 9.15308C136.925 14.3129 136.748 19.4191 135.408 24.4587C133.887 30.1815 131.221 35.3198 127.347 39.7878C122.33 45.5718 116.141 49.5874 108.768 51.7302C104.546 52.9571 100.229 53.4956 95.8466 53.2136C87.939 52.7042 80.7588 50.1115 74.4803 45.2488C66.4795 39.0519 61.619 30.9107 59.8729 20.946C59.1663 16.9105 59.1654 12.8492 59.7723 8.78687C59.8935 7.9773 60.2411 7.54271 60.9979 7.23706C68.1848 4.33809 75.5975 2.26305 83.2616 1.11011C88.1038 0.381907 92.9723 -0.0554202 96.6005 0.00463867Z" fill="#036246"/>
+<path d="M194.941 91.7156C195.554 91.4099 195.7 91.4718 195.78 92.1228C195.858 92.7599 195.94 93.4014 195.952 94.0427C196.023 97.8286 196.057 101.617 195.741 105.394C195.205 111.78 194.137 118.073 192.415 124.252C190.576 130.849 188.09 137.19 184.921 143.26C181.636 149.551 177.741 155.44 173.164 160.873C170.976 163.469 168.709 165.991 166.264 168.347C160.814 173.598 154.84 178.17 148.356 182.073C147.975 182.303 147.556 182.761 147.115 182.527C146.649 182.28 146.869 181.683 146.867 181.241C146.856 177.881 146.863 174.523 146.863 171.164C146.863 167.841 146.864 164.519 146.862 161.196C146.862 160.661 146.869 160.127 146.688 159.607C145.991 157.612 143.683 156.796 141.736 157.894C139.776 158.999 137.837 160.142 135.889 161.267C127.257 166.249 118.624 171.231 109.994 176.214C106.591 178.178 103.171 180.115 99.7948 182.125C97.8879 183.259 96.1043 183.285 94.161 182.155C84.2801 176.408 74.3669 170.716 64.4667 165.003C61.0948 163.056 57.7029 161.142 54.3622 159.143C52.3642 157.948 50.0396 158.94 49.3563 160.738C49.1343 161.324 49.1337 161.927 49.1337 162.534C49.1337 168.715 49.1402 174.895 49.1219 181.077C49.1209 181.581 49.4011 182.276 48.8456 182.548C48.3974 182.767 47.9285 182.266 47.5135 182.011C41.7661 178.503 36.3811 174.519 31.4305 169.938C23.5177 162.616 17.0179 154.215 11.8602 144.757C6.40032 134.743 2.85576 124.085 1.10437 112.828C0.632472 109.795 0.34828 106.74 0.143433 103.672C-0.0635603 100.562 0.0176308 97.4592 0.00476074 94.3533C0.00476461 94.2816 0.00653058 94.2111 0.00866699 94.1394C0.0601471 92.4845 0.160635 92.4172 1.57312 93.2312C8.32127 97.1179 15.0635 101.015 21.8085 104.907C30.9041 110.156 40.002 115.402 49.0966 120.653C56.5515 124.958 64.0028 129.272 71.4589 133.576C79.3169 138.111 87.1824 142.634 95.035 147.179C96.3446 147.938 97.5913 147.915 98.8837 147.169C112.556 139.272 126.233 131.382 139.906 123.488C151.909 116.559 163.912 109.627 175.915 102.698C182.133 99.1084 188.353 95.5219 194.572 91.9333C194.695 91.8615 194.814 91.7789 194.941 91.7156ZM172.75 36.5134C173.788 35.9171 173.805 35.9101 174.587 36.8796C177.488 40.4725 180.079 44.2802 182.427 48.2527C184.903 52.4418 187.038 56.8026 188.871 61.3113C189.316 62.4063 189.306 62.4045 188.313 62.9783C178.881 68.4308 169.451 73.8896 160.016 79.3357C148.6 85.9251 137.175 92.5032 125.759 99.0916C117.251 104.001 108.746 108.919 100.244 113.841C99.4257 114.314 98.5951 114.703 97.6073 114.571C96.5832 114.722 95.738 114.239 94.8983 113.756C92.112 112.151 89.3309 110.537 86.5468 108.93C78.7197 104.412 70.8904 99.8972 63.0634 95.3777C56.9695 91.8589 50.879 88.332 44.7841 84.8142C37.0191 80.3311 29.2493 75.8548 21.4833 71.3728C16.8426 68.6948 12.2019 66.014 7.56335 63.3328C6.58441 62.7666 6.55215 62.6893 6.97253 61.6394C9.86506 54.4076 13.5656 47.6141 18.0819 41.2693C19.0963 39.8442 20.1631 38.4554 21.2333 37.071C21.8939 36.2153 21.9961 36.2139 22.9042 36.7371C32.7432 42.4137 42.5827 48.0936 52.4218 53.7703C62.8497 59.787 73.2792 65.8002 83.705 71.8191C87.4489 73.9801 91.1859 76.1517 94.9266 78.3181C95.2043 78.4789 95.4869 78.6339 95.7645 78.7947C97.0601 79.5465 98.3359 79.5082 99.6229 78.7478C101.406 77.6936 103.203 76.6606 104.997 75.6257C112.762 71.1427 120.529 66.6624 128.294 62.1794C134.234 58.7507 140.173 55.3182 146.112 51.8894C153.073 47.8708 160.035 43.8533 166.995 39.8347C168.912 38.728 170.829 37.617 172.75 36.5134ZM96.6005 0.00463867C110.64 -0.0156911 122.925 2.40978 134.774 7.1394C135.79 7.54479 136.212 8.11928 136.331 9.15308C136.925 14.3129 136.748 19.4191 135.408 24.4587C133.887 30.1815 131.221 35.3198 127.347 39.7878C122.33 45.5718 116.141 49.5874 108.768 51.7302C104.546 52.9571 100.229 53.4956 95.8466 53.2136C87.939 52.7042 80.7588 50.1115 74.4803 45.2488C66.4795 39.0519 61.619 30.9107 59.8729 20.946C59.1663 16.9105 59.1654 12.8492 59.7723 8.78687C59.8935 7.9773 60.2411 7.54271 60.9979 7.23706C68.1848 4.33809 75.5975 2.26305 83.2616 1.11011C88.1038 0.381907 92.9723 -0.0554202 96.6005 0.00463867Z" fill="#008B62"/>
 </svg>
diff --git a/src/app/(dashboard)/_cards/patients-by-city.tsx b/src/app/(dashboard)/_cards/patients-by-city.tsx
index a98c4a6b..c4b8eff0 100644
--- a/src/app/(dashboard)/_cards/patients-by-city.tsx
+++ b/src/app/(dashboard)/_cards/patients-by-city.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useQuery } from '@tanstack/react-query'
-import { ChartPieIcon } from 'lucide-react'
+import { ChartPie } from 'lucide-react'
 import { useState } from 'react'
 
 import { PieChart } from '@/components/charts/pie'
@@ -52,7 +52,7 @@ export function DashboardOverviewPatientsByCity(
 
   return (
     <DashboardCardChart
-      icon={ChartPieIcon}
+      icon={ChartPie}
       title='Cidades'
       menu={
         <SelectPeriod
diff --git a/src/app/(dashboard)/_sidebar/container.tsx b/src/app/(dashboard)/_sidebar/container.tsx
index cfb20da7..804319d3 100644
--- a/src/app/(dashboard)/_sidebar/container.tsx
+++ b/src/app/(dashboard)/_sidebar/container.tsx
@@ -31,7 +31,7 @@ export function DashboardSidebarContainer({
         data-expanded={expanded}
         className={cn(
           'text-disabled hover:text-foreground-soft absolute top-20 -right-4 size-8 rounded-full transition-all delay-75 duration-300 [&_svg]:size-5',
-          'data-[expanded=true]:rotate-180',
+          'data-[expanded=true]:top-6 data-[expanded=true]:-right-4 data-[expanded=true]:rotate-180',
         )}
         onClick={toogleSidebar}
       >
diff --git a/src/app/(dashboard)/_sidebar/header.tsx b/src/app/(dashboard)/_sidebar/header.tsx
index f78f0060..67aa296b 100644
--- a/src/app/(dashboard)/_sidebar/header.tsx
+++ b/src/app/(dashboard)/_sidebar/header.tsx
@@ -13,15 +13,13 @@ export function SidebarHeader() {
   return (
     <header className='relative flex items-center'>
       <Link href={ROUTES.dashboard.main}>
-        <div className='flex items-center'>
+        <div className='flex items-center gap-3'>
           <Image src={icon} alt='Símbolo do SVM' className='size-10 shrink-0' />
           <span
             data-visible={expanded}
-            className='text-primary absolute left-13 text-lg leading-none font-bold whitespace-nowrap opacity-0 transition-opacity duration-200 data-[visible=true]:opacity-100 data-[visible=true]:delay-150'
+            className='text-lg font-bold opacity-0 transition-opacity duration-200 data-[visible=true]:opacity-100 data-[visible=true]:delay-150'
           >
-            Sistema
-            <br />
-            Viver Melhor
+            SVM
           </span>
         </div>
       </Link>
diff --git a/src/app/(dashboard)/_sidebar/index.tsx b/src/app/(dashboard)/_sidebar/index.tsx
index 9242e57b..4bb57fa2 100644
--- a/src/app/(dashboard)/_sidebar/index.tsx
+++ b/src/app/(dashboard)/_sidebar/index.tsx
@@ -1,9 +1,10 @@
 import {
-  BoltIcon,
-  HeartHandshakeIcon,
-  LayoutDashboardIcon,
-  Share2Icon,
-  UserRoundCheckIcon,
+  Bolt,
+  Headset,
+  LayoutDashboard,
+  Share2,
+  UserRoundCheck,
+  UserRoundCog,
   Users2Icon,
 } from 'lucide-react'
 
@@ -36,11 +37,11 @@ export async function DashboardSidebar() {
 
 const SIDEBAR_SECTIONS = [
   {
-    id: 'common',
+    title: 'Geral',
     links: [
       {
         label: 'Visão Geral',
-        icon: <LayoutDashboardIcon />,
+        icon: <LayoutDashboard />,
         path: ROUTES.dashboard.main,
       },
       {
@@ -50,34 +51,34 @@ const SIDEBAR_SECTIONS = [
       },
       {
         label: 'Encaminhados',
-        icon: <Share2Icon />,
-        path: ROUTES.dashboard.referrals.main,
+        icon: <Share2 />,
+        path: ROUTES.dashboard.forwarded.main,
       },
       {
         label: 'Aprovações',
-        icon: <UserRoundCheckIcon />,
+        icon: <UserRoundCheck />,
         path: ROUTES.dashboard.approvals.main,
       },
-      {
-        label: 'Equipe',
-        icon: <HeartHandshakeIcon />,
-        path: ROUTES.dashboard.teams.main,
-      },
     ],
   },
   {
-    id: 'others',
+    title: 'Outros',
     links: [
+      {
+        label: 'Equipes',
+        icon: <UserRoundCog />,
+        path: ROUTES.dashboard.teams.main,
+      },
       {
         label: 'Configurações',
-        icon: <BoltIcon />,
+        icon: <Bolt />,
         path: ROUTES.dashboard.settings.main,
       },
-      // {
-      //   label: 'Suporte',
-      //   icon: <HeadsetIcon />,
-      //   path: ROUTES.dashboard.support.main,
-      // },
+      {
+        label: 'Suporte',
+        icon: <Headset />,
+        path: ROUTES.dashboard.support.main,
+      },
     ],
   },
 ]
diff --git a/src/app/(dashboard)/_sidebar/menu-section.tsx b/src/app/(dashboard)/_sidebar/menu-section.tsx
index e0746f8b..f5c8e869 100644
--- a/src/app/(dashboard)/_sidebar/menu-section.tsx
+++ b/src/app/(dashboard)/_sidebar/menu-section.tsx
@@ -8,7 +8,7 @@ import { cn } from '@/utils/class-name-merge'
 
 interface DashboardSidebarMenuSectionProps {
   sections: {
-    id: string
+    title: string
     links: {
       label: string
       icon: React.ReactNode
@@ -26,7 +26,14 @@ export function DashboardSidebarMenuSection({
   return (
     <section className='mb-auto space-y-8'>
       {sections.map((section) => (
-        <section key={section.id} className='transition-all'>
+        <section key={section.title} className='transition-all'>
+          <p
+            data-visible={expanded}
+            className='text-disabled mb-4 text-xs font-medium uppercase opacity-0 transition-opacity delay-75 data-[visible=true]:opacity-100'
+          >
+            {section.title}
+          </p>
+
           <nav className='flex flex-col gap-2'>
             {section.links.map((link) => {
               const isActive = link.path === pathname
diff --git a/src/app/(dashboard)/aprovacoes/page.tsx b/src/app/(dashboard)/aprovacoes/page.tsx
index 1cbb52bc..841ccf7d 100644
--- a/src/app/(dashboard)/aprovacoes/page.tsx
+++ b/src/app/(dashboard)/aprovacoes/page.tsx
@@ -1,9 +1,15 @@
 import type { Metadata } from 'next'
 
 export const metadata: Metadata = {
-  title: 'Aprovações pendentes',
+  title: 'Aprovações',
 }
 
+import { DashboardContainer } from '@/components/dashboard/container'
+
 export default function Page() {
-  return <p>Aprovações pendentes</p>
+  return (
+    <DashboardContainer className='flex flex-col gap-6'>
+      Aprovações
+    </DashboardContainer>
+  )
 }
diff --git a/src/app/(dashboard)/encaminhados/page.tsx b/src/app/(dashboard)/encaminhados/page.tsx
index b85d5387..c2ed60e3 100644
--- a/src/app/(dashboard)/encaminhados/page.tsx
+++ b/src/app/(dashboard)/encaminhados/page.tsx
@@ -4,6 +4,12 @@ export const metadata: Metadata = {
   title: 'Encaminhados',
 }
 
+import { DashboardContainer } from '@/components/dashboard/container'
+
 export default function Page() {
-  return <p>Dados Gerais</p>
+  return (
+    <DashboardContainer className='flex flex-col gap-6'>
+      Encaminhados
+    </DashboardContainer>
+  )
 }
diff --git a/src/app/(dashboard)/equipes/(members-list)/table.tsx b/src/app/(dashboard)/equipes/(members-list)/table.tsx
index 3b5888ea..7889ff67 100644
--- a/src/app/(dashboard)/equipes/(members-list)/table.tsx
+++ b/src/app/(dashboard)/equipes/(members-list)/table.tsx
@@ -1,11 +1,6 @@
 'use client'
 
-import {
-  ClipboardPenIcon,
-  EllipsisIcon,
-  PlusIcon,
-  XCircleIcon,
-} from 'lucide-react'
+import { ClipboardPen, EllipsisIcon, PlusIcon, XCircle } from 'lucide-react'
 import { useState } from 'react'
 
 import { DataTableHeader } from '@/components/data-table/header'
@@ -145,7 +140,7 @@ export function MembersListTable() {
 
                       <DropdownMenuContent align='end'>
                         <DropdownMenuItem>
-                          <ClipboardPenIcon />
+                          <ClipboardPen />
                           Editar
                         </DropdownMenuItem>
 
@@ -155,7 +150,7 @@ export function MembersListTable() {
                           variant='destructive'
                           className='text-center'
                         >
-                          <XCircleIcon />
+                          <XCircle />
                           Desativar
                         </DropdownMenuItem>
                       </DropdownMenuContent>
diff --git a/src/app/(dashboard)/pacientes/(patients-list)/table.tsx b/src/app/(dashboard)/pacientes/(patients-list)/table.tsx
index 3087dde2..2e277b53 100644
--- a/src/app/(dashboard)/pacientes/(patients-list)/table.tsx
+++ b/src/app/(dashboard)/pacientes/(patients-list)/table.tsx
@@ -16,8 +16,8 @@ import { DataTableHeaderOrderBy } from '@/components/data-table/header/order-by'
 import { DataTableHeaderSearch } from '@/components/data-table/header/search'
 import { Pagination } from '@/components/pagination'
 import { Avatar } from '@/components/ui/avatar'
+import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
-import { NavButton } from '@/components/ui/nav-button'
 import { StatusTag } from '@/components/ui/status-tag'
 import {
   Table,
@@ -120,10 +120,10 @@ export function PatientsListTable() {
             className='w-52'
           />
 
-          <NavButton size='sm' href={ROUTES.dashboard.patients.new}>
+          <Button size='sm'>
             <PlusIcon />
             Novo paciente
-          </NavButton>
+          </Button>
         </DataTableHeaderActions>
       </DataTableHeader>
 
diff --git a/src/app/(dashboard)/pacientes/[id]/historico/patient-history-table.tsx b/src/app/(dashboard)/pacientes/[id]/historico/patient-history-table.tsx
index 837f23b3..6dba14d7 100644
--- a/src/app/(dashboard)/pacientes/[id]/historico/patient-history-table.tsx
+++ b/src/app/(dashboard)/pacientes/[id]/historico/patient-history-table.tsx
@@ -1,12 +1,6 @@
 'use client'
 
-import {
-  CheckIcon,
-  HistoryIcon,
-  PencilIcon,
-  Trash2Icon,
-  XIcon,
-} from 'lucide-react'
+import { Check, History, Pencil, Trash2, X } from 'lucide-react'
 import React, { useState } from 'react'
 
 import { DataTableHeader } from '@/components/data-table/header'
@@ -74,10 +68,7 @@ export default function PatientHistoryTable() {
   return (
     <>
       <DataTableHeader>
-        <DataTableHeaderInfo
-          icon={<HistoryIcon />}
-          title='Histórico do paciente'
-        />
+        <DataTableHeaderInfo icon={<History />} title='Histórico do paciente' />
         <div className='ml-auto flex gap-2'>
           <Button variant='outline'>+ Inativar paciente</Button>
           <Button variant='default'>+ Encaminhar paciente</Button>
@@ -167,14 +158,14 @@ export default function PatientHistoryTable() {
                               size='icon'
                               onClick={() => handleSaveClick(patient.id)}
                             >
-                              <CheckIcon className='text-foreground-soft h-4 w-4' />
+                              <Check className='text-foreground-soft h-4 w-4' />
                             </Button>
                             <Button
                               variant='ghost'
                               size='icon'
                               onClick={handleCancelClick}
                             >
-                              <XIcon className='text-foreground-soft h-4 w-4' />
+                              <X className='text-foreground-soft h-4 w-4' />
                             </Button>
                           </>
                         ) : (
@@ -190,10 +181,10 @@ export default function PatientHistoryTable() {
                                 )
                               }
                             >
-                              <PencilIcon className='text-foreground-soft h-4 w-4' />
+                              <Pencil className='text-foreground-soft h-4 w-4' />
                             </Button>
                             <Button variant='ghost' size='icon'>
-                              <Trash2Icon className='text-foreground-soft h-4 w-4' />
+                              <Trash2 className='text-foreground-soft h-4 w-4' />
                             </Button>
                           </>
                         )}
diff --git a/src/app/(dashboard)/pacientes/[id]/informacoes/inactivate-button.tsx b/src/app/(dashboard)/pacientes/[id]/informacoes/inactivate-button.tsx
index aff49b55..c82d3977 100644
--- a/src/app/(dashboard)/pacientes/[id]/informacoes/inactivate-button.tsx
+++ b/src/app/(dashboard)/pacientes/[id]/informacoes/inactivate-button.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { UserRoundMinusIcon } from 'lucide-react'
+import { UserRoundMinus } from 'lucide-react'
 import { useState } from 'react'
 
 import { PatientsInactivateModal } from '@/components/patients/inactivate-modal'
@@ -20,7 +20,7 @@ export function PatientInactivateButton({
   return (
     <Dialog open={isInactivateModalOpen} onOpenChange={setInactivateModalOpen}>
       <DialogTrigger variant='outline'>
-        <UserRoundMinusIcon />
+        <UserRoundMinus />
         Inativar paciente
       </DialogTrigger>
 
diff --git a/src/app/(dashboard)/pacientes/[id]/informacoes/page.tsx b/src/app/(dashboard)/pacientes/[id]/informacoes/page.tsx
index 873a7d26..6eda67dc 100644
--- a/src/app/(dashboard)/pacientes/[id]/informacoes/page.tsx
+++ b/src/app/(dashboard)/pacientes/[id]/informacoes/page.tsx
@@ -1,4 +1,4 @@
-import { ForwardIcon, UserRoundIcon } from 'lucide-react'
+import { Forward, UserRoundIcon } from 'lucide-react'
 import type { Metadata } from 'next'
 import { redirect } from 'next/navigation'
 
@@ -17,7 +17,7 @@ interface PatientHistoryPageParams {
   params: Promise<{ id: string }>
 }
 
-export default async function Page({
+export default async function PatientInfoPage({
   params,
 }: Readonly<PatientHistoryPageParams>) {
   const patientId = (await params).id
@@ -38,8 +38,8 @@ export default async function Page({
     <>
       <header className='mb-3 flex justify-between'>
         <div className='flex items-center gap-4'>
-          <span className='bg-border/50 rounded-lg p-2'>
-            <UserRoundIcon className='text-primary size-5.5' />
+          <span className='bg-accent rounded-lg p-2'>
+            <UserRoundIcon />
           </span>
           <h1 className='text-xl font-medium'>Informações do paciente</h1>
         </div>
@@ -47,7 +47,7 @@ export default async function Page({
         <div className='flex gap-2'>
           {isPatientActive && <PatientInactivateButton patient={patient} />}
           <Button>
-            <ForwardIcon />
+            <Forward />
             Encaminhar paciente
           </Button>
         </div>
diff --git a/src/app/paciente/_action-help/index.tsx b/src/app/paciente/_action-help/index.tsx
index e58a3705..866b2e82 100644
--- a/src/app/paciente/_action-help/index.tsx
+++ b/src/app/paciente/_action-help/index.tsx
@@ -1,11 +1,5 @@
 'use client'
-import {
-  CircleQuestionMarkIcon,
-  HeadsetIcon,
-  LinkIcon,
-  MailIcon,
-  PhoneIcon,
-} from 'lucide-react'
+import { CircleQuestionMark, Headset, Link, Mail, Phone } from 'lucide-react'
 import { useState } from 'react'
 
 import { Popover } from '@/components/ui/popover'
@@ -21,12 +15,12 @@ export function ActionHelp() {
           variant='default'
           className='bg-foreground-soft hover:bg-accent-foreground/60 rounded-full p-2.5'
         >
-          <CircleQuestionMarkIcon />
+          <CircleQuestionMark />
         </PopoverTrigger>
 
         <PopoverContent side='left' className='mb-5 gap-3 p-6'>
           <div className='flex items-center gap-2.5 text-2xl'>
-            <HeadsetIcon />
+            <Headset />
             <h1>Precisa de ajuda?</h1>
           </div>
 
@@ -37,15 +31,15 @@ export function ActionHelp() {
 
           <ul className='text-accent-foreground flex flex-col items-center gap-2 font-medium'>
             <li className='flex items-center gap-x-2'>
-              <MailIcon />
+              <Mail />
               <span>contato@abnmo.org</span>
             </li>
             <li className='flex items-center gap-x-2'>
-              <PhoneIcon />
+              <Phone />
               <span>+55 (75) 9980-1515</span>
             </li>
             <li className='flex items-center gap-x-2'>
-              <LinkIcon />
+              <Link />
               <span>www.abnmo.org</span>
             </li>
           </ul>
diff --git a/src/app/paciente/documentos/enviados/table.tsx b/src/app/paciente/documentos/enviados/table.tsx
index 92e668a5..24640b11 100644
--- a/src/app/paciente/documentos/enviados/table.tsx
+++ b/src/app/paciente/documentos/enviados/table.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { FileIcon } from 'lucide-react'
+import { File } from 'lucide-react'
 import { useState } from 'react'
 
 import { Pagination } from '@/components/pagination'
@@ -130,7 +130,7 @@ export function SentTable() {
             <TableRow key={sent.id}>
               <TableCell className='flex items-center gap-1.5 py-2'>
                 <span className='text-disabled/50'>
-                  <FileIcon size={32} strokeWidth={0.5} />
+                  <File size={32} strokeWidth={0.5} />
                 </span>
                 <span>{sent.formName}</span>
               </TableCell>
diff --git a/src/app/paciente/documentos/pendentes/page.tsx b/src/app/paciente/documentos/pendentes/page.tsx
index b8bc8dfd..a4b9634d 100644
--- a/src/app/paciente/documentos/pendentes/page.tsx
+++ b/src/app/paciente/documentos/pendentes/page.tsx
@@ -1,48 +1,42 @@
-import { Metadata } from 'next'
-import React from 'react'
-
-import { getProfile } from '@/actions/users'
-import { PatientRequirementCard } from '@/modules/patients/cards/patient-requirement-card'
-import type { PatientRequirementType } from '@/types/patients'
-
-export const metadata: Metadata = {
-  title: 'Pendentes',
-}
+'use client'
 
-export default async function Page() {
-  const patient = await getProfile()
-
-  const patientName = patient ? `, ${patient.name}` : ''
+import React from 'react'
 
-  // TODO: remove this mock data when integrating with API
-  const requirement: PatientRequirementType = {
-    id: '1',
-    type: 'form',
-    title: 'Formulário de Anamnese',
-    created_at: '2024-10-20',
-    status: 'pending',
-    submitted_at: null,
-    approved_at: null,
-  }
+import { PatientRequirementCard } from '@/components/PatientRequirementCard/PatientRequirementCard'
 
+export default function Page() {
   return (
-    <>
-      <h1 className='mt-4 text-2xl font-medium'>
-        Bem-vindo(a) ao Portal do Paciente{patientName}!
-      </h1>
-      <p className='text-foreground-soft mt-2'>
-        Aqui você acompanha seus formulários pendentes, enviados e suas
-        informações principais na ABNMO.
-      </p>
+    <div className='min-h-screen bg-[var(--color-background)] p-8'>
+      <div className='mb-8'>
+        <h1 className='text-2xl font-bold text-[var(--color-foreground)]'>
+          Documentos Pendentes
+        </h1>
+        <p className='mt-2 text-[var(--color-foreground-soft)]'>
+          Aqui você acompanha seus formulários pendentes e pode preenchê-los
+          diretamente no portal.
+        </p>
+      </div>
 
-      <div className='bg-background-soft mt-12 grid gap-4 rounded-3xl p-8 sm:grid-cols-2 lg:grid-cols-3'>
-        <h2 className='text-xl font-medium sm:col-span-2 lg:col-span-3'>
-          Você possui solicitações pendentes
-        </h2>
-        <PatientRequirementCard requirement={requirement} />
-        <PatientRequirementCard requirement={requirement} />
-        <PatientRequirementCard requirement={requirement} />
+      <div className='grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3'>
+        <PatientRequirementCard
+          title='Formulário de Triagem'
+          createdAt='23/10/2024'
+          status='Pendente'
+          imageUrl='/images/formulario-triagem.jpg'
+        />
+        <PatientRequirementCard
+          title='Autorização de Tratamento'
+          createdAt='18/10/2024'
+          status='Em análise'
+          imageUrl='/images/autorizacao-tratamento.jpg'
+        />
+        <PatientRequirementCard
+          title='Consentimento Médico'
+          createdAt='15/10/2024'
+          status='Aprovado'
+          imageUrl='/images/consentimento-medico.jpg'
+        />
       </div>
-    </>
+    </div>
   )
 }
diff --git a/src/app/paciente/triagem/hooks.ts b/src/app/paciente/triagem/hooks.ts
index 00b4275d..d36b8670 100644
--- a/src/app/paciente/triagem/hooks.ts
+++ b/src/app/paciente/triagem/hooks.ts
@@ -73,9 +73,13 @@ export function useScreening({ storageKey }: Readonly<UseScreeningProps>) {
         : undefined
 
     const payload = {
-      ...patient.data,
+      name: patient.data.name,
+      gender: patient.data.gender,
+      date_of_birth: patient.data.date_of_birth,
       phone: removeNonNumbers(patient.data.phone),
       cpf: removeNonNumbers(patient.data.cpf),
+      state: patient.data.state,
+      city: patient.data.city,
       has_disability: medicalReport.data.has_disability === 'yes',
       disability_desc: medicalReport.data.disability_desc ?? null,
       need_legal_assistance: medicalReport.data.need_legal_assistance === 'yes',
diff --git a/src/components/PatientRequirementCard/PatientRequirementCard.tsx b/src/components/PatientRequirementCard/PatientRequirementCard.tsx
new file mode 100644
index 00000000..222192e8
--- /dev/null
+++ b/src/components/PatientRequirementCard/PatientRequirementCard.tsx
@@ -0,0 +1,69 @@
+'use client'
+
+import React from 'react'
+
+import { Button } from '@/components/ui/button'
+
+type PatientRequirementCardProps = {
+  title: string
+  createdAt: string
+  status: string
+  imageUrl: string
+}
+
+export const PatientRequirementCard: React.FC<PatientRequirementCardProps> = ({
+  title,
+  createdAt,
+  status,
+  imageUrl,
+}) => {
+  const statusColors: Record<string, { bg: string; text: string }> = {
+    Pendente: {
+      bg: 'bg-[var(--color-warning)]/10',
+      text: 'text-[var(--color-warning)]',
+    },
+    Aprovado: {
+      bg: 'bg-[var(--color-success)]/10',
+      text: 'text-[var(--color-success)]',
+    },
+    'Em análise': {
+      bg: 'bg-[var(--color-primary)]/10',
+      text: 'text-[var(--color-primary)]',
+    },
+  }
+
+  const color = statusColors[status] || statusColors['Pendente']
+
+  return (
+    <div className='rounded-2xl bg-[var(--color-card)] p-4 shadow transition-all hover:shadow-md'>
+      <img
+        src={imageUrl}
+        alt={title}
+        className='mb-4 h-40 w-full rounded-xl object-cover'
+      />
+
+      <h3 className='text-lg font-semibold text-[var(--color-foreground)]'>
+        {title}
+      </h3>
+      <p className='mt-1 text-sm text-[var(--color-foreground-soft)]'>
+        Criado em: {createdAt}
+      </p>
+
+      <div className='mt-4 flex items-center justify-between'>
+        <span
+          className={`rounded-full px-2 py-1 text-xs font-medium ${color.bg} ${color.text}`}
+        >
+          {status}
+        </span>
+
+        <Button
+          variant='default'
+          size='sm'
+          className='bg-[var(--color-primary)] text-[var(--color-primary-foreground)] transition-colors hover:bg-[var(--color-primary-soft)]'
+        >
+          Preencher Agora
+        </Button>
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/data-table/header/order-by.tsx b/src/components/data-table/header/order-by.tsx
index bf2804a9..02c706aa 100644
--- a/src/components/data-table/header/order-by.tsx
+++ b/src/components/data-table/header/order-by.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import type { SelectTriggerProps } from '@radix-ui/react-select'
-import { ArrowDownWideNarrowIcon } from 'lucide-react'
+import { ArrowDownWideNarrow } from 'lucide-react'
 
 import { Select, type SelectOptions, SelectValue } from '@/components/ui/select'
 import { SelectContent } from '@/components/ui/select/content'
@@ -38,7 +38,7 @@ export function DataTableHeaderOrderBy({
   return (
     <Select value={orderBy} onValueChange={handleSelect}>
       <SelectTrigger size='sm' className={cn('shrink-0', className)} {...props}>
-        <ArrowDownWideNarrowIcon />
+        <ArrowDownWideNarrow />
         <div className='w-full overflow-hidden text-left text-ellipsis'>
           <SelectValue placeholder='Ordenar por...' />
         </div>
diff --git a/src/components/patients/form.tsx b/src/components/patients/form.tsx
index 11b62f7d..f6f0beee 100644
--- a/src/components/patients/form.tsx
+++ b/src/components/patients/form.tsx
@@ -5,15 +5,12 @@ import {
   CircleCheckIcon,
   CircleXIcon,
   ClipboardEditIcon,
-  PlusIcon,
-  Trash2Icon,
   UserPlus2Icon,
 } from 'lucide-react'
 import { useRouter } from 'next/navigation'
 import { useState, useTransition } from 'react'
 import React from 'react'
-import { FormProvider, useFieldArray, useForm } from 'react-hook-form'
-import { toast } from 'sonner'
+import { FormProvider, useForm } from 'react-hook-form'
 
 import { DateInput } from '@/components/form/date-input'
 import { FormContainer } from '@/components/form/form-container'
@@ -21,7 +18,6 @@ import { SelectInput } from '@/components/form/select-input'
 import { TextInput } from '@/components/form/text-input'
 import { Button } from '@/components/ui/button'
 import { Divider } from '@/components/ui/divider'
-import { QUERY_CACHE_KEYS } from '@/constants/cache'
 import {
   BRAZILIAN_STATES_OPTIONS,
   type UFType,
@@ -29,15 +25,10 @@ import {
 } from '@/constants/enums'
 import { ROUTES } from '@/constants/routes'
 import { useCities } from '@/hooks/cities'
-import { api } from '@/lib/api'
-import { queryClient } from '@/lib/tanstack-query'
 import { GENDERS_OPTIONS, PatientType } from '@/types/patients'
 import { formatCpfNumber } from '@/utils/formatters/format-cpf-number'
 import { formatPhoneNumber } from '@/utils/formatters/format-phone-number'
-import { removeNonNumbers } from '@/utils/sanitizers'
 
-import { Dialog } from '../ui/dialog'
-import CancelPatientCreationModal from './cancel-patient-creation-modal'
 import { type PatientsFormSchema, patientsFormSchema } from './form-schema'
 
 type PatientsFormModeType = 'view' | 'edit' | 'create'
@@ -48,8 +39,6 @@ interface PatientsFormProps {
 }
 
 export function PatientsForm({ patient, mode = 'view' }: PatientsFormProps) {
-  const [isCancelConfirmModalOpen, setIsCancelConfirmModalOpen] =
-    useState(false)
   const [formState, setFormState] = useState<PatientsFormModeType>(mode)
   const [isPending, startTransition] = useTransition()
 
@@ -70,10 +59,6 @@ export function PatientsForm({ patient, mode = 'view' }: PatientsFormProps) {
     take_medication: patient?.take_medication ? 'yes' : 'no',
     medication_desc: patient?.medication_desc ?? '',
     has_nmo_diagnosis: patient?.has_nmo_diagnosis ? 'yes' : 'no',
-    supports: patient?.supports?.map((support) => ({
-      ...support,
-      phone: formatPhoneNumber(support.phone),
-    })) ?? [{ name: '', phone: '', kinship: '' }],
   }
 
   const formMethods = useForm<PatientsFormSchema>({
@@ -81,11 +66,7 @@ export function PatientsForm({ patient, mode = 'view' }: PatientsFormProps) {
     defaultValues,
     mode: 'onBlur',
   })
-  const { clearErrors, setValue, watch, control } = formMethods
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name: 'supports',
-  })
+  const { clearErrors, setValue, watch } = formMethods
 
   const patientSupports =
     patient?.supports && patient.supports.length > 0
@@ -99,6 +80,7 @@ export function PatientsForm({ patient, mode = 'view' }: PatientsFormProps) {
   const cities = useCities(selectedUF)
 
   const isViewMode = formState === 'view'
+  const showPatientSupports = patientSupports.length > 0
 
   function handleSelectState(value: UFType) {
     setValue('state', value)
@@ -108,12 +90,12 @@ export function PatientsForm({ patient, mode = 'view' }: PatientsFormProps) {
   }
 
   function handleCancel() {
+    formMethods.reset()
+    setFormState('view')
+
     if (formState === 'create') {
-      setIsCancelConfirmModalOpen(true)
-      return
+      router.push(ROUTES.patient.main)
     }
-    setFormState('view')
-    formMethods.reset()
   }
 
   function submitForm(data: PatientsFormSchema) {
@@ -124,51 +106,8 @@ export function PatientsForm({ patient, mode = 'view' }: PatientsFormProps) {
         return
       }
 
-      const patient = patientsFormSchema.safeParse(data)
-
-      if (!patient.success) {
-        toast.error(
-          'Verifique se todos os dados estão corretos e tente novamente!',
-        )
-        return
-      }
-
-      const supports =
-        data.supports && data.supports.length > 0
-          ? data.supports.map((contact) => ({
-              ...contact,
-              phone: removeNonNumbers(contact.phone),
-            }))
-          : undefined
-
-      const payload = {
-        ...patient.data,
-        phone: removeNonNumbers(patient.data.phone),
-        cpf: removeNonNumbers(patient.data.cpf),
-        has_disability: patient.data.has_disability === 'yes',
-        disability_desc: patient.data.disability_desc ?? null,
-        need_legal_assistance: patient.data.need_legal_assistance === 'yes',
-        take_medication: patient.data.take_medication === 'yes',
-        medication_desc: patient.data.medication_desc ?? null,
-        has_nmo_diagnosis: patient.data.has_nmo_diagnosis === 'yes',
-        supports,
-      }
-
-      const response = await api('/patients', {
-        method: 'POST',
-        body: JSON.stringify(payload),
-      })
-
-      if (!response.success) {
-        toast.error(response.message)
-        return
-      }
-
-      queryClient.invalidateQueries({ queryKey: [QUERY_CACHE_KEYS.patients] })
-      toast.success(response.message)
-      formMethods.reset()
-
-      router.push(ROUTES.dashboard.patients.main)
+      // TODO: Implement create patient request
+      console.log(data)
     })
   }
 
@@ -184,7 +123,6 @@ export function PatientsForm({ patient, mode = 'view' }: PatientsFormProps) {
           maxLength={50}
           readOnly={isViewMode}
           isRequired={!isViewMode}
-          placeholder='Insira o nome completo'
           wrapperClassName='sm:col-span-2'
         />
         <DateInput
@@ -202,8 +140,8 @@ export function PatientsForm({ patient, mode = 'view' }: PatientsFormProps) {
           inputMode='numeric'
           readOnly={isViewMode}
           isRequired={!isViewMode}
-          placeholder='000.000.000-00'
           wrapperClassName='sm:col-span-2'
+          message={mode === 'view' ? '' : 'Insira somente números'}
         />
 
         <SelectInput
@@ -212,7 +150,6 @@ export function PatientsForm({ patient, mode = 'view' }: PatientsFormProps) {
           options={GENDERS_OPTIONS}
           readOnly={isViewMode}
           isRequired={!isViewMode}
-          placeholder='Selecione o gênero'
           wrapperClassName='sm:col-span-2'
         />
         <SelectInput
@@ -221,8 +158,8 @@ export function PatientsForm({ patient, mode = 'view' }: PatientsFormProps) {
           options={BRAZILIAN_STATES_OPTIONS}
           onValueChange={handleSelectState}
           readOnly={isViewMode}
+          disabled={!selectedUF}
           isRequired={!isViewMode}
-          placeholder='Selecione o estado'
           wrapperClassName='sm:col-span-2'
         />
         <SelectInput
@@ -231,9 +168,8 @@ export function PatientsForm({ patient, mode = 'view' }: PatientsFormProps) {
           options={cities}
           readOnly={isViewMode}
           isRequired={!isViewMode}
-          disabled={!selectedUF}
-          placeholder='Selecione a cidade'
           wrapperClassName='sm:col-span-2'
+          placeholder='Selecione sua cidade'
         />
 
         <TextInput
@@ -243,8 +179,8 @@ export function PatientsForm({ patient, mode = 'view' }: PatientsFormProps) {
           inputMode='tel'
           readOnly={isViewMode}
           isRequired={!isViewMode}
-          placeholder='(00) 00000-0000'
           wrapperClassName='sm:col-span-3'
+          message={mode === 'view' ? '' : 'Insira somente números'}
         />
         <TextInput
           name='email'
@@ -252,7 +188,6 @@ export function PatientsForm({ patient, mode = 'view' }: PatientsFormProps) {
           inputMode='email'
           readOnly={isViewMode}
           isRequired={!isViewMode}
-          placeholder='Insira o e-mail'
           wrapperClassName='sm:col-span-3'
         />
 
@@ -307,114 +242,43 @@ export function PatientsForm({ patient, mode = 'view' }: PatientsFormProps) {
           wrapperClassName='sm:col-span-3'
         />
 
-        {(formState === 'create' || patientSupports.length >= 1) && (
-          <Divider className='sm:col-span-6' />
-        )}
-
-        {patientSupports.length >= 1 && (
-          <div className='space-y-6 sm:col-span-6'>
-            <h1 className='text-xl font-medium'>Rede de apoio</h1>
-            <div className='grid gap-x-4 gap-y-6 sm:grid-cols-6'>
-              {fields.map((support, index) => (
-                <React.Fragment key={support.id}>
-                  <TextInput
-                    name={`supports.${index}.name`}
-                    label='Nome completo'
-                    maxLength={50}
-                    readOnly={isViewMode}
-                    wrapperClassName='sm:col-span-3'
-                  />
-                  <TextInput
-                    name={`supports.${index}.kinship`}
-                    label='Parentesco'
-                    maxLength={50}
-                    readOnly={isViewMode}
-                    wrapperClassName='sm:col-span-1'
-                  />
-                  <div className='flex gap-1 sm:col-span-2'>
-                    <TextInput
-                      name={`supports.${index}.phone`}
-                      label='Telefone (WhatsApp)'
-                      readOnly={isViewMode}
-                      mask='phone'
-                    />
-                    <Button
-                      variant='ghost'
-                      className='text-foreground-soft mt-6'
-                      onClick={() => remove(index)}
-                      disabled={isViewMode}
-                    >
-                      <Trash2Icon />
-                    </Button>
-                  </div>
-                </React.Fragment>
-              ))}
-            </div>
-            <Button
-              variant='outline'
-              className='text-primary'
-              type='button'
-              onClick={() => append({ name: '', kinship: '', phone: '' })}
-              disabled={isViewMode}
-            >
-              <PlusIcon /> Adicionar novo contato
-            </Button>
-          </div>
-        )}
-
-        {formState === 'create' && (
-          <div className='space-y-6 sm:col-span-6'>
-            <h1 className='text-xl font-medium'>Rede de apoio</h1>
-            <div className='grid gap-x-4 gap-y-6 sm:grid-cols-6'>
-              {fields.map((support, index) => (
-                <React.Fragment key={support.id}>
-                  <TextInput
-                    name={`supports.${index}.name`}
-                    label='Nome completo'
-                    maxLength={50}
-                    isRequired
-                    placeholder='Insira o nome completo'
-                    wrapperClassName='sm:col-span-3'
-                  />
-                  <TextInput
-                    name={`supports.${index}.kinship`}
-                    label='Parentesco'
-                    maxLength={50}
-                    isRequired
-                    placeholder='Selecione o parentesco'
-                    wrapperClassName='sm:col-span-1'
-                  />
-                  <div className='flex items-end gap-1 sm:col-span-2'>
-                    <TextInput
-                      name={`supports.${index}.phone`}
-                      label='Telefone (WhatsApp)'
-                      readOnly={isViewMode}
-                      mask='phone'
-                      isRequired
-                    />
-                    <Button
-                      size='icon'
-                      type='button'
-                      variant='ghost'
-                      className='text-foreground-soft'
-                      disabled={index === 0}
-                      onClick={() => (index > 0 ? remove(index) : null)}
-                    >
-                      <Trash2Icon />
-                    </Button>
-                  </div>
-                </React.Fragment>
-              ))}
+        {showPatientSupports && (
+          <>
+            <Divider className='sm:col-span-6' />
+            <div className='space-y-6 sm:col-span-6'>
+              <h1 className='text-xl font-medium'>Rede de apoio</h1>
+              <div className='grid gap-x-4 gap-y-6 sm:grid-cols-6'>
+                {patientSupports.length >= 1 &&
+                  patientSupports.map((support) => (
+                    <React.Fragment key={support.id}>
+                      <TextInput
+                        name={`support_name_${support.id}`}
+                        label='Nome completo'
+                        value={support.name}
+                        maxLength={50}
+                        readOnly={isViewMode}
+                        wrapperClassName='sm:col-span-3'
+                      />
+                      <TextInput
+                        name={`support_kinship_${support.id}`}
+                        label='Parentesco'
+                        value={support.kinship}
+                        maxLength={50}
+                        readOnly={isViewMode}
+                        wrapperClassName='sm:col-span-1'
+                      />
+                      <TextInput
+                        name={`support_phone_${support.id}`}
+                        label='Telefone (WhatsApp)'
+                        value={support.phone}
+                        readOnly={isViewMode}
+                        wrapperClassName='sm:col-span-2'
+                      />
+                    </React.Fragment>
+                  ))}
+              </div>
             </div>
-            <Button
-              type='button'
-              variant='outline'
-              onClick={() => append({ name: '', kinship: '', phone: '' })}
-              disabled={isViewMode}
-            >
-              <PlusIcon /> Adicionar novo contato
-            </Button>
-          </div>
+          </>
         )}
 
         <div className='mt-3 flex justify-end gap-2 sm:col-span-6'>
@@ -422,49 +286,47 @@ export function PatientsForm({ patient, mode = 'view' }: PatientsFormProps) {
             <Button
               type='button'
               variant='outline'
+              className='w-fit'
               onClick={() => setFormState('edit')}
             >
               <ClipboardEditIcon /> Editar
             </Button>
           )}
 
-          {!isViewMode && (
+          {formState === 'edit' && (
             <>
               <Button
                 type='button'
                 variant='outline'
+                className='w-fit'
                 disabled={isPending}
                 onClick={handleCancel}
               >
                 <CircleXIcon /> Cancelar
               </Button>
-              <Button type='submit' loading={isPending}>
-                {formState === 'create' ? (
-                  <>
-                    <UserPlus2Icon />
-                    <span>Cadastrar</span>
-                  </>
-                ) : (
-                  <>
-                    <CircleCheckIcon />
-                    <span>Salvar</span>
-                  </>
-                )}
+              <Button type='submit' className='w-fit' loading={isPending}>
+                <CircleCheckIcon /> Salvar
               </Button>
             </>
           )}
-        </div>
 
-        <Dialog
-          open={isCancelConfirmModalOpen}
-          onOpenChange={setIsCancelConfirmModalOpen}
-        >
-          {isCancelConfirmModalOpen && (
-            <CancelPatientCreationModal
-              onConfirm={() => router.push(ROUTES.dashboard.main)}
-            />
+          {formState === 'create' && (
+            <>
+              <Button
+                type='button'
+                variant='outline'
+                className='w-fit'
+                disabled={isPending}
+                onClick={handleCancel}
+              >
+                <CircleXIcon /> Cancelar
+              </Button>
+              <Button type='submit' className='w-fit' loading={isPending}>
+                <UserPlus2Icon /> Adicionar
+              </Button>
+            </>
           )}
-        </Dialog>
+        </div>
       </FormContainer>
     </FormProvider>
   )
diff --git a/src/components/tags/document-status.tsx b/src/components/tags/document-status.tsx
index a9a2d640..d24ee9f2 100644
--- a/src/components/tags/document-status.tsx
+++ b/src/components/tags/document-status.tsx
@@ -1,4 +1,4 @@
-import { CircleAlertIcon, CircleCheckIcon, CircleXIcon } from 'lucide-react'
+import { CircleAlert, CircleCheckIcon, CircleXIcon } from 'lucide-react'
 
 import { Tag } from '@/components/ui/tag'
 import { cn } from '@/utils/class-name-merge'
@@ -15,7 +15,7 @@ export const STATUS_MAPPING = {
     class: '[&_svg]:text-error',
   },
   waiting: {
-    icon: CircleAlertIcon,
+    icon: CircleAlert,
     label: 'Aprovação pendente',
     class: '[&_svg]:text-warning',
   },
diff --git a/src/components/ui/date-picker.tsx b/src/components/ui/date-picker.tsx
index 7d2eaa34..bd981125 100644
--- a/src/components/ui/date-picker.tsx
+++ b/src/components/ui/date-picker.tsx
@@ -2,7 +2,7 @@
 
 import 'react-day-picker/style.css'
 
-import { CalendarDaysIcon } from 'lucide-react'
+import { CalendarDays } from 'lucide-react'
 import { useCallback, useEffect, useState } from 'react'
 
 import { cn } from '@/utils/class-name-merge'
@@ -18,7 +18,6 @@ export interface DatePickerProps
     Pick<CalendarProps, 'allowFutureDates' | 'navMode'> {
   value?: string
   onSelectDate?: (date: string) => void
-  modal?: boolean
 }
 
 export function DatePicker({
@@ -27,7 +26,6 @@ export function DatePicker({
   className,
   allowFutureDates,
   onSelectDate,
-  modal,
   ...props
 }: Readonly<DatePickerProps>) {
   const [open, setOpen] = useState(false)
@@ -54,7 +52,7 @@ export function DatePicker({
   }, [value])
 
   return (
-    <Popover open={open} onOpenChange={setOpen} modal={modal}>
+    <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger
         variant='outline'
         className={cn(
@@ -63,7 +61,7 @@ export function DatePicker({
         )}
         {...props}
       >
-        <CalendarDaysIcon />
+        <CalendarDays />
         {date ? (
           formatDate(date, { dateStyle: 'short' })
         ) : (
diff --git a/src/constants/breadcrumbs/dashboard.ts b/src/constants/breadcrumbs/dashboard.ts
index f5ef20ea..e8c5f798 100644
--- a/src/constants/breadcrumbs/dashboard.ts
+++ b/src/constants/breadcrumbs/dashboard.ts
@@ -1,12 +1,4 @@
-import {
-  HistoryIcon,
-  PaperclipIcon,
-  User2Icon,
-  UserCog2Icon,
-  UserRoundCheckIcon,
-  UserRoundPlusIcon,
-  Users2Icon,
-} from 'lucide-react'
+import { HistoryIcon, User2Icon, UserCog2Icon, Users2Icon } from 'lucide-react'
 
 import { ROUTES } from '../routes'
 import type { Breadcrumbs } from '.'
@@ -22,29 +14,14 @@ export const DASHBOARD_BREADCRUMBS: Breadcrumbs = {
     name: 'Informações do paciente',
     path: ROUTES.dashboard.patients.main,
   },
-  documentos: {
-    icon: PaperclipIcon,
-    name: 'Documentos',
-    path: ROUTES.dashboard.patients.main,
-  },
   historico: {
     icon: HistoryIcon,
     name: 'Histórico do paciente',
     path: ROUTES.dashboard.patients.main,
   },
-  cadastrar: {
-    icon: UserRoundPlusIcon,
-    name: 'Cadastrar novo paciente',
-    path: ROUTES.dashboard.patients.new,
-  },
   equipes: {
     icon: UserCog2Icon,
     name: 'Equipes',
     path: ROUTES.dashboard.teams.main,
   },
-  aprovacoes: {
-    icon: UserRoundCheckIcon,
-    name: 'Aprovações',
-    path: ROUTES.dashboard.approvals.main,
-  },
 }
diff --git a/src/constants/routes.ts b/src/constants/routes.ts
index 5a405f51..9cf1d390 100644
--- a/src/constants/routes.ts
+++ b/src/constants/routes.ts
@@ -41,6 +41,10 @@ export const ROUTES = {
       main: '/equipes',
       specialists: '/equipes/especialistas',
     },
+    teams: {
+      main: '/equipes',
+      specialists: '/equipes/especialistas',
+    },
     settings: {
       main: '/configuracoes',
     },

From 20c449c9f736ed4bdf3b13a18b7b23db3d3000d7 Mon Sep 17 00:00:00 2001
From: Carol Silveira <carolinesv.dev@gmail.com>
Date: Thu, 4 Dec 2025 15:52:55 -0300
Subject: [PATCH 3/7] feat: patient's medical history

---
 .../pacientes/historico-atendimentos/page.tsx |  51 +++++
 .../patient-history-filters.tsx               | 106 ++++++++++
 .../patient-history-list-table.tsx            | 195 ++++++++++++++++++
 .../patient-history-observations.tsx          |  41 ++++
 .../patient-history-skeleton.tsx              |  17 ++
 .../patient-history.constants.ts              |  35 ++++
 .../patient-history.types.ts                  |  28 +++
 .../dashboard/overview/patients-card.tsx      |  81 ++++++++
 8 files changed, 554 insertions(+)
 create mode 100644 src/app/(dashboard)/pacientes/historico-atendimentos/page.tsx
 create mode 100644 src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-filters.tsx
 create mode 100644 src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-list-table.tsx
 create mode 100644 src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-observations.tsx
 create mode 100644 src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-skeleton.tsx
 create mode 100644 src/app/(dashboard)/pacientes/historico-atendimentos/patient-history.constants.ts
 create mode 100644 src/app/(dashboard)/pacientes/historico-atendimentos/patient-history.types.ts
 create mode 100644 src/components/dashboard/overview/patients-card.tsx

diff --git a/src/app/(dashboard)/pacientes/historico-atendimentos/page.tsx b/src/app/(dashboard)/pacientes/historico-atendimentos/page.tsx
new file mode 100644
index 00000000..c4d1945a
--- /dev/null
+++ b/src/app/(dashboard)/pacientes/historico-atendimentos/page.tsx
@@ -0,0 +1,51 @@
+import { ArrowLeft } from 'lucide-react'
+import { Metadata } from 'next'
+import Link from 'next/link'
+
+import { Card } from '@/components/ui/card'
+
+import { PatientHistoryListTable } from './patient-history-list-table'
+
+interface PageProps {
+  params: {
+    id: string
+  }
+}
+
+export const metadata: Metadata = {
+  title: 'Histórico de atendimentos',
+}
+
+export default function Page({ params }: PageProps) {
+  const patientId = params.id
+
+  return (
+    <main className='container mx-auto px-4 py-6'>
+      <div className='mb-6 flex items-center justify-between gap-4'>
+        <div className='flex items-center gap-3'>
+          <Link
+            href='/pacientes'
+            className='inline-flex items-center gap-2 rounded-md px-2 py-1 hover:underline'
+            aria-label='Voltar para pacientes'
+          >
+            <ArrowLeft className='h-4 w-4' />
+            <span className='text-sm'>Voltar</span>
+          </Link>
+
+          <div>
+            <h1 className='text-2xl font-semibold'>
+              Histórico de atendimentos
+            </h1>
+            <p className='text-muted-foreground text-sm'>
+              Visualize todos os atendimentos registrados para o paciente
+            </p>
+          </div>
+        </div>
+      </div>
+
+      <Card className='p-4'>
+        <PatientHistoryListTable patientId={patientId} />
+      </Card>
+    </main>
+  )
+}
diff --git a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-filters.tsx b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-filters.tsx
new file mode 100644
index 00000000..8c3ed60d
--- /dev/null
+++ b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-filters.tsx
@@ -0,0 +1,106 @@
+'use client'
+
+import { useState } from 'react'
+
+import { Input } from '@/components/ui/input'
+import { Select } from '@/components/ui/select'
+import { useParams } from '@/hooks/params'
+
+import { PATIENT_HISTORY_CATEGORY_LABELS } from './patient-history.constants'
+
+export default function PatientHistoryFilters() {
+  const { updateParams } = useParams()
+  const [selectedCategories, setSelectedCategories] = useState<string[]>([])
+
+  function toggleCategory(value: string) {
+    const updated = selectedCategories.includes(value)
+      ? selectedCategories.filter((v) => v !== value)
+      : [...selectedCategories, value]
+
+    setSelectedCategories(updated)
+
+    updateParams({
+      set: [
+        {
+          key: 'categories',
+          value: updated.join(','),
+        },
+      ],
+    })
+  }
+
+  return (
+    <div className='flex flex-wrap gap-2'>
+      <Input
+        type='date'
+        onChange={(e) =>
+          updateParams({
+            set: [
+              {
+                key: 'date',
+                value: e.target.value,
+              },
+            ],
+          })
+        }
+      />
+
+      <Input
+        type='date'
+        onChange={(e) =>
+          updateParams({
+            set: [
+              {
+                key: 'startDate',
+                value: e.target.value,
+              },
+            ],
+          })
+        }
+      />
+
+      <Input
+        type='date'
+        onChange={(e) =>
+          updateParams({
+            set: [
+              {
+                key: 'endDate',
+                value: e.target.value,
+              },
+            ],
+          })
+        }
+      />
+
+      <Select
+        placeholder='Categoria'
+        options={Object.entries(PATIENT_HISTORY_CATEGORY_LABELS).map(
+          ([value, label]) => ({
+            value,
+            label,
+          }),
+        )}
+        onChange={(value: string) => toggleCategory(value)}
+      />
+
+      <Select
+        placeholder='Quadro'
+        options={[
+          { value: 'stable', label: 'Estável' },
+          { value: 'crisis', label: 'Em surto' },
+        ]}
+        onChange={(value: string) =>
+          updateParams({
+            set: [
+              {
+                key: 'status',
+                value,
+              },
+            ],
+          })
+        }
+      />
+    </div>
+  )
+}
diff --git a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-list-table.tsx b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-list-table.tsx
new file mode 100644
index 00000000..e9c187c4
--- /dev/null
+++ b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-list-table.tsx
@@ -0,0 +1,195 @@
+'use client'
+
+import { useQuery } from '@tanstack/react-query'
+import { EyeIcon, HistoryIcon } from 'lucide-react'
+import { useEffect, useState } from 'react'
+
+import { DataTableHeader } from '@/components/data-table/header'
+import { DataTableHeaderActions } from '@/components/data-table/header/actions'
+import { DataTableHeaderInfo } from '@/components/data-table/header/info'
+import { DataTableHeaderOrderBy } from '@/components/data-table/header/order-by'
+import { Pagination } from '@/components/pagination'
+import { Button } from '@/components/ui/button'
+import { Card } from '@/components/ui/card'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { Tag } from '@/components/ui/tag'
+import { QUERY_CACHE_KEYS } from '@/constants/cache'
+import { QUERY_PARAMS } from '@/constants/params'
+import { useParams } from '@/hooks/params'
+import { api } from '@/lib/api'
+import type { OrderMapping } from '@/types/order'
+import { formatDate } from '@/utils/formatters/format-date'
+
+import {
+  PATIENT_HISTORY_CATEGORY_LABELS,
+  PATIENT_HISTORY_ORDER_OPTIONS,
+  PATIENT_HISTORY_STATUS_LABELS,
+} from './patient-history.constants'
+import { PatientHistory, PatientHistoryOrder } from './patient-history.types'
+import PatientHistoryFilters from './patient-history-filters'
+import PatientHistoryObservationsModal from './patient-history-observations'
+import PatientHistorySkeleton from './patient-history-skeleton'
+
+export function PatientHistoryListTable({ patientId }: { patientId: string }) {
+  const [total, setTotal] = useState(0)
+  const [selected, setSelected] = useState<PatientHistory | null>(null)
+
+  const { getParam, updateParams } = useParams()
+
+  const page = getParam(QUERY_PARAMS.page)
+  const orderBy = getParam(QUERY_PARAMS.orderBy)
+
+  const date = getParam('date')
+  const startDate = getParam('startDate')
+  const endDate = getParam('endDate')
+  const categories = getParam('categories')
+  const status = getParam('status')
+
+  const ORDER_MAPPING: OrderMapping<PatientHistoryOrder> = {
+    date_asc: { orderBy: 'date', order: 'ASC' },
+    date_desc: { orderBy: 'date', order: 'DESC' },
+    status_asc: { orderBy: 'status', order: 'ASC' },
+    status_desc: { orderBy: 'status', order: 'DESC' },
+  }
+
+  const orderByQuery = ORDER_MAPPING[orderBy as PatientHistoryOrder] ?? {
+    orderBy: 'date',
+    order: 'DESC',
+  }
+
+  const { data: response, isLoading } = useQuery({
+    queryKey: [
+      QUERY_CACHE_KEYS.patients.list,
+      patientId,
+      page,
+      orderByQuery,
+      date,
+      startDate,
+      endDate,
+      categories,
+      status,
+    ],
+    queryFn: () =>
+      api<{ history: PatientHistory[]; total: number }>(
+        `/patients/${patientId}/history`,
+        {
+          params: {
+            page,
+            date,
+            startDate,
+            endDate,
+            categories,
+            status,
+            ...orderByQuery,
+          },
+        },
+      ),
+  })
+
+  const history = response?.data?.history ?? []
+
+  useEffect(() => {
+    if (response?.data) {
+      setTotal(response.data.total)
+    }
+  }, [response?.data])
+
+  const handleClearParams = () => {
+    updateParams({
+      remove: [
+        'page',
+        'orderBy',
+        'date',
+        'startDate',
+        'endDate',
+        'categories',
+        'status',
+      ],
+    })
+  }
+
+  return (
+    <>
+      <DataTableHeader>
+        <DataTableHeaderInfo
+          icon={<HistoryIcon />}
+          total={total}
+          title='Histórico'
+        />
+
+        <DataTableHeaderActions>
+          <PatientHistoryFilters />
+
+          <DataTableHeaderOrderBy
+            options={PATIENT_HISTORY_ORDER_OPTIONS}
+            className='w-60'
+          />
+
+          <Button variant='outline' onClick={handleClearParams}>
+            Limpar
+          </Button>
+        </DataTableHeaderActions>
+      </DataTableHeader>
+
+      <Card className='p-6'>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>Data</TableHead>
+              <TableHead>Profissional</TableHead>
+              <TableHead>Categoria</TableHead>
+              <TableHead>Quadro</TableHead>
+              <TableHead className='text-center'>Obs</TableHead>
+            </TableRow>
+          </TableHeader>
+
+          {isLoading && <PatientHistorySkeleton />}
+
+          {!isLoading && (
+            <TableBody>
+              {history.map((item) => (
+                <TableRow key={item.id}>
+                  <TableCell>{formatDate(item.date)}</TableCell>
+
+                  <TableCell>{item.professional_name ?? '-'}</TableCell>
+
+                  <TableCell>
+                    <Tag>{PATIENT_HISTORY_CATEGORY_LABELS[item.category]}</Tag>
+                  </TableCell>
+
+                  <TableCell>
+                    <Tag>{PATIENT_HISTORY_STATUS_LABELS[item.status]}</Tag>
+                  </TableCell>
+
+                  <TableCell className='text-center'>
+                    <Button
+                      size='icon'
+                      variant='ghost'
+                      onClick={() => setSelected(item)}
+                    >
+                      <EyeIcon />
+                    </Button>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          )}
+        </Table>
+      </Card>
+
+      <Pagination totalItems={total} />
+
+      <PatientHistoryObservationsModal
+        data={selected}
+        onClose={() => setSelected(null)}
+      />
+    </>
+  )
+}
diff --git a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-observations.tsx b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-observations.tsx
new file mode 100644
index 00000000..8724fd75
--- /dev/null
+++ b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-observations.tsx
@@ -0,0 +1,41 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+
+import { PatientHistory } from './patient-history.types'
+
+interface Props {
+  data: PatientHistory | null
+  onClose: () => void
+}
+
+export default function PatientHistoryObservationsModal({
+  data,
+  onClose,
+}: Props) {
+  if (!data) return null
+
+  return (
+    <Dialog>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Observações do atendimento</DialogTitle>
+        </DialogHeader>
+
+        <p className='text-sm whitespace-pre-wrap'>{data.observations}</p>
+
+        <div className='mt-4 flex justify-end'>
+          <Button variant='outline' onClick={onClose}>
+            Fechar
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-skeleton.tsx b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-skeleton.tsx
new file mode 100644
index 00000000..e4001b97
--- /dev/null
+++ b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-skeleton.tsx
@@ -0,0 +1,17 @@
+import { TableBody, TableCell, TableRow } from '@/components/ui/table'
+
+export default function PatientHistorySkeleton() {
+  return (
+    <TableBody>
+      {Array.from({ length: 5 }).map((_, i) => (
+        <TableRow key={i}>
+          <TableCell className='bg-muted h-10 rounded' />
+          <TableCell className='bg-muted h-10 rounded' />
+          <TableCell className='bg-muted h-10 rounded' />
+          <TableCell className='bg-muted h-10 rounded' />
+          <TableCell className='bg-muted h-10 rounded' />
+        </TableRow>
+      ))}
+    </TableBody>
+  )
+}
diff --git a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history.constants.ts b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history.constants.ts
new file mode 100644
index 00000000..aa14fb63
--- /dev/null
+++ b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history.constants.ts
@@ -0,0 +1,35 @@
+import {
+  PatientHistoryCategory,
+  PatientHistoryStatus,
+} from './patient-history.types'
+
+export const PATIENT_HISTORY_CATEGORY_LABELS: Record<
+  PatientHistoryCategory,
+  string
+> = {
+  medicine: 'Medicina',
+  lawyer: 'Advogado',
+  nurse: 'Enfermeiro',
+  psychologist: 'Psicólogo',
+  nutritionist: 'Nutricionista',
+  physical_trainer: 'Preparador físico',
+  social_service: 'Serviço-social',
+  psychiatry: 'Psiquiatria',
+  neurologist: 'Neurologista',
+  ophthalmologist: 'Oftalmologista',
+}
+
+export const PATIENT_HISTORY_STATUS_LABELS: Record<
+  PatientHistoryStatus,
+  string
+> = {
+  stable: 'Estável',
+  crisis: 'Em surto',
+}
+
+export const PATIENT_HISTORY_ORDER_OPTIONS = [
+  { value: 'date_desc', label: 'Data (mais recente)' },
+  { value: 'date_asc', label: 'Data (mais antiga)' },
+  { value: 'status_asc', label: 'Quadro (A → Z)' },
+  { value: 'status_desc', label: 'Quadro (Z → A)' },
+]
diff --git a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history.types.ts b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history.types.ts
new file mode 100644
index 00000000..72b3d723
--- /dev/null
+++ b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history.types.ts
@@ -0,0 +1,28 @@
+export type PatientHistoryStatus = 'stable' | 'crisis'
+
+export type PatientHistoryCategory =
+  | 'medicine'
+  | 'lawyer'
+  | 'nurse'
+  | 'psychologist'
+  | 'nutritionist'
+  | 'physical_trainer'
+  | 'social_service'
+  | 'psychiatry'
+  | 'neurologist'
+  | 'ophthalmologist'
+
+export interface PatientHistory {
+  id: string
+  date: string
+  professional_name?: string | null
+  category: PatientHistoryCategory
+  status: PatientHistoryStatus
+  observations: string
+}
+
+export type PatientHistoryOrder =
+  | 'date_asc'
+  | 'date_desc'
+  | 'status_asc'
+  | 'status_desc'
diff --git a/src/components/dashboard/overview/patients-card.tsx b/src/components/dashboard/overview/patients-card.tsx
new file mode 100644
index 00000000..fc12c9f9
--- /dev/null
+++ b/src/components/dashboard/overview/patients-card.tsx
@@ -0,0 +1,81 @@
+'use client'
+
+import { CheckCircleIcon, Users, XCircleIcon } from 'lucide-react'
+
+import { cn } from '@/utils/class-name-merge'
+
+interface PatientsCardProps {
+  title: string
+  value: number
+  variant?: 'default' | 'active' | 'inactive'
+}
+
+function HighlightSpecificWords({
+  title,
+  highlightWords,
+}: {
+  title: string
+  highlightWords?: string[]
+}) {
+  const words = title.split(' ')
+
+  return (
+    <h3 className='font-inter mt-8 text-sm font-medium uppercase'>
+      {words.map((word, index) => {
+        const upperWord = word.toUpperCase()
+        const isHighlighted = highlightWords?.includes(upperWord)
+        const key = `${word}-${index}`
+
+        return (
+          <span
+            key={key}
+            className={cn(
+              isHighlighted ? 'font-semibold text-gray-700' : 'text-gray-500',
+            )}
+          >
+            {word}
+            {index < words.length - 1 ? ' ' : ''}
+          </span>
+        )
+      })}
+    </h3>
+  )
+}
+
+export function PatientsCard({
+  title,
+  value,
+  variant = 'default',
+}: PatientsCardProps) {
+  const iconBase =
+    'rounded-[12px] border p-4 shadow-sm border-[#DCDCDC] text-[#0A0D14] min-h-20 max-h-35 font-inter font-medium'
+  const iconStyles = 'w-10 h-10 p-2 rounded-full border border-[#DCDCDC]'
+
+  const variants = {
+    default: {
+      icon: <Users className={cn(iconStyles, 'text-[#00ce83]')} />,
+      highlightWords: ['TOTAL'],
+    },
+    active: {
+      icon: <CheckCircleIcon className={cn(iconStyles, 'text-[#38C793]')} />,
+      highlightWords: ['ATIVOS'],
+    },
+    inactive: {
+      icon: <XCircleIcon className={cn(iconStyles, 'text-[#DF1C41]')} />,
+      highlightWords: ['INATIVOS'],
+    },
+  }
+
+  return (
+    <div className={iconBase}>
+      <div className='flex items-start justify-between'>
+        <span className='text-2xl font-bold'>{value}</span>
+        {variants[variant].icon}
+      </div>
+      <HighlightSpecificWords
+        title={title}
+        highlightWords={variants[variant].highlightWords}
+      />
+    </div>
+  )
+}

From 7c9c0b9ae39b885d2681f34db9358fcbc4dca42f Mon Sep 17 00:00:00 2001
From: Carol Silveira <carolinesv.dev@gmail.com>
Date: Thu, 4 Dec 2025 22:42:16 -0300
Subject: [PATCH 4/7] feat: history patient

---
 package-lock.json                             |  25 +---
 .../pacientes/historico-atendimentos/page.tsx |  50 +++----
 .../patient-history-filters.tsx               |  76 +++-------
 .../patient-history-list-table.tsx            | 132 +++++++-----------
 ... => patient-history-observationsModal.tsx} |  10 +-
 .../patient-history.types.ts                  |   2 +-
 src/constants/routes.ts                       |  16 ++-
 7 files changed, 111 insertions(+), 200 deletions(-)
 rename src/app/(dashboard)/pacientes/historico-atendimentos/{patient-history-observations.tsx => patient-history-observationsModal.tsx} (76%)

diff --git a/package-lock.json b/package-lock.json
index cd675dd6..1f68e4f4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -122,7 +122,6 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.10.tgz",
       "integrity": "sha512-vMqyb7XCDMPvJFFOaT9kxtiRh42GwlZEg1/uIgtZshS5a/8OaduUfCi7kynKgc3Tw/6Uo2D+db9qBttghhmxwQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.26.2",
@@ -4287,7 +4286,6 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.17.30.tgz",
       "integrity": "sha512-7zf4YyHA+jvBNfVrk2Gtvs6x7E8V+YDW05bNfG2XkWDJfYRXrTiP/DsB2zSYTaHX0bGIujTBQdMVAhb+j7mwpg==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "undici-types": "~6.19.2"
       }
@@ -4297,7 +4295,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.0.tgz",
       "integrity": "sha512-UaicktuQI+9UKyA4njtDOGBD/67t8YEBt2xdfqu8+gP9hqPUPsiXlNPcpS2gVdjmis5GKPG3fCxbQLVgxsQZ8w==",
       "devOptional": true,
-      "peer": true,
       "dependencies": {
         "csstype": "^3.0.2"
       }
@@ -4307,7 +4304,6 @@
       "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.1.1.tgz",
       "integrity": "sha512-jFf/woGTVTjUJsl2O7hcopJ1r0upqoq/vIOoCj0yLh3RIXxWcljlpuZ+vEBRXsymD1jhfeJrlyTy/S1UW+4y1w==",
       "devOptional": true,
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.0.0"
       }
@@ -4379,7 +4375,6 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.29.0.tgz",
       "integrity": "sha512-8C0+jlNJOwQso2GapCVWWfW/rzaq7Lbme+vGUFKE31djwNncIpgXD7Cd4weEsDdkoZDjH0lwwr3QDQFuyrMg9g==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.29.0",
         "@typescript-eslint/types": "8.29.0",
@@ -4782,7 +4777,6 @@
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -5313,7 +5307,6 @@
           "url": "https://github.com/sponsors/ai"
         }
       ],
-      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001688",
         "electron-to-chromium": "^1.5.73",
@@ -5769,7 +5762,6 @@
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz",
       "integrity": "sha512-itvL5h8RETACmOTFc4UfIyB2RfEHi71Ax6E/PivVxq9NseKbOWpeyHEOIbmAw1rs8Ak0VursQNww7lf7YtUwzg==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "env-paths": "^2.2.1",
         "import-fresh": "^3.3.0",
@@ -6630,7 +6622,6 @@
       "integrity": "sha512-TS9bTNIryDzStCpJN93aC5VRSW3uTx9sClUn4B87pwiCaJh220otoI0X8mJKr+VcPtniMdN8GKjlwgWGUv5ZKA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -6718,7 +6709,6 @@
       "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.1.tgz",
       "integrity": "sha512-4EQQr6wXwS+ZJSzaR5ZCrYgLxqvUjdXctaEtBqHcbkW944B1NQyO4qpdHQbXBONfwxXdkAY81HH4+LUfrg+zPw==",
       "dev": true,
-      "peer": true,
       "bin": {
         "eslint-config-prettier": "bin/cli.js"
       },
@@ -6811,7 +6801,6 @@
       "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.31.0.tgz",
       "integrity": "sha512-ixmkI62Rbc2/w8Vfxyh1jQRTdRTF52VxwRVHl/ykPAmqG+Nb7/kNn+byLP0LxPgI7zWA16Jt82SybJInmMia3A==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.8",
@@ -10985,7 +10974,6 @@
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
       "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -11218,7 +11206,6 @@
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
       "integrity": "sha512-FS+XFBNvn3GTAWq26joslQgWNoFu08F4kl0J4CgdNKADkdSGXQyTCnKteIAJy96Br6YbpEU1LSzV5dYtjMkMDg==",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -11247,7 +11234,6 @@
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.0.tgz",
       "integrity": "sha512-Xs1hdnE+DyKgeHJeJznQmYMIBG3TKIHJJT95Q58nHLSrElKlGQqDTR2HQ9fx5CN/Gk6Vh/kupBTDLU11/nDk/g==",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -11259,7 +11245,6 @@
       "version": "7.55.0",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.55.0.tgz",
       "integrity": "sha512-XRnjsH3GVMQz1moZTW53MxfoWN7aDpUg/GpVNc4A3eXRVNdGXfbzJ4vM4aLQ8g6XCUh1nIbx70aaNCl7kxnjog==",
-      "peer": true,
       "engines": {
         "node": ">=18.0.0"
       },
@@ -11274,15 +11259,13 @@
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
-      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
-      "peer": true
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
     "node_modules/react-redux": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -11411,8 +11394,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -12475,7 +12457,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
       "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
       "dev": true,
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -12545,7 +12526,6 @@
       "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz",
       "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==",
       "dev": true,
-      "peer": true,
       "dependencies": {
         "@cspotcode/source-map-support": "^0.8.0",
         "@tsconfig/node10": "^1.0.7",
@@ -12713,7 +12693,6 @@
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.8.3.tgz",
       "integrity": "sha512-p1diW6TqL9L07nNxvRMM7hMMw4c5XOo/1ibL4aAIGmSAt9slTE1Xgw5KWuof2uTOvCg9BY7ZRi+GaF+7sfgPeQ==",
       "dev": true,
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
diff --git a/src/app/(dashboard)/pacientes/historico-atendimentos/page.tsx b/src/app/(dashboard)/pacientes/historico-atendimentos/page.tsx
index c4d1945a..c5ab6e21 100644
--- a/src/app/(dashboard)/pacientes/historico-atendimentos/page.tsx
+++ b/src/app/(dashboard)/pacientes/historico-atendimentos/page.tsx
@@ -1,19 +1,11 @@
 import { ArrowLeft } from 'lucide-react'
-import { Metadata } from 'next'
 import Link from 'next/link'
 
-import { Card } from '@/components/ui/card'
-
+import PatientHistoryFilters from './patient-history-filters'
 import { PatientHistoryListTable } from './patient-history-list-table'
 
 interface PageProps {
-  params: {
-    id: string
-  }
-}
-
-export const metadata: Metadata = {
-  title: 'Histórico de atendimentos',
+  params: { id: string }
 }
 
 export default function Page({ params }: PageProps) {
@@ -21,31 +13,25 @@ export default function Page({ params }: PageProps) {
 
   return (
     <main className='container mx-auto px-4 py-6'>
-      <div className='mb-6 flex items-center justify-between gap-4'>
-        <div className='flex items-center gap-3'>
-          <Link
-            href='/pacientes'
-            className='inline-flex items-center gap-2 rounded-md px-2 py-1 hover:underline'
-            aria-label='Voltar para pacientes'
-          >
-            <ArrowLeft className='h-4 w-4' />
-            <span className='text-sm'>Voltar</span>
-          </Link>
-
-          <div>
-            <h1 className='text-2xl font-semibold'>
-              Histórico de atendimentos
-            </h1>
-            <p className='text-muted-foreground text-sm'>
-              Visualize todos os atendimentos registrados para o paciente
-            </p>
-          </div>
+      <div className='mb-6 flex items-center gap-3'>
+        <Link
+          href='/pacientes'
+          className='inline-flex items-center gap-2 rounded-md px-2 py-1 hover:underline'
+        >
+          <ArrowLeft className='h-4 w-4' />
+          <span className='text-sm'>Voltar</span>
+        </Link>
+
+        <div>
+          <h1 className='text-2xl font-semibold'>Histórico de atendimentos</h1>
+          <p className='text-muted-foreground text-sm'>
+            Visualize todos os atendimentos registrados para o paciente
+          </p>
         </div>
       </div>
 
-      <Card className='p-4'>
-        <PatientHistoryListTable patientId={patientId} />
-      </Card>
+      <PatientHistoryFilters />
+      <PatientHistoryListTable patientId={patientId} />
     </main>
   )
 }
diff --git a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-filters.tsx b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-filters.tsx
index 8c3ed60d..eebe06cb 100644
--- a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-filters.tsx
+++ b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-filters.tsx
@@ -1,5 +1,3 @@
-'use client'
-
 import { useState } from 'react'
 
 import { Input } from '@/components/ui/input'
@@ -7,81 +5,62 @@ import { Select } from '@/components/ui/select'
 import { useParams } from '@/hooks/params'
 
 import { PATIENT_HISTORY_CATEGORY_LABELS } from './patient-history.constants'
+import type {
+  PatientHistoryCategory,
+  PatientHistoryStatus,
+} from './patient-history.types'
 
 export default function PatientHistoryFilters() {
   const { updateParams } = useParams()
-  const [selectedCategories, setSelectedCategories] = useState<string[]>([])
+  const [selectedCategories, setSelectedCategories] = useState<
+    PatientHistoryCategory[]
+  >([])
 
   function toggleCategory(value: string) {
-    const updated = selectedCategories.includes(value)
-      ? selectedCategories.filter((v) => v !== value)
-      : [...selectedCategories, value]
+    const category = value as PatientHistoryCategory
+    const updated = selectedCategories.includes(category)
+      ? selectedCategories.filter((v) => v !== category)
+      : [...selectedCategories, category]
 
     setSelectedCategories(updated)
 
     updateParams({
-      set: [
-        {
-          key: 'categories',
-          value: updated.join(','),
-        },
-      ],
+      set: [{ key: 'categories', value: updated.join(',') }],
     })
   }
 
+  function handleStatusChange(value: string) {
+    const status = value as PatientHistoryStatus
+    updateParams({ set: [{ key: 'status', value: status }] })
+  }
+
   return (
     <div className='flex flex-wrap gap-2'>
       <Input
         type='date'
         onChange={(e) =>
-          updateParams({
-            set: [
-              {
-                key: 'date',
-                value: e.target.value,
-              },
-            ],
-          })
+          updateParams({ set: [{ key: 'date', value: e.target.value }] })
         }
       />
-
       <Input
         type='date'
         onChange={(e) =>
-          updateParams({
-            set: [
-              {
-                key: 'startDate',
-                value: e.target.value,
-              },
-            ],
-          })
+          updateParams({ set: [{ key: 'startDate', value: e.target.value }] })
         }
       />
-
       <Input
         type='date'
         onChange={(e) =>
-          updateParams({
-            set: [
-              {
-                key: 'endDate',
-                value: e.target.value,
-              },
-            ],
-          })
+          updateParams({ set: [{ key: 'endDate', value: e.target.value }] })
         }
       />
 
       <Select
         placeholder='Categoria'
         options={Object.entries(PATIENT_HISTORY_CATEGORY_LABELS).map(
-          ([value, label]) => ({
-            value,
-            label,
-          }),
+          ([value, label]) => ({ value, label }),
         )}
-        onChange={(value: string) => toggleCategory(value)}
+        onValueChange={toggleCategory}
       />
 
       <Select
@@ -90,16 +69,7 @@ export default function PatientHistoryFilters() {
           { value: 'stable', label: 'Estável' },
           { value: 'crisis', label: 'Em surto' },
         ]}
-        onChange={(value: string) =>
-          updateParams({
-            set: [
-              {
-                key: 'status',
-                value,
-              },
-            ],
-          })
-        }
+        onValueChange={handleStatusChange}
       />
     </div>
   )
diff --git a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-list-table.tsx b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-list-table.tsx
index e9c187c4..07b98847 100644
--- a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-list-table.tsx
+++ b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-list-table.tsx
@@ -1,13 +1,6 @@
-'use client'
+import { EyeIcon } from 'lucide-react'
+import { useCallback, useEffect, useState } from 'react'
 
-import { useQuery } from '@tanstack/react-query'
-import { EyeIcon, HistoryIcon } from 'lucide-react'
-import { useEffect, useState } from 'react'
-
-import { DataTableHeader } from '@/components/data-table/header'
-import { DataTableHeaderActions } from '@/components/data-table/header/actions'
-import { DataTableHeaderInfo } from '@/components/data-table/header/info'
-import { DataTableHeaderOrderBy } from '@/components/data-table/header/order-by'
 import { Pagination } from '@/components/pagination'
 import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
@@ -20,64 +13,53 @@ import {
   TableRow,
 } from '@/components/ui/table'
 import { Tag } from '@/components/ui/tag'
-import { QUERY_CACHE_KEYS } from '@/constants/cache'
-import { QUERY_PARAMS } from '@/constants/params'
 import { useParams } from '@/hooks/params'
 import { api } from '@/lib/api'
-import type { OrderMapping } from '@/types/order'
-import { formatDate } from '@/utils/formatters/format-date'
 
 import {
   PATIENT_HISTORY_CATEGORY_LABELS,
-  PATIENT_HISTORY_ORDER_OPTIONS,
   PATIENT_HISTORY_STATUS_LABELS,
 } from './patient-history.constants'
-import { PatientHistory, PatientHistoryOrder } from './patient-history.types'
-import PatientHistoryFilters from './patient-history-filters'
-import PatientHistoryObservationsModal from './patient-history-observations'
+import type {
+  PatientHistory,
+  PatientHistoryOrder,
+} from './patient-history.types'
+import PatientHistoryObservationsModal from './patient-history-observationsModal'
 import PatientHistorySkeleton from './patient-history-skeleton'
 
-export function PatientHistoryListTable({ patientId }: { patientId: string }) {
+interface Props {
+  patientId: string
+}
+
+export function PatientHistoryListTable({ patientId }: Props) {
   const [total, setTotal] = useState(0)
   const [selected, setSelected] = useState<PatientHistory | null>(null)
-
+  const [history, setHistory] = useState<PatientHistory[]>([])
+  const [loading, setLoading] = useState(false)
   const { getParam, updateParams } = useParams()
 
-  const page = getParam(QUERY_PARAMS.page)
-  const orderBy = getParam(QUERY_PARAMS.orderBy)
-
+  const page = getParam('page')
+  const orderBy = getParam('orderBy')
   const date = getParam('date')
   const startDate = getParam('startDate')
   const endDate = getParam('endDate')
   const categories = getParam('categories')
   const status = getParam('status')
 
-  const ORDER_MAPPING: OrderMapping<PatientHistoryOrder> = {
+  const ORDER_MAPPING: Record<
+    PatientHistoryOrder,
+    { orderBy: string; order: string }
+  > = {
     date_asc: { orderBy: 'date', order: 'ASC' },
     date_desc: { orderBy: 'date', order: 'DESC' },
     status_asc: { orderBy: 'status', order: 'ASC' },
     status_desc: { orderBy: 'status', order: 'DESC' },
   }
 
-  const orderByQuery = ORDER_MAPPING[orderBy as PatientHistoryOrder] ?? {
-    orderBy: 'date',
-    order: 'DESC',
-  }
-
-  const { data: response, isLoading } = useQuery({
-    queryKey: [
-      QUERY_CACHE_KEYS.patients.list,
-      patientId,
-      page,
-      orderByQuery,
-      date,
-      startDate,
-      endDate,
-      categories,
-      status,
-    ],
-    queryFn: () =>
-      api<{ history: PatientHistory[]; total: number }>(
+  const fetchHistory = useCallback(async () => {
+    setLoading(true)
+    try {
+      const response = await api<{ history: PatientHistory[]; total: number }>(
         `/patients/${patientId}/history`,
         {
           params: {
@@ -87,21 +69,24 @@ export function PatientHistoryListTable({ patientId }: { patientId: string }) {
             endDate,
             categories,
             status,
-            ...orderByQuery,
+            ...ORDER_MAPPING[(orderBy as PatientHistoryOrder) || 'date_desc'],
           },
         },
-      ),
-  })
-
-  const history = response?.data?.history ?? []
+      )
+      if (response.data) {
+        setHistory(response.data.history)
+        setTotal(response.data.total)
+      }
+    } finally {
+      setLoading(false)
+    }
+  }, [patientId, page, orderBy, date, startDate, endDate, categories, status])
 
   useEffect(() => {
-    if (response?.data) {
-      setTotal(response.data.total)
-    }
-  }, [response?.data])
+    fetchHistory()
+  }, [fetchHistory])
 
-  const handleClearParams = () => {
+  const handleClear = () => {
     updateParams({
       remove: [
         'page',
@@ -117,26 +102,12 @@ export function PatientHistoryListTable({ patientId }: { patientId: string }) {
 
   return (
     <>
-      <DataTableHeader>
-        <DataTableHeaderInfo
-          icon={<HistoryIcon />}
-          total={total}
-          title='Histórico'
-        />
-
-        <DataTableHeaderActions>
-          <PatientHistoryFilters />
-
-          <DataTableHeaderOrderBy
-            options={PATIENT_HISTORY_ORDER_OPTIONS}
-            className='w-60'
-          />
-
-          <Button variant='outline' onClick={handleClearParams}>
-            Limpar
-          </Button>
-        </DataTableHeaderActions>
-      </DataTableHeader>
+      <div className='mb-4 flex items-center justify-between'>
+        <span>Total de atendimentos: {total}</span>
+        <Button variant='outline' onClick={handleClear}>
+          Limpar
+        </Button>
+      </div>
 
       <Card className='p-6'>
         <Table>
@@ -150,24 +121,22 @@ export function PatientHistoryListTable({ patientId }: { patientId: string }) {
             </TableRow>
           </TableHeader>
 
-          {isLoading && <PatientHistorySkeleton />}
-
-          {!isLoading && (
+          {loading ? (
+            <PatientHistorySkeleton />
+          ) : (
             <TableBody>
               {history.map((item) => (
                 <TableRow key={item.id}>
-                  <TableCell>{formatDate(item.date)}</TableCell>
-
-                  <TableCell>{item.professional_name ?? '-'}</TableCell>
-
+                  <TableCell>
+                    {new Date(item.date).toLocaleDateString()}
+                  </TableCell>
+                  <TableCell>{item.professional_name || '-'}</TableCell>
                   <TableCell>
                     <Tag>{PATIENT_HISTORY_CATEGORY_LABELS[item.category]}</Tag>
                   </TableCell>
-
                   <TableCell>
                     <Tag>{PATIENT_HISTORY_STATUS_LABELS[item.status]}</Tag>
                   </TableCell>
-
                   <TableCell className='text-center'>
                     <Button
                       size='icon'
@@ -185,7 +154,6 @@ export function PatientHistoryListTable({ patientId }: { patientId: string }) {
       </Card>
 
       <Pagination totalItems={total} />
-
       <PatientHistoryObservationsModal
         data={selected}
         onClose={() => setSelected(null)}
diff --git a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-observations.tsx b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-observationsModal.tsx
similarity index 76%
rename from src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-observations.tsx
rename to src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-observationsModal.tsx
index 8724fd75..4623dc1a 100644
--- a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-observations.tsx
+++ b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-observationsModal.tsx
@@ -8,7 +8,7 @@ import {
   DialogTitle,
 } from '@/components/ui/dialog'
 
-import { PatientHistory } from './patient-history.types'
+import type { PatientHistory } from './patient-history.types'
 
 interface Props {
   data: PatientHistory | null
@@ -22,14 +22,14 @@ export default function PatientHistoryObservationsModal({
   if (!data) return null
 
   return (
-    <Dialog>
+    <Dialog open={true} onOpenChange={onClose}>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>Observações do atendimento</DialogTitle>
         </DialogHeader>
-
-        <p className='text-sm whitespace-pre-wrap'>{data.observations}</p>
-
+        <p className='text-sm whitespace-pre-wrap'>
+          {data.observations || '-'}
+        </p>
         <div className='mt-4 flex justify-end'>
           <Button variant='outline' onClick={onClose}>
             Fechar
diff --git a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history.types.ts b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history.types.ts
index 72b3d723..5cc9afc9 100644
--- a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history.types.ts
+++ b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history.types.ts
@@ -18,7 +18,7 @@ export interface PatientHistory {
   professional_name?: string | null
   category: PatientHistoryCategory
   status: PatientHistoryStatus
-  observations: string
+  observations?: string
 }
 
 export type PatientHistoryOrder =
diff --git a/src/constants/routes.ts b/src/constants/routes.ts
index 9cf1d390..05cf2480 100644
--- a/src/constants/routes.ts
+++ b/src/constants/routes.ts
@@ -5,6 +5,7 @@ export const ROUTES = {
     forgotPassword: '/conta/recuperar-senha',
     signOut: '/api/sair',
   },
+
   patient: {
     main: '/paciente',
     screening: {
@@ -17,8 +18,10 @@ export const ROUTES = {
       sent: '/paciente/documentos/enviados',
     },
   },
+
   dashboard: {
     main: '/',
+
     patients: {
       main: '/pacientes',
       new: '/pacientes/cadastrar',
@@ -28,26 +31,31 @@ export const ROUTES = {
         history: (id: string) => `/pacientes/${id}/historico`,
       },
     },
+
     referrals: {
       main: '/encaminhados',
       list: '/encaminhados/encaminhamentos',
     },
+
+    forwarded: {
+      main: '/encaminhados',
+    },
+
     approvals: {
       main: '/aprovacoes',
       pending: '/aprovacoes/pendentes',
       approved: '/aprovacoes/aprovados',
     },
+
     teams: {
       main: '/equipes',
       specialists: '/equipes/especialistas',
     },
-    teams: {
-      main: '/equipes',
-      specialists: '/equipes/especialistas',
-    },
+
     settings: {
       main: '/configuracoes',
     },
+
     support: {
       main: '/suporte',
     },

From 62d4591a9527061ba0bd944fa09bdae85d5eb364 Mon Sep 17 00:00:00 2001
From: Carol Silveira <carolinesv.dev@gmail.com>
Date: Fri, 5 Dec 2025 15:12:13 -0300
Subject: [PATCH 5/7] feat: history patient changed

---
 .../pacientes/historico-atendimentos/page.tsx |  66 +++--
 .../patient-history-filters.tsx               | 168 ++++++++-----
 .../patient-history-list-table.tsx            | 228 ++++++++++--------
 .../patient-history.types.ts                  |   1 +
 4 files changed, 293 insertions(+), 170 deletions(-)

diff --git a/src/app/(dashboard)/pacientes/historico-atendimentos/page.tsx b/src/app/(dashboard)/pacientes/historico-atendimentos/page.tsx
index c5ab6e21..c1f94f45 100644
--- a/src/app/(dashboard)/pacientes/historico-atendimentos/page.tsx
+++ b/src/app/(dashboard)/pacientes/historico-atendimentos/page.tsx
@@ -1,8 +1,17 @@
-import { ArrowLeft } from 'lucide-react'
-import Link from 'next/link'
+'use client'
 
-import PatientHistoryFilters from './patient-history-filters'
-import { PatientHistoryListTable } from './patient-history-list-table'
+import { useMemo, useState } from 'react'
+
+import { Avatar } from '@/components/ui/avatar'
+
+import type {
+  PatientHistoryCategory,
+  PatientHistoryStatus,
+} from './patient-history.types'
+import { PatientHistoryFilters } from './patient-history-filters'
+import PatientHistoryListTable, {
+  MOCK_HISTORY,
+} from './patient-history-list-table'
 
 interface PageProps {
   params: { id: string }
@@ -11,27 +20,46 @@ interface PageProps {
 export default function Page({ params }: PageProps) {
   const patientId = params.id
 
+  const [filters, setFilters] = useState<{
+    searchName: string
+    statusFilter: 'all' | PatientHistoryStatus
+    categoryFilter: '' | PatientHistoryCategory
+    sortOption: string
+  }>({
+    searchName: '',
+    statusFilter: 'all',
+    categoryFilter: '',
+    sortOption: 'date_desc',
+  })
+
+  const profileName = 'Sonia Amorim'
+
+  const totalAttendances = useMemo(() => {
+    return MOCK_HISTORY.filter((h) => h.patient_id === patientId).length
+  }, [patientId])
+
   return (
     <main className='container mx-auto px-4 py-6'>
-      <div className='mb-6 flex items-center gap-3'>
-        <Link
-          href='/pacientes'
-          className='inline-flex items-center gap-2 rounded-md px-2 py-1 hover:underline'
-        >
-          <ArrowLeft className='h-4 w-4' />
-          <span className='text-sm'>Voltar</span>
-        </Link>
-
+      <div className='mb-6 flex flex-col gap-3'>
         <div>
-          <h1 className='text-2xl font-semibold'>Histórico de atendimentos</h1>
-          <p className='text-muted-foreground text-sm'>
-            Visualize todos os atendimentos registrados para o paciente
-          </p>
+          <h1 className='text-sm font-normal'>Histórico do paciente</h1>
+        </div>
+
+        <div className='flex flex-col'>
+          <div className='flex items-center gap-3'>
+            <Avatar className='h-10 w-10 text-sm'>{profileName[0]}</Avatar>
+            <span className='text-sm font-medium'>{profileName}</span>
+          </div>
+
+          <span className='text-muted-foreground mt-1 text-xs'>
+            {totalAttendances} atendimentos realizados
+          </span>
         </div>
       </div>
 
-      <PatientHistoryFilters />
-      <PatientHistoryListTable patientId={patientId} />
+      <PatientHistoryFilters onFilterChange={setFilters} />
+
+      <PatientHistoryListTable patientId={patientId} filters={filters} />
     </main>
   )
 }
diff --git a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-filters.tsx b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-filters.tsx
index eebe06cb..cb804a58 100644
--- a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-filters.tsx
+++ b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-filters.tsx
@@ -1,76 +1,136 @@
-import { useState } from 'react'
+'use client'
 
+import { useEffect, useState } from 'react'
+
+import { Button } from '@/components/ui/button'
 import { Input } from '@/components/ui/input'
 import { Select } from '@/components/ui/select'
-import { useParams } from '@/hooks/params'
 
-import { PATIENT_HISTORY_CATEGORY_LABELS } from './patient-history.constants'
 import type {
   PatientHistoryCategory,
   PatientHistoryStatus,
 } from './patient-history.types'
 
-export default function PatientHistoryFilters() {
-  const { updateParams } = useParams()
-  const [selectedCategories, setSelectedCategories] = useState<
-    PatientHistoryCategory[]
-  >([])
+interface Props {
+  onFilterChange?: (filters: {
+    searchName: string
+    statusFilter: PatientHistoryStatus | 'all'
+    categoryFilter: PatientHistoryCategory | ''
+    sortOption: string
+  }) => void
+}
 
-  function toggleCategory(value: string) {
-    const category = value as PatientHistoryCategory
-    const updated = selectedCategories.includes(category)
-      ? selectedCategories.filter((v) => v !== category)
-      : [...selectedCategories, category]
+export function PatientHistoryFilters({ onFilterChange }: Props) {
+  const [searchName, setSearchName] = useState('')
+  const [statusFilter, setStatusFilter] = useState<
+    PatientHistoryStatus | 'all'
+  >('all')
+  const [categoryFilter, setCategoryFilter] = useState<
+    PatientHistoryCategory | ''
+  >('')
+  const [sortOption, setSortOption] = useState('')
 
-    setSelectedCategories(updated)
+  useEffect(() => {
+    onFilterChange?.({ searchName, statusFilter, categoryFilter, sortOption })
+  }, [searchName, statusFilter, categoryFilter, sortOption, onFilterChange])
 
-    updateParams({
-      set: [{ key: 'categories', value: updated.join(',') }],
-    })
+  function clearFilters() {
+    setSearchName('')
+    setStatusFilter('all')
+    setCategoryFilter('')
+    setSortOption('')
   }
 
-  function handleStatusChange(value: string) {
-    const status = value as PatientHistoryStatus
-    updateParams({ set: [{ key: 'status', value: status }] })
+  const CATEGORY_LABELS: Record<PatientHistoryCategory, string> = {
+    medicine: 'Medicina',
+    lawyer: 'Advogado',
+    nurse: 'Enfermeiro',
+    psychologist: 'Psicólogo',
+    nutritionist: 'Nutricionista',
+    physical_trainer: 'Preparador físico',
+    social_service: 'Serviço-social',
+    psychiatry: 'Psiquiatria',
+    neurologist: 'Neurologista',
+    ophthalmologist: 'Oftalmologista',
   }
 
   return (
-    <div className='flex flex-wrap gap-2'>
-      <Input
-        type='date'
-        onChange={(e) =>
-          updateParams({ set: [{ key: 'date', value: e.target.value }] })
-        }
-      />
-      <Input
-        type='date'
-        onChange={(e) =>
-          updateParams({ set: [{ key: 'startDate', value: e.target.value }] })
-        }
-      />
-      <Input
-        type='date'
-        onChange={(e) =>
-          updateParams({ set: [{ key: 'endDate', value: e.target.value }] })
-        }
-      />
+    <div className='mb-4 flex flex-wrap items-center justify-between gap-2 text-xs'>
+      <div className='flex gap-2'>
+        <Button
+          variant={statusFilter === 'all' ? 'default' : 'outline'}
+          size='sm'
+          className='px-2 py-1 text-xs'
+          onClick={() => setStatusFilter('all')}
+        >
+          Todos
+        </Button>
+        <Button
+          variant={statusFilter === 'stable' ? 'default' : 'outline'}
+          size='sm'
+          className='px-2 py-1 text-xs'
+          onClick={() => setStatusFilter('stable')}
+        >
+          Estável
+        </Button>
+        <Button
+          variant={statusFilter === 'crisis' ? 'default' : 'outline'}
+          size='sm'
+          className='px-2 py-1 text-xs'
+          onClick={() => setStatusFilter('crisis')}
+        >
+          Em surto
+        </Button>
+      </div>
+
+      <div className='flex gap-2'>
+        <Input
+          placeholder='Pesquisar'
+          value={searchName}
+          onChange={(e) => setSearchName(e.target.value)}
+          className='w-36 text-xs'
+        />
+
+        <Select
+          placeholder='Categoria'
+          value={categoryFilter}
+          onValueChange={(v: string) =>
+            setCategoryFilter(v as PatientHistoryCategory)
+          }
+          options={[
+            { value: '', label: 'Categoria' },
+            ...Object.entries(CATEGORY_LABELS).map(([value, label]) => ({
+              value,
+              label,
+            })),
+          ]}
+          className='w-36 text-xs'
+        />
 
-      <Select
-        placeholder='Categoria'
-        options={Object.entries(PATIENT_HISTORY_CATEGORY_LABELS).map(
-          ([value, label]) => ({ value, label }),
-        )}
-        onValueChange={toggleCategory}
-      />
+        <Select
+          placeholder='Ordenar'
+          value={sortOption}
+          onValueChange={(v: string) => setSortOption(v)}
+          options={[
+            { value: 'date_desc', label: 'Mais recente → Mais antigo' },
+            { value: 'date_asc', label: 'Mais antigo → Mais recente' },
+            { value: 'status_asc', label: 'Estável' },
+            { value: 'status_desc', label: 'Em surto' },
+            { value: 'alpha_asc', label: 'A-Z' },
+            { value: 'alpha_desc', label: 'Z-A' },
+          ]}
+          className='w-36 text-xs'
+        />
 
-      <Select
-        placeholder='Quadro'
-        options={[
-          { value: 'stable', label: 'Estável' },
-          { value: 'crisis', label: 'Em surto' },
-        ]}
-        onValueChange={handleStatusChange}
-      />
+        <Button
+          variant='muted'
+          size='sm'
+          className='px-2 py-1 text-xs'
+          onClick={clearFilters}
+        >
+          Limpar filtros
+        </Button>
+      </div>
     </div>
   )
 }
diff --git a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-list-table.tsx b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-list-table.tsx
index 07b98847..74b00cd8 100644
--- a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-list-table.tsx
+++ b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-list-table.tsx
@@ -1,5 +1,7 @@
+'use client'
+
 import { EyeIcon } from 'lucide-react'
-import { useCallback, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { Pagination } from '@/components/pagination'
 import { Button } from '@/components/ui/button'
@@ -13,128 +15,160 @@ import {
   TableRow,
 } from '@/components/ui/table'
 import { Tag } from '@/components/ui/tag'
-import { useParams } from '@/hooks/params'
-import { api } from '@/lib/api'
 
-import {
-  PATIENT_HISTORY_CATEGORY_LABELS,
-  PATIENT_HISTORY_STATUS_LABELS,
-} from './patient-history.constants'
 import type {
   PatientHistory,
-  PatientHistoryOrder,
+  PatientHistoryCategory,
+  PatientHistoryStatus,
 } from './patient-history.types'
 import PatientHistoryObservationsModal from './patient-history-observationsModal'
 import PatientHistorySkeleton from './patient-history-skeleton'
 
 interface Props {
   patientId: string
+  filters: {
+    searchName: string
+    statusFilter: PatientHistoryStatus | 'all'
+    categoryFilter: PatientHistoryCategory | ''
+    sortOption: string
+  }
 }
 
-export function PatientHistoryListTable({ patientId }: Props) {
-  const [total, setTotal] = useState(0)
-  const [selected, setSelected] = useState<PatientHistory | null>(null)
-  const [history, setHistory] = useState<PatientHistory[]>([])
-  const [loading, setLoading] = useState(false)
-  const { getParam, updateParams } = useParams()
+const PATIENT_HISTORY_CATEGORY_LABELS: Record<PatientHistoryCategory, string> =
+  {
+    medicine: 'Medicina',
+    lawyer: 'Advogado',
+    nurse: 'Enfermeiro',
+    psychologist: 'Psicólogo',
+    nutritionist: 'Nutricionista',
+    physical_trainer: 'Preparador físico',
+    social_service: 'Serviço-social',
+    psychiatry: 'Psiquiatria',
+    neurologist: 'Neurologista',
+    ophthalmologist: 'Oftalmologista',
+  }
 
-  const page = getParam('page')
-  const orderBy = getParam('orderBy')
-  const date = getParam('date')
-  const startDate = getParam('startDate')
-  const endDate = getParam('endDate')
-  const categories = getParam('categories')
-  const status = getParam('status')
+const PATIENT_HISTORY_STATUS_LABELS: Record<PatientHistoryStatus, string> = {
+  stable: 'Estável',
+  crisis: 'Em surto',
+}
 
-  const ORDER_MAPPING: Record<
-    PatientHistoryOrder,
-    { orderBy: string; order: string }
-  > = {
-    date_asc: { orderBy: 'date', order: 'ASC' },
-    date_desc: { orderBy: 'date', order: 'DESC' },
-    status_asc: { orderBy: 'status', order: 'ASC' },
-    status_desc: { orderBy: 'status', order: 'DESC' },
-  }
+export const MOCK_HISTORY: PatientHistory[] = [
+  {
+    id: '1',
+    patient_id: '1',
+    date: '2025-11-01T10:30:00Z',
+    professional_name: 'Dra. Ana Silva',
+    category: 'medicine',
+    status: 'stable',
+    observations: 'Paciente apresentou melhora significativa.',
+  },
+  {
+    id: '2',
+    patient_id: '1',
+    date: '2025-11-15T14:00:00Z',
+    professional_name: 'Dr. Pedro Souza',
+    category: 'nurse',
+    status: 'crisis',
+    observations: 'Exame de sangue solicitado.',
+  },
+  {
+    id: '3',
+    patient_id: '1',
+    date: '2025-10-20T09:00:00Z',
+    professional_name: 'Dra. Fernanda Lima',
+    category: 'psychologist',
+    status: 'stable',
+    observations: 'Consulta psicológica sem complicações.',
+  },
+]
+
+export default function PatientHistoryListTable({ patientId, filters }: Props) {
+  const [history, setHistory] = useState<PatientHistory[]>([])
+  const [selected, setSelected] = useState<PatientHistory | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [total, setTotal] = useState(0)
 
-  const fetchHistory = useCallback(async () => {
+  useEffect(() => {
     setLoading(true)
-    try {
-      const response = await api<{ history: PatientHistory[]; total: number }>(
-        `/patients/${patientId}/history`,
-        {
-          params: {
-            page,
-            date,
-            startDate,
-            endDate,
-            categories,
-            status,
-            ...ORDER_MAPPING[(orderBy as PatientHistoryOrder) || 'date_desc'],
-          },
-        },
+    let filtered = MOCK_HISTORY
+
+    if (filters.statusFilter !== 'all')
+      filtered = filtered.filter((h) => h.status === filters.statusFilter)
+    if (filters.categoryFilter)
+      filtered = filtered.filter((h) => h.category === filters.categoryFilter)
+    if (filters.searchName)
+      filtered = filtered.filter((h) =>
+        h.professional_name
+          ?.toLowerCase()
+          .includes(filters.searchName.toLowerCase()),
       )
-      if (response.data) {
-        setHistory(response.data.history)
-        setTotal(response.data.total)
-      }
-    } finally {
-      setLoading(false)
-    }
-  }, [patientId, page, orderBy, date, startDate, endDate, categories, status])
 
-  useEffect(() => {
-    fetchHistory()
-  }, [fetchHistory])
+    switch (filters.sortOption) {
+      case 'date_asc':
+        filtered.sort(
+          (a, b) => new Date(a.date).getTime() - new Date(b.date).getTime(),
+        )
+        break
+      case 'date_desc':
+        filtered.sort(
+          (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime(),
+        )
+        break
+      case 'status_asc':
+        filtered.sort((a, b) => a.status.localeCompare(b.status))
+        break
+      case 'status_desc':
+        filtered.sort((a, b) => b.status.localeCompare(a.status))
+        break
+      case 'alpha_asc':
+        filtered.sort((a, b) =>
+          (a.professional_name ?? '').localeCompare(b.professional_name ?? ''),
+        )
+        break
+      case 'alpha_desc':
+        filtered.sort((a, b) =>
+          (b.professional_name ?? '').localeCompare(a.professional_name ?? ''),
+        )
+        break
+    }
 
-  const handleClear = () => {
-    updateParams({
-      remove: [
-        'page',
-        'orderBy',
-        'date',
-        'startDate',
-        'endDate',
-        'categories',
-        'status',
-      ],
-    })
-  }
+    setHistory(filtered)
+    setTotal(filtered.length)
+    setLoading(false)
+  }, [patientId, filters])
 
   return (
     <>
-      <div className='mb-4 flex items-center justify-between'>
-        <span>Total de atendimentos: {total}</span>
-        <Button variant='outline' onClick={handleClear}>
-          Limpar
-        </Button>
-      </div>
-
-      <Card className='p-6'>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Data</TableHead>
-              <TableHead>Profissional</TableHead>
-              <TableHead>Categoria</TableHead>
-              <TableHead>Quadro</TableHead>
-              <TableHead className='text-center'>Obs</TableHead>
-            </TableRow>
-          </TableHeader>
-
-          {loading ? (
-            <PatientHistorySkeleton />
-          ) : (
+      <Card className='p-4'>
+        {loading ? (
+          <PatientHistorySkeleton />
+        ) : (
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className='text-xs'>Data de atendimento</TableHead>
+                <TableHead className='text-xs'>Profissional</TableHead>
+                <TableHead className='text-xs'>Categoria</TableHead>
+                <TableHead className='text-xs'>Status</TableHead>
+                <TableHead className='text-center text-xs'>
+                  Observações
+                </TableHead>
+              </TableRow>
+            </TableHeader>
             <TableBody>
               {history.map((item) => (
                 <TableRow key={item.id}>
-                  <TableCell>
+                  <TableCell className='text-base'>
                     {new Date(item.date).toLocaleDateString()}
                   </TableCell>
-                  <TableCell>{item.professional_name || '-'}</TableCell>
-                  <TableCell>
+                  <TableCell className='text-base'>
+                    {item.professional_name ?? '-'}
+                  </TableCell>
+                  <TableCell className='text-base'>
                     <Tag>{PATIENT_HISTORY_CATEGORY_LABELS[item.category]}</Tag>
                   </TableCell>
-                  <TableCell>
+                  <TableCell className='text-base'>
                     <Tag>{PATIENT_HISTORY_STATUS_LABELS[item.status]}</Tag>
                   </TableCell>
                   <TableCell className='text-center'>
@@ -149,8 +183,8 @@ export function PatientHistoryListTable({ patientId }: Props) {
                 </TableRow>
               ))}
             </TableBody>
-          )}
-        </Table>
+          </Table>
+        )}
       </Card>
 
       <Pagination totalItems={total} />
diff --git a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history.types.ts b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history.types.ts
index 5cc9afc9..f2cf9427 100644
--- a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history.types.ts
+++ b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history.types.ts
@@ -14,6 +14,7 @@ export type PatientHistoryCategory =
 
 export interface PatientHistory {
   id: string
+  patient_id: string
   date: string
   professional_name?: string | null
   category: PatientHistoryCategory

From 6013c9973938ec26717c84d267ba669f2a2396e6 Mon Sep 17 00:00:00 2001
From: Carol Silveira <carolinesv.dev@gmail.com>
Date: Mon, 8 Dec 2025 15:51:38 -0300
Subject: [PATCH 6/7] feat: medical history completed

---
 package-lock.json                             | 1391 ++++++++++++++++-
 package.json                                  |    3 +
 .../observation-modal.tsx                     |   40 +
 .../pacientes/historico-atendimentos/page.tsx |   94 +-
 .../patient-history-filters.tsx               |  106 +-
 .../patient-history-list-table.tsx            |  130 +-
 .../patient-history-observations-modal.tsx    |   59 +
 .../patient-history-observationsModal.tsx     |   41 -
 8 files changed, 1688 insertions(+), 176 deletions(-)
 create mode 100644 src/app/(dashboard)/pacientes/historico-atendimentos/observation-modal.tsx
 create mode 100644 src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-observations-modal.tsx
 delete mode 100644 src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-observationsModal.tsx

diff --git a/package-lock.json b/package-lock.json
index 1f68e4f4..40261350 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,6 +16,7 @@
         "@radix-ui/react-radio-group": "1.3.6",
         "@radix-ui/react-slot": "1.2.0",
         "@tanstack/react-query": "5.83.0",
+        "baseui": "15.0.0",
         "class-variance-authority": "0.7.1",
         "clsx": "2.1.1",
         "date-fns": "4.1.0",
@@ -29,6 +30,8 @@
         "react-hook-form": "7.55.0",
         "recharts": "3.1.0",
         "sonner": "2.0.4",
+        "styletron-engine-atomic": "1.6.2",
+        "styletron-react": "6.1.1",
         "tailwind-merge": "3.2.0",
         "zod": "3.24.3",
         "zustand": "5.0.6"
@@ -1065,6 +1068,29 @@
       "resolved": "https://registry.npmjs.org/@date-fns/tz/-/tz-1.2.0.tgz",
       "integrity": "sha512-LBrd7MiJZ9McsOgxqWX7AaxrDjcFVjWH/tIKJd7pnR7McaslGYOP1QmmiBXdJH/H/yLCT+rcQ7FaPBUxRGUtrg=="
     },
+    "node_modules/@date-io/core": {
+      "version": "2.17.0",
+      "resolved": "https://registry.npmjs.org/@date-io/core/-/core-2.17.0.tgz",
+      "integrity": "sha512-+EQE8xZhRM/hsY0CDTVyayMDDY5ihc4MqXCrPxooKw19yAzUIC6uUqsZeaOFNL9YKTNxYKrJP5DFgE8o5xRCOw==",
+      "license": "MIT"
+    },
+    "node_modules/@date-io/moment": {
+      "version": "2.17.0",
+      "resolved": "https://registry.npmjs.org/@date-io/moment/-/moment-2.17.0.tgz",
+      "integrity": "sha512-e4nb4CDZU4k0WRVhz1Wvl7d+hFsedObSauDHKtZwU9kt7gdYEAzKgnrSCTHsEaXrDumdrkCYTeZ0Tmyk7uV4tw==",
+      "license": "MIT",
+      "dependencies": {
+        "@date-io/core": "^2.17.0"
+      },
+      "peerDependencies": {
+        "moment": "^2.24.0"
+      },
+      "peerDependenciesMeta": {
+        "moment": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@emnapi/core": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.4.0.tgz",
@@ -2285,6 +2311,100 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mapbox/geojson-rewind": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-rewind/-/geojson-rewind-0.5.2.tgz",
+      "integrity": "sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==",
+      "license": "ISC",
+      "dependencies": {
+        "get-stream": "^6.0.1",
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "geojson-rewind": "geojson-rewind"
+      }
+    },
+    "node_modules/@mapbox/geojson-rewind/node_modules/get-stream": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz",
+      "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@mapbox/geojson-types": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/geojson-types/-/geojson-types-1.0.2.tgz",
+      "integrity": "sha512-e9EBqHHv3EORHrSfbR9DqecPNn+AmuAoQxV6aL8Xu30bJMJR1o8PZLZzpk1Wq7/NfCbuhmakHTPYRhoqLsXRnw==",
+      "license": "ISC"
+    },
+    "node_modules/@mapbox/jsonlint-lines-primitives": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@mapbox/jsonlint-lines-primitives/-/jsonlint-lines-primitives-2.0.2.tgz",
+      "integrity": "sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/@mapbox/mapbox-gl-supported": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/mapbox-gl-supported/-/mapbox-gl-supported-1.5.0.tgz",
+      "integrity": "sha512-/PT1P6DNf7vjEEiPkVIRJkvibbqWtqnyGaBz3nfRdcxclNSnSdaLU5tfAgcD7I8Yt5i+L19s406YLl1koLnLbg==",
+      "license": "BSD-3-Clause",
+      "peerDependencies": {
+        "mapbox-gl": ">=0.32.1 <2.0.0"
+      }
+    },
+    "node_modules/@mapbox/point-geometry": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/point-geometry/-/point-geometry-0.1.0.tgz",
+      "integrity": "sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==",
+      "license": "ISC"
+    },
+    "node_modules/@mapbox/tiny-sdf": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/@mapbox/tiny-sdf/-/tiny-sdf-1.2.5.tgz",
+      "integrity": "sha512-cD8A/zJlm6fdJOk6DqPUV8mcpyJkRz2x2R+/fYcWDYG3oWbG7/L7Yl/WqQ1VZCjnL9OTIMAn6c+BC5Eru4sQEw==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/@mapbox/unitbezier": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/unitbezier/-/unitbezier-0.0.0.tgz",
+      "integrity": "sha512-HPnRdYO0WjFjRTSwO3frz1wKaU649OBFPX3Zo/2WZvuRi6zMiRGui8SnPQiQABgqCf8YikDe5t3HViTVw1WUzA==",
+      "license": "BSD-2-Clause"
+    },
+    "node_modules/@mapbox/vector-tile": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@mapbox/vector-tile/-/vector-tile-1.3.1.tgz",
+      "integrity": "sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@mapbox/point-geometry": "~0.1.0"
+      }
+    },
+    "node_modules/@mapbox/whoots-js": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
+      "integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@math.gl/web-mercator": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/@math.gl/web-mercator/-/web-mercator-3.6.3.tgz",
+      "integrity": "sha512-UVrkSOs02YLehKaehrxhAejYMurehIHPfFQvPFZmdJHglHOU4V2cCUApTVEwOksvCp161ypEqVp+9H6mGhTTcw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.0",
+        "gl-matrix": "^3.4.0"
+      }
+    },
     "node_modules/@napi-rs/wasm-runtime": {
       "version": "0.2.8",
       "resolved": "https://registry.npmjs.org/@napi-rs/wasm-runtime/-/wasm-runtime-0.2.8.tgz",
@@ -3598,6 +3718,12 @@
         }
       }
     },
+    "node_modules/@rtsao/csstype": {
+      "version": "2.6.5-forked.0",
+      "resolved": "https://registry.npmjs.org/@rtsao/csstype/-/csstype-2.6.5-forked.0.tgz",
+      "integrity": "sha512-0HwnY8uPWcCloTgdbbaJG3MbDUfNf6yKWZfCKxFv9yj2Sbp4mSKaIjC7Cr/5L4hMxvrrk85CU3wlAg7EtBBJ1Q==",
+      "license": "MIT"
+    },
     "node_modules/@rtsao/scc": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@rtsao/scc/-/scc-1.1.0.tgz",
@@ -4173,6 +4299,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/hammerjs": {
+      "version": "2.0.46",
+      "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.46.tgz",
+      "integrity": "sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw==",
+      "license": "MIT"
+    },
     "node_modules/@types/istanbul-lib-coverage": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.6.tgz",
@@ -5107,6 +5239,18 @@
       "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==",
       "dev": true
     },
+    "node_modules/attr-accept": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-1.1.3.tgz",
+      "integrity": "sha512-iT40nudw8zmCweivz6j58g+RT33I4KbaIvRUhjNmDwO2WmsQUxFEZZYZ5w3vXe5x5MX9D7mfvA/XaLOZYFR9EQ==",
+      "license": "MIT",
+      "dependencies": {
+        "core-js": "^2.5.0"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/available-typed-arrays": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
@@ -5265,6 +5409,207 @@
       "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
       "dev": true
     },
+    "node_modules/baseui": {
+      "version": "15.0.0",
+      "resolved": "https://registry.npmjs.org/baseui/-/baseui-15.0.0.tgz",
+      "integrity": "sha512-MhWHo1lL96RU8lS1v8mRqbmoWynmZv4FzVC33enkbmFGrcjdkRbsUaFgq5S+dUQPXsty9k1URdWNmg901wHOlg==",
+      "license": "MIT",
+      "dependencies": {
+        "@date-io/date-fns": "^2.13.1",
+        "@date-io/moment": "^2.13.1",
+        "baseui": "^14.0.0",
+        "card-validator": "^6.2.0",
+        "csstype": "2.6.11",
+        "d3": "^6.7.0",
+        "d3-array": "2.4.0",
+        "date-fns": "^2.28.0",
+        "date-fns-tz": "^1.2.2",
+        "just-extend": "4.1.1",
+        "memoize-one": "5.0.0",
+        "mockdate": "2.0.5",
+        "moment": "^2.29.4",
+        "polished": "^4.2.2",
+        "popper.js": "^1.16.1",
+        "prop-types": "^15.8.1",
+        "react-dropzone": "9.0.0",
+        "react-focus-lock": "^2.8.1",
+        "react-hook-form": "^7.30.0",
+        "react-input-mask": "^2.0.4",
+        "react-is": "^17.0.2",
+        "react-map-gl": "5.2.13",
+        "react-movable": "^3.0.4",
+        "react-multi-ref": "^1.0.0",
+        "react-range": "^1.8.12",
+        "react-uid": "2.3.0",
+        "react-virtualized": "^9.22.3",
+        "react-virtualized-auto-sizer": "1.0.2",
+        "react-window": "1.8.5",
+        "resize-observer-polyfill": "1.5.1",
+        "styletron-standard": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18",
+        "styletron-react": "^6.1.1"
+      }
+    },
+    "node_modules/baseui/node_modules/@date-io/date-fns": {
+      "version": "2.17.0",
+      "resolved": "https://registry.npmjs.org/@date-io/date-fns/-/date-fns-2.17.0.tgz",
+      "integrity": "sha512-L0hWZ/mTpy3Gx/xXJ5tq5CzHo0L7ry6KEO9/w/JWiFWFLZgiNVo3ex92gOl3zmzjHqY/3Ev+5sehAr8UnGLEng==",
+      "license": "MIT",
+      "dependencies": {
+        "@date-io/core": "^2.17.0"
+      },
+      "peerDependencies": {
+        "date-fns": "^2.0.0"
+      },
+      "peerDependenciesMeta": {
+        "date-fns": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/baseui/node_modules/baseui": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/baseui/-/baseui-14.0.0.tgz",
+      "integrity": "sha512-+lKgTfMow9jAfugBwmxo0QSi2vSo88UThQZoMxDiNwPGP85xGGSaK+Rqlo0FfshqJYJp0mlc8QyEKQgUsWLmbQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@date-io/date-fns": "^2.13.1",
+        "@date-io/moment": "^2.13.1",
+        "card-validator": "^6.2.0",
+        "csstype": "2.6.11",
+        "d3": "^6.7.0",
+        "d3-array": "2.4.0",
+        "date-fns": "^2.28.0",
+        "date-fns-tz": "^1.2.2",
+        "just-extend": "4.1.1",
+        "memoize-one": "5.0.0",
+        "mockdate": "2.0.5",
+        "moment": "^2.29.4",
+        "polished": "^4.2.2",
+        "popper.js": "^1.16.1",
+        "prop-types": "^15.8.1",
+        "react-dropzone": "9.0.0",
+        "react-focus-lock": "^2.8.1",
+        "react-hook-form": "^7.30.0",
+        "react-input-mask": "^2.0.4",
+        "react-is": "^17.0.2",
+        "react-map-gl": "5.2.13",
+        "react-movable": "^3.0.4",
+        "react-multi-ref": "^1.0.0",
+        "react-range": "^1.8.12",
+        "react-uid": "2.3.0",
+        "react-virtualized": "^9.22.3",
+        "react-virtualized-auto-sizer": "1.0.2",
+        "react-window": "1.8.5",
+        "resize-observer-polyfill": "1.5.1",
+        "styletron-standard": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18",
+        "styletron-react": ">=6"
+      }
+    },
+    "node_modules/baseui/node_modules/csstype": {
+      "version": "2.6.11",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.11.tgz",
+      "integrity": "sha512-l8YyEC9NBkSm783PFTvh0FmJy7s5pFKrDp49ZL7zBGX3fWkO+N4EEyan1qqp8cwPLDcD0OSdyY6hAMoxp34JFw==",
+      "license": "MIT"
+    },
+    "node_modules/baseui/node_modules/d3-array": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.4.0.tgz",
+      "integrity": "sha512-KQ41bAF2BMakf/HdKT865ALd4cgND6VcIztVQZUTt0+BH3RWy6ZYnHghVXf6NFjt2ritLr8H1T8LreAAlfiNcw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/baseui/node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
+    "node_modules/baseui/node_modules/react-is": {
+      "version": "17.0.2",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
+      "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
+      "license": "MIT"
+    },
+    "node_modules/baseui/node_modules/react-uid": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/react-uid/-/react-uid-2.3.0.tgz",
+      "integrity": "sha512-tsPZ77GR0pISGYmpCLHAbZTabKXZ7zBniKPVqVMMfnXFyo39zq5g/psIlD5vLTKkjQEhWOO8JhqcHnxkwNu6eA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=8.5.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^16.8.0",
+        "react": "^16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/baseui/node_modules/react-virtualized-auto-sizer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.2.tgz",
+      "integrity": "sha512-MYXhTY1BZpdJFjUovvYHVBmkq79szK/k7V3MO+36gJkWGkrXKtyr4vCPtpphaTLRAdDNoYEYFZWE8LjN+PIHNg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^15.3.0 || ^16.0.0-alpha",
+        "react-dom": "^15.3.0 || ^16.0.0-alpha"
+      }
+    },
+    "node_modules/baseui/node_modules/react-window": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.5.tgz",
+      "integrity": "sha512-HeTwlNa37AFa8MDZFZOKcNEkuF2YflA0hpGPiTT9vR7OawEt+GZbfM6wqkBahD3D3pUjIabQYzsnY/BSJbgq6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "memoize-one": ">=3.1.1 <6"
+      },
+      "engines": {
+        "node": ">8.0.0"
+      },
+      "peerDependencies": {
+        "react": "^15.0.0 || ^16.0.0",
+        "react-dom": "^15.0.0 || ^16.0.0"
+      }
+    },
+    "node_modules/baseui/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
+      "license": "0BSD"
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.12",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
@@ -5425,6 +5770,15 @@
         }
       ]
     },
+    "node_modules/card-validator": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/card-validator/-/card-validator-6.2.0.tgz",
+      "integrity": "sha512-1vYv45JaE9NmixZr4dl6ykzbFKv7imI9L7MQDs235b/a7EGbG8rrEsipeHtVvscLSUbl3RX6UP5gyOe0Y2FlHA==",
+      "license": "MIT",
+      "dependencies": {
+        "credit-card-type": "^8.0.0"
+      }
+    },
     "node_modules/chalk": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
@@ -5757,6 +6111,14 @@
       "integrity": "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==",
       "dev": true
     },
+    "node_modules/core-js": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+      "deprecated": "core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.",
+      "hasInstallScript": true,
+      "license": "MIT"
+    },
     "node_modules/cosmiconfig": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-9.0.0.tgz",
@@ -5827,6 +6189,12 @@
       "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==",
       "dev": true
     },
+    "node_modules/credit-card-type": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/credit-card-type/-/credit-card-type-8.3.0.tgz",
+      "integrity": "sha512-czfZUpQ7W9CDxZL4yFLb1kFtM/q2lTOY975hL2aO+DC8+GRNDVSXVCHXhVFZPxiUKmQCZbFP8vIhxx5TBQaThw==",
+      "license": "MIT"
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -5841,12 +6209,28 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css-in-js-utils": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz",
+      "integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==",
+      "license": "MIT",
+      "dependencies": {
+        "hyphenate-style-name": "^1.0.2",
+        "isobject": "^3.0.1"
+      }
+    },
     "node_modules/css.escape": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
       "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
       "dev": true
     },
+    "node_modules/csscolorparser": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/csscolorparser/-/csscolorparser-1.0.3.tgz",
+      "integrity": "sha512-umPSgYwZkdFoUrH5hIq5kf0wPSXiro51nPw0j2K/c83KflkPSTBGMz6NJvMB+07VlL0y7VPo6QJcDjcgKTTm3w==",
+      "license": "MIT"
+    },
     "node_modules/cssom": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.5.0.tgz",
@@ -5874,8 +6258,45 @@
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
+    },
+    "node_modules/d3": {
+      "version": "6.7.0",
+      "resolved": "https://registry.npmjs.org/d3/-/d3-6.7.0.tgz",
+      "integrity": "sha512-hNHRhe+yCDLUG6Q2LwvR/WdNFPOJQ5VWqsJcwIYVeI401+d2/rrCjxSXkiAdIlpx7/73eApFB4Olsmh3YN7a6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "2",
+        "d3-axis": "2",
+        "d3-brush": "2",
+        "d3-chord": "2",
+        "d3-color": "2",
+        "d3-contour": "2",
+        "d3-delaunay": "5",
+        "d3-dispatch": "2",
+        "d3-drag": "2",
+        "d3-dsv": "2",
+        "d3-ease": "2",
+        "d3-fetch": "2",
+        "d3-force": "2",
+        "d3-format": "2",
+        "d3-geo": "2",
+        "d3-hierarchy": "2",
+        "d3-interpolate": "2",
+        "d3-path": "2",
+        "d3-polygon": "2",
+        "d3-quadtree": "2",
+        "d3-random": "2",
+        "d3-scale": "3",
+        "d3-scale-chromatic": "2",
+        "d3-selection": "2",
+        "d3-shape": "2",
+        "d3-time": "2",
+        "d3-time-format": "3",
+        "d3-timer": "2",
+        "d3-transition": "2",
+        "d3-zoom": "2"
+      }
     },
     "node_modules/d3-array": {
       "version": "3.2.4",
@@ -5889,6 +6310,55 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-axis": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-2.1.0.tgz",
+      "integrity": "sha512-z/G2TQMyuf0X3qP+Mh+2PimoJD41VOCjViJzT0BHeL/+JQAofkiWZbWxlwFGb1N8EN+Cl/CW+MUKbVzr1689Cw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-brush": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-2.1.0.tgz",
+      "integrity": "sha512-cHLLAFatBATyIKqZOkk/mDHUbzne2B3ZwxkzMHvFTCZCmLaXDpZRihQSn8UNXTkGD/3lb/W2sQz0etAftmHMJQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-dispatch": "1 - 2",
+        "d3-drag": "2",
+        "d3-interpolate": "1 - 2",
+        "d3-selection": "2",
+        "d3-transition": "2"
+      }
+    },
+    "node_modules/d3-brush/node_modules/d3-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
+      "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-brush/node_modules/d3-interpolate": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
+      "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-color": "1 - 2"
+      }
+    },
+    "node_modules/d3-chord": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-2.0.0.tgz",
+      "integrity": "sha512-D5PZb7EDsRNdGU4SsjQyKhja8Zgu+SHZfUSO5Ls8Wsn+jsAKUUGkcshLxMg9HDFxG3KqavGWaWkJ8EpU8ojuig==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-path": "1 - 2"
+      }
+    },
+    "node_modules/d3-chord/node_modules/d3-path": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-2.0.0.tgz",
+      "integrity": "sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/d3-color": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
@@ -5898,6 +6368,95 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-contour": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-2.0.0.tgz",
+      "integrity": "sha512-9unAtvIaNk06UwqBmvsdHX7CZ+NPDZnn8TtNH1myW93pWJkhsV25JcgnYAu0Ck5Veb1DHiCv++Ic5uvJ+h50JA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "2"
+      }
+    },
+    "node_modules/d3-contour/node_modules/d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "node_modules/d3-contour/node_modules/internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
+      "license": "ISC"
+    },
+    "node_modules/d3-delaunay": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-5.3.0.tgz",
+      "integrity": "sha512-amALSrOllWVLaHTnDLHwMIiz0d1bBu9gZXd1FiLfXf8sHcX9jrcj81TVZOqD4UX7MgBZZ07c8GxzEgBpJqc74w==",
+      "license": "ISC",
+      "dependencies": {
+        "delaunator": "4"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-2.0.0.tgz",
+      "integrity": "sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-drag": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-2.0.0.tgz",
+      "integrity": "sha512-g9y9WbMnF5uqB9qKqwIIa/921RYWzlUDv9Jl1/yONQwxbOfszAWTCm8u7HOTgJgRDXiRZN56cHT9pd24dmXs8w==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-dispatch": "1 - 2",
+        "d3-selection": "2"
+      }
+    },
+    "node_modules/d3-dsv": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-2.0.0.tgz",
+      "integrity": "sha512-E+Pn8UJYx9mViuIUkoc93gJGGYut6mSDKy2+XaPwccwkRGlR+LO97L2VCCRjQivTwLHkSnAJG7yo00BWY6QM+w==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "commander": "2",
+        "iconv-lite": "0.4",
+        "rw": "1"
+      },
+      "bin": {
+        "csv2json": "bin/dsv2json",
+        "csv2tsv": "bin/dsv2dsv",
+        "dsv2dsv": "bin/dsv2dsv",
+        "dsv2json": "bin/dsv2json",
+        "json2csv": "bin/json2dsv",
+        "json2dsv": "bin/json2dsv",
+        "json2tsv": "bin/json2dsv",
+        "tsv2csv": "bin/dsv2dsv",
+        "tsv2json": "bin/dsv2json"
+      }
+    },
+    "node_modules/d3-dsv/node_modules/commander": {
+      "version": "2.20.3",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz",
+      "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
+      "license": "MIT"
+    },
+    "node_modules/d3-dsv/node_modules/iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "license": "MIT",
+      "dependencies": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/d3-ease": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
@@ -5907,6 +6466,32 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-fetch": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-2.0.0.tgz",
+      "integrity": "sha512-TkYv/hjXgCryBeNKiclrwqZH7Nb+GaOwo3Neg24ZVWA3MKB+Rd+BY84Nh6tmNEMcjUik1CSUWjXYndmeO6F7sw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-dsv": "1 - 2"
+      }
+    },
+    "node_modules/d3-force": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/d3-force/-/d3-force-2.1.1.tgz",
+      "integrity": "sha512-nAuHEzBqMvpFVMf9OX75d00OxvOXdxY+xECIXjW6Gv8BRrXu6gAWbv/9XKrvfJ5i5DCokDW7RYE50LRoK092ew==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-dispatch": "1 - 2",
+        "d3-quadtree": "1 - 2",
+        "d3-timer": "1 - 2"
+      }
+    },
+    "node_modules/d3-force/node_modules/d3-timer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-2.0.0.tgz",
+      "integrity": "sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/d3-format": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.0.tgz",
@@ -5916,6 +6501,36 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-geo": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-2.0.2.tgz",
+      "integrity": "sha512-8pM1WGMLGFuhq9S+FpPURxic+gKzjluCD/CHTuUF3mXMeiCo0i6R0tO1s4+GArRFde96SLcW/kOFRjoAosPsFA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "^2.5.0"
+      }
+    },
+    "node_modules/d3-geo/node_modules/d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "node_modules/d3-geo/node_modules/internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
+      "license": "ISC"
+    },
+    "node_modules/d3-hierarchy": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-2.0.0.tgz",
+      "integrity": "sha512-SwIdqM3HxQX2214EG9GTjgmCc/mbSx4mQBn+DuEETubhOw6/U3fmnji4uCVrmzOydMHSO1nZle5gh6HB/wdOzw==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/d3-interpolate": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
@@ -5937,6 +6552,24 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-polygon": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-2.0.0.tgz",
+      "integrity": "sha512-MsexrCK38cTGermELs0cO1d79DcTsQRN7IWMJKczD/2kBjzNXxLUWP33qRF6VDpiLV/4EI4r6Gs0DAWQkE8pSQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-quadtree": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-2.0.0.tgz",
+      "integrity": "sha512-b0Ed2t1UUalJpc3qXzKi+cPGxeXRr4KU9YSlocN74aTzp6R/Ud43t79yLLqxHRWZfsvWXmbDWPpoENK1K539xw==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-random": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/d3-random/-/d3-random-2.2.2.tgz",
+      "integrity": "sha512-0D9P8TRj6qDAtHhRQn6EfdOtHMfsUWanl3yb/84C4DqpZ+VsgfI5iTVRNRbELCfNvRfpMr8OrqqUTQ6ANGCijw==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/d3-scale": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
@@ -5953,6 +6586,37 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-scale-chromatic": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-2.0.0.tgz",
+      "integrity": "sha512-LLqy7dJSL8yDy7NRmf6xSlsFZ6zYvJ4BcWFE4zBrOPnQERv9zj24ohnXKRbyi9YHnYV+HN1oEO3iFK971/gkzA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-color": "1 - 2",
+        "d3-interpolate": "1 - 2"
+      }
+    },
+    "node_modules/d3-scale-chromatic/node_modules/d3-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
+      "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-scale-chromatic/node_modules/d3-interpolate": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
+      "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-color": "1 - 2"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-2.0.0.tgz",
+      "integrity": "sha512-XoGGqhLUN/W14NmaqcO/bb1nqjDAw5WtSYb2X8wiuQWvSZUsUVYsOSkOybUrNvcBjaywBdYPy03eXHMXjk9nZA==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/d3-shape": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
@@ -5998,6 +6662,171 @@
         "node": ">=12"
       }
     },
+    "node_modules/d3-transition": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-2.0.0.tgz",
+      "integrity": "sha512-42ltAGgJesfQE3u9LuuBHNbGrI/AJjNL2OAUdclE70UE6Vy239GCBEYD38uBPoLeNsOhFStGpPI0BAOV+HMxog==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-color": "1 - 2",
+        "d3-dispatch": "1 - 2",
+        "d3-ease": "1 - 2",
+        "d3-interpolate": "1 - 2",
+        "d3-timer": "1 - 2"
+      },
+      "peerDependencies": {
+        "d3-selection": "2"
+      }
+    },
+    "node_modules/d3-transition/node_modules/d3-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
+      "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-transition/node_modules/d3-ease": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-2.0.0.tgz",
+      "integrity": "sha512-68/n9JWarxXkOWMshcT5IcjbB+agblQUaIsbnXmrzejn2O82n3p2A9R2zEB9HIEFWKFwPAEDDN8gR0VdSAyyAQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-transition/node_modules/d3-interpolate": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
+      "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-color": "1 - 2"
+      }
+    },
+    "node_modules/d3-transition/node_modules/d3-timer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-2.0.0.tgz",
+      "integrity": "sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-zoom": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-2.0.0.tgz",
+      "integrity": "sha512-fFg7aoaEm9/jf+qfstak0IYpnesZLiMX6GZvXtUSdv8RH2o4E2qeelgdU09eKS6wGuiGMfcnMI0nTIqWzRHGpw==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-dispatch": "1 - 2",
+        "d3-drag": "2",
+        "d3-interpolate": "1 - 2",
+        "d3-selection": "2",
+        "d3-transition": "2"
+      }
+    },
+    "node_modules/d3-zoom/node_modules/d3-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
+      "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3-zoom/node_modules/d3-interpolate": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
+      "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-color": "1 - 2"
+      }
+    },
+    "node_modules/d3/node_modules/d3-array": {
+      "version": "2.12.1",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+      "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "internmap": "^1.0.0"
+      }
+    },
+    "node_modules/d3/node_modules/d3-color": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-2.0.0.tgz",
+      "integrity": "sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3/node_modules/d3-ease": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-2.0.0.tgz",
+      "integrity": "sha512-68/n9JWarxXkOWMshcT5IcjbB+agblQUaIsbnXmrzejn2O82n3p2A9R2zEB9HIEFWKFwPAEDDN8gR0VdSAyyAQ==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3/node_modules/d3-format": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-2.0.0.tgz",
+      "integrity": "sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3/node_modules/d3-interpolate": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-2.0.1.tgz",
+      "integrity": "sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-color": "1 - 2"
+      }
+    },
+    "node_modules/d3/node_modules/d3-path": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-2.0.0.tgz",
+      "integrity": "sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3/node_modules/d3-scale": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-3.3.0.tgz",
+      "integrity": "sha512-1JGp44NQCt5d1g+Yy+GeOnZP7xHo0ii8zsQp6PGzd+C1/dl0KGsp9A7Mxwp+1D1o4unbTTxVdU/ZOIEBoeZPbQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "^2.3.0",
+        "d3-format": "1 - 2",
+        "d3-interpolate": "1.2.0 - 2",
+        "d3-time": "^2.1.1",
+        "d3-time-format": "2 - 3"
+      }
+    },
+    "node_modules/d3/node_modules/d3-shape": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-2.1.0.tgz",
+      "integrity": "sha512-PnjUqfM2PpskbSLTJvAzp2Wv4CZsnAgTfcVRTwW03QR3MkXF8Uo7B1y/lWkAsmbKwuecto++4NlsYcvYpXpTHA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-path": "1 - 2"
+      }
+    },
+    "node_modules/d3/node_modules/d3-time": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz",
+      "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-array": "2"
+      }
+    },
+    "node_modules/d3/node_modules/d3-time-format": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz",
+      "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "d3-time": "1 - 2"
+      }
+    },
+    "node_modules/d3/node_modules/d3-timer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-2.0.0.tgz",
+      "integrity": "sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA==",
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/d3/node_modules/internmap": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+      "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==",
+      "license": "ISC"
+    },
     "node_modules/damerau-levenshtein": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -6095,6 +6924,15 @@
       "resolved": "https://registry.npmjs.org/date-fns-jalali/-/date-fns-jalali-4.1.0-0.tgz",
       "integrity": "sha512-hTIP/z+t+qKwBDcmmsnmjWTduxCg+5KfdqWQvb2X/8C9+knYY6epN/pfxdDuyVlSVeFz0sM5eEfwIUQ70U4ckg=="
     },
+    "node_modules/date-fns-tz": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-1.3.8.tgz",
+      "integrity": "sha512-qwNXUFtMHTTU6CFSFjoJ80W8Fzzp24LntbjFFBgL/faqds4e5mo9mftoRLgr3Vi1trISsg4awSpYVsOQCRnapQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "date-fns": ">=2.0.0"
+      }
+    },
     "node_modules/debug": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",
@@ -6187,6 +7025,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delaunator": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/delaunator/-/delaunator-4.0.1.tgz",
+      "integrity": "sha512-WNPWi1IRKZfCt/qIDMfERkDp93+iZEmOxN2yy4Jg+Xhv8SLk2UTqqbe1sfiipn0and9QrE914/ihdx82Y/Giag==",
+      "license": "ISC"
+    },
     "node_modules/delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
@@ -6265,6 +7109,16 @@
       "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==",
       "dev": true
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/domexception": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
@@ -6304,6 +7158,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/earcut": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/earcut/-/earcut-2.2.4.tgz",
+      "integrity": "sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==",
+      "license": "ISC"
+    },
     "node_modules/ecdsa-sig-formatter": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/ecdsa-sig-formatter/-/ecdsa-sig-formatter-1.0.11.tgz",
@@ -7240,6 +8100,18 @@
         "node": ">=16.0.0"
       }
     },
+    "node_modules/file-selector": {
+      "version": "0.1.19",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.1.19.tgz",
+      "integrity": "sha512-kCWw3+Aai8Uox+5tHCNgMFaUdgidxvMnLWO6fM5sZ0hA2wlHP5/DHGF0ECe84BiB95qdJbKNEJhWKVDvMN+JDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.1"
+      },
+      "engines": {
+        "node": ">= 10"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -7287,6 +8159,18 @@
       "integrity": "sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==",
       "dev": true
     },
+    "node_modules/focus-lock": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/focus-lock/-/focus-lock-1.3.6.tgz",
+      "integrity": "sha512-Ik/6OCk9RQQ0T5Xw+hKNLWrjSMtv51dD4GRmJjbD5a58TIEpI5a5iXagKVl3Z5UuyslMCA8Xwnu76jQob62Yhg==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.3"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/for-each": {
       "version": "0.3.5",
       "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
@@ -7386,6 +8270,12 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/geojson-vt": {
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/geojson-vt/-/geojson-vt-3.2.1.tgz",
+      "integrity": "sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg==",
+      "license": "ISC"
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -7519,6 +8409,12 @@
         "node": ">=16"
       }
     },
+    "node_modules/gl-matrix": {
+      "version": "3.4.4",
+      "resolved": "https://registry.npmjs.org/gl-matrix/-/gl-matrix-3.4.4.tgz",
+      "integrity": "sha512-latSnyDNt/8zYUB6VIJ6PCh2jBjJX6gnDsoCZ7LyW7GkqrD51EWwa9qCoGixj8YqBtETQK/xY7OmpTF8xz1DdQ==",
+      "license": "MIT"
+    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
@@ -7619,6 +8515,21 @@
       "integrity": "sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==",
       "dev": true
     },
+    "node_modules/grid-index": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/grid-index/-/grid-index-1.1.0.tgz",
+      "integrity": "sha512-HZRwumpOGUrHyxO5bqKZL0B0GlUpwtCAzZ42sgxUPniu33R1LSFH5yrIcBCHjkctCAh3mtWKcKd9J4vDDdeVHA==",
+      "license": "ISC"
+    },
+    "node_modules/hammerjs": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
+      "integrity": "sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.0"
+      }
+    },
     "node_modules/has-bigints": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.1.0.tgz",
@@ -7775,6 +8686,12 @@
         "url": "https://github.com/sponsors/typicode"
       }
     },
+    "node_modules/hyphenate-style-name": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz",
+      "integrity": "sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -7787,6 +8704,26 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -7895,6 +8832,15 @@
         "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
       }
     },
+    "node_modules/inline-style-prefixer": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-5.1.2.tgz",
+      "integrity": "sha512-PYUF+94gDfhy+LsQxM0g3d6Hge4l1pAqOSOiZuHWzMvQEGsbRQ/ck2WioLqrY2ZkHyPgVUXxn+hrkF7D6QUGbA==",
+      "license": "MIT",
+      "dependencies": {
+        "css-in-js-utils": "^2.0.0"
+      }
+    },
     "node_modules/internal-slot": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.1.0.tgz",
@@ -7918,6 +8864,15 @@
         "node": ">=12"
       }
     },
+    "node_modules/invariant": {
+      "version": "2.2.4",
+      "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
+      "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.5",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.5.tgz",
@@ -8360,6 +9315,15 @@
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "dev": true
     },
+    "node_modules/isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/istanbul-lib-coverage": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
@@ -9456,8 +10420,7 @@
     "node_modules/js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
     "node_modules/js-yaml": {
       "version": "4.1.1",
@@ -9627,6 +10590,12 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/just-extend": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/just-extend/-/just-extend-4.1.1.tgz",
+      "integrity": "sha512-aWgeGFW67BP3e5181Ep1Fv2v8z//iBJfrvyTnq8wG86vEESwmonn1zPBJ0VfmT9CJq2FIT0VsETtrNFm2a+SHA==",
+      "license": "MIT"
+    },
     "node_modules/jwa": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/jwa/-/jwa-1.4.2.tgz",
@@ -9648,6 +10617,12 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "node_modules/kdbush": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-3.0.0.tgz",
+      "integrity": "sha512-hRkd6/XW4HTsA9vjVpY9tuXJYLSlelnkTmVFu4M9/7MIYQtFcHpbugAU7UbOfjOiVSVYl2fqgBuJ32JUmRo5Ew==",
+      "license": "ISC"
+    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -10184,7 +11159,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
       "dependencies": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       },
@@ -10249,6 +11223,39 @@
         "tmpl": "1.0.5"
       }
     },
+    "node_modules/mapbox-gl": {
+      "version": "1.13.3",
+      "resolved": "https://registry.npmjs.org/mapbox-gl/-/mapbox-gl-1.13.3.tgz",
+      "integrity": "sha512-p8lJFEiqmEQlyv+DQxFAOG/XPWN0Wp7j/Psq93Zywz7qt9CcUKFYDBOoOEKzqe6gudHVJY8/Bhqw6VDpX2lSBg==",
+      "license": "SEE LICENSE IN LICENSE.txt",
+      "dependencies": {
+        "@mapbox/geojson-rewind": "^0.5.2",
+        "@mapbox/geojson-types": "^1.0.2",
+        "@mapbox/jsonlint-lines-primitives": "^2.0.2",
+        "@mapbox/mapbox-gl-supported": "^1.5.0",
+        "@mapbox/point-geometry": "^0.1.0",
+        "@mapbox/tiny-sdf": "^1.1.1",
+        "@mapbox/unitbezier": "^0.0.0",
+        "@mapbox/vector-tile": "^1.3.1",
+        "@mapbox/whoots-js": "^3.1.0",
+        "csscolorparser": "~1.0.3",
+        "earcut": "^2.2.2",
+        "geojson-vt": "^3.2.1",
+        "gl-matrix": "^3.2.1",
+        "grid-index": "^1.1.0",
+        "murmurhash-js": "^1.0.0",
+        "pbf": "^3.2.1",
+        "potpack": "^1.0.1",
+        "quickselect": "^2.0.0",
+        "rw": "^1.3.3",
+        "supercluster": "^7.1.0",
+        "tinyqueue": "^2.0.3",
+        "vt-pbf": "^3.1.1"
+      },
+      "engines": {
+        "node": ">=6.4.0"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -10258,6 +11265,12 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/memoize-one": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/memoize-one/-/memoize-one-5.0.0.tgz",
+      "integrity": "sha512-7g0+ejkOaI9w5x6LvQwmj68kUj6rxROywPSCqmclG/HBacmFnZqhVscQ8kovkn9FBCNJmOz6SY42+jnvZzDWdw==",
+      "license": "MIT"
+    },
     "node_modules/meow": {
       "version": "12.1.1",
       "resolved": "https://registry.npmjs.org/meow/-/meow-12.1.1.tgz",
@@ -10368,16 +11381,50 @@
       "version": "1.2.8",
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.8.tgz",
       "integrity": "sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/mjolnir.js": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/mjolnir.js/-/mjolnir.js-2.7.3.tgz",
+      "integrity": "sha512-Z5z/+FzZqOSO3juSVKV3zcm4R2eAlWwlKMcqHmyFEJAaLILNcDKnIbnb4/kbcGyIuhtdWrzu8WOIR7uM6I34aw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hammerjs": "^2.0.41",
+        "hammerjs": "^2.0.8"
+      },
+      "engines": {
+        "node": ">= 4",
+        "npm": ">= 3"
+      }
+    },
+    "node_modules/mockdate": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/mockdate/-/mockdate-2.0.5.tgz",
+      "integrity": "sha512-ST0PnThzWKcgSLyc+ugLVql45PvESt3Ul/wrdV/OPc/6Pr8dbLAIJsN1cIp41FLzbN+srVTNIRn+5Cju0nyV6A==",
+      "license": "MIT"
+    },
+    "node_modules/moment": {
+      "version": "2.30.1",
+      "resolved": "https://registry.npmjs.org/moment/-/moment-2.30.1.tgz",
+      "integrity": "sha512-uEmtNhbDOrWPFS+hdjFCBfy9f2YoyzRpwcl+DqpC6taX21FzsTLQVbMV/W7PzNSX6x/bhC1zA3c2UQ5NzH6how==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
     },
+    "node_modules/murmurhash-js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/murmurhash-js/-/murmurhash-js-1.0.0.tgz",
+      "integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==",
+      "license": "MIT"
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -10538,7 +11585,6 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
-      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -10821,6 +11867,19 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "dev": true
     },
+    "node_modules/pbf": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-3.3.0.tgz",
+      "integrity": "sha512-XDF38WCH3z5OV/OVa8GKUNtLAyneuzbCisx7QUCF8Q6Nutx0WnJrQe5O+kOtBlLfRNUws98Y58Lblp+NJG5T4Q==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "ieee754": "^1.1.12",
+        "resolve-protobuf-schema": "^2.1.0"
+      },
+      "bin": {
+        "pbf": "bin/pbf"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
@@ -10923,6 +11982,29 @@
         "node": ">=8"
       }
     },
+    "node_modules/polished": {
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/polished/-/polished-4.3.1.tgz",
+      "integrity": "sha512-OBatVyC/N7SCW/FaDHrSd+vn0o5cS855TOmYi4OkdWUMSJCET/xip//ch8xGUvtr3i44X9LVyWwQlRMTN3pwSA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.17.8"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==",
+      "deprecated": "You can find the new Popper v2 at @popperjs/core, this package is dedicated to the legacy v1",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/possible-typed-array-names": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
@@ -10960,6 +12042,12 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/potpack": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
+      "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==",
+      "license": "ISC"
+    },
     "node_modules/prelude-ls": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
@@ -11132,13 +12220,31 @@
       "version": "15.8.1",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
-      "dev": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/prop-types-extra": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "license": "MIT",
+      "dependencies": {
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
+    "node_modules/protocol-buffers-schema": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/protocol-buffers-schema/-/protocol-buffers-schema-3.6.0.tgz",
+      "integrity": "sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==",
+      "license": "MIT"
+    },
     "node_modules/psl": {
       "version": "1.15.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.15.0.tgz",
@@ -11202,6 +12308,12 @@
         }
       ]
     },
+    "node_modules/quickselect": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
+      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==",
+      "license": "ISC"
+    },
     "node_modules/react": {
       "version": "19.1.0",
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.0.tgz",
@@ -11210,6 +12322,18 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-clientside-effect": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/react-clientside-effect/-/react-clientside-effect-1.2.8.tgz",
+      "integrity": "sha512-ma2FePH0z3px2+WOu6h+YycZcEvFmmxIlAb62cF52bG86eMySciO/EQZeQMXd07kPCYB0a1dWDT5J+KE9mCDUw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.13"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/react-day-picker": {
       "version": "9.8.0",
       "resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-9.8.0.tgz",
@@ -11241,6 +12365,47 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-dropzone": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-9.0.0.tgz",
+      "integrity": "sha512-wZ2o9B2qkdE3RumWhfyZT9swgJYJPeU5qHEcMU8weYpmLex1eeWX0CC32/Y0VutB+BBi2D+iePV/YZIiB4kZGw==",
+      "license": "MIT",
+      "dependencies": {
+        "attr-accept": "^1.1.3",
+        "file-selector": "^0.1.8",
+        "prop-types": "^15.6.2",
+        "prop-types-extra": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 6"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0"
+      }
+    },
+    "node_modules/react-focus-lock": {
+      "version": "2.13.7",
+      "resolved": "https://registry.npmjs.org/react-focus-lock/-/react-focus-lock-2.13.7.tgz",
+      "integrity": "sha512-20lpZHEQrXPb+pp1tzd4ULL6DyO5D2KnR0G69tTDdydrmNhU7pdFmbQUYVyHUgp+xN29IuFR0PVuhOmvaZL9Og==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "focus-lock": "^1.3.6",
+        "prop-types": "^15.6.2",
+        "react-clientside-effect": "^1.2.7",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.3"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-hook-form": {
       "version": "7.55.0",
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.55.0.tgz",
@@ -11256,11 +12421,91 @@
         "react": "^16.8.0 || ^17 || ^18 || ^19"
       }
     },
+    "node_modules/react-input-mask": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/react-input-mask/-/react-input-mask-2.0.4.tgz",
+      "integrity": "sha512-1hwzMr/aO9tXfiroiVCx5EtKohKwLk/NT8QlJXHQ4N+yJJFyUuMT+zfTpLBwX/lK3PkuMlievIffncpMZ3HGRQ==",
+      "license": "MIT",
+      "dependencies": {
+        "invariant": "^2.2.4",
+        "warning": "^4.0.2"
+      },
+      "peerDependencies": {
+        "react": ">=0.14.0",
+        "react-dom": ">=0.14.0"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
+      "license": "MIT"
+    },
+    "node_modules/react-map-gl": {
+      "version": "5.2.13",
+      "resolved": "https://registry.npmjs.org/react-map-gl/-/react-map-gl-5.2.13.tgz",
+      "integrity": "sha512-yYqpZJADB7o5epiYpkcUED5MWevFnOsVn9mgKfizxjsenLMpVNgNgb/x0e9DS4VZtpOLWW2ZXYBB4BJZJlZmTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.0.0",
+        "mapbox-gl": "^1.0.0",
+        "mjolnir.js": "^2.4.0",
+        "prop-types": "^15.7.2",
+        "react-virtualized-auto-sizer": "^1.0.2",
+        "viewport-mercator-project": "^6.2.3 || ^7.0.1"
+      },
+      "engines": {
+        "node": ">= 4",
+        "npm": ">= 3"
+      },
+      "peerDependencies": {
+        "react": ">=16.3.0"
+      }
+    },
+    "node_modules/react-map-gl/node_modules/react-virtualized-auto-sizer": {
+      "version": "1.0.26",
+      "resolved": "https://registry.npmjs.org/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.26.tgz",
+      "integrity": "sha512-CblNyiNVw2o+hsa5/49NH2ogGxZ+t+3aweRvNSq7TVjDIlwk7ir4lencEg5HxHeSzwNarSkNkiu0qJSOXtxm5A==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/react-movable": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/react-movable/-/react-movable-3.4.1.tgz",
+      "integrity": "sha512-VTrBKjRWV4yVUDGj5dIZIhf07fyoFDXzIV6xs3KNNHpgPbkPT7FNu/Vbe11ZjHmT48uOykCmRMpS66DrzRbZZg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
+    "node_modules/react-multi-ref": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/react-multi-ref/-/react-multi-ref-1.0.2.tgz",
+      "integrity": "sha512-6oS5yzrZ4UrdMHbF6QAnnaoIe9h8R+Xv4m8uJWVK8/Q4RCc6RTT0XJ/LZ7llVgFcVbnDHeUAcVIhtRgFyzjJpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.24.4"
+      }
+    },
+    "node_modules/react-range": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/react-range/-/react-range-1.10.0.tgz",
+      "integrity": "sha512-kDo0LiBUHIQIP8menx0UoxTnHr7UXBYpIYl/DR9jCaO1o29VwvCLpkP/qOTNQz5hkJadPg1uEM07XJcJ1XGoKw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "*",
+        "react-dom": "*"
+      }
+    },
     "node_modules/react-redux": {
       "version": "9.2.0",
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
@@ -11350,6 +12595,33 @@
         }
       }
     },
+    "node_modules/react-virtualized": {
+      "version": "9.22.6",
+      "resolved": "https://registry.npmjs.org/react-virtualized/-/react-virtualized-9.22.6.tgz",
+      "integrity": "sha512-U5j7KuUQt3AaMatlMJ0UJddqSiX+Km0YJxSqbAzIiGw5EmNz0khMyqP2hzgu4+QUtm+QPIrxzUX4raJxmVJnHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.7.2",
+        "clsx": "^1.0.4",
+        "dom-helpers": "^5.1.3",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.7.2",
+        "react-lifecycles-compat": "^3.0.4"
+      },
+      "peerDependencies": {
+        "react": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.3.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/react-virtualized/node_modules/clsx": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
+      "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/recharts": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.1.0.tgz",
@@ -11477,6 +12749,12 @@
       "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
       "license": "MIT"
     },
+    "node_modules/resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg==",
+      "license": "MIT"
+    },
     "node_modules/resolve": {
       "version": "1.22.10",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
@@ -11536,6 +12814,15 @@
         "url": "https://github.com/privatenumber/resolve-pkg-maps?sponsor=1"
       }
     },
+    "node_modules/resolve-protobuf-schema": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/resolve-protobuf-schema/-/resolve-protobuf-schema-2.1.0.tgz",
+      "integrity": "sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==",
+      "license": "MIT",
+      "dependencies": {
+        "protocol-buffers-schema": "^3.3.1"
+      }
+    },
     "node_modules/resolve.exports": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/resolve.exports/-/resolve.exports-2.0.3.tgz",
@@ -11615,6 +12902,12 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rw": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
+      "integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/safe-array-concat": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.3.tgz",
@@ -11690,8 +12983,7 @@
     "node_modules/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
-      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
-      "dev": true
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
     "node_modules/saxes": {
       "version": "6.0.0",
@@ -12302,6 +13594,49 @@
         }
       }
     },
+    "node_modules/styletron-engine-atomic": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/styletron-engine-atomic/-/styletron-engine-atomic-1.6.2.tgz",
+      "integrity": "sha512-vWSIxpCkYbVD3xhnxYwnJDJePD8p8pJCu7g1zFxdQIM4z34Eo1zj3LgXJI6yeNMrJ7PkE56SYK6ZOo3hpTOBzA==",
+      "license": "MIT",
+      "dependencies": {
+        "inline-style-prefixer": "^5.1.0",
+        "styletron-standard": "^3.1.0"
+      }
+    },
+    "node_modules/styletron-react": {
+      "version": "6.1.1",
+      "resolved": "https://registry.npmjs.org/styletron-react/-/styletron-react-6.1.1.tgz",
+      "integrity": "sha512-K04BwKZTrdRG/wR5BaFG8z0bFu1jkT2HAp0UP5ZeMAKW6Ix8J3yuROWLoLUMZafaRRQ9LjiLpIl65u75L7YZow==",
+      "license": "MIT",
+      "dependencies": {
+        "prop-types": "^15.6.0",
+        "styletron-standard": "^3.1.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/styletron-standard": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/styletron-standard/-/styletron-standard-3.1.0.tgz",
+      "integrity": "sha512-Cr2q0IFsag6OaIeD/LBNRuCxNTPa/WtTbKP1X3o50mDudN8FGwmD5h1sMJ/Bu5+mO/2NfrNAv9V9zUXn6lXXMA==",
+      "license": "MIT",
+      "dependencies": {
+        "@rtsao/csstype": "2.6.5-forked.0",
+        "csstype": "^3.0.0",
+        "inline-style-prefixer": "^5.1.0"
+      }
+    },
+    "node_modules/supercluster": {
+      "version": "7.1.5",
+      "resolved": "https://registry.npmjs.org/supercluster/-/supercluster-7.1.5.tgz",
+      "integrity": "sha512-EulshI3pGUM66o6ZdH3ReiFcvHpM3vAigyK+vcxdjpJyEbIIrtbmBdY23mGgnI24uXiGFvrGq9Gkum/8U7vJWg==",
+      "license": "ISC",
+      "dependencies": {
+        "kdbush": "^3.0.0"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -12464,6 +13799,12 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/tinyqueue": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/tinyqueue/-/tinyqueue-2.0.3.tgz",
+      "integrity": "sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==",
+      "license": "ISC"
+    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -12935,6 +14276,27 @@
         "d3-timer": "^3.0.1"
       }
     },
+    "node_modules/viewport-mercator-project": {
+      "version": "7.0.4",
+      "resolved": "https://registry.npmjs.org/viewport-mercator-project/-/viewport-mercator-project-7.0.4.tgz",
+      "integrity": "sha512-0jzpL6pIMocCKWg1C3mqi/N4UPgZC3FzwghEm1H+XsUo8hNZAyJc3QR7YqC816ibOR8aWT5pCsV+gCu8/BMJgg==",
+      "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.",
+      "license": "MIT",
+      "dependencies": {
+        "@math.gl/web-mercator": "^3.5.5"
+      }
+    },
+    "node_modules/vt-pbf": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/vt-pbf/-/vt-pbf-3.1.3.tgz",
+      "integrity": "sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==",
+      "license": "MIT",
+      "dependencies": {
+        "@mapbox/point-geometry": "0.1.0",
+        "@mapbox/vector-tile": "^1.3.1",
+        "pbf": "^3.2.1"
+      }
+    },
     "node_modules/w3c-xmlserializer": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/w3c-xmlserializer/-/w3c-xmlserializer-4.0.0.tgz",
@@ -12956,6 +14318,15 @@
         "makeerror": "1.0.12"
       }
     },
+    "node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
diff --git a/package.json b/package.json
index c0541f50..b333bebf 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "@radix-ui/react-radio-group": "1.3.6",
     "@radix-ui/react-slot": "1.2.0",
     "@tanstack/react-query": "5.83.0",
+    "baseui": "15.0.0",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
     "date-fns": "4.1.0",
@@ -37,6 +38,8 @@
     "react-hook-form": "7.55.0",
     "recharts": "3.1.0",
     "sonner": "2.0.4",
+    "styletron-engine-atomic": "1.6.2",
+    "styletron-react": "6.1.1",
     "tailwind-merge": "3.2.0",
     "zod": "3.24.3",
     "zustand": "5.0.6"
diff --git a/src/app/(dashboard)/pacientes/historico-atendimentos/observation-modal.tsx b/src/app/(dashboard)/pacientes/historico-atendimentos/observation-modal.tsx
new file mode 100644
index 00000000..f0d6c784
--- /dev/null
+++ b/src/app/(dashboard)/pacientes/historico-atendimentos/observation-modal.tsx
@@ -0,0 +1,40 @@
+import { AlertTriangle } from 'lucide-react'
+
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+
+interface Props {
+  open: boolean
+  onClose: () => void
+}
+
+export default function ObservationModal({ open, onClose }: Props) {
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className='max-w-md p-6'>
+        <DialogHeader>
+          <div className='mb-2 flex items-center gap-3'>
+            <div
+              className='flex h-12 w-12 items-center justify-center rounded-full'
+              style={{ backgroundColor: '#FCE8D9' }}
+            >
+              <AlertTriangle size={28} color='#F17B2C' />
+            </div>
+            <DialogTitle className='text-xl font-semibold'>
+              Observação do atendimento
+            </DialogTitle>
+          </div>
+        </DialogHeader>
+
+        <p className='text-base text-gray-700'>
+          O atendimento foi direcionado à equipe competente, que seguirá com a
+          análise e retorno.
+        </p>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/src/app/(dashboard)/pacientes/historico-atendimentos/page.tsx b/src/app/(dashboard)/pacientes/historico-atendimentos/page.tsx
index c1f94f45..6b2007d9 100644
--- a/src/app/(dashboard)/pacientes/historico-atendimentos/page.tsx
+++ b/src/app/(dashboard)/pacientes/historico-atendimentos/page.tsx
@@ -1,8 +1,10 @@
 'use client'
 
-import { useMemo, useState } from 'react'
+import { Camera, CornerUpRight } from 'lucide-react'
+import Image from 'next/image'
+import { useEffect, useRef, useState } from 'react'
 
-import { Avatar } from '@/components/ui/avatar'
+import { Button } from '@/components/ui/button'
 
 import type {
   PatientHistoryCategory,
@@ -13,13 +15,7 @@ import PatientHistoryListTable, {
   MOCK_HISTORY,
 } from './patient-history-list-table'
 
-interface PageProps {
-  params: { id: string }
-}
-
-export default function Page({ params }: PageProps) {
-  const patientId = params.id
-
+export default function Page() {
   const [filters, setFilters] = useState<{
     searchName: string
     statusFilter: 'all' | PatientHistoryStatus
@@ -32,33 +28,81 @@ export default function Page({ params }: PageProps) {
     sortOption: 'date_desc',
   })
 
-  const profileName = 'Sonia Amorim'
+  const [profileImage, setProfileImage] = useState<string | null>(null)
+  const fileInputRef = useRef<HTMLInputElement | null>(null)
+  const PROFILE_IMAGE_KEY = 'profileImage'
+
+  useEffect(() => {
+    const savedImage = localStorage.getItem(PROFILE_IMAGE_KEY)
+    if (savedImage) setProfileImage(savedImage)
+  }, [])
+
+  const handleImageClick = () => {
+    fileInputRef.current?.click()
+  }
 
-  const totalAttendances = useMemo(() => {
-    return MOCK_HISTORY.filter((h) => h.patient_id === patientId).length
-  }, [patientId])
+  const handleImageUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) return
+    const reader = new FileReader()
+    reader.onload = () => {
+      if (typeof reader.result === 'string') {
+        setProfileImage(reader.result)
+        localStorage.setItem(PROFILE_IMAGE_KEY, reader.result)
+      }
+    }
+    reader.readAsDataURL(file)
+  }
+
+  const profileName = 'Sonia Amorim'
+  const totalAttendances = MOCK_HISTORY.length
+  const patientId = '1'
 
   return (
     <main className='container mx-auto px-4 py-6'>
       <div className='mb-6 flex flex-col gap-3'>
-        <div>
-          <h1 className='text-sm font-normal'>Histórico do paciente</h1>
-        </div>
-
-        <div className='flex flex-col'>
-          <div className='flex items-center gap-3'>
-            <Avatar className='h-10 w-10 text-sm'>{profileName[0]}</Avatar>
-            <span className='text-sm font-medium'>{profileName}</span>
+        <h1 className='text-[16px] font-normal'>Histórico de atendimentos</h1>
+        <div className='mb-3 h-[1px] w-full bg-gray-200' />
+        <div className='flex flex-col gap-2'>
+          <div className='flex items-center justify-between'>
+            <div className='flex items-center gap-3'>
+              <div
+                className='relative flex h-12 w-12 cursor-pointer items-center justify-center overflow-hidden rounded-full bg-gray-200'
+                onClick={handleImageClick}
+              >
+                {profileImage && (
+                  <Image
+                    src={profileImage}
+                    alt={profileName}
+                    fill
+                    className='object-cover'
+                  />
+                )}
+                <div className='absolute right-0 bottom-0 flex h-5 w-5 items-center justify-center rounded-full bg-white shadow'>
+                  <Camera className='h-3 w-3 text-gray-700' />
+                </div>
+                <input
+                  type='file'
+                  accept='image/*'
+                  ref={fileInputRef}
+                  onChange={handleImageUpload}
+                  className='hidden'
+                />
+              </div>
+              <span className='text-[20px] font-medium'>{profileName}</span>
+            </div>
+            <Button className='flex items-center gap-1 px-3 py-1 text-[14px]'>
+              <CornerUpRight size={16} /> Encaminhar paciente
+            </Button>
           </div>
-
-          <span className='text-muted-foreground mt-1 text-xs'>
-            {totalAttendances} atendimentos realizados
+          <span className='mt-1 text-[16px] text-gray-500'>
+            <strong className='text-black'>{totalAttendances}</strong>{' '}
+            atendimentos realizados
           </span>
         </div>
       </div>
 
       <PatientHistoryFilters onFilterChange={setFilters} />
-
       <PatientHistoryListTable patientId={patientId} filters={filters} />
     </main>
   )
diff --git a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-filters.tsx b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-filters.tsx
index cb804a58..2cf5ce70 100644
--- a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-filters.tsx
+++ b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-filters.tsx
@@ -1,5 +1,6 @@
 'use client'
 
+import { ArrowDownUp, ListFilterPlus, Search } from 'lucide-react'
 import { useEffect, useState } from 'react'
 
 import { Button } from '@/components/ui/button'
@@ -55,28 +56,27 @@ export function PatientHistoryFilters({ onFilterChange }: Props) {
   }
 
   return (
-    <div className='mb-4 flex flex-wrap items-center justify-between gap-2 text-xs'>
-      <div className='flex gap-2'>
+    <div className='mb-4 flex flex-wrap items-center justify-between gap-2 text-[16px]'>
+      <div className='flex gap-2 rounded-md bg-[#F6F8FA] p-2'>
         <Button
-          variant={statusFilter === 'all' ? 'default' : 'outline'}
           size='sm'
-          className='px-2 py-1 text-xs'
+          className={`px-3 py-1 text-[16px] ${statusFilter === 'all' ? 'bg-white text-black' : 'bg-transparent text-gray-700'} hover:text-white`}
           onClick={() => setStatusFilter('all')}
         >
           Todos
         </Button>
+
         <Button
-          variant={statusFilter === 'stable' ? 'default' : 'outline'}
           size='sm'
-          className='px-2 py-1 text-xs'
+          className={`px-3 py-1 text-[16px] ${statusFilter === 'stable' ? 'bg-white text-black' : 'bg-transparent text-gray-700'} hover:text-white`}
           onClick={() => setStatusFilter('stable')}
         >
           Estável
         </Button>
+
         <Button
-          variant={statusFilter === 'crisis' ? 'default' : 'outline'}
           size='sm'
-          className='px-2 py-1 text-xs'
+          className={`px-3 py-1 text-[16px] ${statusFilter === 'crisis' ? 'bg-white text-black' : 'bg-transparent text-gray-700'} hover:text-white`}
           onClick={() => setStatusFilter('crisis')}
         >
           Em surto
@@ -84,48 +84,66 @@ export function PatientHistoryFilters({ onFilterChange }: Props) {
       </div>
 
       <div className='flex gap-2'>
-        <Input
-          placeholder='Pesquisar'
-          value={searchName}
-          onChange={(e) => setSearchName(e.target.value)}
-          className='w-36 text-xs'
-        />
+        <div className='relative'>
+          <Search
+            className='absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2'
+            color='#868C98'
+          />
+          <Input
+            placeholder='Pesquisar'
+            value={searchName}
+            onChange={(e) => setSearchName(e.target.value)}
+            className='w-52 pl-8 text-[16px]' // largura maior
+          />
+        </div>
 
-        <Select
-          placeholder='Categoria'
-          value={categoryFilter}
-          onValueChange={(v: string) =>
-            setCategoryFilter(v as PatientHistoryCategory)
-          }
-          options={[
-            { value: '', label: 'Categoria' },
-            ...Object.entries(CATEGORY_LABELS).map(([value, label]) => ({
-              value,
-              label,
-            })),
-          ]}
-          className='w-36 text-xs'
-        />
+        <div className='relative flex items-center'>
+          <ListFilterPlus
+            className='absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2'
+            color='#868C98'
+          />
+          <Select
+            placeholder='Filtro'
+            value={categoryFilter}
+            onValueChange={(v: string) =>
+              setCategoryFilter(v as PatientHistoryCategory)
+            }
+            options={[
+              { value: '', label: 'Filtro' },
+              ...Object.entries(CATEGORY_LABELS).map(([value, label]) => ({
+                value,
+                label,
+              })),
+            ]}
+            className='w-36 pl-8 text-[16px]'
+          />
+        </div>
 
-        <Select
-          placeholder='Ordenar'
-          value={sortOption}
-          onValueChange={(v: string) => setSortOption(v)}
-          options={[
-            { value: 'date_desc', label: 'Mais recente → Mais antigo' },
-            { value: 'date_asc', label: 'Mais antigo → Mais recente' },
-            { value: 'status_asc', label: 'Estável' },
-            { value: 'status_desc', label: 'Em surto' },
-            { value: 'alpha_asc', label: 'A-Z' },
-            { value: 'alpha_desc', label: 'Z-A' },
-          ]}
-          className='w-36 text-xs'
-        />
+        <div className='relative flex items-center'>
+          <ArrowDownUp
+            className='absolute top-1/2 left-2 h-4 w-4 -translate-y-1/2'
+            color='#868C98'
+          />
+          <Select
+            placeholder='Ordenar por'
+            value={sortOption}
+            onValueChange={(v: string) => setSortOption(v)}
+            options={[
+              { value: 'date_desc', label: 'Mais recente → Mais antigo' },
+              { value: 'date_asc', label: 'Mais antigo → Mais recente' },
+              { value: 'status_asc', label: 'Estável' },
+              { value: 'status_desc', label: 'Em surto' },
+              { value: 'alpha_asc', label: 'A-Z' },
+              { value: 'alpha_desc', label: 'Z-A' },
+            ]}
+            className='w-44 pl-8 text-[16px]'
+          />
+        </div>
 
         <Button
           variant='muted'
           size='sm'
-          className='px-2 py-1 text-xs'
+          className='px-2 py-1 text-[16px]'
           onClick={clearFilters}
         >
           Limpar filtros
diff --git a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-list-table.tsx b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-list-table.tsx
index 74b00cd8..2b1a4eba 100644
--- a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-list-table.tsx
+++ b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-list-table.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { EyeIcon } from 'lucide-react'
+import { AlertTriangle, Eye, Flag } from 'lucide-react'
 import { useEffect, useState } from 'react'
 
 import { Pagination } from '@/components/pagination'
@@ -14,14 +14,13 @@ import {
   TableHeader,
   TableRow,
 } from '@/components/ui/table'
-import { Tag } from '@/components/ui/tag'
 
 import type {
   PatientHistory,
   PatientHistoryCategory,
   PatientHistoryStatus,
 } from './patient-history.types'
-import PatientHistoryObservationsModal from './patient-history-observationsModal'
+import PatientHistoryObservationsModal from './patient-history-observations-modal'
 import PatientHistorySkeleton from './patient-history-skeleton'
 
 interface Props {
@@ -34,25 +33,33 @@ interface Props {
   }
 }
 
-const PATIENT_HISTORY_CATEGORY_LABELS: Record<PatientHistoryCategory, string> =
-  {
-    medicine: 'Medicina',
-    lawyer: 'Advogado',
-    nurse: 'Enfermeiro',
-    psychologist: 'Psicólogo',
-    nutritionist: 'Nutricionista',
-    physical_trainer: 'Preparador físico',
-    social_service: 'Serviço-social',
-    psychiatry: 'Psiquiatria',
-    neurologist: 'Neurologista',
-    ophthalmologist: 'Oftalmologista',
-  }
+const CATEGORY_LABELS: Record<PatientHistoryCategory, string> = {
+  medicine: 'Medicina',
+  lawyer: 'Advogado',
+  nurse: 'Enfermeiro',
+  psychologist: 'Psicólogo',
+  nutritionist: 'Nutricionista',
+  physical_trainer: 'Preparador físico',
+  social_service: 'Serviço-social',
+  psychiatry: 'Psiquiatria',
+  neurologist: 'Neurologista',
+  ophthalmologist: 'Oftalmologista',
+}
 
-const PATIENT_HISTORY_STATUS_LABELS: Record<PatientHistoryStatus, string> = {
+const STATUS_LABELS: Record<PatientHistoryStatus, string> = {
   stable: 'Estável',
   crisis: 'Em surto',
 }
 
+const STATUS_STYLES: Record<
+  PatientHistoryStatus,
+  { bg: string; color: string }
+> = {
+  stable: { bg: '#EFEFEF', color: '#000' },
+  crisis: { bg: '#FEF3EB', color: '#F17B2C' },
+}
+
+// Mock de histórico
 export const MOCK_HISTORY: PatientHistory[] = [
   {
     id: '1',
@@ -91,16 +98,17 @@ export default function PatientHistoryListTable({ patientId, filters }: Props) {
 
   useEffect(() => {
     setLoading(true)
-    let filtered = MOCK_HISTORY
-
+    let filtered = MOCK_HISTORY.filter(
+      (h) => String(h.patient_id) === patientId,
+    )
     if (filters.statusFilter !== 'all')
       filtered = filtered.filter((h) => h.status === filters.statusFilter)
     if (filters.categoryFilter)
       filtered = filtered.filter((h) => h.category === filters.categoryFilter)
     if (filters.searchName)
       filtered = filtered.filter((h) =>
-        h.professional_name
-          ?.toLowerCase()
+        (h.professional_name ?? '')
+          .toLowerCase()
           .includes(filters.searchName.toLowerCase()),
       )
 
@@ -140,53 +148,63 @@ export default function PatientHistoryListTable({ patientId, filters }: Props) {
 
   return (
     <>
-      <Card className='p-4'>
+      <div className='mb-4 h-[1px] w-full bg-[#FCFCFC]' />
+      <Card className='p-4 text-[16px]'>
         {loading ? (
           <PatientHistorySkeleton />
         ) : (
-          <Table>
+          <Table className='text-[16px]'>
             <TableHeader>
               <TableRow>
-                <TableHead className='text-xs'>Data de atendimento</TableHead>
-                <TableHead className='text-xs'>Profissional</TableHead>
-                <TableHead className='text-xs'>Categoria</TableHead>
-                <TableHead className='text-xs'>Status</TableHead>
-                <TableHead className='text-center text-xs'>
-                  Observações
-                </TableHead>
+                <TableHead>Data de atendimento</TableHead>
+                <TableHead>Profissional</TableHead>
+                <TableHead>Especialidade</TableHead>
+                <TableHead className='text-center'>Quadro Geral</TableHead>
+                <TableHead className='text-center'>Observações</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
-              {history.map((item) => (
-                <TableRow key={item.id}>
-                  <TableCell className='text-base'>
-                    {new Date(item.date).toLocaleDateString()}
-                  </TableCell>
-                  <TableCell className='text-base'>
-                    {item.professional_name ?? '-'}
-                  </TableCell>
-                  <TableCell className='text-base'>
-                    <Tag>{PATIENT_HISTORY_CATEGORY_LABELS[item.category]}</Tag>
-                  </TableCell>
-                  <TableCell className='text-base'>
-                    <Tag>{PATIENT_HISTORY_STATUS_LABELS[item.status]}</Tag>
-                  </TableCell>
-                  <TableCell className='text-center'>
-                    <Button
-                      size='icon'
-                      variant='ghost'
-                      onClick={() => setSelected(item)}
-                    >
-                      <EyeIcon />
-                    </Button>
-                  </TableCell>
-                </TableRow>
-              ))}
+              {history.map((item) => {
+                const style = STATUS_STYLES[item.status]
+                return (
+                  <TableRow key={item.id}>
+                    <TableCell>
+                      {new Date(item.date).toLocaleDateString()}
+                    </TableCell>
+                    <TableCell>{item.professional_name ?? '-'}</TableCell>
+                    <TableCell>{CATEGORY_LABELS[item.category]}</TableCell>
+                    <TableCell className='text-center'>
+                      <div
+                        className='mx-auto flex w-fit items-center justify-center gap-1 rounded-md px-2 py-[2px]'
+                        style={{ backgroundColor: style.bg }}
+                      >
+                        {item.status === 'stable' && (
+                          <Flag size={16} color={style.color} />
+                        )}
+                        {item.status === 'crisis' && (
+                          <AlertTriangle size={16} color={style.color} />
+                        )}
+                        <span style={{ color: style.color }}>
+                          {STATUS_LABELS[item.status]}
+                        </span>
+                      </div>
+                    </TableCell>
+                    <TableCell className='text-center'>
+                      <Button
+                        size='icon'
+                        variant='ghost'
+                        onClick={() => setSelected(item)}
+                      >
+                        <Eye size={16} color='#868C98' />
+                      </Button>
+                    </TableCell>
+                  </TableRow>
+                )
+              })}
             </TableBody>
           </Table>
         )}
       </Card>
-
       <Pagination totalItems={total} />
       <PatientHistoryObservationsModal
         data={selected}
diff --git a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-observations-modal.tsx b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-observations-modal.tsx
new file mode 100644
index 00000000..f5703dce
--- /dev/null
+++ b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-observations-modal.tsx
@@ -0,0 +1,59 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog'
+
+import type { PatientHistory } from './patient-history.types'
+
+interface Props {
+  data: PatientHistory | null
+  onClose: () => void
+}
+
+export default function PatientHistoryObservationsModal({
+  data,
+  onClose,
+}: Props) {
+  const [open, setOpen] = useState(false)
+
+  // Sincroniza o estado do modal com o valor de `data`
+  useEffect(() => {
+    setOpen(!!data)
+  }, [data])
+
+  const handleClose = () => {
+    setOpen(false)
+    onClose()
+  }
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(value) => {
+        if (!value) handleClose()
+      }}
+    >
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Observações</DialogTitle>
+        </DialogHeader>
+
+        <div className='mt-2 text-[16px] text-gray-700'>
+          {data?.observations ?? 'Sem observações'}
+        </div>
+
+        <DialogFooter>
+          <Button onClick={handleClose}>Fechar</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
diff --git a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-observationsModal.tsx b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-observationsModal.tsx
deleted file mode 100644
index 4623dc1a..00000000
--- a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-observationsModal.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-'use client'
-
-import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
-
-import type { PatientHistory } from './patient-history.types'
-
-interface Props {
-  data: PatientHistory | null
-  onClose: () => void
-}
-
-export default function PatientHistoryObservationsModal({
-  data,
-  onClose,
-}: Props) {
-  if (!data) return null
-
-  return (
-    <Dialog open={true} onOpenChange={onClose}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Observações do atendimento</DialogTitle>
-        </DialogHeader>
-        <p className='text-sm whitespace-pre-wrap'>
-          {data.observations || '-'}
-        </p>
-        <div className='mt-4 flex justify-end'>
-          <Button variant='outline' onClick={onClose}>
-            Fechar
-          </Button>
-        </div>
-      </DialogContent>
-    </Dialog>
-  )
-}

From e6e39ec69be209229bcbe7f6f509025f3d75bb95 Mon Sep 17 00:00:00 2001
From: Carol Silveira <carolinesv.dev@gmail.com>
Date: Mon, 8 Dec 2025 16:19:26 -0300
Subject: [PATCH 7/7] feat: medical history completed final

---
 .../patient-history-observations-modal.tsx    | 70 ++++++++++---------
 1 file changed, 37 insertions(+), 33 deletions(-)

diff --git a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-observations-modal.tsx b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-observations-modal.tsx
index f5703dce..00d51537 100644
--- a/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-observations-modal.tsx
+++ b/src/app/(dashboard)/pacientes/historico-atendimentos/patient-history-observations-modal.tsx
@@ -1,15 +1,8 @@
 'use client'
 
+import { AlertTriangle, X } from 'lucide-react'
 import { useEffect, useState } from 'react'
-
-import { Button } from '@/components/ui/button'
-import {
-  Dialog,
-  DialogContent,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from '@/components/ui/dialog'
+import { createPortal } from 'react-dom'
 
 import type { PatientHistory } from './patient-history.types'
 
@@ -22,38 +15,49 @@ export default function PatientHistoryObservationsModal({
   data,
   onClose,
 }: Props) {
-  const [open, setOpen] = useState(false)
+  const [mounted, setMounted] = useState(false)
 
-  // Sincroniza o estado do modal com o valor de `data`
   useEffect(() => {
-    setOpen(!!data)
-  }, [data])
+    setMounted(true)
+  }, [])
 
   const handleClose = () => {
-    setOpen(false)
     onClose()
   }
 
-  return (
-    <Dialog
-      open={open}
-      onOpenChange={(value) => {
-        if (!value) handleClose()
-      }}
-    >
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Observações</DialogTitle>
-        </DialogHeader>
+  if (!mounted || !data) return null
 
-        <div className='mt-2 text-[16px] text-gray-700'>
-          {data?.observations ?? 'Sem observações'}
+  return createPortal(
+    <div
+      className='fixed inset-0 z-50 flex items-center justify-center bg-black/50'
+      onClick={handleClose}
+    >
+      <div
+        className='relative w-full max-w-md rounded-xl bg-white p-6 shadow-lg'
+        onClick={(e) => e.stopPropagation()}
+      >
+        <button
+          className='absolute top-4 right-4 text-gray-500 hover:text-gray-700'
+          onClick={handleClose}
+        >
+          <X size={20} />
+        </button>
+        <div className='flex items-center gap-4'>
+          <div className='flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-orange-100'>
+            <AlertTriangle className='h-6 w-6 text-orange-600' />
+          </div>
+          <div className='flex flex-col'>
+            <h2 className='text-[16px] font-semibold text-gray-900'>
+              Observação do atendimento
+            </h2>
+            <p className='mt-1 text-[14px] text-gray-700'>
+              O atendimento foi direcionado à equipe competente, que seguirá com
+              a análise e retorno.
+            </p>
+          </div>
         </div>
-
-        <DialogFooter>
-          <Button onClick={handleClose}>Fechar</Button>
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
+      </div>
+    </div>,
+    document.body,
   )
 }