feat(charts): add persistent workspace chart management
This commit is contained in:
litoral05
@@ -0,0 +1,267 @@
|
||||
import {
|
||||
Monitor,
|
||||
ShieldCheck,
|
||||
Wifi,
|
||||
Wrench,
|
||||
} from "lucide-react";
|
||||
|
||||
type ConsolePageProps = {
|
||||
theme: "dark" | "light";
|
||||
};
|
||||
|
||||
const RADIUS = "rounded-[6px]";
|
||||
|
||||
export function ConsolePage({ theme }: ConsolePageProps) {
|
||||
const isDark = theme === "dark";
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
isDark
|
||||
? "flex h-full flex-col bg-[#07101B] text-white"
|
||||
: "flex h-full flex-col bg-[#F3F6FA] text-[#0F172A]"
|
||||
}
|
||||
>
|
||||
<div className="flex items-center justify-between px-10 pb-6 pt-8">
|
||||
<div>
|
||||
<p
|
||||
className={
|
||||
isDark
|
||||
? "text-xs font-black uppercase tracking-[0.24em] text-[#7F8CA3]"
|
||||
: "text-xs font-black uppercase tracking-[0.24em] text-slate-500"
|
||||
}
|
||||
>
|
||||
Consola remota
|
||||
</p>
|
||||
|
||||
<h1
|
||||
className={
|
||||
isDark
|
||||
? "mt-3 text-[34px] font-black tracking-[-0.04em] text-white"
|
||||
: "mt-3 text-[34px] font-black tracking-[-0.04em] text-[#0F172A]"
|
||||
}
|
||||
>
|
||||
Consola VNC
|
||||
</h1>
|
||||
|
||||
<p
|
||||
className={
|
||||
isDark
|
||||
? "mt-3 max-w-[680px] text-sm leading-7 text-[#A8B3C7]"
|
||||
: "mt-3 max-w-[680px] text-sm leading-7 text-slate-600"
|
||||
}
|
||||
>
|
||||
Aceda remotamente ao controlador da instalação e acompanhe
|
||||
o estado operacional em tempo real.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={
|
||||
isDark
|
||||
? `${RADIUS} border border-[#263247] bg-[#0E1726] px-5 py-3 text-sm font-bold text-[#4FD1C5]`
|
||||
: `${RADIUS} border border-[#D7DEE8] bg-white px-5 py-3 text-sm font-bold text-[#0F766E]`
|
||||
}
|
||||
>
|
||||
Em desenvolvimento
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid flex-1 grid-cols-[380px_minmax(0,1fr)] gap-6 px-10 pb-10">
|
||||
<aside
|
||||
className={
|
||||
isDark
|
||||
? `${RADIUS} border border-[#263247] bg-[#0E1726] p-6`
|
||||
: `${RADIUS} border border-[#D7DEE8] bg-white p-6`
|
||||
}
|
||||
>
|
||||
<div className="space-y-5">
|
||||
<StatusCard
|
||||
theme={theme}
|
||||
icon={<Wifi className="h-5 w-5" />}
|
||||
title="Ligação"
|
||||
value="Desconectado"
|
||||
color="blue"
|
||||
/>
|
||||
|
||||
<StatusCard
|
||||
theme={theme}
|
||||
icon={<ShieldCheck className="h-5 w-5" />}
|
||||
title="Estado"
|
||||
value="Seguro"
|
||||
color="green"
|
||||
/>
|
||||
|
||||
<StatusCard
|
||||
theme={theme}
|
||||
icon={<Wrench className="h-5 w-5" />}
|
||||
title="Controlador"
|
||||
value="Aguardando sessão"
|
||||
color="purple"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={
|
||||
isDark
|
||||
? "mt-8 border-t border-[#263247] pt-6"
|
||||
: "mt-8 border-t border-[#D7DEE8] pt-6"
|
||||
}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
disabled
|
||||
className={
|
||||
isDark
|
||||
? `flex h-[54px] w-full items-center justify-center gap-3 ${RADIUS} border border-[#2A3950] bg-[#111A2B] text-sm font-extrabold text-[#7F8CA3]`
|
||||
: `flex h-[54px] w-full items-center justify-center gap-3 ${RADIUS} border border-[#CBD5E1] bg-[#F8FAFC] text-sm font-extrabold text-slate-500`
|
||||
}
|
||||
>
|
||||
<Monitor className="h-5 w-5" />
|
||||
Iniciar Sessão VNC
|
||||
</button>
|
||||
|
||||
<p
|
||||
className={
|
||||
isDark
|
||||
? "mt-4 text-center text-xs leading-6 text-[#7F8CA3]"
|
||||
: "mt-4 text-center text-xs leading-6 text-slate-500"
|
||||
}
|
||||
>
|
||||
O módulo VNC será integrado futuramente para acesso remoto
|
||||
completo à instalação.
|
||||
</p>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<section
|
||||
className={
|
||||
isDark
|
||||
? `${RADIUS} relative overflow-hidden border border-[#263247] bg-[#0B1220]`
|
||||
: `${RADIUS} relative overflow-hidden border border-[#D7DEE8] bg-white`
|
||||
}
|
||||
>
|
||||
<div
|
||||
className={
|
||||
isDark
|
||||
? "absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(79,209,197,0.10),transparent_60%)]"
|
||||
: "absolute inset-0 bg-[radial-gradient(circle_at_top,rgba(15,118,110,0.08),transparent_60%)]"
|
||||
}
|
||||
/>
|
||||
|
||||
<div className="relative flex h-full flex-col items-center justify-center px-10">
|
||||
<div
|
||||
className={
|
||||
isDark
|
||||
? "grid h-24 w-24 place-items-center rounded-2xl border border-[#2A3950] bg-[#111A2B]"
|
||||
: "grid h-24 w-24 place-items-center rounded-2xl border border-[#CBD5E1] bg-[#F8FAFC]"
|
||||
}
|
||||
>
|
||||
<Monitor
|
||||
className={
|
||||
isDark
|
||||
? "h-12 w-12 text-[#4FD1C5]"
|
||||
: "h-12 w-12 text-[#0F766E]"
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<h2
|
||||
className={
|
||||
isDark
|
||||
? "mt-8 text-2xl font-black tracking-[-0.03em] text-white"
|
||||
: "mt-8 text-2xl font-black tracking-[-0.03em] text-[#0F172A]"
|
||||
}
|
||||
>
|
||||
Consola indisponível
|
||||
</h2>
|
||||
|
||||
<p
|
||||
className={
|
||||
isDark
|
||||
? "mt-4 max-w-[560px] text-center text-sm leading-7 text-[#A8B3C7]"
|
||||
: "mt-4 max-w-[560px] text-center text-sm leading-7 text-slate-600"
|
||||
}
|
||||
>
|
||||
Esta área irá permitir visualização e controlo remoto do
|
||||
sistema através de ligação VNC segura diretamente pela
|
||||
plataforma.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function StatusCard({
|
||||
theme,
|
||||
icon,
|
||||
title,
|
||||
value,
|
||||
color,
|
||||
}: {
|
||||
theme: "dark" | "light";
|
||||
icon: React.ReactNode;
|
||||
title: string;
|
||||
value: string;
|
||||
color: "green" | "blue" | "purple";
|
||||
}) {
|
||||
const isDark = theme === "dark";
|
||||
|
||||
const colors = {
|
||||
green: isDark
|
||||
? "bg-[#13202F] text-[#4FD1C5]"
|
||||
: "bg-[#ECFDF5] text-[#0F766E]",
|
||||
|
||||
blue: isDark
|
||||
? "bg-[#13202F] text-[#7DD3FC]"
|
||||
: "bg-[#EFF6FF] text-[#0369A1]",
|
||||
|
||||
purple: isDark
|
||||
? "bg-[#171B2B] text-[#A5B4FC]"
|
||||
: "bg-[#EEF2FF] text-[#4F46E5]",
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
isDark
|
||||
? `${RADIUS} border border-[#263247] bg-[#111A2B] p-4`
|
||||
: `${RADIUS} border border-[#D7DEE8] bg-[#F8FAFC] p-4`
|
||||
}
|
||||
>
|
||||
<div className="flex items-center gap-4">
|
||||
<div
|
||||
className={`grid h-12 w-12 place-items-center ${RADIUS} ${colors[color]}`}
|
||||
>
|
||||
{icon}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p
|
||||
className={
|
||||
isDark
|
||||
? "text-xs font-bold uppercase tracking-[0.18em] text-[#7F8CA3]"
|
||||
: "text-xs font-bold uppercase tracking-[0.18em] text-slate-500"
|
||||
}
|
||||
>
|
||||
{title}
|
||||
</p>
|
||||
|
||||
<h3
|
||||
className={
|
||||
isDark
|
||||
? "mt-1 text-sm font-black text-white"
|
||||
: "mt-1 text-sm font-black text-[#0F172A]"
|
||||
}
|
||||
>
|
||||
{value}
|
||||
</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default ConsolePage;
|
||||
Reference in New Issue
Block a user