301 lines
12 KiB
TypeScript
301 lines
12 KiB
TypeScript
import React from "react";
|
|
import { View } from "../types";
|
|
|
|
interface HomeMenuViewProps {
|
|
onNavigate: (view: View) => void;
|
|
user: { name: string; store: string };
|
|
onLogout: () => void;
|
|
}
|
|
|
|
const HomeMenuView: React.FC<HomeMenuViewProps> = ({
|
|
onNavigate,
|
|
user,
|
|
onLogout,
|
|
}) => {
|
|
const menus = [
|
|
{
|
|
id: View.SALES_DASHBOARD,
|
|
title: "Vendas e Relatórios",
|
|
desc: "Acompanhe metas, pedidos e performance em tempo real.",
|
|
color: "bg-blue-600",
|
|
icon: (
|
|
<svg
|
|
className="w-6 h-6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2.5"
|
|
d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
|
|
/>
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
id: View.PRODUCT_SEARCH,
|
|
title: "Catálogo de Produtos",
|
|
desc: "Pesquise, consulte estoque e inicie novos pedidos.",
|
|
color: "bg-orange-500",
|
|
icon: (
|
|
<svg
|
|
className="w-6 h-6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2.5"
|
|
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
|
/>
|
|
</svg>
|
|
),
|
|
},
|
|
{
|
|
id: View.HOME_MENU,
|
|
title: "Mestre Jurunense",
|
|
desc: "Gestão administrativa e parametrização do sistema.",
|
|
color: "bg-emerald-600",
|
|
icon: (
|
|
<svg
|
|
className="w-6 h-6"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2.5"
|
|
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
|
|
/>
|
|
</svg>
|
|
),
|
|
},
|
|
];
|
|
|
|
const userInitials = user?.name
|
|
? user.name
|
|
.split(".")
|
|
.map((n) => n[0])
|
|
.join("")
|
|
.substring(0, 2)
|
|
.toUpperCase()
|
|
: "U";
|
|
|
|
return (
|
|
<div className="min-h-screen bg-[#f8fafc] p-4 lg:p-6">
|
|
<div className="max-w-7xl mx-auto">
|
|
{/* Top Header Section - Perfil e Logout */}
|
|
<div className="flex flex-col md:flex-row justify-between items-center mb-8 bg-white p-4 rounded-2xl shadow-sm border border-slate-100">
|
|
<div className="flex items-center space-x-3 mb-3 md:mb-0">
|
|
<div className="w-12 h-12 bg-orange-100 rounded-full flex items-center justify-center text-orange-600 font-black text-sm shadow-inner border-2 border-orange-200/50">
|
|
{userInitials}
|
|
</div>
|
|
<div>
|
|
<span className="text-[9px] font-black text-slate-400 uppercase tracking-[0.2em] block mb-0.5">
|
|
Usuário Conectado
|
|
</span>
|
|
<h2 className="text-base font-black text-[#002147] leading-none">
|
|
{user?.name || "Usuário"}
|
|
</h2>
|
|
<span className="text-xs font-bold text-slate-500 mt-0.5 block uppercase tracking-wide">
|
|
Filial: {user?.store || "Loja"}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center space-x-4">
|
|
<div className="h-10 w-[1px] bg-slate-100 hidden md:block mx-4"></div>
|
|
<button
|
|
onClick={onLogout}
|
|
className="flex items-center space-x-2 px-5 py-2.5 bg-slate-50 text-[#002147] rounded-xl font-black text-[10px] uppercase tracking-widest hover:bg-red-50 hover:text-red-500 transition-all group"
|
|
>
|
|
<span>Encerrar Sessão</span>
|
|
<svg
|
|
className="w-5 h-5 group-hover:translate-x-1 transition-transform"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2.5"
|
|
d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-8">
|
|
<h1 className="text-2xl font-black text-[#002147] mb-1 tracking-tight">
|
|
Painel VENDAWEB JURUNENSE
|
|
</h1>
|
|
<p className="text-slate-500 text-sm font-medium">
|
|
Selecione uma das ferramentas abaixo para operar no sistema.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-5">
|
|
{menus.map((menu) => (
|
|
<button
|
|
key={menu.title}
|
|
onClick={() => onNavigate(menu.id)}
|
|
className="group relative bg-white p-6 rounded-2xl shadow-sm hover:shadow-lg hover:shadow-slate-200 transition-all text-left overflow-hidden transform hover:-translate-y-1 border border-slate-50"
|
|
>
|
|
<div className="absolute top-0 right-0 p-6 opacity-5 transition-transform group-hover:scale-110 group-hover:opacity-10">
|
|
{menu.icon}
|
|
</div>
|
|
|
|
<div
|
|
className={`${menu.color} w-12 h-12 rounded-2xl flex items-center justify-center text-white mb-5 shadow-lg transition-transform group-hover:rotate-6`}
|
|
>
|
|
{menu.icon}
|
|
</div>
|
|
|
|
<h3 className="text-lg font-black text-[#002147] mb-2">
|
|
{menu.title}
|
|
</h3>
|
|
<p className="text-slate-500 text-sm leading-relaxed font-medium">
|
|
{menu.desc}
|
|
</p>
|
|
|
|
<div className="mt-8 flex items-center text-orange-600 font-black text-xs uppercase tracking-widest opacity-0 transition-opacity group-hover:opacity-100">
|
|
Acessar agora
|
|
<svg
|
|
className="w-4 h-4 ml-2"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="3"
|
|
d="M14 5l7 7m0 0l-7 7m7-7H3"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Informações Auxiliares */}
|
|
<div className="mt-12 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 gap-5">
|
|
<div className="bg-[#002147] rounded-2xl p-6 text-white flex items-center justify-between overflow-hidden relative group cursor-pointer hover:shadow-lg transition-all border border-[#003366]">
|
|
<div className="relative z-10">
|
|
<span className="text-orange-400 font-black text-[9px] uppercase tracking-[0.3em] mb-2 block">
|
|
Novidade
|
|
</span>
|
|
<h4 className="text-lg font-black mb-1 leading-tight">
|
|
Treinamento Mestre SMART
|
|
</h4>
|
|
<p className="text-blue-200/80 font-medium text-xs">
|
|
Confira os novos módulos de treinamento disponíveis na
|
|
plataforma.
|
|
</p>
|
|
</div>
|
|
<div className="bg-white/10 p-3 rounded-full relative z-10 group-hover:scale-110 transition-transform backdrop-blur-md">
|
|
<svg
|
|
className="w-7 h-7"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2.5"
|
|
d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"
|
|
/>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2.5"
|
|
d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div className="absolute right-[-20px] bottom-[-20px] w-64 h-64 bg-orange-500/10 rounded-full blur-3xl"></div>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-2xl p-6 border border-slate-100 flex items-center justify-between group cursor-pointer hover:shadow-lg transition-all">
|
|
<div>
|
|
<span className="text-emerald-500 font-black text-[9px] uppercase tracking-[0.3em] mb-2 block flex items-center">
|
|
<span className="w-1.5 h-1.5 bg-emerald-500 rounded-full mr-1.5 animate-pulse"></span>
|
|
Obrigatório
|
|
</span>
|
|
<h4 className="text-lg font-black text-[#002147] mb-1 leading-tight">
|
|
Atualização Cadastral
|
|
</h4>
|
|
<p className="text-slate-500 font-medium text-xs">
|
|
Mantenha seus dados e documentos sempre em dia para evitar
|
|
bloqueios.
|
|
</p>
|
|
</div>
|
|
<div className="bg-emerald-50 p-4 rounded-2xl group-hover:bg-emerald-100 transition-colors">
|
|
<svg
|
|
className="w-6 h-6 text-emerald-600"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2.5"
|
|
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
|
|
/>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2.5"
|
|
d="M12 11V9m0 2v2m0-2h-2m2 0h2"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-12 grid grid-cols-1 md:grid-cols-2 xl:grid-cols-1 gap-5">
|
|
<div className="bg-white rounded-2xl p-6 border border-slate-100 flex items-center justify-between md:col-span-2 xl:col-span-1 group cursor-pointer hover:shadow-lg transition-all">
|
|
<div>
|
|
<span className="text-slate-400 font-black text-[9px] uppercase tracking-[0.3em] mb-2 block">
|
|
Suporte
|
|
</span>
|
|
<h4 className="text-lg font-black text-[#002147] mb-1 leading-tight">
|
|
Central de Ajuda
|
|
</h4>
|
|
<p className="text-slate-500 font-medium text-xs">
|
|
Dúvidas técnicas ou problemas com o sistema?
|
|
</p>
|
|
</div>
|
|
<button className="bg-slate-100 group-hover:bg-slate-200 p-4 rounded-2xl transition-colors">
|
|
<svg
|
|
className="w-6 h-6 text-slate-600"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth="2.5"
|
|
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
|
|
/>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HomeMenuView;
|