RiseUP/riseup-squad20
1
0
Fork 3
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

develop #83

Merged
M-Gabrielly merged 426 commits from develop into main 2025-12-04 04:13:15 +00:00
Conversation 0 Commits 426 Files Changed 170 +108 -91
7 changed files with 108 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 5d00ffb508 - Show all commits

39
susconecta/app/agenda/page.tsx
View File

@ -4,12 +4,40 @@ import { useRouter } from "next/navigation";
import { CalendarRegistrationForm } from "@/components/forms/calendar-registration-form"; import { CalendarRegistrationForm } from "@/components/forms/calendar-registration-form";
import HeaderAgenda from "@/components/agenda/HeaderAgenda"; import HeaderAgenda from "@/components/agenda/HeaderAgenda";
import FooterAgenda from "@/components/agenda/FooterAgenda"; import FooterAgenda from "@/components/agenda/FooterAgenda";
import { useState } from "react";
interface FormData {
patientName?: string;
cpf?: string;
rg?: string;
birthDate?: string;
phoneCode?: string;
phoneNumber?: string;
email?: string;
convenio?: string;
matricula?: string;
validade?: string;
documentos?: string;
professionalName?: string;
unit?: string;
appointmentDate?: string;
startTime?: string;
endTime?: string;
requestingProfessional?: string;
appointmentType?: string;
notes?: string;
}
export default function NovoAgendamentoPage() { export default function NovoAgendamentoPage() {
const router = useRouter(); const router = useRouter();
const [formData, setFormData] = useState<FormData>({});
const handleSave = (data: any) => { const handleFormChange = (data: FormData) => {
console.log("Salvando novo agendamento...", data); setFormData(data);
};
const handleSave = () => {
console.log("Salvando novo agendamento...", formData);
alert("Novo agendamento salvo (simulado)!"); alert("Novo agendamento salvo (simulado)!");
router.push("/consultas"); router.push("/consultas");
}; };
@ -23,12 +51,11 @@ export default function NovoAgendamentoPage() {
<HeaderAgenda /> <HeaderAgenda />
<main className="flex-1 mx-auto w-full max-w-7xl px-8 py-8"> <main className="flex-1 mx-auto w-full max-w-7xl px-8 py-8">
<CalendarRegistrationForm <CalendarRegistrationForm
onSave={handleSave} formData={formData}
onCancel={handleCancel} onFormChange={handleFormChange}
initialData={{}}
/> />
</main> </main>
<FooterAgenda /> <FooterAgenda onSave={handleSave} onCancel={handleCancel} />
</div> </div>
); );
} }

10
susconecta/app/financeiro/page.tsx
View File

