chore(ops): migrate clube67 to newwhats.clube67.com directory
continuous-integration/webhook Falha no deploy de clube67_newwhats.local (VPS 4)
continuous-integration/webhook Falha no deploy de clube67_newwhats.local (VPS 4)
This commit is contained in:
VPS 4 Deploy Agent
@@ -0,0 +1,207 @@
|
||||
import React from 'react';
|
||||
import { Shield, Activity, Heart, Check, ArrowRight, Star, Clock, Users, Smartphone, Zap } from 'lucide-react';
|
||||
|
||||
export const MedLandingPage: React.FC = () => {
|
||||
return (
|
||||
<div className="min-h-screen bg-[#0f172a] text-white font-sans selection:bg-cyan-500 selection:text-white">
|
||||
{/* Navigation */}
|
||||
<nav className="fixed top-0 w-full z-50 bg-slate-900/50 backdrop-blur-xl border-b border-white/10">
|
||||
<div className="max-w-7xl mx-auto px-6 h-20 flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 bg-gradient-to-tr from-cyan-500 to-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-cyan-500/20">
|
||||
<Activity className="text-white" size={24} />
|
||||
</div>
|
||||
<span className="text-xl font-black tracking-tighter uppercase italic">CRM MÉDICO <span className="text-cyan-400">FIDELIDADE</span></span>
|
||||
</div>
|
||||
<div className="hidden md:flex items-center gap-8 text-sm font-bold uppercase tracking-widest text-slate-400">
|
||||
<a href="#planos" className="hover:text-white transition-colors">Planos</a>
|
||||
<a href="#beneficios" className="hover:text-white transition-colors">Benefícios</a>
|
||||
<button
|
||||
onClick={() => window.location.hash = '/login'}
|
||||
className="hover:text-white transition-colors uppercase"
|
||||
>
|
||||
Acesso Restrito
|
||||
</button>
|
||||
<button
|
||||
onClick={() => window.location.hash = '/'}
|
||||
className="px-6 py-2.5 bg-white text-slate-900 rounded-full hover:bg-cyan-400 transition-all hover:-translate-y-1"
|
||||
>
|
||||
Voltar ao CRM Odonto
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Hero Section */}
|
||||
<section className="relative pt-40 pb-20 overflow-hidden">
|
||||
<div className="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full pointer-events-none">
|
||||
<div className="absolute top-1/4 left-1/4 w-[500px] h-[500px] bg-cyan-500/10 rounded-full blur-[120px] animate-pulse"></div>
|
||||
<div className="absolute bottom-1/4 right-1/4 w-[400px] h-[400px] bg-blue-600/10 rounded-full blur-[120px] animate-pulse delay-700"></div>
|
||||
</div>
|
||||
|
||||
<div className="max-w-7xl mx-auto px-6 relative">
|
||||
<div className="max-w-3xl">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-white/5 border border-white/10 rounded-full text-xs font-black uppercase tracking-widest text-cyan-400 mb-8 animate-in fade-in slide-in-from-bottom-4 duration-700">
|
||||
<Zap size={14} /> Novo: Fidelidade Multimédica
|
||||
</div>
|
||||
<h1 className="text-6xl md:text-8xl font-black tracking-tighter leading-[0.9] text-white mb-8 animate-in fade-in slide-in-from-bottom-6 duration-1000">
|
||||
SAÚDE TOTAL, <br />
|
||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 via-blue-500 to-purple-600">SEM COMPROMISSO.</span>
|
||||
</h1>
|
||||
<p className="text-xl text-slate-400 max-w-xl leading-relaxed mb-12 animate-in fade-in slide-in-from-bottom-8 duration-1000 delay-200">
|
||||
O primeiro plano de fidelidade que integra medicina, odontologia e bem-estar em um único ecossistema. Fidelize sua saúde com tecnologia de ponta.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-4 animate-in fade-in slide-in-from-bottom-10 duration-1000 delay-500">
|
||||
<button className="px-10 py-5 bg-gradient-to-r from-cyan-500 to-blue-600 rounded-2xl font-black uppercase tracking-widest hover:scale-105 transition-all shadow-xl shadow-cyan-500/20 flex items-center gap-3">
|
||||
COMEÇAR AGORA <ArrowRight size={20} />
|
||||
</button>
|
||||
<button className="px-10 py-5 bg-white/5 hover:bg-white/10 border border-white/10 rounded-2xl font-black uppercase tracking-widest transition-all">
|
||||
VER PLANOS
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Plans Section */}
|
||||
<section id="planos" className="py-32 bg-slate-900/40 relative">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<div className="text-center mb-20">
|
||||
<h2 className="text-4xl md:text-5xl font-black tracking-tighter mb-4">ESTRUTURA DE <span className="text-cyan-400">PLANOS</span></h2>
|
||||
<p className="text-slate-400 uppercase tracking-[0.3em] font-bold text-xs">Exclusivo: Combos que não aceitam desmembramento</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-10 max-w-5xl mx-auto">
|
||||
{/* Base Plan */}
|
||||
<div className="group relative bg-white/5 border border-white/10 rounded-[3rem] p-12 hover:bg-white/[0.08] transition-all hover:-translate-y-2">
|
||||
<div className="absolute top-8 right-8 text-slate-700 font-black text-6xl group-hover:text-slate-600 transition-colors">01</div>
|
||||
<div className="mb-10">
|
||||
<span className="px-4 py-1.5 bg-cyan-500/20 text-cyan-400 text-[10px] font-black uppercase tracking-widest rounded-full">LINHA BASE (OBRIGATÓRIO)</span>
|
||||
<h3 className="text-4xl font-black tracking-tighter mt-4">MÉDICO + <br />ODONTO</h3>
|
||||
</div>
|
||||
<ul className="space-y-4 mb-12">
|
||||
{[
|
||||
'Consultas Médicas ilimitadas',
|
||||
'Limpeza e Prevenção Dental',
|
||||
'Urgências 24h',
|
||||
'Rede Credenciada Platinum',
|
||||
'Descontos em Medicamentos'
|
||||
].map((item, i) => (
|
||||
<li key={i} className="flex items-center gap-3 text-slate-300 font-medium">
|
||||
<div className="w-5 h-5 rounded-full bg-cyan-500/20 flex items-center justify-center text-cyan-400">
|
||||
<Check size={12} strokeWidth={4} />
|
||||
</div>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="flex items-end gap-2 mb-8">
|
||||
<span className="text-5xl font-black leading-none">R$ 149</span>
|
||||
<span className="text-slate-500 font-bold uppercase text-[10px] tracking-widest mb-1">/mês individual</span>
|
||||
</div>
|
||||
<button className="w-full py-5 bg-white text-slate-900 rounded-2xl font-black uppercase tracking-widest hover:bg-cyan-400 transition-all">
|
||||
SELECIONAR PLANO
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Premium Plan */}
|
||||
<div className="group relative bg-white/5 border-2 border-cyan-500/50 rounded-[3rem] p-12 overflow-hidden hover:bg-white/[0.08] transition-all hover:-translate-y-2">
|
||||
<div className="absolute -top-10 -right-10 w-40 h-40 bg-cyan-500/20 blur-[60px]"></div>
|
||||
<div className="absolute top-8 right-8 text-cyan-900/30 font-black text-6xl group-hover:text-cyan-900/50 transition-colors">02</div>
|
||||
|
||||
<div className="mb-10">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="px-4 py-1.5 bg-gradient-to-r from-amber-400 to-orange-500 text-black text-[10px] font-black uppercase tracking-widest rounded-full">MAIS POPULAR</span>
|
||||
</div>
|
||||
<span className="px-4 py-1.5 bg-cyan-500/20 text-cyan-400 text-[10px] font-black uppercase tracking-widest rounded-full">LINHA PREMIUM</span>
|
||||
<h3 className="text-4xl font-black tracking-tighter mt-4">MÉDICO + ODONTO <br /><span className="text-cyan-400">+ PSICOLOGIA</span></h3>
|
||||
</div>
|
||||
<ul className="space-y-4 mb-12">
|
||||
{[
|
||||
'Tudo da Linha Base',
|
||||
'Suporte Psicológico 24h',
|
||||
'Sessões de Terapia Mensais',
|
||||
'Check-up Executivo Anual',
|
||||
'Prioridade na Agenda (VIP)'
|
||||
].map((item, i) => (
|
||||
<li key={i} className="flex items-center gap-3 text-slate-300 font-medium">
|
||||
<div className="w-5 h-5 rounded-full bg-cyan-500 flex items-center justify-center text-white">
|
||||
<Check size={12} strokeWidth={4} />
|
||||
</div>
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<div className="flex items-end gap-2 mb-8">
|
||||
<span className="text-5xl font-black leading-none">R$ 249</span>
|
||||
<span className="text-slate-500 font-bold uppercase text-[10px] tracking-widest mb-1">/mês individual</span>
|
||||
</div>
|
||||
<button className="w-full py-5 bg-gradient-to-r from-cyan-500 to-blue-600 text-white rounded-2xl font-black uppercase tracking-widest hover:scale-[1.02] transition-all shadow-lg shadow-cyan-500/20">
|
||||
ASSINAR PREMIUM
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features (CRM) */}
|
||||
<section id="beneficios" className="py-32 px-6">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className="grid md:grid-cols-4 gap-8">
|
||||
{[
|
||||
{ icon: Users, title: 'TITULAR E DEP.', desc: 'Gestão completa familiar com carteirinha individual digital.' },
|
||||
{ icon: Shield, title: 'ESTABILIDADE', desc: 'Previsibilidade total para o médico e segurança para o paciente.' },
|
||||
{ icon: Smartphone, title: 'WALLET DIGITAL', desc: 'QR Code e histórico médico sempre no seu bolso.' },
|
||||
{ icon: Zap, title: 'SEM GLOSA', desc: 'Processamento automático e repasse médico instantâneo.' }
|
||||
].map((feat, i) => (
|
||||
<div key={i} className="p-8 bg-white/2 hover:bg-white/5 border border-white/5 rounded-3xl transition-all">
|
||||
<feat.icon className="text-cyan-400 mb-6" size={32} />
|
||||
<h4 className="text-lg font-black tracking-widest uppercase mb-4">{feat.title}</h4>
|
||||
<p className="text-slate-400 text-sm leading-relaxed">{feat.desc}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Footer */}
|
||||
<footer className="py-20 border-t border-white/5 bg-slate-950">
|
||||
<div className="max-w-7xl mx-auto px-6 flex flex-col md:flex-row justify-between items-center gap-10">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-8 h-8 bg-cyan-500 rounded-lg flex items-center justify-center">
|
||||
<Activity className="text-white" size={18} />
|
||||
</div>
|
||||
<span className="font-black uppercase tracking-tighter">CRM MÉDICO</span>
|
||||
</div>
|
||||
<div className="text-slate-500 text-[10px] font-black uppercase tracking-[0.4em]">
|
||||
© 2026 SCOREODONTO HYBRID MEDICAL ENGINE. ALL RIGHTS RESERVED.
|
||||
</div>
|
||||
<div className="flex gap-6">
|
||||
<button
|
||||
onClick={() => window.location.hash = '/'}
|
||||
className="text-slate-400 hover:text-white transition-colors uppercase font-bold text-xs tracking-widest"
|
||||
>
|
||||
Sair para Odonto
|
||||
</button>
|
||||
<button
|
||||
onClick={() => window.location.hash = '/login'}
|
||||
className="text-slate-400 hover:text-white transition-colors uppercase font-bold text-xs tracking-widest"
|
||||
>
|
||||
Painel Admin
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<style>{`
|
||||
@keyframes animate-in {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
.animate-in {
|
||||
animation: animate-in 0.8s ease-out forwards;
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,124 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
Users, Calendar, DollarSign, Activity,
|
||||
ArrowUpRight, ArrowDownRight, Zap, Target,
|
||||
TrendingUp, Clock, AlertCircle
|
||||
} from 'lucide-react';
|
||||
|
||||
export const MedDashboard: React.FC = () => {
|
||||
const stats = [
|
||||
{ label: 'Pacientes Ativos', value: '1.284', change: '+12%', positive: true, icon: Users, color: 'cyan' },
|
||||
{ label: 'Consultas Hoje', value: '24', change: '+4', positive: true, icon: Calendar, color: 'blue' },
|
||||
{ label: 'Receita Est. (MRR)', value: 'R$ 84.200', change: '+8%', positive: true, icon: DollarSign, color: 'emerald' },
|
||||
{ label: 'Taxa de Fidelidade', value: '94.2%', change: '-2%', positive: false, icon: Activity, color: 'purple' },
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="space-y-10 animate-in fade-in duration-700">
|
||||
{/* Header */}
|
||||
<div>
|
||||
<h1 className="text-4xl font-black tracking-tighter text-white mb-2 uppercase italic">Painel <span className="text-cyan-400">Estratégico</span></h1>
|
||||
<p className="text-slate-500 font-bold uppercase tracking-widest text-xs">Visão geral do ecossistema médico e fidelidade</p>
|
||||
</div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{stats.map((stat, i) => {
|
||||
const Icon = stat.icon;
|
||||
return (
|
||||
<div key={i} className="bg-white/5 border border-white/10 p-8 rounded-[2rem] hover:bg-white/[0.08] transition-all group">
|
||||
<div className="flex justify-between items-start mb-6">
|
||||
<div className={`p-4 rounded-2xl bg-${stat.color}-500/10 text-${stat.color}-400 group-hover:scale-110 transition-transform`}>
|
||||
<Icon size={24} />
|
||||
</div>
|
||||
<div className={`flex items-center gap-1 text-[10px] font-black uppercase tracking-widest ${stat.positive ? 'text-emerald-400' : 'text-rose-400'}`}>
|
||||
{stat.positive ? <ArrowUpRight size={14} /> : <ArrowDownRight size={14} />}
|
||||
{stat.change}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<span className="text-slate-500 text-[10px] font-black uppercase tracking-[0.2em]">{stat.label}</span>
|
||||
<div className="text-3xl font-black text-white tracking-tighter">{stat.value}</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Main Content Grid */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
|
||||
{/* Upcoming Appointments */}
|
||||
<div className="lg:col-span-2 bg-white/5 border border-white/10 rounded-[2.5rem] overflow-hidden">
|
||||
<div className="p-8 border-b border-white/5 flex justify-between items-center">
|
||||
<h3 className="text-sm font-black uppercase tracking-[0.3em] text-white">Próximos Atendimentos</h3>
|
||||
<button className="text-[10px] font-black text-cyan-400 hover:text-cyan-300 uppercase tracking-widest transition-colors">Ver Agenda Completa</button>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
{[
|
||||
{ name: 'Ricardo Santos', time: '09:00', type: 'Consulta Geral', plan: 'Premium' },
|
||||
{ name: 'Ana Oliveira', time: '10:30', type: 'Retorno', plan: 'Base' },
|
||||
{ name: 'Marcos Viana', time: '13:00', type: 'Primeira Vez', plan: 'Premium' },
|
||||
{ name: 'Juliana Costa', time: '15:15', type: 'Check-up', plan: 'Base' },
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex items-center justify-between p-4 hover:bg-white/5 rounded-2xl transition-all cursor-pointer group">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="w-12 h-12 rounded-xl bg-slate-800 flex flex-col items-center justify-center border border-white/5">
|
||||
<span className="text-[10px] font-black text-slate-500 leading-none">HRS</span>
|
||||
<span className="text-sm font-black text-white">{item.time}</span>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-sm font-black text-white uppercase tracking-tight group-hover:text-cyan-400 transition-colors">{item.name}</div>
|
||||
<div className="text-[10px] text-slate-500 font-bold uppercase tracking-widest">{item.type}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<span className={`px-3 py-1 rounded-full text-[9px] font-black uppercase tracking-widest ${item.plan === 'Premium' ? 'bg-cyan-500/10 text-cyan-400' : 'bg-slate-800 text-slate-400'
|
||||
}`}>
|
||||
Plano {item.plan}
|
||||
</span>
|
||||
<button className="p-2 text-slate-600 hover:text-white transition-colors">
|
||||
<ArrowUpRight size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Intelligent Insights */}
|
||||
<div className="bg-gradient-to-b from-cyan-600/20 to-transparent border border-cyan-500/20 rounded-[2.5rem] p-8 relative overflow-hidden">
|
||||
<div className="absolute top-0 right-0 w-32 h-32 bg-cyan-500/20 blur-[60px]"></div>
|
||||
<div className="relative">
|
||||
<div className="w-12 h-12 bg-cyan-500 rounded-2xl flex items-center justify-center text-white mb-8 shadow-lg shadow-cyan-500/20">
|
||||
<Zap size={24} />
|
||||
</div>
|
||||
<h3 className="text-xl font-black text-white tracking-tighter mb-4 italic uppercase">Inteligência <br />Médica</h3>
|
||||
<div className="space-y-6">
|
||||
<div className="p-5 bg-black/20 rounded-2xl border border-white/5">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<AlertCircle size={14} className="text-amber-400" />
|
||||
<span className="text-[10px] font-black text-amber-400 uppercase tracking-widest">Alerta de Agenda</span>
|
||||
</div>
|
||||
<p className="text-xs text-slate-300 leading-relaxed font-medium">3 pacientes do Plano Base estão aptos para upgrade para o Premium este mês.</p>
|
||||
</div>
|
||||
<div className="p-5 bg-black/20 rounded-2xl border border-white/5">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<TrendingUp size={14} className="text-emerald-400" />
|
||||
<span className="text-[10px] font-black text-emerald-400 uppercase tracking-widest">Performance</span>
|
||||
</div>
|
||||
<p className="text-xs text-slate-300 leading-relaxed font-medium">Sua produtividade aumentou 15% após a integração com o módulo Dental.</p>
|
||||
</div>
|
||||
</div>
|
||||
<button className="w-full mt-10 py-5 bg-white text-slate-900 rounded-2xl font-black uppercase tracking-widest hover:bg-cyan-400 transition-all flex items-center justify-center gap-3">
|
||||
Ver Insights <ArrowRight size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const ArrowRight: React.FC<{ size: number }> = ({ size }) => (
|
||||
<svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14m-7-7 7 7-7 7" /></svg>
|
||||
);
|
||||
@@ -0,0 +1,87 @@
|
||||
import React, { useState } from 'react';
|
||||
import { MedSidebar } from './MedSidebar.tsx';
|
||||
import { Bell, Search, Settings, HelpCircle } from 'lucide-react';
|
||||
|
||||
interface MedLayoutProps {
|
||||
children: React.ReactNode;
|
||||
currentView: string;
|
||||
onNavigate: (view: any) => void;
|
||||
}
|
||||
|
||||
export const MedLayout: React.FC<MedLayoutProps> = ({ children, currentView, onNavigate }) => {
|
||||
return (
|
||||
<div className="flex min-h-screen bg-[#020617] text-slate-200 overflow-hidden font-sans">
|
||||
{/* Sidebar */}
|
||||
<MedSidebar activeTab={currentView} setActiveTab={onNavigate} />
|
||||
|
||||
{/* Main Content Area */}
|
||||
<div className="flex-1 ml-72 flex flex-col h-screen overflow-hidden">
|
||||
{/* Premium Top Bar */}
|
||||
<header className="h-24 px-10 flex items-center justify-between border-b border-white/5 bg-[#020617]/50 backdrop-blur-xl sticky top-0 z-40">
|
||||
<div className="flex items-center gap-6 flex-1 max-w-xl">
|
||||
<div className="relative group w-full">
|
||||
<Search className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-500 group-focus-within:text-cyan-400 transition-colors" size={18} />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="BUSCAR PACIENTES, AGENDAMENTOS OU GUIAS..."
|
||||
className="w-full bg-white/5 border border-white/10 rounded-2xl py-3.5 pl-12 pr-6 text-xs font-bold uppercase tracking-widest focus:outline-none focus:border-cyan-500/50 focus:bg-white/[0.08] transition-all"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-6">
|
||||
<div className="flex items-center gap-2">
|
||||
{[
|
||||
{ icon: Bell, alert: true },
|
||||
{ icon: HelpCircle, alert: false },
|
||||
{ icon: Settings, alert: false }
|
||||
].map((item, i) => (
|
||||
<button key={i} className="w-12 h-12 rounded-2xl bg-white/5 border border-white/10 flex items-center justify-center hover:bg-white/10 transition-all relative">
|
||||
<item.icon size={20} className="text-slate-400" />
|
||||
{item.alert && <div className="absolute top-3 right-3 w-2.5 h-2.5 bg-cyan-500 border-2 border-[#020617] rounded-full"></div>}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="h-10 w-px bg-white/10 mx-2"></div>
|
||||
|
||||
<div className="flex items-center gap-3 pl-2">
|
||||
<div className="text-right">
|
||||
<span className="text-[10px] font-black text-cyan-500 block leading-none uppercase tracking-widest">Acesso Premium</span>
|
||||
<span className="text-xs font-black text-white uppercase tracking-tighter">Portal Médico Cassems</span>
|
||||
</div>
|
||||
<div className="w-12 h-12 rounded-full bg-gradient-to-tr from-cyan-500 to-blue-600 p-[2px] shadow-lg shadow-cyan-500/20">
|
||||
<div className="w-full h-full rounded-full bg-slate-900 flex items-center justify-center text-xs font-black text-white">
|
||||
MED
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Dashboard/View Container */}
|
||||
<main className="flex-1 overflow-y-auto p-10 custom-scrollbar">
|
||||
<div className="max-w-7xl mx-auto pb-20">
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<style>{`
|
||||
.custom-scrollbar::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 10px;
|
||||
}
|
||||
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -0,0 +1,106 @@
|
||||
import React from 'react';
|
||||
import {
|
||||
LayoutDashboard, Users, Calendar, ClipboardList,
|
||||
Activity, Shield, DollarSign, LogOut, Settings,
|
||||
ChevronRight, Zap, Heart, Bell
|
||||
} from 'lucide-react';
|
||||
|
||||
interface MedSidebarProps {
|
||||
activeTab: string;
|
||||
setActiveTab: (tab: string) => void;
|
||||
}
|
||||
|
||||
export const MedSidebar: React.FC<MedSidebarProps> = ({ activeTab, setActiveTab }) => {
|
||||
const menuItems = [
|
||||
{ id: 'med-dashboard', label: 'Painel Geral', icon: LayoutDashboard },
|
||||
{ id: 'med-pacientes', label: 'Pacientes', icon: Users },
|
||||
{ id: 'med-agenda', label: 'Agenda Médica', icon: Calendar },
|
||||
{ id: 'med-prontuarios', label: 'Prontuários', icon: ClipboardList },
|
||||
{ id: 'med-fidelidade', label: 'Planos Fidelidade', icon: Shield },
|
||||
{ id: 'med-financeiro', label: 'Financeiro / MRR', icon: DollarSign },
|
||||
{ id: 'medical-repasse', label: 'Repasse Médico', icon: Zap },
|
||||
];
|
||||
|
||||
const handleLogout = () => {
|
||||
if (window.confirm('Deseja realmente sair do portal médico?')) {
|
||||
window.location.hash = '/med/landingpage';
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-72 bg-[#0f172a] h-screen flex flex-col border-r border-white/5 fixed left-0 top-0 z-50 overflow-hidden">
|
||||
{/* Logo Section */}
|
||||
<div className="p-8">
|
||||
<div className="flex items-center gap-3 group cursor-pointer" onClick={() => setActiveTab('med-dashboard')}>
|
||||
<div className="w-10 h-10 bg-gradient-to-tr from-cyan-500 to-blue-600 rounded-xl flex items-center justify-center shadow-lg shadow-cyan-500/20 group-hover:scale-110 transition-transform">
|
||||
<Activity className="text-white" size={24} />
|
||||
</div>
|
||||
<div>
|
||||
<span className="text-lg font-black tracking-tighter text-white block leading-none italic">CRM <span className="text-cyan-400">MÉDICO</span></span>
|
||||
<span className="text-[10px] text-slate-500 font-bold uppercase tracking-widest">Premium Engine</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 px-4 space-y-2 overflow-y-auto py-4">
|
||||
<div className="px-4 mb-4">
|
||||
<span className="text-[10px] text-slate-600 font-black uppercase tracking-[0.3em]">Navegação Principal</span>
|
||||
</div>
|
||||
{menuItems.map((item) => {
|
||||
const Icon = item.icon;
|
||||
const isActive = activeTab === item.id;
|
||||
return (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => setActiveTab(item.id)}
|
||||
className={`w-full flex items-center justify-between px-4 py-3.5 rounded-xl transition-all group ${isActive
|
||||
? 'bg-gradient-to-r from-cyan-500/10 to-transparent border-l-4 border-cyan-500 text-white'
|
||||
: 'text-slate-400 hover:text-white hover:bg-white/5'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-center gap-3">
|
||||
<Icon size={20} className={isActive ? 'text-cyan-400' : 'group-hover:text-cyan-400 transition-colors'} />
|
||||
<span className="text-xs font-bold uppercase tracking-wider">{item.label}</span>
|
||||
</div>
|
||||
{isActive && <ChevronRight size={14} className="text-cyan-500" />}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
|
||||
{/* Bottom Section / User Profile */}
|
||||
<div className="p-6 bg-slate-900/40 border-t border-white/5">
|
||||
<div className="flex items-center gap-4 mb-6 px-2">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-slate-700 to-slate-800 border border-white/10 flex items-center justify-center text-cyan-400 font-black text-xs">
|
||||
DR
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<span className="text-xs font-black text-white block truncate uppercase tracking-tighter">Dr. Profissional</span>
|
||||
<span className="text-[10px] text-cyan-500/80 font-bold uppercase tracking-widest">Médico Diretor</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<button className="w-full flex items-center gap-3 px-4 py-3 text-slate-400 hover:text-white hover:bg-white/5 rounded-xl transition-all text-xs font-bold uppercase tracking-widest">
|
||||
<Settings size={18} />
|
||||
Configurações
|
||||
</button>
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="w-full flex items-center gap-3 px-4 py-3 text-rose-500 hover:bg-rose-500/10 rounded-xl transition-all text-xs font-bold uppercase tracking-widest"
|
||||
>
|
||||
<LogOut size={18} />
|
||||
Sair do Portal
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Status Indicator */}
|
||||
<div className="px-8 py-4 bg-slate-950/50 flex items-center gap-3">
|
||||
<div className="w-2 h-2 bg-cyan-500 rounded-full animate-pulse shadow-[0_0_8px_rgba(34,211,238,0.5)]"></div>
|
||||
<span className="text-[10px] text-slate-500 font-black uppercase tracking-[0.2em]">Sincronizado</span>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user