From c4b3c54b3daeb072ad0cb1aa3fe7aecedba846b6 Mon Sep 17 00:00:00 2001
From: daniel-barbosaa <danimendes9728@gmail.com>
Date: Tue, 4 Nov 2025 19:01:28 -0300
Subject: [PATCH 1/3] feat(approvals): first base created

---
 src/app/(dashboard)/aprovacoes/page.tsx | 153 +++++++++++++++++++++++-
 src/components/ui/input-search.tsx      |  60 ++++++++++
 2 files changed, 212 insertions(+), 1 deletion(-)
 create mode 100644 src/components/ui/input-search.tsx

diff --git a/src/app/(dashboard)/aprovacoes/page.tsx b/src/app/(dashboard)/aprovacoes/page.tsx
index 1cbb52bc..fd473106 100644
--- a/src/app/(dashboard)/aprovacoes/page.tsx
+++ b/src/app/(dashboard)/aprovacoes/page.tsx
@@ -1,9 +1,160 @@
+import { formatDistanceToNow } from 'date-fns'
+import { ptBR } from 'date-fns/locale'
+import { CircleAlert, PlusIcon } from 'lucide-react'
 import type { Metadata } from 'next'
 
+import { Pagination } from '@/components/pagination'
+import { Button } from '@/components/ui/button'
+import { Card } from '@/components/ui/card'
+import { InputSearch } from '@/components/ui/input-search'
+
 export const metadata: Metadata = {
   title: 'Aprovações pendentes',
 }
+type RequirementType = {
+  id: string
+  name: string
+  type: string
+  approved_at: string
+}
+
+const approvalsPending: RequirementType[] = [
+  { id: '1', name: 'Julius Menezes', type: 'laudo', approved_at: '2025-01-10' },
+  {
+    id: '2',
+    name: 'Ana Paula Silva',
+    type: 'primeiro cadastro',
+    approved_at: '2025-01-12',
+  },
+  { id: '3', name: 'Carlos Alberto', type: 'laudo', approved_at: '2025-01-13' },
+  {
+    id: '4',
+    name: 'Fernanda Torres',
+    type: 'primeiro cadastro',
+    approved_at: '2025-03-14',
+  },
+  { id: '5', name: 'Rafael Lima', type: 'laudo', approved_at: '2025-01-15' },
+  {
+    id: '6',
+    name: 'Mariana Oliveira',
+    type: 'primeiro cadastro',
+    approved_at: '2025-05-16',
+  },
+  { id: '7', name: 'Pedro Henrique', type: 'laudo', approved_at: '2025-10-17' },
+  {
+    id: '8',
+    name: 'Beatriz Santos',
+    type: 'primeiro cadastro',
+    approved_at: '2025-01-18',
+  },
+  { id: '9', name: 'Lucas Rocha', type: 'laudo', approved_at: '2025-11-03' },
+  {
+    id: '10',
+    name: 'Isabela Ferreira',
+    type: 'primeiro cadastro',
+    approved_at: '2025-01-20',
+  },
+  {
+    id: '11',
+    name: 'Gustavo Pereira',
+    type: 'laudo',
+    approved_at: '2025-01-21',
+  },
+  {
+    id: '12',
+    name: 'Camila Costa',
+    type: 'primeiro cadastro',
+    approved_at: '2025-01-22',
+  },
+  {
+    id: '13',
+    name: 'Thiago Ribeiro',
+    type: 'laudo',
+    approved_at: '2025-01-23',
+  },
+  {
+    id: '14',
+    name: 'Larissa Almeida',
+    type: 'primeiro cadastro',
+    approved_at: '2025-01-24',
+  },
+  {
+    id: '15',
+    name: 'Vinícius Martins',
+    type: 'laudo',
+    approved_at: '2025-01-25',
+  },
+  {
+    id: '16',
+    name: 'Natália Gomes',
+    type: 'primeiro cadastro',
+    approved_at: '2025-01-26',
+  },
+  {
+    id: '17',
+    name: 'Eduardo Carvalho',
+    type: 'laudo',
+    approved_at: '2025-01-27',
+  },
+  {
+    id: '18',
+    name: 'Patrícia Mendes',
+    type: 'primeiro cadastro',
+    approved_at: '2025-01-28',
+  },
+  { id: '19', name: 'João Pedro', type: 'laudo', approved_at: '2025-01-29' },
+  {
+    id: '20',
+    name: 'Sabrina Azevedo',
+    type: 'primeiro cadastro',
+    approved_at: '2025-01-30',
+  },
+]
 
 export default function Page() {
-  return <p>Aprovações pendentes</p>
+  function formatReceivedDate(date: string) {
+    return formatDistanceToNow(date, {
+      addSuffix: true,
+      locale: ptBR,
+    })
+  }
+  return (
+    <div className='flex flex-col gap-6'>
+      <section className='flex flex-col gap-2 sm:ml-auto sm:flex-row'>
+        <InputSearch
+          placeholder='Pesquisar nome...'
+          className='w-full sm:w-auto'
+        />
+        <Button size='sm'>
+          <PlusIcon />
+          Adicionar solicitações
+        </Button>
+      </section>
+
+      <Card className='grid grid-cols-1 gap-4 sm:grid-cols-3'>
+        {approvalsPending.map((person) => (
+          <Card key={person.id} className='flex flex-col gap-2.5'>
+            <div className='flex flex-col gap-1'>
+              <span className='font-medium -tracking-tight'>{person.name}</span>
+              <div className='flex items-center gap-1'>
+                <CircleAlert className='text-primary size-4' />
+                <span className='text-foreground-soft -tracking-tight'>{`Recebido ${formatReceivedDate(person.approved_at)}`}</span>
+              </div>
+            </div>
+
+            <div className='flex flex-wrap items-center gap-2'>
+              <span className='font-medium -tracking-tight'>
+                Tipo de solicitação:
+              </span>
+              <span className='bg-primary-soft/30 text-primary ml-2 rounded-lg px-2 py-0.5 text-sm capitalize'>
+                {person.type}
+              </span>
+            </div>
+          </Card>
+        ))}
+      </Card>
+
+      <Pagination totalItems={approvalsPending.length} />
+    </div>
+  )
 }
