268 lines
14 KiB
TypeScript
268 lines
14 KiB
TypeScript
import { Head, Link } from '@inertiajs/react';
|
|
import {
|
|
ArrowRight,
|
|
ClipboardList,
|
|
FileCheck2,
|
|
PackageCheck,
|
|
ShieldCheck,
|
|
Users,
|
|
Warehouse,
|
|
} from 'lucide-react';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
const areas = [
|
|
{
|
|
title: 'Pedidos e aprovações',
|
|
description:
|
|
'Registe necessidades e acompanhe as decisões de cada departamento.',
|
|
icon: ClipboardList,
|
|
href: '/consulta/requisicoes',
|
|
label: 'Explorar requisições',
|
|
step: '01',
|
|
},
|
|
{
|
|
title: 'Fornecedores e compras',
|
|
description:
|
|
'Compare propostas, fundamente a escolha e acompanhe as ordens de compra.',
|
|
icon: Users,
|
|
href: '/consulta/fornecedores',
|
|
label: 'Explorar fornecedores',
|
|
step: '02',
|
|
},
|
|
{
|
|
title: 'Recepção e armazém',
|
|
description:
|
|
'Confira as entregas, registe a qualidade e consulte as existências aceites.',
|
|
icon: PackageCheck,
|
|
href: '/consulta/recepcoes',
|
|
label: 'Explorar recepção',
|
|
step: '03',
|
|
},
|
|
];
|
|
|
|
export default function Home() {
|
|
return (
|
|
<>
|
|
<Head title="Gestão de compras" />
|
|
<div className="min-h-screen bg-background text-foreground">
|
|
<header className="border-b">
|
|
<div className="mx-auto flex max-w-7xl flex-wrap items-center justify-between gap-4 px-6 py-5 lg:px-10">
|
|
<Link href="/" className="flex items-center gap-3">
|
|
<span className="grid size-10 place-items-center rounded-xl bg-teal-800 text-lg font-semibold text-white">
|
|
SGC
|
|
</span>
|
|
<div>
|
|
<span className="block text-lg font-semibold tracking-tight">
|
|
SGC
|
|
</span>
|
|
<span className="block text-xs text-muted-foreground">
|
|
Sistema de Gestão de Compras
|
|
</span>
|
|
</div>
|
|
</Link>
|
|
<nav
|
|
aria-label="Navegação principal"
|
|
className="flex items-center gap-5 text-sm"
|
|
>
|
|
<Link
|
|
href="/"
|
|
aria-current="page"
|
|
className="hidden font-semibold text-teal-700 sm:block dark:text-teal-400"
|
|
>
|
|
Início
|
|
</Link>
|
|
<Link
|
|
href="/consulta"
|
|
className="text-muted-foreground hover:text-foreground"
|
|
>
|
|
Demonstração
|
|
</Link>
|
|
<Button asChild>
|
|
<Link href="/login">
|
|
Entrar na aplicação{' '}
|
|
<ArrowRight className="size-4" />
|
|
</Link>
|
|
</Button>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
<main className="mx-auto max-w-7xl px-6 lg:px-10">
|
|
<section className="grid items-center gap-12 py-16 lg:grid-cols-[1.1fr_1fr] lg:py-24">
|
|
<div>
|
|
<p className="mb-5 text-xs font-semibold tracking-[0.2em] text-teal-700 uppercase dark:text-teal-400">
|
|
Cada etapa no seu lugar
|
|
</p>
|
|
<h1 className="max-w-2xl text-4xl leading-tight font-semibold tracking-tight sm:text-5xl">
|
|
Gestão de compras,
|
|
<br />
|
|
<span className="text-teal-800 dark:text-teal-400">
|
|
do pedido ao stock.
|
|
</span>
|
|
</h1>
|
|
<p className="mt-6 max-w-xl text-base leading-7 text-muted-foreground">
|
|
Um percurso organizado para a sua equipa:
|
|
necessidades, fornecedores, decisões, entregas e
|
|
armazém. Escolha a área em que quer trabalhar ou
|
|
conheça primeiro os exemplos de demonstração.
|
|
</p>
|
|
<div className="mt-8 flex flex-wrap gap-3">
|
|
<Button
|
|
asChild
|
|
size="lg"
|
|
className="bg-teal-800 text-white hover:bg-teal-900"
|
|
>
|
|
<Link href="/consulta">
|
|
Explorar a demonstração{' '}
|
|
<ArrowRight className="size-4" />
|
|
</Link>
|
|
</Button>
|
|
<Button asChild size="lg" variant="outline">
|
|
<Link href="/login">
|
|
Aceder ao espaço de trabalho
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
<p className="mt-5 flex items-center gap-2 text-xs text-muted-foreground">
|
|
<ShieldCheck className="size-4 shrink-0" />
|
|
Demonstração com dados fictícios. O espaço de
|
|
trabalho exige autenticação.
|
|
</p>
|
|
</div>
|
|
<div className="rounded-2xl border bg-muted/25 p-6 sm:p-8">
|
|
<div className="mb-7 flex items-center justify-between">
|
|
<p className="text-sm font-semibold">
|
|
O percurso da compra
|
|
</p>
|
|
<span className="rounded-full bg-teal-100 px-3 py-1 text-xs font-medium text-teal-900 dark:bg-teal-950 dark:text-teal-200">
|
|
Por etapas
|
|
</span>
|
|
</div>
|
|
<ol className="space-y-4">
|
|
{[
|
|
{
|
|
title: 'Requisitar e aprovar',
|
|
note: 'Necessidade, centro de custo e decisões',
|
|
icon: ClipboardList,
|
|
},
|
|
{
|
|
title: 'Seleccionar e emitir',
|
|
note: 'Propostas, adjudicação e ordem de compra',
|
|
icon: FileCheck2,
|
|
},
|
|
{
|
|
title: 'Receber e conferir',
|
|
note: 'Entregas parciais, qualidade e divergências',
|
|
icon: PackageCheck,
|
|
},
|
|
{
|
|
title: 'Consultar existências',
|
|
note: 'Entradas aceites e histórico por armazém',
|
|
icon: Warehouse,
|
|
},
|
|
].map((step, index) => (
|
|
<li
|
|
key={step.title}
|
|
className="flex items-center gap-4 rounded-xl border bg-background p-4"
|
|
>
|
|
<span className="grid size-10 shrink-0 place-items-center rounded-lg bg-muted text-teal-800 dark:text-teal-400">
|
|
<step.icon className="size-5" />
|
|
</span>
|
|
<div className="min-w-0 flex-1">
|
|
<p className="text-sm font-semibold">
|
|
{step.title}
|
|
</p>
|
|
<p className="mt-1 text-xs leading-5 text-muted-foreground">
|
|
{step.note}
|
|
</p>
|
|
</div>
|
|
<span className="text-xs text-muted-foreground">
|
|
0{index + 1}
|
|
</span>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
</div>
|
|
</section>
|
|
<section
|
|
className="border-t py-12"
|
|
aria-labelledby="areas-title"
|
|
>
|
|
<div className="mb-7 flex flex-wrap items-end justify-between gap-3">
|
|
<div>
|
|
<p className="mb-2 text-xs font-semibold tracking-widest text-teal-700 uppercase dark:text-teal-400">
|
|
Navegação por áreas
|
|
</p>
|
|
<h2
|
|
id="areas-title"
|
|
className="text-2xl font-semibold tracking-tight"
|
|
>
|
|
Por onde quer começar?
|
|
</h2>
|
|
</div>
|
|
<Link
|
|
href="/consulta"
|
|
className="inline-flex items-center gap-2 text-sm font-medium text-teal-700 dark:text-teal-400"
|
|
>
|
|
Ver todos os módulos{' '}
|
|
<ArrowRight className="size-4" />
|
|
</Link>
|
|
</div>
|
|
<div className="grid gap-5 md:grid-cols-3">
|
|
{areas.map((area) => (
|
|
<Link
|
|
href={area.href}
|
|
key={area.title}
|
|
className="group flex flex-col rounded-xl border bg-card p-6 transition-colors hover:border-teal-600"
|
|
>
|
|
<div className="mb-8 flex items-center justify-between">
|
|
<area.icon className="size-6 text-teal-800 dark:text-teal-400" />
|
|
<span className="text-xs text-muted-foreground">
|
|
{area.step}
|
|
</span>
|
|
</div>
|
|
<h3 className="font-semibold">
|
|
{area.title}
|
|
</h3>
|
|
<p className="mt-3 flex-1 text-sm leading-6 text-muted-foreground">
|
|
{area.description}
|
|
</p>
|
|
<span className="mt-7 inline-flex items-center gap-2 text-sm font-medium text-teal-700 dark:text-teal-400">
|
|
{area.label}
|
|
<ArrowRight className="size-4 transition-transform group-hover:translate-x-1" />
|
|
</span>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</section>
|
|
<section className="mb-12 flex flex-wrap items-center justify-between gap-5 rounded-xl bg-teal-900 p-6 text-white sm:p-8">
|
|
<div>
|
|
<h2 className="text-xl font-semibold">
|
|
Já faz parte da equipa?
|
|
</h2>
|
|
<p className="mt-2 max-w-xl text-sm leading-6 text-teal-100">
|
|
Entre com a sua conta para aceder aos módulos e
|
|
dados autorizados para o seu perfil.
|
|
</p>
|
|
</div>
|
|
<Button asChild variant="secondary">
|
|
<Link href="/login">
|
|
Entrar no espaço de trabalho{' '}
|
|
<ArrowRight className="size-4" />
|
|
</Link>
|
|
</Button>
|
|
</section>
|
|
</main>
|
|
<footer className="border-t">
|
|
<div className="mx-auto flex max-w-7xl flex-wrap justify-between gap-4 px-6 py-6 text-xs leading-5 text-muted-foreground lg:px-10">
|
|
<span>SGC · Ambiente de desenvolvimento</span>
|
|
<span>
|
|
O orçamento ainda não é validado. Os documentos não
|
|
autorizam compras reais.
|
|
</span>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
</>
|
|
);
|
|
}
|