apps/sample-vue-full: fully revamp to new design with Ant Design

[Galuh80]

Pull Request Checklist

• I read and followed the Contribution guide
• I linked the related issue, if one exists
• I ran the relevant checks or tests for the affected area

Summary

Redesign and improve the sample-vue-full frontend: fix broken imports, split the secure layout into reusable components, redesign the sign-in page and dashboard, add web component wrappers, refactor all Demo, Visuals, Data Entry, and T4t views with reusable ADV components, and fix Biome and SonarCloud issues.

What is being improved and why:

The existing sample-vue-full app had several issues that made it hard to use as a reference template: broken @common/* import paths that prevented Vite from starting, placeholder CSS that poisoned all text colors, a bare login page with no real layout, a dashboard made entirely of skeleton loaders, monolithic layout files with no component separation, and Demo/Visuals/DataEntry views with raw HTML elements and no Ant Design structure. These changes address all of that — the goal is for sample-vue-full to serve as a genuinely usable reference for teams starting new apps from this template.

Changes by area:

Imports & build:

• Fixed broken relative ../common/* imports — replaced with proper @common/vue, @common/iso, @common/web package names
• Added explicit Vite resolve.alias for all @common/* packages to ensure reliable resolution regardless of npm workspace hoisting
• Added missing VITE_INITIAL_SECURE_PATH and VITE_INITIAL_PUBLIC_PATH env vars that caused silent login failure (router.push(undefined))
• Fixed broken ./fetch.js import in common/vanilla/web/t4t-fe.js — corrected to ../iso/fetch.js
• Fixed broken dev:mocked script (--config apps/vite.config.js path didn't exist) — corrected to use local vite.config.js
• Added Vite dev server proxy (/api → http://127.0.0.1:3000) for development mode so T4t pages work without changing the API URL env var

Fonts & styling:

• Self-hosted Fraunces and DM Sans via @fontsource packages to eliminate Google Fonts CDN dependency and fix SonarCloud SRI warning
• Replaced placeholder * { color: darkgreen } global CSS with a proper reset
• Unified typography — replaced all Fraunces serif usage with DM Sans for a consistent, modern UI

Sign-in page:

• Replaced bare form with a split-panel layout: dark decorative left panel (animated dot grid, brand, stack pills) and clean white right panel
• Used a-input, a-button, a-checkbox from Ant Design Vue with :deep() overrides for consistent focus/hover styling
• Added slide transition between login and OTP modes

Secure layout — split into reusable components:

• AppSidebar.vue — dark navy sidebar, collapsible with breakpoint="md", brand via props, a-menu navigation, mobile overlay with backdrop; all app-specific data injected via props
• AppHeader.vue — sticky header with a-button toggle, a-input search (toggle on click), a-popover + a-list for chat and notifications, a-divider, a-avatar + a-dropdown for user menu; data received via props, mutations emitted as events
• AppFooter.vue — minimal footer with brand prop

Dashboard:

• StatCard.vue (reusable) — a-statistic inside a-card with trend icon, footer text, hover lift animation; fully prop-driven
• MemberCard.vue (reusable) — a-card + a-avatar + a-tag with visible border and hover shadow
• Replaced skeleton loaders with real content: Comments (a-list + a-typography-paragraph with expandable ellipsis), Useful Links (a-list with icons), Announcements (a-timeline with type tags and unread badge)

Web component wrappers:

• WebCamCapture.vue (reusable) — wraps vcxwc-web-cam with a-card, live status indicator, snapshot grid with download/delete, snap log
• SignaturePad.vue (reusable) — wraps vcxwc-sign-pad with a-card, signed/empty tag, save and clear actions, preview via a-image; full v-model support and configurable stroke/background props

Demo views — reusable components and ADV layout:

• ColorBox.vue (reusable) — 80×80 colored box with hover lift animation, replaces inline-styled divs
• DemoTest.vue — reorganised into 4 a-card sections (Template Refs, Counter & Store, Object Reactivity, API & MSW Tests); raw <button> and <div> elements replaced with a-button, a-tag, a-space, a-divider; API response now displayed inline instead of console.log only
• DemoSignPad.vue — uses SignaturePad.vue reusable component with two instances (Full Signature and Initials), shared signature log via a-list
• DemoWebCam.vue — uses WebCamCapture.vue reusable component with snap log via a-list
• Filler.vue — redesigned with a-card wrapper, a-descriptions for route info, and responsive grid list (a-list + a-card grid) for 50-item scroll test

Visuals views — reusable components and ADV layout:

• ChartCard.vue (reusable) — wraps Chart.js canvas in a-card with title icon, #extra slot for controls (radio group, select), and reactive chart rebuild via watch
• DemoChart1.vue — redesigned with 4 a-statistic summary cards, bar chart with Q1–Q4 a-radio-group switcher, doughnut chart (category split), and line chart with year a-select; all icons passed through markRaw to satisfy Biome
• LeafletMap.vue (reusable) — wraps Leaflet with fix for Vite marker icon resolution (L.Icon.Default.mergeOptions), props for center, zoom, markers[], and tileLayer; emits map-click and marker-click; exposes flyTo method via defineExpose
• DemoLeaflet.vue — redesigned with tile layer switcher (a-radio-group: Street / Topo / Dark), location list (a-list + a-avatar + a-tag), click-to-fly-to behavior, selected location detail via a-descriptions, and Add Location a-modal with form (a-input, a-input-number, a-switch)

Data Entry views — ADV layout:

• DemoForm.vue — redesigned with 2-column card-grid: Various Inputs card (slider, date-picker, switch, checkbox-group, radio-group, textarea, store counter) + Transfer card on the left; File Upload, WebSocket, and Error Pages cards on the right; all submit buttons have :loading state
• DemoCard.vue — full ADV card showcase across 7 sections: Basic Cards, Cover Cards (gradient CSS + a-card-meta), Statistic Cards, Tabbed Card (a-tabs + a-list), Inner Cards (a-card type="inner" + a-progress), Loading State (a-skeleton + a-switch toggle), and Quick Entry Form
• DemoCascade.vue — redesigned with 2-column layout: cascade form (Region multi-select → Countries multi-select) on the left; live Selection Summary (per-region breakdown with a-badge + a-tag) and Stats (a-statistic ×3) on the right
• DemoCascade2.vue — redesigned with 2-column layout: continent/country/state checkboxes with indeterminate support and Force Include/Exclude filters on the left; Stats card + a-tree selection hierarchy + Force Filters summary on the right; fixed typo forceExlcudes → forceExcludes and empty onCheckAllChangeExcludes
• DemoCascade2Api.vue — redesigned as API-driven version with per-section a-spin loading states, a-badge API status indicator, a-alert for errors, and a-timeline showing GET endpoint details

T4t CRUD view:

• T4t.vue — redesigned with a-card wrapper (table display name + record count badge in title), all toolbar actions (Reload, Filter, Create, Delete, Import, Export, Back) moved to #extra with proper ADV button types and icons; filter drawer uses #footer slot with Add Filter / Clear All / Apply; form drawer uses #footer slot with Cancel / Save Changes; a-empty shown when no filters added
• Fixed T4t route paths from flat depth-2 (/t4t-student) to grouped depth-3 (/t4t/student, /t4t/subject, /t4t/audit-logs) so they appear as a T4t submenu group in the sidebar
• Added MSW mock handlers for GET /api/t4t/config/:table and GET /api/t4t/find/:table — student (3 records), subject (4 records), audit_logs (2 records) — so the T4t pages work fully in dev:mocked mode without a backend

Quality fixes:

• Fixed Biome false-positive noUnusedImports warnings for Vue template imports — used markRaw/computed pattern where possible, biome-ignore for unavoidable cases
• Fixed SonarCloud contrast failures: replaced rgba hover backgrounds with solid equivalents so SonarCloud can compute contrast against the actual dark background; corrected text colors to meet WCAG AA 4.5:1
• Fixed SonarCloud nested template literal warning in LeafletMap.vue — extracted inner expression to a variable before use
• Fixed duplicate .stat-icon-wrap CSS selector

Affected Area

• apps
• common
• docs
• scripts
• CI/CD or GitHub Actions

Validation

# Vite dev server starts cleanly
cd apps/sample-vue-full && npm run dev

# Biome — 0 errors, 0 warnings
npx biome check apps/sample-vue-full

# Manual checks
# 1. Open http://127.0.0.1:8080 — sign-in page renders correctly
# 2. Check "Force login (bypass backend)" → click Sign In → redirects to /dashboard
# 3. Sidebar collapses on mobile (< 768px), backdrop appears when opened
# 4. Notification and chat popovers open/close with correct unread counts
# 5. Stat card hover animation on /dashboard
# 6. WebCam capture at /demo/web-cam — take photo, verify snapshot grid
# 7. Signature pad at /demo/sign-pad — draw, verify preview and download
# 8. Chart page at /visuals/g2-chart1 — verify bar/doughnut/line charts render and Q1–Q4 / year switchers update data
# 9. Leaflet map at /visuals/leaflet-map — verify tile switcher, click location list to fly-to, add new marker via modal
# 10. Data Entry pages — /data-entry/form, /data-entry/card, /data-entry/cascade, /data-entry/cascade2
# 11. T4t pages — run `npm run dev:mocked`, open /t4t/student — table loads with mock data; verify T4t submenu group appears in sidebar

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud