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.

FY 2025-26Pending CPRPurchaseRate > 100%

Forms

FieldGroup + Field; validation via data-invalid on Field and aria-invalid on the control.

FBR invoice line
Demo only; nothing is saved.

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.

Loading invoices
Import
Importing HS codes
x
No invoices this fiscal year
Add the first invoice line to start the FY 2026-27 record.

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.

InvoiceNTNDateSales value (PKR)Status
INV-010409010600-8 - DEFENCE DIVISION.2026-01-104,126.50CPR recorded
INV-010411945826-6 - CIVIL AVIATION AUTHORITY2026-02-115,502.00Open
INV-010429011024-2 - AIR UNIVERSITY ISLAMABAD2026-03-126,877.50Open
INV-010439010600-8 - DEFENCE DIVISION.2026-04-138,253.00Open
INV-010441945826-6 - CIVIL AVIATION AUTHORITY2026-05-149,628.50CPR recorded
INV-010459011024-2 - AIR UNIVERSITY ISLAMABAD2026-06-1511,004.00Open
INV-010469010600-8 - DEFENCE DIVISION.2026-07-1612,379.50Open
INV-010471945826-6 - CIVIL AVIATION AUTHORITY2026-08-1713,755.00Open
1–8 of 23
Page 1 of 3

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.

Year-month-day

Tabs

The indicator slides between triggers on the in-out curve.

128 invoice lines this month.