shoc-frontend-new/src/app/v/_components/vendor-portal.css

425 lines
7.8 KiB
CSS
Raw Normal View History

Feat/vite typescript migration (#16) * chore: add eslint, prettier, husky and commitlint tooling * ci: add GitHub Actions workflow for lint and build * build: migrate from CRA to Vite with TypeScript config * docs: add architecture plan and design system documentation * fix: scope ESLint to new components and hooks directories * feat: add HTTP client, query cache and shared utilities * feat: add theme system and global application styles * feat: add shared UI, layout and domain badge components * feat: add auth domain, provider and login page * feat: add app shell, file-based routing and bootstrap * feat: add protected layout and dashboard module * feat: add accounts CRUD module * feat: add assets CRUD module * feat: add contacts CRUD module * feat: add employees CRUD module * feat: add locations CRUD module * feat: add calendar events module * feat: add follow-ups CRUD module * feat: add PM schedules CRUD module * feat: add work orders module with dispatch modals * feat: add vendors CRUD and portal token panel * feat: add vendor purchase orders module * feat: add uplifts queue module * feat: add settings for dropdowns and task templates * feat: add vendor portal routes and signature capture * test: add Vitest setup and Playwright login e2e spec * chore: remove legacy CRA pages, Redux store and JS hooks * chore: update gitignore and env example for Vite * docs: translate pt-BR docs and Cursor rules to English * fix(ci): fix login e2e session mock and prettier formatting * fix(build): use mjs router script for Node 20 CI compatibility * chore: remove migration scripts and unused generouted router * fix(auth): restore JWT and align CRUD with backend routes * fix(api): add no-content helpers and align paths with backend * fix(accounts): align detail and mutation payloads with backend * fix(contacts): resolve detail via GetContacts and map address DTOs * fix(work-orders): align routes, delete body, and create payload * fix(vendors): delete vendors via REST route * fix(pm-schedules): handle empty save and delete responses * fix(employees): add fallbacks for detail and dropdown calls * chore(calendar): disable routes until backend exists * chore(env): switch tracked env vars to Vite prefixes * fix(api): align frontend contracts with backend review findings Correct Work Order getById query param, asset site options via Location API, Employee JobTitleId payload, and remove stale API paths. * fix(employees,pm-schedules): align forms with backend API contracts Align PM Schedule form and save payload with PMSchedule_DTO fields. Bind employee Job Title select to jobTitleId for create/update payloads. Add regression tests for both flows. * fix(pm-schedules): gate edit/delete for Dev API contract Production Dev API exposes only GetList and Save. Hide unsupported edit/delete UI and block the edit route. Add regression tests for disabled actions. * docs(env): document VITE_API_URL must include /api suffix * refactor(api): extract shared API prefix URL resolution * feat(build): fail build on misconfigured absolute VITE_API_URL * test(api): cover API URL contract and prefix resolution * feat(auth): disable login submit until email and password are valid * test(auth): align login tests with disabled submit behavior * Feat/ab/menu-and-header (#17) * chore(deps): add lucide-react for layout icon migration * feat(auth): add getPrimaryUserRole helper for header display * style(theme): add sidebar active tokens and nav group typography * refactor(menu): migrate nav icons to lucide and trim menu groups * feat(layout): redesign sidebar, topbar, and admin shell viewport * chore(menu): hide Reports and Documents from sidebar --------- Co-authored-by: Arthur Bassi <arthur.winiarski.ranger@outlook.com> * ci: add frontend PR quality baseline (#18) * chore(deps): add lucide-react for layout icon migration * feat(auth): add getPrimaryUserRole helper for header display * style(theme): add sidebar active tokens and nav group typography * refactor(menu): migrate nav icons to lucide and trim menu groups * feat(layout): redesign sidebar, topbar, and admin shell viewport * chore(menu): hide Reports and Documents from sidebar * ci: add PR quality baseline checks * ci: avoid self-matching standards guard * ci: split frontend quality gates --------- Co-authored-by: Arthur Bassi <arthur.winiarski.ranger@outlook.com> --------- Co-authored-by: Arthur Bassi <arthur.winiarski.ranger@outlook.com> Co-authored-by: Alexandre Brandizzi <alex_brandizzi@hotmail.com>
2026-06-18 14:41:17 -03:00
.vp-shell {
min-height: 100vh;
background: var(--color-bg-page);
font-family: var(--font-sans);
color: var(--foreground);
}
.vp-header {
background: var(--color-header-gradient);
color: var(--color-header-text);
padding: 14px 24px;
display: flex;
align-items: center;
justify-content: space-between;
box-shadow: var(--color-header-shadow);
}
.vp-brand {
font-family: var(--font-heading);
font-size: 18px;
font-weight: 600;
letter-spacing: 0.3px;
}
.vp-vendor-name {
font-size: 13px;
color: var(--color-header-text-muted);
}
.vp-container {
max-width: 1080px;
margin: 0 auto;
padding: 24px;
}
.vp-card {
background: var(--background);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 20px;
margin-bottom: 16px;
box-shadow: var(--shadow-sm);
}
.vp-card h2 {
margin: 0 0 4px;
font-size: 20px;
}
.vp-card h3 {
margin: 0 0 12px;
font-size: 16px;
color: var(--foreground);
}
.vp-muted {
color: var(--muted-foreground);
font-size: 13px;
}
.vp-row {
display: grid;
grid-template-columns: 140px 1fr;
gap: 8px;
margin: 6px 0;
font-size: 14px;
}
.vp-row strong {
color: var(--color-text-secondary);
}
.vp-dispatch-list {
display: grid;
gap: 12px;
}
.vp-dispatch-card {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
background: var(--background);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
cursor: pointer;
transition:
border-color var(--duration-fast) var(--ease-default),
box-shadow var(--duration-fast) var(--ease-default);
}
.vp-dispatch-card:hover {
border-color: var(--primary);
box-shadow: var(--shadow-md);
}
.vp-dispatch-title {
font-weight: 600;
font-size: 15px;
margin-bottom: 4px;
}
.vp-dispatch-meta {
font-size: 13px;
color: var(--muted-foreground);
}
.vp-status-pill {
display: inline-block;
padding: 4px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.2px;
}
.vp-status-sent {
background: var(--status-pending-bg);
color: var(--status-pending-text);
}
.vp-status-acknowledged {
background: var(--status-scheduled-bg);
color: var(--status-scheduled-text);
}
.vp-status-in-progress {
background: var(--status-inprogress-bg);
color: var(--status-inprogress-text);
}
.vp-status-completed {
background: var(--status-completed-bg);
color: var(--status-completed-text);
}
.vp-status-verified {
background: var(--status-onsite-bg);
color: var(--status-onsite-text);
}
.vp-status-cancelled {
background: var(--doc-no-bg);
color: var(--doc-no-text);
}
.vp-status-refused {
background: var(--doc-no-bg);
color: var(--doc-no-text);
}
Feat/vite typescript migration (#16) * chore: add eslint, prettier, husky and commitlint tooling * ci: add GitHub Actions workflow for lint and build * build: migrate from CRA to Vite with TypeScript config * docs: add architecture plan and design system documentation * fix: scope ESLint to new components and hooks directories * feat: add HTTP client, query cache and shared utilities * feat: add theme system and global application styles * feat: add shared UI, layout and domain badge components * feat: add auth domain, provider and login page * feat: add app shell, file-based routing and bootstrap * feat: add protected layout and dashboard module * feat: add accounts CRUD module * feat: add assets CRUD module * feat: add contacts CRUD module * feat: add employees CRUD module * feat: add locations CRUD module * feat: add calendar events module * feat: add follow-ups CRUD module * feat: add PM schedules CRUD module * feat: add work orders module with dispatch modals * feat: add vendors CRUD and portal token panel * feat: add vendor purchase orders module * feat: add uplifts queue module * feat: add settings for dropdowns and task templates * feat: add vendor portal routes and signature capture * test: add Vitest setup and Playwright login e2e spec * chore: remove legacy CRA pages, Redux store and JS hooks * chore: update gitignore and env example for Vite * docs: translate pt-BR docs and Cursor rules to English * fix(ci): fix login e2e session mock and prettier formatting * fix(build): use mjs router script for Node 20 CI compatibility * chore: remove migration scripts and unused generouted router * fix(auth): restore JWT and align CRUD with backend routes * fix(api): add no-content helpers and align paths with backend * fix(accounts): align detail and mutation payloads with backend * fix(contacts): resolve detail via GetContacts and map address DTOs * fix(work-orders): align routes, delete body, and create payload * fix(vendors): delete vendors via REST route * fix(pm-schedules): handle empty save and delete responses * fix(employees): add fallbacks for detail and dropdown calls * chore(calendar): disable routes until backend exists * chore(env): switch tracked env vars to Vite prefixes * fix(api): align frontend contracts with backend review findings Correct Work Order getById query param, asset site options via Location API, Employee JobTitleId payload, and remove stale API paths. * fix(employees,pm-schedules): align forms with backend API contracts Align PM Schedule form and save payload with PMSchedule_DTO fields. Bind employee Job Title select to jobTitleId for create/update payloads. Add regression tests for both flows. * fix(pm-schedules): gate edit/delete for Dev API contract Production Dev API exposes only GetList and Save. Hide unsupported edit/delete UI and block the edit route. Add regression tests for disabled actions. * docs(env): document VITE_API_URL must include /api suffix * refactor(api): extract shared API prefix URL resolution * feat(build): fail build on misconfigured absolute VITE_API_URL * test(api): cover API URL contract and prefix resolution * feat(auth): disable login submit until email and password are valid * test(auth): align login tests with disabled submit behavior * Feat/ab/menu-and-header (#17) * chore(deps): add lucide-react for layout icon migration * feat(auth): add getPrimaryUserRole helper for header display * style(theme): add sidebar active tokens and nav group typography * refactor(menu): migrate nav icons to lucide and trim menu groups * feat(layout): redesign sidebar, topbar, and admin shell viewport * chore(menu): hide Reports and Documents from sidebar --------- Co-authored-by: Arthur Bassi <arthur.winiarski.ranger@outlook.com> * ci: add frontend PR quality baseline (#18) * chore(deps): add lucide-react for layout icon migration * feat(auth): add getPrimaryUserRole helper for header display * style(theme): add sidebar active tokens and nav group typography * refactor(menu): migrate nav icons to lucide and trim menu groups * feat(layout): redesign sidebar, topbar, and admin shell viewport * chore(menu): hide Reports and Documents from sidebar * ci: add PR quality baseline checks * ci: avoid self-matching standards guard * ci: split frontend quality gates --------- Co-authored-by: Arthur Bassi <arthur.winiarski.ranger@outlook.com> --------- Co-authored-by: Arthur Bassi <arthur.winiarski.ranger@outlook.com> Co-authored-by: Alexandre Brandizzi <alex_brandizzi@hotmail.com>
2026-06-18 14:41:17 -03:00
.vp-btn {
display: inline-block;
padding: 10px 18px;
font-size: 14px;
font-weight: 600;
border-radius: var(--radius-md);
border: none;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-default);
}
.vp-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.vp-btn-primary {
background: var(--primary);
color: var(--primary-foreground);
}
.vp-btn-primary:hover:not(:disabled) {
background: var(--primary-hover);
}
.vp-btn-success {
background: var(--success);
color: var(--primary-foreground);
}
.vp-btn-warn {
background: var(--warning);
color: var(--primary-foreground);
}
.vp-btn-ghost {
background: transparent;
color: var(--foreground);
border: 1px solid var(--border);
}
.vp-btn-ghost:hover:not(:disabled) {
background: var(--secondary);
}
.vp-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 12px;
}
.vp-checklist-item {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 1px solid var(--border);
font-size: 14px;
}
.vp-checklist-item:last-child {
border-bottom: none;
}
.vp-checklist-item input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
}
.vp-checklist-item.done label {
text-decoration: line-through;
color: var(--muted-foreground);
}
.vp-comment {
padding: 10px 12px;
background: var(--input-background);
border-left: 3px solid var(--border);
margin-bottom: 8px;
font-size: 14px;
}
.vp-comment-meta {
font-size: 12px;
color: var(--muted-foreground);
margin-bottom: 4px;
}
.vp-textarea,
.vp-input {
width: 100%;
padding: 10px 12px;
font-size: 14px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
font-family: inherit;
box-sizing: border-box;
background: var(--input-background);
}
.vp-textarea {
min-height: 80px;
resize: vertical;
}
.vp-error {
background: var(--doc-no-bg);
color: var(--doc-no-text);
padding: 16px;
border-radius: var(--radius);
text-align: center;
}
.vp-empty {
text-align: center;
padding: 40px;
color: var(--muted-foreground);
}
.vp-signature-canvas {
border: 1px dashed var(--muted-foreground);
border-radius: var(--radius-md);
background: var(--background);
touch-action: none;
display: block;
width: 100%;
max-width: 500px;
height: 180px;
}
.vp-back-link {
color: var(--primary);
text-decoration: none;
font-size: 14px;
display: inline-block;
margin-bottom: 12px;
}
.vp-back-link:hover {
text-decoration: underline;
}
.vp-uplift-row {
padding: 12px;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--input-background);
margin-bottom: 10px;
}
.vp-uplift-status-pending {
display: inline-block;
padding: 3px 9px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
background: var(--status-pending-bg);
color: var(--status-pending-text);
}
.vp-uplift-status-approved {
display: inline-block;
padding: 3px 9px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
background: var(--status-completed-bg);
color: var(--status-completed-text);
}
.vp-uplift-status-rejected {
display: inline-block;
padding: 3px 9px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
background: var(--doc-no-bg);
color: var(--doc-no-text);
}
.vp-uplift-status-changesrequested {
display: inline-block;
padding: 3px 9px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
background: var(--status-scheduled-bg);
color: var(--status-scheduled-text);
}
.vp-uplift-status-withdrawn,
.vp-uplift-status-expired {
display: inline-block;
padding: 3px 9px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
background: var(--input-background);
color: var(--muted-foreground);
}
.vp-uplift-form {
margin-top: 12px;
}
.vp-error-inline {
color: var(--doc-no-text);
font-weight: 600;
}
Feat/vite typescript migration (#16) * chore: add eslint, prettier, husky and commitlint tooling * ci: add GitHub Actions workflow for lint and build * build: migrate from CRA to Vite with TypeScript config * docs: add architecture plan and design system documentation * fix: scope ESLint to new components and hooks directories * feat: add HTTP client, query cache and shared utilities * feat: add theme system and global application styles * feat: add shared UI, layout and domain badge components * feat: add auth domain, provider and login page * feat: add app shell, file-based routing and bootstrap * feat: add protected layout and dashboard module * feat: add accounts CRUD module * feat: add assets CRUD module * feat: add contacts CRUD module * feat: add employees CRUD module * feat: add locations CRUD module * feat: add calendar events module * feat: add follow-ups CRUD module * feat: add PM schedules CRUD module * feat: add work orders module with dispatch modals * feat: add vendors CRUD and portal token panel * feat: add vendor purchase orders module * feat: add uplifts queue module * feat: add settings for dropdowns and task templates * feat: add vendor portal routes and signature capture * test: add Vitest setup and Playwright login e2e spec * chore: remove legacy CRA pages, Redux store and JS hooks * chore: update gitignore and env example for Vite * docs: translate pt-BR docs and Cursor rules to English * fix(ci): fix login e2e session mock and prettier formatting * fix(build): use mjs router script for Node 20 CI compatibility * chore: remove migration scripts and unused generouted router * fix(auth): restore JWT and align CRUD with backend routes * fix(api): add no-content helpers and align paths with backend * fix(accounts): align detail and mutation payloads with backend * fix(contacts): resolve detail via GetContacts and map address DTOs * fix(work-orders): align routes, delete body, and create payload * fix(vendors): delete vendors via REST route * fix(pm-schedules): handle empty save and delete responses * fix(employees): add fallbacks for detail and dropdown calls * chore(calendar): disable routes until backend exists * chore(env): switch tracked env vars to Vite prefixes * fix(api): align frontend contracts with backend review findings Correct Work Order getById query param, asset site options via Location API, Employee JobTitleId payload, and remove stale API paths. * fix(employees,pm-schedules): align forms with backend API contracts Align PM Schedule form and save payload with PMSchedule_DTO fields. Bind employee Job Title select to jobTitleId for create/update payloads. Add regression tests for both flows. * fix(pm-schedules): gate edit/delete for Dev API contract Production Dev API exposes only GetList and Save. Hide unsupported edit/delete UI and block the edit route. Add regression tests for disabled actions. * docs(env): document VITE_API_URL must include /api suffix * refactor(api): extract shared API prefix URL resolution * feat(build): fail build on misconfigured absolute VITE_API_URL * test(api): cover API URL contract and prefix resolution * feat(auth): disable login submit until email and password are valid * test(auth): align login tests with disabled submit behavior * Feat/ab/menu-and-header (#17) * chore(deps): add lucide-react for layout icon migration * feat(auth): add getPrimaryUserRole helper for header display * style(theme): add sidebar active tokens and nav group typography * refactor(menu): migrate nav icons to lucide and trim menu groups * feat(layout): redesign sidebar, topbar, and admin shell viewport * chore(menu): hide Reports and Documents from sidebar --------- Co-authored-by: Arthur Bassi <arthur.winiarski.ranger@outlook.com> * ci: add frontend PR quality baseline (#18) * chore(deps): add lucide-react for layout icon migration * feat(auth): add getPrimaryUserRole helper for header display * style(theme): add sidebar active tokens and nav group typography * refactor(menu): migrate nav icons to lucide and trim menu groups * feat(layout): redesign sidebar, topbar, and admin shell viewport * chore(menu): hide Reports and Documents from sidebar * ci: add PR quality baseline checks * ci: avoid self-matching standards guard * ci: split frontend quality gates --------- Co-authored-by: Arthur Bassi <arthur.winiarski.ranger@outlook.com> --------- Co-authored-by: Arthur Bassi <arthur.winiarski.ranger@outlook.com> Co-authored-by: Alexandre Brandizzi <alex_brandizzi@hotmail.com>
2026-06-18 14:41:17 -03:00
.vp-nav {
background: var(--background);
border-bottom: 1px solid var(--border);
padding: 0 24px;
}
.vp-nav-inner {
max-width: 1080px;
margin: 0 auto;
display: flex;
gap: 4px;
}
.vp-nav-tab {
background: none;
border: none;
padding: 12px 16px;
font-size: 14px;
font-weight: 500;
color: var(--muted-foreground);
cursor: pointer;
border-bottom: 2px solid transparent;
transition:
color var(--duration-fast) var(--ease-default),
border-color var(--duration-fast) var(--ease-default);
text-decoration: none;
display: inline-block;
}
.vp-nav-tab:hover {
color: var(--foreground);
}
.vp-nav-tab.active {
color: var(--foreground);
border-bottom-color: var(--primary);
}
.vp-po-table {
width: 100%;
border-collapse: collapse;
font-size: 14px;
}
.vp-po-table th,
.vp-po-table td {
padding: 10px 12px;
text-align: left;
border-bottom: 1px solid var(--border);
}
.vp-po-table th {
background: var(--input-background);
font-weight: 600;
color: var(--color-text-secondary);
font-size: 13px;
}
.vp-po-table tbody tr {
cursor: pointer;
transition: background var(--duration-fast) var(--ease-default);
}
.vp-po-table tbody tr:hover {
background: var(--input-background);
}
.vp-po-number {
font-weight: 600;
color: var(--foreground);
}
.vp-po-muted-cell {
color: var(--muted-foreground);
font-size: 13px;
}