diff --git a/src/components/ui/input-search.tsx b/src/components/ui/input-search.tsx
new file mode 100644
index 00000000..f2677abf
--- /dev/null
+++ b/src/components/ui/input-search.tsx
@@ -0,0 +1,60 @@
+'use client'
+
+import { SearchIcon, XIcon } from 'lucide-react'
+import { useEffect, useState } from 'react'
+
+import { Button } from '@/components/ui/button'
+import { Input, type InputProps } from '@/components/ui/input'
+import { QUERY_PARAMS } from '@/constants/params'
+import { useDebounce } from '@/hooks/debounce'
+import { useParams } from '@/hooks/params'
+import { cn } from '@/utils/class-name-merge'
+
+export function InputSearch({ className, ...props }: Readonly<InputProps>) {
+  const queryParam = QUERY_PARAMS.search
+  const pageParam = QUERY_PARAMS.page
+
+  const { getParam, updateParams } = useParams()
+  const searchQuery = getParam(queryParam) || ''
+
+  const [query, setQuery] = useState(searchQuery)
+  const debouncedQuery = useDebounce(query)
+
+  useEffect(() => {
+    updateParams({
+      set: [{ key: queryParam, value: debouncedQuery }],
+      remove: !debouncedQuery ? [queryParam, pageParam] : [pageParam],
+    })
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [debouncedQuery])
+
+  useEffect(() => {
+    if (!searchQuery) setQuery('')
+  }, [searchQuery])
+
+  return (
+    <div className='relative'>
+      <Input
+        size='sm'
+        name='search'
+        value={query}
+        icon={SearchIcon}
+        onChange={(e) => setQuery(e.target.value)}
+        className={cn('w-52 pr-10', className)}
+        {...props}
+      />
+
+      {query && (
+        <Button
+          size='icon'
+          variant='ghost'
+          title='Limpar pesquisa'
+          className='absolute top-0 right-0 size-9 [&_svg]:size-4'
+          onClick={() => setQuery('')}
+        >
+          <XIcon />
+        </Button>
+      )}
+    </div>
+  )
+}

From 1d4f7dbfbccb9d81e2f5c30a56bf0a9079c0dfec Mon Sep 17 00:00:00 2001
From: daniel-barbosaa <danimendes9728@gmail.com>
Date: Fri, 7 Nov 2025 13:39:27 -0300
Subject: [PATCH 2/3] feat(approvals): adds responsivity

---
 src/app/(dashboard)/aprovacoes/page.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/(dashboard)/aprovacoes/page.tsx b/src/app/(dashboard)/aprovacoes/page.tsx
index fd473106..fd8a3e17 100644
--- a/src/app/(dashboard)/aprovacoes/page.tsx
+++ b/src/app/(dashboard)/aprovacoes/page.tsx
@@ -131,7 +131,7 @@ export default function Page() {
         </Button>
       </section>
 
-      <Card className='grid grid-cols-1 gap-4 sm:grid-cols-3'>
+      <Card className='grid grid-cols-1 gap-4 md:grid-cols-3'>
         {approvalsPending.map((person) => (
           <Card key={person.id} className='flex flex-col gap-2.5'>
             <div className='flex flex-col gap-1'>
@@ -142,11 +142,11 @@ export default function Page() {
               </div>
             </div>
 
-            <div className='flex flex-wrap items-center gap-2'>
+            <div className='flex flex-wrap gap-2'>
               <span className='font-medium -tracking-tight'>
                 Tipo de solicitação:
               </span>
-              <span className='bg-primary-soft/30 text-primary ml-2 rounded-lg px-2 py-0.5 text-sm capitalize'>
+              <span className='bg-primary-soft/30 text-primary rounded-lg px-2 py-0.5 text-sm capitalize'>
                 {person.type}
               </span>
             </div>

From 7537fb1dbe6db6ea13ad37dab2af8f8be7bb25fa Mon Sep 17 00:00:00 2001
From: Juliano Sill <sill.juliano@gmail.com>
Date: Mon, 17 Nov 2025 00:29:59 -0300
Subject: [PATCH 3/3] feat(approvals): create under-review requirements page

- Add UnderReviewPatientRequirements component for under_review status
- Refactor approvals page to use new component
- Display 12 cards per page with search and order functionality
- Create SearchInput and getTimeDistanceToNow helper utilities
- Update PendingPatientRequirements to use new time formatting helper
---
 src/app/(dashboard)/aprovacoes/page.tsx       | 153 +-----------------
 .../ui/{input-search.tsx => search-input.tsx} |   4 +-
 src/helpers/get-time-distance-to-now.ts       |   6 +
 .../pending-requirements.tsx                  |  15 +-
 .../under-review-requirements.tsx             | 135 ++++++++++++++++
 5 files changed, 151 insertions(+), 162 deletions(-)
 rename src/components/ui/{input-search.tsx => search-input.tsx} (94%)
 create mode 100644 src/helpers/get-time-distance-to-now.ts
 create mode 100644 src/modules/patient-requirements/under-review-requirements.tsx

diff --git a/src/app/(dashboard)/aprovacoes/page.tsx b/src/app/(dashboard)/aprovacoes/page.tsx
index fd8a3e17..52dfda76 100644
--- a/src/app/(dashboard)/aprovacoes/page.tsx
+++ b/src/app/(dashboard)/aprovacoes/page.tsx
@@ -1,160 +1,11 @@
-import { formatDistanceToNow } from 'date-fns'
-import { ptBR } from 'date-fns/locale'
-import { CircleAlert, PlusIcon } from 'lucide-react'
 import type { Metadata } from 'next'
 
-import { Pagination } from '@/components/pagination'
-import { Button } from '@/components/ui/button'
-import { Card } from '@/components/ui/card'
-import { InputSearch } from '@/components/ui/input-search'
+import { UnderReviewPatientRequirements } from '@/modules/patient-requirements/under-review-requirements'
 
 export const metadata: Metadata = {
   title: 'Aprovações pendentes',
 }
-type RequirementType = {
-  id: string
-  name: string
-  type: string
-  approved_at: string
-}
-
-const approvalsPending: RequirementType[] = [
-  { id: '1', name: 'Julius Menezes', type: 'laudo', approved_at: '2025-01-10' },
-  {
-    id: '2',
-    name: 'Ana Paula Silva',
-    type: 'primeiro cadastro',
-    approved_at: '2025-01-12',
-  },
-  { id: '3', name: 'Carlos Alberto', type: 'laudo', approved_at: '2025-01-13' },
-  {
-    id: '4',
-    name: 'Fernanda Torres',
-    type: 'primeiro cadastro',
-    approved_at: '2025-03-14',
-  },
-  { id: '5', name: 'Rafael Lima', type: 'laudo', approved_at: '2025-01-15' },
-  {
-    id: '6',
-    name: 'Mariana Oliveira',
-    type: 'primeiro cadastro',
-    approved_at: '2025-05-16',
-  },
-  { id: '7', name: 'Pedro Henrique', type: 'laudo', approved_at: '2025-10-17' },
-  {
-    id: '8',
-    name: 'Beatriz Santos',
-    type: 'primeiro cadastro',
-    approved_at: '2025-01-18',
-  },
-  { id: '9', name: 'Lucas Rocha', type: 'laudo', approved_at: '2025-11-03' },
-  {
-    id: '10',
-    name: 'Isabela Ferreira',
-    type: 'primeiro cadastro',
-    approved_at: '2025-01-20',
-  },
-  {
-    id: '11',
-    name: 'Gustavo Pereira',
-    type: 'laudo',
-    approved_at: '2025-01-21',
-  },
-  {
-    id: '12',
-    name: 'Camila Costa',
-    type: 'primeiro cadastro',
-    approved_at: '2025-01-22',
-  },
-  {
-    id: '13',
-    name: 'Thiago Ribeiro',
-    type: 'laudo',
-    approved_at: '2025-01-23',
-  },
-  {
-    id: '14',
-    name: 'Larissa Almeida',
-    type: 'primeiro cadastro',
-    approved_at: '2025-01-24',
-  },
-  {
-    id: '15',
-    name: 'Vinícius Martins',
-    type: 'laudo',
-    approved_at: '2025-01-25',
-  },
-  {
-    id: '16',
-    name: 'Natália Gomes',
-    type: 'primeiro cadastro',
-    approved_at: '2025-01-26',
-  },
-  {
-    id: '17',
-    name: 'Eduardo Carvalho',
-    type: 'laudo',
-    approved_at: '2025-01-27',
-  },
-  {
-    id: '18',
-    name: 'Patrícia Mendes',
-    type: 'primeiro cadastro',
-    approved_at: '2025-01-28',
-  },
-  { id: '19', name: 'João Pedro', type: 'laudo', approved_at: '2025-01-29' },
-  {
-    id: '20',
-    name: 'Sabrina Azevedo',
-    type: 'primeiro cadastro',
-    approved_at: '2025-01-30',
-  },
-]
 
 export default function Page() {
-  function formatReceivedDate(date: string) {
-    return formatDistanceToNow(date, {
-      addSuffix: true,
-      locale: ptBR,
-    })
-  }
-  return (
-    <div className='flex flex-col gap-6'>
-      <section className='flex flex-col gap-2 sm:ml-auto sm:flex-row'>
-        <InputSearch
-          placeholder='Pesquisar nome...'
-          className='w-full sm:w-auto'
-        />
-        <Button size='sm'>
-          <PlusIcon />
-          Adicionar solicitações
-        </Button>
-      </section>
-
-      <Card className='grid grid-cols-1 gap-4 md:grid-cols-3'>
-        {approvalsPending.map((person) => (
-          <Card key={person.id} className='flex flex-col gap-2.5'>
-            <div className='flex flex-col gap-1'>
-              <span className='font-medium -tracking-tight'>{person.name}</span>
-              <div className='flex items-center gap-1'>
-                <CircleAlert className='text-primary size-4' />
-                <span className='text-foreground-soft -tracking-tight'>{`Recebido ${formatReceivedDate(person.approved_at)}`}</span>
-              </div>
-            </div>
-
-            <div className='flex flex-wrap gap-2'>
-              <span className='font-medium -tracking-tight'>
-                Tipo de solicitação:
-              </span>
-              <span className='bg-primary-soft/30 text-primary rounded-lg px-2 py-0.5 text-sm capitalize'>
-                {person.type}
-              </span>
-            </div>
-          </Card>
-        ))}
-      </Card>
-
-      <Pagination totalItems={approvalsPending.length} />
-    </div>
-  )
+  return <UnderReviewPatientRequirements />
 }
diff --git a/src/components/ui/input-search.tsx b/src/components/ui/search-input.tsx
similarity index 94%
rename from src/components/ui/input-search.tsx
rename to src/components/ui/search-input.tsx
index f2677abf..8447652f 100644
--- a/src/components/ui/input-search.tsx
+++ b/src/components/ui/search-input.tsx
@@ -10,7 +10,7 @@ import { useDebounce } from '@/hooks/debounce'
 import { useParams } from '@/hooks/params'
 import { cn } from '@/utils/class-name-merge'
 
-export function InputSearch({ className, ...props }: Readonly<InputProps>) {
+export function SearchInput({ className, ...props }: Readonly<InputProps>) {
   const queryParam = QUERY_PARAMS.search
   const pageParam = QUERY_PARAMS.page
 
@@ -48,7 +48,7 @@ export function InputSearch({ className, ...props }: Readonly<InputProps>) {
         <Button
           size='icon'
           variant='ghost'
-          title='Limpar pesquisa'
+          title='Limpar busca'
           className='absolute top-0 right-0 size-9 [&_svg]:size-4'
           onClick={() => setQuery('')}
         >
diff --git a/src/helpers/get-time-distance-to-now.ts b/src/helpers/get-time-distance-to-now.ts
new file mode 100644
index 00000000..9023b25c
--- /dev/null
+++ b/src/helpers/get-time-distance-to-now.ts
@@ -0,0 +1,6 @@
+import { formatDistanceToNow } from 'date-fns'
+import { ptBR } from 'date-fns/locale'
+
+export function getTimeDistanceToNow(date: string | Date) {
+  return formatDistanceToNow(date, { addSuffix: true, locale: ptBR })
+}
diff --git a/src/modules/patient-requirements/pending-requirements.tsx b/src/modules/patient-requirements/pending-requirements.tsx
index 5bb05470..8a91aa64 100644
--- a/src/modules/patient-requirements/pending-requirements.tsx
+++ b/src/modules/patient-requirements/pending-requirements.tsx
@@ -15,6 +15,7 @@ import { Skeleton } from '@/components/ui/skeleton'
 import { Tag } from '@/components/ui/tag'
 import { QUERY_CACHE_KEYS } from '@/constants/cache'
 import { QUERY_PARAMS } from '@/constants/params'
+import { getTimeDistanceToNow } from '@/helpers/get-time-distance-to-now'
 import { useParams } from '@/hooks/params'
 import { api } from '@/lib/api'
 import type { OrderMappingType } from '@/types/order'
@@ -123,9 +124,9 @@ export function PendingPatientRequirements() {
                 variant={severityVariant()}
                 className='flex flex-col gap-1 rounded-xl shadow-none'
               >
-                <h2 className='text-lg font-medium'>
+                <h3 className='text-lg font-medium'>
                   {requirement.patient.name}
-                </h2>
+                </h3>
 
                 <div className='text-foreground-soft flex items-center gap-2'>
                   <span>Pendência:</span>
@@ -135,7 +136,7 @@ export function PendingPatientRequirements() {
                 </div>
 
                 <div className='text-foreground-soft flex items-center gap-1'>
-                  <Calendar className='text-disabled size-4' />
+                  <Calendar className='text-disabled size-4.5' />
                   <span>
                     Solicitado em {formatDate(requirement.created_at)}
                   </span>
@@ -149,12 +150,8 @@ export function PendingPatientRequirements() {
                     'data-[severity="error"]:text-error',
                   )}
                 >
-                  <CircleAlert className='size-4' />
-                  <p>
-                    {pendingDays <= 1
-                      ? 'Pendente há 1 dia'
-                      : `Pendente há ${pendingDays} dias`}
-                  </p>
+                  <CircleAlert className='size-4.5' />
+                  <p>Pendente {getTimeDistanceToNow(requirement.created_at)}</p>
                 </div>
               </Card>
             )
diff --git a/src/modules/patient-requirements/under-review-requirements.tsx b/src/modules/patient-requirements/under-review-requirements.tsx
new file mode 100644
index 00000000..e265393a
--- /dev/null
+++ b/src/modules/patient-requirements/under-review-requirements.tsx
@@ -0,0 +1,135 @@
+'use client'
+
+import { useQuery } from '@tanstack/react-query'
+import { CircleAlertIcon } from 'lucide-react'
+import { useEffect, useState } from 'react'
+
+import { DataTableHeader } from '@/components/data-table/header'
+import { DataTableHeaderActions } from '@/components/data-table/header/actions'
+import { DataTableHeaderOrderBy } from '@/components/data-table/header/order-by'
+import { DataTableHeaderSearch } from '@/components/data-table/header/search'
+import { Pagination } from '@/components/pagination'
+import { Card } from '@/components/ui/card'
+import { Skeleton } from '@/components/ui/skeleton'
+import { Tag } from '@/components/ui/tag'
+import { QUERY_CACHE_KEYS } from '@/constants/cache'
+import { QUERY_PARAMS } from '@/constants/params'
+import { getTimeDistanceToNow } from '@/helpers/get-time-distance-to-now'
+import { useParams } from '@/hooks/params'
+import { api } from '@/lib/api'
+import type { OrderMappingType } from '@/types/order'
+import type { PatientRequirement } from '@/types/patient-requirements'
+import {
+  PATIENT_REQUIREMENT_TYPES,
+  PATIENT_REQUIREMENTS_ORDER_OPTIONS,
+  type PatientRequirementsOrder,
+} from '@/types/patient-requirements'
+
+import { AddPatientRequirementButton } from './add-patient-requirement-button'
+
+// TODO: add dropdown actions menu
+export function UnderReviewPatientRequirements() {
+  const [stableTotal, setStableTotal] = useState(0)
+  const { getParam } = useParams()
+
+  const perPage = 12
+  const page = getParam(QUERY_PARAMS.page)
+  const search = getParam(QUERY_PARAMS.search)
+  const orderBy = getParam(QUERY_PARAMS.orderBy)
+
+  const ORDER_MAPPING: OrderMappingType<PatientRequirementsOrder> = {
+    name_asc: { orderBy: 'name', order: 'ASC' },
+    name_desc: { orderBy: 'name', order: 'DESC' },
+    date_asc: { orderBy: 'submitted_at', order: 'ASC' },
+    date_desc: { orderBy: 'submitted_at', order: 'DESC' },
+    type_asc: { orderBy: 'type', order: 'ASC' },
+    type_desc: { orderBy: 'type', order: 'DESC' },
+  }
+
+  const orderByQuery = ORDER_MAPPING[orderBy as PatientRequirementsOrder] ?? {
+    orderBy: 'submitted_at',
+    order: 'DESC',
+  }
+
+  const { data: response, isLoading } = useQuery({
+    queryKey: [QUERY_CACHE_KEYS.approvals.pending, search, page, orderByQuery],
+    queryFn: () =>
+      api<{ requirements: PatientRequirement[]; total: number }>(
+        '/patient-requirements',
+        {
+          params: {
+            page,
+            perPage,
+            search,
+            status: 'under_review',
+            ...orderByQuery,
+          },
+        },
+      ),
+  })
+
+  const requirements = response?.data?.requirements ?? []
+  const isEmpty = requirements.length === 0
+  const hasActiveFilters = !!search
+
+  useEffect(() => {
+    if (response?.data) {
+      setStableTotal(response.data.total)
+    }
+  }, [response?.data])
+
+  return (
+    <>
+      <DataTableHeader>
+        <DataTableHeaderActions>
+          <DataTableHeaderSearch placeholder='Pesquisar nome...' />
+          <DataTableHeaderOrderBy
+            options={PATIENT_REQUIREMENTS_ORDER_OPTIONS}
+            className='w-52'
+          />
+          <AddPatientRequirementButton size='sm' />
+        </DataTableHeaderActions>
+      </DataTableHeader>
+
+      <Card className='grid gap-4 p-6 sm:grid-cols-2 xl:grid-cols-3'>
+        {isLoading && <Skeleton quantity={12} className='h-40 rounded-xl' />}
+
+        {isEmpty && !isLoading && (
+          <div className='text-foreground-soft col-span-full py-8 text-center'>
+            {hasActiveFilters
+              ? 'Nenhuma aprovação encontrada para os filtros aplicados.'
+              : 'Nenhuma aprovação em análise encontrada.'}
+          </div>
+        )}
+
+        {!isEmpty &&
+          requirements.map((requirement) => (
+            <Card
+              key={requirement.id}
+              className='flex flex-col gap-1 rounded-xl'
+            >
+              <h3 className='text-lg font-medium'>
+                {requirement.patient.name}
+              </h3>
+              <div className='text-foreground-soft flex items-center gap-1'>
+                <CircleAlertIcon className='text-success size-4.5' />
+                <span>
+                  Recebido{' '}
+                  {getTimeDistanceToNow(requirement.submitted_at ?? '')}
+                </span>
+              </div>
+
+              <div className='mt-3 flex items-center gap-1.5'>
+                <span>Tipo de solicitação:</span>
+                <Tag variant='success' size='sm'>
+                  {PATIENT_REQUIREMENT_TYPES[requirement.type]}
+                </Tag>
+              </div>
+            </Card>
+          ))}
+      </Card>
+
+      <Pagination perPage={perPage} totalItems={stableTotal} />
+    </>
+  )
+}