feature/pending-requirements-page

src/app/(dashboard)/aprovacoes/pendentes/page.tsx

@@ -1,9 +1,11 @@
 import type { Metadata } from 'next'
 
+import { PendingPatientRequirements } from '@/modules/patient-requirements/pending-requirements'
+
 export const metadata: Metadata = {
   title: 'Envios pendentes',
 }
 
 export default function Page() {
-  return <p>Envios pendentes</p>
+  return <PendingPatientRequirements />
 }

src/app/globals.css

@@ -24,7 +24,7 @@
   --color-accent-foreground: #0a0d14;
 
   --color-success: #059669;
-  --color-warning: #f17b2c;
+  --color-warning: #a16207;
   --color-error: #df1c41;
 
   --color-ring: #008b62;

src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { Loader2Icon } from 'lucide-react'
 import { cn } from '@/utils/class-name-merge'
 
 const buttonVariants = cva(
-  'ring-offset-background focus-visible:ring-ring inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg text-sm font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 aria-readonly:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:transition-colors',
+  'ring-offset-background focus-visible:ring-ring inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-lg font-medium whitespace-nowrap transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 aria-readonly:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:transition-colors',
   {
     variants: {
       variant: {
@@ -23,9 +23,9 @@ const buttonVariants = cva(
       },
       size: {
         default: 'h-10 min-h-10 px-4 [&_svg]:size-5',
-        xs: 'h-8 min-h-8 rounded-md px-2.5 text-xs [&_svg]:size-4',
+        xs: 'h-8 min-h-8 rounded-md px-2.5 text-sm [&_svg]:size-4',
         sm: 'h-9 min-h-9 px-4 [&_svg]:size-4',
-        lg: 'h-11 min-h-11 rounded-xl px-3 text-base [&_svg]:size-5',
+        lg: 'h-11 min-h-11 rounded-xl px-3 [&_svg]:size-5',
         icon: 'min-size-10 size-10 [&_svg]:size-5',
       },
     },

src/components/ui/card.tsx

@@ -1,17 +1,26 @@
+import { cva, type VariantProps } from 'class-variance-authority'
 import type { HTMLAttributes } from 'react'
 
 import { cn } from '@/utils/class-name-merge'
 
-export type CardProps = HTMLAttributes<HTMLDivElement>
+const cardVariants = cva('overflow-hidden rounded-2xl border p-4', {
+  variants: {
+    variant: {
+      default: 'bg-card border-border shadow-xs',
+      info: 'bg-accent/75 border-border',
+      warning: 'bg-warning/5 border-warning/25',
+      error: 'bg-error/5 border-error/25',
+      success: 'bg-success/5 border-success/25',
+    },
+  },
+  defaultVariants: {
+    variant: 'default',
+  },
+})
 
-export function Card({ className, ...props }: Readonly<CardProps>) {
-  return (
-    <div
-      className={cn(
-        'bg-card border-border overflow-hidden rounded-2xl border p-4 shadow-xs',
-        className,
-      )}
-      {...props}
-    />
-  )
+export type CardProps = HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof cardVariants>
+
+export function Card({ variant, className, ...props }: Readonly<CardProps>) {
+  return <div className={cn(cardVariants({ variant, className }))} {...props} />
 }

src/components/ui/dialog/container.tsx

@@ -31,7 +31,7 @@ export function DialogContainer({
           <DialogPrimitive.Close
             className={cn(
               buttonVariants({ variant: 'ghost', size: 'icon' }),
-              'hover:text-foreground text-foreground-soft absolute top-3 right-3 size-8 [&_svg]:size-4',
+              'hover:text-foreground text-foreground-soft absolute top-3 right-3 size-8',
             )}
           >
             <XIcon />

src/components/ui/dialog/description.tsx

@@ -8,7 +8,7 @@ export function DialogDescription({
 }: Readonly<React.ComponentProps<typeof DialogPrimitive.Description>>) {
   return (
     <DialogPrimitive.Description
-      className={cn('text-foreground-soft text-sm', className)}
+      className={cn('text-foreground-soft', className)}
       {...props}
     />
   )

src/components/ui/dialog/header.tsx

@@ -30,7 +30,7 @@ export function DialogHeader({
         </div>
       )}
 
-      <div>{props.children}</div>
+      <div className='flex flex-col gap-1'>{props.children}</div>
     </header>
   )
 }

src/components/ui/dialog/title.tsx

@@ -8,7 +8,7 @@ export function DialogTitle({
 }: Readonly<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>>) {
   return (
     <DialogPrimitive.Title
-      className={cn('text-lg font-medium', className)}
+      className={cn('text-xl font-medium', className)}
       {...props}
     />
   )

src/components/ui/label.tsx

@@ -14,7 +14,7 @@ export function Label({
     <label
       aria-readonly={readOnly}
       className={cn(
-        'text-sm font-medium peer-disabled:opacity-50 aria-readonly:pointer-events-none',
+        'font-medium peer-disabled:opacity-50 aria-readonly:pointer-events-none',
         className,
       )}
       {...props}

src/components/ui/tag.tsx

@@ -1,16 +1,41 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import type { HTMLAttributes } from 'react'
+
 import { cn } from '@/utils/class-name-merge'
 
+const tagVariants = cva(
+  'flex w-fit items-center gap-1 border font-medium transition-colors [&_svg]:pointer-events-none [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        outlined: 'bg-background text-foreground-soft border-border',
+        info: 'bg-border/50 text-foreground border-border',
+        warning: 'bg-warning/15 text-warning border-warning/25',
+        error: 'bg-error/15 text-error border-error/25',
+        success: 'bg-success/15 text-success border-success/25',
+      },
+      size: {
+        default: 'rounded-lg px-3 py-2 text-sm leading-none [&_svg]:size-5',
+        sm: 'rounded-md px-2 py-1.5 text-sm leading-none [&_svg]:size-4',
+      },
+    },
+    defaultVariants: {
+      variant: 'outlined',
+      size: 'default',
+    },
+  },
+)
+
+export type TagProps = HTMLAttributes<HTMLDivElement> &
+  VariantProps<typeof tagVariants>
+
 export function Tag({
+  variant,
+  size,
   className,
   ...props
-}: Readonly<React.ComponentProps<'div'>>) {
+}: Readonly<TagProps>) {
   return (
-    <div
-      className={cn(
-        'border-border text-foreground-soft bg-background flex w-fit items-center gap-1 rounded-md border px-2 py-1 text-xs font-medium [&_svg]:size-3.5',
-        className,
-      )}
-      {...props}
-    />
+    <div className={cn(tagVariants({ variant, size, className }))} {...props} />
   )
 }

src/components/ui/textarea.tsx

@@ -3,7 +3,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '@/utils/class-name-merge'
 
 export const textareaVariants = cva(
-  'ring-offset-background focus-visible:ring-ring bg-background w-full shrink-0 resize-y rounded-lg border px-3 py-2 text-sm shadow-xs transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none read-only:focus-visible:ring-0 read-only:focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50',
+  'ring-offset-background focus-visible:ring-ring bg-background w-full shrink-0 resize-y rounded-lg border px-3 py-2 shadow-xs transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none read-only:focus-visible:ring-0 read-only:focus-visible:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50',
   {
     variants: {
       variant: {

src/constants/cache.ts

@@ -10,6 +10,7 @@ export const QUERY_CACHE_KEYS = {
   profile: 'profile',
   patients: 'patients',
   approvals: {
+    pending: 'approvals-pending',
     approved: 'approvals-approved',
   },
   dashboard: {

src/modules/patient-requirements/add-patient-requirement-button.tsx

@@ -0,0 +1,31 @@
+'use client'
+
+import { PlusIcon } from 'lucide-react'
+import React, { useState } from 'react'
+
+import type { ButtonProps } from '@/components/ui/button'
+import { Dialog } from '@/components/ui/dialog/index'
+import { DialogTrigger } from '@/components/ui/dialog/trigger'
+
+import { PatientRequirementModal } from './requirement-modal'
+
+export function AddPatientRequirementButton(props: Readonly<ButtonProps>) {
+  const [isPatientRequirementOpen, setIsPatientRequirementOpen] =
+    useState(false)
+
+  return (
+    <Dialog
+      open={isPatientRequirementOpen}
+      onOpenChange={setIsPatientRequirementOpen}
+    >
+      <DialogTrigger {...props}>
+        <PlusIcon />
+        Nova solicitação
+      </DialogTrigger>
+
+      {isPatientRequirementOpen && (
+        <PatientRequirementModal onOpenChange={setIsPatientRequirementOpen} />
+      )}
+    </Dialog>
+  )
+}

src/modules/patient-requirements/approved-list-table.tsx

@@ -115,7 +115,7 @@ export function ApprovedPatientRequirementsListTable() {
                 <TableCell colSpan={4} className='py-4 text-center'>
                   {hasActiveFilters
                     ? 'Nenhuma aprovação encontrada para os filtros aplicados.'
-                    : 'Nenhuma aprovação encontrada'}
+                    : 'Nenhuma aprovação encontrada.'}
                 </TableCell>
               </TableRow>
             </TableBody>