🚀 Initial commit: Versão atual do TrackSteel APP
This commit is contained in:
@@ -0,0 +1,137 @@
|
||||
|
||||
import React from 'react';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { CalendarClock } from '@/components/dashboard/CalendarClock';
|
||||
import { UserInfo } from '@/components/dashboard/UserInfo';
|
||||
import { TaskTypeChart } from '@/components/dashboard/TaskTypeChart';
|
||||
import { TaskStatusChart } from '@/components/dashboard/TaskStatusChart';
|
||||
import { OnlineUsers } from '@/components/dashboard/OnlineUsers';
|
||||
import NotificationsSugestoes from '@/components/dashboard/NotificationsSugestoes';
|
||||
import { BeamsBackground } from '@/components/ui/beams-background';
|
||||
import { Workflow, BarChart3, Settings, FileText, Clock, CheckCircle } from 'lucide-react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
export default function Dashboard() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<BeamsBackground intensity="subtle">
|
||||
<div className="w-full min-h-screen">
|
||||
<div className="container mx-auto p-4 space-y-6">
|
||||
{/* Header com informações do usuário e botão Fluxo do Sistema */}
|
||||
<div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold text-foreground">Dashboard</h1>
|
||||
<p className="text-muted-foreground">Painel de controle e monitoramento avançado</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4">
|
||||
{/* Card de usuários online */}
|
||||
<div className="w-full sm:w-auto">
|
||||
<OnlineUsers />
|
||||
</div>
|
||||
|
||||
{/* Botão Fluxo do Sistema */}
|
||||
<Button
|
||||
onClick={() => navigate('/mapa-interativo')}
|
||||
className="bg-blue-100 hover:bg-blue-200 text-gray-800 dark:bg-blue-600 dark:hover:bg-blue-700 dark:text-white gap-2 group relative"
|
||||
size="lg"
|
||||
>
|
||||
<Workflow className="w-5 h-5" />
|
||||
Fluxo do Sistema
|
||||
|
||||
{/* Tooltip */}
|
||||
<div className="absolute bottom-full mb-2 right-0 px-3 py-2 bg-popover text-popover-foreground text-sm rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 pointer-events-none z-50 w-48 text-left border border-border shadow-md">
|
||||
Use o mapa interativo para
|
||||
<br />
|
||||
entender o fluxo do
|
||||
<br />
|
||||
sistema
|
||||
<div className="absolute top-full right-6 w-0 h-0 border-l-4 border-r-4 border-t-4 border-transparent border-t-popover"></div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Grid principal */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
|
||||
{/* Coluna principal esquerda */}
|
||||
<div className="lg:col-span-3 space-y-6">
|
||||
{/* Cards de acesso rápido */}
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-20 flex flex-col items-center justify-center gap-2 hover:bg-green-50 dark:hover:bg-green-950 border-green-200 dark:border-green-800"
|
||||
onClick={() => navigate('/cadastro-of')}
|
||||
>
|
||||
<Settings className="w-6 h-6 text-green-600" />
|
||||
<span className="text-xs text-center">Ficha Técnica da OF</span>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-20 flex flex-col items-center justify-center gap-2 hover:bg-blue-50 dark:hover:bg-blue-950 border-blue-200 dark:border-blue-800"
|
||||
onClick={() => navigate('/ofs')}
|
||||
>
|
||||
<FileText className="w-6 h-6 text-blue-600" />
|
||||
<span className="text-xs text-center">Painel das OFs</span>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-20 flex flex-col items-center justify-center gap-2 hover:bg-purple-50 dark:hover:bg-purple-950 border-purple-200 dark:border-purple-800"
|
||||
onClick={() => navigate('/painel-industrial')}
|
||||
>
|
||||
<BarChart3 className="w-6 h-6 text-purple-600" />
|
||||
<span className="text-xs text-center">Painel Industrial</span>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-20 flex flex-col items-center justify-center gap-2 hover:bg-orange-50 dark:hover:bg-orange-950 border-orange-200 dark:border-orange-800"
|
||||
onClick={() => navigate('/obra')}
|
||||
>
|
||||
<Settings className="w-6 h-6 text-orange-600" />
|
||||
<span className="text-xs text-center">Painel de Obras</span>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-20 flex flex-col items-center justify-center gap-2 hover:bg-yellow-50 dark:hover:bg-yellow-950 border-yellow-200 dark:border-yellow-800"
|
||||
onClick={() => navigate('/estoque')}
|
||||
>
|
||||
<Settings className="w-6 h-6 text-yellow-600" />
|
||||
<span className="text-xs text-center">Estoque</span>
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="h-20 flex flex-col items-center justify-center gap-2 hover:bg-red-50 dark:hover:bg-red-950 border-red-200 dark:border-red-800"
|
||||
onClick={() => navigate('/expedicao')}
|
||||
>
|
||||
<Settings className="w-6 h-6 text-red-600" />
|
||||
<span className="text-xs text-center">Expedição</span>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Gráficos de tarefas */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<TaskTypeChart />
|
||||
<TaskStatusChart />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sidebar direita */}
|
||||
<div className="space-y-6">
|
||||
<UserInfo />
|
||||
<CalendarClock />
|
||||
<NotificationsSugestoes />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BeamsBackground>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user