@ -53,7 +53,7 @@ export default function FinanceiroPage() {
<DollarSign className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" /> <DollarSign className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input <Input
placeholder="R$ 0,00" placeholder="R$ 0,00"
className="h-10 w-full rounded-md pl-8 pr-4 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500" className="h-10 w-full rounded-md pl-8 pr-4 focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
/> />
</div> </div>
</div> </div>
@ -63,7 +63,7 @@ export default function FinanceiroPage() {
<DollarSign className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" /> <DollarSign className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input <Input
placeholder="R$ 0,00" placeholder="R$ 0,00"
className="h-10 w-full rounded-md pl-8 pr-4 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500" className="h-10 w-full rounded-md pl-8 pr-4 focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
/> />
</div> </div>
</div> </div>
@ -81,7 +81,7 @@ export default function FinanceiroPage() {
<div className="grid grid-cols-1 md:grid-cols-3 gap-4"> <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<div className="space-y-2"> <div className="space-y-2">
<Label className="text-xs text-muted-foreground">Tipo</Label> <Label className="text-xs text-muted-foreground">Tipo</Label>
<select className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none"> <select className="h-10 w-full rounded-md border border-gray-300 dark:border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none transition-colors hover:bg-muted/30 hover:border-gray-400">
<option value="">Selecionar</option> <option value="">Selecionar</option>
<option value="dinheiro">Dinheiro</option> <option value="dinheiro">Dinheiro</option>
<option value="cartao">Cartão</option> <option value="cartao">Cartão</option>
@ -91,7 +91,7 @@ export default function FinanceiroPage() {
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label className="text-xs text-muted-foreground">Parcelas</Label> <Label className="text-xs text-muted-foreground">Parcelas</Label>
<select className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none"> <select className="h-10 w-full rounded-md border border-gray-300 dark:border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none transition-colors hover:bg-muted/30 hover:border-gray-400">
<option value="1">1x</option> <option value="1">1x</option>
<option value="2">2x</option> <option value="2">2x</option>
<option value="3">3x</option> <option value="3">3x</option>
@ -106,7 +106,7 @@ export default function FinanceiroPage() {
<Calculator className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" /> <Calculator className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input <Input
placeholder="0%" placeholder="0%"
className="h-10 w-full rounded-md pl-8 pr-4 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500" className="h-10 w-full rounded-md pl-8 pr-4 focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
/> />
</div> </div>
</div> </div>

10
susconecta/components/agenda/FooterAgenda.tsx
View File

@ -5,9 +5,13 @@ import { Button } from "../ui/button";
import { Label } from "../ui/label"; import { Label } from "../ui/label";
import { Switch } from "../ui/switch"; import { Switch } from "../ui/switch";
import { useState } from "react"; import { useState } from "react";
import Link from "next/link";
export default function FooterAgenda() { interface FooterAgendaProps {
onSave: () => void;
onCancel: () => void;
}
export default function FooterAgenda({ onSave, onCancel }: FooterAgendaProps) {
const [bloqueio, setBloqueio] = useState(false); const [bloqueio, setBloqueio] = useState(false);
return ( return (
@ -18,6 +22,8 @@ export default function FooterAgenda() {
<Label className="text-sm text-foreground">Bloqueio de Agenda</Label> <Label className="text-sm text-foreground">Bloqueio de Agenda</Label>
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<Button variant="ghost" onClick={onCancel}>Cancelar</Button>
<Button onClick={onSave}>Salvar</Button>
</div> </div>
</div> </div>
</div> </div>

32
susconecta/components/agenda/HeaderAgenda.tsx
View File

@ -8,17 +8,10 @@ export default function HeaderAgenda() {
const pathname = usePathname(); const pathname = usePathname();
const router = useRouter(); const router = useRouter();
const isAg = pathname?.startsWith("/agendamento"); const isAg = pathname?.startsWith("/agenda");
const isPr = pathname?.startsWith("/procedimento"); const isPr = pathname?.startsWith("/procedimento");
const isFi = pathname?.startsWith("/financeiro"); const isFi = pathname?.startsWith("/financeiro");
const tabCls = (active: boolean, extra = "") =>
`px-4 py-1.5 text-[13px] border ${
active
? "border-blue-500 bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 font-medium"
: "text-muted-foreground hover:bg-muted border-border"
} ${extra}`;
return ( return (
<header className="border-b bg-background border-border"> <header className="border-b bg-background border-border">
<div className="mx-auto w-full max-w-7xl px-8 py-3 flex items-center justify-between"> <div className="mx-auto w-full max-w-7xl px-8 py-3 flex items-center justify-between">
@ -33,24 +26,33 @@ export default function HeaderAgenda() {
<Link <Link
href="/agenda" href="/agenda"
role="tab" role="tab"
aria-selected={isAg} className={`px-4 py-1.5 text-[13px] font-medium border rounded-md ${
className={tabCls(Boolean(isAg)) + " rounded-md"} isAg
? "bg-primary text-white border-primary dark:bg-primary dark:text-white"
: "text-foreground hover:bg-muted border-input"
}`}
> >
Agendamento Agendamento
</Link> </Link>
<Link <Link
href="/procedimento" href="/procedimento"
role="tab" role="tab"
aria-selected={isPr} className={`px-4 py-1.5 text-[13px] font-medium border rounded-md ${
className={tabCls(Boolean(isPr)) + " rounded-md"} isPr
? "bg-primary text-white border-primary dark:bg-primary dark:text-white"
: "text-foreground hover:bg-muted border-input"
}`}
> >
Procedimento Procedimento
</Link> </Link>
<Link <Link
href="/financeiro" href="/financeiro"
role="tab" role="tab"
aria-selected={isFi} className={`px-4 py-1.5 text-[13px] font-medium border rounded-md ${
className={tabCls(Boolean(isFi)) + " rounded-md"} isFi
? "bg-primary text-white border-primary dark:bg-primary dark:text-white"
: "text-foreground hover:bg-muted border-input"
}`}
> >
Financeiro Financeiro
</Link> </Link>
@ -60,7 +62,7 @@ export default function HeaderAgenda() {
type="button" type="button"
aria-label="Histórico" aria-label="Histórico"
onClick={() => router.back()} onClick={() => router.back()}
className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-border bg-background text-muted-foreground hover:bg-muted" className="inline-flex h-8 w-8 items-center justify-center rounded-md border border-border bg-background text-muted-foreground hover:bg-primary hover:text-white hover:border-primary transition-colors"
> >
<RotateCcw className="h-4 w-4" /> <RotateCcw className="h-4 w-4" />
</button> </button>

100
susconecta/components/forms/calendar-registration-form.tsx
View File

@ -1,9 +1,7 @@
"use client"; "use client";
import { useState, useEffect } from "react"; import { useState } from "react";
import dynamic from 'next/dynamic';
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input"; import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea"; import { Textarea } from "@/components/ui/textarea";
@ -32,9 +30,8 @@ interface FormData {
} }
interface CalendarRegistrationFormProperties { interface CalendarRegistrationFormProperties {
initialData?: FormData; formData: FormData;
onSave: (data: FormData) => void; onFormChange: (data: FormData) => void;
onCancel: () => void;
} }
const formatValidityDate = (value: string) => { const formatValidityDate = (value: string) => {
@ -48,79 +45,69 @@ const formatValidityDate = (value: string) => {
return cleaned; return cleaned;
}; };
export function CalendarRegistrationForm({ initialData, onSave, onCancel }: CalendarRegistrationFormProperties) { export function CalendarRegistrationForm({ formData, onFormChange }: CalendarRegistrationFormProperties) {
const [formData, setFormData] = useState<FormData>(initialData || {});
const [isAdditionalInfoOpen, setIsAdditionalInfoOpen] = useState(false); const [isAdditionalInfoOpen, setIsAdditionalInfoOpen] = useState(false);
useEffect(() => {
setFormData(initialData || {});
}, [initialData]);
const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => { const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
const { name, value } = event.target; const { name, value } = event.target;
if (name === 'validade') { if (name === 'validade') {
const formattedValue = formatValidityDate(value); const formattedValue = formatValidityDate(value);
setFormData((previousState) => ({ ...previousState, [name]: formattedValue })); onFormChange({ ...formData, [name]: formattedValue });
} else { } else {
setFormData((previousState) => ({ ...previousState, [name]: value })); onFormChange({ ...formData, [name]: value });
} }
}; };
const handleSubmit = (event: React.FormEvent) => {
event.preventDefault();
onSave(formData);
};
return ( return (
<form onSubmit={handleSubmit} className="space-y-8"> <form className="space-y-8">
<div className="border border-border rounded-md p-6 space-y-4 bg-card"> <div className="border border-border rounded-md p-6 space-y-4 bg-card">
<h2 className="font-medium text-foreground">Informações do paciente</h2> <h2 className="font-medium text-foreground">Informações do paciente</h2>
<div className="grid grid-cols-1 md:grid-cols-12 gap-4"> <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
<div className="md:col-span-6 space-y-2"> <div className="md:col-span-6 space-y-2">
<Label>Nome *</Label> <Label className="text-[13px]">Nome *</Label>
<div className="relative"> <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" /> <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input <Input
name="patientName" name="patientName"
placeholder="Digite o nome do paciente" placeholder="Digite o nome do paciente"
className="h-10 pl-8" className="h-11 pl-8 rounded-md transition-colors hover:bg-muted/30"
value={formData.patientName || ''} value={formData.patientName || ''}
onChange={handleChange} onChange={handleChange}
/> />
</div> </div>
</div> </div>
<div className="md:col-span-3 space-y-2"> <div className="md:col-span-3 space-y-2">
<Label>CPF do paciente</Label> <Label className="text-[13px]">CPF do paciente</Label>
<Input name="cpf" placeholder="Número do CPF" className="h-10" value={formData.cpf || ''} onChange={handleChange} /> <Input name="cpf" placeholder="Número do CPF" className="h-11 rounded-md transition-colors hover:bg-muted/30" value={formData.cpf || ''} onChange={handleChange} />
</div> </div>
<div className="md:col-span-3 space-y-2"> <div className="md:col-span-3 space-y-2">
<Label>RG</Label> <Label className="text-[13px]">RG</Label>
<Input name="rg" placeholder="Número do RG" className="h-10" value={formData.rg || ''} onChange={handleChange} /> <Input name="rg" placeholder="Número do RG" className="h-11 rounded-md transition-colors hover:bg-muted/30" value={formData.rg || ''} onChange={handleChange} />
</div> </div>
<div className="md:col-span-3 space-y-2"> <div className="md:col-span-3 space-y-2">
<Label>Data de nascimento *</Label> <Label className="text-[13px]">Data de nascimento *</Label>
<Input name="birthDate" type="date" className="h-10" value={formData.birthDate || ''} onChange={handleChange} /> <Input name="birthDate" type="date" className="h-11 rounded-md transition-colors hover:bg-muted/30" value={formData.birthDate || ''} onChange={handleChange} />
</div> </div>
<div className="md:col-span-3 space-y-2"> <div className="md:col-span-3 space-y-2">
<Label>Telefone</Label> <Label className="text-[13px]">Telefone</Label>
<div className="flex gap-2"> <div className="flex gap-2">
<select name="phoneCode" className="h-10 w-20 rounded-md border border-input bg-background text-foreground px-2 text-[13px]" value={formData.phoneCode || '+55'} onChange={handleChange}> <select name="phoneCode" className="h-11 w-20 rounded-md border border-gray-300 dark:border-input bg-background text-foreground px-2 text-[13px] transition-colors hover:bg-muted/30 hover:border-gray-400" value={formData.phoneCode || '+55'} onChange={handleChange}>
<option value="+55">+55</option> <option value="+55">+55</option>
<option value="+351">+351</option> <option value="+351">+351</option>
<option value="+1">+1</option> <option value="+1">+1</option>
</select> </select>
<Input name="phoneNumber" placeholder="(99) 99999-9999" className="h-10 flex-1" value={formData.phoneNumber || ''} onChange={handleChange} /> <Input name="phoneNumber" placeholder="(99) 99999-9999" className="h-11 flex-1 rounded-md transition-colors hover:bg-muted/30" value={formData.phoneNumber || ''} onChange={handleChange} />
</div> </div>
</div> </div>
<div className="md:col-span-6 space-y-2"> <div className="md:col-span-6 space-y-2">
<Label>E-mail</Label> <Label className="text-[13px]">E-mail</Label>
<Input name="email" type="email" placeholder="email@exemplo.com" className="h-10" value={formData.email || ''} onChange={handleChange} /> <Input name="email" type="email" placeholder="email@exemplo.com" className="h-11 rounded-md transition-colors hover:bg-muted/30" value={formData.email || ''} onChange={handleChange} />
</div> </div>
<div className="md:col-span-6 space-y-2"> <div className="md:col-span-6 space-y-2">
<Label>Convênio</Label> <Label className="text-[13px]">Convênio</Label>
<div className="relative"> <div className="relative">
<select name="convenio" className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none" value={formData.convenio || ''} onChange={handleChange}> <select name="convenio" className="h-11 w-full rounded-md border border-gray-300 dark:border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none transition-colors hover:bg-muted/30 hover:border-gray-400" value={formData.convenio || ''} onChange={handleChange}>
<option value="" disabled>Selecione um convênio</option> <option value="" disabled>Selecione um convênio</option>
<option value="sulamerica">Sulamérica</option> <option value="sulamerica">Sulamérica</option>
<option value="bradesco">Bradesco Saúde</option> <option value="bradesco">Bradesco Saúde</option>
@ -133,27 +120,27 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: Cale
<div className="md:col-span-6 space-y-2"> <div className="md:col-span-6 space-y-2">
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div className="space-y-2"> <div className="space-y-2">
<Label>Matrícula</Label> <Label className="text-[13px]">Matrícula</Label>
<Input name="matricula" placeholder="000000000" maxLength={9} className="h-10" value={formData.matricula || ''} onChange={handleChange} /> <Input name="matricula" placeholder="000000000" maxLength={9} className="h-11 rounded-md transition-colors hover:bg-muted/30" value={formData.matricula || ''} onChange={handleChange} />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label>Validade</Label> <Label className="text-[13px]">Validade</Label>
<Input name="validade" placeholder="00/00/0000" className="h-10" value={formData.validade || ''} onChange={handleChange} /> <Input name="validade" placeholder="00/00/0000" className="h-11 rounded-md transition-colors hover:bg-muted/30" value={formData.validade || ''} onChange={handleChange} />
</div> </div>
</div> </div>
</div> </div>
<div className="md:col-span-12 pt-2"> <div className="md:col-span-12 space-y-2">
<div <div
className="flex items-center justify-between cursor-pointer" className="flex items-center justify-between cursor-pointer"
onClick={() => setIsAdditionalInfoOpen(!isAdditionalInfoOpen)} onClick={() => setIsAdditionalInfoOpen(!isAdditionalInfoOpen)}
> >
<h3 className="text-base font-medium text-foreground">Informações adicionais</h3> <Label className="text-sm font-medium cursor-pointer">Informações adicionais</Label>
<ChevronDown className={`h-5 w-5 text-muted-foreground transition-transform duration-200 ${isAdditionalInfoOpen ? 'rotate-180' : ''}`} /> <ChevronDown className={`h-4 w-4 text-muted-foreground transition-transform duration-200 ${isAdditionalInfoOpen ? 'rotate-180' : ''}`} />
</div> </div>
{isAdditionalInfoOpen && ( {isAdditionalInfoOpen && (
<div className="mt-4 space-y-2"> <div className="space-y-2">
<Label>Documentos e anexos</Label> <Label className="text-[13px]">Documentos e anexos</Label>
<Textarea name="documentos" rows={5} className="text-[13px] resize-none" value={formData.documentos || ''} onChange={handleChange} /> <Textarea name="documentos" rows={5} className="text-[13px] resize-none rounded-md transition-colors hover:bg-muted/30" value={formData.documentos || ''} onChange={handleChange} />
</div> </div>
)} )}
</div> </div>
@ -161,22 +148,20 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: Cale
</div> </div>
<div className="border border-border rounded-md p-6 space-y-4 bg-card"> <div className="border border-border rounded-md p-6 space-y-4 bg-card">
<div className="flex justify-between items-center"> <h2 className="font-medium text-foreground">Informações do atendimento</h2>
<h2 className="font-medium text-foreground">Informações do atendimento</h2>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="space-y-4"> <div className="space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<Label className="text-[13px]">Nome do profissional *</Label> <Label className="text-[13px]">Nome do profissional *</Label>
<div className="relative"> <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" /> <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input name="professionalName" className="h-10 w-full rounded-full border border-input pl-8 pr-12 text-[13px]" value={formData.professionalName || ''} onChange={handleChange} /> <Input name="professionalName" className="h-11 w-full rounded-md pl-8 pr-12 text-[13px] transition-colors hover:bg-muted/30" value={formData.professionalName || ''} onChange={handleChange} />
</div> </div>
</div> </div>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-2 gap-3">
<div className="space-y-2"> <div className="space-y-2">
<Label className="text-[13px]">Unidade *</Label> <Label className="text-[13px]">Unidade *</Label>
<select name="unit" className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none" value={formData.unit || 'nei'} onChange={handleChange}> <select name="unit" className="h-11 w-full rounded-md border border-gray-300 dark:border-input bg-background text-foreground pr-8 pl-3 text-[13px] appearance-none transition-colors hover:bg-muted/30 hover:border-gray-400" value={formData.unit || 'nei'} onChange={handleChange}>
<option value="nei">Núcleo de Especialidades Integradas</option> <option value="nei">Núcleo de Especialidades Integradas</option>
<option value="cc">Clínica Central</option> <option value="cc">Clínica Central</option>
</select> </select>
@ -185,24 +170,24 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: Cale
<Label className="text-[13px]">Data *</Label> <Label className="text-[13px]">Data *</Label>
<div className="relative"> <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" /> <Calendar className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<Input name="appointmentDate" type="date" className="h-10 w-full rounded-md border border-input pl-8 pr-3 text-[13px]" value={formData.appointmentDate || ''} onChange={handleChange} /> <Input name="appointmentDate" type="date" className="h-11 w-full rounded-md pl-8 pr-3 text-[13px] transition-colors hover:bg-muted/30" value={formData.appointmentDate || ''} onChange={handleChange} />
</div> </div>
</div> </div>
</div> </div>
<div className="grid grid-cols-3 gap-3"> <div className="grid grid-cols-3 gap-3">
<div className="space-y-2"> <div className="space-y-2">
<Label className="text-[13px]">Início *</Label> <Label className="text-[13px]">Início *</Label>
<Input name="startTime" type="time" className="h-10 w-full rounded-md border border-input px-3 text-[13px]" value={formData.startTime || ''} onChange={handleChange} /> <Input name="startTime" type="time" className="h-11 w-full rounded-md px-3 text-[13px] transition-colors hover:bg-muted/30" value={formData.startTime || ''} onChange={handleChange} />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label className="text-[13px]">Término *</Label> <Label className="text-[13px]">Término *</Label>
<Input name="endTime" type="time" className="h-10 w-full rounded-md border border-input px-3 text-[13px]" value={formData.endTime || ''} onChange={handleChange} /> <Input name="endTime" type="time" className="h-11 w-full rounded-md px-3 text-[13px] transition-colors hover:bg-muted/30" value={formData.endTime || ''} onChange={handleChange} />
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
<Label className="text-[13px]">Profissional solicitante</Label> <Label className="text-[13px]">Profissional solicitante</Label>
<div className="relative"> <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" /> <Search className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
<select name="requestingProfessional" className="h-10 w-full rounded-md border border-input bg-background text-foreground pr-8 pl-8 text-[13px] appearance-none" value={formData.requestingProfessional || ''} onChange={handleChange}> <select name="requestingProfessional" className="h-11 w-full rounded-md border border-gray-300 dark:border-input bg-background text-foreground pr-8 pl-8 text-[13px] appearance-none transition-colors hover:bg-muted/30 hover:border-gray-400" value={formData.requestingProfessional || ''} onChange={handleChange}>
<option value="" disabled>Selecione solicitante</option> <option value="" disabled>Selecione solicitante</option>
<option value="dr-a">Dr. A</option> <option value="dr-a">Dr. A</option>
<option value="dr-b">Dr. B</option> <option value="dr-b">Dr. B</option>
@ -223,7 +208,7 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: Cale
</div> </div>
<div className="relative mt-1"> <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" /> <Search className="pointer-events-none absolute left-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<Input name="appointmentType" placeholder="Pesquisar" className="h-10 w-full rounded-md border border-input pl-8 pr-8 text-[13px]" value={formData.appointmentType || ''} onChange={handleChange} /> <Input name="appointmentType" placeholder="Pesquisar" className="h-11 w-full rounded-md pl-8 pr-8 text-[13px] transition-colors hover:bg-muted/30" value={formData.appointmentType || ''} onChange={handleChange} />
</div> </div>
</div> </div>
<div className="space-y-2"> <div className="space-y-2">
@ -234,15 +219,12 @@ export function CalendarRegistrationForm({ initialData, onSave, onCancel }: Cale
<Label htmlFor="imprimir" className="text-[13px] font-medium">Imprimir na Etiqueta / Pulseira</Label> <Label htmlFor="imprimir" className="text-[13px] font-medium">Imprimir na Etiqueta / Pulseira</Label>
</div> </div>
</div> </div>
<Textarea name="notes" rows={6} className="text-[13px] min-h-[120px] resize-none" value={formData.notes || ''} onChange={handleChange} /> <Textarea name="notes" rows={6} className="text-[13px] min-h-[120px] resize-none rounded-md transition-colors hover:bg-muted/30" value={formData.notes || ''} onChange={handleChange} />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="flex justify-end gap-2">
<Button type="submit">Salvar</Button>
</div>
</form> </form>
); );
} }

4
susconecta/components/ui/input.tsx
View File

@ -9,10 +9,10 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
data-slot="input" data-slot="input"
className={cn( className={cn(
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 flex h-9 w-full min-w-0 rounded-md bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 flex h-9 w-full min-w-0 rounded-md bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"border-2 border-gray-300 dark:border-gray-600", "border border-gray-300 dark:border-input",
"focus-visible:border-primary focus-visible:ring-primary/20 focus-visible:ring-2", "focus-visible:border-primary focus-visible:ring-primary/20 focus-visible:ring-2",
"hover:border-gray-400 dark:hover:border-gray-500", "hover:border-gray-400 dark:hover:border-gray-500",
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aria-invalid:border-2", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
className className
)} )}
{...props} {...props}

4
susconecta/components/ui/textarea.tsx
View File

@ -8,10 +8,10 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
data-slot="textarea" data-slot="textarea"
className={cn( className={cn(
"placeholder:text-muted-foreground dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "placeholder:text-muted-foreground dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
"border-2 border-gray-300 dark:border-gray-600", "border border-gray-300 dark:border-input",
"focus-visible:border-primary focus-visible:ring-primary/20 focus-visible:ring-2", "focus-visible:border-primary focus-visible:ring-primary/20 focus-visible:ring-2",
"hover:border-gray-400 dark:hover:border-gray-500", "hover:border-gray-400 dark:hover:border-gray-500",
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive aria-invalid:border-2", "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
className className
)} )}
{...props} {...props}