Vennsol design system
Shared by vennsol.pk and app.vennsol.pk · Base UI + shadcn (base-mira)
Buttons & badges
Variants and sizes; icons use data-icon, so components size them.
Forms
FieldGroup + Field; validation via data-invalid on Field and aria-invalid on the control.
Must be between 0 and 100.
Dialogs, confirmations & sheets
Overlays enter on the out curve; with reduced motion only the fade remains.
Toasts
Undo, promise (one toast for all states), and in-place updates that pulse.
Loading & empty states
Skeletons for layout, Spinner inside buttons, Progress for long jobs, Empty for nothing-yet.
Data table
DataTable + DataTablePagination (TanStack Table v9): every list in the app looks and loads the same way. Sorting on the Invoice column; server-style paging.
| Invoice | NTN | Date | Sales value (PKR) | Status |
|---|---|---|---|---|
| INV-01040 | 9010600-8 - DEFENCE DIVISION. | 2026-01-10 | 4,126.50 | CPR recorded |
| INV-01041 | 1945826-6 - CIVIL AVIATION AUTHORITY | 2026-02-11 | 5,502.00 | Open |
| INV-01042 | 9011024-2 - AIR UNIVERSITY ISLAMABAD | 2026-03-12 | 6,877.50 | Open |
| INV-01043 | 9010600-8 - DEFENCE DIVISION. | 2026-04-13 | 8,253.00 | Open |
| INV-01044 | 1945826-6 - CIVIL AVIATION AUTHORITY | 2026-05-14 | 9,628.50 | CPR recorded |
| INV-01045 | 9011024-2 - AIR UNIVERSITY ISLAMABAD | 2026-06-15 | 11,004.00 | Open |
| INV-01046 | 9010600-8 - DEFENCE DIVISION. | 2026-07-16 | 12,379.50 | Open |
| INV-01047 | 1945826-6 - CIVIL AVIATION AUTHORITY | 2026-08-17 | 13,755.00 | Open |
Form hook (validated forms)
useAppForm (TanStack Form bound to Field): labels, schema errors after touch, aria-invalid, and a submit button that waits and spins.
Tabs
The indicator slides between triggers on the in-out curve.
128 invoice lines this month.