374 lines
15 KiB
TypeScript
374 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import { usePathname, useRouter } from "next/navigation";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import { Switch } from "@/components/ui/switch";
|
|
import { Calendar } from "lucide-react";
|
|
|
|
import {
|
|
RotateCcw,
|
|
Accessibility,
|
|
Volume2,
|
|
Flame,
|
|
Settings,
|
|
Clipboard,
|
|
Search,
|
|
ChevronDown,
|
|
Upload,
|
|
FileDown,
|
|
Tag,
|
|
Save,
|
|
} from "lucide-react";
|
|
import HeaderAgenda from "@/components/agenda/HeaderAgenda";
|
|
import FooterAgenda from "@/components/agenda/FooterAgenda";
|
|
|
|
export default function NovoAgendamentoPage() {
|
|
const [bloqueio, setBloqueio] = useState(false);
|
|
|
|
return (
|
|
// ====== WRAPPER COM ESPAÇAMENTO GERAL ======
|
|
<div className="min-h-screen flex flex-col bg-white">
|
|
{/* HEADER fora do <main>, usando o MESMO container do footer */}
|
|
<HeaderAgenda />
|
|
|
|
{/* Conteúdo */}
|
|
<main className="flex-1 mx-auto w-full max-w-7xl px-8 py-8 space-y-8">
|
|
{/* ==== INFORMAÇÕES DO PACIENTE — layout idêntico ao print ==== */}
|
|
<div className="border rounded-md p-6 space-y-4 bg-white">
|
|
<h2 className="font-medium">Informações do paciente</h2>
|
|
|
|
{/* grade principal: 12 colunas para controlar as larguras */}
|
|
<div className="grid grid-cols-1 md:grid-cols-12 gap-4">
|
|
{/* ===== Linha 1 ===== */}
|
|
<div className="md:col-span-6">
|
|
<Label>Nome *</Label>
|
|
<div className="relative">
|
|
<Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
|
|
<Input
|
|
placeholder="Digite o nome do paciente"
|
|
className="h-10 pl-8"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="md:col-span-3">
|
|
<Label>CPF do paciente</Label>
|
|
<Input placeholder="Número do CPF" className="h-10" />
|
|
</div>
|
|
|
|
<div className="md:col-span-3">
|
|
<Label>RG</Label>
|
|
<Input placeholder="Número do RG" className="h-10" />
|
|
</div>
|
|
|
|
{/* ===== Linha 2 ===== */}
|
|
{/* 1ª coluna (span 6) com sub-grid: Data (5 col) + Telefone (7 col) */}
|
|
<div className="md:col-span-6">
|
|
<div className="grid grid-cols-12 gap-3">
|
|
<div className="col-span-5">
|
|
<Label>Data de nascimento *</Label>
|
|
<Input type="date" className="h-10" />
|
|
</div>
|
|
|
|
<div className="col-span-7">
|
|
<Label>Telefone</Label>
|
|
<div className="grid grid-cols-[86px_1fr] gap-2">
|
|
<select className="h-10 rounded-md border border-input bg-background px-2 text-[13px]">
|
|
<option value="+55">+55</option>
|
|
<option value="+351">+351</option>
|
|
<option value="+1">+1</option>
|
|
</select>
|
|
<Input placeholder="(99) 99999-9999" className="h-10" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 2ª coluna da linha 2: E-mail (span 6) */}
|
|
<div className="md:col-span-6">
|
|
<Label>E-mail</Label>
|
|
<Input
|
|
type="email"
|
|
placeholder="email@exemplo.com"
|
|
className="h-10"
|
|
/>
|
|
</div>
|
|
|
|
{/* ===== Linha 3 ===== */}
|
|
<div className="md:col-span-6">
|
|
<Label>Convênio</Label>
|
|
<div className="relative">
|
|
<select
|
|
defaultValue="particular"
|
|
className="h-10 w-full rounded-md border border-input bg-background pr-8 pl-3 text-[13px] appearance-none"
|
|
>
|
|
<option value="particular">Particular</option>
|
|
<option value="plano-a">Plano A</option>
|
|
<option value="plano-b">Plano B</option>
|
|
</select>
|
|
<ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="md:col-span-6 grid grid-cols-2 gap-4">
|
|
<div>
|
|
<Label>Matrícula</Label>
|
|
<Input defaultValue="000000000" className="h-10" />
|
|
</div>
|
|
<div>
|
|
<Label>Validade</Label>
|
|
<Input placeholder="00/0000" className="h-10" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* link Informações adicionais */}
|
|
<button
|
|
type="button"
|
|
className="text-sm text-blue-600 inline-flex items-center gap-1 hover:underline"
|
|
aria-label="Ver informações adicionais do paciente"
|
|
>
|
|
Informações adicionais
|
|
<ChevronDown className="h-4 w-4" aria-hidden="true" />
|
|
</button>
|
|
|
|
{/* barra Documentos e anexos */}
|
|
<div className="flex items-center justify-between border rounded-md px-3 py-2">
|
|
<span className="text-sm">Documentos e anexos</span>
|
|
<div className="flex gap-2">
|
|
<Button
|
|
size="icon"
|
|
variant="outline"
|
|
className="h-8 w-8"
|
|
aria-label="Enviar documento"
|
|
>
|
|
<Upload className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
size="icon"
|
|
variant="outline"
|
|
className="h-8 w-8"
|
|
aria-label="Baixar documento"
|
|
>
|
|
<FileDown className="h-4 w-4" />
|
|
</Button>
|
|
<Button
|
|
size="icon"
|
|
variant="outline"
|
|
className="h-8 w-8"
|
|
aria-label="Gerenciar etiquetas"
|
|
>
|
|
<Tag className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* ==== INFORMAÇÕES DO ATENDIMENTO ==== */}
|
|
<div className="border rounded-md p-6 space-y-4 bg-white">
|
|
<h2 className="font-medium">Informações do atendimento</h2>
|
|
|
|
{/* GRID PRINCIPAL: 12 colunas */}
|
|
<div className="grid grid-cols-1 md:grid-cols-12 gap-6">
|
|
{/* COLUNA ESQUERDA (span 6) */}
|
|
<div className="md:col-span-6 space-y-3">
|
|
{/* Nome do profissional */}
|
|
<div>
|
|
<Label className="text-[13px]">
|
|
Nome do profissional <span className="text-red-600">*</span>
|
|
</Label>
|
|
<div className="relative">
|
|
<Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<input
|
|
defaultValue="Robson Alves dos Anjos Neto"
|
|
className="h-10 w-full rounded-full border border-input pl-8 pr-12 text-[13px] focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
/>
|
|
<span className="absolute right-2 top-1/2 -translate-y-1/2 inline-flex h-6 min-w-[28px] items-center justify-center rounded-full bg-muted px-2 text-xs font-medium">
|
|
RA
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
{/* Unidade */}
|
|
<div>
|
|
<Label className="text-[13px]">
|
|
Unidade <span className="text-red-600">*</span>
|
|
</Label>
|
|
<select
|
|
defaultValue="nei"
|
|
className="h-10 w-full rounded-md border border-input bg-background pr-8 pl-3 text-[13px] appearance-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
>
|
|
<option value="nei">
|
|
Núcleo de Especialidades Integradas
|
|
</option>
|
|
<option value="cc">Clínica Central</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Data com ícone */}
|
|
<div>
|
|
<Label className="text-[13px]">
|
|
Data <span className="text-red-600">*</span>
|
|
</Label>
|
|
<div className="relative">
|
|
<Calendar className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
<input
|
|
type="date"
|
|
defaultValue="2025-07-29"
|
|
className="h-10 w-full rounded-md border border-input pl-8 pr-3 text-[13px] focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Início / Término / Profissional solicitante (na mesma linha) */}
|
|
<div className="grid grid-cols-12 gap-3 items-end">
|
|
{/* Início (maior) */}
|
|
<div className="col-span-12 md:col-span-3">
|
|
<Label className="text-[13px]">
|
|
Início <span className="text-red-600">*</span>
|
|
</Label>
|
|
<input
|
|
type="time"
|
|
defaultValue="21:03"
|
|
className="h-10 w-full rounded-md border border-input px-3 text-[13px] focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
{/* Término (maior) */}
|
|
<div className="col-span-12 md:col-span-3">
|
|
<Label className="text-[13px]">
|
|
Término <span className="text-red-600">*</span>
|
|
</Label>
|
|
<input
|
|
type="time"
|
|
defaultValue="21:03"
|
|
className="h-10 w-full rounded-md border border-input px-3 text-[13px] focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
/>
|
|
</div>
|
|
|
|
{/* Profissional solicitante */}
|
|
<div className="col-span-12 md:col-span-6">
|
|
<Label className="text-[13px]">
|
|
Profissional solicitante
|
|
</Label>
|
|
<div className="relative">
|
|
{/* ícone de busca à esquerda */}
|
|
<svg
|
|
className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
>
|
|
<circle cx="11" cy="11" r="8" />
|
|
<line x1="21" y1="21" x2="16.65" y2="16.65" />
|
|
</svg>
|
|
|
|
<select
|
|
defaultValue=""
|
|
className="h-10 w-full rounded-md border border-input bg-background pl-8 pr-8 text-[13px] appearance-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
|
|
>
|
|
<option value="" disabled>
|
|
Selecione o solicitante
|
|
</option>
|
|
<option value="1">Dr. Carlos Silva</option>
|
|
<option value="2">Dra. Maria Santos</option>
|
|
</select>
|
|
|
|
<svg
|
|
className="pointer-events-none absolute right-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
strokeWidth="2"
|
|
>
|
|
<path d="M6 9l6 6 6-6" />
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* COLUNA DIREITA — altura/posição como a imagem 1 */}
|
|
<div className="md:col-span-6 relative -top-10">
|
|
{/* toolbar */}
|
|
<div className="mb-2 flex items-center justify-end gap-1">
|
|
<Button size="icon" variant="outline" className="h-8 w-8">
|
|
<Accessibility className="h-4 w-4" />
|
|
</Button>
|
|
<Button size="icon" variant="outline" className="h-8 w-8">
|
|
<Volume2 className="h-4 w-4" />
|
|
</Button>
|
|
<Button size="icon" variant="outline" className="h-8 w-8">
|
|
<Flame className="h-4 w-4" />
|
|
</Button>
|
|
<Button size="icon" variant="outline" className="h-8 w-8">
|
|
<Settings className="h-4 w-4" />
|
|
</Button>
|
|
<Button size="icon" variant="outline" className="h-8 w-8">
|
|
<Clipboard className="h-4 w-4" />
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Tipo de atendimento + campo de busca */}
|
|
<div className="mb-2">
|
|
<div className="flex items-center justify-between">
|
|
<Label className="text-[13px]">
|
|
Tipo de atendimento <span className="text-red-600">*</span>
|
|
</Label>
|
|
<label className="flex items-center gap-1 text-xs text-muted-foreground">
|
|
<input
|
|
type="checkbox"
|
|
className="h-3.5 w-3.5 accent-current"
|
|
/>{" "}
|
|
Pagamento via Reembolso
|
|
</label>
|
|
</div>
|
|
|
|
<div className="relative mt-1">
|
|
<Search className="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
<Input
|
|
placeholder="Pesquisar"
|
|
className="h-10 w-full rounded-md border border-input pl-8 pr-8 text-[13px]"
|
|
/>
|
|
<ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Observações + imprimir */}
|
|
<div className="mb-0.2 flex items-center justify-between">
|
|
<Label className="text-[13px]">Observações</Label>
|
|
<label className="flex items-center gap-2 text-xs text-muted-foreground">
|
|
<input
|
|
type="checkbox"
|
|
className="h-3.5 w-3.5 accent-current"
|
|
/>{" "}
|
|
Imprimir na Etiqueta / Pulseira
|
|
</label>
|
|
</div>
|
|
|
|
{/* Textarea mais baixo e compacto */}
|
|
<Textarea
|
|
rows={4}
|
|
placeholder=""
|
|
className="text-[13px] h-[110px] min-h-0 resize-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
{/* ====== FOOTER FIXO ====== */}
|
|
<FooterAgenda />
|
|
</div>
|
|
);
|
|
}
|