develop #83
@ -1,147 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useRouter } from "next/navigation";
|
|
||||||
import { useState } from "react";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { Label } from "@/components/ui/label";
|
|
||||||
import { Calculator, DollarSign } from "lucide-react";
|
|
||||||
import HeaderAgenda from "@/components/features/agenda/HeaderAgenda";
|
|
||||||
import FooterAgenda from "@/components/features/agenda/FooterAgenda";
|
|
||||||
|
|
||||||
export default function FinanceiroPage() {
|
|
||||||
const router = useRouter();
|
|
||||||
const [formaTipo, setFormaTipo] = useState("");
|
|
||||||
|
|
||||||
const handleSave = () => {
|
|
||||||
// Lógica de salvar será implementada
|
|
||||||
console.log("Salvando informações financeiras...");
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCancel = () => {
|
|
||||||
router.push("/calendar");
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col h-full bg-background">
|
|
||||||
<HeaderAgenda />
|
|
||||||
|
|
||||||
{/* CORPO */}
|
|
||||||
<main className="mx-auto w-full max-w-7xl px-8 py-6 space-y-6 flex-1 overflow-auto">
|
|
||||||
{/* INFORMAÇÕES FINANCEIRAS */}
|
|
||||||
<section className="space-y-6">
|
|
||||||
{/* Selo Financeiro */}
|
|
||||||
<div className="inline-flex items-center gap-2 border border-border px-3 py-1.5 bg-card text-[12px] rounded-md cursor-pointer hover:bg-muted">
|
|
||||||
<span className="flex h-5 w-5 items-center justify-center rounded-full border border-border bg-muted text-muted-foreground">
|
|
||||||
<DollarSign className="h-3 w-3" strokeWidth={2} />
|
|
||||||
</span>
|
|
||||||
<span className="text-foreground">Informações Financeiras</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Traço separador */}
|
|
||||||
<div className="border-b border-border" />
|
|
||||||
|
|
||||||
{/* VALOR DO ATENDIMENTO */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
<Label className="text-[13px] text-foreground/80">
|
|
||||||
Valor do Atendimento
|
|
||||||
</Label>
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Label className="text-xs text-muted-foreground">Valor Particular</Label>
|
|
||||||
<div className="relative">
|
|
||||||
<DollarSign className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
||||||
<Input
|
|
||||||
placeholder="R$ 0,00"
|
|
||||||
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 className="space-y-1">
|
|
||||||
<Label className="text-xs text-muted-foreground">Valor Convênio</Label>
|
|
||||||
<div className="relative">
|
|
||||||
<DollarSign className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
||||||
<Input
|
|
||||||
placeholder="R$ 0,00"
|
|
||||||
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>
|
|
||||||
|
|
||||||
{/* Traço separador */}
|
|
||||||
<div className="border-b border-border" />
|
|
||||||
|
|
||||||
{/* FORMA DE PAGAMENTO */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
<Label className="text-[13px] text-foreground/80">
|
|
||||||
Forma de Pagamento
|
|
||||||
</Label>
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Label className="text-xs text-muted-foreground">Tipo</Label>
|
|
||||||
<select value={formaTipo} onChange={(e) => setFormaTipo(e.target.value)} 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="dinheiro">Dinheiro</option>
|
|
||||||
<option value="cartao">Cartão</option>
|
|
||||||
<option value="pix">PIX</option>
|
|
||||||
<option value="convenio">Convênio</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Label className="text-xs text-muted-foreground">Parcelas</Label>
|
|
||||||
<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="2">2x</option>
|
|
||||||
<option value="3">3x</option>
|
|
||||||
<option value="4">4x</option>
|
|
||||||
<option value="5">5x</option>
|
|
||||||
<option value="6">6x</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Label className="text-xs text-muted-foreground">Desconto</Label>
|
|
||||||
<div className="relative">
|
|
||||||
<Calculator className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
|
||||||
<Input
|
|
||||||
placeholder="0%"
|
|
||||||
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>
|
|
||||||
|
|
||||||
{/* Traço separador */}
|
|
||||||
<div className="border-b border-border" />
|
|
||||||
|
|
||||||
{/* RESUMO FINANCEIRO */}
|
|
||||||
<div className="space-y-4">
|
|
||||||
<Label className="text-[13px] text-foreground/80">
|
|
||||||
Resumo Financeiro
|
|
||||||
</Label>
|
|
||||||
<div className="bg-muted/30 rounded-lg p-4 space-y-3">
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<span className="text-sm text-muted-foreground">Subtotal:</span>
|
|
||||||
<span className="text-sm font-medium text-foreground">R$ 0,00</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<span className="text-sm text-muted-foreground">Desconto:</span>
|
|
||||||
<span className="text-sm font-medium text-foreground">- R$ 0,00</span>
|
|
||||||
</div>
|
|
||||||
<div className="border-t border-border pt-2">
|
|
||||||
<div className="flex justify-between items-center">
|
|
||||||
<span className="text-base font-medium text-foreground">Total:</span>
|
|
||||||
<span className="text-lg font-bold text-primary">R$ 0,00</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
{/* RODAPÉ FIXO */}
|
|
||||||
<FooterAgenda onSave={handleSave} onCancel={handleCancel} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,83 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import { useRouter } from "next/navigation";
|
|
||||||
import { useState } from "react";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { Input } from "@/components/ui/input";
|
|
||||||
import { Label } from "@/components/ui/label";
|
|
||||||
import { Search, ChevronDown } from "lucide-react";
|
|
||||||
import { Plus } from "lucide-react";
|
|
||||||
import HeaderAgenda from "@/components/features/agenda/HeaderAgenda";
|
|
||||||
import FooterAgenda from "@/components/features/agenda/FooterAgenda";
|
|
||||||
|
|
||||||
export default function ProcedimentoPage() {
|
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const handleSave = () => {
|
|
||||||
// Lógica de salvar será implementada
|
|
||||||
console.log("Salvando procedimentos...");
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleCancel = () => {
|
|
||||||
router.push("/calendar");
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="flex flex-col h-full bg-background">
|
|
||||||
<HeaderAgenda />
|
|
||||||
|
|
||||||
{/* CORPO */}
|
|
||||||
<main className="mx-auto w-full max-w-7xl px-8 py-6 space-y-6 flex-1 overflow-auto">
|
|
||||||
{/* ATENDIMENTOS */}
|
|
||||||
<section className="space-y-6">
|
|
||||||
{/* Selo Atendimento com + dentro da bolinha */}
|
|
||||||
<div className="inline-flex items-center gap-2 border border-border px-3 py-1.5 bg-card text-[12px] rounded-md cursor-pointer hover:bg-muted">
|
|
||||||
<span className="flex h-5 w-5 items-center justify-center rounded-full border border-border bg-muted text-muted-foreground">
|
|
||||||
<Plus className="h-3 w-3" strokeWidth={2} />
|
|
||||||
</span>
|
|
||||||
<span className="text-foreground">Atendimento</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Traço separador */}
|
|
||||||
<div className="border-b border-border" />
|
|
||||||
|
|
||||||
{/* PROCEDIMENTOS */}
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Label className="text-[13px] text-foreground/80">
|
|
||||||
Procedimentos
|
|
||||||
</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
|
|
||||||
placeholder="Buscar"
|
|
||||||
className="h-10 w-full rounded-md pl-8 pr-8 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
|
|
||||||
/>
|
|
||||||
<ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Traço separador */}
|
|
||||||
<div className="border-b border-border" />
|
|
||||||
|
|
||||||
{/* OUTRAS DESPESAS */}
|
|
||||||
<div className="space-y-1">
|
|
||||||
<Label className="text-[13px] text-foreground/80">
|
|
||||||
Outras despesas
|
|
||||||
</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
|
|
||||||
placeholder="Buscar"
|
|
||||||
className="h-10 w-full rounded-md pl-8 pr-8 border-input focus-visible:ring-1 focus-visible:ring-sky-500 focus-visible:border-sky-500"
|
|
||||||
/>
|
|
||||||
<ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
</main>
|
|
||||||
|
|
||||||
{/* RODAPÉ FIXO */}
|
|
||||||
<FooterAgenda onSave={handleSave} onCancel={handleCancel} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -1,28 +1,17 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { RotateCcw } from "lucide-react";
|
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
import { usePathname, useRouter } from "next/navigation";
|
import { usePathname } from "next/navigation";
|
||||||
|
|
||||||
export default function HeaderAgenda() {
|
export default function HeaderAgenda() {
|
||||||
const pathname = usePathname();
|
const pathname = usePathname();
|
||||||
const router = useRouter();
|
|
||||||
|
|
||||||
const isAg = pathname?.startsWith("/agenda");
|
const isAg = pathname?.startsWith("/agenda");
|
||||||
const isPr = pathname?.startsWith("/procedimento");
|
|
||||||
const isFi = pathname?.startsWith("/financeiro");
|
|
||||||
|
|
||||||
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">
|
||||||
<h1 className="text-[18px] font-semibold text-foreground">Novo Agendamento</h1>
|
<h1 className="text-[18px] font-semibold text-foreground">Novo Agendamento</h1>
|
||||||
|
<nav role="tablist" aria-label="Navegação de Agendamento" className="flex items-center gap-2">
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<nav
|
|
||||||
role="tablist"
|
|
||||||
aria-label="Navegação de Agendamento"
|
|
||||||
className="flex items-center gap-2"
|
|
||||||
>
|
|
||||||
<Link
|
<Link
|
||||||
href="/agenda"
|
href="/agenda"
|
||||||
role="tab"
|
role="tab"
|
||||||
@ -34,39 +23,7 @@ export default function HeaderAgenda() {
|
|||||||
>
|
>
|
||||||
Agendamento
|
Agendamento
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
|
||||||
href="/procedimento"
|
|
||||||
role="tab"
|
|
||||||
className={`px-4 py-1.5 text-[13px] font-medium border rounded-md ${
|
|
||||||
isPr
|
|
||||||
? "bg-primary text-white border-primary dark:bg-primary dark:text-white"
|
|
||||||
: "text-foreground hover:bg-muted border-input"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
Procedimento
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
href="/financeiro"
|
|
||||||
role="tab"
|
|
||||||
className={`px-4 py-1.5 text-[13px] font-medium border rounded-md ${
|
|
||||||
isFi
|
|
||||||
? "bg-primary text-white border-primary dark:bg-primary dark:text-white"
|
|
||||||
: "text-foreground hover:bg-muted border-input"
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
Financeiro
|
|
||||||
</Link>
|
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
aria-label="Voltar para Calendário"
|
|
||||||
onClick={() => router.push("/calendar")}
|
|
||||||
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" />
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -517,9 +517,9 @@ export function EventManager({
|
|||||||
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||||||
<DialogContent className="max-w-md max-h-[90vh] overflow-y-auto">
|
<DialogContent className="max-w-md max-h-[90vh] overflow-y-auto">
|
||||||
<DialogHeader>
|
<DialogHeader>
|
||||||
<DialogTitle>{isCreating ? "Criar Evento" : "Detalhes do Evento"}</DialogTitle>
|
<DialogTitle>{isCreating ? "Criar Evento" : "Detalhes do Agendamento"}</DialogTitle>
|
||||||
<DialogDescription>
|
<DialogDescription>
|
||||||
{isCreating ? "Adicione um novo evento ao seu calendário" : "Visualizar e editar detalhes do evento"}
|
{isCreating ? "Adicione um novo evento ao seu calendário" : "Visualizar e editar detalhes do agendamento"}
|
||||||
</DialogDescription>
|
</DialogDescription>
|
||||||
</DialogHeader>
|
</DialogHeader>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user