feat: site institucional completo com design system - Implementa\u00e7\u00e3o do site institucional da Aggios com design system completo incluindo gradientes, tipografia, componentes e se\u00e7\u00f5es de recursos, pre\u00e7os e CTA
This commit is contained in:
Erik Silva
41
front-end-dash.aggios.app/.gitignore
vendored
Normal file
41
front-end-dash.aggios.app/.gitignore
vendored
Normal file
@@ -0,0 +1,41 @@
|
||||
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
/node_modules
|
||||
/.pnp
|
||||
.pnp.*
|
||||
.yarn/*
|
||||
!.yarn/patches
|
||||
!.yarn/plugins
|
||||
!.yarn/releases
|
||||
!.yarn/versions
|
||||
|
||||
# testing
|
||||
/coverage
|
||||
|
||||
# next.js
|
||||
/.next/
|
||||
/out/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# env files (can opt-in for committing if needed)
|
||||
.env*
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
next-env.d.ts
|
||||
41
front-end-dash.aggios.app/Dockerfile
Normal file
41
front-end-dash.aggios.app/Dockerfile
Normal file
@@ -0,0 +1,41 @@
|
||||
# Build stage
|
||||
FROM node:20-alpine AS builder
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Copy package files
|
||||
COPY package.json package-lock.json ./
|
||||
|
||||
# Install dependencies
|
||||
RUN npm ci
|
||||
|
||||
# Copy source code
|
||||
COPY . .
|
||||
|
||||
# Build Next.js
|
||||
RUN npm run build
|
||||
|
||||
# Runtime stage
|
||||
FROM node:20-alpine
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
# Copy package files
|
||||
COPY package.json package-lock.json ./
|
||||
|
||||
# Install only production dependencies
|
||||
RUN npm ci --omit=dev
|
||||
|
||||
# Copy built app from builder
|
||||
COPY --from=builder /app/.next ./.next
|
||||
COPY --from=builder /app/public ./public
|
||||
|
||||
# Expose port
|
||||
EXPOSE 3000
|
||||
|
||||
# Health check
|
||||
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \
|
||||
CMD node -e "require('http').get('http://localhost:3000', (r) => {if (r.statusCode !== 200) throw new Error(r.statusCode)})"
|
||||
|
||||
# Start app
|
||||
CMD ["npm", "start"]
|
||||
36
front-end-dash.aggios.app/README.md
Normal file
36
front-end-dash.aggios.app/README.md
Normal file
@@ -0,0 +1,36 @@
|
||||
This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
|
||||
|
||||
## Getting Started
|
||||
|
||||
First, run the development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
# or
|
||||
pnpm dev
|
||||
# or
|
||||
bun dev
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
|
||||
You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
|
||||
|
||||
This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
|
||||
|
||||
## Learn More
|
||||
|
||||
To learn more about Next.js, take a look at the following resources:
|
||||
|
||||
- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
|
||||
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
|
||||
|
||||
You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
|
||||
|
||||
## Deploy on Vercel
|
||||
|
||||
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
|
||||
|
||||
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
|
||||
12
front-end-dash.aggios.app/app/(auth)/LayoutWrapper.tsx
Normal file
12
front-end-dash.aggios.app/app/(auth)/LayoutWrapper.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
'use client';
|
||||
|
||||
import { ThemeProvider } from '@/contexts/ThemeContext';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
export default function AuthLayoutWrapper({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
1507
front-end-dash.aggios.app/app/(auth)/cadastro/page.tsx
Normal file
1507
front-end-dash.aggios.app/app/(auth)/cadastro/page.tsx
Normal file
File diff suppressed because it is too large
Load Diff
17
front-end-dash.aggios.app/app/(auth)/layout.tsx
Normal file
17
front-end-dash.aggios.app/app/(auth)/layout.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
"use client";
|
||||
|
||||
import { ThemeProvider } from '@/contexts/ThemeContext';
|
||||
|
||||
export default function LoginLayout({
|
||||
children,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
<div className="min-h-screen bg-[#FDFDFC] dark:bg-gray-900">
|
||||
{children}
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
275
front-end-dash.aggios.app/app/(auth)/login/page.tsx
Normal file
275
front-end-dash.aggios.app/app/(auth)/login/page.tsx
Normal file
@@ -0,0 +1,275 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { Button, Input, Checkbox } from "@/components/ui";
|
||||
import toast, { Toaster } from 'react-hot-toast';
|
||||
import { saveAuth } from '@/lib/auth';
|
||||
import { API_ENDPOINTS, apiRequest } from '@/lib/api';
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
const ThemeToggle = dynamic(() => import('@/components/ThemeToggle'), { ssr: false });
|
||||
|
||||
export default function LoginPage() {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [formData, setFormData] = useState({
|
||||
email: "",
|
||||
password: "",
|
||||
rememberMe: false,
|
||||
});
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Validações básicas
|
||||
if (!formData.email) {
|
||||
toast.error('Por favor, insira seu email');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formData.email)) {
|
||||
toast.error('Por favor, insira um email válido');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!formData.password) {
|
||||
toast.error('Por favor, insira sua senha');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
const response = await fetch('http://localhost:3000/api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({
|
||||
email: formData.email,
|
||||
password: formData.password,
|
||||
}),
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error.message || 'Credenciais inválidas');
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
// Salvar token e dados do usuário
|
||||
localStorage.setItem('token', data.token);
|
||||
localStorage.setItem('user', JSON.stringify(data.user));
|
||||
|
||||
toast.success('Login realizado com sucesso! Redirecionando...');
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.href = '/painel';
|
||||
}, 1000);
|
||||
} catch (error: any) {
|
||||
toast.error(error.message || 'Erro ao fazer login. Verifique suas credenciais.');
|
||||
setIsLoading(false);
|
||||
}
|
||||
}; return (
|
||||
<>
|
||||
<Toaster
|
||||
position="top-center"
|
||||
toastOptions={{
|
||||
duration: 5000,
|
||||
style: {
|
||||
background: '#FFFFFF',
|
||||
color: '#000000',
|
||||
padding: '16px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #E5E5E5',
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
||||
},
|
||||
error: {
|
||||
icon: '⚠️',
|
||||
style: {
|
||||
background: '#ff3a05',
|
||||
color: '#FFFFFF',
|
||||
border: 'none',
|
||||
},
|
||||
},
|
||||
success: {
|
||||
icon: '✓',
|
||||
style: {
|
||||
background: '#10B981',
|
||||
color: '#FFFFFF',
|
||||
border: 'none',
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<div className="flex min-h-screen">
|
||||
{/* Lado Esquerdo - Formulário */}
|
||||
<div className="w-full lg:w-1/2 flex items-center justify-center px-6 sm:px-12 py-12">
|
||||
<div className="w-full max-w-md">
|
||||
{/* Logo mobile */}
|
||||
<div className="lg:hidden text-center mb-8">
|
||||
<div className="inline-block px-6 py-3 rounded-2xl bg-linear-to-r from-[#FF3A05] to-[#FF0080]">
|
||||
<h1 className="text-3xl font-bold text-white">aggios</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Theme Toggle */}
|
||||
<div className="flex justify-end mb-4">
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-[28px] font-bold text-[#000000] dark:text-white">
|
||||
Bem-vindo de volta
|
||||
</h2>
|
||||
<p className="text-[14px] text-[#7D7D7D] dark:text-gray-400 mt-2">
|
||||
Entre com suas credenciais para acessar o painel
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<Input
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="seu@email.com"
|
||||
leftIcon="ri-mail-line"
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
required
|
||||
/>
|
||||
|
||||
<Input
|
||||
label="Senha"
|
||||
type="password"
|
||||
placeholder="Digite sua senha"
|
||||
leftIcon="ri-lock-line"
|
||||
value={formData.password}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, password: e.target.value })
|
||||
}
|
||||
required
|
||||
/>
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<Checkbox
|
||||
label="Lembrar de mim"
|
||||
checked={formData.rememberMe}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, rememberMe: e.target.checked })
|
||||
}
|
||||
/>
|
||||
<Link
|
||||
href="/recuperar-senha"
|
||||
className="text-[14px] gradient-text hover:underline font-medium cursor-pointer"
|
||||
>
|
||||
Esqueceu a senha?
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
className="w-full"
|
||||
size="lg"
|
||||
isLoading={isLoading}
|
||||
>
|
||||
Entrar
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{/* Divider */}
|
||||
<div className="relative my-8">
|
||||
<div className="absolute inset-0 flex items-center">
|
||||
<div className="w-full border-t border-[#E5E5E5]" />
|
||||
</div>
|
||||
<div className="relative flex justify-center text-[13px]">
|
||||
<span className="px-4 bg-white text-[#7D7D7D]">
|
||||
ou continue com
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Social Login */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<Button variant="outline" leftIcon="ri-google-fill">
|
||||
Google
|
||||
</Button>
|
||||
<Button variant="outline" leftIcon="ri-microsoft-fill">
|
||||
Microsoft
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Sign up link */}
|
||||
<p className="text-center mt-8 text-[14px] text-[#7D7D7D]">
|
||||
Não tem uma conta?{" "}
|
||||
<Link href="/cadastro" className="gradient-text font-medium hover:underline cursor-pointer">
|
||||
Criar conta
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Lado Direito - Branding */}
|
||||
<div className="hidden lg:flex lg:w-1/2 relative overflow-hidden" style={{ background: 'linear-gradient(90deg, #FF3A05, #FF0080)' }}>
|
||||
<div className="relative z-10 flex flex-col justify-center items-center w-full p-12 text-white">
|
||||
{/* Logo */}
|
||||
<div className="mb-8">
|
||||
<div className="inline-block px-6 py-3 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20">
|
||||
<h1 className="text-5xl font-bold tracking-tight bg-linear-to-r from-white to-white/80 bg-clip-text text-transparent">
|
||||
aggios
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Conteúdo */}
|
||||
<div className="max-w-lg text-center">
|
||||
<div className="w-20 h-20 rounded-2xl bg-white/20 flex items-center justify-center mb-6 mx-auto">
|
||||
<i className="ri-dashboard-line text-4xl" />
|
||||
</div>
|
||||
<h2 className="text-4xl font-bold mb-4">Gerencie seus projetos com facilidade</h2>
|
||||
<p className="text-white/80 text-lg mb-8">
|
||||
Tenha controle total sobre seus projetos, equipe e clientes em um só lugar.
|
||||
</p>
|
||||
|
||||
{/* Features */}
|
||||
<div className="space-y-4 text-left">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
|
||||
<i className="ri-shield-check-line text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-1">Gestão Completa</h4>
|
||||
<p className="text-white/70 text-sm">Controle projetos, tarefas e prazos em tempo real</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
|
||||
<i className="ri-check-line text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-1">Relatórios Detalhados</h4>
|
||||
<p className="text-white/70 text-sm">Análises e métricas para tomada de decisão</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
|
||||
<i className="ri-check-line text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-1">Colaboração em Equipe</h4>
|
||||
<p className="text-white/70 text-sm">Trabalhe junto com sua equipe de forma eficiente</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Círculos decorativos */}
|
||||
<div className="absolute top-0 right-0 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-0 left-0 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
250
front-end-dash.aggios.app/app/(auth)/recuperar-senha/page.tsx
Normal file
250
front-end-dash.aggios.app/app/(auth)/recuperar-senha/page.tsx
Normal file
@@ -0,0 +1,250 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import Link from "next/link";
|
||||
import { Button, Input } from "@/components/ui";
|
||||
import toast, { Toaster } from 'react-hot-toast';
|
||||
|
||||
export default function RecuperarSenhaPage() {
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [email, setEmail] = useState("");
|
||||
const [emailSent, setEmailSent] = useState(false);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Validações básicas
|
||||
if (!email) {
|
||||
toast.error('Por favor, insira seu email');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
|
||||
toast.error('Por favor, insira um email válido');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsLoading(true);
|
||||
|
||||
try {
|
||||
// Simular envio de email
|
||||
await new Promise((resolve) => setTimeout(resolve, 2000));
|
||||
|
||||
setEmailSent(true);
|
||||
toast.success('Email de recuperação enviado com sucesso!');
|
||||
} catch (error) {
|
||||
toast.error('Erro ao enviar email. Tente novamente.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Toaster
|
||||
position="top-center"
|
||||
toastOptions={{
|
||||
duration: 5000,
|
||||
style: {
|
||||
background: '#FFFFFF',
|
||||
color: '#000000',
|
||||
padding: '16px',
|
||||
borderRadius: '8px',
|
||||
border: '1px solid #E5E5E5',
|
||||
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
||||
},
|
||||
error: {
|
||||
icon: '⚠️',
|
||||
style: {
|
||||
background: '#ff3a05',
|
||||
color: '#FFFFFF',
|
||||
border: 'none',
|
||||
},
|
||||
},
|
||||
success: {
|
||||
icon: '✓',
|
||||
style: {
|
||||
background: '#10B981',
|
||||
color: '#FFFFFF',
|
||||
border: 'none',
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
<div className="flex min-h-screen">
|
||||
{/* Lado Esquerdo - Formulário */}
|
||||
<div className="w-full lg:w-1/2 flex items-center justify-center px-6 sm:px-12 py-12">
|
||||
<div className="w-full max-w-md">
|
||||
{/* Logo mobile */}
|
||||
<div className="lg:hidden text-center mb-8">
|
||||
<div className="inline-block px-6 py-3 rounded-2xl bg-linear-to-r from-[#FF3A05] to-[#FF0080]">
|
||||
<h1 className="text-3xl font-bold text-white">aggios</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{!emailSent ? (
|
||||
<>
|
||||
{/* Header */}
|
||||
<div className="mb-8">
|
||||
<h2 className="text-[28px] font-bold text-[#000000]">
|
||||
Recuperar senha
|
||||
</h2>
|
||||
<p className="text-[14px] text-[#7D7D7D] mt-2">
|
||||
Digite seu email e enviaremos um link para redefinir sua senha
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Form */}
|
||||
<form onSubmit={handleSubmit} className="space-y-5">
|
||||
<Input
|
||||
label="Email"
|
||||
type="email"
|
||||
placeholder="seu@email.com"
|
||||
leftIcon="ri-mail-line"
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
required
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
variant="primary"
|
||||
className="w-full"
|
||||
size="lg"
|
||||
isLoading={isLoading}
|
||||
>
|
||||
Enviar link de recuperação
|
||||
</Button>
|
||||
</form>
|
||||
|
||||
{/* Back to login */}
|
||||
<div className="mt-6 text-center">
|
||||
<Link
|
||||
href="/login"
|
||||
className="text-[14px] gradient-text hover:underline inline-flex items-center gap-2 font-medium cursor-pointer"
|
||||
>
|
||||
<i className="ri-arrow-left-line" />
|
||||
Voltar para o login
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{/* Success Message */}
|
||||
<div className="text-center">
|
||||
<div className="w-20 h-20 rounded-full bg-[#10B981]/10 flex items-center justify-center mx-auto mb-6">
|
||||
<i className="ri-mail-check-line text-4xl text-[#10B981]" />
|
||||
</div>
|
||||
|
||||
<h2 className="text-[28px] font-bold text-[#000000] mb-4">
|
||||
Email enviado!
|
||||
</h2>
|
||||
|
||||
<p className="text-[14px] text-[#7D7D7D] mb-2">
|
||||
Enviamos um link de recuperação para:
|
||||
</p>
|
||||
|
||||
<p className="text-[16px] font-semibold text-[#000000] mb-6">
|
||||
{email}
|
||||
</p>
|
||||
|
||||
<div className="p-6 bg-[#F0F9FF] border border-[#BAE6FD] rounded-md text-left mb-6">
|
||||
<div className="flex gap-4">
|
||||
<i className="ri-information-line text-[#0EA5E9] text-xl mt-0.5" />
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-[#000000] mb-1">
|
||||
Verifique sua caixa de entrada
|
||||
</h4>
|
||||
<p className="text-xs text-[#7D7D7D]">
|
||||
Clique no link que enviamos para redefinir sua senha.
|
||||
Se não receber em alguns minutos, verifique sua pasta de spam.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full mb-4"
|
||||
onClick={() => setEmailSent(false)}
|
||||
>
|
||||
Enviar novamente
|
||||
</Button>
|
||||
|
||||
<Link
|
||||
href="/login"
|
||||
className="text-[14px] gradient-text hover:underline inline-flex items-center gap-2 font-medium cursor-pointer"
|
||||
>
|
||||
<i className="ri-arrow-left-line" />
|
||||
Voltar para o login
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Lado Direito - Branding */}
|
||||
<div className="hidden lg:flex lg:w-1/2 relative overflow-hidden" style={{ background: 'linear-gradient(90deg, #FF3A05, #FF0080)' }}>
|
||||
<div className="relative z-10 flex flex-col justify-center items-center w-full p-12 text-white">
|
||||
{/* Logo */}
|
||||
<div className="mb-8">
|
||||
<div className="inline-block px-6 py-3 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20">
|
||||
<h1 className="text-5xl font-bold tracking-tight bg-linear-to-r from-white to-white/80 bg-clip-text text-transparent">
|
||||
aggios
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Conteúdo */}
|
||||
<div className="max-w-lg text-center">
|
||||
<div className="w-20 h-20 rounded-2xl bg-white/20 flex items-center justify-center mb-6 mx-auto">
|
||||
<i className="ri-lock-password-line text-4xl" />
|
||||
</div>
|
||||
<h2 className="text-4xl font-bold mb-4">Recuperação segura</h2>
|
||||
<p className="text-white/80 text-lg mb-8">
|
||||
Protegemos seus dados com os mais altos padrões de segurança.
|
||||
Seu link de recuperação é único e expira em 24 horas.
|
||||
</p>
|
||||
|
||||
{/* Features */}
|
||||
<div className="space-y-4 text-left">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
|
||||
<i className="ri-shield-check-line text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-1">Criptografia de ponta</h4>
|
||||
<p className="text-white/70 text-sm">Seus dados são protegidos com tecnologia de última geração</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
|
||||
<i className="ri-time-line text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-1">Link temporário</h4>
|
||||
<p className="text-white/70 text-sm">O link expira em 24h para sua segurança</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
|
||||
<i className="ri-customer-service-2-line text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-1">Suporte disponível</h4>
|
||||
<p className="text-white/70 text-sm">Nossa equipe está pronta para ajudar caso precise</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Círculos decorativos */}
|
||||
<div className="absolute top-0 right-0 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-0 left-0 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
12
front-end-dash.aggios.app/app/LayoutWrapper.tsx
Normal file
12
front-end-dash.aggios.app/app/LayoutWrapper.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
'use client';
|
||||
|
||||
import { ThemeProvider } from '@/contexts/ThemeContext';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
export default function LayoutWrapper({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<ThemeProvider>
|
||||
{children}
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
BIN
front-end-dash.aggios.app/app/favicon.ico
Normal file
BIN
front-end-dash.aggios.app/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
94
front-end-dash.aggios.app/app/globals.css
Normal file
94
front-end-dash.aggios.app/app/globals.css
Normal file
@@ -0,0 +1,94 @@
|
||||
@import "tailwindcss";
|
||||
@import "remixicon/fonts/remixicon.css";
|
||||
|
||||
:root {
|
||||
/* Cores do Design System Aggios */
|
||||
--primary: #FF3A05;
|
||||
--secondary: #FF0080;
|
||||
--background: #FDFDFC;
|
||||
--foreground: #000000;
|
||||
--text-secondary: #7D7D7D;
|
||||
--border: #E5E5E5;
|
||||
--white: #FFFFFF;
|
||||
|
||||
/* Gradiente */
|
||||
--gradient: linear-gradient(90deg, #FF3A05, #FF0080);
|
||||
--gradient-text: linear-gradient(to right, #FF3A05, #FF0080);
|
||||
|
||||
/* Espaçamentos */
|
||||
--space-xs: 4px;
|
||||
--space-sm: 8px;
|
||||
--space-md: 16px;
|
||||
--space-lg: 24px;
|
||||
--space-xl: 32px;
|
||||
--space-2xl: 48px;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-text-secondary: var(--text-secondary);
|
||||
--color-border: var(--border);
|
||||
--font-sans: var(--font-inter);
|
||||
--font-heading: var(--font-open-sans);
|
||||
--font-mono: var(--font-fira-code);
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-sans), Arial, Helvetica, sans-serif;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* Estilos base dos inputs */
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-size: 14px;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
box-shadow: none !important;
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
/* Focus visible para acessibilidade */
|
||||
*:focus-visible {
|
||||
outline: 2px solid var(--primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Hero section gradient text */
|
||||
.gradient-text {
|
||||
background: var(--gradient-text);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Hover gradient text */
|
||||
.hover\:gradient-text:hover {
|
||||
background: var(--gradient-text);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Group hover para remover gradiente e usar cor sólida */
|
||||
.group:hover .group-hover\:text-white {
|
||||
background: none !important;
|
||||
-webkit-background-clip: unset !important;
|
||||
-webkit-text-fill-color: unset !important;
|
||||
background-clip: unset !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* Smooth scroll */
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
63
front-end-dash.aggios.app/app/layout.tsx
Normal file
63
front-end-dash.aggios.app/app/layout.tsx
Normal file
@@ -0,0 +1,63 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Inter, Open_Sans, Fira_Code } from "next/font/google";
|
||||
import "./globals.css";
|
||||
import LayoutWrapper from "./LayoutWrapper";
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter",
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "500", "600"],
|
||||
});
|
||||
|
||||
const openSans = Open_Sans({
|
||||
variable: "--font-open-sans",
|
||||
subsets: ["latin"],
|
||||
weight: ["700"],
|
||||
});
|
||||
|
||||
const firaCode = Fira_Code({
|
||||
variable: "--font-fira-code",
|
||||
subsets: ["latin"],
|
||||
weight: ["400", "600"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Aggios - Dashboard",
|
||||
description: "Plataforma SaaS para agências digitais",
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
return (
|
||||
<html lang="pt-BR">
|
||||
<head>
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
(function() {
|
||||
const theme = localStorage.getItem('theme');
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
const isDark = theme === 'dark' || (!theme && prefersDark);
|
||||
if (isDark) {
|
||||
document.documentElement.classList.add('dark');
|
||||
} else {
|
||||
document.documentElement.classList.remove('dark');
|
||||
}
|
||||
})();
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
</head>
|
||||
<body
|
||||
className={`${inter.variable} ${openSans.variable} ${firaCode.variable} antialiased bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 transition-colors`}
|
||||
>
|
||||
<LayoutWrapper>
|
||||
{children}
|
||||
</LayoutWrapper>
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
146
front-end-dash.aggios.app/app/not-found.tsx
Normal file
146
front-end-dash.aggios.app/app/not-found.tsx
Normal file
@@ -0,0 +1,146 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { Button } from "@/components/ui";
|
||||
|
||||
export default function NotFound() {
|
||||
return (
|
||||
<div className="flex min-h-screen">
|
||||
{/* Lado Esquerdo - Conteúdo 404 */}
|
||||
<div className="w-full lg:w-1/2 flex items-center justify-center px-6 sm:px-12 py-12">
|
||||
<div className="w-full max-w-md text-center">
|
||||
{/* Logo mobile */}
|
||||
<div className="lg:hidden mb-8">
|
||||
<div className="inline-block px-6 py-3 rounded-2xl bg-linear-to-r from-[#FF3A05] to-[#FF0080]">
|
||||
<h1 className="text-3xl font-bold text-white">aggios</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 404 Number */}
|
||||
<div className="mb-6">
|
||||
<h1 className="text-[120px] font-bold leading-none gradient-text">
|
||||
404
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Message */}
|
||||
<div className="mb-6">
|
||||
<h2 className="text-[28px] font-bold text-[#000000] mb-2">
|
||||
Página não encontrada
|
||||
</h2>
|
||||
<p className="text-[14px] text-[#7D7D7D] leading-relaxed">
|
||||
Desculpe, a página que você está procurando não existe ou foi movida.
|
||||
Verifique a URL ou volte para a página inicial.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Actions */}
|
||||
<div className="space-y-3">
|
||||
<Button
|
||||
variant="primary"
|
||||
className="w-full"
|
||||
size="lg"
|
||||
leftIcon="ri-login-box-line"
|
||||
onClick={() => window.location.href = '/login'}
|
||||
>
|
||||
Fazer login
|
||||
</Button>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full"
|
||||
size="lg"
|
||||
leftIcon="ri-user-add-line"
|
||||
onClick={() => window.location.href = '/cadastro'}
|
||||
>
|
||||
Criar conta
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Help Section */}
|
||||
<div className="mt-8 p-5 bg-[#F5F5F5] rounded-lg text-left">
|
||||
<h4 className="text-[13px] font-semibold text-[#000000] mb-3 flex items-center gap-2">
|
||||
<i className="ri-questionnaire-line text-[16px] gradient-text" />
|
||||
Precisa de ajuda?
|
||||
</h4>
|
||||
<ul className="text-[13px] text-[#7D7D7D] space-y-2">
|
||||
<li className="flex items-start gap-2">
|
||||
<i className="ri-arrow-right-s-line text-[16px] gradient-text mt-0.5" />
|
||||
<span>Verifique se a URL está correta</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<i className="ri-arrow-right-s-line text-[16px] gradient-text mt-0.5" />
|
||||
<span>Tente buscar no menu principal</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<i className="ri-arrow-right-s-line text-[16px] gradient-text mt-0.5" />
|
||||
<span>Entre em contato com o suporte se o problema persistir</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Lado Direito - Branding */}
|
||||
<div className="hidden lg:flex lg:w-1/2 relative overflow-hidden" style={{ background: 'linear-gradient(90deg, #FF3A05, #FF0080)' }}>
|
||||
<div className="relative z-10 flex flex-col justify-center items-center w-full p-12 text-white">
|
||||
{/* Logo */}
|
||||
<div className="mb-8">
|
||||
<div className="inline-block px-6 py-3 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20">
|
||||
<h1 className="text-5xl font-bold tracking-tight bg-linear-to-r from-white to-white/80 bg-clip-text text-transparent">
|
||||
aggios
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Conteúdo */}
|
||||
<div className="max-w-lg text-center">
|
||||
<div className="w-20 h-20 rounded-2xl bg-white/20 flex items-center justify-center mb-6 mx-auto">
|
||||
<i className="ri-compass-3-line text-4xl" />
|
||||
</div>
|
||||
<h2 className="text-4xl font-bold mb-4">Perdido? Estamos aqui!</h2>
|
||||
<p className="text-white/80 text-lg mb-8">
|
||||
Mesmo que esta página não exista, temos muitas outras funcionalidades incríveis
|
||||
esperando por você no Aggios.
|
||||
</p>
|
||||
|
||||
{/* Features */}
|
||||
<div className="space-y-4 text-left">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
|
||||
<i className="ri-dashboard-line text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-1">Dashboard Completo</h4>
|
||||
<p className="text-white/70 text-sm">Visualize todos os seus projetos e métricas</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
|
||||
<i className="ri-team-line text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-1">Gestão de Equipe</h4>
|
||||
<p className="text-white/70 text-sm">Organize e acompanhe sua equipe</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-6 h-6 rounded-full bg-white/20 flex items-center justify-center shrink-0 mt-0.5">
|
||||
<i className="ri-customer-service-line text-sm" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold mb-1">Suporte 24/7</h4>
|
||||
<p className="text-white/70 text-sm">Estamos sempre disponíveis para ajudar</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Círculos decorativos */}
|
||||
<div className="absolute top-0 right-0 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
|
||||
<div className="absolute bottom-0 left-0 w-96 h-96 bg-white/5 rounded-full blur-3xl" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
5
front-end-dash.aggios.app/app/page.tsx
Normal file
5
front-end-dash.aggios.app/app/page.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
import { redirect } from "next/navigation";
|
||||
|
||||
export default function Home() {
|
||||
redirect("/login");
|
||||
}
|
||||
175
front-end-dash.aggios.app/app/painel/page.tsx
Normal file
175
front-end-dash.aggios.app/app/painel/page.tsx
Normal file
@@ -0,0 +1,175 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { isAuthenticated, getUser, clearAuth } from '@/lib/auth';
|
||||
|
||||
export default function PainelPage() {
|
||||
const router = useRouter();
|
||||
const [userData, setUserData] = useState<any>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
// Verificar se usuário está logado
|
||||
if (!isAuthenticated()) {
|
||||
router.push('/login');
|
||||
return;
|
||||
}
|
||||
|
||||
const user = getUser();
|
||||
if (user) {
|
||||
setUserData(user);
|
||||
setLoading(false);
|
||||
} else {
|
||||
router.push('/login');
|
||||
}
|
||||
}, [router]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="min-h-screen flex items-center justify-center bg-gray-50">
|
||||
<div className="text-center">
|
||||
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-[#FF3A05] mx-auto mb-4"></div>
|
||||
<p className="text-gray-600">Carregando...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
{/* Header */}
|
||||
<header className="bg-white border-b border-gray-200 shadow-sm">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center justify-center w-10 h-10 bg-gradient-to-r from-[#FF3A05] to-[#FF0080] rounded-lg">
|
||||
<span className="text-white font-bold text-lg">A</span>
|
||||
</div>
|
||||
<div>
|
||||
<h1 className="text-xl font-bold text-gray-900">Aggios</h1>
|
||||
<p className="text-sm text-gray-500">{userData?.company}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="text-right">
|
||||
<p className="text-sm font-medium text-gray-900">{userData?.name}</p>
|
||||
<p className="text-xs text-gray-500">{userData?.email}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => {
|
||||
clearAuth();
|
||||
router.push('/login');
|
||||
}}
|
||||
className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900"
|
||||
>
|
||||
Sair
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Content */}
|
||||
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
{/* Welcome Card */}
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-6">
|
||||
<div className="flex items-center gap-4 mb-4">
|
||||
<div className="flex-shrink-0">
|
||||
<div className="w-16 h-16 bg-gradient-to-br from-[#FF3A05] to-[#FF0080] rounded-full flex items-center justify-center">
|
||||
<span className="text-2xl">🎉</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-gray-900">
|
||||
Bem-vindo ao Aggios, {userData?.name}!
|
||||
</h2>
|
||||
<p className="text-gray-600 mt-1">
|
||||
Sua conta foi criada com sucesso. Este é o seu painel administrativo.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Grid */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-6">
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Projetos</p>
|
||||
<p className="text-3xl font-bold text-gray-900 mt-2">0</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Clientes</p>
|
||||
<p className="text-3xl font-bold text-gray-900 mt-2">0</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-sm font-medium text-gray-600">Receita</p>
|
||||
<p className="text-3xl font-bold text-gray-900 mt-2">R$ 0</p>
|
||||
</div>
|
||||
<div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center">
|
||||
<svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Next Steps */}
|
||||
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-4">Próximos Passos</h3>
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-3 p-4 bg-gray-50 rounded-lg">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-[#FF3A05] rounded-full flex items-center justify-center text-white text-sm font-bold">
|
||||
1
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900">Complete seu perfil</h4>
|
||||
<p className="text-sm text-gray-600 mt-1">Adicione mais informações sobre sua empresa</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 p-4 bg-gray-50 rounded-lg">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-[#FF3A05] rounded-full flex items-center justify-center text-white text-sm font-bold">
|
||||
2
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900">Adicione seu primeiro cliente</h4>
|
||||
<p className="text-sm text-gray-600 mt-1">Comece a gerenciar seus clientes</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3 p-4 bg-gray-50 rounded-lg">
|
||||
<div className="flex-shrink-0 w-6 h-6 bg-[#FF3A05] rounded-full flex items-center justify-center text-white text-sm font-bold">
|
||||
3
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-medium text-gray-900">Crie seu primeiro projeto</h4>
|
||||
<p className="text-sm text-gray-600 mt-1">Organize seu trabalho em projetos</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
22
front-end-dash.aggios.app/components/ThemeToggle.tsx
Normal file
22
front-end-dash.aggios.app/components/ThemeToggle.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
'use client';
|
||||
|
||||
import { useTheme } from '@/contexts/ThemeContext';
|
||||
|
||||
export default function ThemeToggle() {
|
||||
const { toggleTheme } = useTheme();
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={toggleTheme}
|
||||
className="p-2 rounded-lg bg-gradient-to-r from-primary/10 to-secondary/10 hover:from-primary/20 hover:to-secondary/20 transition-all duration-300 border border-primary/20 hover:border-primary/40"
|
||||
aria-label="Alternar tema"
|
||||
>
|
||||
{typeof window !== 'undefined' && document.documentElement.classList.contains('dark') ? (
|
||||
<i className="ri-sun-line text-lg gradient-text font-bold" />
|
||||
) : (
|
||||
<i className="ri-moon-line text-lg gradient-text font-bold" />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,153 @@
|
||||
"use client";
|
||||
|
||||
interface DashboardPreviewProps {
|
||||
companyName: string;
|
||||
subdomain: string;
|
||||
primaryColor: string;
|
||||
secondaryColor: string;
|
||||
logoUrl?: string;
|
||||
}
|
||||
|
||||
export default function DashboardPreview({
|
||||
companyName,
|
||||
subdomain,
|
||||
primaryColor,
|
||||
secondaryColor,
|
||||
logoUrl
|
||||
}: DashboardPreviewProps) {
|
||||
return (
|
||||
<div className="bg-white rounded-lg border-2 border-[#E5E5E5] overflow-hidden shadow-lg">
|
||||
{/* Header do Preview */}
|
||||
<div className="bg-[#F5F5F5] px-3 py-2 border-b border-[#E5E5E5] flex items-center gap-2">
|
||||
<div className="flex gap-1.5">
|
||||
<div className="w-3 h-3 rounded-full bg-[#FF5F57]" />
|
||||
<div className="w-3 h-3 rounded-full bg-[#FFBD2E]" />
|
||||
<div className="w-3 h-3 rounded-full bg-[#28CA42]" />
|
||||
</div>
|
||||
<div className="flex-1 text-center">
|
||||
<span className="text-xs text-[#7D7D7D]">
|
||||
{subdomain || 'seu-dominio'}.aggios.app
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Conteúdo do Preview - Dashboard */}
|
||||
<div className="aspect-video bg-[#F8F9FA] relative overflow-hidden">
|
||||
{/* Sidebar */}
|
||||
<div
|
||||
className="absolute left-0 top-0 bottom-0 w-16 flex flex-col items-center py-4 gap-3"
|
||||
style={{ backgroundColor: primaryColor }}
|
||||
>
|
||||
{/* Logo/Initial */}
|
||||
<div className="w-10 h-10 rounded-lg bg-white/20 flex items-center justify-center text-white font-bold text-sm overflow-hidden">
|
||||
{logoUrl ? (
|
||||
<img src={logoUrl} alt="Logo" className="w-full h-full object-cover" />
|
||||
) : (
|
||||
<span>{(companyName || 'E')[0].toUpperCase()}</span>
|
||||
)}
|
||||
</div>
|
||||
{/* Menu Icons */}
|
||||
<div className="w-10 h-10 rounded-lg bg-white/10 flex items-center justify-center">
|
||||
<i className="ri-dashboard-line text-white text-lg" />
|
||||
</div>
|
||||
<div className="w-10 h-10 rounded-lg flex items-center justify-center text-white/60">
|
||||
<i className="ri-folder-line text-lg" />
|
||||
</div>
|
||||
<div className="w-10 h-10 rounded-lg flex items-center justify-center text-white/60">
|
||||
<i className="ri-team-line text-lg" />
|
||||
</div>
|
||||
<div className="w-10 h-10 rounded-lg flex items-center justify-center text-white/60">
|
||||
<i className="ri-settings-3-line text-lg" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Main Content */}
|
||||
<div className="ml-16 p-4">
|
||||
{/* Top Bar */}
|
||||
<div className="flex items-center justify-between mb-4">
|
||||
<div>
|
||||
<h2 className="text-sm font-bold text-[#000000]">
|
||||
{companyName || 'Sua Empresa'}
|
||||
</h2>
|
||||
<p className="text-xs text-[#7D7D7D]">Dashboard</p>
|
||||
</div>
|
||||
<div className="flex gap-2">
|
||||
<div className="w-6 h-6 rounded-full bg-[#E5E5E5]" />
|
||||
<div className="w-6 h-6 rounded-full bg-[#E5E5E5]" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Stats Cards */}
|
||||
<div className="grid grid-cols-3 gap-2 mb-3">
|
||||
<div className="bg-white rounded-lg p-2 border border-[#E5E5E5]">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<div
|
||||
className="w-6 h-6 rounded flex items-center justify-center"
|
||||
style={{ backgroundColor: `${primaryColor}20` }}
|
||||
>
|
||||
<i className="ri-folder-line text-xs" style={{ color: primaryColor }} />
|
||||
</div>
|
||||
<span className="text-[10px] text-[#7D7D7D]">Projetos</span>
|
||||
</div>
|
||||
<p className="text-sm font-bold" style={{ color: primaryColor }}>24</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg p-2 border border-[#E5E5E5]">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<div
|
||||
className="w-6 h-6 rounded flex items-center justify-center"
|
||||
style={{ backgroundColor: secondaryColor ? `${secondaryColor}20` : '#10B98120' }}
|
||||
>
|
||||
<i className="ri-team-line text-xs" style={{ color: secondaryColor || '#10B981' }} />
|
||||
</div>
|
||||
<span className="text-[10px] text-[#7D7D7D]">Clientes</span>
|
||||
</div>
|
||||
<p className="text-sm font-bold" style={{ color: secondaryColor || '#10B981' }}>15</p>
|
||||
</div>
|
||||
<div className="bg-white rounded-lg p-2 border border-[#E5E5E5]">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<div className="w-6 h-6 rounded flex items-center justify-center bg-[#7D7D7D]/10">
|
||||
<i className="ri-money-dollar-circle-line text-xs text-[#7D7D7D]" />
|
||||
</div>
|
||||
<span className="text-[10px] text-[#7D7D7D]">Receita</span>
|
||||
</div>
|
||||
<p className="text-sm font-bold text-[#7D7D7D]">R$ 45k</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Chart Area */}
|
||||
<div className="bg-white rounded-lg p-3 border border-[#E5E5E5]">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<span className="text-xs font-semibold text-[#000000]">Desempenho</span>
|
||||
<button
|
||||
className="px-2 py-0.5 rounded text-[10px] text-white"
|
||||
style={{ backgroundColor: primaryColor }}
|
||||
>
|
||||
Este mês
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex items-end gap-1 h-16">
|
||||
{[40, 70, 45, 80, 60, 90, 75].map((height, i) => (
|
||||
<div key={i} className="flex-1 flex flex-col justify-end">
|
||||
<div
|
||||
className="w-full rounded-t transition-all"
|
||||
style={{
|
||||
height: `${height}%`,
|
||||
backgroundColor: i === 6 ? primaryColor : `${primaryColor}40`
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer Preview */}
|
||||
<div className="bg-[#F5F5F5] px-3 py-2 text-center border-t border-[#E5E5E5]">
|
||||
<p className="text-[10px] text-[#7D7D7D]">
|
||||
Preview do seu painel • As cores e layout podem ser ajustados
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,234 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import DashboardPreview from "./DashboardPreview";
|
||||
|
||||
interface DynamicBrandingProps {
|
||||
currentStep: number;
|
||||
companyName?: string;
|
||||
subdomain?: string;
|
||||
primaryColor?: string;
|
||||
secondaryColor?: string;
|
||||
logoUrl?: string;
|
||||
}
|
||||
|
||||
export default function DynamicBranding({
|
||||
currentStep,
|
||||
companyName = '',
|
||||
subdomain = '',
|
||||
primaryColor = '#FF3A05',
|
||||
secondaryColor = '#FF0080',
|
||||
logoUrl = ''
|
||||
}: DynamicBrandingProps) {
|
||||
const [activeTestimonial, setActiveTestimonial] = useState(0);
|
||||
|
||||
const testimonials = [
|
||||
{
|
||||
text: "Com o Aggios, nossa produtividade aumentou 40%. Gestão de projetos nunca foi tão simples!",
|
||||
author: "Maria Silva",
|
||||
company: "DigitalWorks",
|
||||
avatar: "MS"
|
||||
},
|
||||
{
|
||||
text: "Reduzi 60% do tempo gasto com controle financeiro. Tudo centralizado em um só lugar.",
|
||||
author: "João Santos",
|
||||
company: "TechHub",
|
||||
avatar: "JS"
|
||||
},
|
||||
{
|
||||
text: "A melhor decisão para nossa agência. Dashboard intuitivo e relatórios incríveis!",
|
||||
author: "Ana Costa",
|
||||
company: "CreativeFlow",
|
||||
avatar: "AC"
|
||||
}
|
||||
];
|
||||
|
||||
const stepContent = [
|
||||
{
|
||||
icon: "ri-user-heart-line",
|
||||
title: "Bem-vindo ao Aggios!",
|
||||
description: "Vamos criar sua conta em poucos passos",
|
||||
benefits: [
|
||||
"✓ Acesso completo ao painel",
|
||||
"✓ Gestão ilimitada de projetos",
|
||||
"✓ Suporte prioritário"
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: "ri-building-line",
|
||||
title: "Configure sua Empresa",
|
||||
description: "Personalize de acordo com seu negócio",
|
||||
benefits: [
|
||||
"✓ Dashboard personalizado",
|
||||
"✓ Gestão de equipe e clientes",
|
||||
"✓ Controle financeiro integrado"
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: "ri-map-pin-line",
|
||||
title: "Quase lá!",
|
||||
description: "Informações de localização e contato",
|
||||
benefits: [
|
||||
"✓ Multi-contatos configuráveis",
|
||||
"✓ Integração com WhatsApp",
|
||||
"✓ Notificações em tempo real"
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: "ri-global-line",
|
||||
title: "Seu Domínio Exclusivo",
|
||||
description: "Escolha como acessar seu painel",
|
||||
benefits: [
|
||||
"✓ Subdomínio personalizado",
|
||||
"✓ SSL incluído gratuitamente",
|
||||
"✓ Domínio próprio (opcional)"
|
||||
]
|
||||
},
|
||||
{
|
||||
icon: "ri-palette-line",
|
||||
title: "Personalize as Cores",
|
||||
description: "Deixe com a cara da sua empresa",
|
||||
benefits: [
|
||||
"✓ Preview em tempo real",
|
||||
"✓ Paleta de cores customizada",
|
||||
"✓ Identidade visual única"
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
const content = stepContent[currentStep - 1] || stepContent[0];
|
||||
|
||||
// Auto-rotate testimonials
|
||||
useEffect(() => {
|
||||
const interval = setInterval(() => {
|
||||
setActiveTestimonial((prev) => (prev + 1) % testimonials.length);
|
||||
}, 5000);
|
||||
return () => clearInterval(interval);
|
||||
}, [testimonials.length]);
|
||||
|
||||
// Se for etapa 5, mostrar preview do dashboard
|
||||
if (currentStep === 5) {
|
||||
return (
|
||||
<div className="relative z-10 flex flex-col justify-center items-center w-full p-12">
|
||||
{/* Logo */}
|
||||
<div className="mb-8">
|
||||
<div className="inline-block px-6 py-3 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20">
|
||||
<h1 className="text-5xl font-bold tracking-tight bg-linear-to-r from-white to-white/80 bg-clip-text text-transparent">
|
||||
aggios
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Conteúdo */}
|
||||
<div className="max-w-lg text-center">
|
||||
<h2 className="text-3xl font-bold mb-2 text-white">Preview do seu Painel</h2>
|
||||
<p className="text-white/80 text-lg">Veja como ficará seu dashboard personalizado</p>
|
||||
</div>
|
||||
|
||||
{/* Preview */}
|
||||
<div className="w-full max-w-3xl">
|
||||
<DashboardPreview
|
||||
companyName={companyName}
|
||||
subdomain={subdomain}
|
||||
primaryColor={primaryColor}
|
||||
secondaryColor={secondaryColor}
|
||||
logoUrl={logoUrl}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Info */}
|
||||
<div className="mt-6 text-center">
|
||||
<p className="text-white/70 text-sm">
|
||||
As cores e configurações são atualizadas em tempo real
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Decorative circles */}
|
||||
<div className="absolute -bottom-32 -left-32 w-96 h-96 rounded-full bg-white/5" />
|
||||
<div className="absolute -top-16 -right-16 w-64 h-64 rounded-full bg-white/5" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="relative z-10 flex flex-col justify-between w-full p-12 text-white">
|
||||
{/* Logo e Conteúdo da Etapa */}
|
||||
<div className="flex flex-col justify-center flex-1">
|
||||
{/* Logo */}
|
||||
<div className="mb-8">
|
||||
<div className="inline-block px-6 py-3 rounded-2xl bg-white/10 backdrop-blur-sm border border-white/20">
|
||||
<h1 className="text-5xl font-bold tracking-tight bg-linear-to-r from-white to-white/80 bg-clip-text text-transparent">
|
||||
aggios
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Ícone e Título da Etapa */}
|
||||
<div className="mb-6">
|
||||
<div className="w-16 h-16 rounded-2xl bg-white/20 flex items-center justify-center mb-4">
|
||||
<i className={`${content.icon} text-3xl`} />
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold mb-2">{content.title}</h2>
|
||||
<p className="text-white/80 text-lg">{content.description}</p>
|
||||
</div>
|
||||
|
||||
{/* Benefícios */}
|
||||
<div className="space-y-3 mb-8">
|
||||
{content.benefits.map((benefit, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center gap-3 text-white/90 animate-fade-in"
|
||||
style={{ animationDelay: `${index * 100}ms` }}
|
||||
>
|
||||
<span className="text-lg">{benefit}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Carrossel de Depoimentos */}
|
||||
<div className="relative">
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-2xl p-6 border border-white/20">
|
||||
<div className="mb-4">
|
||||
<i className="ri-double-quotes-l text-3xl text-white/40" />
|
||||
</div>
|
||||
<p className="text-white/95 mb-4 min-h-[60px]">
|
||||
{testimonials[activeTestimonial].text}
|
||||
</p>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-white/20 flex items-center justify-center font-semibold">
|
||||
{testimonials[activeTestimonial].avatar}
|
||||
</div>
|
||||
<div>
|
||||
<p className="font-semibold text-white">
|
||||
{testimonials[activeTestimonial].author}
|
||||
</p>
|
||||
<p className="text-sm text-white/70">
|
||||
{testimonials[activeTestimonial].company}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Indicadores */}
|
||||
<div className="flex gap-2 justify-center mt-4">
|
||||
{testimonials.map((_, index) => (
|
||||
<button
|
||||
key={index}
|
||||
onClick={() => setActiveTestimonial(index)}
|
||||
className={`h-1.5 rounded-full transition-all ${index === activeTestimonial
|
||||
? "w-8 bg-white"
|
||||
: "w-1.5 bg-white/40 hover:bg-white/60"
|
||||
}`}
|
||||
aria-label={`Ir para depoimento ${index + 1}`}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Decorative circles */}
|
||||
<div className="absolute -bottom-32 -left-32 w-96 h-96 rounded-full bg-white/5" />
|
||||
<div className="absolute -top-16 -right-16 w-64 h-64 rounded-full bg-white/5" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
71
front-end-dash.aggios.app/components/ui/Button.tsx
Normal file
71
front-end-dash.aggios.app/components/ui/Button.tsx
Normal file
@@ -0,0 +1,71 @@
|
||||
"use client";
|
||||
|
||||
import { ButtonHTMLAttributes, forwardRef } from "react";
|
||||
|
||||
interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
variant?: "primary" | "secondary" | "outline" | "ghost";
|
||||
size?: "sm" | "md" | "lg";
|
||||
isLoading?: boolean;
|
||||
leftIcon?: string;
|
||||
rightIcon?: string;
|
||||
}
|
||||
|
||||
const Button = forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
(
|
||||
{
|
||||
children,
|
||||
variant = "primary",
|
||||
size = "md",
|
||||
isLoading = false,
|
||||
leftIcon,
|
||||
rightIcon,
|
||||
className = "",
|
||||
disabled,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const baseStyles =
|
||||
"inline-flex items-center justify-center font-medium rounded-[6px] transition-opacity focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#FF3A05] disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer";
|
||||
|
||||
const variants = {
|
||||
primary: "text-white hover:opacity-90 active:opacity-80",
|
||||
secondary:
|
||||
"bg-[#E5E5E5] dark:bg-gray-700 text-[#000000] dark:text-white hover:opacity-90 active:opacity-80",
|
||||
outline:
|
||||
"border border-[#E5E5E5] dark:border-gray-600 text-[#000000] dark:text-white hover:bg-[#E5E5E5]/10 dark:hover:bg-gray-700/50 active:bg-[#E5E5E5]/20 dark:active:bg-gray-700",
|
||||
ghost: "text-[#000000] dark:text-white hover:bg-[#E5E5E5]/20 dark:hover:bg-gray-700/30 active:bg-[#E5E5E5]/30 dark:active:bg-gray-700/50",
|
||||
};
|
||||
|
||||
const sizes = {
|
||||
sm: "h-9 px-3 text-[13px]",
|
||||
md: "h-10 px-4 text-[14px]",
|
||||
lg: "h-12 px-6 text-[14px]",
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={ref}
|
||||
className={`${baseStyles} ${variants[variant]} ${sizes[size]} ${className}`}
|
||||
style={variant === 'primary' ? { background: 'var(--gradient)' } : undefined}
|
||||
disabled={disabled || isLoading}
|
||||
{...props}
|
||||
>
|
||||
{isLoading && (
|
||||
<i className="ri-loader-4-line animate-spin mr-2 text-[20px]" />
|
||||
)}
|
||||
{!isLoading && leftIcon && (
|
||||
<i className={`${leftIcon} mr-2 text-[20px]`} />
|
||||
)}
|
||||
{children}
|
||||
{!isLoading && rightIcon && (
|
||||
<i className={`${rightIcon} ml-2 text-[20px]`} />
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
Button.displayName = "Button";
|
||||
|
||||
export default Button;
|
||||
69
front-end-dash.aggios.app/components/ui/Checkbox.tsx
Normal file
69
front-end-dash.aggios.app/components/ui/Checkbox.tsx
Normal file
@@ -0,0 +1,69 @@
|
||||
"use client";
|
||||
|
||||
import { InputHTMLAttributes, forwardRef, useState } from "react";
|
||||
|
||||
interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
|
||||
label?: string | React.ReactNode;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
|
||||
({ label, error, className = "", onChange, checked: controlledChecked, ...props }, ref) => {
|
||||
const [isChecked, setIsChecked] = useState(controlledChecked || false);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setIsChecked(e.target.checked);
|
||||
if (onChange) {
|
||||
onChange(e);
|
||||
}
|
||||
};
|
||||
|
||||
const checked = controlledChecked !== undefined ? controlledChecked : isChecked;
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
<label className="flex items-start gap-3 cursor-pointer group">
|
||||
<div className="relative flex items-center justify-center mt-0.5">
|
||||
<input
|
||||
ref={ref}
|
||||
type="checkbox"
|
||||
className={`
|
||||
appearance-none w-[18px] h-[18px] border rounded-sm
|
||||
border-[#E5E5E5] dark:border-gray-600 bg-white dark:bg-gray-700
|
||||
checked:border-[#FF3A05]
|
||||
focus:outline-none focus:border-[#FF3A05]
|
||||
transition-colors cursor-pointer
|
||||
${className}
|
||||
`}
|
||||
style={{
|
||||
background: checked ? 'var(--gradient)' : undefined,
|
||||
}}
|
||||
checked={checked}
|
||||
onChange={handleChange}
|
||||
{...props}
|
||||
/>
|
||||
<i
|
||||
className={`ri-check-line absolute text-white text-[14px] pointer-events-none transition-opacity ${checked ? 'opacity-100' : 'opacity-0'
|
||||
}`}
|
||||
/>
|
||||
</div>
|
||||
{label && (
|
||||
<span className="text-[14px] text-[#000000] dark:text-white select-none">
|
||||
{label}
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
{error && (
|
||||
<p className="mt-1 text-[13px] text-[#FF3A05] flex items-center gap-1">
|
||||
<i className="ri-error-warning-line" />
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
Checkbox.displayName = "Checkbox";
|
||||
|
||||
export default Checkbox;
|
||||
105
front-end-dash.aggios.app/components/ui/Input.tsx
Normal file
105
front-end-dash.aggios.app/components/ui/Input.tsx
Normal file
@@ -0,0 +1,105 @@
|
||||
"use client";
|
||||
|
||||
import { InputHTMLAttributes, forwardRef, useState } from "react";
|
||||
|
||||
interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
|
||||
label?: string;
|
||||
error?: string;
|
||||
helperText?: string;
|
||||
leftIcon?: string;
|
||||
rightIcon?: string;
|
||||
onRightIconClick?: () => void;
|
||||
}
|
||||
|
||||
const Input = forwardRef<HTMLInputElement, InputProps>(
|
||||
(
|
||||
{
|
||||
label,
|
||||
error,
|
||||
helperText,
|
||||
leftIcon,
|
||||
rightIcon,
|
||||
onRightIconClick,
|
||||
className = "",
|
||||
type,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const [showPassword, setShowPassword] = useState(false);
|
||||
const isPassword = type === "password";
|
||||
|
||||
const inputType = isPassword ? (showPassword ? "text" : "password") : type;
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
{label && (
|
||||
<label className="block text-[13px] font-semibold text-[#000000] dark:text-white mb-2">
|
||||
{label}
|
||||
{props.required && <span className="text-[#FF3A05] ml-1">*</span>}
|
||||
</label>
|
||||
)}
|
||||
<div className="relative">
|
||||
{leftIcon && (
|
||||
<i
|
||||
className={`${leftIcon} absolute left-3.5 top-1/2 -translate-y-1/2 text-[#7D7D7D] dark:text-gray-400 text-[20px]`}
|
||||
/>
|
||||
)}
|
||||
<input
|
||||
ref={ref}
|
||||
type={inputType}
|
||||
className={`
|
||||
w-full px-3.5 py-3 text-[14px] font-normal
|
||||
border rounded-md bg-white dark:bg-gray-700 dark:text-white
|
||||
placeholder:text-[#7D7D7D] dark:placeholder:text-gray-400
|
||||
transition-all
|
||||
${leftIcon ? "pl-11" : ""}
|
||||
${isPassword || rightIcon ? "pr-11" : ""}
|
||||
${error
|
||||
? "border-[#FF3A05]"
|
||||
: "border-[#E5E5E5] dark:border-gray-600 focus:border-[#FF3A05]"
|
||||
}
|
||||
outline-none ring-0 focus:ring-0 shadow-none focus:shadow-none
|
||||
disabled:bg-[#E5E5E5]/30 disabled:cursor-not-allowed
|
||||
${className}
|
||||
`}
|
||||
{...props}
|
||||
/>
|
||||
{isPassword && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3.5 top-1/2 -translate-y-1/2 text-[#7D7D7D] hover:text-[#000000] transition-colors cursor-pointer"
|
||||
>
|
||||
<i
|
||||
className={`${showPassword ? "ri-eye-off-line" : "ri-eye-line"} text-[20px]`}
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
{!isPassword && rightIcon && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onRightIconClick}
|
||||
className="absolute right-3.5 top-1/2 -translate-y-1/2 text-[#7D7D7D] hover:text-[#000000] transition-colors cursor-pointer"
|
||||
>
|
||||
<i className={`${rightIcon} text-[20px]`} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{error && (
|
||||
<p className="mt-1 text-[13px] text-[#FF3A05] flex items-center gap-1">
|
||||
<i className="ri-error-warning-line" />
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
{helperText && !error && (
|
||||
<p className="mt-1 text-[13px] text-[#7D7D7D]">{helperText}</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
Input.displayName = "Input";
|
||||
|
||||
export default Input;
|
||||
211
front-end-dash.aggios.app/components/ui/SearchableSelect.tsx
Normal file
211
front-end-dash.aggios.app/components/ui/SearchableSelect.tsx
Normal file
@@ -0,0 +1,211 @@
|
||||
"use client";
|
||||
|
||||
import { SelectHTMLAttributes, forwardRef, useState, useRef, useEffect } from "react";
|
||||
|
||||
interface SelectOption {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface SearchableSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'onChange'> {
|
||||
label?: string;
|
||||
error?: string;
|
||||
helperText?: string;
|
||||
leftIcon?: string;
|
||||
options: SelectOption[];
|
||||
placeholder?: string;
|
||||
onChange?: (value: string) => void;
|
||||
value?: string;
|
||||
}
|
||||
|
||||
const SearchableSelect = forwardRef<HTMLSelectElement, SearchableSelectProps>(
|
||||
(
|
||||
{
|
||||
label,
|
||||
error,
|
||||
helperText,
|
||||
leftIcon,
|
||||
options,
|
||||
placeholder,
|
||||
className = "",
|
||||
onChange,
|
||||
value,
|
||||
required,
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [selectedOption, setSelectedOption] = useState<SelectOption | null>(
|
||||
options.find(opt => opt.value === value) || null
|
||||
);
|
||||
const containerRef = useRef<HTMLDivElement>(null);
|
||||
const searchInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const filteredOptions = options.filter(option =>
|
||||
option.label.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
|
||||
setIsOpen(false);
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => document.removeEventListener("mousedown", handleClickOutside);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (isOpen && searchInputRef.current) {
|
||||
searchInputRef.current.focus();
|
||||
}
|
||||
}, [isOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
if (value) {
|
||||
const option = options.find(opt => opt.value === value);
|
||||
if (option) {
|
||||
setSelectedOption(option);
|
||||
}
|
||||
}
|
||||
}, [value, options]);
|
||||
|
||||
const handleSelect = (option: SelectOption) => {
|
||||
setSelectedOption(option);
|
||||
setIsOpen(false);
|
||||
setSearchTerm("");
|
||||
if (onChange) {
|
||||
onChange(option.value);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full">
|
||||
{/* Hidden select for form compatibility */}
|
||||
<select
|
||||
ref={ref}
|
||||
value={selectedOption?.value || ""}
|
||||
onChange={(e) => {
|
||||
const option = options.find(opt => opt.value === e.target.value);
|
||||
if (option) handleSelect(option);
|
||||
}}
|
||||
className="hidden"
|
||||
required={required}
|
||||
{...props}
|
||||
>
|
||||
<option value="" disabled>
|
||||
{placeholder || "Selecione uma opção"}
|
||||
</option>
|
||||
{options.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{label && (
|
||||
<label className="block text-[13px] font-semibold text-[#000000] mb-2">
|
||||
{label}
|
||||
{required && <span className="text-[#FF3A05] ml-1">*</span>}
|
||||
</label>
|
||||
)}
|
||||
|
||||
<div ref={containerRef} className="relative">
|
||||
{leftIcon && (
|
||||
<i
|
||||
className={`${leftIcon} absolute left-3.5 top-1/2 -translate-y-1/2 text-[#7D7D7D] text-[20px] pointer-events-none z-10`}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Custom trigger */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setIsOpen(!isOpen)}
|
||||
className={`
|
||||
w-full px-3.5 py-3 text-[14px] font-normal
|
||||
border rounded-md bg-white
|
||||
text-[#000000] text-left
|
||||
transition-all
|
||||
cursor-pointer
|
||||
${leftIcon ? "pl-11" : ""}
|
||||
pr-11
|
||||
${error
|
||||
? "border-[#FF3A05]"
|
||||
: "border-[#E5E5E5] focus:border-[#FF3A05]"
|
||||
}
|
||||
outline-none ring-0 focus:ring-0 shadow-none focus:shadow-none
|
||||
${className}
|
||||
`}
|
||||
>
|
||||
{selectedOption ? selectedOption.label : (
|
||||
<span className="text-[#7D7D7D]">{placeholder || "Selecione uma opção"}</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<i className={`ri-arrow-${isOpen ? 'up' : 'down'}-s-line absolute right-3.5 top-1/2 -translate-y-1/2 text-[#7D7D7D] text-[20px] pointer-events-none transition-transform`} />
|
||||
|
||||
{/* Dropdown */}
|
||||
{isOpen && (
|
||||
<div className="absolute z-50 w-full mt-2 bg-white border border-[#E5E5E5] rounded-md shadow-lg max-h-[300px] overflow-hidden">
|
||||
{/* Search input */}
|
||||
<div className="p-2 border-b border-[#E5E5E5]">
|
||||
<div className="relative">
|
||||
<i className="ri-search-line absolute left-3 top-1/2 -translate-y-1/2 text-[#7D7D7D] text-[16px]" />
|
||||
<input
|
||||
ref={searchInputRef}
|
||||
type="text"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
placeholder="Buscar..."
|
||||
className="w-full pl-9 pr-3 py-2 text-[14px] border border-[#E5E5E5] rounded-md outline-none focus:border-[#FF3A05] shadow-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Options list */}
|
||||
<div className="overflow-y-auto max-h-60">
|
||||
{filteredOptions.length > 0 ? (
|
||||
filteredOptions.map((option) => (
|
||||
<button
|
||||
key={option.value}
|
||||
type="button"
|
||||
onClick={() => handleSelect(option)}
|
||||
className={`
|
||||
w-full px-4 py-2.5 text-left text-[14px] transition-colors
|
||||
hover:bg-[#FDFDFC] cursor-pointer
|
||||
${selectedOption?.value === option.value ? 'bg-[#FF3A05]/10 text-[#FF3A05] font-medium' : 'text-[#000000]'}
|
||||
`}
|
||||
>
|
||||
{option.label}
|
||||
</button>
|
||||
))
|
||||
) : (
|
||||
<div className="px-4 py-8 text-center text-[#7D7D7D] text-[14px]">
|
||||
Nenhum resultado encontrado
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{helperText && !error && (
|
||||
<p className="mt-1.5 text-[12px] text-[#7D7D7D]">{helperText}</p>
|
||||
)}
|
||||
{error && (
|
||||
<p className="mt-1 text-[13px] text-[#FF3A05] flex items-center gap-1">
|
||||
<i className="ri-error-warning-line" />
|
||||
{error}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
SearchableSelect.displayName = "SearchableSelect";
|
||||
|
||||
export default SearchableSelect;
|
||||
89
front-end-dash.aggios.app/components/ui/Select.tsx
Normal file
89
front-end-dash.aggios.app/components/ui/Select.tsx
Normal file
@@ -0,0 +1,89 @@
|
||||
"use client";
|
||||
|
||||
import { SelectHTMLAttributes, forwardRef } from "react";
|
||||
|
||||
interface SelectOption {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface SelectProps extends SelectHTMLAttributes<HTMLSelectElement> {
|
||||
label?: string;
|
||||
error?: string;
|
||||
helperText?: string;
|
||||
leftIcon?: string;
|
||||
options: SelectOption[];
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
const Select = forwardRef<HTMLSelectElement, SelectProps>(
|
||||
(
|
||||
{
|
||||
label,
|
||||
error,
|
||||
helperText,
|
||||
leftIcon,
|
||||
options,
|
||||
placeholder,
|
||||
className = "",
|
||||
...props
|
||||
},
|
||||
ref
|
||||
) => {
|
||||
return (
|
||||
<div className="w-full">
|
||||
{label && (
|
||||
<label className="block text-[13px] font-semibold text-[#000000] mb-2">
|
||||
{label}
|
||||
{props.required && <span className="text-[#FF3A05] ml-1">*</span>}
|
||||
</label>
|
||||
)}
|
||||
<div className="relative">
|
||||
{leftIcon && (
|
||||
<i
|
||||
className={`${leftIcon} absolute left-3.5 top-1/2 -translate-y-1/2 text-[#7D7D7D] text-[20px] pointer-events-none z-10`}
|
||||
/>
|
||||
)}
|
||||
<select
|
||||
ref={ref}
|
||||
className={`
|
||||
w-full px-3.5 py-3 text-[14px] font-normal
|
||||
border rounded-md bg-white
|
||||
text-[#000000]
|
||||
transition-all appearance-none
|
||||
cursor-pointer
|
||||
${leftIcon ? "pl-11" : ""}
|
||||
pr-11
|
||||
${error
|
||||
? "border-[#FF3A05]"
|
||||
: "border-[#E5E5E5] focus:border-[#FF3A05]"
|
||||
}
|
||||
outline-none ring-0 focus:ring-0 shadow-none focus:shadow-none
|
||||
disabled:bg-[#F5F5F5] disabled:cursor-not-allowed
|
||||
${className}
|
||||
`}
|
||||
{...props}
|
||||
>
|
||||
<option value="" disabled>
|
||||
{placeholder || "Selecione uma opção"}
|
||||
</option>
|
||||
{options.map((option) => (
|
||||
<option key={option.value} value={option.value}>
|
||||
{option.label}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
<i className="ri-arrow-down-s-line absolute right-3.5 top-1/2 -translate-y-1/2 text-[#7D7D7D] text-[20px] pointer-events-none" />
|
||||
</div>
|
||||
{helperText && !error && (
|
||||
<p className="mt-1.5 text-[12px] text-[#7D7D7D]">{helperText}</p>
|
||||
)}
|
||||
{error && <p className="mt-1.5 text-[12px] text-[#FF3A05]">{error}</p>}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
Select.displayName = "Select";
|
||||
|
||||
export default Select;
|
||||
5
front-end-dash.aggios.app/components/ui/index.ts
Normal file
5
front-end-dash.aggios.app/components/ui/index.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export { default as Button } from "./Button";
|
||||
export { default as Input } from "./Input";
|
||||
export { default as Checkbox } from "./Checkbox";
|
||||
export { default as Select } from "./Select";
|
||||
export { default as SearchableSelect } from "./SearchableSelect";
|
||||
45
front-end-dash.aggios.app/contexts/ThemeContext.tsx
Normal file
45
front-end-dash.aggios.app/contexts/ThemeContext.tsx
Normal file
@@ -0,0 +1,45 @@
|
||||
'use client';
|
||||
|
||||
import { createContext, useContext, ReactNode } from 'react';
|
||||
|
||||
type Theme = 'light' | 'dark';
|
||||
|
||||
interface ThemeContextType {
|
||||
theme: Theme;
|
||||
toggleTheme: () => void;
|
||||
}
|
||||
|
||||
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
|
||||
|
||||
export function ThemeProvider({ children }: { children: ReactNode }) {
|
||||
const toggleTheme = () => {
|
||||
const html = document.documentElement;
|
||||
const isDark = html.classList.contains('dark');
|
||||
|
||||
if (isDark) {
|
||||
html.classList.remove('dark');
|
||||
localStorage.setItem('theme', 'light');
|
||||
} else {
|
||||
html.classList.add('dark');
|
||||
localStorage.setItem('theme', 'dark');
|
||||
}
|
||||
};
|
||||
|
||||
// Detectar tema atual
|
||||
const isDark = typeof window !== 'undefined' && document.documentElement.classList.contains('dark');
|
||||
const theme: Theme = isDark ? 'dark' : 'light';
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={{ theme, toggleTheme }}>
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export function useTheme() {
|
||||
const context = useContext(ThemeContext);
|
||||
if (context === undefined) {
|
||||
throw new Error('useTheme must be used within a ThemeProvider');
|
||||
}
|
||||
return context;
|
||||
}
|
||||
18
front-end-dash.aggios.app/eslint.config.mjs
Normal file
18
front-end-dash.aggios.app/eslint.config.mjs
Normal file
@@ -0,0 +1,18 @@
|
||||
import { defineConfig, globalIgnores } from "eslint/config";
|
||||
import nextVitals from "eslint-config-next/core-web-vitals";
|
||||
import nextTs from "eslint-config-next/typescript";
|
||||
|
||||
const eslintConfig = defineConfig([
|
||||
...nextVitals,
|
||||
...nextTs,
|
||||
// Override default ignores of eslint-config-next.
|
||||
globalIgnores([
|
||||
// Default ignores of eslint-config-next:
|
||||
".next/**",
|
||||
"out/**",
|
||||
"build/**",
|
||||
"next-env.d.ts",
|
||||
]),
|
||||
]);
|
||||
|
||||
export default eslintConfig;
|
||||
53
front-end-dash.aggios.app/lib/api.ts
Normal file
53
front-end-dash.aggios.app/lib/api.ts
Normal file
@@ -0,0 +1,53 @@
|
||||
/**
|
||||
* API Configuration - URLs e funções de requisição
|
||||
*/
|
||||
|
||||
// URL base da API - pode ser alterada por variável de ambiente
|
||||
export const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://api.localhost';
|
||||
|
||||
/**
|
||||
* Endpoints da API
|
||||
*/
|
||||
export const API_ENDPOINTS = {
|
||||
// Auth
|
||||
register: `${API_BASE_URL}/api/auth/register`,
|
||||
login: `${API_BASE_URL}/api/auth/login`,
|
||||
logout: `${API_BASE_URL}/api/auth/logout`,
|
||||
refresh: `${API_BASE_URL}/api/auth/refresh`,
|
||||
me: `${API_BASE_URL}/api/me`,
|
||||
|
||||
// Health
|
||||
health: `${API_BASE_URL}/health`,
|
||||
apiHealth: `${API_BASE_URL}/api/health`,
|
||||
} as const;
|
||||
|
||||
/**
|
||||
* Wrapper para fetch com tratamento de erros
|
||||
*/
|
||||
export async function apiRequest<T = any>(
|
||||
url: string,
|
||||
options?: RequestInit
|
||||
): Promise<T> {
|
||||
try {
|
||||
const response = await fetch(url, {
|
||||
...options,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...options?.headers,
|
||||
},
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.message || `Erro ${response.status}`);
|
||||
}
|
||||
|
||||
return data;
|
||||
} catch (error) {
|
||||
if (error instanceof Error) {
|
||||
throw error;
|
||||
}
|
||||
throw new Error('Erro desconhecido na requisição');
|
||||
}
|
||||
}
|
||||
78
front-end-dash.aggios.app/lib/auth.ts
Normal file
78
front-end-dash.aggios.app/lib/auth.ts
Normal file
@@ -0,0 +1,78 @@
|
||||
/**
|
||||
* Auth utilities - Gerenciamento de autenticação no cliente
|
||||
*/
|
||||
|
||||
export interface User {
|
||||
id: string;
|
||||
email: string;
|
||||
name: string;
|
||||
tenantId: string;
|
||||
company: string;
|
||||
subdomain: string;
|
||||
}
|
||||
|
||||
const TOKEN_KEY = 'token';
|
||||
const USER_KEY = 'user';
|
||||
|
||||
/**
|
||||
* Salva token e dados do usuário no localStorage
|
||||
*/
|
||||
export function saveAuth(token: string, user: User): void {
|
||||
if (typeof window === 'undefined') return;
|
||||
|
||||
localStorage.setItem(TOKEN_KEY, token);
|
||||
localStorage.setItem(USER_KEY, JSON.stringify(user));
|
||||
}
|
||||
|
||||
/**
|
||||
* Retorna o token JWT armazenado
|
||||
*/
|
||||
export function getToken(): string | null {
|
||||
if (typeof window === 'undefined') return null;
|
||||
return localStorage.getItem(TOKEN_KEY);
|
||||
}
|
||||
|
||||
/**
|
||||
* Retorna os dados do usuário armazenados
|
||||
*/
|
||||
export function getUser(): User | null {
|
||||
if (typeof window === 'undefined') return null;
|
||||
|
||||
const userStr = localStorage.getItem(USER_KEY);
|
||||
if (!userStr) return null;
|
||||
|
||||
try {
|
||||
return JSON.parse(userStr);
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Verifica se o usuário está autenticado
|
||||
*/
|
||||
export function isAuthenticated(): boolean {
|
||||
return !!getToken() && !!getUser();
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove token e dados do usuário (logout)
|
||||
*/
|
||||
export function clearAuth(): void {
|
||||
if (typeof window === 'undefined') return;
|
||||
|
||||
localStorage.removeItem(TOKEN_KEY);
|
||||
localStorage.removeItem(USER_KEY);
|
||||
}
|
||||
|
||||
/**
|
||||
* Retorna headers com Authorization para requisições autenticadas
|
||||
*/
|
||||
export function getAuthHeaders(): HeadersInit {
|
||||
const token = getToken();
|
||||
|
||||
return {
|
||||
'Content-Type': 'application/json',
|
||||
...(token ? { 'Authorization': `Bearer ${token}` } : {}),
|
||||
};
|
||||
}
|
||||
7
front-end-dash.aggios.app/next.config.ts
Normal file
7
front-end-dash.aggios.app/next.config.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import type { NextConfig } from "next";
|
||||
|
||||
const nextConfig: NextConfig = {
|
||||
/* config options here */
|
||||
};
|
||||
|
||||
export default nextConfig;
|
||||
6592
front-end-dash.aggios.app/package-lock.json
generated
Normal file
6592
front-end-dash.aggios.app/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
28
front-end-dash.aggios.app/package.json
Normal file
28
front-end-dash.aggios.app/package.json
Normal file
@@ -0,0 +1,28 @@
|
||||
{
|
||||
"name": "dash.aggios.app",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "eslint"
|
||||
},
|
||||
"dependencies": {
|
||||
"next": "16.0.7",
|
||||
"react": "19.2.0",
|
||||
"react-dom": "19.2.0",
|
||||
"react-hot-toast": "^2.6.0",
|
||||
"remixicon": "^4.7.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tailwindcss/postcss": "^4",
|
||||
"@types/node": "^20",
|
||||
"@types/react": "^19",
|
||||
"@types/react-dom": "^19",
|
||||
"eslint": "^9",
|
||||
"eslint-config-next": "16.0.7",
|
||||
"tailwindcss": "^4",
|
||||
"typescript": "^5"
|
||||
}
|
||||
}
|
||||
7
front-end-dash.aggios.app/postcss.config.mjs
Normal file
7
front-end-dash.aggios.app/postcss.config.mjs
Normal file
@@ -0,0 +1,7 @@
|
||||
const config = {
|
||||
plugins: {
|
||||
"@tailwindcss/postcss": {},
|
||||
},
|
||||
};
|
||||
|
||||
export default config;
|
||||
1
front-end-dash.aggios.app/public/file.svg
Normal file
1
front-end-dash.aggios.app/public/file.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||
|
After Width: | Height: | Size: 391 B |
1
front-end-dash.aggios.app/public/globe.svg
Normal file
1
front-end-dash.aggios.app/public/globe.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
1
front-end-dash.aggios.app/public/next.svg
Normal file
1
front-end-dash.aggios.app/public/next.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
1
front-end-dash.aggios.app/public/vercel.svg
Normal file
1
front-end-dash.aggios.app/public/vercel.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 128 B |
1
front-end-dash.aggios.app/public/window.svg
Normal file
1
front-end-dash.aggios.app/public/window.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||
|
After Width: | Height: | Size: 385 B |
34
front-end-dash.aggios.app/tsconfig.json
Normal file
34
front-end-dash.aggios.app/tsconfig.json
Normal file
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2017",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"noEmit": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "react-jsx",
|
||||
"incremental": true,
|
||||
"plugins": [
|
||||
{
|
||||
"name": "next"
|
||||
}
|
||||
],
|
||||
"paths": {
|
||||
"@/*": ["./*"]
|
||||
}
|
||||
},
|
||||
"include": [
|
||||
"next-env.d.ts",
|
||||
"**/*.ts",
|
||||
"**/*.tsx",
|
||||
".next/types/**/*.ts",
|
||||
".next/dev/types/**/*.ts",
|
||||
"**/*.mts"
|
||||
],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
Reference in New Issue
Block a user