forked from RiseUP/riseup-squad21
Merge branch 'main' of https://git.popcode.com.br/RiseUP/riseup-squad21
This commit is contained in:
Lucas Rodrigues
commit
a82193af27
@ -5,15 +5,15 @@ import { Calendar, Clock, User, Shield, Stethoscope, Receipt, IdCard } from "lu
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#F2F2F2]">
|
||||
<div className="min-h-screen bg-background">
|
||||
<div className="container mx-auto px-4 py-16">
|
||||
<div className="text-center mb-12">
|
||||
<h1 className="text-4xl font-bold text-gray-900 mb-4">Central de Operações <br>
|
||||
<h1 className="text-4xl font-bold text-foreground mb-4">Central de Operações <br>
|
||||
</br>
|
||||
MedConnect
|
||||
|
||||
</h1>
|
||||
<p className="text-xl text-gray-600 max-w-2xl mx-auto">
|
||||
<p className="text-xl text-muted-foreground max-w-2xl mx-auto">
|
||||
Gerencie suas consultas médicas de forma simples e eficiente
|
||||
</p>
|
||||
</div>
|
||||
@ -21,21 +21,21 @@ export default function HomePage() {
|
||||
<div className="grid md:grid-cols-3 gap-8 max-w-6xl mx-auto">
|
||||
<Card className="hover:shadow-lg transition-shadow flex flex-col h-full">
|
||||
<CardHeader className="text-center flex-shrink-0">
|
||||
<User className="w-12 h-12 text-black-600 mx-auto mb-4" />
|
||||
<User className="w-12 h-12 text-blue-600 mx-auto mb-4" />
|
||||
<CardTitle>Área do Paciente</CardTitle>
|
||||
<CardDescription>Tenha o controle total da sua saúde: agende, consulte o histórico e informações pessoais</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4 flex-grow flex flex-col">
|
||||
<div className="space-y-3 flex-grow">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Calendar className="w-4 h-4" />
|
||||
<span>Agendar consultas</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Clock className="w-4 h-4" />
|
||||
<span>Ver histórico de consultas</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<User className="w-4 h-4" />
|
||||
<span>Gerenciar dados pessoais</span>
|
||||
</div>
|
||||
@ -54,21 +54,21 @@ export default function HomePage() {
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4 flex-grow flex flex-col">
|
||||
<div className="space-y-3 flex-grow">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Calendar className="w-4 h-4" />
|
||||
<span>Gerenciar consultas</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<User className="w-4 h-4" />
|
||||
<span>Cadastrar pacientes</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Clock className="w-4 h-4" />
|
||||
<span>Controlar agenda</span>
|
||||
</div>
|
||||
</div>
|
||||
<Link href="/secretary/login" className="block mt-auto">
|
||||
<Button className="w-full bg-purple-600 hover:bg-purple-700">Entrar como Secretária</Button>
|
||||
<Button className="w-full bg-purple-600 text-white hover:bg-purple-700 dark:bg-purple-500 dark:hover:bg-purple-600 dark:text-white">Entrar como Secretária</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@ -81,21 +81,21 @@ export default function HomePage() {
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4 flex-grow flex flex-col">
|
||||
<div className="space-y-3 flex-grow">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Calendar className="w-4 h-4" />
|
||||
<span>Gerenciar agenda</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<User className="w-4 h-4" />
|
||||
<span>Ver pacientes</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Clock className="w-4 h-4" />
|
||||
<span>Histórico de atendimentos</span>
|
||||
</div>
|
||||
</div>
|
||||
<Link href="/doctor/login" className="block mt-auto">
|
||||
<Button className="w-full bg-green-600 hover:bg-green-700">Entrar como Médico</Button>
|
||||
<Button className="w-full bg-green-600 text-white hover:bg-green-700 dark:bg-green-500 dark:hover:bg-green-600 dark:text-white">Entrar como Médico</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@ -108,21 +108,21 @@ export default function HomePage() {
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4 flex-grow flex flex-col">
|
||||
<div className="space-y-3 flex-grow">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Calendar className="w-4 h-4" />
|
||||
<span>Relatórios gerenciais</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<User className="w-4 h-4" />
|
||||
<span>Configurações do sistema</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Clock className="w-4 h-4" />
|
||||
<span>Gestão de usuários</span>
|
||||
</div>
|
||||
</div>
|
||||
<Link href="/manager/login" className="block mt-auto">
|
||||
<Button className="w-full bg-blue-600 hover:bg-blue-700">Entrar como Gestor</Button>
|
||||
<Button className="w-full bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 dark:text-white">Entrar como Gestor</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
@ -135,21 +135,21 @@ export default function HomePage() {
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4 flex-grow flex flex-col">
|
||||
<div className="space-y-3 flex-grow">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Calendar className="w-4 h-4" />
|
||||
<span>Relatórios financeiros</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<User className="w-4 h-4" />
|
||||
<span>Faturamento</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Clock className="w-4 h-4" />
|
||||
<span>Controle de pagamentos</span>
|
||||
</div>
|
||||
</div>
|
||||
<Link href="finance/login" className="block mt-auto">
|
||||
<Button className="w-full bg-orange-600 hover:bg-orange-700">Entrar como Financeiro</Button>
|
||||
<Button className="w-full bg-orange-600 text-white hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-600 dark:text-white">Entrar como Financeiro</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
99
app/context/AccessibilityContext.tsx
Normal file
99
app/context/AccessibilityContext.tsx
Normal file
@ -0,0 +1,99 @@
|
||||
"use client";
|
||||
|
||||
import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react';
|
||||
|
||||
type Theme = 'light' | 'dark';
|
||||
type Contrast = 'normal' | 'high';
|
||||
|
||||
interface AccessibilityContextProps {
|
||||
theme: Theme;
|
||||
setTheme: (theme: Theme) => void;
|
||||
contrast: Contrast;
|
||||
setContrast: (contrast: Contrast) => void;
|
||||
fontSize: number;
|
||||
increaseFontSize: () => void;
|
||||
decreaseFontSize: () => void;
|
||||
resetFontSize: () => void;
|
||||
}
|
||||
|
||||
const AccessibilityContext = createContext<AccessibilityContextProps | undefined>(undefined);
|
||||
|
||||
export const AccessibilityProvider = ({ children }: { children: ReactNode }) => {
|
||||
const [theme, setThemeState] = useState<Theme>(() => {
|
||||
if (typeof window === 'undefined') return 'light';
|
||||
return (localStorage.getItem('accessibility-theme') as Theme) || 'light';
|
||||
});
|
||||
const [contrast, setContrastState] = useState<Contrast>(() => {
|
||||
if (typeof window === 'undefined') return 'normal';
|
||||
return (localStorage.getItem('accessibility-contrast') as Contrast) || 'normal';
|
||||
});
|
||||
const [fontSize, setFontSize] = useState<number>(() => {
|
||||
if (typeof window === 'undefined') return 16;
|
||||
const storedSize = localStorage.getItem('accessibility-font-size');
|
||||
return storedSize ? parseFloat(storedSize) : 16;
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const root = document.documentElement;
|
||||
|
||||
// Theme
|
||||
root.classList.remove('light', 'dark');
|
||||
root.classList.add(theme);
|
||||
localStorage.setItem('accessibility-theme', theme);
|
||||
|
||||
// Contrast
|
||||
root.classList.remove('normal-contrast', 'high-contrast');
|
||||
root.classList.add(contrast === 'high' ? 'high-contrast' : 'normal-contrast');
|
||||
localStorage.setItem('accessibility-contrast', contrast);
|
||||
|
||||
// Font Size
|
||||
root.style.fontSize = `${fontSize}px`;
|
||||
localStorage.setItem('accessibility-font-size', fontSize.toString());
|
||||
|
||||
}, [theme, contrast, fontSize]);
|
||||
|
||||
const setTheme = (newTheme: Theme) => {
|
||||
setThemeState(newTheme);
|
||||
};
|
||||
|
||||
const setContrast = (newContrast: Contrast) => {
|
||||
setContrastState(newContrast);
|
||||
};
|
||||
|
||||
const increaseFontSize = () => {
|
||||
setFontSize(prev => Math.min(prev + 2, 24)); // Cap at 24px
|
||||
};
|
||||
|
||||
const decreaseFontSize = () => {
|
||||
setFontSize(prev => Math.max(prev - 2, 12)); // Cap at 12px
|
||||
};
|
||||
|
||||
const resetFontSize = () => {
|
||||
setFontSize(16);
|
||||
};
|
||||
|
||||
return (
|
||||
<AccessibilityContext.Provider
|
||||
value={{
|
||||
theme,
|
||||
setTheme,
|
||||
contrast,
|
||||
setContrast,
|
||||
fontSize,
|
||||
increaseFontSize,
|
||||
decreaseFontSize,
|
||||
resetFontSize,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</AccessibilityContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export const useAccessibility = () => {
|
||||
const context = useContext(AccessibilityContext);
|
||||
if (context === undefined) {
|
||||
throw new Error('useAccessibility must be used within an AccessibilityProvider');
|
||||
}
|
||||
return context;
|
||||
};
|
||||
91
app/doctor/dashboard/page.tsx
Normal file
91
app/doctor/dashboard/page.tsx
Normal file
@ -0,0 +1,91 @@
|
||||
import DoctorLayout from "@/components/doctor-layout"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Calendar, Clock, User, Plus } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
|
||||
export default function PatientDashboard() {
|
||||
return (
|
||||
<DoctorLayout>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
|
||||
<p className="text-gray-600">Bem-vindo ao seu portal de consultas médicas</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Próxima Consulta</CardTitle>
|
||||
<Calendar className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">02 out</div>
|
||||
<p className="text-xs text-muted-foreground">Dr. Silva - 14:30</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Consultas Este Mês</CardTitle>
|
||||
<Clock className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">4</div>
|
||||
<p className="text-xs text-muted-foreground">4 agendadas</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Perfil</CardTitle>
|
||||
<User className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">100%</div>
|
||||
<p className="text-xs text-muted-foreground">Dados completos</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Ações Rápidas</CardTitle>
|
||||
<CardDescription>Acesse rapidamente as principais funcionalidades</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Link href="/doctor/medicos/consultas">
|
||||
<Button className="w-full justify-start">
|
||||
<Calendar className="mr-2 h-4 w-4" />
|
||||
Ver Minhas Consultas
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Próximas Consultas</CardTitle>
|
||||
<CardDescription>Suas consultas agendadas</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
|
||||
<div>
|
||||
<p className="font-medium">Dr. João Santos</p>
|
||||
<p className="text-sm text-gray-600">Cardiologia</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="font-medium">02 out</p>
|
||||
<p className="text-sm text-gray-600">14:30</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</DoctorLayout>
|
||||
)
|
||||
}
|
||||
@ -1,157 +1,11 @@
|
||||
"use client"
|
||||
// Caminho: app/(doctor)/login/page.tsx
|
||||
|
||||
import type React from "react"
|
||||
import { LoginForm } from "@/components/LoginForm";
|
||||
|
||||
import { useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { useToast } from "@/hooks/use-toast"
|
||||
import { Eye, EyeOff, Mail, Lock, Stethoscope, Loader2 } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
|
||||
interface LoginForm {
|
||||
email: string
|
||||
password: string
|
||||
}
|
||||
|
||||
export default function DoctorLogin() {
|
||||
const [form, setForm] = useState<LoginForm>({ email: "", password: "" })
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const router = useRouter()
|
||||
const { toast } = useToast()
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setIsLoading(true)
|
||||
|
||||
// Simular autenticação
|
||||
setTimeout(() => {
|
||||
if (form.email && form.password) {
|
||||
const doctorData = {
|
||||
id: "1",
|
||||
name: "Dr. João Santos",
|
||||
email: form.email,
|
||||
phone: "(11) 98888-8888",
|
||||
cpf: "987.654.321-00",
|
||||
crm: "CRM/SP 123456",
|
||||
specialty: "Cardiologia",
|
||||
department: "Cardiologia",
|
||||
permissions: ["view_patients", "manage_appointments", "create_reports"],
|
||||
}
|
||||
|
||||
localStorage.setItem("doctorData", JSON.stringify(doctorData))
|
||||
localStorage.setItem("userType", "doctor")
|
||||
|
||||
toast({
|
||||
title: "Login realizado com sucesso!",
|
||||
description: "Bem-vindo ao sistema, " + doctorData.name,
|
||||
})
|
||||
|
||||
router.push("/doctor/medicos")
|
||||
} else {
|
||||
toast({
|
||||
title: "Erro no login",
|
||||
description: "Por favor, preencha todos os campos.",
|
||||
variant: "destructive",
|
||||
})
|
||||
}
|
||||
setIsLoading(false)
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-green-50 via-white to-green-50 flex items-center justify-center p-4">
|
||||
<Card className="w-full max-w-md shadow-xl border-0 bg-white/80 backdrop-blur-sm">
|
||||
<CardHeader className="text-center space-y-4 pb-8">
|
||||
<div className="mx-auto w-16 h-16 bg-green-100 rounded-full flex items-center justify-center">
|
||||
<Stethoscope className="w-8 h-8 text-green-600" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-2xl font-bold text-gray-900">Área do Médico</CardTitle>
|
||||
<CardDescription className="text-gray-600 mt-2">Acesse o sistema médico</CardDescription>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-6">
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email" className="text-sm font-medium text-gray-700">
|
||||
E-mail
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="dr.medico@clinica.com"
|
||||
value={form.email}
|
||||
onChange={(e) => setForm({ ...form, email: e.target.value })}
|
||||
className="pl-10 h-11 border-gray-200 focus:border-green-500 focus:ring-green-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password" className="text-sm font-medium text-gray-700">
|
||||
Senha
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input
|
||||
id="password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder="Digite sua senha"
|
||||
value={form.password}
|
||||
onChange={(e) => setForm({ ...form, password: e.target.value })}
|
||||
className="pl-10 pr-10 h-11 border-gray-200 focus:border-green-500 focus:ring-green-500"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
{showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-11 bg-green-600 hover:bg-green-700 text-white font-medium"
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
Entrando...
|
||||
</>
|
||||
) : (
|
||||
"Entrar"
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<div className="relative">
|
||||
<Separator className="my-6" />
|
||||
<span className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white px-3 text-sm text-gray-500">
|
||||
ou
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<Link href="/" className="text-sm text-green-600 hover:text-green-700 font-medium hover:underline">
|
||||
Voltar à página inicial
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
export default function DoctorLoginPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-green-50 via-white to-green-50 flex items-center justify-center p-4">
|
||||
<LoginForm title="Área do Médico" description="Acesse o sistema médico" role="doctor" themeColor="green" redirectPath="/doctor/medicos" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
import type React from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import DoctorLayout from "@/components/doctor-layout";
|
||||
import DoctorLayout from "@/components/doctor-layout";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Clock, Calendar as CalendarIcon, MapPin, Phone, User, X, RefreshCw } from "lucide-react";
|
||||
@ -19,7 +19,7 @@ const APPOINTMENTS_STORAGE_KEY = "clinic-appointments";
|
||||
interface LocalStorageAppointment {
|
||||
id: number;
|
||||
patientName: string;
|
||||
doctor: string;
|
||||
doctor: string;
|
||||
specialty: string;
|
||||
date: string; // Data no formato YYYY-MM-DD
|
||||
time: string; // Hora no formato HH:MM
|
||||
@ -28,13 +28,13 @@ interface LocalStorageAppointment {
|
||||
phone: string;
|
||||
}
|
||||
|
||||
const LOGGED_IN_DOCTOR_NAME = "Dr. João Santos";
|
||||
const LOGGED_IN_DOCTOR_NAME = "Dr. João Santos";
|
||||
|
||||
// Função auxiliar para comparar se duas datas (Date objects) são o mesmo dia
|
||||
const isSameDay = (date1: Date, date2: Date) => {
|
||||
return date1.getFullYear() === date2.getFullYear() &&
|
||||
date1.getMonth() === date2.getMonth() &&
|
||||
date1.getDate() === date2.getDate();
|
||||
date1.getMonth() === date2.getMonth() &&
|
||||
date1.getDate() === date2.getDate();
|
||||
};
|
||||
|
||||
// --- COMPONENTE PRINCIPAL ---
|
||||
@ -43,10 +43,10 @@ export default function DoctorAppointmentsPage() {
|
||||
const [allAppointments, setAllAppointments] = useState<LocalStorageAppointment[]>([]);
|
||||
const [filteredAppointments, setFilteredAppointments] = useState<LocalStorageAppointment[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
|
||||
|
||||
// NOVO ESTADO 1: Armazena os dias com consultas (para o calendário)
|
||||
const [bookedDays, setBookedDays] = useState<Date[]>([]);
|
||||
|
||||
|
||||
// NOVO ESTADO 2: Armazena a data selecionada no calendário
|
||||
const [selectedCalendarDate, setSelectedCalendarDate] = useState<Date | undefined>(new Date());
|
||||
|
||||
@ -58,20 +58,20 @@ export default function DoctorAppointmentsPage() {
|
||||
useEffect(() => {
|
||||
if (selectedCalendarDate) {
|
||||
const dateString = format(selectedCalendarDate, 'yyyy-MM-dd');
|
||||
|
||||
|
||||
// Filtra a lista completa de agendamentos pela data selecionada
|
||||
const todayAppointments = allAppointments
|
||||
.filter(app => app.date === dateString)
|
||||
.sort((a, b) => a.time.localeCompare(b.time)); // Ordena por hora
|
||||
|
||||
|
||||
setFilteredAppointments(todayAppointments);
|
||||
} else {
|
||||
// Se nenhuma data estiver selecionada (ou se for limpa), mostra todos (ou os de hoje)
|
||||
const todayDateString = format(new Date(), 'yyyy-MM-dd');
|
||||
const todayAppointments = allAppointments
|
||||
.filter(app => app.date === todayDateString)
|
||||
.sort((a, b) => a.time.localeCompare(b.time));
|
||||
|
||||
.sort((a, b) => a.time.localeCompare(b.time));
|
||||
|
||||
setFilteredAppointments(todayAppointments);
|
||||
}
|
||||
}, [allAppointments, selectedCalendarDate]);
|
||||
@ -87,7 +87,7 @@ export default function DoctorAppointmentsPage() {
|
||||
|
||||
// 1. EXTRAI E PREPARA AS DATAS PARA O CALENDÁRIO
|
||||
const uniqueBookedDates = Array.from(new Set(appointmentsToShow.map(app => app.date)));
|
||||
|
||||
|
||||
// Converte YYYY-MM-DD para objetos Date, garantindo que o tempo seja meia-noite (00:00:00)
|
||||
const dateObjects = uniqueBookedDates.map(dateString => new Date(dateString + 'T00:00:00'));
|
||||
|
||||
@ -122,12 +122,12 @@ export default function DoctorAppointmentsPage() {
|
||||
const storedAppointmentsRaw = localStorage.getItem(APPOINTMENTS_STORAGE_KEY);
|
||||
const allAppts: LocalStorageAppointment[] = storedAppointmentsRaw ? JSON.parse(storedAppointmentsRaw) : [];
|
||||
|
||||
const updatedAppointments = allAppts.map(app =>
|
||||
const updatedAppointments = allAppts.map(app =>
|
||||
app.id === id ? { ...app, status: "cancelada" as const } : app
|
||||
);
|
||||
|
||||
localStorage.setItem(APPOINTMENTS_STORAGE_KEY, JSON.stringify(updatedAppointments));
|
||||
loadAppointments();
|
||||
loadAppointments();
|
||||
toast.info(`Consulta cancelada com sucesso.`);
|
||||
};
|
||||
|
||||
@ -135,8 +135,8 @@ export default function DoctorAppointmentsPage() {
|
||||
toast.info(`Reagendamento da Consulta ID: ${id}. Navegar para a página de agendamento.`);
|
||||
};
|
||||
|
||||
const displayDate = selectedCalendarDate ?
|
||||
new Date(selectedCalendarDate).toLocaleDateString("pt-BR", {weekday: 'long', day: '2-digit', month: 'long'}) :
|
||||
const displayDate = selectedCalendarDate ?
|
||||
new Date(selectedCalendarDate).toLocaleDateString("pt-BR", { weekday: 'long', day: '2-digit', month: 'long' }) :
|
||||
"Selecione uma data";
|
||||
|
||||
|
||||
@ -158,7 +158,7 @@ export default function DoctorAppointmentsPage() {
|
||||
|
||||
{/* NOVO LAYOUT DE DUAS COLUNAS */}
|
||||
<div className="grid lg:grid-cols-3 gap-6">
|
||||
|
||||
|
||||
{/* COLUNA 1: CALENDÁRIO */}
|
||||
<div className="lg:col-span-1">
|
||||
<Card>
|
||||
@ -176,10 +176,10 @@ export default function DoctorAppointmentsPage() {
|
||||
onSelect={setSelectedCalendarDate}
|
||||
initialFocus
|
||||
// A CHAVE DO HIGHLIGHT: Passa o array de datas agendadas
|
||||
modifiers={{ booked: bookedDays }}
|
||||
modifiers={{ booked: bookedDays }}
|
||||
// Define o estilo CSS para o modificador 'booked'
|
||||
modifiersClassNames={{
|
||||
booked: "bg-blue-600 text-white aria-selected:!bg-blue-700 hover:!bg-blue-700/90"
|
||||
modifiersClassNames={{
|
||||
booked: "bg-blue-600 text-white aria-selected:!bg-blue-700 hover:!bg-blue-700/90"
|
||||
}}
|
||||
className="rounded-md border p-2"
|
||||
/>
|
||||
@ -233,23 +233,23 @@ export default function DoctorAppointmentsPage() {
|
||||
</div>
|
||||
<div className="flex items-center text-sm text-gray-700">
|
||||
<Phone className="mr-2 h-4 w-4 text-gray-500" />
|
||||
{appointment.phone || "N/A"}
|
||||
{appointment.phone || "N/A"}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col justify-center items-end">
|
||||
{showActions && (
|
||||
<div className="flex space-x-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={() => handleReSchedule(appointment.id)}
|
||||
>
|
||||
<RefreshCw className="mr-2 h-4 w-4" />
|
||||
Reagendar
|
||||
</Button>
|
||||
<Button
|
||||
variant="destructive"
|
||||
<Button
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
onClick={() => handleCancel(appointment.id)}
|
||||
>
|
||||
|
||||
@ -57,8 +57,8 @@ export default function PacientesPage() {
|
||||
return new Intl.DateTimeFormat('pt-BR').format(date);
|
||||
};
|
||||
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [itemsPerPage, setItemsPerPage] = useState(5);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
|
||||
const indexOfLastItem = currentPage * itemsPerPage;
|
||||
const indexOfFirstItem = indexOfLastItem - itemsPerPage;
|
||||
@ -109,28 +109,28 @@ export default function PacientesPage() {
|
||||
<DoctorLayout>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Pacientes</h1>
|
||||
<p className="text-gray-600">Lista de pacientes vinculados</p>
|
||||
<h1 className="text-2xl font-bold text-foreground">Pacientes</h1>
|
||||
<p className="text-muted-foreground">Lista de pacientes vinculados</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg border border-gray-200">
|
||||
<div className="bg-card rounded-lg border border-border">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead className="bg-gray-50 border-b border-gray-200">
|
||||
<thead className="bg-muted border-b border-border">
|
||||
<tr>
|
||||
<th className="text-left p-4 font-medium text-gray-700">Nome</th>
|
||||
<th className="text-left p-4 font-medium text-gray-700">Telefone</th>
|
||||
<th className="text-left p-4 font-medium text-gray-700">Cidade</th>
|
||||
<th className="text-left p-4 font-medium text-gray-700">Estado</th>
|
||||
<th className="text-left p-4 font-medium text-gray-700">Último atendimento</th>
|
||||
<th className="text-left p-4 font-medium text-gray-700">Próximo atendimento</th>
|
||||
<th className="text-left p-4 font-medium text-gray-700">Ações</th>
|
||||
<th className="text-left p-4 font-medium text-foreground">Nome</th>
|
||||
<th className="text-left p-4 font-medium text-foreground">Telefone</th>
|
||||
<th className="text-left p-4 font-medium text-foreground">Cidade</th>
|
||||
<th className="text-left p-4 font-medium text-foreground">Estado</th>
|
||||
<th className="text-left p-4 font-medium text-foreground">Último atendimento</th>
|
||||
<th className="text-left p-4 font-medium text-foreground">Próximo atendimento</th>
|
||||
<th className="text-left p-4 font-medium text-foreground">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{loading ? (
|
||||
<tr>
|
||||
<td colSpan={7} className="p-6 text-gray-600">
|
||||
<td colSpan={7} className="p-6 text-muted-foreground">
|
||||
Carregando pacientes...
|
||||
</td>
|
||||
</tr>
|
||||
@ -140,23 +140,23 @@ export default function PacientesPage() {
|
||||
</tr>
|
||||
) : pacientes.length === 0 ? (
|
||||
<tr>
|
||||
<td colSpan={7} className="p-8 text-center text-gray-500">
|
||||
<td colSpan={7} className="p-8 text-center text-muted-foreground">
|
||||
Nenhum paciente encontrado
|
||||
</td>
|
||||
</tr>
|
||||
) : (
|
||||
currentItems.map((p) => (
|
||||
<tr key={p.id} className="border-b border-gray-100 hover:bg-gray-50">
|
||||
<tr key={p.id} className="border-b border-border hover:bg-accent">
|
||||
<td className="p-4">{p.nome}</td>
|
||||
<td className="p-4 text-gray-600">{p.telefone}</td>
|
||||
<td className="p-4 text-gray-600">{p.cidade}</td>
|
||||
<td className="p-4 text-gray-600">{p.estado}</td>
|
||||
<td className="p-4 text-gray-600">{p.ultimoAtendimento}</td>
|
||||
<td className="p-4 text-gray-600">{p.proximoAtendimento}</td>
|
||||
<td className="p-4 text-muted-foreground">{p.telefone}</td>
|
||||
<td className="p-4 text-muted-foreground">{p.cidade}</td>
|
||||
<td className="p-4 text-muted-foreground">{p.estado}</td>
|
||||
<td className="p-4 text-muted-foreground">{p.ultimoAtendimento}</td>
|
||||
<td className="p-4 text-muted-foreground">{p.proximoAtendimento}</td>
|
||||
<td className="p-4">
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<button className="text-blue-600 hover:underline">Ações</button>
|
||||
<button className="text-primary hover:underline">Ações</button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent align="end">
|
||||
<DropdownMenuItem onClick={() => handleOpenModal(p)}>
|
||||
@ -192,12 +192,12 @@ export default function PacientesPage() {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="flex justify-center space-x-2 mt-4">
|
||||
<div className="flex justify-center space-x-2 mt-4 p-4">
|
||||
{Array.from({ length: Math.ceil(pacientes.length / itemsPerPage) }, (_, i) => (
|
||||
<button
|
||||
key={i}
|
||||
onClick={() => paginate(i + 1)}
|
||||
className={`px-4 py-2 rounded-md ${currentPage === i + 1 ? 'bg-blue-500 text-white' : 'bg-gray-200'}`}
|
||||
className={`px-4 py-2 rounded-md ${currentPage === i + 1 ? 'bg-primary text-primary-foreground' : 'bg-secondary text-secondary-foreground'}`}
|
||||
>
|
||||
{i + 1}
|
||||
</button>
|
||||
|
||||
@ -1,155 +1,12 @@
|
||||
"use client"
|
||||
// Caminho: app/(finance)/login/page.tsx
|
||||
|
||||
import type React from "react"
|
||||
import { LoginForm } from "@/components/LoginForm";
|
||||
|
||||
import { useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { useToast } from "@/hooks/use-toast"
|
||||
import { Eye, EyeOff, Mail, Lock, Stethoscope, Loader2, Receipt } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
|
||||
interface LoginForm {
|
||||
email: string
|
||||
password: string
|
||||
}
|
||||
|
||||
export default function DoctorLogin() {
|
||||
const [form, setForm] = useState<LoginForm>({ email: "", password: "" })
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const router = useRouter()
|
||||
const { toast } = useToast()
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setIsLoading(true)
|
||||
|
||||
// Simular autenticação
|
||||
setTimeout(() => {
|
||||
if (form.email && form.password) {
|
||||
const financierData = {
|
||||
id: "1",
|
||||
name: "Thiago Nigro",
|
||||
email: form.email,
|
||||
phone: "(11) 98888-8888",
|
||||
cpf: "987.654.321-00",
|
||||
department: "Financeiro",
|
||||
permissions: ["view_reports", "manage_finances", "create_reports"],
|
||||
}
|
||||
|
||||
localStorage.setItem("financierData", JSON.stringify(financierData))
|
||||
localStorage.setItem("userType", "financier")
|
||||
|
||||
toast({
|
||||
title: "Login realizado com sucesso!",
|
||||
description: "Bem-vindo ao sistema, " + financierData.name,
|
||||
})
|
||||
|
||||
router.push("/finance/home")
|
||||
} else {
|
||||
toast({
|
||||
title: "Erro no login",
|
||||
description: "Por favor, preencha todos os campos.",
|
||||
variant: "destructive",
|
||||
})
|
||||
}
|
||||
setIsLoading(false)
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-orange-50 via-white to-orange-50 flex items-center justify-center p-4">
|
||||
<Card className="w-full max-w-md shadow-xl border-0 bg-white/80 backdrop-blur-sm">
|
||||
<CardHeader className="text-center space-y-4 pb-8">
|
||||
<div className="mx-auto w-16 h-16 bg-orange-200 rounded-full flex items-center justify-center">
|
||||
<Receipt className="w-8 h-8 text-orange-600" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-2xl font-bold text-gray-900">Área do Médico</CardTitle>
|
||||
<CardDescription className="text-gray-600 mt-2">Acesse o sistema médico</CardDescription>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-6">
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email" className="text-sm font-medium text-gray-700">
|
||||
E-mail
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="dr.medico@clinica.com"
|
||||
value={form.email}
|
||||
onChange={(e) => setForm({ ...form, email: e.target.value })}
|
||||
className="pl-10 h-11 border-gray-200 focus:border-green-500 focus:ring-green-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password" className="text-sm font-medium text-gray-700">
|
||||
Senha
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input
|
||||
id="password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder="Digite sua senha"
|
||||
value={form.password}
|
||||
onChange={(e) => setForm({ ...form, password: e.target.value })}
|
||||
className="pl-10 pr-10 h-11 border-gray-200 focus:border-green-500 focus:ring-green-500"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
{showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-11 bg-orange-600 hover:bg-orange-700 text-white font-medium"
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
Entrando...
|
||||
</>
|
||||
) : (
|
||||
"Entrar"
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<div className="relative">
|
||||
<Separator className="my-6" />
|
||||
<span className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white px-3 text-sm text-gray-500">
|
||||
ou
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<Link href="/" className="text-sm text-orange-600 hover:text-orange-700 font-medium hover:underline">
|
||||
Voltar à página inicial
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
export default function FinanceLoginPage() {
|
||||
return (
|
||||
// Fundo com gradiente laranja, como no seu código original
|
||||
<div className="min-h-screen bg-gradient-to-br from-orange-50 via-white to-orange-50 flex items-center justify-center p-4">
|
||||
<LoginForm title="Área Financeira" description="Acesse o sistema de faturamento" role="finance" themeColor="orange" redirectPath="/finance/home" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -74,6 +74,36 @@
|
||||
--sidebar-ring: oklch(0.439 0 0);
|
||||
}
|
||||
|
||||
.high-contrast {
|
||||
--background: oklch(0 0 0);
|
||||
--foreground: oklch(1 0.5 100);
|
||||
--card: oklch(0 0 0);
|
||||
--card-foreground: oklch(1 0.5 100);
|
||||
--popover: oklch(0 0 0);
|
||||
--popover-foreground: oklch(1 0.5 100);
|
||||
--primary: oklch(1 0.5 100);
|
||||
--primary-foreground: oklch(0 0 0);
|
||||
--secondary: oklch(0 0 0);
|
||||
--secondary-foreground: oklch(1 0.5 100);
|
||||
--muted: oklch(0 0 0);
|
||||
--muted-foreground: oklch(1 0.5 100);
|
||||
--accent: oklch(0 0 0);
|
||||
--accent-foreground: oklch(1 0.5 100);
|
||||
--destructive: oklch(0.5 0.3 30);
|
||||
--destructive-foreground: oklch(0 0 0);
|
||||
--border: oklch(1 0.5 100);
|
||||
--input: oklch(0 0 0);
|
||||
--ring: oklch(1 0.5 100);
|
||||
--sidebar: oklch(0 0 0);
|
||||
--sidebar-foreground: oklch(1 0.5 100);
|
||||
--sidebar-primary: oklch(1 0.5 100);
|
||||
--sidebar-primary-foreground: oklch(0 0 0);
|
||||
--sidebar-accent: oklch(0 0 0);
|
||||
--sidebar-accent-foreground: oklch(1 0.5 100);
|
||||
--sidebar-border: oklch(1 0.5 100);
|
||||
--sidebar-ring: oklch(1 0.5 100);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
@ -121,5 +151,6 @@
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
transition: background-color 0.3s, color 0.3s;
|
||||
}
|
||||
}
|
||||
@ -1,31 +1,32 @@
|
||||
import type { Metadata } from 'next'
|
||||
import { GeistSans } from 'geist/font/sans'
|
||||
import { GeistMono } from 'geist/font/mono'
|
||||
import { Analytics } from '@vercel/analytics/next'
|
||||
import './globals.css'
|
||||
import type { Metadata } from "next";
|
||||
import { GeistSans } from "geist/font/sans";
|
||||
import { GeistMono } from "geist/font/mono";
|
||||
import { Analytics } from "@vercel/analytics/next";
|
||||
import "./globals.css";
|
||||
import { Toaster } from "@/components/ui/toaster";
|
||||
// [PASSO 1.2] - Importando o nosso provider
|
||||
import { AppointmentsProvider } from './context/AppointmentsContext'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Clinic App',
|
||||
description: 'Created with v0',
|
||||
generator: 'v0.app',
|
||||
}
|
||||
import { AppointmentsProvider } from "./context/AppointmentsContext";
|
||||
import { AccessibilityProvider } from "./context/AccessibilityContext";
|
||||
import { AccessibilityModal } from "@/components/accessibility-modal";
|
||||
import { ThemeInitializer } from "@/components/theme-initializer";
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
|
||||
{/* [PASSO 1.2] - Envolvendo a aplicação com o provider */}
|
||||
<AppointmentsProvider>
|
||||
{children}
|
||||
</AppointmentsProvider>
|
||||
<Analytics />
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<body className={`font-sans ${GeistSans.variable} ${GeistMono.variable}`}>
|
||||
{/* [PASSO 1.2] - Envolvendo a aplicação com o provider */}
|
||||
<ThemeInitializer />
|
||||
<AccessibilityProvider>
|
||||
<AppointmentsProvider>{children}</AppointmentsProvider>
|
||||
<AccessibilityModal />
|
||||
</AccessibilityProvider>
|
||||
<Analytics />
|
||||
<Toaster />
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
113
app/manager/dashboard/page.tsx
Normal file
113
app/manager/dashboard/page.tsx
Normal file
@ -0,0 +1,113 @@
|
||||
import ManagerLayout from "@/components/manager-layout"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Calendar, Clock, User, Plus } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
|
||||
export default function ManagerDashboard() {
|
||||
return (
|
||||
<ManagerLayout>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
|
||||
<p className="text-gray-600">Bem-vindo ao seu portal de consultas médicas</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Relatórios gerenciais</CardTitle>
|
||||
<Calendar className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">3</div>
|
||||
<p className="text-xs text-muted-foreground">2 não lidos, 1 lido</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Gestão de usuários</CardTitle>
|
||||
<Clock className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">João Marques</div>
|
||||
<p className="text-xs text-muted-foreground">fez login a 13min</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Perfil</CardTitle>
|
||||
<User className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">100%</div>
|
||||
<p className="text-xs text-muted-foreground">Dados completos</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Ações Rápidas</CardTitle>
|
||||
<CardDescription>Acesse rapidamente as principais funcionalidades</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Link href="##">
|
||||
<Button className="w-full justify-start">
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
#
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="##">
|
||||
<Button variant="outline" className="w-full justify-start bg-transparent">
|
||||
<Calendar className="mr-2 h-4 w-4" />
|
||||
#
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="##">
|
||||
<Button variant="outline" className="w-full justify-start bg-transparent">
|
||||
<User className="mr-2 h-4 w-4" />
|
||||
#
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Gestão de Médicos</CardTitle>
|
||||
<CardDescription>Médicos online</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
|
||||
<div>
|
||||
<p className="font-medium">Dr. Silva</p>
|
||||
<p className="text-sm text-gray-600">Cardiologia</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="font-medium">On-line</p>
|
||||
<p className="text-sm text-gray-600"></p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
|
||||
<div>
|
||||
<p className="font-medium">Dra. Santos</p>
|
||||
<p className="text-sm text-gray-600">Dermatologia</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="font-medium">Off-line</p>
|
||||
<p className="text-sm text-gray-600">Visto as 8:33</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</ManagerLayout>
|
||||
)
|
||||
}
|
||||
@ -1,154 +1,12 @@
|
||||
"use client"
|
||||
// Caminho: app/(manager)/login/page.tsx
|
||||
|
||||
import type React from "react"
|
||||
import { LoginForm } from "@/components/LoginForm";
|
||||
|
||||
import { useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { useToast } from "@/hooks/use-toast"
|
||||
import { Eye, EyeOff, Mail, Lock, Stethoscope, Loader2, IdCard } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
|
||||
interface LoginForm {
|
||||
email: string
|
||||
password: string
|
||||
}
|
||||
|
||||
export default function ManagerLogin() {
|
||||
const [form, setForm] = useState<LoginForm>({ email: "", password: "" })
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const router = useRouter()
|
||||
const { toast } = useToast()
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setIsLoading(true)
|
||||
|
||||
setTimeout(() => {
|
||||
if (form.email && form.password) {
|
||||
const managerData = {
|
||||
id: "1",
|
||||
name: "Arthur Cavalcante",
|
||||
email: form.email,
|
||||
phone: "(11) 98888-8888",
|
||||
cpf: "987.654.321-00",
|
||||
department: "Gerente",
|
||||
permissions: ["manage_user", "manage_doctors", "create_reports"],
|
||||
}
|
||||
|
||||
localStorage.setItem("managerData", JSON.stringify(managerData))
|
||||
localStorage.setItem("userType", "manager")
|
||||
|
||||
toast({
|
||||
title: "Login realizado com sucesso!",
|
||||
description: "Bem-vindo ao sistema, " + managerData.name,
|
||||
})
|
||||
|
||||
router.push("/manager/home")
|
||||
} else {
|
||||
toast({
|
||||
title: "Erro no login",
|
||||
description: "Por favor, preencha todos os campos.",
|
||||
variant: "destructive",
|
||||
})
|
||||
}
|
||||
setIsLoading(false)
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50 flex items-center justify-center p-4">
|
||||
<Card className="w-full max-w-md shadow-xl border-0 bg-white/80 backdrop-blur-sm">
|
||||
<CardHeader className="text-center space-y-4 pb-8">
|
||||
<div className="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<IdCard className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-2xl font-bold text-gray-900">Área do Gestor</CardTitle>
|
||||
<CardDescription className="text-gray-600 mt-2">Acesse o sistema médico</CardDescription>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-6">
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email" className="text-sm font-medium text-gray-700">
|
||||
E-mail
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="gestor@clinica.com"
|
||||
value={form.email}
|
||||
onChange={(e) => setForm({ ...form, email: e.target.value })}
|
||||
className="pl-10 h-11 border-gray-200 focus:border-blue-500 focus:ring-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password" className="text-sm font-medium text-gray-700">
|
||||
Senha
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input
|
||||
id="password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder="Digite sua senha"
|
||||
value={form.password}
|
||||
onChange={(e) => setForm({ ...form, password: e.target.value })}
|
||||
className="pl-10 pr-10 h-11 border-gray-200 focus:border-green-500 focus:ring-green-500"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
{showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-11 bg-blue-600 hover:bg-blue-700 text-white font-medium"
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
Entrando...
|
||||
</>
|
||||
) : (
|
||||
"Entrar"
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<div className="relative">
|
||||
<Separator className="my-6" />
|
||||
<span className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white px-3 text-sm text-gray-500">
|
||||
ou
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<Link href="/" className="text-sm text-blue-600 hover:text-blue-700 font-medium hover:underline">
|
||||
Voltar à página inicial
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
export default function ManagerLoginPage() {
|
||||
return (
|
||||
// Mantemos o seu plano de fundo original
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50 flex items-center justify-center p-4">
|
||||
<LoginForm title="Área do Gestor" description="Acesse o sistema médico" role="manager" themeColor="blue" redirectPath="/manager/home" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
279
app/manager/usuario/[id]/editar/page.tsx
Normal file
279
app/manager/usuario/[id]/editar/page.tsx
Normal file
@ -0,0 +1,279 @@
|
||||
"use client"
|
||||
|
||||
import { useState, useEffect } from "react"
|
||||
import { useRouter, useParams } from "next/navigation"
|
||||
import Link from "next/link"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Save, Loader2, ArrowLeft } from "lucide-react"
|
||||
import ManagerLayout from "@/components/manager-layout"
|
||||
|
||||
// Mock user service for demonstration. Replace with your actual API service.
|
||||
const usersService = {
|
||||
getById: async (id: string): Promise<any> => {
|
||||
console.log(`API Call: Fetching user with ID ${id}`);
|
||||
await new Promise(resolve => setTimeout(resolve, 500));
|
||||
// This mock finds a user from a predefined list.
|
||||
const mockUsers = [
|
||||
{ id: 1, full_name: 'Alice Admin', email: 'alice.admin@example.com', phone: '(11) 98765-4321', role: 'admin' },
|
||||
{ id: 2, full_name: 'Bruno Gestor', email: 'bruno.g@example.com', phone: '(21) 91234-5678', role: 'gestor' },
|
||||
{ id: 3, full_name: 'Dr. Carlos Médico', email: 'carlos.med@example.com', phone: null, role: 'medico' },
|
||||
{ id: 4, full_name: 'Daniela Secretaria', email: 'daniela.sec@example.com', phone: '(31) 99999-8888', role: 'secretaria' },
|
||||
{ id: 5, full_name: 'Eduardo Usuário', email: 'edu.user@example.com', phone: '(41) 98888-7777', role: 'user' },
|
||||
];
|
||||
const user = mockUsers.find(u => u.id.toString() === id);
|
||||
if (!user) throw new Error("Usuário não encontrado.");
|
||||
return user;
|
||||
},
|
||||
update: async (id: string, payload: any): Promise<void> => {
|
||||
console.log(`API Call: Updating user ${id} with payload:`, payload);
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
// To simulate an error (e.g., duplicate email), you could throw an error here:
|
||||
// if (payload.email === 'bruno.g@example.com') throw new Error("Este e-mail já está em uso por outro usuário.");
|
||||
}
|
||||
};
|
||||
|
||||
// Interface for the user form data
|
||||
interface UserFormData {
|
||||
nomeCompleto: string;
|
||||
email: string;
|
||||
telefone: string;
|
||||
papel: string;
|
||||
password?: string; // Optional for password updates
|
||||
}
|
||||
|
||||
// Default state for the form
|
||||
const defaultFormData: UserFormData = {
|
||||
nomeCompleto: '',
|
||||
email: '',
|
||||
telefone: '',
|
||||
papel: '',
|
||||
password: '',
|
||||
};
|
||||
|
||||
// Helper functions for phone formatting
|
||||
const cleanNumber = (value: string): string => value.replace(/\D/g, '');
|
||||
const formatPhone = (value: string): string => {
|
||||
const cleaned = cleanNumber(value).substring(0, 11);
|
||||
if (cleaned.length > 10) {
|
||||
return cleaned.replace(/(\d{2})(\d{5})(\d{4})/, '($1) $2-$3');
|
||||
}
|
||||
return cleaned.replace(/(\d{2})(\d{4})(\d{4})/, '($1) $2-$3');
|
||||
};
|
||||
|
||||
export default function EditarUsuarioPage() {
|
||||
const router = useRouter();
|
||||
const params = useParams();
|
||||
const id = Array.isArray(params.id) ? params.id[0] : params.id;
|
||||
|
||||
const [formData, setFormData] = useState<UserFormData>(defaultFormData);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Map API field names to our form field names
|
||||
const apiToFormMap: { [key: string]: keyof UserFormData } = {
|
||||
'full_name': 'nomeCompleto',
|
||||
'email': 'email',
|
||||
'phone': 'telefone',
|
||||
'role': 'papel'
|
||||
};
|
||||
|
||||
// Fetch user data when the component mounts
|
||||
useEffect(() => {
|
||||
if (!id) return;
|
||||
|
||||
const fetchUser = async () => {
|
||||
try {
|
||||
const data = await usersService.getById(id);
|
||||
if (!data) {
|
||||
setError("Usuário não encontrado.");
|
||||
setLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
const initialData: Partial<UserFormData> = {};
|
||||
Object.keys(data).forEach(key => {
|
||||
const formKey = apiToFormMap[key];
|
||||
if (formKey) {
|
||||
initialData[formKey] = data[key] === null ? '' : String(data[key]);
|
||||
}
|
||||
});
|
||||
|
||||
setFormData(prev => ({ ...prev, ...initialData }));
|
||||
} catch (e: any) {
|
||||
console.error("Erro ao carregar dados do usuário:", e);
|
||||
setError(e.message || "Não foi possível carregar os dados do usuário.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
fetchUser();
|
||||
}, [id]);
|
||||
|
||||
const handleInputChange = (key: keyof UserFormData, value: string) => {
|
||||
const updatedValue = key === 'telefone' ? formatPhone(value) : value;
|
||||
setFormData((prev) => ({ ...prev, [key]: updatedValue }));
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
setIsSaving(true);
|
||||
|
||||
if (!id) {
|
||||
setError("ID do usuário ausente.");
|
||||
setIsSaving(false);
|
||||
return;
|
||||
}
|
||||
|
||||
// Prepare payload for the API
|
||||
const payload: { [key: string]: any } = {
|
||||
full_name: formData.nomeCompleto,
|
||||
email: formData.email,
|
||||
phone: formData.telefone.trim() || null,
|
||||
role: formData.papel,
|
||||
};
|
||||
|
||||
// Only include the password in the payload if it has been changed
|
||||
if (formData.password && formData.password.trim() !== '') {
|
||||
payload.password = formData.password;
|
||||
}
|
||||
|
||||
try {
|
||||
await usersService.update(id, payload);
|
||||
router.push("/manager/usuario");
|
||||
} catch (e: any) {
|
||||
console.error("Erro ao salvar o usuário:", e);
|
||||
setError(e.message || "Ocorreu um erro inesperado ao atualizar.");
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<ManagerLayout>
|
||||
<div className="flex justify-center items-center h-full w-full py-16">
|
||||
<Loader2 className="w-8 h-8 animate-spin text-green-600" />
|
||||
<p className="ml-2 text-gray-600">Carregando dados do usuário...</p>
|
||||
</div>
|
||||
</ManagerLayout>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ManagerLayout>
|
||||
<div className="w-full max-w-2xl mx-auto space-y-6 p-4 md:p-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">
|
||||
Editar Usuário: <span className="text-green-600">{formData.nomeCompleto}</span>
|
||||
</h1>
|
||||
<p className="text-sm text-gray-500">
|
||||
Atualize as informações do usuário (ID: {id}).
|
||||
</p>
|
||||
</div>
|
||||
<Link href="/manager/usuario">
|
||||
<Button variant="outline">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Voltar
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-8 bg-white p-8 border rounded-lg shadow-sm">
|
||||
{error && (
|
||||
<div className="p-3 bg-red-100 text-red-700 rounded-lg border border-red-300">
|
||||
<p className="font-medium">Erro na Atualização:</p>
|
||||
<p className="text-sm">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="nomeCompleto">Nome Completo</Label>
|
||||
<Input
|
||||
id="nomeCompleto"
|
||||
value={formData.nomeCompleto}
|
||||
onChange={(e) => handleInputChange("nomeCompleto", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">E-mail</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => handleInputChange("email", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Nova Senha</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
value={formData.password}
|
||||
onChange={(e) => handleInputChange("password", e.target.value)}
|
||||
placeholder="Deixe em branco para não alterar"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="telefone">Telefone</Label>
|
||||
<Input
|
||||
id="telefone"
|
||||
value={formData.telefone}
|
||||
onChange={(e) => handleInputChange("telefone", e.target.value)}
|
||||
placeholder="(00) 00000-0000"
|
||||
maxLength={15}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="papel">Papel (Função)</Label>
|
||||
<Select value={formData.papel} onValueChange={(v) => handleInputChange("papel", v)}>
|
||||
<SelectTrigger id="papel">
|
||||
<SelectValue placeholder="Selecione uma função" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="admin">Admin</SelectItem>
|
||||
<SelectItem value="gestor">Gestor</SelectItem>
|
||||
<SelectItem value="medico">Médico</SelectItem>
|
||||
<SelectItem value="secretaria">Secretaria</SelectItem>
|
||||
<SelectItem value="user">Usuário</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end gap-4 pt-4">
|
||||
<Link href="/manager/usuario">
|
||||
<Button type="button" variant="outline" disabled={isSaving}>
|
||||
Cancelar
|
||||
</Button>
|
||||
</Link>
|
||||
<Button
|
||||
type="submit"
|
||||
className="bg-green-600 hover:bg-green-700"
|
||||
disabled={isSaving}
|
||||
>
|
||||
{isSaving ? (
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
) : (
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
)}
|
||||
{isSaving ? "Salvando..." : "Salvar Alterações"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</ManagerLayout>
|
||||
);
|
||||
}
|
||||
214
app/manager/usuario/novo/page.tsx
Normal file
214
app/manager/usuario/novo/page.tsx
Normal file
@ -0,0 +1,214 @@
|
||||
"use client"
|
||||
|
||||
import { useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import Link from "next/link"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Save, Loader2 } from "lucide-react"
|
||||
import ManagerLayout from "@/components/manager-layout"
|
||||
|
||||
// Mock user service for demonstration. Replace with your actual API service.
|
||||
const usersService = {
|
||||
create: async (payload: any) => {
|
||||
console.log("API Call: Creating user with payload:", payload);
|
||||
// Simulate network delay
|
||||
await new Promise(resolve => setTimeout(resolve, 1000));
|
||||
// Simulate a success response
|
||||
return { id: Date.now(), ...payload };
|
||||
// To simulate an error, you could throw an error here:
|
||||
// throw new Error("O e-mail informado já está em uso.");
|
||||
}
|
||||
};
|
||||
|
||||
// Define the structure for our form data
|
||||
interface UserFormData {
|
||||
email: string;
|
||||
password: string;
|
||||
nomeCompleto: string;
|
||||
telefone: string;
|
||||
papel: string; // e.g., 'admin', 'gestor', 'medico', etc.
|
||||
}
|
||||
|
||||
// Define the initial state for the form
|
||||
const defaultFormData: UserFormData = {
|
||||
email: '',
|
||||
password: '',
|
||||
nomeCompleto: '',
|
||||
telefone: '',
|
||||
papel: '',
|
||||
};
|
||||
|
||||
// Helper function to remove non-digit characters
|
||||
const cleanNumber = (value: string): string => value.replace(/\D/g, '');
|
||||
|
||||
// Helper function to format a phone number
|
||||
const formatPhone = (value: string): string => {
|
||||
const cleaned = cleanNumber(value).substring(0, 11);
|
||||
if (cleaned.length > 10) {
|
||||
return cleaned.replace(/(\d{2})(\d{5})(\d{4})/, '($1) $2-$3');
|
||||
}
|
||||
return cleaned.replace(/(\d{2})(\d{4})(\d{4})/, '($1) $2-$3');
|
||||
};
|
||||
|
||||
export default function NovoUsuarioPage() {
|
||||
const router = useRouter();
|
||||
const [formData, setFormData] = useState<UserFormData>(defaultFormData);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// Handles changes in form inputs
|
||||
const handleInputChange = (key: keyof UserFormData, value: string) => {
|
||||
const updatedValue = key === 'telefone' ? formatPhone(value) : value;
|
||||
setFormData((prev) => ({ ...prev, [key]: updatedValue }));
|
||||
};
|
||||
|
||||
// Handles form submission
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setError(null);
|
||||
|
||||
// Basic validation
|
||||
if (!formData.email || !formData.password || !formData.nomeCompleto || !formData.papel) {
|
||||
setError("Por favor, preencha todos os campos obrigatórios.");
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSaving(true);
|
||||
|
||||
// Prepare payload for the API
|
||||
const payload = {
|
||||
email: formData.email,
|
||||
password: formData.password,
|
||||
full_name: formData.nomeCompleto,
|
||||
phone: formData.telefone.trim() || null, // Send null if empty
|
||||
role: formData.papel,
|
||||
};
|
||||
|
||||
try {
|
||||
await usersService.create(payload);
|
||||
// On success, redirect to the main user list page
|
||||
router.push("/manager/usuario");
|
||||
} catch (e: any) {
|
||||
console.error("Erro ao criar usuário:", e);
|
||||
setError(e.message || "Ocorreu um erro inesperado. Tente novamente.");
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<ManagerLayout>
|
||||
<div className="w-full max-w-2xl mx-auto space-y-6 p-4 md:p-8">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Novo Usuário</h1>
|
||||
<p className="text-sm text-gray-500">
|
||||
Preencha os dados para cadastrar um novo usuário no sistema.
|
||||
</p>
|
||||
</div>
|
||||
<Link href="/manager/usuario">
|
||||
<Button variant="outline">Cancelar</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-8 bg-white p-8 border rounded-lg shadow-sm">
|
||||
|
||||
{/* Error Message Display */}
|
||||
{error && (
|
||||
<div className="p-3 bg-red-100 text-red-700 rounded-lg border border-red-300">
|
||||
<p className="font-medium">Erro no Cadastro:</p>
|
||||
<p className="text-sm">{error}</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="nomeCompleto">Nome Completo *</Label>
|
||||
<Input
|
||||
id="nomeCompleto"
|
||||
value={formData.nomeCompleto}
|
||||
onChange={(e) => handleInputChange("nomeCompleto", e.target.value)}
|
||||
placeholder="Nome e Sobrenome"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">E-mail *</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={formData.email}
|
||||
onChange={(e) => handleInputChange("email", e.target.value)}
|
||||
placeholder="exemplo@dominio.com"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Senha *</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
value={formData.password}
|
||||
onChange={(e) => handleInputChange("password", e.target.value)}
|
||||
placeholder="••••••••"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="telefone">Telefone</Label>
|
||||
<Input
|
||||
id="telefone"
|
||||
value={formData.telefone}
|
||||
onChange={(e) => handleInputChange("telefone", e.target.value)}
|
||||
placeholder="(00) 00000-0000"
|
||||
maxLength={15}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="papel">Papel (Função) *</Label>
|
||||
<Select value={formData.papel} onValueChange={(v) => handleInputChange("papel", v)} required>
|
||||
<SelectTrigger id="papel">
|
||||
<SelectValue placeholder="Selecione uma função" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="gestor">Gestor</SelectItem>
|
||||
<SelectItem value="secretaria">Secretaria</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex justify-end gap-4 pt-4">
|
||||
<Link href="/manager/usuario">
|
||||
<Button type="button" variant="outline" disabled={isSaving}>
|
||||
Cancelar
|
||||
</Button>
|
||||
</Link>
|
||||
<Button
|
||||
type="submit"
|
||||
className="bg-green-600 hover:bg-green-700"
|
||||
disabled={isSaving}
|
||||
>
|
||||
{isSaving ? (
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
) : (
|
||||
<Save className="w-4 h-4 mr-2" />
|
||||
)}
|
||||
{isSaving ? "Salvando..." : "Salvar Usuário"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</ManagerLayout>
|
||||
);
|
||||
}
|
||||
245
app/manager/usuario/page.tsx
Normal file
245
app/manager/usuario/page.tsx
Normal file
@ -0,0 +1,245 @@
|
||||
"use client";
|
||||
|
||||
import React, { useEffect, useState, useCallback } from "react"
|
||||
import ManagerLayout from "@/components/manager-layout";
|
||||
import Link from "next/link"
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Plus, Edit, Trash2, Eye, Filter, Loader2 } from "lucide-react"
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog"
|
||||
|
||||
// Mock user service for demonstration. Replace with your actual API service.
|
||||
const usersService = {
|
||||
list: async (): Promise<User[]> => {
|
||||
console.log("API Call: Fetching users...");
|
||||
await new Promise(resolve => setTimeout(resolve, 500)); // Simulate network delay
|
||||
return [
|
||||
{ id: 1, full_name: 'Alice Admin', email: 'alice.admin@example.com', phone: '(11) 98765-4321', role: 'user' },
|
||||
|
||||
];
|
||||
},
|
||||
delete: async (id: number): Promise<void> => {
|
||||
console.log(`API Call: Deleting user with ID ${id}`);
|
||||
await new Promise(resolve => setTimeout(resolve, 700));
|
||||
// In a real app, you'd handle potential errors here
|
||||
}
|
||||
};
|
||||
|
||||
// Interface for a User object
|
||||
interface User {
|
||||
id: number;
|
||||
full_name: string;
|
||||
email: string;
|
||||
phone: string | null;
|
||||
role: 'admin' | 'gestor' | 'medico' | 'secretaria' | 'user';
|
||||
}
|
||||
|
||||
// Interface for User Details (can be the same as User for this case)
|
||||
interface UserDetails extends User {}
|
||||
|
||||
export default function UsersPage() {
|
||||
const router = useRouter();
|
||||
|
||||
const [users, setUsers] = useState<User[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [detailsDialogOpen, setDetailsDialogOpen] = useState(false);
|
||||
const [userDetails, setUserDetails] = useState<UserDetails | null>(null);
|
||||
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
|
||||
const [userToDeleteId, setUserToDeleteId] = useState<number | null>(null);
|
||||
|
||||
const fetchUsers = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const data: User[] = await usersService.list();
|
||||
setUsers(data || []);
|
||||
} catch (e: any) {
|
||||
console.error("Erro ao carregar lista de usuários:", e);
|
||||
setError("Não foi possível carregar a lista de usuários. Tente novamente.");
|
||||
setUsers([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchUsers();
|
||||
}, [fetchUsers]);
|
||||
|
||||
const openDetailsDialog = (user: User) => {
|
||||
setUserDetails(user);
|
||||
setDetailsDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (userToDeleteId === null) return;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
await usersService.delete(userToDeleteId);
|
||||
console.log(`Usuário com ID ${userToDeleteId} excluído com sucesso!`);
|
||||
setDeleteDialogOpen(false);
|
||||
setUserToDeleteId(null);
|
||||
await fetchUsers(); // Refresh the list after deletion
|
||||
} catch (e) {
|
||||
console.error("Erro ao excluir:", e);
|
||||
alert("Erro ao excluir usuário.");
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const openDeleteDialog = (userId: number) => {
|
||||
setUserToDeleteId(userId);
|
||||
setDeleteDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleEdit = (userId: number) => {
|
||||
// Assuming the edit page is at a similar path
|
||||
router.push(`/manager/usuario/${userId}/editar`);
|
||||
};
|
||||
|
||||
return (
|
||||
<ManagerLayout>
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold text-gray-900">Usuários Cadastrados</h1>
|
||||
<p className="text-sm text-gray-500">Gerencie todos os usuários do sistema.</p>
|
||||
</div>
|
||||
<Link href="/manager/usuario/novo">
|
||||
<Button className="bg-green-600 hover:bg-green-700">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Adicionar Novo
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* Filters Section */}
|
||||
<div className="flex items-center space-x-4 bg-white p-4 rounded-lg border border-gray-200">
|
||||
<Filter className="w-5 h-5 text-gray-400" />
|
||||
<Select>
|
||||
<SelectTrigger className="w-[180px]">
|
||||
<SelectValue placeholder="Filtrar por Papel" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="admin">Admin</SelectItem>
|
||||
<SelectItem value="gestor">Gestor</SelectItem>
|
||||
<SelectItem value="medico">Médico</SelectItem>
|
||||
<SelectItem value="secretaria">Secretaria</SelectItem>
|
||||
<SelectItem value="user">Usuário</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
{/* Users Table */}
|
||||
<div className="bg-white rounded-lg border border-gray-200 shadow-md overflow-hidden">
|
||||
{loading ? (
|
||||
<div className="p-8 text-center text-gray-500">
|
||||
<Loader2 className="w-8 h-8 animate-spin mx-auto mb-3 text-green-600" />
|
||||
Carregando usuários...
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="p-8 text-center text-red-600">
|
||||
{error}
|
||||
</div>
|
||||
) : users.length === 0 ? (
|
||||
<div className="p-8 text-center text-gray-500">
|
||||
Nenhum usuário cadastrado. <Link href="/manager/usuario/novo" className="text-green-600 hover:underline">Adicione um novo</Link>.
|
||||
</div>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full divide-y divide-gray-200">
|
||||
<thead className="bg-gray-50">
|
||||
<tr>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Nome Completo</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">E-mail</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Telefone</th>
|
||||
<th scope="col" className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Papel</th>
|
||||
<th scope="col" className="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Ações</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="bg-white divide-y divide-gray-200">
|
||||
{users.map((user) => (
|
||||
<tr key={user.id} className="hover:bg-gray-50">
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{user.full_name}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{user.email}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">{user.phone || "N/A"}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 capitalize">{user.role}</td>
|
||||
<td className="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
|
||||
<div className="flex justify-end space-x-1">
|
||||
<Button variant="outline" size="icon" onClick={() => openDetailsDialog(user)} title="Visualizar Detalhes">
|
||||
<Eye className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button variant="outline" size="icon" onClick={() => handleEdit(user.id)} title="Editar">
|
||||
<Edit className="h-4 w-4 text-blue-600" />
|
||||
</Button>
|
||||
<Button variant="outline" size="icon" onClick={() => openDeleteDialog(user.id)} title="Excluir">
|
||||
<Trash2 className="h-4 w-4 text-red-600" />
|
||||
</Button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Delete Confirmation Dialog */}
|
||||
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Confirma a exclusão?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Esta ação é irreversível e excluirá permanentemente o registro deste usuário.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={loading}>Cancelar</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleDelete} className="bg-red-600 hover:bg-red-700" disabled={loading}>
|
||||
{loading ? <Loader2 className="w-4 h-4 mr-2 animate-spin" /> : null}
|
||||
Excluir
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
|
||||
{/* User Details Dialog */}
|
||||
<AlertDialog open={detailsDialogOpen} onOpenChange={setDetailsDialogOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle className="text-2xl">{userDetails?.full_name}</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
{userDetails && (
|
||||
<div className="space-y-3 pt-2 text-left text-gray-700">
|
||||
<div className="grid grid-cols-1 gap-y-2 text-sm">
|
||||
<div><strong>E-mail:</strong> {userDetails.email}</div>
|
||||
<div><strong>Telefone:</strong> {userDetails.phone || 'Não informado'}</div>
|
||||
<div className="capitalize"><strong>Papel:</strong> {userDetails.role}</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Fechar</AlertDialogCancel>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
</ManagerLayout>
|
||||
);
|
||||
}
|
||||
67
app/page.tsx
67
app/page.tsx
@ -6,29 +6,29 @@ import { Button } from "@/components/ui/button"
|
||||
|
||||
export default function InicialPage() {
|
||||
return (
|
||||
<div className="min-h-screen flex flex-col bg-gray-50">
|
||||
<div className="min-h-screen flex flex-col bg-background">
|
||||
{}
|
||||
<div className="bg-black text-white text-sm py-2 px-6 flex justify-between">
|
||||
<div className="bg-primary text-primary-foreground text-sm py-2 px-6 flex justify-between">
|
||||
<span> Horário: 08h00 - 21h00</span>
|
||||
<span> Email: contato@medconnect.com</span>
|
||||
</div>
|
||||
|
||||
{}
|
||||
<header className="bg-white shadow-md py-4 px-6 flex justify-between items-center">
|
||||
<h1 className="text-2xl font-bold text-blue-700">MedConnect</h1>
|
||||
<nav className="flex space-x-6 text-gray-700 font-medium">
|
||||
<a href="#home" className="hover:text-blue-600">Home</a>
|
||||
<a href="#about" className="hover:text-blue-600">Sobre</a>
|
||||
<a href="#departments" className="hover:text-blue-600">Departamentos</a>
|
||||
<a href="#doctors" className="hover:text-blue-600">Médicos</a>
|
||||
<a href="#contact" className="hover:text-blue-600">Contato</a>
|
||||
<header className="bg-card shadow-md py-4 px-6 flex justify-between items-center">
|
||||
<h1 className="text-2xl font-bold text-primary">MedConnect</h1>
|
||||
<nav className="flex space-x-6 text-muted-foreground font-medium">
|
||||
<a href="#home" className="hover:text-primary">Home</a>
|
||||
<a href="#about" className="hover:text-primary">Sobre</a>
|
||||
<a href="#departments" className="hover:text-primary">Departamentos</a>
|
||||
<a href="#doctors" className="hover:text-primary">Médicos</a>
|
||||
<a href="#contact" className="hover:text-primary">Contato</a>
|
||||
</nav>
|
||||
<div className="flex space-x-4">
|
||||
{}
|
||||
<Link href="/cadastro">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="rounded-full px-6 py-2 border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white transition cursor-pointer"
|
||||
className="rounded-full px-6 py-2 border-2 transition cursor-pointer"
|
||||
>
|
||||
Login
|
||||
</Button>
|
||||
@ -38,22 +38,21 @@ export default function InicialPage() {
|
||||
</header>
|
||||
|
||||
{}
|
||||
<section className="flex flex-col md:flex-row items-center justify-between px-10 md:px-20 py-16 bg-gray-100">
|
||||
<section className="flex flex-col md:flex-row items-center justify-between px-10 md:px-20 py-16 bg-background">
|
||||
<div className="max-w-lg">
|
||||
<h2 className="text-gray-600 uppercase text-sm">Bem-vindo à Saúde Digital</h2>
|
||||
<h1 className="text-4xl font-extrabold text-black leading-tight mt-2">
|
||||
<h2 className="text-muted-foreground uppercase text-sm">Bem-vindo à Saúde Digital</h2>
|
||||
<h1 className="text-4xl font-extrabold text-foreground leading-tight mt-2">
|
||||
Soluções Médicas <br /> & Cuidados com a Saúde
|
||||
</h1>
|
||||
<p className="text-gray-600 mt-4">
|
||||
<p className="text-muted-foreground mt-4">
|
||||
Excelência em saúde há mais de 25 anos. Atendimento médicio com qualidade,segurança e carinho.
|
||||
</p>
|
||||
<div className="mt-6 flex space-x-4">
|
||||
<Button className="rounded-full px-6 py-2 bg-blue-600 hover:bg-blue-700 text-white shadow-lg transition">
|
||||
<Button>
|
||||
Nossos Serviços
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
className="rounded-full px-6 py-2 border-2 border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white transition"
|
||||
variant="secondary"
|
||||
>
|
||||
Saiba Mais
|
||||
</Button>
|
||||
@ -69,35 +68,35 @@ export default function InicialPage() {
|
||||
</section>
|
||||
|
||||
{}
|
||||
<section className="py-16 px-10 md:px-20 bg-white">
|
||||
<h2 className="text-center text-3xl font-bold text-black">Cuidados completos para a sua saúde</h2>
|
||||
<p className="text-center text-gray-600 mt-2">Serviços médicos que oferecemos</p>
|
||||
<section className="py-16 px-10 md:px-20 bg-card">
|
||||
<h2 className="text-center text-3xl font-bold text-foreground">Cuidados completos para a sua saúde</h2>
|
||||
<p className="text-center text-muted-foreground mt-2">Serviços médicos que oferecemos</p>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 mt-10">
|
||||
<div className="p-6 bg-gray-100 rounded-xl shadow hover:shadow-lg transition">
|
||||
<h3 className="text-xl font-semibold text-blue-600">Clínica Geral</h3>
|
||||
<p className="text-gray-600 mt-2">
|
||||
<div className="p-6 bg-background rounded-xl shadow hover:shadow-lg transition">
|
||||
<h3 className="text-xl font-semibold text-primary">Clínica Geral</h3>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Seu primeiro passo para o cuidado. Atendimento focado na prevenção e no diagnóstico inicial.
|
||||
</p>
|
||||
<Button className="mt-4 rounded-full bg-blue-600 hover:bg-blue-700 text-white px-5 py-2">
|
||||
<Button className="mt-4">
|
||||
Agendar
|
||||
</Button>
|
||||
</div>
|
||||
<div className="p-6 bg-gray-100 rounded-xl shadow hover:shadow-lg transition">
|
||||
<h3 className="text-xl font-semibold text-blue-600">Pediatria</h3>
|
||||
<p className="text-gray-600 mt-2">
|
||||
<div className="p-6 bg-background rounded-xl shadow hover:shadow-lg transition">
|
||||
<h3 className="text-xl font-semibold text-primary">Pediatria</h3>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Cuidado gentil e especializado para garantir a saúde e o desenvolvimeto de crianças e adolescentes.
|
||||
</p>
|
||||
<Button className="mt-4 rounded-full bg-blue-600 hover:bg-blue-700 text-white px-5 py-2">
|
||||
<Button className="mt-4">
|
||||
Agendar
|
||||
</Button>
|
||||
</div>
|
||||
<div className="p-6 bg-gray-100 rounded-xl shadow hover:shadow-lg transition">
|
||||
<h3 className="text-xl font-semibold text-blue-600">Exames</h3>
|
||||
<p className="text-gray-600 mt-2">
|
||||
<div className="p-6 bg-background rounded-xl shadow hover:shadow-lg transition">
|
||||
<h3 className="text-xl font-semibold text-primary">Exames</h3>
|
||||
<p className="text-muted-foreground mt-2">
|
||||
Resultados rápidos e precisos em exames laboratoriais e de imagem essenciais para seu diagnóstico.
|
||||
</p>
|
||||
<Button className="mt-4 rounded-full bg-blue-600 hover:bg-blue-700 text-white px-5 py-2">
|
||||
<Button className="mt-4">
|
||||
Agendar
|
||||
</Button>
|
||||
</div>
|
||||
@ -105,7 +104,7 @@ export default function InicialPage() {
|
||||
</section>
|
||||
|
||||
{}
|
||||
<footer className="bg-black text-white py-6 text-center">
|
||||
<footer className="bg-primary text-primary-foreground py-6 text-center">
|
||||
<p>© 2025 MedConnect</p>
|
||||
</footer>
|
||||
</div>
|
||||
|
||||
@ -1,164 +1,35 @@
|
||||
"use client"
|
||||
// Caminho: app/(patient)/login/page.tsx
|
||||
|
||||
import type React from "react"
|
||||
import Link from "next/link";
|
||||
import { LoginForm } from "@/components/LoginForm";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ArrowLeft } from "lucide-react";
|
||||
|
||||
import { useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import Link from "next/link"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Eye, EyeOff, ArrowLeft, Stethoscope, Mail, Lock } from "lucide-react"
|
||||
export default function PatientLoginPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 flex flex-col items-center justify-center p-4">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="mb-8">
|
||||
<Link href="/" className="inline-flex items-center text-muted-foreground hover:text-primary transition-colors duration-200 font-medium">
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Voltar ao início
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
export default function PatientLogin() {
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
const [email, setEmail] = useState("")
|
||||
const [password, setPassword] = useState("")
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const router = useRouter()
|
||||
<LoginForm title="Área do Paciente" description="Acesse sua conta para gerenciar consultas" role="patient" themeColor="blue" redirectPath="/patient/dashboard">
|
||||
{/* Este bloco é passado como 'children' para o LoginForm */}
|
||||
<Link href="/patient/register" passHref>
|
||||
<Button variant="outline" className="w-full h-12 text-base">
|
||||
Criar nova conta
|
||||
</Button>
|
||||
</Link>
|
||||
</LoginForm>
|
||||
|
||||
const handleLogin = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setIsLoading(true)
|
||||
|
||||
// Simulação de login - em produção, conectar com API real
|
||||
setTimeout(() => {
|
||||
if (email && password) {
|
||||
// Salvar dados do usuário no localStorage para simulação
|
||||
localStorage.setItem(
|
||||
"patientData",
|
||||
JSON.stringify({
|
||||
name: "João Silva",
|
||||
email: email,
|
||||
phone: "(11) 99999-9999",
|
||||
cpf: "123.456.789-00",
|
||||
birthDate: "1990-01-01",
|
||||
address: "Rua das Flores, 123 - São Paulo, SP",
|
||||
}),
|
||||
)
|
||||
router.push("/patient/dashboard")
|
||||
}
|
||||
setIsLoading(false)
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50 flex items-center justify-center p-4">
|
||||
<div className="w-full max-w-md">
|
||||
<div className="mb-8">
|
||||
<Link
|
||||
href="/"
|
||||
className="inline-flex items-center text-slate-600 hover:text-blue-600 transition-colors duration-200 font-medium"
|
||||
>
|
||||
<ArrowLeft className="w-4 h-4 mr-2" />
|
||||
Voltar ao início
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<Card className="shadow-xl border-0 bg-white/80 backdrop-blur-sm">
|
||||
<CardHeader className="text-center pb-8">
|
||||
<div className="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center mb-4">
|
||||
<Stethoscope className="w-8 h-8 text-blue-600" />
|
||||
{/* Conteúdo e espaçamento restaurados */}
|
||||
<div className="mt-8 text-center">
|
||||
<p className="text-sm text-muted-foreground">Problemas para acessar? Entre em contato conosco</p>
|
||||
</div>
|
||||
</div>
|
||||
<CardTitle className="text-3xl font-bold text-slate-800 mb-2">Área do Paciente</CardTitle>
|
||||
<CardDescription className="text-slate-600 text-base">
|
||||
Acesse sua conta para gerenciar consultas e laudos
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="px-8 pb-8">
|
||||
<form onSubmit={handleLogin} className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email" className="text-slate-700 font-medium">
|
||||
Email
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 w-5 h-5" />
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="seu@email.com"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
className="pl-11 h-12 border-slate-200 focus:border-blue-500 focus:ring-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password" className="text-slate-700 font-medium">
|
||||
Senha
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400 w-5 h-5" />
|
||||
<Input
|
||||
id="password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder="Sua senha"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
className="pl-11 pr-12 h-12 border-slate-200 focus:border-blue-500 focus:ring-blue-500"
|
||||
required
|
||||
/>
|
||||
<Button
|
||||
type="button"
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="absolute right-2 top-1/2 transform -translate-y-1/2 h-8 w-8 p-0 hover:bg-slate-100"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
>
|
||||
{showPassword ? (
|
||||
<EyeOff className="h-4 w-4 text-slate-400" />
|
||||
) : (
|
||||
<Eye className="h-4 w-4 text-slate-400" />
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-12 bg-blue-600 hover:bg-blue-700 text-white font-semibold rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl disabled:opacity-50"
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading ? (
|
||||
<div className="flex items-center">
|
||||
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white mr-2"></div>
|
||||
Entrando...
|
||||
</div>
|
||||
) : (
|
||||
"Entrar na minha conta"
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<div className="mt-8 text-center">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-slate-200"></div>
|
||||
</div>
|
||||
<div className="relative flex justify-center text-sm">
|
||||
<span className="px-4 bg-white text-slate-500">Novo por aqui?</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4">
|
||||
<Link
|
||||
href="/patient/register"
|
||||
className="inline-flex items-center justify-center w-full h-12 border border-slate-200 rounded-lg text-slate-700 hover:bg-slate-50 transition-colors duration-200 font-medium"
|
||||
>
|
||||
Criar nova conta
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="mt-8 text-center">
|
||||
<p className="text-sm text-slate-500">Problemas para acessar? Entre em contato conosco</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
"use client"
|
||||
|
||||
import type React from "react"
|
||||
import { useState } from "react"
|
||||
import { useState, useEffect, useCallback } from "react"
|
||||
// Importações de componentes omitidas para brevidade, mas estão no código original
|
||||
import PatientLayout from "@/components/patient-layout"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
@ -11,6 +11,15 @@ import { Label } from "@/components/ui/label"
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
|
||||
import { Textarea } from "@/components/ui/textarea"
|
||||
import { Calendar, Clock, User } from "lucide-react"
|
||||
import { doctorsService } from "services/doctorsApi.mjs";
|
||||
|
||||
interface Doctor {
|
||||
id: string;
|
||||
full_name: string;
|
||||
specialty: string;
|
||||
phone_mobile: string;
|
||||
|
||||
}
|
||||
|
||||
// Chave do LocalStorage, a mesma usada em secretarypage.tsx
|
||||
const APPOINTMENTS_STORAGE_KEY = "clinic-appointments";
|
||||
@ -20,13 +29,30 @@ export default function ScheduleAppointment() {
|
||||
const [selectedDate, setSelectedDate] = useState("")
|
||||
const [selectedTime, setSelectedTime] = useState("")
|
||||
const [notes, setNotes] = useState("")
|
||||
const [doctors, setDoctors] = useState<Doctor[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const doctors = [
|
||||
{ id: "1", name: "Dr. João Silva", specialty: "Cardiologia" },
|
||||
{ id: "2", name: "Dra. Maria Santos", specialty: "Dermatologia" },
|
||||
{ id: "3", name: "Dr. Pedro Costa", specialty: "Ortopedia" },
|
||||
{ id: "4", name: "Dra. Ana Lima", specialty: "Ginecologia" },
|
||||
]
|
||||
|
||||
const fetchDoctors = useCallback(async () => {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
|
||||
const data: Doctor[] = await doctorsService.list();
|
||||
setDoctors(data || []);
|
||||
} catch (e: any) {
|
||||
console.error("Erro ao carregar lista de médicos:", e);
|
||||
setError("Não foi possível carregar a lista de médicos. Verifique a conexão com a API.");
|
||||
setDoctors([]);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
fetchDoctors();
|
||||
}, [fetchDoctors]);
|
||||
|
||||
const availableTimes = [
|
||||
"08:00",
|
||||
@ -65,7 +91,7 @@ export default function ScheduleAppointment() {
|
||||
const newAppointment = {
|
||||
id: new Date().getTime(), // ID único simples
|
||||
patientName: patientDetails.full_name,
|
||||
doctor: doctorDetails.name, // Nome completo do médico (necessário para a listagem)
|
||||
doctor: doctorDetails.full_name, // Nome completo do médico (necessário para a listagem)
|
||||
specialty: doctorDetails.specialty,
|
||||
date: selectedDate,
|
||||
time: selectedTime,
|
||||
@ -83,7 +109,7 @@ export default function ScheduleAppointment() {
|
||||
// 3. Salva a lista atualizada no LocalStorage
|
||||
localStorage.setItem(APPOINTMENTS_STORAGE_KEY, JSON.stringify(updatedAppointments));
|
||||
|
||||
alert(`Consulta com ${doctorDetails.name} agendada com sucesso!`);
|
||||
alert(`Consulta com ${doctorDetails.full_name} agendada com sucesso!`);
|
||||
|
||||
// Limpar o formulário após o sucesso (opcional)
|
||||
setSelectedDoctor("");
|
||||
@ -118,7 +144,7 @@ export default function ScheduleAppointment() {
|
||||
<SelectContent>
|
||||
{doctors.map((doctor) => (
|
||||
<SelectItem key={doctor.id} value={doctor.id}>
|
||||
{doctor.name} - {doctor.specialty}
|
||||
{doctor.full_name} - {doctor.specialty}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
@ -185,7 +211,7 @@ export default function ScheduleAppointment() {
|
||||
{selectedDoctor && (
|
||||
<div className="flex items-center space-x-2">
|
||||
<User className="h-4 w-4 text-gray-500" />
|
||||
<span className="text-sm">{doctors.find((d) => d.id === selectedDoctor)?.name}</span>
|
||||
<span className="text-sm">{doctors.find((d) => d.id === selectedDoctor)?.full_name}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
283
app/secretary/appointments/page.tsx
Normal file
283
app/secretary/appointments/page.tsx
Normal file
@ -0,0 +1,283 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import SecretaryLayout from "@/components/secretary-layout";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Calendar, Clock, MapPin, Phone, CalendarDays, X, User } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import Link from "next/link";
|
||||
|
||||
const APPOINTMENTS_STORAGE_KEY = "clinic-appointments";
|
||||
|
||||
const initialAppointments = [
|
||||
{
|
||||
id: 1,
|
||||
patientName: "Carlos Pereira",
|
||||
doctor: "Dr. João Silva",
|
||||
specialty: "Cardiologia",
|
||||
date: "2024-01-15",
|
||||
time: "14:30",
|
||||
status: "agendada",
|
||||
location: "Consultório A - 2º andar",
|
||||
phone: "(11) 3333-4444",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
patientName: "Ana Beatriz Costa",
|
||||
doctor: "Dra. Maria Santos",
|
||||
specialty: "Dermatologia",
|
||||
date: "2024-01-22",
|
||||
time: "10:00",
|
||||
status: "agendada",
|
||||
location: "Consultório B - 1º andar",
|
||||
phone: "(11) 3333-5555",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
patientName: "Roberto Almeida",
|
||||
doctor: "Dr. Pedro Costa",
|
||||
specialty: "Ortopedia",
|
||||
date: "2024-01-08",
|
||||
time: "16:00",
|
||||
status: "realizada",
|
||||
location: "Consultório C - 3º andar",
|
||||
phone: "(11) 3333-6666",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
patientName: "Fernanda Lima",
|
||||
doctor: "Dra. Ana Lima",
|
||||
specialty: "Ginecologia",
|
||||
date: "2024-01-05",
|
||||
time: "09:30",
|
||||
status: "realizada",
|
||||
location: "Consultório D - 2º andar",
|
||||
phone: "(11) 3333-7777",
|
||||
},
|
||||
];
|
||||
|
||||
export default function SecretaryAppointments() {
|
||||
const [appointments, setAppointments] = useState<any[]>([]);
|
||||
const [rescheduleModal, setRescheduleModal] = useState(false);
|
||||
const [cancelModal, setCancelModal] = useState(false);
|
||||
const [selectedAppointment, setSelectedAppointment] = useState<any>(null);
|
||||
const [rescheduleData, setRescheduleData] = useState({ date: "", time: "", reason: "" });
|
||||
const [cancelReason, setCancelReason] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const storedAppointments = localStorage.getItem(APPOINTMENTS_STORAGE_KEY);
|
||||
if (storedAppointments) {
|
||||
setAppointments(JSON.parse(storedAppointments));
|
||||
} else {
|
||||
setAppointments(initialAppointments);
|
||||
localStorage.setItem(APPOINTMENTS_STORAGE_KEY, JSON.stringify(initialAppointments));
|
||||
}
|
||||
}, []);
|
||||
|
||||
const updateAppointments = (updatedAppointments: any[]) => {
|
||||
setAppointments(updatedAppointments);
|
||||
localStorage.setItem(APPOINTMENTS_STORAGE_KEY, JSON.stringify(updatedAppointments));
|
||||
};
|
||||
|
||||
const handleReschedule = (appointment: any) => {
|
||||
setSelectedAppointment(appointment);
|
||||
setRescheduleData({ date: "", time: "", reason: "" });
|
||||
setRescheduleModal(true);
|
||||
};
|
||||
|
||||
const handleCancel = (appointment: any) => {
|
||||
setSelectedAppointment(appointment);
|
||||
setCancelReason("");
|
||||
setCancelModal(true);
|
||||
};
|
||||
|
||||
const confirmReschedule = () => {
|
||||
if (!rescheduleData.date || !rescheduleData.time) {
|
||||
toast.error("Por favor, selecione uma nova data e horário");
|
||||
return;
|
||||
}
|
||||
const updated = appointments.map((apt) => (apt.id === selectedAppointment.id ? { ...apt, date: rescheduleData.date, time: rescheduleData.time } : apt));
|
||||
updateAppointments(updated);
|
||||
setRescheduleModal(false);
|
||||
toast.success("Consulta reagendada com sucesso!");
|
||||
};
|
||||
|
||||
const confirmCancel = () => {
|
||||
if (!cancelReason.trim() || cancelReason.trim().length < 10) {
|
||||
toast.error("O motivo do cancelamento é obrigatório e deve ter no mínimo 10 caracteres.");
|
||||
return;
|
||||
}
|
||||
const updated = appointments.map((apt) => (apt.id === selectedAppointment.id ? { ...apt, status: "cancelada" } : apt));
|
||||
updateAppointments(updated);
|
||||
setCancelModal(false);
|
||||
toast.success("Consulta cancelada com sucesso!");
|
||||
};
|
||||
|
||||
const getStatusBadge = (status: string) => {
|
||||
switch (status) {
|
||||
case "agendada":
|
||||
return <Badge className="bg-blue-100 text-blue-800">Agendada</Badge>;
|
||||
case "realizada":
|
||||
return <Badge className="bg-green-100 text-green-800">Realizada</Badge>;
|
||||
case "cancelada":
|
||||
return <Badge className="bg-red-100 text-red-800">Cancelada</Badge>;
|
||||
default:
|
||||
return <Badge variant="secondary">{status}</Badge>;
|
||||
}
|
||||
};
|
||||
|
||||
const timeSlots = ["08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "11:00", "11:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30", "17:00", "17:30"];
|
||||
|
||||
return (
|
||||
<SecretaryLayout>
|
||||
<div className="space-y-6">
|
||||
<div className="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Consultas Agendadas</h1>
|
||||
<p className="text-gray-600">Gerencie as consultas dos pacientes</p>
|
||||
</div>
|
||||
<Link href="/secretary/schedule">
|
||||
<Button>
|
||||
<Calendar className="mr-2 h-4 w-4" />
|
||||
Agendar Nova Consulta
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6">
|
||||
{appointments.length > 0 ? (
|
||||
appointments.map((appointment) => (
|
||||
<Card key={appointment.id}>
|
||||
<CardHeader>
|
||||
<div className="flex justify-between items-start">
|
||||
<div>
|
||||
<CardTitle className="text-lg">{appointment.doctor}</CardTitle>
|
||||
<CardDescription>{appointment.specialty}</CardDescription>
|
||||
</div>
|
||||
{getStatusBadge(appointment.status)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center text-sm text-gray-800 font-medium">
|
||||
<User className="mr-2 h-4 w-4 text-gray-600" />
|
||||
{appointment.patientName}
|
||||
</div>
|
||||
<div className="flex items-center text-sm text-gray-600">
|
||||
<Calendar className="mr-2 h-4 w-4" />
|
||||
{new Date(appointment.date).toLocaleDateString("pt-BR", { timeZone: "UTC" })}
|
||||
</div>
|
||||
<div className="flex items-center text-sm text-gray-600">
|
||||
<Clock className="mr-2 h-4 w-4" />
|
||||
{appointment.time}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center text-sm text-gray-600">
|
||||
<MapPin className="mr-2 h-4 w-4" />
|
||||
{appointment.location}
|
||||
</div>
|
||||
<div className="flex items-center text-sm text-gray-600">
|
||||
<Phone className="mr-2 h-4 w-4" />
|
||||
{appointment.phone}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{appointment.status === "agendada" && (
|
||||
<div className="flex gap-2 mt-4 pt-4 border-t">
|
||||
<Button variant="outline" size="sm" onClick={() => handleReschedule(appointment)}>
|
||||
<CalendarDays className="mr-2 h-4 w-4" />
|
||||
Reagendar
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" className="text-red-600 hover:text-red-700 hover:bg-red-50 bg-transparent" onClick={() => handleCancel(appointment)}>
|
||||
<X className="mr-2 h-4 w-4" />
|
||||
Cancelar
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
) : (
|
||||
<p>Nenhuma consulta encontrada.</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Dialog open={rescheduleModal} onOpenChange={setRescheduleModal}>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Reagendar Consulta</DialogTitle>
|
||||
<DialogDescription>Reagendar consulta com {selectedAppointment?.doctor} para {selectedAppointment?.patientName}</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="date">Nova Data</Label>
|
||||
<Input id="date" type="date" value={rescheduleData.date} onChange={(e) => setRescheduleData((prev) => ({ ...prev, date: e.target.value }))} min={new Date().toISOString().split("T")[0]} />
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="time">Novo Horário</Label>
|
||||
<Select value={rescheduleData.time} onValueChange={(value) => setRescheduleData((prev) => ({ ...prev, time: value }))}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione um horário" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{timeSlots.map((time) => (
|
||||
<SelectItem key={time} value={time}>
|
||||
{time}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="reason">Motivo do Reagendamento (opcional)</Label>
|
||||
<Textarea id="reason" placeholder="Informe o motivo do reagendamento..." value={rescheduleData.reason} onChange={(e) => setRescheduleData((prev) => ({ ...prev, reason: e.target.value }))} />
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setRescheduleModal(false)}>
|
||||
Cancelar
|
||||
</Button>
|
||||
<Button onClick={confirmReschedule}>Confirmar Reagendamento</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={cancelModal} onOpenChange={setCancelModal}>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Cancelar Consulta</DialogTitle>
|
||||
<DialogDescription>Tem certeza que deseja cancelar a consulta de {selectedAppointment?.patientName} com {selectedAppointment?.doctor}?</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="grid gap-2">
|
||||
<Label htmlFor="cancel-reason" className="text-sm font-medium">
|
||||
Motivo do Cancelamento <span className="text-red-500">*</span>
|
||||
</Label>
|
||||
<Textarea id="cancel-reason" placeholder="Por favor, informe o motivo do cancelamento... (obrigatório)" value={cancelReason} onChange={(e) => setCancelReason(e.target.value)} required className={`min-h-[100px] ${!cancelReason.trim() && cancelModal ? "border-red-300 focus:border-red-500" : ""}`} />
|
||||
<p className="text-xs text-gray-500">Mínimo de 10 caracteres. Este campo é obrigatório.</p>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setCancelModal(false)}>
|
||||
Voltar
|
||||
</Button>
|
||||
<Button variant="destructive" onClick={confirmCancel} disabled={!cancelReason.trim() || cancelReason.trim().length < 10}>
|
||||
Confirmar Cancelamento
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</SecretaryLayout>
|
||||
);
|
||||
}
|
||||
113
app/secretary/dashboard/page.tsx
Normal file
113
app/secretary/dashboard/page.tsx
Normal file
@ -0,0 +1,113 @@
|
||||
import SecretaryLayout from "@/components/secretary-layout"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Calendar, Clock, User, Plus } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
|
||||
export default function SecretaryDashboard() {
|
||||
return (
|
||||
<SecretaryLayout>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Dashboard</h1>
|
||||
<p className="text-gray-600">Bem-vindo ao seu portal de consultas médicas</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Próxima Consulta</CardTitle>
|
||||
<Calendar className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">15 Jan</div>
|
||||
<p className="text-xs text-muted-foreground">Dr. Silva - 14:30</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Consultas Este Mês</CardTitle>
|
||||
<Clock className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">3</div>
|
||||
<p className="text-xs text-muted-foreground">2 realizadas, 1 agendada</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
||||
<CardTitle className="text-sm font-medium">Perfil</CardTitle>
|
||||
<User className="h-4 w-4 text-muted-foreground" />
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="text-2xl font-bold">100%</div>
|
||||
<p className="text-xs text-muted-foreground">Dados completos</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Ações Rápidas</CardTitle>
|
||||
<CardDescription>Acesse rapidamente as principais funcionalidades</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<Link href="/secretary/schedule">
|
||||
<Button className="w-full justify-start">
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Agendar Nova Consulta
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="/secretary/appointments">
|
||||
<Button variant="outline" className="w-full justify-start bg-transparent">
|
||||
<Calendar className="mr-2 h-4 w-4" />
|
||||
Ver Consultas
|
||||
</Button>
|
||||
</Link>
|
||||
<Link href="##">
|
||||
<Button variant="outline" className="w-full justify-start bg-transparent">
|
||||
<User className="mr-2 h-4 w-4" />
|
||||
Atualizar Dados
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Próximas Consultas</CardTitle>
|
||||
<CardDescription>Suas consultas agendadas</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
|
||||
<div>
|
||||
<p className="font-medium">Dr. Silva</p>
|
||||
<p className="text-sm text-gray-600">Cardiologia</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="font-medium">15 Jan</p>
|
||||
<p className="text-sm text-gray-600">14:30</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between p-3 bg-green-50 rounded-lg">
|
||||
<div>
|
||||
<p className="font-medium">Dra. Santos</p>
|
||||
<p className="text-sm text-gray-600">Dermatologia</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="font-medium">22 Jan</p>
|
||||
<p className="text-sm text-gray-600">10:00</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</SecretaryLayout>
|
||||
)
|
||||
}
|
||||
@ -1,157 +1,11 @@
|
||||
"use client"
|
||||
// Caminho: app/(secretary)/login/page.tsx
|
||||
|
||||
import type React from "react"
|
||||
import { LoginForm } from "@/components/LoginForm";
|
||||
|
||||
import { useState } from "react"
|
||||
import { useRouter } from "next/navigation"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Label } from "@/components/ui/label"
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
|
||||
import { Separator } from "@/components/ui/separator"
|
||||
import { useToast } from "@/hooks/use-toast"
|
||||
import { Eye, EyeOff, Mail, Lock, UserCheck, Loader2 } from "lucide-react"
|
||||
import Link from "next/link"
|
||||
|
||||
interface LoginForm {
|
||||
email: string
|
||||
password: string
|
||||
}
|
||||
|
||||
export default function SecretaryLogin() {
|
||||
const [form, setForm] = useState<LoginForm>({ email: "", password: "" })
|
||||
const [showPassword, setShowPassword] = useState(false)
|
||||
const [isLoading, setIsLoading] = useState(false)
|
||||
const router = useRouter()
|
||||
const { toast } = useToast()
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault()
|
||||
setIsLoading(true)
|
||||
|
||||
// Simular autenticação
|
||||
setTimeout(() => {
|
||||
if (form.email && form.password) {
|
||||
// Simular dados da secretária
|
||||
const secretaryData = {
|
||||
id: "1",
|
||||
name: "Maria Silva",
|
||||
email: form.email,
|
||||
phone: "(11) 99999-9999",
|
||||
cpf: "123.456.789-00",
|
||||
employeeId: "SEC001",
|
||||
department: "Recepção",
|
||||
permissions: ["manage_appointments", "view_patients", "manage_schedule"],
|
||||
}
|
||||
|
||||
localStorage.setItem("secretaryData", JSON.stringify(secretaryData))
|
||||
localStorage.setItem("userType", "secretary")
|
||||
|
||||
toast({
|
||||
title: "Login realizado com sucesso!",
|
||||
description: "Bem-vinda ao sistema, " + secretaryData.name,
|
||||
})
|
||||
|
||||
router.push("/secretary/pacientes") // direciona para a página
|
||||
} else {
|
||||
toast({
|
||||
title: "Erro no login",
|
||||
description: "Por favor, preencha todos os campos.",
|
||||
variant: "destructive",
|
||||
})
|
||||
}
|
||||
setIsLoading(false)
|
||||
}, 1500)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50 flex items-center justify-center p-4">
|
||||
<Card className="w-full max-w-md shadow-xl border-0 bg-white/80 backdrop-blur-sm">
|
||||
<CardHeader className="text-center space-y-4 pb-8">
|
||||
<div className="mx-auto w-16 h-16 bg-blue-100 rounded-full flex items-center justify-center">
|
||||
<UserCheck className="w-8 h-8 text-blue-600" />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-2xl font-bold text-gray-900">Área da Secretária</CardTitle>
|
||||
<CardDescription className="text-gray-600 mt-2">Acesse o sistema de gerenciamento</CardDescription>
|
||||
</div>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-6">
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email" className="text-sm font-medium text-gray-700">
|
||||
E-mail
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
placeholder="seu.email@clinica.com"
|
||||
value={form.email}
|
||||
onChange={(e) => setForm({ ...form, email: e.target.value })}
|
||||
className="pl-10 h-11 border-gray-200 focus:border-blue-500 focus:ring-blue-500"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password" className="text-sm font-medium text-gray-700">
|
||||
Senha
|
||||
</Label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input
|
||||
id="password"
|
||||
type={showPassword ? "text" : "password"}
|
||||
placeholder="Digite sua senha"
|
||||
value={form.password}
|
||||
onChange={(e) => setForm({ ...form, password: e.target.value })}
|
||||
className="pl-10 pr-10 h-11 border-gray-200 focus:border-blue-500 focus:ring-blue-500"
|
||||
required
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
{showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
className="w-full h-11 bg-blue-600 hover:bg-blue-700 text-white font-medium"
|
||||
disabled={isLoading}
|
||||
>
|
||||
{isLoading ? (
|
||||
<>
|
||||
<Loader2 className="w-4 h-4 mr-2 animate-spin" />
|
||||
Entrando...
|
||||
</>
|
||||
) : (
|
||||
"Entrar"
|
||||
)}
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
<div className="relative">
|
||||
<Separator className="my-6" />
|
||||
<span className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white px-3 text-sm text-gray-500">
|
||||
ou
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<Link href="/" className="text-sm text-blue-600 hover:text-blue-700 font-medium hover:underline">
|
||||
Voltar à página inicial
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
export default function SecretaryLoginPage() {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50 flex items-center justify-center p-4">
|
||||
<LoginForm title="Área da Secretária" description="Acesse o sistema de gerenciamento" role="secretary" themeColor="blue" redirectPath="/secretary/pacientes" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -126,12 +126,12 @@ export default function PacientesPage() {
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-xl md:text-2xl font-bold text-gray-900">Pacientes</h1>
|
||||
<p className="text-gray-600 text-sm md:text-base">Gerencie as informações de seus pacientes</p>
|
||||
<h1 className="text-xl md:text-2xl font-bold text-foreground">Pacientes</h1>
|
||||
<p className="text-muted-foreground text-sm md:text-base">Gerencie as informações de seus pacientes</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<Link href="/secretary/pacientes/novo">
|
||||
<Button className="bg-blue-600 hover:bg-blue-700 w-full md:w-auto">
|
||||
<Button className="w-full md:w-auto">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Adicionar
|
||||
</Button>
|
||||
@ -139,10 +139,10 @@ export default function PacientesPage() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row flex-wrap gap-4 bg-white p-4 rounded-lg border border-gray-200">
|
||||
<div className="flex flex-col md:flex-row flex-wrap gap-4 bg-card p-4 rounded-lg border border-border">
|
||||
{/* Convênio */}
|
||||
<div className="flex items-center gap-2 w-full md:w-auto">
|
||||
<span className="text-sm font-medium text-gray-700">Convênio</span>
|
||||
<span className="text-sm font-medium text-foreground">Convênio</span>
|
||||
<Select value={convenioFilter} onValueChange={setConvenioFilter}>
|
||||
<SelectTrigger className="w-full md:w-40">
|
||||
<SelectValue placeholder="Selecione o Convênio" />
|
||||
@ -157,7 +157,7 @@ export default function PacientesPage() {
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2 w-full md:w-auto">
|
||||
<span className="text-sm font-medium text-gray-700">VIP</span>
|
||||
<span className="text-sm font-medium text-foreground">VIP</span>
|
||||
<Select value={vipFilter} onValueChange={setVipFilter}>
|
||||
<SelectTrigger className="w-full md:w-32">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
@ -170,7 +170,7 @@ export default function PacientesPage() {
|
||||
</Select>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 w-full md:w-auto">
|
||||
<span className="text-sm font-medium text-gray-700">Aniversariantes</span>
|
||||
<span className="text-sm font-medium text-foreground">Aniversariantes</span>
|
||||
<Select>
|
||||
<SelectTrigger className="w-full md:w-32">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
@ -184,7 +184,7 @@ export default function PacientesPage() {
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-gray-700">VIP</span>
|
||||
<span className="text-sm font-medium text-foreground">VIP</span>
|
||||
<Select value={vipFilter} onValueChange={setVipFilter}>
|
||||
<SelectTrigger className="w-32">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
@ -198,7 +198,7 @@ export default function PacientesPage() {
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium text-gray-700">Aniversariantes</span>
|
||||
<span className="text-sm font-medium text-foreground">Aniversariantes</span>
|
||||
<Select>
|
||||
<SelectTrigger className="w-32">
|
||||
<SelectValue placeholder="Selecione" />
|
||||
@ -211,7 +211,7 @@ export default function PacientesPage() {
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<Button variant="outline" className="ml-auto bg-transparent w-full md:w-auto">
|
||||
<Button variant="outline" className="ml-auto w-full md:w-auto">
|
||||
<Filter className="w-4 h-4 mr-2" />
|
||||
Filtro avançado
|
||||
</Button>
|
||||
|
||||
241
app/secretary/schedule/page.tsx
Normal file
241
app/secretary/schedule/page.tsx
Normal file
@ -0,0 +1,241 @@
|
||||
"use client";
|
||||
|
||||
import type React from "react";
|
||||
import { useState, useEffect } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import SecretaryLayout from "@/components/secretary-layout";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Calendar, Clock, User } from "lucide-react";
|
||||
import { patientsService } from "@/services/patientsApi.mjs";
|
||||
import { doctorsService } from "@/services/doctorsApi.mjs"; // Importar o serviço de médicos
|
||||
import { toast } from "sonner";
|
||||
|
||||
const APPOINTMENTS_STORAGE_KEY = "clinic-appointments";
|
||||
|
||||
export default function ScheduleAppointment() {
|
||||
const router = useRouter();
|
||||
const [patients, setPatients] = useState<any[]>([]);
|
||||
const [doctors, setDoctors] = useState<any[]>([]); // Estado para armazenar os médicos da API
|
||||
const [selectedPatient, setSelectedPatient] = useState("");
|
||||
const [selectedDoctor, setSelectedDoctor] = useState("");
|
||||
const [selectedDate, setSelectedDate] = useState("");
|
||||
const [selectedTime, setSelectedTime] = useState("");
|
||||
const [notes, setNotes] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
// Carrega pacientes e médicos em paralelo para melhor performance
|
||||
const [patientList, doctorList] = await Promise.all([
|
||||
patientsService.list(),
|
||||
doctorsService.list()
|
||||
]);
|
||||
setPatients(patientList);
|
||||
setDoctors(doctorList);
|
||||
} catch (error) {
|
||||
console.error("Falha ao buscar dados iniciais:", error);
|
||||
toast.error("Não foi possível carregar os dados de pacientes e médicos.");
|
||||
}
|
||||
};
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
const availableTimes = ["08:00", "08:30", "09:00", "09:30", "10:00", "10:30", "14:00", "14:30", "15:00", "15:30", "16:00", "16:30"];
|
||||
|
||||
const handleSubmit = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
const patientDetails = patients.find((p) => String(p.id) === selectedPatient);
|
||||
const doctorDetails = doctors.find((d) => String(d.id) === selectedDoctor);
|
||||
|
||||
if (!patientDetails || !doctorDetails) {
|
||||
toast.error("Erro ao encontrar detalhes do paciente ou médico.");
|
||||
return;
|
||||
}
|
||||
|
||||
const newAppointment = {
|
||||
id: new Date().getTime(), // ID único simples
|
||||
patientName: patientDetails.full_name,
|
||||
doctor: doctorDetails.full_name, // Usar full_name para consistência
|
||||
specialty: doctorDetails.specialty,
|
||||
date: selectedDate,
|
||||
time: selectedTime,
|
||||
status: "agendada",
|
||||
location: doctorDetails.location || "Consultório a definir", // Fallback
|
||||
phone: doctorDetails.phone || "N/A", // Fallback
|
||||
};
|
||||
|
||||
const storedAppointmentsRaw = localStorage.getItem(APPOINTMENTS_STORAGE_KEY);
|
||||
const currentAppointments = storedAppointmentsRaw ? JSON.parse(storedAppointmentsRaw) : [];
|
||||
const updatedAppointments = [...currentAppointments, newAppointment];
|
||||
|
||||
localStorage.setItem(APPOINTMENTS_STORAGE_KEY, JSON.stringify(updatedAppointments));
|
||||
|
||||
toast.success("Consulta agendada com sucesso!");
|
||||
router.push("/secretary/appointments");
|
||||
};
|
||||
|
||||
return (
|
||||
<SecretaryLayout>
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-gray-900">Agendar Consulta</h1>
|
||||
<p className="text-gray-600">Escolha o paciente, médico, data e horário para a consulta</p>
|
||||
</div>
|
||||
|
||||
<div className="grid lg:grid-cols-3 gap-6">
|
||||
<div className="lg:col-span-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Dados da Consulta</CardTitle>
|
||||
<CardDescription>Preencha as informações para agendar a consulta</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="patient">Paciente</Label>
|
||||
<Select value={selectedPatient} onValueChange={setSelectedPatient}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione um paciente" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{patients.length > 0 ? (
|
||||
patients.map((patient) => (
|
||||
<SelectItem key={patient.id} value={String(patient.id)}>
|
||||
{patient.full_name}
|
||||
</SelectItem>
|
||||
))
|
||||
) : (
|
||||
<SelectItem value="loading" disabled>
|
||||
Carregando pacientes...
|
||||
</SelectItem>
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="doctor">Médico</Label>
|
||||
<Select value={selectedDoctor} onValueChange={setSelectedDoctor}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione um médico" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{doctors.length > 0 ? (
|
||||
doctors.map((doctor) => (
|
||||
<SelectItem key={doctor.id} value={String(doctor.id)}>
|
||||
{doctor.full_name} - {doctor.specialty}
|
||||
</SelectItem>
|
||||
))
|
||||
) : (
|
||||
<SelectItem value="loading" disabled>
|
||||
Carregando médicos...
|
||||
</SelectItem>
|
||||
)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="date">Data</Label>
|
||||
<Input id="date" type="date" value={selectedDate} onChange={(e) => setSelectedDate(e.target.value)} min={new Date().toISOString().split("T")[0]} />
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="time">Horário</Label>
|
||||
<Select value={selectedTime} onValueChange={setSelectedTime}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Selecione um horário" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{availableTimes.map((time) => (
|
||||
<SelectItem key={time} value={time}>
|
||||
{time}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="notes">Observações (opcional)</Label>
|
||||
<Textarea id="notes" placeholder="Descreva brevemente o motivo da consulta ou observações importantes" value={notes} onChange={(e) => setNotes(e.target.value)} rows={3} />
|
||||
</div>
|
||||
|
||||
<Button type="submit" className="w-full" disabled={!selectedPatient || !selectedDoctor || !selectedDate || !selectedTime}>
|
||||
Agendar Consulta
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="space-y-6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center">
|
||||
<Calendar className="mr-2 h-5 w-5" />
|
||||
Resumo
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{selectedPatient && (
|
||||
<div className="flex items-start space-x-2">
|
||||
<User className="h-4 w-4 text-gray-500 mt-1 flex-shrink-0" />
|
||||
<div className="text-sm">
|
||||
<span className="font-semibold text-gray-800">Paciente:</span>
|
||||
<p className="text-gray-600">{patients.find((p) => String(p.id) === selectedPatient)?.full_name}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedDoctor && (
|
||||
<div className="flex items-start space-x-2">
|
||||
<User className="h-4 w-4 text-gray-500 mt-1 flex-shrink-0" />
|
||||
<div className="text-sm">
|
||||
<span className="font-semibold text-gray-800">Médico:</span>
|
||||
<p className="text-gray-600">{doctors.find((d) => String(d.id) === selectedDoctor)?.full_name}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedDate && (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Calendar className="h-4 w-4 text-gray-500" />
|
||||
<span className="text-sm">{new Date(selectedDate).toLocaleDateString("pt-BR", { timeZone: "UTC" })}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{selectedTime && (
|
||||
<div className="flex items-center space-x-2">
|
||||
<Clock className="h-4 w-4 text-gray-500" />
|
||||
<span className="text-sm">{selectedTime}</span>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Informações Importantes</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="text-sm text-gray-600 space-y-2">
|
||||
<p>• Chegue com 15 minutos de antecedência</p>
|
||||
<p>• Traga documento com foto</p>
|
||||
<p>• Traga carteirinha do convênio</p>
|
||||
<p>• Traga exames anteriores, se houver</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SecretaryLayout>
|
||||
);
|
||||
}
|
||||
223
components/LoginForm.tsx
Normal file
223
components/LoginForm.tsx
Normal file
@ -0,0 +1,223 @@
|
||||
// Caminho: components/LoginForm.tsx
|
||||
"use client";
|
||||
|
||||
import type React from "react";
|
||||
import { useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import Link from "next/link";
|
||||
import Cookies from "js-cookie";
|
||||
import { jwtDecode } from "jwt-decode";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
// Componentes Shadcn UI
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import { apikey } from "@/services/api.mjs";
|
||||
|
||||
// Hook customizado
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
|
||||
// Ícones
|
||||
import { Eye, EyeOff, Mail, Lock, Loader2, UserCheck, Stethoscope, IdCard, Receipt } from "lucide-react";
|
||||
|
||||
interface LoginFormProps {
|
||||
title: string;
|
||||
description: string;
|
||||
role: "secretary" | "doctor" | "patient" | "admin" | "manager" | "finance";
|
||||
themeColor: "blue" | "green" | "orange";
|
||||
redirectPath: string;
|
||||
children?: React.ReactNode;
|
||||
}
|
||||
|
||||
interface FormState {
|
||||
email: string;
|
||||
password: string;
|
||||
}
|
||||
|
||||
// Supondo que o payload do seu token tenha esta estrutura
|
||||
interface DecodedToken {
|
||||
name: string;
|
||||
email: string;
|
||||
role: string;
|
||||
exp: number;
|
||||
// Adicione outros campos que seu token possa ter
|
||||
}
|
||||
|
||||
const themeClasses = {
|
||||
blue: {
|
||||
iconBg: "bg-blue-100",
|
||||
iconText: "text-blue-600",
|
||||
button: "bg-blue-600 hover:bg-blue-700",
|
||||
link: "text-blue-600 hover:text-blue-700",
|
||||
focus: "focus:border-blue-500 focus:ring-blue-500",
|
||||
},
|
||||
green: {
|
||||
iconBg: "bg-green-100",
|
||||
iconText: "text-green-600",
|
||||
button: "bg-green-600 hover:bg-green-700",
|
||||
link: "text-green-600 hover:text-green-700",
|
||||
focus: "focus:border-green-500 focus:ring-green-500",
|
||||
},
|
||||
orange: {
|
||||
iconBg: "bg-orange-100",
|
||||
iconText: "text-orange-600",
|
||||
button: "bg-orange-600 hover:bg-orange-700",
|
||||
link: "text-orange-600 hover:text-orange-700",
|
||||
focus: "focus:border-orange-500 focus:ring-orange-500",
|
||||
},
|
||||
};
|
||||
|
||||
const roleIcons = {
|
||||
secretary: UserCheck,
|
||||
patient: Stethoscope,
|
||||
doctor: Stethoscope,
|
||||
admin: UserCheck,
|
||||
manager: IdCard,
|
||||
finance: Receipt,
|
||||
};
|
||||
|
||||
export function LoginForm({ title, description, role, themeColor, redirectPath, children }: LoginFormProps) {
|
||||
const [form, setForm] = useState<FormState>({ email: "", password: "" });
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const router = useRouter();
|
||||
const { toast } = useToast();
|
||||
|
||||
const currentTheme = themeClasses[themeColor];
|
||||
const Icon = roleIcons[role];
|
||||
|
||||
// ==================================================================
|
||||
// AJUSTE PRINCIPAL NA LÓGICA DE LOGIN
|
||||
// ==================================================================
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setIsLoading(true);
|
||||
|
||||
const LOGIN_URL = "https://yuanqfswhberkoevtmfr.supabase.co/auth/v1/token?grant_type=password";
|
||||
const API_KEY = apikey;
|
||||
|
||||
if (!API_KEY) {
|
||||
toast({
|
||||
title: "Erro de Configuração",
|
||||
description: "A chave da API não foi encontrada.",
|
||||
});
|
||||
setIsLoading(false);
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(LOGIN_URL, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
apikey: API_KEY,
|
||||
},
|
||||
body: JSON.stringify({ email: form.email, password: form.password }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.error_description || "Credenciais inválidas. Tente novamente.");
|
||||
}
|
||||
|
||||
const accessToken = data.access_token;
|
||||
const user = data.user;
|
||||
|
||||
/* =================== Verificação de Role Desativada Temporariamente =================== */
|
||||
// if (user.user_metadata.role !== role) {
|
||||
// toast({ title: "Acesso Negado", ... });
|
||||
// return;
|
||||
// }
|
||||
/* ===================================================================================== */
|
||||
|
||||
Cookies.set("access_token", accessToken, { expires: 1, secure: true });
|
||||
localStorage.setItem("user_info", JSON.stringify(user));
|
||||
|
||||
toast({
|
||||
title: "Login bem-sucedido!",
|
||||
description: `Bem-vindo(a), ${user.user_metadata.full_name || "usuário"}! Redirecionando...`,
|
||||
});
|
||||
|
||||
router.push(redirectPath);
|
||||
} catch (error) {
|
||||
toast({
|
||||
title: "Erro no Login",
|
||||
description: error instanceof Error ? error.message : "Ocorreu um erro inesperado.",
|
||||
});
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// O JSX do return permanece exatamente o mesmo, preservando seus ajustes.
|
||||
return (
|
||||
<Card className="w-full max-w-md shadow-xl border-0 bg-white/80 backdrop-blur-sm">
|
||||
<CardHeader className="text-center space-y-4 pb-8">
|
||||
<div className={cn("mx-auto w-16 h-16 rounded-full flex items-center justify-center", currentTheme.iconBg)}>
|
||||
<Icon className={cn("w-8 h-8", currentTheme.iconText)} />
|
||||
</div>
|
||||
<div>
|
||||
<CardTitle className="text-2xl font-bold text-gray-900">{title}</CardTitle>
|
||||
<CardDescription className="text-gray-600 mt-2">{description}</CardDescription>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="px-8 pb-8">
|
||||
<form onSubmit={handleSubmit} className="space-y-6">
|
||||
{/* Inputs e Botão */}
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">E-mail</Label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||||
<Input id="email" type="email" placeholder="seu.email@clinica.com" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} className={cn("pl-11 h-12 border-slate-200", currentTheme.focus)} required disabled={isLoading} />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">Senha</Label>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 w-5 h-5" />
|
||||
<Input id="password" type={showPassword ? "text" : "password"} placeholder="Digite sua senha" value={form.password} onChange={(e) => setForm({ ...form, password: e.target.value })} className={cn("pl-11 pr-12 h-12 border-slate-200", currentTheme.focus)} required disabled={isLoading} />
|
||||
<button type="button" onClick={() => setShowPassword(!showPassword)} className="absolute right-2 top-1/2 -translate-y-1/2 h-8 w-8 p-0 text-gray-400 hover:text-gray-600" disabled={isLoading}>
|
||||
{showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<Button type="submit" className={cn("w-full h-12 text-base font-semibold", currentTheme.button)} disabled={isLoading}>
|
||||
{isLoading ? <Loader2 className="w-5 h-5 animate-spin" /> : "Entrar"}
|
||||
</Button>
|
||||
</form>
|
||||
{/* Conteúdo Extra (children) */}
|
||||
<div className="mt-8">
|
||||
{children ? (
|
||||
<div className="space-y-4">
|
||||
<div className="relative">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-slate-200"></div>
|
||||
</div>
|
||||
<div className="relative flex justify-center text-sm">
|
||||
<span className="px-4 bg-white text-slate-500">Novo por aqui?</span>
|
||||
</div>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className="relative">
|
||||
<Separator className="my-6" />
|
||||
<span className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white px-3 text-sm text-gray-500">ou</span>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<Link href="/" className={cn("text-sm font-medium hover:underline", currentTheme.link)}>
|
||||
Voltar à página inicial
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
95
components/accessibility-modal.tsx
Normal file
95
components/accessibility-modal.tsx
Normal file
@ -0,0 +1,95 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogDescription,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
import { useAccessibility } from "@/app/context/AccessibilityContext";
|
||||
import { Sun, Moon, Contrast, Accessibility } from "lucide-react";
|
||||
|
||||
export function AccessibilityModal() {
|
||||
const {
|
||||
theme,
|
||||
setTheme,
|
||||
contrast,
|
||||
setContrast,
|
||||
increaseFontSize,
|
||||
decreaseFontSize,
|
||||
resetFontSize,
|
||||
} = useAccessibility();
|
||||
|
||||
const toggleTheme = () => {
|
||||
setTheme(theme === "light" ? "dark" : "light");
|
||||
};
|
||||
|
||||
const toggleContrast = () => {
|
||||
setContrast(contrast === "normal" ? "high" : "normal");
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button variant="outline" size="icon" className="fixed bottom-4 right-4 z-50 rounded-full h-14 w-14">
|
||||
<Accessibility className="h-6 w-6" />
|
||||
<span className="sr-only">Abrir configurações de acessibilidade</span>
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Configurações de Acessibilidade</DialogTitle>
|
||||
<DialogDescription>
|
||||
Ajuste a aparência do site para a sua preferência. Suas
|
||||
configurações serão salvas para a próxima visita.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<div className="grid gap-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="dark-mode" className="flex items-center gap-2">
|
||||
{theme === "light" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
|
||||
<span>Modo Escuro</span>
|
||||
</Label>
|
||||
<Switch
|
||||
id="dark-mode"
|
||||
checked={theme === "dark"}
|
||||
onCheckedChange={toggleTheme}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Label htmlFor="high-contrast" className="flex items-center gap-2">
|
||||
<Contrast className="h-5 w-5" />
|
||||
<span>Alto Contraste</span>
|
||||
</Label>
|
||||
<Switch
|
||||
id="high-contrast"
|
||||
checked={contrast === "high"}
|
||||
onCheckedChange={toggleContrast}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="flex items-center gap-2">
|
||||
<span className="text-base">Tamanho da Fonte</span>
|
||||
</Label>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button variant="outline" size="sm" onClick={decreaseFontSize} aria-label="Diminuir tamanho da fonte">
|
||||
A-
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={resetFontSize} aria-label="Resetar tamanho da fonte">
|
||||
A
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={increaseFontSize} aria-label="Aumentar tamanho da fonte">
|
||||
A+
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@ -24,11 +24,11 @@ interface DoctorData {
|
||||
permissions: object;
|
||||
}
|
||||
|
||||
interface PatientLayoutProps {
|
||||
interface DoctorLayoutProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function DoctorLayout({ children }: PatientLayoutProps) {
|
||||
export default function DoctorLayout({ children }: DoctorLayoutProps) {
|
||||
const [doctorData, setDoctorData] = useState<DoctorData | null>(null);
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
||||
const [showLogoutDialog, setShowLogoutDialog] = useState(false);
|
||||
@ -48,19 +48,19 @@ export default function DoctorLayout({ children }: PatientLayoutProps) {
|
||||
}, [router]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => setWindowWidth(window.innerWidth);
|
||||
handleResize(); // inicializa com a largura atual
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, []);
|
||||
const handleResize = () => setWindowWidth(window.innerWidth);
|
||||
handleResize(); // inicializa com a largura atual
|
||||
window.addEventListener("resize", handleResize);
|
||||
return () => window.removeEventListener("resize", handleResize);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isMobile) {
|
||||
setSidebarCollapsed(true);
|
||||
} else {
|
||||
setSidebarCollapsed(false);
|
||||
}
|
||||
}, [isMobile]);
|
||||
useEffect(() => {
|
||||
if (isMobile) {
|
||||
setSidebarCollapsed(true);
|
||||
} else {
|
||||
setSidebarCollapsed(false);
|
||||
}
|
||||
}, [isMobile]);
|
||||
|
||||
const handleLogout = () => {
|
||||
setShowLogoutDialog(true);
|
||||
@ -82,7 +82,7 @@ useEffect(() => {
|
||||
|
||||
const menuItems = [
|
||||
{
|
||||
href: "#",
|
||||
href: "/doctor/dashboard",
|
||||
icon: Home,
|
||||
label: "Dashboard",
|
||||
// Botão para o dashboard do médico
|
||||
@ -112,17 +112,17 @@ useEffect(() => {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex">
|
||||
<div className="min-h-screen bg-background flex">
|
||||
{/* Sidebar para desktop */}
|
||||
<div className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-50`}>
|
||||
<div className="p-4 border-b border-gray-200">
|
||||
<div className={`bg-card border-r border-border transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-50`}>
|
||||
<div className="p-4 border-b border-border">
|
||||
<div className="flex items-center justify-between">
|
||||
{!sidebarCollapsed && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
||||
<div className="w-4 h-4 bg-white rounded-sm"></div>
|
||||
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
|
||||
<div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
|
||||
</div>
|
||||
<span className="font-semibold text-gray-900">MidConnecta</span>
|
||||
<span className="font-semibold text-foreground">MidConnecta</span>
|
||||
</div>
|
||||
)}
|
||||
<Button variant="ghost" size="sm" onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className="p-1">
|
||||
@ -138,7 +138,7 @@ useEffect(() => {
|
||||
|
||||
return (
|
||||
<Link key={item.href} href={item.href}>
|
||||
<div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"}`}>
|
||||
<div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"}`}>
|
||||
<Icon className="w-5 h-5 flex-shrink-0" />
|
||||
{!sidebarCollapsed && <span className="font-medium">{item.label}</span>}
|
||||
</div>
|
||||
@ -149,46 +149,62 @@ useEffect(() => {
|
||||
|
||||
// ... (seu código anterior)
|
||||
|
||||
{/* Sidebar para desktop */}
|
||||
<div className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-50`}>
|
||||
<div className="p-4 border-b border-gray-200">
|
||||
<div className="flex items-center justify-between">
|
||||
{!sidebarCollapsed && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
||||
<div className="w-4 h-4 bg-white rounded-sm"></div>
|
||||
{/* Sidebar para desktop */}
|
||||
<div className={`bg-card border-r border-border transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} fixed left-0 top-0 h-screen flex flex-col z-50`}>
|
||||
<div className="p-4 border-b border-border">
|
||||
<div className="flex items-center justify-between">
|
||||
{!sidebarCollapsed && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
|
||||
<div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
|
||||
</div>
|
||||
<span className="font-semibold text-foreground">MedConnect</span>
|
||||
</div>
|
||||
<span className="font-semibold text-gray-900">MedConnect</span>
|
||||
</div>
|
||||
)}
|
||||
<Button variant="ghost" size="sm" onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className="p-1">
|
||||
{sidebarCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
|
||||
</Button>
|
||||
)}
|
||||
<Button variant="ghost" size="sm" onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className="p-1">
|
||||
{sidebarCollapsed ? <ChevronRight className="w-4 h-4" /> : <ChevronLeft className="w-4 h-4" />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav className="flex-1 p-2 overflow-y-auto">
|
||||
{menuItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href));
|
||||
<nav className="flex-1 p-2 overflow-y-auto">
|
||||
{menuItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = pathname === item.href || (item.href !== "/" && pathname.startsWith(item.href));
|
||||
|
||||
return (
|
||||
<Link key={item.href} href={item.href}>
|
||||
<div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"}`}>
|
||||
<Icon className="w-5 h-5 flex-shrink-0" />
|
||||
{!sidebarCollapsed && <span className="font-medium">{item.label}</span>}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
return (
|
||||
<Link key={item.href} href={item.href}>
|
||||
<div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"}`}>
|
||||
<Icon className="w-5 h-5 flex-shrink-0" />
|
||||
{!sidebarCollapsed && <span className="font-medium">{item.label}</span>}
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
<div className="border-t p-4 mt-auto">
|
||||
<div className="flex items-center space-x-3 mb-4">
|
||||
{/* Se a sidebar estiver recolhida, o avatar e o texto do usuário também devem ser condensados ou ocultados */}
|
||||
{!sidebarCollapsed && (
|
||||
<>
|
||||
<Avatar>
|
||||
<div className="border-t p-4 mt-auto">
|
||||
<div className="flex items-center space-x-3 mb-4">
|
||||
{/* Se a sidebar estiver recolhida, o avatar e o texto do usuário também devem ser condensados ou ocultados */}
|
||||
{!sidebarCollapsed && (
|
||||
<>
|
||||
<Avatar>
|
||||
<AvatarImage src="/placeholder.svg?height=40&width=40" />
|
||||
<AvatarFallback>
|
||||
{doctorData.name
|
||||
.split(" ")
|
||||
.map((n) => n[0])
|
||||
.join("")}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-foreground truncate">{doctorData.name}</p>
|
||||
<p className="text-xs text-muted-foreground truncate">{doctorData.specialty}</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{sidebarCollapsed && (
|
||||
<Avatar className="mx-auto"> {/* Centraliza o avatar quando recolhido */}
|
||||
<AvatarImage src="/placeholder.svg?height=40&width=40" />
|
||||
<AvatarFallback>
|
||||
{doctorData.name
|
||||
@ -197,49 +213,33 @@ useEffect(() => {
|
||||
.join("")}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 truncate">{doctorData.name}</p>
|
||||
<p className="text-xs text-gray-500 truncate">{doctorData.specialty}</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
{sidebarCollapsed && (
|
||||
<Avatar className="mx-auto"> {/* Centraliza o avatar quando recolhido */}
|
||||
<AvatarImage src="/placeholder.svg?height=40&width=40" />
|
||||
<AvatarFallback>
|
||||
{doctorData.name
|
||||
.split(" ")
|
||||
.map((n) => n[0])
|
||||
.join("")}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Novo botão de sair, usando a mesma estrutura dos itens de menu */}
|
||||
<div
|
||||
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors text-gray-600 hover:bg-gray-50 cursor-pointer ${sidebarCollapsed ? "justify-center" : ""}`}
|
||||
onClick={handleLogout}
|
||||
>
|
||||
<LogOut className="w-5 h-5 flex-shrink-0" />
|
||||
{!sidebarCollapsed && <span className="font-medium">Sair</span>}
|
||||
{/* Novo botão de sair, usando a mesma estrutura dos itens de menu */}
|
||||
<div
|
||||
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors text-muted-foreground hover:bg-accent hover:text-accent-foreground cursor-pointer ${sidebarCollapsed ? "justify-center" : ""}`}
|
||||
onClick={handleLogout}
|
||||
>
|
||||
<LogOut className="w-5 h-5 flex-shrink-0" />
|
||||
{!sidebarCollapsed && <span className="font-medium">Sair</span>}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{/* Sidebar para mobile (apresentado como um menu overlay) */}
|
||||
{isMobileMenuOpen && (
|
||||
<div className="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden" onClick={toggleMobileMenu}></div>
|
||||
<div className="fixed inset-0 bg-background/50 z-40 md:hidden" onClick={toggleMobileMenu}></div>
|
||||
)}
|
||||
<div className={`bg-white border-r border-gray-200 fixed left-0 top-0 h-screen flex flex-col z-50 transition-transform duration-300 md:hidden ${isMobileMenuOpen ? "translate-x-0 w-64" : "-translate-x-full w-64"}`}>
|
||||
<div className="p-4 border-b border-gray-200 flex items-center justify-between">
|
||||
<div className={`bg-card border-r border-border fixed left-0 top-0 h-screen flex flex-col z-50 transition-transform duration-300 md:hidden ${isMobileMenuOpen ? "translate-x-0 w-64" : "-translate-x-full w-64"}`}>
|
||||
<div className="p-4 border-b border-border flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
||||
<div className="w-4 h-4 bg-white rounded-sm"></div>
|
||||
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
|
||||
<div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
|
||||
</div>
|
||||
<span className="font-semibold text-gray-900">Hospital System</span>
|
||||
<span className="font-semibold text-foreground">Hospital System</span>
|
||||
</div>
|
||||
<Button variant="ghost" size="sm" onClick={toggleMobileMenu} className="p-1">
|
||||
<X className="w-4 h-4" />
|
||||
@ -253,7 +253,7 @@ useEffect(() => {
|
||||
|
||||
return (
|
||||
<Link key={item.href} href={item.href} onClick={toggleMobileMenu}> {/* Fechar menu ao clicar */}
|
||||
<div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"}`}>
|
||||
<div className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"}`}>
|
||||
<Icon className="w-5 h-5 flex-shrink-0" />
|
||||
<span className="font-medium">{item.label}</span>
|
||||
</div>
|
||||
@ -274,8 +274,8 @@ useEffect(() => {
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 truncate">{doctorData.name}</p>
|
||||
<p className="text-xs text-gray-500 truncate">{doctorData.specialty}</p>
|
||||
<p className="text-sm font-medium text-foreground truncate">{doctorData.name}</p>
|
||||
<p className="text-xs text-muted-foreground truncate">{doctorData.specialty}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" className="w-full bg-transparent" onClick={() => { handleLogout(); toggleMobileMenu(); }}> {/* Fechar menu ao deslogar */}
|
||||
@ -287,21 +287,21 @@ useEffect(() => {
|
||||
|
||||
|
||||
{/* Main Content */}
|
||||
<div className={`flex-1 flex flex-col transition-all duration-300 ${sidebarCollapsed ? "ml-16" : "ml-64"}`}>
|
||||
<div className={`flex-1 flex flex-col transition-all duration-300 ${sidebarCollapsed ? "ml-16" : "ml-64"}`}>
|
||||
{/* Header */}
|
||||
<header className="bg-white border-b border-gray-200 px-6 py-4">
|
||||
<header className="bg-card border-b border-border px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4 flex-1">
|
||||
<div className="relative flex-1 max-w-md">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input placeholder="Buscar paciente" className="pl-10 bg-gray-50 border-gray-200" />
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
|
||||
<Input placeholder="Buscar paciente" className="pl-10 bg-background border-border" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<Button variant="ghost" size="sm" className="relative">
|
||||
<Bell className="w-5 h-5" />
|
||||
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">1</Badge>
|
||||
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-destructive text-destructive-foreground text-xs">1</Badge>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -122,21 +122,21 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex">
|
||||
<div className="min-h-screen bg-background flex">
|
||||
{/* Sidebar */}
|
||||
<div
|
||||
className={`bg-white border-r border-gray-200 transition-all duration-300 ${
|
||||
className={`bg-card border-r border-border transition-all duration-300 ${
|
||||
sidebarCollapsed ? "w-16" : "w-64"
|
||||
} fixed left-0 top-0 h-screen flex flex-col z-10`}
|
||||
>
|
||||
<div className="p-4 border-b border-gray-200">
|
||||
<div className="p-4 border-b border-border">
|
||||
<div className="flex items-center justify-between">
|
||||
{!sidebarCollapsed && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
||||
<div className="w-4 h-4 bg-white rounded-sm"></div>
|
||||
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
|
||||
<div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
|
||||
</div>
|
||||
<span className="font-semibold text-gray-900">
|
||||
<span className="font-semibold text-foreground">
|
||||
MidConnecta
|
||||
</span>
|
||||
</div>
|
||||
@ -168,8 +168,8 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
|
||||
<div
|
||||
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
|
||||
isActive
|
||||
? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
|
||||
: "text-gray-600 hover:bg-gray-50"
|
||||
? "bg-accent text-accent-foreground"
|
||||
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-5 h-5 flex-shrink-0" />
|
||||
@ -196,10 +196,10 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
|
||||
</Avatar>
|
||||
{!sidebarCollapsed && (
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 truncate">
|
||||
<p className="text-sm font-medium text-foreground truncate">
|
||||
{financierData.name}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 truncate">
|
||||
<p className="text-xs text-muted-foreground truncate">
|
||||
{financierData.department}
|
||||
</p>
|
||||
</div>
|
||||
@ -233,14 +233,14 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
|
||||
}`}
|
||||
>
|
||||
{/* Header */}
|
||||
<header className="bg-white border-b border-gray-200 px-6 py-4">
|
||||
<header className="bg-card border-b border-border px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4 flex-1 max-w-md">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
|
||||
<Input
|
||||
placeholder="Buscar paciente"
|
||||
className="pl-10 bg-gray-50 border-gray-200"
|
||||
className="pl-10 bg-background border-border"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -248,7 +248,7 @@ export default function FinancierLayout({ children }: PatientLayoutProps) {
|
||||
<div className="flex items-center gap-4">
|
||||
<Button variant="ghost" size="sm" className="relative">
|
||||
<Bell className="w-5 h-5" />
|
||||
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">
|
||||
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-destructive text-destructive-foreground text-xs">
|
||||
1
|
||||
</Badge>
|
||||
</Button>
|
||||
|
||||
@ -111,19 +111,19 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex">
|
||||
<div className="min-h-screen bg-background flex">
|
||||
{/* Sidebar */}
|
||||
<div
|
||||
className={`bg-white border-r border-gray-200 transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} h-screen flex flex-col`}
|
||||
className={`bg-card border-r border-border transition-all duration-300 ${sidebarCollapsed ? "w-16" : "w-64"} h-screen flex flex-col`}
|
||||
>
|
||||
<div className="p-4 border-b border-gray-200">
|
||||
<div className="p-4 border-b border-border">
|
||||
<div className="flex items-center justify-between">
|
||||
{!sidebarCollapsed && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
||||
<div className="w-4 h-4 bg-white rounded-sm"></div>
|
||||
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
|
||||
<div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
|
||||
</div>
|
||||
<span className="font-semibold text-gray-900">MedConnect</span>
|
||||
<span className="font-semibold text-foreground">MedConnect</span>
|
||||
</div>
|
||||
)}
|
||||
<Button variant="ghost" size="sm" onClick={() => setSidebarCollapsed(!sidebarCollapsed)} className="p-1">
|
||||
@ -141,7 +141,7 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
|
||||
<Link key={item.href} href={item.href}>
|
||||
<div
|
||||
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
|
||||
isActive ? "bg-blue-50 text-blue-600 border-r-2 border-blue-600" : "text-gray-600 hover:bg-gray-50"
|
||||
isActive ? "bg-accent text-accent-foreground" : "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-5 h-5 flex-shrink-0" />
|
||||
@ -164,8 +164,8 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 truncate">{patientData.name}</p>
|
||||
<p className="text-xs text-gray-500 truncate">{patientData.email}</p>
|
||||
<p className="text-sm font-medium text-foreground truncate">{patientData.name}</p>
|
||||
<p className="text-xs text-muted-foreground truncate">{patientData.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button variant="outline" size="sm" className="w-full bg-transparent" onClick={handleLogout}>
|
||||
@ -178,19 +178,19 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
|
||||
{/* Main Content */}
|
||||
<div className="flex-1 flex flex-col">
|
||||
{/* Header */}
|
||||
<header className="bg-white border-b border-gray-200 px-6 py-4">
|
||||
<header className="bg-card border-b border-border px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4 flex-1 max-w-md">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Input placeholder="Buscar paciente" className="pl-10 bg-gray-50 border-gray-200" />
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
|
||||
<Input placeholder="Buscar paciente" className="pl-10 bg-background border-border" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<Button variant="ghost" size="sm" className="relative">
|
||||
<Bell className="w-5 h-5" />
|
||||
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">
|
||||
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-destructive text-destructive-foreground text-xs">
|
||||
1
|
||||
</Badge>
|
||||
</Button>
|
||||
|
||||
@ -37,11 +37,11 @@ interface ManagerData {
|
||||
permissions: object;
|
||||
}
|
||||
|
||||
interface PatientLayoutProps {
|
||||
interface ManagerLayoutProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function ManagerLayout({ children }: PatientLayoutProps) {
|
||||
export default function ManagerLayout({ children }: ManagerLayoutProps) {
|
||||
const [managerData, setManagerData] = useState<ManagerData | null>(null);
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
|
||||
const [showLogoutDialog, setShowLogoutDialog] = useState(false);
|
||||
@ -84,10 +84,10 @@ export default function ManagerLayout({ children }: PatientLayoutProps) {
|
||||
const cancelLogout = () => setShowLogoutDialog(false);
|
||||
|
||||
const menuItems = [
|
||||
{ href: "#", icon: Home, label: "Dashboard" },
|
||||
{ href: "/manager/dashboard", icon: Home, label: "Dashboard" },
|
||||
{ href: "#", icon: Calendar, label: "Relatórios gerenciais" },
|
||||
{ href: "#", icon: User, label: "Gestão de Usuários" },
|
||||
{ href: "#", icon: User, label: "Gestão de Médicos" },
|
||||
{ href: "/manager/usuario", icon: User, label: "Gestão de Usuários" },
|
||||
{ href: "/manager/home", icon: User, label: "Gestão de Médicos" },
|
||||
{ href: "#", icon: Calendar, label: "Configurações" },
|
||||
];
|
||||
|
||||
@ -96,20 +96,20 @@ export default function ManagerLayout({ children }: PatientLayoutProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex">
|
||||
<div className="min-h-screen bg-background flex">
|
||||
{/* Sidebar */}
|
||||
<div
|
||||
className={`bg-white border-r border-gray-200 transition-all duration-300 fixed top-0 h-screen flex flex-col z-30
|
||||
className={`bg-card border-r border-border transition-all duration-300 fixed top-0 h-screen flex flex-col z-30
|
||||
${sidebarCollapsed ? "w-16" : "w-64"}`}
|
||||
>
|
||||
{/* Logo + collapse button */}
|
||||
<div className="p-4 border-b border-gray-200 flex items-center justify-between">
|
||||
<div className="p-4 border-b border-border flex items-center justify-between">
|
||||
{!sidebarCollapsed && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
||||
<div className="w-4 h-4 bg-white rounded-sm"></div>
|
||||
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
|
||||
<div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
|
||||
</div>
|
||||
<span className="font-semibold text-gray-900">
|
||||
<span className="font-semibold text-foreground">
|
||||
MidConnecta
|
||||
</span>
|
||||
</div>
|
||||
@ -139,11 +139,10 @@ export default function ManagerLayout({ children }: PatientLayoutProps) {
|
||||
return (
|
||||
<Link key={item.href} href={item.href}>
|
||||
<div
|
||||
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
|
||||
isActive
|
||||
? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
|
||||
: "text-gray-600 hover:bg-gray-50"
|
||||
}`}
|
||||
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive
|
||||
? "bg-accent text-accent-foreground"
|
||||
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-5 h-5 flex-shrink-0" />
|
||||
{!sidebarCollapsed && (
|
||||
@ -169,10 +168,10 @@ export default function ManagerLayout({ children }: PatientLayoutProps) {
|
||||
</Avatar>
|
||||
{!sidebarCollapsed && (
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 truncate">
|
||||
<p className="text-sm font-medium text-foreground truncate">
|
||||
{managerData.name}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 truncate">
|
||||
<p className="text-xs text-muted-foreground truncate">
|
||||
{managerData.department}
|
||||
</p>
|
||||
</div>
|
||||
@ -205,14 +204,14 @@ export default function ManagerLayout({ children }: PatientLayoutProps) {
|
||||
${sidebarCollapsed ? "ml-16" : "ml-64"}`}
|
||||
>
|
||||
{/* Header */}
|
||||
<header className="bg-white border-b border-gray-200 px-4 md:px-6 py-4 flex items-center justify-between">
|
||||
<header className="bg-card border-b border-border px-4 md:px-6 py-4 flex items-center justify-between">
|
||||
{/* Search */}
|
||||
<div className="flex items-center gap-4 flex-1 max-w-md">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
|
||||
<Input
|
||||
placeholder="Buscar paciente"
|
||||
className="pl-10 bg-gray-50 border-gray-200"
|
||||
className="pl-10 bg-background border-border"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -221,7 +220,7 @@ export default function ManagerLayout({ children }: PatientLayoutProps) {
|
||||
<div className="flex items-center gap-4 ml-auto">
|
||||
<Button variant="ghost" size="sm" className="relative">
|
||||
<Bell className="w-5 h-5" />
|
||||
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">
|
||||
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-destructive text-destructive-foreground text-xs">
|
||||
1
|
||||
</Badge>
|
||||
</Button>
|
||||
|
||||
@ -5,6 +5,7 @@ import { useState, useEffect } from "react"
|
||||
import Link from "next/link"
|
||||
import { useRouter, usePathname } from "next/navigation"
|
||||
import { Button } from "@/components/ui/button"
|
||||
import Cookies from "js-cookie"
|
||||
import { Input } from "@/components/ui/input"
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
|
||||
@ -66,14 +67,31 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const data = localStorage.getItem("patientData")
|
||||
if (data) {
|
||||
setPatientData(JSON.parse(data))
|
||||
} else {
|
||||
router.push("/patient/login")
|
||||
}
|
||||
}, [router])
|
||||
// 1. Procuramos pela chave correta: 'user_info'
|
||||
const userInfoString = localStorage.getItem("user_info");
|
||||
// 2. Para mais segurança, verificamos também se o token de acesso existe no cookie
|
||||
const token = Cookies.get("access_token");
|
||||
|
||||
if (userInfoString && token) {
|
||||
const userInfo = JSON.parse(userInfoString);
|
||||
|
||||
// 3. Adaptamos os dados para a estrutura que seu layout espera (PatientData)
|
||||
// Usamos os dados do objeto 'user' que a API do Supabase nos deu
|
||||
setPatientData({
|
||||
name: userInfo.user_metadata?.full_name || "Paciente",
|
||||
email: userInfo.email || "",
|
||||
// Os campos abaixo não vêm do login, então os deixamos vazios por enquanto
|
||||
phone: userInfo.phone || "",
|
||||
cpf: "",
|
||||
birthDate: "",
|
||||
address: "",
|
||||
});
|
||||
} else {
|
||||
// Se as informações do usuário ou o token não forem encontrados, mandamos para o login.
|
||||
router.push("/patient/login");
|
||||
}
|
||||
}, [router]);
|
||||
|
||||
const handleLogout = () => setShowLogoutDialog(true)
|
||||
|
||||
const confirmLogout = () => {
|
||||
@ -97,22 +115,22 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex">
|
||||
<div className="min-h-screen bg-background flex">
|
||||
{/* Sidebar */}
|
||||
<div
|
||||
className={`bg-white border-r border-gray-200 transition-all duration-300 ${
|
||||
className={`bg-card border-r border-border transition-all duration-300 ${
|
||||
sidebarCollapsed ? "w-16" : "w-64"
|
||||
} fixed left-0 top-0 h-screen flex flex-col z-10`}
|
||||
>
|
||||
{/* Header da Sidebar */}
|
||||
<div className="p-4 border-b border-gray-200">
|
||||
<div className="p-4 border-b border-border">
|
||||
<div className="flex items-center justify-between">
|
||||
{!sidebarCollapsed && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
||||
<div className="w-4 h-4 bg-white rounded-sm"></div>
|
||||
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
|
||||
<div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
|
||||
</div>
|
||||
<span className="font-semibold text-gray-900">MedConnect</span>
|
||||
<span className="font-semibold text-foreground">MedConnect</span>
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
@ -143,8 +161,8 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
|
||||
<div
|
||||
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
|
||||
isActive
|
||||
? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
|
||||
: "text-gray-600 hover:bg-gray-50"
|
||||
? "bg-accent text-accent-foreground"
|
||||
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-5 h-5 flex-shrink-0" />
|
||||
@ -171,10 +189,10 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
|
||||
</Avatar>
|
||||
{!sidebarCollapsed && (
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 truncate">
|
||||
<p className="text-sm font-medium text-foreground truncate">
|
||||
{patientData.name}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 truncate">
|
||||
<p className="text-xs text-muted-foreground truncate">
|
||||
{patientData.email}
|
||||
</p>
|
||||
</div>
|
||||
@ -208,14 +226,14 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
|
||||
}`}
|
||||
>
|
||||
{/* Header */}
|
||||
<header className="bg-white border-b border-gray-200 px-6 py-4">
|
||||
<header className="bg-card border-b border-border px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4 flex-1 max-w-md">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
|
||||
<Input
|
||||
placeholder="Buscar paciente"
|
||||
className="pl-10 bg-gray-50 border-gray-200"
|
||||
className="pl-10 bg-background border-border"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -223,7 +241,7 @@ export default function HospitalLayout({ children }: HospitalLayoutProps) {
|
||||
<div className="flex items-center gap-4">
|
||||
<Button variant="ghost" size="sm" className="relative">
|
||||
<Bell className="w-5 h-5" />
|
||||
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">
|
||||
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-destructive text-destructive-foreground text-xs">
|
||||
1
|
||||
</Badge>
|
||||
</Button>
|
||||
|
||||
@ -41,11 +41,11 @@ interface SecretaryData {
|
||||
permissions: object
|
||||
}
|
||||
|
||||
interface PatientLayoutProps {
|
||||
interface SecretaryLayoutProps {
|
||||
children: React.ReactNode
|
||||
}
|
||||
|
||||
export default function SecretaryLayout({ children }: PatientLayoutProps) {
|
||||
export default function SecretaryLayout({ children }: SecretaryLayoutProps) {
|
||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(false)
|
||||
const [showLogoutDialog, setShowLogoutDialog] = useState(false)
|
||||
const router = useRouter()
|
||||
@ -73,9 +73,9 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
|
||||
const cancelLogout = () => setShowLogoutDialog(false)
|
||||
|
||||
const menuItems = [
|
||||
{ href: "##", icon: Home, label: "Dashboard" },
|
||||
{ href: "###", icon: Calendar, label: "Consultas" },
|
||||
{ href: "#", icon: Clock, label: "Agendar Consulta" },
|
||||
{ href: "/secretary/dashboard", icon: Home, label: "Dashboard" },
|
||||
{ href: "/secretary/appointments", icon: Calendar, label: "Consultas" },
|
||||
{ href: "/secretary/schedule", icon: Clock, label: "Agendar Consulta" },
|
||||
{ href: "/secretary/pacientes", icon: User, label: "Pacientes" },
|
||||
]
|
||||
|
||||
@ -91,21 +91,21 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 flex">
|
||||
<div className="min-h-screen bg-background flex">
|
||||
{/* Sidebar */}
|
||||
<div
|
||||
className={`bg-white border-r border-gray-200 transition-all duration-300
|
||||
className={`bg-card border-r border-border transition-all duration-300
|
||||
${sidebarCollapsed ? "w-16" : "w-64"}
|
||||
fixed left-0 top-0 h-screen flex flex-col z-10`}
|
||||
>
|
||||
<div className="p-4 border-b border-gray-200">
|
||||
<div className="p-4 border-b border-border">
|
||||
<div className="flex items-center justify-between">
|
||||
{!sidebarCollapsed && (
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-8 h-8 bg-blue-600 rounded-lg flex items-center justify-center">
|
||||
<div className="w-4 h-4 bg-white rounded-sm"></div>
|
||||
<div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
|
||||
<div className="w-4 h-4 bg-primary-foreground rounded-sm"></div>
|
||||
</div>
|
||||
<span className="font-semibold text-gray-900">MedConnect</span>
|
||||
<span className="font-semibold text-foreground">MedConnect</span>
|
||||
</div>
|
||||
)}
|
||||
<Button
|
||||
@ -132,11 +132,10 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
|
||||
return (
|
||||
<Link key={item.href} href={item.href}>
|
||||
<div
|
||||
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${
|
||||
isActive
|
||||
? "bg-blue-50 text-blue-600 border-r-2 border-blue-600"
|
||||
: "text-gray-600 hover:bg-gray-50"
|
||||
}`}
|
||||
className={`flex items-center gap-3 px-3 py-2 rounded-lg mb-1 transition-colors ${isActive
|
||||
? "bg-accent text-accent-foreground"
|
||||
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
|
||||
}`}
|
||||
>
|
||||
<Icon className="w-5 h-5 flex-shrink-0" />
|
||||
{!sidebarCollapsed && <span className="font-medium">{item.label}</span>}
|
||||
@ -159,10 +158,10 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
|
||||
</Avatar>
|
||||
{!sidebarCollapsed && (
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 truncate">
|
||||
<p className="text-sm font-medium text-foreground truncate">
|
||||
{secretaryData.name}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 truncate">{secretaryData.email}</p>
|
||||
<p className="text-xs text-muted-foreground truncate">{secretaryData.email}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
@ -189,19 +188,18 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
|
||||
|
||||
{/* Main Content */}
|
||||
<div
|
||||
className={`flex-1 flex flex-col transition-all duration-300 ${
|
||||
sidebarCollapsed ? "ml-16" : "ml-64"
|
||||
}`}
|
||||
className={`flex-1 flex flex-col transition-all duration-300 ${sidebarCollapsed ? "ml-16" : "ml-64"
|
||||
}`}
|
||||
>
|
||||
{/* Header */}
|
||||
<header className="bg-white border-b border-gray-200 px-6 py-4">
|
||||
<header className="bg-card border-b border-border px-6 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4 flex-1 max-w-md">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-4 h-4" />
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
|
||||
<Input
|
||||
placeholder="Buscar paciente"
|
||||
className="pl-10 bg-gray-50 border-gray-200"
|
||||
className="pl-10 bg-background border-border"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
@ -216,7 +214,7 @@ export default function SecretaryLayout({ children }: PatientLayoutProps) {
|
||||
*/}
|
||||
<Button variant="ghost" size="sm" className="relative">
|
||||
<Bell className="w-5 h-5" />
|
||||
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-red-500 text-white text-xs">
|
||||
<Badge className="absolute -top-1 -right-1 w-5 h-5 p-0 flex items-center justify-center bg-destructive text-destructive-foreground text-xs">
|
||||
1
|
||||
</Badge>
|
||||
</Button>
|
||||
|
||||
32
components/theme-initializer.tsx
Normal file
32
components/theme-initializer.tsx
Normal file
@ -0,0 +1,32 @@
|
||||
import Script from 'next/script';
|
||||
|
||||
const themeScript = `
|
||||
(function() {
|
||||
try {
|
||||
const theme = localStorage.getItem('accessibility-theme') || 'light';
|
||||
const contrast = localStorage.getItem('accessibility-contrast') || 'normal';
|
||||
const fontSize = localStorage.getItem('accessibility-font-size') || '16';
|
||||
|
||||
const root = document.documentElement;
|
||||
|
||||
// Clear previous theme classes
|
||||
root.classList.remove('light', 'dark', 'high-contrast');
|
||||
|
||||
// Add new theme classes
|
||||
root.classList.add(theme);
|
||||
if (contrast === 'high') {
|
||||
root.classList.add('high-contrast');
|
||||
}
|
||||
|
||||
// Set font size
|
||||
root.style.fontSize = fontSize + 'px';
|
||||
|
||||
} catch (e) {
|
||||
console.error('Failed to apply theme from localStorage', e);
|
||||
}
|
||||
})();
|
||||
`;
|
||||
|
||||
export function ThemeInitializer() {
|
||||
return <Script id="theme-initializer" strategy="beforeInteractive" dangerouslySetInnerHTML={{ __html: themeScript }} />;
|
||||
}
|
||||
@ -5,8 +5,8 @@ import {
|
||||
} from "@/components/ui/dialog";
|
||||
|
||||
interface PatientDetailsModalProps {
|
||||
patient: any;
|
||||
isOpen: boolean;
|
||||
patient: any;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
|
||||
116
package-lock.json
generated
116
package-lock.json
generated
@ -50,8 +50,10 @@
|
||||
"embla-carousel-react": "8.5.1",
|
||||
"geist": "^1.3.1",
|
||||
"input-otp": "1.4.1",
|
||||
"js-cookie": "^3.0.5",
|
||||
"jwt-decode": "^4.0.0",
|
||||
"lucide-react": "^0.454.0",
|
||||
"next": "14.2.16",
|
||||
"next": "^14.2.33",
|
||||
"next-themes": "^0.4.6",
|
||||
"react": "^18",
|
||||
"react-day-picker": "^9.8.0",
|
||||
@ -67,6 +69,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4.1.9",
|
||||
"@types/js-cookie": "^3.0.6",
|
||||
"@types/node": "^22",
|
||||
"@types/react": "^18",
|
||||
"@types/react-dom": "^18",
|
||||
@ -215,15 +218,15 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@next/env": {
|
||||
"version": "14.2.16",
|
||||
"resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.16.tgz",
|
||||
"integrity": "sha512-fLrX5TfJzHCbnZ9YUSnGW63tMV3L4nSfhgOQ0iCcX21Pt+VSTDuaLsSuL8J/2XAiVA5AnzvXDpf6pMs60QxOag==",
|
||||
"version": "14.2.33",
|
||||
"resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.33.tgz",
|
||||
"integrity": "sha512-CgVHNZ1fRIlxkLhIX22flAZI/HmpDaZ8vwyJ/B0SDPTBuLZ1PJ+DWMjCHhqnExfmSQzA/PbZi8OAc7PAq2w9IA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@next/swc-darwin-arm64": {
|
||||
"version": "14.2.16",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.16.tgz",
|
||||
"integrity": "sha512-uFT34QojYkf0+nn6MEZ4gIWQ5aqGF11uIZ1HSxG+cSbj+Mg3+tYm8qXYd3dKN5jqKUm5rBVvf1PBRO/MeQ6rxw==",
|
||||
"version": "14.2.33",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.33.tgz",
|
||||
"integrity": "sha512-HqYnb6pxlsshoSTubdXKu15g3iivcbsMXg4bYpjL2iS/V6aQot+iyF4BUc2qA/J/n55YtvE4PHMKWBKGCF/+wA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -237,9 +240,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-darwin-x64": {
|
||||
"version": "14.2.16",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.16.tgz",
|
||||
"integrity": "sha512-mCecsFkYezem0QiZlg2bau3Xul77VxUD38b/auAjohMA22G9KTJneUYMv78vWoCCFkleFAhY1NIvbyjj1ncG9g==",
|
||||
"version": "14.2.33",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.33.tgz",
|
||||
"integrity": "sha512-8HGBeAE5rX3jzKvF593XTTFg3gxeU4f+UWnswa6JPhzaR6+zblO5+fjltJWIZc4aUalqTclvN2QtTC37LxvZAA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@ -253,9 +256,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-arm64-gnu": {
|
||||
"version": "14.2.16",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.16.tgz",
|
||||
"integrity": "sha512-yhkNA36+ECTC91KSyZcgWgKrYIyDnXZj8PqtJ+c2pMvj45xf7y/HrgI17hLdrcYamLfVt7pBaJUMxADtPaczHA==",
|
||||
"version": "14.2.33",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.33.tgz",
|
||||
"integrity": "sha512-JXMBka6lNNmqbkvcTtaX8Gu5by9547bukHQvPoLe9VRBx1gHwzf5tdt4AaezW85HAB3pikcvyqBToRTDA4DeLw==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -269,9 +272,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-arm64-musl": {
|
||||
"version": "14.2.16",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.16.tgz",
|
||||
"integrity": "sha512-X2YSyu5RMys8R2lA0yLMCOCtqFOoLxrq2YbazFvcPOE4i/isubYjkh+JCpRmqYfEuCVltvlo+oGfj/b5T2pKUA==",
|
||||
"version": "14.2.33",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.33.tgz",
|
||||
"integrity": "sha512-Bm+QulsAItD/x6Ih8wGIMfRJy4G73tu1HJsrccPW6AfqdZd0Sfm5Imhgkgq2+kly065rYMnCOxTBvmvFY1BKfg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -285,9 +288,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-x64-gnu": {
|
||||
"version": "14.2.16",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.16.tgz",
|
||||
"integrity": "sha512-9AGcX7VAkGbc5zTSa+bjQ757tkjr6C/pKS7OK8cX7QEiK6MHIIezBLcQ7gQqbDW2k5yaqba2aDtaBeyyZh1i6Q==",
|
||||
"version": "14.2.33",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.33.tgz",
|
||||
"integrity": "sha512-FnFn+ZBgsVMbGDsTqo8zsnRzydvsGV8vfiWwUo1LD8FTmPTdV+otGSWKc4LJec0oSexFnCYVO4hX8P8qQKaSlg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@ -301,9 +304,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-linux-x64-musl": {
|
||||
"version": "14.2.16",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.16.tgz",
|
||||
"integrity": "sha512-Klgeagrdun4WWDaOizdbtIIm8khUDQJ/5cRzdpXHfkbY91LxBXeejL4kbZBrpR/nmgRrQvmz4l3OtttNVkz2Sg==",
|
||||
"version": "14.2.33",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.33.tgz",
|
||||
"integrity": "sha512-345tsIWMzoXaQndUTDv1qypDRiebFxGYx9pYkhwY4hBRaOLt8UGfiWKr9FSSHs25dFIf8ZqIFaPdy5MljdoawA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@ -317,9 +320,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-win32-arm64-msvc": {
|
||||
"version": "14.2.16",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.16.tgz",
|
||||
"integrity": "sha512-PwW8A1UC1Y0xIm83G3yFGPiOBftJK4zukTmk7DI1CebyMOoaVpd8aSy7K6GhobzhkjYvqS/QmzcfsWG2Dwizdg==",
|
||||
"version": "14.2.33",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.33.tgz",
|
||||
"integrity": "sha512-nscpt0G6UCTkrT2ppnJnFsYbPDQwmum4GNXYTeoTIdsmMydSKFz9Iny2jpaRupTb+Wl298+Rh82WKzt9LCcqSQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
@ -333,9 +336,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-win32-ia32-msvc": {
|
||||
"version": "14.2.16",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.16.tgz",
|
||||
"integrity": "sha512-jhPl3nN0oKEshJBNDAo0etGMzv0j3q3VYorTSFqH1o3rwv1MQRdor27u1zhkgsHPNeY1jxcgyx1ZsCkDD1IHgg==",
|
||||
"version": "14.2.33",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.33.tgz",
|
||||
"integrity": "sha512-pc9LpGNKhJ0dXQhZ5QMmYxtARwwmWLpeocFmVG5Z0DzWq5Uf0izcI8tLc+qOpqxO1PWqZ5A7J1blrUIKrIFc7Q==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
@ -349,9 +352,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@next/swc-win32-x64-msvc": {
|
||||
"version": "14.2.16",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.16.tgz",
|
||||
"integrity": "sha512-OA7NtfxgirCjfqt+02BqxC3MIgM/JaGjw9tOe4fyZgPsqfseNiMPnCRP44Pfs+Gpo9zPN+SXaFsgP6vk8d571A==",
|
||||
"version": "14.2.33",
|
||||
"resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.33.tgz",
|
||||
"integrity": "sha512-nOjfZMy8B94MdisuzZo9/57xuFVLHJaDj5e/xrduJp9CV2/HrfxTRH2fbyLe+K9QT41WBLUd4iXX3R7jBp0EUg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
@ -2463,6 +2466,13 @@
|
||||
"integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/js-cookie": {
|
||||
"version": "3.0.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/js-cookie/-/js-cookie-3.0.6.tgz",
|
||||
"integrity": "sha512-wkw9yd1kEXOPnvEeEV1Go1MmxtBJL0RR79aOTAApecWFVu7w0NNXNqhcWgvw2YgZDYadliXkl14pa3WXw5jlCQ==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@types/linkify-it": {
|
||||
"version": "5.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
|
||||
@ -3080,12 +3090,30 @@
|
||||
"jiti": "lib/jiti-cli.mjs"
|
||||
}
|
||||
},
|
||||
"node_modules/js-cookie": {
|
||||
"version": "3.0.5",
|
||||
"resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz",
|
||||
"integrity": "sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=14"
|
||||
}
|
||||
},
|
||||
"node_modules/js-tokens": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
|
||||
"integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/jwt-decode": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
|
||||
"integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/lightningcss": {
|
||||
"version": "1.30.1",
|
||||
"resolved": "https://registry.npmjs.org/lightningcss/-/lightningcss-1.30.1.tgz",
|
||||
@ -3452,12 +3480,12 @@
|
||||
}
|
||||
},
|
||||
"node_modules/next": {
|
||||
"version": "14.2.16",
|
||||
"resolved": "https://registry.npmjs.org/next/-/next-14.2.16.tgz",
|
||||
"integrity": "sha512-LcO7WnFu6lYSvCzZoo1dB+IO0xXz5uEv52HF1IUN0IqVTUIZGHuuR10I5efiLadGt+4oZqTcNZyVVEem/TM5nA==",
|
||||
"version": "14.2.33",
|
||||
"resolved": "https://registry.npmjs.org/next/-/next-14.2.33.tgz",
|
||||
"integrity": "sha512-GiKHLsD00t4ACm1p00VgrI0rUFAC9cRDGReKyERlM57aeEZkOQGcZTpIbsGn0b562FTPJWmYfKwplfO9EaT6ng==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@next/env": "14.2.16",
|
||||
"@next/env": "14.2.33",
|
||||
"@swc/helpers": "0.5.5",
|
||||
"busboy": "1.6.0",
|
||||
"caniuse-lite": "^1.0.30001579",
|
||||
@ -3472,15 +3500,15 @@
|
||||
"node": ">=18.17.0"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@next/swc-darwin-arm64": "14.2.16",
|
||||
"@next/swc-darwin-x64": "14.2.16",
|
||||
"@next/swc-linux-arm64-gnu": "14.2.16",
|
||||
"@next/swc-linux-arm64-musl": "14.2.16",
|
||||
"@next/swc-linux-x64-gnu": "14.2.16",
|
||||
"@next/swc-linux-x64-musl": "14.2.16",
|
||||
"@next/swc-win32-arm64-msvc": "14.2.16",
|
||||
"@next/swc-win32-ia32-msvc": "14.2.16",
|
||||
"@next/swc-win32-x64-msvc": "14.2.16"
|
||||
"@next/swc-darwin-arm64": "14.2.33",
|
||||
"@next/swc-darwin-x64": "14.2.33",
|
||||
"@next/swc-linux-arm64-gnu": "14.2.33",
|
||||
"@next/swc-linux-arm64-musl": "14.2.33",
|
||||
"@next/swc-linux-x64-gnu": "14.2.33",
|
||||
"@next/swc-linux-x64-musl": "14.2.33",
|
||||
"@next/swc-win32-arm64-msvc": "14.2.33",
|
||||
"@next/swc-win32-ia32-msvc": "14.2.33",
|
||||
"@next/swc-win32-x64-msvc": "14.2.33"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@opentelemetry/api": "^1.1.0",
|
||||
|
||||
@ -51,8 +51,10 @@
|
||||
"embla-carousel-react": "8.5.1",
|
||||
"geist": "^1.3.1",
|
||||
"input-otp": "1.4.1",
|
||||
"js-cookie": "^3.0.5",
|
||||
"jwt-decode": "^4.0.0",
|
||||
"lucide-react": "^0.454.0",
|
||||
"next": "14.2.16",
|
||||
"next": "^14.2.33",
|
||||
"next-themes": "^0.4.6",
|
||||
"react": "^18",
|
||||
"react-day-picker": "^9.8.0",
|
||||
@ -68,6 +70,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4.1.9",
|
||||
"@types/js-cookie": "^3.0.6",
|
||||
"@types/node": "^22",
|
||||
"@types/react": "^18",
|
||||
"@types/react-dom": "^18",
|
||||
|
||||
144
services/api.mjs
144
services/api.mjs
@ -1,90 +1,84 @@
|
||||
|
||||
const BASE_URL = "https://yuanqfswhberkoevtmfr.supabase.co";
|
||||
const API_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl1YW5xZnN3aGJlcmtvZXZ0bWZyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQ5NTQzNjksImV4cCI6MjA3MDUzMDM2OX0.g8Fm4XAvtX46zifBZnYVH4tVuQkqUH6Ia9CXQj4DztQ";
|
||||
const API_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Inl1YW5xZnN3aGJlcmtvZXZ0bWZyIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NTQ5NTQzNjksImV4cCI6MjA3MDUzMDM2OX0.g8Fm4XAvtX46zifBZnYVH4tVuQkqUH6Ia9CXQj4DztQ";
|
||||
export const apikey = API_KEY;
|
||||
var tempToken;
|
||||
|
||||
export async function login() {
|
||||
const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/auth/v1/token?grant_type=password", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Prefer: "return=representation",
|
||||
"apikey": API_KEY, // valor fixo
|
||||
},
|
||||
body: JSON.stringify({ email: "riseup@popcode.com.br", password: "riseup" }),
|
||||
});
|
||||
const response = await fetch("https://yuanqfswhberkoevtmfr.supabase.co/auth/v1/token?grant_type=password", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
Prefer: "return=representation",
|
||||
apikey: API_KEY, // valor fixo
|
||||
},
|
||||
body: JSON.stringify({ email: "riseup@popcode.com.br", password: "riseup" }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
localStorage.setItem("token", data.access_token);
|
||||
|
||||
return data;
|
||||
const data = await response.json();
|
||||
|
||||
localStorage.setItem("token", data.access_token);
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
|
||||
let loginPromise = login();
|
||||
|
||||
|
||||
|
||||
async function request(endpoint, options = {}) {
|
||||
|
||||
if (loginPromise) {
|
||||
try {
|
||||
await loginPromise;
|
||||
} catch (error) {
|
||||
console.error("Falha na autenticação inicial:", error);
|
||||
}
|
||||
|
||||
loginPromise = null;
|
||||
}
|
||||
|
||||
const token = localStorage.getItem("token");
|
||||
|
||||
const headers = {
|
||||
"Content-Type": "application/json",
|
||||
"apikey": API_KEY,
|
||||
...(token ? { "Authorization": `Bearer ${token}` } : {}),
|
||||
...options.headers,
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(`${BASE_URL}${endpoint}`, {
|
||||
...options,
|
||||
headers,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
|
||||
let errorBody = `Status: ${response.status}`;
|
||||
try {
|
||||
const contentType = response.headers.get("content-type");
|
||||
if (contentType && contentType.includes("application/json")) {
|
||||
const jsonError = await response.json();
|
||||
|
||||
errorBody = jsonError.message || JSON.stringify(jsonError);
|
||||
} else {
|
||||
errorBody = await response.text();
|
||||
if (loginPromise) {
|
||||
try {
|
||||
await loginPromise;
|
||||
} catch (error) {
|
||||
console.error("Falha na autenticação inicial:", error);
|
||||
}
|
||||
} catch (e) {
|
||||
|
||||
errorBody = `Status: ${response.status} - Falha ao ler corpo do erro.`;
|
||||
}
|
||||
|
||||
throw new Error(`Erro HTTP: ${response.status} - Detalhes: ${errorBody}`);
|
||||
|
||||
loginPromise = null;
|
||||
}
|
||||
const contentType = response.headers.get("content-type");
|
||||
if (response.status === 204 || (contentType && !contentType.includes("application/json")) || !contentType) {
|
||||
return {};
|
||||
|
||||
const token = localStorage.getItem("token");
|
||||
|
||||
const headers = {
|
||||
"Content-Type": "application/json",
|
||||
apikey: API_KEY,
|
||||
...(token ? { Authorization: `Bearer ${token}` } : {}),
|
||||
...options.headers,
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(`${BASE_URL}${endpoint}`, {
|
||||
...options,
|
||||
headers,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
let errorBody = `Status: ${response.status}`;
|
||||
try {
|
||||
const contentType = response.headers.get("content-type");
|
||||
if (contentType && contentType.includes("application/json")) {
|
||||
const jsonError = await response.json();
|
||||
|
||||
errorBody = jsonError.message || JSON.stringify(jsonError);
|
||||
} else {
|
||||
errorBody = await response.text();
|
||||
}
|
||||
} catch (e) {
|
||||
errorBody = `Status: ${response.status} - Falha ao ler corpo do erro.`;
|
||||
}
|
||||
|
||||
throw new Error(`Erro HTTP: ${response.status} - Detalhes: ${errorBody}`);
|
||||
}
|
||||
const contentType = response.headers.get("content-type");
|
||||
if (response.status === 204 || (contentType && !contentType.includes("application/json")) || !contentType) {
|
||||
return {};
|
||||
}
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error("Erro na requisição:", error);
|
||||
throw error;
|
||||
}
|
||||
return await response.json();
|
||||
} catch (error) {
|
||||
console.error("Erro na requisição:", error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
export const api = {
|
||||
get: (endpoint) => request(endpoint, { method: "GET" }),
|
||||
post: (endpoint, data) => request(endpoint, { method: "POST", body: JSON.stringify(data) }),
|
||||
patch: (endpoint, data) => request(endpoint, { method: "PATCH", body: JSON.stringify(data) }),
|
||||
delete: (endpoint) => request(endpoint, { method: "DELETE" }),
|
||||
};
|
||||
get: (endpoint) => request(endpoint, { method: "GET" }),
|
||||
post: (endpoint, data) => request(endpoint, { method: "POST", body: JSON.stringify(data) }),
|
||||
patch: (endpoint, data) => request(endpoint, { method: "PATCH", body: JSON.stringify(data) }),
|
||||
delete: (endpoint) => request(endpoint, { method: "DELETE" }),
|
||||
};
|
||||
|
||||
@ -1,125 +0,0 @@
|
||||
@import 'tailwindcss';
|
||||
@import 'tw-animate-css';
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
:root {
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.145 0 0);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.145 0 0);
|
||||
--primary: oklch(0.205 0 0);
|
||||
--primary-foreground: oklch(0.985 0 0);
|
||||
--secondary: oklch(0.97 0 0);
|
||||
--secondary-foreground: oklch(0.205 0 0);
|
||||
--muted: oklch(0.97 0 0);
|
||||
--muted-foreground: oklch(0.556 0 0);
|
||||
--accent: oklch(0.97 0 0);
|
||||
--accent-foreground: oklch(0.205 0 0);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--destructive-foreground: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.922 0 0);
|
||||
--input: oklch(0.922 0 0);
|
||||
--ring: oklch(0.708 0 0);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--radius: 0.625rem;
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.145 0 0);
|
||||
--sidebar-primary: oklch(0.205 0 0);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.97 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.205 0 0);
|
||||
--sidebar-border: oklch(0.922 0 0);
|
||||
--sidebar-ring: oklch(0.708 0 0);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.145 0 0);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.145 0 0);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.145 0 0);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.985 0 0);
|
||||
--primary-foreground: oklch(0.205 0 0);
|
||||
--secondary: oklch(0.269 0 0);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.269 0 0);
|
||||
--muted-foreground: oklch(0.708 0 0);
|
||||
--accent: oklch(0.269 0 0);
|
||||
--accent-foreground: oklch(0.985 0 0);
|
||||
--destructive: oklch(0.396 0.141 25.723);
|
||||
--destructive-foreground: oklch(0.637 0.237 25.331);
|
||||
--border: oklch(0.269 0 0);
|
||||
--input: oklch(0.269 0 0);
|
||||
--ring: oklch(0.439 0 0);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.205 0 0);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.985 0 0);
|
||||
--sidebar-accent: oklch(0.269 0 0);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(0.269 0 0);
|
||||
--sidebar-ring: oklch(0.439 0 0);
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-destructive-foreground: var(--destructive-foreground);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user