feat(web): foundation com brand JCS + AntD theme + Rafael painel placeholder
- Design tokens (CSS variables) espelhando brand.md v1.0:
- Paleta JCS Blue #004a99 + estados funcionais
- Plus Jakarta Sans Variable self-host (LGPD + perf)
- Radius 12/20, sombra 0 4px 25px rgba(0,0,0,0.05)
- Layout topbar 80 + sidebar 260 (brand.md canon)
- AntD ConfigProvider com tema JCS (cores, fonts, radius, shadow, motion)
- TanStack Router + Query setup com defaults conservadores
- AppShell desktop (Topbar + Sidebar) com tom canônico
- RafaelPainel placeholder com vocabulário canônico:
meta de maio, clientes esfriando (OPENFRIOS 47 dias), próxima visita,
comissão+FLEX, copy direta apple-inspired
- Logos copiadas para apps/web/public/
- Limpeza: removidos placeholders Nx (app.tsx, nx-welcome.tsx, styles.css)
- pt-BR locale (dayjs + AntD)
- Build OK: 878KB JS (vai code-splitar pós cockpits separados)
Refs: brand.md, design-artifacts/A-Product-Brief/03-visual-direction.md,
design-artifacts/B-Trigger-Map/personas/02-rafael-representante.md
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -1,13 +1,14 @@
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="pt-BR">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<title>Web</title>
|
<title>SAR — Força de Vendas</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
|
||||||
|
<meta name="description" content="SAR — Plataforma de força de vendas com 4 cockpits, WhatsApp nativo e IA estratégica." />
|
||||||
|
<meta name="theme-color" content="#004a99" />
|
||||||
<base href="/" />
|
<base href="/" />
|
||||||
|
<link rel="icon" type="image/png" href="/sar-icon.png" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<link rel="apple-touch-icon" href="/sar-icon.png" />
|
||||||
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
|
|
||||||
<link rel="stylesheet" href="/src/styles.css" />
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
|||||||
25
apps/web/package.json
Normal file
25
apps/web/package.json
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
{
|
||||||
|
"name": "@sar/web",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"description": "SAR · Web (React 19 + Vite 8 + AntD 6.4)",
|
||||||
|
"dependencies": {
|
||||||
|
"@ant-design/icons": "^6.2.3",
|
||||||
|
"@fontsource-variable/plus-jakarta-sans": "^5.2.8",
|
||||||
|
"@fortawesome/fontawesome-svg-core": "^7.2.0",
|
||||||
|
"@fortawesome/free-regular-svg-icons": "^7.2.0",
|
||||||
|
"@fortawesome/free-solid-svg-icons": "^7.2.0",
|
||||||
|
"@fortawesome/react-fontawesome": "^3.3.1",
|
||||||
|
"@hookform/resolvers": "^5.4.0",
|
||||||
|
"@tanstack/react-query": "^5.100.14",
|
||||||
|
"@tanstack/react-router": "^1.170.8",
|
||||||
|
"antd": "^6.4.3",
|
||||||
|
"chart.js": "^4.5.1",
|
||||||
|
"dayjs": "^1.11.21",
|
||||||
|
"react-chartjs-2": "^5.3.1",
|
||||||
|
"react-hook-form": "^7.76.1",
|
||||||
|
"zod": "catalog:",
|
||||||
|
"zustand": "^5.0.13"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
apps/web/public/sar-icon.png
Normal file
BIN
apps/web/public/sar-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 569 KiB |
BIN
apps/web/public/sar-logo.png
Normal file
BIN
apps/web/public/sar-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 397 KiB |
@@ -1 +0,0 @@
|
|||||||
/* Your styles goes here. */
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
import { render } from '@testing-library/react';
|
|
||||||
|
|
||||||
import App from './app';
|
|
||||||
|
|
||||||
describe('App', () => {
|
|
||||||
it('should render successfully', () => {
|
|
||||||
const { baseElement } = render(<App />);
|
|
||||||
expect(baseElement).toBeTruthy();
|
|
||||||
});
|
|
||||||
|
|
||||||
it('should have a greeting as the title', () => {
|
|
||||||
const { getAllByText } = render(<App />);
|
|
||||||
expect(getAllByText(new RegExp('Welcome web', 'gi')).length > 0).toBeTruthy();
|
|
||||||
});
|
|
||||||
});
|
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
// Uncomment this line to use CSS modules
|
|
||||||
// import styles from './app.module.css';
|
|
||||||
import NxWelcome from './nx-welcome';
|
|
||||||
|
|
||||||
export function App() {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<NxWelcome title="web" />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
@@ -1,851 +0,0 @@
|
|||||||
/*
|
|
||||||
* * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
||||||
This is a starter component and can be deleted.
|
|
||||||
* * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
||||||
Delete this file and get started with your project!
|
|
||||||
* * * * * * * * * * * * * * * * * * * * * * * * * * * *
|
|
||||||
*/
|
|
||||||
export function NxWelcome({ title }: { title: string }) {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<style
|
|
||||||
dangerouslySetInnerHTML={{
|
|
||||||
__html: `
|
|
||||||
html {
|
|
||||||
-webkit-text-size-adjust: 100%;
|
|
||||||
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
|
|
||||||
'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
|
|
||||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
|
|
||||||
'Noto Color Emoji';
|
|
||||||
line-height: 1.5;
|
|
||||||
tab-size: 4;
|
|
||||||
scroll-behavior: smooth;
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
font-family: inherit;
|
|
||||||
line-height: inherit;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
p,
|
|
||||||
pre {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
*,
|
|
||||||
::before,
|
|
||||||
::after {
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-width: 0;
|
|
||||||
border-style: solid;
|
|
||||||
border-color: currentColor;
|
|
||||||
}
|
|
||||||
h1,
|
|
||||||
h2 {
|
|
||||||
font-size: inherit;
|
|
||||||
font-weight: inherit;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
color: inherit;
|
|
||||||
text-decoration: inherit;
|
|
||||||
}
|
|
||||||
pre {
|
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
|
||||||
'Liberation Mono', 'Courier New', monospace;
|
|
||||||
}
|
|
||||||
svg {
|
|
||||||
display: block;
|
|
||||||
vertical-align: middle;
|
|
||||||
shape-rendering: auto;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
}
|
|
||||||
pre {
|
|
||||||
background-color: rgba(55, 65, 81, 1);
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
color: rgba(229, 231, 235, 1);
|
|
||||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
|
|
||||||
'Liberation Mono', 'Courier New', monospace;
|
|
||||||
overflow: auto;
|
|
||||||
padding: 0.5rem 0.75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.shadow {
|
|
||||||
box-shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgba(0, 0, 0, 0.1),
|
|
||||||
0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
|
||||||
}
|
|
||||||
.rounded {
|
|
||||||
border-radius: 1.5rem;
|
|
||||||
}
|
|
||||||
.wrapper {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.container {
|
|
||||||
margin-left: auto;
|
|
||||||
margin-right: auto;
|
|
||||||
max-width: 768px;
|
|
||||||
padding-bottom: 3rem;
|
|
||||||
padding-left: 1rem;
|
|
||||||
padding-right: 1rem;
|
|
||||||
color: rgba(55, 65, 81, 1);
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
#welcome {
|
|
||||||
margin-top: 2.5rem;
|
|
||||||
}
|
|
||||||
#welcome h1 {
|
|
||||||
font-size: 3rem;
|
|
||||||
font-weight: 500;
|
|
||||||
letter-spacing: -0.025em;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
#welcome span {
|
|
||||||
display: block;
|
|
||||||
font-size: 1.875rem;
|
|
||||||
font-weight: 300;
|
|
||||||
line-height: 2.25rem;
|
|
||||||
margin-bottom: 0.5rem;
|
|
||||||
}
|
|
||||||
#hero {
|
|
||||||
align-items: center;
|
|
||||||
background-color: hsla(214, 62%, 21%, 1);
|
|
||||||
border: none;
|
|
||||||
box-sizing: border-box;
|
|
||||||
color: rgba(55, 65, 81, 1);
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
margin-top: 3.5rem;
|
|
||||||
}
|
|
||||||
#hero .text-container {
|
|
||||||
color: rgba(255, 255, 255, 1);
|
|
||||||
padding: 3rem 2rem;
|
|
||||||
}
|
|
||||||
#hero .text-container h2 {
|
|
||||||
font-size: 1.5rem;
|
|
||||||
line-height: 2rem;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
#hero .text-container h2 svg {
|
|
||||||
color: hsla(162, 47%, 50%, 1);
|
|
||||||
height: 2rem;
|
|
||||||
left: -0.25rem;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
width: 2rem;
|
|
||||||
}
|
|
||||||
#hero .text-container h2 span {
|
|
||||||
margin-left: 2.5rem;
|
|
||||||
}
|
|
||||||
#hero .text-container a {
|
|
||||||
background-color: rgba(255, 255, 255, 1);
|
|
||||||
border-radius: 0.75rem;
|
|
||||||
color: rgba(55, 65, 81, 1);
|
|
||||||
display: inline-block;
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
text-decoration: inherit;
|
|
||||||
}
|
|
||||||
#hero .logo-container {
|
|
||||||
display: none;
|
|
||||||
justify-content: center;
|
|
||||||
padding-left: 2rem;
|
|
||||||
padding-right: 2rem;
|
|
||||||
}
|
|
||||||
#hero .logo-container svg {
|
|
||||||
color: rgba(255, 255, 255, 1);
|
|
||||||
width: 66.666667%;
|
|
||||||
}
|
|
||||||
#middle-content {
|
|
||||||
align-items: flex-start;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr;
|
|
||||||
margin-top: 3.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
#middle-content #middle-content-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
#learning-materials {
|
|
||||||
padding: 2.5rem 2rem;
|
|
||||||
}
|
|
||||||
#learning-materials h2 {
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 1.25rem;
|
|
||||||
letter-spacing: -0.025em;
|
|
||||||
line-height: 1.75rem;
|
|
||||||
padding-left: 1rem;
|
|
||||||
padding-right: 1rem;
|
|
||||||
}
|
|
||||||
.list-item-link {
|
|
||||||
align-items: center;
|
|
||||||
border-radius: 0.75rem;
|
|
||||||
display: flex;
|
|
||||||
margin-top: 1rem;
|
|
||||||
padding: 1rem;
|
|
||||||
transition-property: background-color, border-color, color, fill, stroke,
|
|
||||||
opacity, box-shadow, transform, filter, backdrop-filter,
|
|
||||||
-webkit-backdrop-filter;
|
|
||||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
transition-duration: 150ms;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.list-item-link svg:first-child {
|
|
||||||
margin-right: 1rem;
|
|
||||||
height: 1.5rem;
|
|
||||||
transition-property: background-color, border-color, color, fill, stroke,
|
|
||||||
opacity, box-shadow, transform, filter, backdrop-filter,
|
|
||||||
-webkit-backdrop-filter;
|
|
||||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
transition-duration: 150ms;
|
|
||||||
width: 1.5rem;
|
|
||||||
}
|
|
||||||
.list-item-link > span {
|
|
||||||
flex-grow: 1;
|
|
||||||
font-weight: 400;
|
|
||||||
transition-property: background-color, border-color, color, fill, stroke,
|
|
||||||
opacity, box-shadow, transform, filter, backdrop-filter,
|
|
||||||
-webkit-backdrop-filter;
|
|
||||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
.list-item-link > span > span {
|
|
||||||
color: rgba(107, 114, 128, 1);
|
|
||||||
display: block;
|
|
||||||
flex-grow: 1;
|
|
||||||
font-size: 0.75rem;
|
|
||||||
font-weight: 300;
|
|
||||||
line-height: 1rem;
|
|
||||||
transition-property: background-color, border-color, color, fill, stroke,
|
|
||||||
opacity, box-shadow, transform, filter, backdrop-filter,
|
|
||||||
-webkit-backdrop-filter;
|
|
||||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
}
|
|
||||||
.list-item-link svg:last-child {
|
|
||||||
height: 1rem;
|
|
||||||
transition-property: all;
|
|
||||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
transition-duration: 150ms;
|
|
||||||
width: 1rem;
|
|
||||||
}
|
|
||||||
.list-item-link:hover {
|
|
||||||
color: rgba(255, 255, 255, 1);
|
|
||||||
background-color: hsla(162, 55%, 33%, 1);
|
|
||||||
}
|
|
||||||
.list-item-link:hover > span {}
|
|
||||||
.list-item-link:hover > span > span {
|
|
||||||
color: rgba(243, 244, 246, 1);
|
|
||||||
}
|
|
||||||
.list-item-link:hover svg:last-child {
|
|
||||||
transform: translateX(0.25rem);
|
|
||||||
}
|
|
||||||
#other-links {}
|
|
||||||
.button-pill {
|
|
||||||
padding: 1.5rem 2rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
transition-duration: 300ms;
|
|
||||||
transition-property: background-color, border-color, color, fill, stroke,
|
|
||||||
opacity, box-shadow, transform, filter, backdrop-filter,
|
|
||||||
-webkit-backdrop-filter;
|
|
||||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
.button-pill svg {
|
|
||||||
transition-property: background-color, border-color, color, fill, stroke,
|
|
||||||
opacity, box-shadow, transform, filter, backdrop-filter,
|
|
||||||
-webkit-backdrop-filter;
|
|
||||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
transition-duration: 150ms;
|
|
||||||
flex-shrink: 0;
|
|
||||||
width: 3rem;
|
|
||||||
}
|
|
||||||
.button-pill > span {
|
|
||||||
letter-spacing: -0.025em;
|
|
||||||
font-weight: 400;
|
|
||||||
font-size: 1.125rem;
|
|
||||||
line-height: 1.75rem;
|
|
||||||
padding-left: 1rem;
|
|
||||||
padding-right: 1rem;
|
|
||||||
}
|
|
||||||
.button-pill span span {
|
|
||||||
display: block;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 300;
|
|
||||||
line-height: 1.25rem;
|
|
||||||
}
|
|
||||||
.button-pill:hover svg,
|
|
||||||
.button-pill:hover {
|
|
||||||
color: rgba(255, 255, 255, 1) !important;
|
|
||||||
}
|
|
||||||
#nx-console:hover {
|
|
||||||
background-color: rgba(0, 122, 204, 1);
|
|
||||||
}
|
|
||||||
#nx-console svg {
|
|
||||||
color: rgba(0, 122, 204, 1);
|
|
||||||
}
|
|
||||||
#nx-console-jetbrains {
|
|
||||||
margin-top: 2rem;
|
|
||||||
}
|
|
||||||
#nx-console-jetbrains:hover {
|
|
||||||
background-color: rgba(255, 49, 140, 1);
|
|
||||||
}
|
|
||||||
#nx-console-jetbrains svg {
|
|
||||||
color: rgba(255, 49, 140, 1);
|
|
||||||
}
|
|
||||||
#nx-repo:hover {
|
|
||||||
background-color: rgba(24, 23, 23, 1);
|
|
||||||
}
|
|
||||||
#nx-repo svg {
|
|
||||||
color: rgba(24, 23, 23, 1);
|
|
||||||
}
|
|
||||||
#nx-cloud {
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
margin-top: 2rem;
|
|
||||||
padding: 2.5rem 2rem;
|
|
||||||
}
|
|
||||||
#nx-cloud > div {
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
#nx-cloud > div svg {
|
|
||||||
border-radius: 0.375rem;
|
|
||||||
flex-shrink: 0;
|
|
||||||
width: 3rem;
|
|
||||||
}
|
|
||||||
#nx-cloud > div h2 {
|
|
||||||
font-size: 1.125rem;
|
|
||||||
font-weight: 400;
|
|
||||||
letter-spacing: -0.025em;
|
|
||||||
line-height: 1.75rem;
|
|
||||||
padding-left: 1rem;
|
|
||||||
padding-right: 1rem;
|
|
||||||
}
|
|
||||||
#nx-cloud > div h2 span {
|
|
||||||
display: block;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
font-weight: 300;
|
|
||||||
line-height: 1.25rem;
|
|
||||||
}
|
|
||||||
#nx-cloud p {
|
|
||||||
font-size: 1rem;
|
|
||||||
line-height: 1.5rem;
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
#nx-cloud pre {
|
|
||||||
margin-top: 1rem;
|
|
||||||
}
|
|
||||||
#nx-cloud a {
|
|
||||||
color: rgba(107, 114, 128, 1);
|
|
||||||
display: block;
|
|
||||||
font-size: 0.875rem;
|
|
||||||
line-height: 1.25rem;
|
|
||||||
margin-top: 1.5rem;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
#nx-cloud a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
#commands {
|
|
||||||
padding: 2.5rem 2rem;
|
|
||||||
margin-top: 3.5rem;
|
|
||||||
}
|
|
||||||
#commands h2 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
font-weight: 400;
|
|
||||||
letter-spacing: -0.025em;
|
|
||||||
line-height: 1.75rem;
|
|
||||||
padding-left: 1rem;
|
|
||||||
padding-right: 1rem;
|
|
||||||
}
|
|
||||||
#commands p {
|
|
||||||
font-size: 1rem;
|
|
||||||
font-weight: 300;
|
|
||||||
line-height: 1.5rem;
|
|
||||||
margin-top: 1rem;
|
|
||||||
padding-left: 1rem;
|
|
||||||
padding-right: 1rem;
|
|
||||||
}
|
|
||||||
details {
|
|
||||||
align-items: center;
|
|
||||||
display: flex;
|
|
||||||
margin-top: 1rem;
|
|
||||||
padding-left: 1rem;
|
|
||||||
padding-right: 1rem;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
details pre > span {
|
|
||||||
color: rgba(181, 181, 181, 1);
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
summary {
|
|
||||||
border-radius: 0.5rem;
|
|
||||||
display: flex;
|
|
||||||
font-weight: 400;
|
|
||||||
padding: 0.5rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition-property: background-color, border-color, color, fill, stroke,
|
|
||||||
opacity, box-shadow, transform, filter, backdrop-filter,
|
|
||||||
-webkit-backdrop-filter;
|
|
||||||
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
||||||
transition-duration: 150ms;
|
|
||||||
}
|
|
||||||
summary:hover {
|
|
||||||
background-color: rgba(243, 244, 246, 1);
|
|
||||||
}
|
|
||||||
summary svg {
|
|
||||||
height: 1.5rem;
|
|
||||||
margin-right: 1rem;
|
|
||||||
width: 1.5rem;
|
|
||||||
}
|
|
||||||
#love {
|
|
||||||
color: rgba(107, 114, 128, 1);
|
|
||||||
font-size: 0.875rem;
|
|
||||||
line-height: 1.25rem;
|
|
||||||
margin-top: 3.5rem;
|
|
||||||
opacity: 0.6;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
#love svg {
|
|
||||||
color: rgba(252, 165, 165, 1);
|
|
||||||
width: 1.25rem;
|
|
||||||
height: 1.25rem;
|
|
||||||
display: inline;
|
|
||||||
margin-top: -0.25rem;
|
|
||||||
}
|
|
||||||
@media screen and (min-width: 768px) {
|
|
||||||
#hero {
|
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
||||||
}
|
|
||||||
#hero .logo-container {
|
|
||||||
display: flex;
|
|
||||||
}
|
|
||||||
#middle-content {
|
|
||||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
||||||
gap: 4rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
`,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div className="wrapper">
|
|
||||||
<div className="container">
|
|
||||||
<div id="welcome">
|
|
||||||
<h1>
|
|
||||||
<span> Hello there, </span>
|
|
||||||
Welcome {title} 👋
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="hero" className="rounded">
|
|
||||||
<div className="text-container">
|
|
||||||
<h2>
|
|
||||||
<svg
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span>You're up and running</span>
|
|
||||||
</h2>
|
|
||||||
<a href="#commands"> What's next? </a>
|
|
||||||
</div>
|
|
||||||
<div className="logo-container">
|
|
||||||
<svg
|
|
||||||
fill="currentColor"
|
|
||||||
role="img"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path d="M11.987 14.138l-3.132 4.923-5.193-8.427-.012 8.822H0V4.544h3.691l5.247 8.833.005-3.998 3.044 4.759zm.601-5.761c.024-.048 0-3.784.008-3.833h-3.65c.002.059-.005 3.776-.003 3.833h3.645zm5.634 4.134a2.061 2.061 0 0 0-1.969 1.336 1.963 1.963 0 0 1 2.343-.739c.396.161.917.422 1.33.283a2.1 2.1 0 0 0-1.704-.88zm3.39 1.061c-.375-.13-.8-.277-1.109-.681-.06-.08-.116-.17-.176-.265a2.143 2.143 0 0 0-.533-.642c-.294-.216-.68-.322-1.18-.322a2.482 2.482 0 0 0-2.294 1.536 2.325 2.325 0 0 1 4.002.388.75.75 0 0 0 .836.334c.493-.105.46.36 1.203.518v-.133c-.003-.446-.246-.55-.75-.733zm2.024 1.266a.723.723 0 0 0 .347-.638c-.01-2.957-2.41-5.487-5.37-5.487a5.364 5.364 0 0 0-4.487 2.418c-.01-.026-1.522-2.39-1.538-2.418H8.943l3.463 5.423-3.379 5.32h3.54l1.54-2.366 1.568 2.366h3.541l-3.21-5.052a.7.7 0 0 1-.084-.32 2.69 2.69 0 0 1 2.69-2.691h.001c1.488 0 1.736.89 2.057 1.308.634.826 1.9.464 1.9 1.541a.707.707 0 0 0 1.066.596zm.35.133c-.173.372-.56.338-.755.639-.176.271.114.412.114.412s.337.156.538-.311c.104-.231.14-.488.103-.74z" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="middle-content">
|
|
||||||
<div id="middle-content-container">
|
|
||||||
<div id="learning-materials" className="rounded shadow">
|
|
||||||
<h2>Learning materials</h2>
|
|
||||||
<a
|
|
||||||
href="https://nx.dev/getting-started/intro?utm_source=nx-project"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
className="list-item-link"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span>
|
|
||||||
Documentation
|
|
||||||
<span> Everything is in there </span>
|
|
||||||
</span>
|
|
||||||
<svg
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M9 5l7 7-7 7"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://nx.dev/blog/?utm_source=nx-project"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
className="list-item-link"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span>
|
|
||||||
Blog
|
|
||||||
<span> Changelog, features & events </span>
|
|
||||||
</span>
|
|
||||||
<svg
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M9 5l7 7-7 7"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://www.youtube.com/@NxDevtools/videos?utm_source=nx-project&sub_confirmation=1"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
className="list-item-link"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
role="img"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="currentColor"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<title>YouTube</title>
|
|
||||||
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
|
|
||||||
</svg>
|
|
||||||
<span>
|
|
||||||
YouTube channel
|
|
||||||
<span> Nx Show, talks & tutorials </span>
|
|
||||||
</span>
|
|
||||||
<svg
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M9 5l7 7-7 7"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://nx.dev/react-tutorial/1-code-generation?utm_source=nx-project"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
className="list-item-link"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M15 15l-2 5L9 9l11 4-5 2zm0 0l5 5M7.188 2.239l.777 2.897M5.136 7.965l-2.898-.777M13.95 4.05l-2.122 2.122m-5.657 5.656l-2.12 2.122"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<span>
|
|
||||||
Interactive tutorials
|
|
||||||
<span> Create an app, step-by-step </span>
|
|
||||||
</span>
|
|
||||||
<svg
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M9 5l7 7-7 7"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<a
|
|
||||||
id="nx-repo"
|
|
||||||
className="button-pill rounded shadow"
|
|
||||||
href="https://github.com/nrwl/nx?utm_source=nx-project"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
fill="currentColor"
|
|
||||||
role="img"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
|
|
||||||
</svg>
|
|
||||||
<span>
|
|
||||||
Nx is open source
|
|
||||||
<span> Love Nx? Give us a star! </span>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
<div id="other-links">
|
|
||||||
<a
|
|
||||||
id="nx-console"
|
|
||||||
className="button-pill rounded shadow"
|
|
||||||
href="https://marketplace.visualstudio.com/items?itemName=nrwl.angular-console&utm_source=nx-project"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
fill="currentColor"
|
|
||||||
role="img"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<title>Visual Studio Code</title>
|
|
||||||
<path d="M23.15 2.587L18.21.21a1.494 1.494 0 0 0-1.705.29l-9.46 8.63-4.12-3.128a.999.999 0 0 0-1.276.057L.327 7.261A1 1 0 0 0 .326 8.74L3.899 12 .326 15.26a1 1 0 0 0 .001 1.479L1.65 17.94a.999.999 0 0 0 1.276.057l4.12-3.128 9.46 8.63a1.492 1.492 0 0 0 1.704.29l4.942-2.377A1.5 1.5 0 0 0 24 20.06V3.939a1.5 1.5 0 0 0-.85-1.352zm-5.146 14.861L10.826 12l7.178-5.448v10.896z" />
|
|
||||||
</svg>
|
|
||||||
<span>
|
|
||||||
Install Nx Console for VSCode
|
|
||||||
<span>The official VSCode extension for Nx.</span>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
id="nx-console-jetbrains"
|
|
||||||
className="button-pill rounded shadow"
|
|
||||||
href="https://plugins.jetbrains.com/plugin/21060-nx-console"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
height="48"
|
|
||||||
width="48"
|
|
||||||
viewBox="20 20 60 60"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path d="m22.5 22.5h60v60h-60z" />
|
|
||||||
<g fill="#fff">
|
|
||||||
<path d="m29.03 71.25h22.5v3.75h-22.5z" />
|
|
||||||
<path d="m28.09 38 1.67-1.58a1.88 1.88 0 0 0 1.47.87c.64 0 1.06-.44 1.06-1.31v-5.98h2.58v6a3.48 3.48 0 0 1 -.87 2.6 3.56 3.56 0 0 1 -2.57.95 3.84 3.84 0 0 1 -3.34-1.55z" />
|
|
||||||
<path d="m36 30h7.53v2.19h-5v1.44h4.49v2h-4.42v1.49h5v2.21h-7.6z" />
|
|
||||||
<path d="m47.23 32.29h-2.8v-2.29h8.21v2.27h-2.81v7.1h-2.6z" />
|
|
||||||
<path d="m29.13 43.08h4.42a3.53 3.53 0 0 1 2.55.83 2.09 2.09 0 0 1 .6 1.53 2.16 2.16 0 0 1 -1.44 2.09 2.27 2.27 0 0 1 1.86 2.29c0 1.61-1.31 2.59-3.55 2.59h-4.44zm5 2.89c0-.52-.42-.8-1.18-.8h-1.29v1.64h1.24c.79 0 1.25-.26 1.25-.81zm-.9 2.66h-1.57v1.73h1.62c.8 0 1.24-.31 1.24-.86 0-.5-.4-.87-1.27-.87z" />
|
|
||||||
<path d="m38 43.08h4.1a4.19 4.19 0 0 1 3 1 2.93 2.93 0 0 1 .9 2.19 3 3 0 0 1 -1.93 2.89l2.24 3.27h-3l-1.88-2.84h-.87v2.84h-2.56zm4 4.5c.87 0 1.39-.43 1.39-1.11 0-.75-.54-1.12-1.4-1.12h-1.44v2.26z" />
|
|
||||||
<path d="m49.59 43h2.5l4 9.44h-2.79l-.67-1.69h-3.63l-.67 1.69h-2.71zm2.27 5.73-1-2.65-1.06 2.65z" />
|
|
||||||
<path d="m56.46 43.05h2.6v9.37h-2.6z" />
|
|
||||||
<path d="m60.06 43.05h2.42l3.37 5v-5h2.57v9.37h-2.26l-3.53-5.14v5.14h-2.57z" />
|
|
||||||
<path d="m68.86 51 1.45-1.73a4.84 4.84 0 0 0 3 1.13c.71 0 1.08-.24 1.08-.65 0-.4-.31-.6-1.59-.91-2-.46-3.53-1-3.53-2.93 0-1.74 1.37-3 3.62-3a5.89 5.89 0 0 1 3.86 1.25l-1.26 1.84a4.63 4.63 0 0 0 -2.62-.92c-.63 0-.94.25-.94.6 0 .42.32.61 1.63.91 2.14.46 3.44 1.16 3.44 2.91 0 1.91-1.51 3-3.79 3a6.58 6.58 0 0 1 -4.35-1.5z" />
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
<span>
|
|
||||||
Install Nx Console for JetBrains
|
|
||||||
<span>Available for WebStorm, Intellij IDEA Ultimate and more!</span>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
<div id="nx-cloud" className="rounded shadow">
|
|
||||||
<div>
|
|
||||||
<svg
|
|
||||||
id="nx-cloud-logo"
|
|
||||||
role="img"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
stroke="currentColor"
|
|
||||||
fill="transparent"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M23 3.75V6.5c-3.036 0-5.5 2.464-5.5 5.5s-2.464 5.5-5.5 5.5-5.5 2.464-5.5 5.5H3.75C2.232 23 1 21.768 1 20.25V3.75C1 2.232 2.232 1 3.75 1h16.5C21.768 1 23 2.232 23 3.75Z"
|
|
||||||
/>
|
|
||||||
<path
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M23 6v14.1667C23 21.7307 21.7307 23 20.1667 23H6c0-3.128 2.53867-5.6667 5.6667-5.6667 3.128 0 5.6666-2.5386 5.6666-5.6666C17.3333 8.53867 19.872 6 23 6Z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
<h2>
|
|
||||||
Nx Cloud
|
|
||||||
<span>Enable faster CI & better DX</span>
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<p>You can activate distributed tasks executions and caching by running:</p>
|
|
||||||
<pre>nx connect</pre>
|
|
||||||
<a
|
|
||||||
href="https://nx.dev/nx-cloud?utm_source=nx-project"
|
|
||||||
target="_blank"
|
|
||||||
rel="noreferrer"
|
|
||||||
>
|
|
||||||
{' '}
|
|
||||||
What is Nx Cloud?{' '}
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="commands" className="rounded shadow">
|
|
||||||
<h2>Next steps</h2>
|
|
||||||
<p>Here are some things you can do with Nx:</p>
|
|
||||||
<details>
|
|
||||||
<summary>
|
|
||||||
<svg
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
Build, test and lint your app
|
|
||||||
</summary>
|
|
||||||
<pre>
|
|
||||||
<span># Build</span>
|
|
||||||
nx build {title}
|
|
||||||
<span># Test</span>
|
|
||||||
nx test {title}
|
|
||||||
<span># Lint</span>
|
|
||||||
nx lint {title}
|
|
||||||
<span># Run them together!</span>
|
|
||||||
nx run-many -p {title} -t build test lint
|
|
||||||
</pre>
|
|
||||||
</details>
|
|
||||||
|
|
||||||
<details>
|
|
||||||
<summary>
|
|
||||||
<svg
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
View project details
|
|
||||||
</summary>
|
|
||||||
<pre>nx show project {title}</pre>
|
|
||||||
</details>
|
|
||||||
<details>
|
|
||||||
<summary>
|
|
||||||
<svg
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
View interactive project graph
|
|
||||||
</summary>
|
|
||||||
<pre>nx graph</pre>
|
|
||||||
</details>
|
|
||||||
<details>
|
|
||||||
<summary>
|
|
||||||
<svg
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
Add UI library
|
|
||||||
</summary>
|
|
||||||
<pre>
|
|
||||||
<span># Generate UI lib</span>
|
|
||||||
nx g @nx/react:lib ui
|
|
||||||
<span># Add a component</span>
|
|
||||||
nx g @nx/react:component ui/src/lib/button
|
|
||||||
</pre>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<p id="love">
|
|
||||||
Carefully crafted with
|
|
||||||
<svg
|
|
||||||
fill="currentColor"
|
|
||||||
stroke="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
strokeWidth="2"
|
|
||||||
d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default NxWelcome;
|
|
||||||
204
apps/web/src/cockpits/rafael/RafaelPainel.tsx
Normal file
204
apps/web/src/cockpits/rafael/RafaelPainel.tsx
Normal file
@@ -0,0 +1,204 @@
|
|||||||
|
import { Card, Col, Flex, Progress, Row, Space, Tag, Typography } from 'antd';
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
|
import {
|
||||||
|
faArrowTrendUp,
|
||||||
|
faClipboardCheck,
|
||||||
|
faCircleExclamation,
|
||||||
|
faRoute,
|
||||||
|
faMessage,
|
||||||
|
} from '@fortawesome/free-solid-svg-icons';
|
||||||
|
|
||||||
|
const { Title, Text } = Typography;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Painel do Rafael (Representante) — PRIMARY persona.
|
||||||
|
* MOCK data — substituir por TanStack Query quando API estiver pronta.
|
||||||
|
* Tom canônico: Direto · Confiante · Específico (vocabulário: meta, carteira, inativo, pedido).
|
||||||
|
*/
|
||||||
|
export function RafaelPainel() {
|
||||||
|
// Mock — em produção vem de TanStack Query
|
||||||
|
const metaMes = { atingido: 47600, total: 60000 };
|
||||||
|
const metaPct = Math.round((metaMes.atingido / metaMes.total) * 100);
|
||||||
|
const falta = metaMes.total - metaMes.atingido;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Flex vertical gap={24} style={{ maxWidth: 1280, margin: '0 auto' }}>
|
||||||
|
{/* Saudação canon (tom: Direto, Específico) */}
|
||||||
|
<Flex vertical gap={4}>
|
||||||
|
<Title level={2} style={{ margin: 0 }}>
|
||||||
|
Bom dia, Rafael
|
||||||
|
</Title>
|
||||||
|
<Text type="secondary" style={{ fontSize: 'var(--text-lg)' }}>
|
||||||
|
27 de maio · 4 visitas na agenda · 2 propostas pra avançar
|
||||||
|
</Text>
|
||||||
|
</Flex>
|
||||||
|
|
||||||
|
{/* Linha 1 — Meta + KPIs rápidos */}
|
||||||
|
<Row gutter={[24, 24]}>
|
||||||
|
<Col xs={24} md={12}>
|
||||||
|
<Card style={{ height: '100%' }}>
|
||||||
|
<Flex vertical gap={16}>
|
||||||
|
<Flex justify="space-between" align="flex-start">
|
||||||
|
<Space direction="vertical" size={0}>
|
||||||
|
<Text type="secondary" style={{ fontSize: 'var(--text-sm)' }}>
|
||||||
|
META DE MAIO
|
||||||
|
</Text>
|
||||||
|
<Title level={3} style={{ margin: 0 }} className="tabular-nums">
|
||||||
|
R$ {metaMes.atingido.toLocaleString('pt-BR')}
|
||||||
|
</Title>
|
||||||
|
<Text type="secondary">
|
||||||
|
de R${' '}
|
||||||
|
<span className="tabular-nums">
|
||||||
|
{metaMes.total.toLocaleString('pt-BR')}
|
||||||
|
</span>
|
||||||
|
</Text>
|
||||||
|
</Space>
|
||||||
|
<Tag color={metaPct >= 80 ? 'success' : 'processing'}>
|
||||||
|
{metaPct}% atingido
|
||||||
|
</Tag>
|
||||||
|
</Flex>
|
||||||
|
<Progress
|
||||||
|
percent={metaPct}
|
||||||
|
showInfo={false}
|
||||||
|
strokeColor="var(--jcs-blue)"
|
||||||
|
trailColor="var(--jcs-blue-light)"
|
||||||
|
/>
|
||||||
|
<Text style={{ fontSize: 'var(--text-md)' }}>
|
||||||
|
Faltam{' '}
|
||||||
|
<strong className="tabular-nums">
|
||||||
|
R$ {falta.toLocaleString('pt-BR')}
|
||||||
|
</strong>{' '}
|
||||||
|
pra fechar maio.
|
||||||
|
</Text>
|
||||||
|
</Flex>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col xs={12} md={6}>
|
||||||
|
<Card>
|
||||||
|
<Space direction="vertical" size={4}>
|
||||||
|
<Text type="secondary" style={{ fontSize: 'var(--text-sm)' }}>
|
||||||
|
PEDIDOS NO MÊS
|
||||||
|
</Text>
|
||||||
|
<Title level={3} style={{ margin: 0 }} className="tabular-nums">
|
||||||
|
28
|
||||||
|
</Title>
|
||||||
|
<Text type="success" style={{ fontSize: 'var(--text-sm)' }}>
|
||||||
|
<FontAwesomeIcon icon={faArrowTrendUp} /> +18% vs abril
|
||||||
|
</Text>
|
||||||
|
</Space>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col xs={12} md={6}>
|
||||||
|
<Card>
|
||||||
|
<Space direction="vertical" size={4}>
|
||||||
|
<Text type="secondary" style={{ fontSize: 'var(--text-sm)' }}>
|
||||||
|
COMISSÃO ACUMULADA
|
||||||
|
</Text>
|
||||||
|
<Title level={3} style={{ margin: 0 }} className="tabular-nums">
|
||||||
|
R$ 2.540
|
||||||
|
</Title>
|
||||||
|
<Text type="secondary" style={{ fontSize: 'var(--text-sm)' }}>
|
||||||
|
FLEX: R$ 380
|
||||||
|
</Text>
|
||||||
|
</Space>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
{/* Linha 2 — Alertas + Próxima visita */}
|
||||||
|
<Row gutter={[24, 24]}>
|
||||||
|
<Col xs={24} lg={12}>
|
||||||
|
<Card
|
||||||
|
title={
|
||||||
|
<Space>
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon={faCircleExclamation}
|
||||||
|
style={{ color: 'var(--orange)' }}
|
||||||
|
/>
|
||||||
|
Clientes esfriando
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
extra={<Text type="secondary">3 hoje</Text>}
|
||||||
|
>
|
||||||
|
<Flex vertical gap={12}>
|
||||||
|
<ClienteInativoItem nome="OPENFRIOS" dias={47} ultimaCompra="R$ 3.200" />
|
||||||
|
<ClienteInativoItem nome="DISTRIBUIDORA NORTE" dias={62} ultimaCompra="R$ 1.880" />
|
||||||
|
<ClienteInativoItem nome="MERCADO SÃO PAULO" dias={71} ultimaCompra="R$ 980" />
|
||||||
|
</Flex>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
|
||||||
|
<Col xs={24} lg={12}>
|
||||||
|
<Card
|
||||||
|
title={
|
||||||
|
<Space>
|
||||||
|
<FontAwesomeIcon icon={faRoute} style={{ color: 'var(--jcs-blue)' }} />
|
||||||
|
Próxima visita
|
||||||
|
</Space>
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Flex vertical gap={12}>
|
||||||
|
<Space direction="vertical" size={4}>
|
||||||
|
<Title level={4} style={{ margin: 0, color: 'var(--jcs-blue)' }}>
|
||||||
|
OPENFRIOS
|
||||||
|
</Title>
|
||||||
|
<Text type="secondary">
|
||||||
|
Rua das Indústrias, 1.245 · São Paulo, SP · 14:30
|
||||||
|
</Text>
|
||||||
|
</Space>
|
||||||
|
<Flex gap={12} wrap="wrap">
|
||||||
|
<Tag icon={<FontAwesomeIcon icon={faClipboardCheck} />} color="processing">
|
||||||
|
3 pedidos em andamento
|
||||||
|
</Tag>
|
||||||
|
<Tag icon={<FontAwesomeIcon icon={faMessage} />} color="success">
|
||||||
|
WhatsApp atualizado
|
||||||
|
</Tag>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
|
||||||
|
{/* Footer informativo (sem ruído — tom Apple clean) */}
|
||||||
|
<Flex justify="center" style={{ paddingTop: 16 }}>
|
||||||
|
<Text type="secondary" style={{ fontSize: 'var(--text-xs)' }}>
|
||||||
|
SAR · Força de Vendas · Powered by JCS Sistemas
|
||||||
|
</Text>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ClienteInativoItem({
|
||||||
|
nome,
|
||||||
|
dias,
|
||||||
|
ultimaCompra,
|
||||||
|
}: {
|
||||||
|
nome: string;
|
||||||
|
dias: number;
|
||||||
|
ultimaCompra: string;
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<Flex
|
||||||
|
justify="space-between"
|
||||||
|
align="center"
|
||||||
|
style={{
|
||||||
|
padding: 'var(--space-sm) var(--space-md)',
|
||||||
|
borderRadius: 12,
|
||||||
|
background: 'var(--bg-surface-alt)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Space direction="vertical" size={0}>
|
||||||
|
<Text strong>{nome}</Text>
|
||||||
|
<Text type="secondary" style={{ fontSize: 'var(--text-xs)' }}>
|
||||||
|
Última compra: <span className="tabular-nums">{ultimaCompra}</span>
|
||||||
|
</Text>
|
||||||
|
</Space>
|
||||||
|
<Tag color="warning" className="tabular-nums">
|
||||||
|
{dias} dias
|
||||||
|
</Tag>
|
||||||
|
</Flex>
|
||||||
|
);
|
||||||
|
}
|
||||||
37
apps/web/src/components/layout/AppShell.tsx
Normal file
37
apps/web/src/components/layout/AppShell.tsx
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
import { useState, type ReactNode } from 'react';
|
||||||
|
import { Flex } from 'antd';
|
||||||
|
import { Topbar } from './Topbar';
|
||||||
|
import { Sidebar } from './Sidebar';
|
||||||
|
|
||||||
|
interface AppShellProps {
|
||||||
|
children: ReactNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* AppShell canônico do SAR — topbar 80 + sidebar 260 + área de conteúdo.
|
||||||
|
* Layout para cockpits Sandra/Daniel/Alice (desktop-first).
|
||||||
|
* Variante mobile (Rafael) com bottom nav virá em ShellMobile separado.
|
||||||
|
*/
|
||||||
|
export function AppShell({ children }: AppShellProps) {
|
||||||
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||||
|
const [_sidebarOpen, setSidebarOpen] = useState(true);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Flex vertical style={{ minHeight: '100vh', background: 'var(--bg-body)' }}>
|
||||||
|
<Topbar onToggleSidebar={() => setSidebarOpen((v) => !v)} />
|
||||||
|
<Flex flex={1}>
|
||||||
|
<Sidebar />
|
||||||
|
<main
|
||||||
|
style={{
|
||||||
|
flex: 1,
|
||||||
|
padding: 'var(--space-xl)',
|
||||||
|
overflow: 'auto',
|
||||||
|
maxWidth: '100%',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</main>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
);
|
||||||
|
}
|
||||||
102
apps/web/src/components/layout/Sidebar.tsx
Normal file
102
apps/web/src/components/layout/Sidebar.tsx
Normal file
@@ -0,0 +1,102 @@
|
|||||||
|
import { Menu } from 'antd';
|
||||||
|
import { useLocation, useNavigate } from '@tanstack/react-router';
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
|
import {
|
||||||
|
faChartLine,
|
||||||
|
faClipboardList,
|
||||||
|
faFunnelDollar,
|
||||||
|
faCalendarDays,
|
||||||
|
faUsers,
|
||||||
|
faBoxesStacked,
|
||||||
|
faGear,
|
||||||
|
faPercent,
|
||||||
|
faFileInvoiceDollar,
|
||||||
|
} from '@fortawesome/free-solid-svg-icons';
|
||||||
|
import type { ItemType } from 'antd/es/menu/interface';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sidebar canônica do SAR (260px fixa — brand.md).
|
||||||
|
* Itens mockados para Rafael cockpit. Variantes por cockpit virão depois.
|
||||||
|
*/
|
||||||
|
export function Sidebar() {
|
||||||
|
const navigate = useNavigate();
|
||||||
|
const location = useLocation();
|
||||||
|
|
||||||
|
const items: ItemType[] = [
|
||||||
|
{
|
||||||
|
key: '/',
|
||||||
|
icon: <FontAwesomeIcon icon={faChartLine} fixedWidth />,
|
||||||
|
label: 'Painel',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '/agenda',
|
||||||
|
icon: <FontAwesomeIcon icon={faCalendarDays} fixedWidth />,
|
||||||
|
label: 'Agenda e Rotas',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '/clientes',
|
||||||
|
icon: <FontAwesomeIcon icon={faUsers} fixedWidth />,
|
||||||
|
label: 'Clientes',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '/produtos',
|
||||||
|
icon: <FontAwesomeIcon icon={faBoxesStacked} fixedWidth />,
|
||||||
|
label: 'Catálogo',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '/funil',
|
||||||
|
icon: <FontAwesomeIcon icon={faFunnelDollar} fixedWidth />,
|
||||||
|
label: 'Funil de Vendas',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '/pedidos',
|
||||||
|
icon: <FontAwesomeIcon icon={faClipboardList} fixedWidth />,
|
||||||
|
label: 'Pedidos',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '/comissao',
|
||||||
|
icon: <FontAwesomeIcon icon={faPercent} fixedWidth />,
|
||||||
|
label: 'Comissão / FLEX',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'divider',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '/relatorios',
|
||||||
|
icon: <FontAwesomeIcon icon={faFileInvoiceDollar} fixedWidth />,
|
||||||
|
label: 'Relatórios',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
key: '/configuracoes',
|
||||||
|
icon: <FontAwesomeIcon icon={faGear} fixedWidth />,
|
||||||
|
label: 'Configurações',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<aside
|
||||||
|
style={{
|
||||||
|
width: 'var(--layout-sidebar-width)',
|
||||||
|
flexShrink: 0,
|
||||||
|
height: 'calc(100vh - var(--layout-topbar-height))',
|
||||||
|
background: 'var(--bg-surface)',
|
||||||
|
borderRight: '1px solid var(--border-subtle)',
|
||||||
|
position: 'sticky',
|
||||||
|
top: 'var(--layout-topbar-height)',
|
||||||
|
overflowY: 'auto',
|
||||||
|
padding: 'var(--space-md) var(--space-xs)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Menu
|
||||||
|
mode="inline"
|
||||||
|
selectedKeys={[location.pathname]}
|
||||||
|
items={items}
|
||||||
|
onClick={({ key }) => navigate({ to: key as string })}
|
||||||
|
style={{
|
||||||
|
border: 'none',
|
||||||
|
background: 'transparent',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</aside>
|
||||||
|
);
|
||||||
|
}
|
||||||
111
apps/web/src/components/layout/Topbar.tsx
Normal file
111
apps/web/src/components/layout/Topbar.tsx
Normal file
@@ -0,0 +1,111 @@
|
|||||||
|
import { Avatar, Badge, Button, Flex, Input } from 'antd';
|
||||||
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
|
import { faBell, faMagnifyingGlass, faBars } from '@fortawesome/free-solid-svg-icons';
|
||||||
|
import { brandTokens } from '../../lib/theme';
|
||||||
|
|
||||||
|
interface TopbarProps {
|
||||||
|
onToggleSidebar?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Topbar canônica do SAR (80px de altura — brand.md).
|
||||||
|
* Apple-inspired clean: logo à esquerda, search central, notif + perfil à direita.
|
||||||
|
* Variantes por cockpit: search desabilitada para Rafael mobile (vai pro bottom nav).
|
||||||
|
*/
|
||||||
|
export function Topbar({ onToggleSidebar }: TopbarProps) {
|
||||||
|
return (
|
||||||
|
<Flex
|
||||||
|
align="center"
|
||||||
|
justify="space-between"
|
||||||
|
style={{
|
||||||
|
height: 'var(--layout-topbar-height)',
|
||||||
|
padding: '0 var(--space-lg)',
|
||||||
|
background: 'var(--bg-surface)',
|
||||||
|
borderBottom: '1px solid var(--border-subtle)',
|
||||||
|
position: 'sticky',
|
||||||
|
top: 0,
|
||||||
|
zIndex: 'var(--z-sticky)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Lado esquerdo: hamburger (mobile) + logo */}
|
||||||
|
<Flex align="center" gap={16}>
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
icon={<FontAwesomeIcon icon={faBars} />}
|
||||||
|
onClick={onToggleSidebar}
|
||||||
|
aria-label="Alternar menu"
|
||||||
|
style={{ display: 'inline-flex' }}
|
||||||
|
/>
|
||||||
|
<Flex align="center" gap={12}>
|
||||||
|
<img
|
||||||
|
src="/sar-icon.png"
|
||||||
|
alt="SAR"
|
||||||
|
style={{ height: 40, width: 'auto' }}
|
||||||
|
/>
|
||||||
|
<Flex vertical gap={0}>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
fontSize: 'var(--text-lg)',
|
||||||
|
fontWeight: 'var(--font-weight-bold)',
|
||||||
|
color: 'var(--text-main)',
|
||||||
|
lineHeight: 1.1,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
SAR
|
||||||
|
</span>
|
||||||
|
<span
|
||||||
|
style={{
|
||||||
|
fontSize: 'var(--text-2xs)',
|
||||||
|
color: 'var(--text-muted)',
|
||||||
|
letterSpacing: '0.05em',
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
fontWeight: 'var(--font-weight-medium)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Força de Vendas
|
||||||
|
</span>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
|
||||||
|
{/* Centro: search (Sandra/Daniel/Alice) */}
|
||||||
|
<Flex flex={1} justify="center" style={{ maxWidth: 480, margin: '0 var(--space-2xl)' }}>
|
||||||
|
<Input
|
||||||
|
size="large"
|
||||||
|
placeholder="Buscar cliente, pedido, produto..."
|
||||||
|
prefix={
|
||||||
|
<FontAwesomeIcon
|
||||||
|
icon={faMagnifyingGlass}
|
||||||
|
style={{ color: 'var(--text-muted)' }}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
style={{ borderRadius: 12 }}
|
||||||
|
aria-label="Buscar"
|
||||||
|
/>
|
||||||
|
</Flex>
|
||||||
|
|
||||||
|
{/* Lado direito: notificações + perfil */}
|
||||||
|
<Flex align="center" gap={16}>
|
||||||
|
<Badge count={3} color={brandTokens.red} offset={[-4, 4]}>
|
||||||
|
<Button
|
||||||
|
type="text"
|
||||||
|
size="large"
|
||||||
|
icon={<FontAwesomeIcon icon={faBell} />}
|
||||||
|
aria-label="Notificações"
|
||||||
|
/>
|
||||||
|
</Badge>
|
||||||
|
<Avatar
|
||||||
|
size={40}
|
||||||
|
style={{
|
||||||
|
background: 'var(--jcs-blue-light)',
|
||||||
|
color: 'var(--jcs-blue)',
|
||||||
|
fontWeight: 'var(--font-weight-semibold)',
|
||||||
|
cursor: 'pointer',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
R
|
||||||
|
</Avatar>
|
||||||
|
</Flex>
|
||||||
|
</Flex>
|
||||||
|
);
|
||||||
|
}
|
||||||
27
apps/web/src/lib/query-client.ts
Normal file
27
apps/web/src/lib/query-client.ts
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
import { QueryClient } from '@tanstack/react-query';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* QueryClient canônico do SAR.
|
||||||
|
* Defaults conservadores: refetch on focus desabilitado (Visual DNA: "sereno"),
|
||||||
|
* stale-while-revalidate para tempo real bater no Socket.IO, não em polling.
|
||||||
|
*/
|
||||||
|
export const queryClient = new QueryClient({
|
||||||
|
defaultOptions: {
|
||||||
|
queries: {
|
||||||
|
staleTime: 30_000, // 30s — Socket.IO atualiza antes na maioria dos casos
|
||||||
|
gcTime: 5 * 60_000, // 5min em cache antes de garbage collect
|
||||||
|
refetchOnWindowFocus: false, // evita "refresh fantasma" — Sandra/Daniel se distraem
|
||||||
|
refetchOnReconnect: true,
|
||||||
|
retry: (failureCount, error) => {
|
||||||
|
// 4xx não retry; 5xx até 2 retries
|
||||||
|
const status = (error as { status?: number })?.status;
|
||||||
|
if (status && status >= 400 && status < 500) return false;
|
||||||
|
return failureCount < 2;
|
||||||
|
},
|
||||||
|
retryDelay: (attempt) => Math.min(1000 * 2 ** attempt, 30_000),
|
||||||
|
},
|
||||||
|
mutations: {
|
||||||
|
retry: false, // mutations não retry automático — Idempotency-Key no servidor cuida disso
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
38
apps/web/src/lib/router.tsx
Normal file
38
apps/web/src/lib/router.tsx
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
import { createRouter, createRootRoute, createRoute, Outlet } from '@tanstack/react-router';
|
||||||
|
import { AppShell } from '../components/layout/AppShell';
|
||||||
|
import { RafaelPainel } from '../cockpits/rafael/RafaelPainel';
|
||||||
|
|
||||||
|
const rootRoute = createRootRoute({
|
||||||
|
component: () => (
|
||||||
|
<AppShell>
|
||||||
|
<Outlet />
|
||||||
|
</AppShell>
|
||||||
|
),
|
||||||
|
});
|
||||||
|
|
||||||
|
const indexRoute = createRoute({
|
||||||
|
getParentRoute: () => rootRoute,
|
||||||
|
path: '/',
|
||||||
|
component: RafaelPainel,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Placeholder routes (cockpits a implementar)
|
||||||
|
const rafaelRoute = createRoute({
|
||||||
|
getParentRoute: () => rootRoute,
|
||||||
|
path: '/rep',
|
||||||
|
component: RafaelPainel,
|
||||||
|
});
|
||||||
|
|
||||||
|
const routeTree = rootRoute.addChildren([indexRoute, rafaelRoute]);
|
||||||
|
|
||||||
|
export const router = createRouter({
|
||||||
|
routeTree,
|
||||||
|
defaultPreload: 'intent',
|
||||||
|
defaultPreloadStaleTime: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
declare module '@tanstack/react-router' {
|
||||||
|
interface Register {
|
||||||
|
router: typeof router;
|
||||||
|
}
|
||||||
|
}
|
||||||
140
apps/web/src/lib/theme.ts
Normal file
140
apps/web/src/lib/theme.ts
Normal file
@@ -0,0 +1,140 @@
|
|||||||
|
/**
|
||||||
|
* Tema canônico do AntD para o SAR.
|
||||||
|
* Espelha brand.md + design-artifacts/A-Product-Brief/03-visual-direction.md.
|
||||||
|
* NÃO alterar tokens primários (jcsBlue, font family) sem RFC.
|
||||||
|
*/
|
||||||
|
import type { ThemeConfig } from 'antd';
|
||||||
|
|
||||||
|
// Tokens canônicos sincronizados com tokens.css (manter espelhados manualmente
|
||||||
|
// ou centralizar quando build pipeline permitir).
|
||||||
|
export const brandTokens = {
|
||||||
|
jcsBlue: '#004a99',
|
||||||
|
jcsBlueHover: '#003a7a',
|
||||||
|
jcsBlueLight: '#e6eff8',
|
||||||
|
bgBody: '#f4f7fa',
|
||||||
|
textMain: '#2d3748',
|
||||||
|
textMuted: '#718096',
|
||||||
|
green: '#38a169',
|
||||||
|
orange: '#ed8936',
|
||||||
|
red: '#e53e3e',
|
||||||
|
whatsappGreen: '#25d366',
|
||||||
|
borderSubtle: '#e2e8f0',
|
||||||
|
} as const;
|
||||||
|
|
||||||
|
export const sarTheme: ThemeConfig = {
|
||||||
|
token: {
|
||||||
|
// === Cor primária ===
|
||||||
|
colorPrimary: brandTokens.jcsBlue,
|
||||||
|
colorPrimaryHover: brandTokens.jcsBlueHover,
|
||||||
|
colorPrimaryBg: brandTokens.jcsBlueLight,
|
||||||
|
colorPrimaryBgHover: brandTokens.jcsBlueLight,
|
||||||
|
|
||||||
|
// === Estados funcionais ===
|
||||||
|
colorSuccess: brandTokens.green,
|
||||||
|
colorWarning: brandTokens.orange,
|
||||||
|
colorError: brandTokens.red,
|
||||||
|
colorInfo: brandTokens.jcsBlue,
|
||||||
|
|
||||||
|
// === Background ===
|
||||||
|
colorBgBase: '#ffffff',
|
||||||
|
colorBgLayout: brandTokens.bgBody,
|
||||||
|
colorBgContainer: '#ffffff',
|
||||||
|
colorBgElevated: '#ffffff',
|
||||||
|
|
||||||
|
// === Texto ===
|
||||||
|
colorText: brandTokens.textMain,
|
||||||
|
colorTextSecondary: brandTokens.textMuted,
|
||||||
|
colorTextTertiary: brandTokens.textMuted,
|
||||||
|
colorTextQuaternary: brandTokens.textMuted,
|
||||||
|
|
||||||
|
// === Borda ===
|
||||||
|
colorBorder: brandTokens.borderSubtle,
|
||||||
|
colorBorderSecondary: brandTokens.borderSubtle,
|
||||||
|
|
||||||
|
// === Tipografia (Visual DNA: Plus Jakarta) ===
|
||||||
|
fontFamily:
|
||||||
|
"'Plus Jakarta Sans Variable', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
|
||||||
|
fontSize: 14, // baseline body
|
||||||
|
fontSizeSM: 13,
|
||||||
|
fontSizeLG: 16,
|
||||||
|
fontSizeXL: 18,
|
||||||
|
fontSizeHeading1: 32,
|
||||||
|
fontSizeHeading2: 24,
|
||||||
|
fontSizeHeading3: 20,
|
||||||
|
fontSizeHeading4: 18,
|
||||||
|
fontSizeHeading5: 16,
|
||||||
|
lineHeight: 1.5,
|
||||||
|
|
||||||
|
// === Radius (brand.md) ===
|
||||||
|
borderRadius: 12,
|
||||||
|
borderRadiusLG: 20,
|
||||||
|
borderRadiusSM: 6,
|
||||||
|
|
||||||
|
// === Box shadow (brand.md canon — sutil único) ===
|
||||||
|
boxShadow: '0 4px 25px rgba(0, 0, 0, 0.05)',
|
||||||
|
boxShadowSecondary: '0 4px 25px rgba(0, 0, 0, 0.05)',
|
||||||
|
boxShadowTertiary: '0 1px 2px rgba(0, 0, 0, 0.04)',
|
||||||
|
|
||||||
|
// === Motion (Visual DNA: sutis funcionais) ===
|
||||||
|
motionDurationFast: '0.15s',
|
||||||
|
motionDurationMid: '0.2s',
|
||||||
|
motionDurationSlow: '0.25s',
|
||||||
|
motionEaseInOut: 'cubic-bezier(0.4, 0, 0.2, 1)',
|
||||||
|
|
||||||
|
// === Wireframe off — usamos look próprio ===
|
||||||
|
wireframe: false,
|
||||||
|
},
|
||||||
|
components: {
|
||||||
|
Layout: {
|
||||||
|
headerHeight: 80, // brand.md
|
||||||
|
headerBg: '#ffffff',
|
||||||
|
bodyBg: brandTokens.bgBody,
|
||||||
|
siderBg: '#ffffff',
|
||||||
|
},
|
||||||
|
Menu: {
|
||||||
|
itemBorderRadius: 12,
|
||||||
|
itemHeight: 44,
|
||||||
|
itemMarginInline: 8,
|
||||||
|
itemSelectedBg: brandTokens.jcsBlueLight,
|
||||||
|
itemSelectedColor: brandTokens.jcsBlue,
|
||||||
|
itemHoverBg: brandTokens.jcsBlueLight,
|
||||||
|
itemHoverColor: brandTokens.jcsBlue,
|
||||||
|
},
|
||||||
|
Button: {
|
||||||
|
borderRadius: 12,
|
||||||
|
controlHeight: 40,
|
||||||
|
controlHeightLG: 48,
|
||||||
|
controlHeightSM: 32,
|
||||||
|
fontWeight: 600,
|
||||||
|
primaryShadow: 'none',
|
||||||
|
defaultShadow: 'none',
|
||||||
|
},
|
||||||
|
Card: {
|
||||||
|
borderRadiusLG: 20,
|
||||||
|
paddingLG: 24,
|
||||||
|
headerBg: 'transparent',
|
||||||
|
},
|
||||||
|
Input: {
|
||||||
|
borderRadius: 12,
|
||||||
|
controlHeight: 40,
|
||||||
|
},
|
||||||
|
Select: {
|
||||||
|
borderRadius: 12,
|
||||||
|
controlHeight: 40,
|
||||||
|
},
|
||||||
|
Table: {
|
||||||
|
headerBg: brandTokens.bgBody,
|
||||||
|
headerSplitColor: 'transparent',
|
||||||
|
rowHoverBg: brandTokens.jcsBlueLight,
|
||||||
|
},
|
||||||
|
Tag: {
|
||||||
|
borderRadiusSM: 6,
|
||||||
|
},
|
||||||
|
Tooltip: {
|
||||||
|
borderRadius: 8,
|
||||||
|
},
|
||||||
|
Notification: {
|
||||||
|
borderRadiusLG: 12,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
@@ -1,11 +1,33 @@
|
|||||||
import { StrictMode } from 'react';
|
import { StrictMode } from 'react';
|
||||||
import * as ReactDOM from 'react-dom/client';
|
import { createRoot } from 'react-dom/client';
|
||||||
import App from './app/app';
|
import { ConfigProvider, App as AntdApp } from 'antd';
|
||||||
|
import ptBR from 'antd/locale/pt_BR';
|
||||||
|
import { QueryClientProvider } from '@tanstack/react-query';
|
||||||
|
import { RouterProvider } from '@tanstack/react-router';
|
||||||
|
import dayjs from 'dayjs';
|
||||||
|
import 'dayjs/locale/pt-br';
|
||||||
|
|
||||||
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
|
import './styles/global.css';
|
||||||
|
|
||||||
root.render(
|
import { sarTheme } from './lib/theme';
|
||||||
|
import { queryClient } from './lib/query-client';
|
||||||
|
import { router } from './lib/router';
|
||||||
|
|
||||||
|
dayjs.locale('pt-br');
|
||||||
|
|
||||||
|
const rootEl = document.getElementById('root');
|
||||||
|
if (!rootEl) {
|
||||||
|
throw new Error('Root element not found');
|
||||||
|
}
|
||||||
|
|
||||||
|
createRoot(rootEl).render(
|
||||||
<StrictMode>
|
<StrictMode>
|
||||||
<App />
|
<ConfigProvider theme={sarTheme} locale={ptBR} componentSize="middle">
|
||||||
|
<AntdApp>
|
||||||
|
<QueryClientProvider client={queryClient}>
|
||||||
|
<RouterProvider router={router} />
|
||||||
|
</QueryClientProvider>
|
||||||
|
</AntdApp>
|
||||||
|
</ConfigProvider>
|
||||||
</StrictMode>,
|
</StrictMode>,
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1 +0,0 @@
|
|||||||
/* You can add global styles to this file, and also import other style files */
|
|
||||||
11
apps/web/src/styles/global.css
Normal file
11
apps/web/src/styles/global.css
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
/**
|
||||||
|
* SAR — Global stylesheet entry
|
||||||
|
* Ordem: tokens → reset → fontes → app
|
||||||
|
*/
|
||||||
|
|
||||||
|
@import './tokens.css';
|
||||||
|
@import './reset.css';
|
||||||
|
|
||||||
|
/* Plus Jakarta Sans Variable — self-host (LGPD + performance) */
|
||||||
|
@import '@fontsource-variable/plus-jakarta-sans';
|
||||||
|
@import '@fontsource-variable/plus-jakarta-sans/wght-italic.css';
|
||||||
70
apps/web/src/styles/reset.css
Normal file
70
apps/web/src/styles/reset.css
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
/**
|
||||||
|
* SAR — Reset minimalista
|
||||||
|
* Apple-inspired: limpa o necessário sem destruir defaults úteis (focus rings, etc.)
|
||||||
|
*/
|
||||||
|
|
||||||
|
*,
|
||||||
|
*::before,
|
||||||
|
*::after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
html {
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-family: var(--font-family-base);
|
||||||
|
font-size: var(--text-md);
|
||||||
|
line-height: var(--leading-normal);
|
||||||
|
color: var(--text-main);
|
||||||
|
background-color: var(--bg-body);
|
||||||
|
font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
|
||||||
|
}
|
||||||
|
|
||||||
|
#root {
|
||||||
|
height: 100%;
|
||||||
|
isolation: isolate;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Focus rings visíveis (acessibilidade — WCAG AA) */
|
||||||
|
:focus-visible {
|
||||||
|
outline: 2px solid var(--jcs-blue);
|
||||||
|
outline-offset: 2px;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Tabular numerals em dashboards (Visual DNA) */
|
||||||
|
.tabular-nums,
|
||||||
|
[data-tabular] {
|
||||||
|
font-variant-numeric: tabular-nums;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Image baseline */
|
||||||
|
img,
|
||||||
|
picture,
|
||||||
|
svg,
|
||||||
|
video {
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Type baseline */
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
121
apps/web/src/styles/tokens.css
Normal file
121
apps/web/src/styles/tokens.css
Normal file
@@ -0,0 +1,121 @@
|
|||||||
|
/**
|
||||||
|
* SAR — Design Tokens canônicos
|
||||||
|
* Fonte: brand.md + design-artifacts/A-Product-Brief/03-visual-direction.md
|
||||||
|
* NÃO alterar valores sem RFC. Variantes por cockpit vivem em outros arquivos.
|
||||||
|
*/
|
||||||
|
|
||||||
|
:root {
|
||||||
|
/* === Brand JCS — paleta canônica === */
|
||||||
|
--jcs-blue: #004a99;
|
||||||
|
--jcs-blue-hover: #003a7a;
|
||||||
|
--jcs-blue-light: #e6eff8;
|
||||||
|
|
||||||
|
/* === Background === */
|
||||||
|
--bg-body: #f4f7fa;
|
||||||
|
--bg-surface: #ffffff;
|
||||||
|
--bg-surface-alt: #f4f7fa;
|
||||||
|
|
||||||
|
/* === Texto === */
|
||||||
|
--text-main: #2d3748;
|
||||||
|
--text-muted: #718096;
|
||||||
|
--text-on-primary: #ffffff;
|
||||||
|
--text-disabled: #a0aec0;
|
||||||
|
|
||||||
|
/* === Estados funcionais === */
|
||||||
|
--green: #38a169; /* sucesso / faturado */
|
||||||
|
--orange: #ed8936; /* alerta / em aberto */
|
||||||
|
--red: #e53e3e; /* erro / bloqueado */
|
||||||
|
--whatsapp-green: #25d366;
|
||||||
|
|
||||||
|
/* === Bordas === */
|
||||||
|
--border-subtle: #e2e8f0;
|
||||||
|
--border-default: #cbd5e0;
|
||||||
|
--border-strong: #a0aec0;
|
||||||
|
|
||||||
|
/* === Radius (brand.md) === */
|
||||||
|
--radius-sm: 6px;
|
||||||
|
--radius-md: 12px; /* inputs, botões */
|
||||||
|
--radius-lg: 20px; /* cards, modais */
|
||||||
|
--radius-full: 9999px;
|
||||||
|
|
||||||
|
/* === Sombras (brand.md) === */
|
||||||
|
--shadow-none: 0 0 0 transparent;
|
||||||
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
|
||||||
|
--shadow: 0 4px 25px rgba(0, 0, 0, 0.05); /* sombra canon brand.md */
|
||||||
|
--shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.08);
|
||||||
|
|
||||||
|
/* === Spacing (preliminar, refinar Phase 6) === */
|
||||||
|
--space-3xs: 2px;
|
||||||
|
--space-2xs: 4px;
|
||||||
|
--space-xs: 8px;
|
||||||
|
--space-sm: 12px;
|
||||||
|
--space-md: 16px; /* baseline */
|
||||||
|
--space-lg: 24px;
|
||||||
|
--space-xl: 32px;
|
||||||
|
--space-2xl: 48px;
|
||||||
|
--space-3xl: 64px;
|
||||||
|
|
||||||
|
/* === Tipografia === */
|
||||||
|
--font-family-base: 'Plus Jakarta Sans Variable', 'Plus Jakarta Sans',
|
||||||
|
-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
|
||||||
|
Arial, sans-serif;
|
||||||
|
--font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo,
|
||||||
|
Monaco, Consolas, monospace;
|
||||||
|
|
||||||
|
/* Pesos (brand.md: 400/500/600/700/800) */
|
||||||
|
--font-weight-regular: 400;
|
||||||
|
--font-weight-medium: 500;
|
||||||
|
--font-weight-semibold: 600;
|
||||||
|
--font-weight-bold: 700;
|
||||||
|
--font-weight-extrabold: 800;
|
||||||
|
|
||||||
|
/* Type scale (preliminar — hierarquia brand.md + Visual DNA) */
|
||||||
|
--text-3xs: 10px;
|
||||||
|
--text-2xs: 11px;
|
||||||
|
--text-xs: 12px;
|
||||||
|
--text-sm: 13px;
|
||||||
|
--text-md: 14px; /* body baseline AntD */
|
||||||
|
--text-lg: 16px;
|
||||||
|
--text-xl: 18px;
|
||||||
|
--text-2xl: 24px;
|
||||||
|
--text-3xl: 32px;
|
||||||
|
--text-4xl: 40px;
|
||||||
|
|
||||||
|
/* Line heights */
|
||||||
|
--leading-tight: 1.2;
|
||||||
|
--leading-snug: 1.35;
|
||||||
|
--leading-normal: 1.5;
|
||||||
|
--leading-relaxed: 1.65;
|
||||||
|
|
||||||
|
/* === Layout (brand.md) === */
|
||||||
|
--layout-topbar-height: 80px;
|
||||||
|
--layout-sidebar-width: 260px;
|
||||||
|
--layout-sidebar-width-collapsed: 64px;
|
||||||
|
--layout-bottom-nav-height: 64px;
|
||||||
|
|
||||||
|
/* === Z-index === */
|
||||||
|
--z-base: 0;
|
||||||
|
--z-dropdown: 100;
|
||||||
|
--z-sticky: 200;
|
||||||
|
--z-fixed: 300;
|
||||||
|
--z-modal-backdrop: 400;
|
||||||
|
--z-modal: 500;
|
||||||
|
--z-popover: 600;
|
||||||
|
--z-tooltip: 700;
|
||||||
|
--z-notification: 800;
|
||||||
|
|
||||||
|
/* === Motion (Visual DNA: 150-250ms ease-out, sem decorativo) === */
|
||||||
|
--duration-fast: 150ms;
|
||||||
|
--duration: 200ms;
|
||||||
|
--duration-slow: 250ms;
|
||||||
|
--easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
|
||||||
|
--easing-emphasize: cubic-bezier(0.2, 0, 0, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
:root {
|
||||||
|
--duration-fast: 0ms;
|
||||||
|
--duration: 0ms;
|
||||||
|
--duration-slow: 0ms;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -234,6 +234,22 @@
|
|||||||
- **Outlines Phase 3 detalhados (Steps 5+):** retomar quando primeiro cockpit precisar ser implementado.
|
- **Outlines Phase 3 detalhados (Steps 5+):** retomar quando primeiro cockpit precisar ser implementado.
|
||||||
- **Próximo:** **Setup do monorepo SAR** — pnpm + Nx + Nest + Prisma + Vite + React + Docker Compose + git Gitea.
|
- **Próximo:** **Setup do monorepo SAR** — pnpm + Nx + Nest + Prisma + Vite + React + Docker Compose + git Gitea.
|
||||||
|
|
||||||
|
### 2026-05-27 — Setup do monorepo SAR CONCLUÍDO ✅ (Fases 1-9)
|
||||||
|
- **Commit inicial:** `17c08e6 chore: initial monorepo scaffold + WDS Phase 1+2 artifacts` (3.631 arquivos, local, sem push)
|
||||||
|
- **Stack ativa:** pnpm 11.1.0 · Node 24.15.0 · Nx 22.7.4 · TypeScript 5.9.3 · Prettier 3.8.3
|
||||||
|
- **5 projetos Nx:** api · api-e2e · web · web-e2e · api-interface
|
||||||
|
- **Build geral:** ✅ todos os 3 projetos buildáveis passam
|
||||||
|
- **Docker Compose dev** criado (Postgres 18 · Valkey 8 · MinIO · Mailpit) — não iniciado ainda
|
||||||
|
- **`.env.example`** template completo com todas as variáveis críticas
|
||||||
|
- **README.md + AGENTS.md** criados como entrada para devs/agentes
|
||||||
|
- **Git remote:** `https://git.jcsinformatica.com.br/Julian/sar` configurado (push diferido)
|
||||||
|
- **Próximos passos sugeridos:**
|
||||||
|
1. Criar repo no Gitea e fazer push (`git push -u origin main`)
|
||||||
|
2. Subir Docker Compose dev (`pnpm dev:up`)
|
||||||
|
3. Implementar master-login stub (auth real virá depois)
|
||||||
|
4. Implementar multi-tenant BD-por-workspace via Prisma factory + cls
|
||||||
|
5. Primeira tela viva: login + painel Rafael (vazio)
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## About This Folder
|
## About This Folder
|
||||||
|
|||||||
1100
pnpm-lock.yaml
generated
1100
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -13,6 +13,6 @@ allowBuilds:
|
|||||||
|
|
||||||
catalog:
|
catalog:
|
||||||
# Stack canon JCS v2.2 — fonte da verdade: STACK.md
|
# Stack canon JCS v2.2 — fonte da verdade: STACK.md
|
||||||
zod: ^4.0.0
|
zod: ^4.4.3
|
||||||
typescript: ^5.9.3
|
typescript: ^5.9.3
|
||||||
'@types/node': ^24.12.4
|
'@types/node': ^24.12.4
|
||||||
|
|||||||
Reference in New Issue
Block a user