Finance & Accounting App – Modular Enterprise Suite

Executive Summary

PennyPerfect is an enterprise modular double-entry accounting suite engineered for multi-tenant Supercards organizations. Rather than a monolithic ERP, PennyPerfect is architected as seven composable frontend packages (@itc/pennyperfect-*) that deliver dedicated accounting modules—from chart of accounts and journal transactions to balance sheets, income statements, and PDF reporting.

All packages are orchestrated by a meta-dependency package (@itc/pennyperfect), auto-discovered through @itc/menu-system, and powered by a consolidated Laravel package (itc/pennyperfect) operating under /api/v1 with Sanctum authentication and strict tenant-scoping.

Architecture

Modular Package Composition & Host Ingestion Topology

flowchart TB
    subgraph Host_App ["Supercards Host Application (Quasar / Vue 3)"]
        BOOT["Host Boot Files<br/>(configureTaxApi, configureSettingsApi)"]
        INJECT["Vue provide/inject<br/>(apiClient, authStore, tenantStore)"]
        MENU_SYS["@itc/menu-system<br/>(discover:ci / appPlugin auto-discovery)"]
    end

    subgraph Meta_Package ["@itc/pennyperfect (Meta-Orchestrator)"]
        DEPS["Exports aggregated routes & package bindings"]
    end

    subgraph Domain_Packages ["7 Composable Vue 3 / Vite Library Packages"]
        PKG_COA["@itc/pennyperfect-chartofaccounts<br/>(Ledger Trees, System Account Guards)"]
        PKG_TX["@itc/pennyperfect-transactions<br/>(Income, Expense, Journal, Tax Dialogs)"]
        PKG_IS["@itc/pennyperfect-incomestatement<br/>(P&L Statements, Branch Breakdown)"]
        PKG_BS["@itc/pennyperfect-balancesheet<br/>(Asset/Liability Ledgers, Equity Rollup)"]
        PKG_REP["@itc/pennyperfect-reports<br/>(Daily/Monthly Summaries, A4 PDF Export)"]
        PKG_SET["@itc/pennyperfect-settings<br/>(Tax Codes, Fiscal Years, Currency)"]
    end

    subgraph Backend_Services ["Laravel API Gateway (/api/v1)"]
        SANCTUM["Laravel Sanctum (auth:sanctum)"]
        TENANT_MW["Tenant Scoping Middleware (X-Tenant-Id)"]
        PP_BE["itc/pennyperfect (Accounting Engine)"]
        AUTH_BE["itc/core-auth-accounts (Branches & Users)"]
        PG_DB[("PostgreSQL Database<br/>(Tenant-Scoped Accounts & Ledgers)")]
    end

    Host_App --> Meta_Package
    Meta_Package --> Domain_Packages
    BOOT & INJECT --> Domain_Packages
    Domain_Packages -->|"HTTPS / Bearer Token + X-Tenant-Id"| SANCTUM
    SANCTUM --> TENANT_MW
    TENANT_MW --> PP_BE & AUTH_BE
    PP_BE & AUTH_BE --> PG_DB

Package Architecture Standard

Each @itc/pennyperfect-* package is structured as an isolated, independently versioned Vite library package:

@itc/pennyperfect-<module>/
├── src/
│   ├── components/      # Quasar UI components, Dialogs, Trees
│   ├── pages/           # Root module pages mounted under /penny-perfect/*
│   ├── stores/          # Module Pinia stores (with persisted state if needed)
│   ├── services/        # HTTP API services (apiUrlBuilder + callApi / apiClient)
│   ├── types/           # TypeScript interfaces & DTO contracts
│   ├── router/          # routes.ts exporting RouteRecordRaw[]
│   └── index.ts         # appPlugin manifest (routes, menu, boot helpers)
├── package.json         # Scoped package manifest, peerDependencies
├── tsconfig.json        # TypeScript configuration
└── vite.config.ts       # Vite 7 library build (ESM + CJS)

Data Schema & Accounting Ledger Flow

PennyPerfect enforces double-entry bookkeeping rules across all journal, income, and expense entries:

erDiagram
    TENANT ||--o{ ACCOUNT : "defines chart of"
    ACCOUNT ||--o{ ACCOUNT : "parent/child hierarchy"
    TENANT ||--o{ TRANSACTION : "records"
    TRANSACTION ||--o{ TRANSACTION_ENTRY : "contains debit/credit lines"
    ACCOUNT ||--o{ TRANSACTION_ENTRY : "impacted by"
    TAX_CODE ||--o{ TRANSACTION : "applied to"
    BRANCH ||--o{ TRANSACTION : "attributed to"

    ACCOUNT {
        uuid id PK
        string code
        string name
        string type "Asset | Liability | Equity | Revenue | Expense"
        uuid parent_id FK
        boolean is_system_account
        decimal current_balance
    }

    TRANSACTION {
        uuid id PK
        string reference_no
        date transaction_date
        string type "Journal | Income | Expense"
        uuid tax_code_id FK
        uuid branch_id FK
        decimal total_amount
        string status "Draft | Posted"
    }

    TRANSACTION_ENTRY {
        uuid id PK
        uuid transaction_id FK
        uuid account_id FK
        string entry_type "DEBIT | CREDIT"
        decimal amount
    }

    TAX_CODE {
        uuid id PK
        string code
        decimal rate_percentage
        boolean is_active
    }

Visual Workflows & Production Interfaces

1. Chart of Accounts Ledger Hierarchy

2. Multi-Tab Transactions & Tax Code Management

3. Financial Statements: Balance Sheet & Income Statement

4. Operational Financial Reports & Export

Client-Side Report Preview & Multi-Page A4 PDF Assembly

sequenceDiagram
    autonumber
    actor User as Finance Manager
    participant Page as Reports Page (/penny-perfect/reports)
    participant Store as useReportsStore (Pinia)
    participant API as itc/pennyperfect (/api/v1/reports)
    participant Iframe as Hidden Print Iframe (/external/reports)
    participant Engine as html2canvas + jsPDF

    User->>Page: Select Monthly Summary & Branch Filter
    Page->>Store: fetchMonthlySummary({ branchId, month, year })
    Store->>API: GET /api/v1/reports/monthly-summary
    API-->>Store: JSON Summary Records
    Store-->>Page: Render On-Screen Report
    
    User->>Page: Click "Export to PDF"
    Page->>Iframe: Mount styled report in hidden A4 print frame
    Iframe->>Engine: html2canvas captures high-res DOM snapshot (.report-preview-a4)
    Engine->>Engine: Paginate canvas slices into 297x210mm A4 pages (jsPDF)
    Engine-->>User: Trigger browser PDF download (PennyPerfect_Report_2026.pdf)

What I Built (Personal Contributions)

• Engineered Multi-Package Frontend Architecture: Decomposed the accounting system into 7 modular Vite/Vue 3 packages (@itc/pennyperfect-*) with standalone routes, Pinia stores, and Quasar UI pages.
• P0 Authentication & Tax API Resolution: Diagnosed and fixed boot-time tax endpoint failure that caused unexpected session logouts on page load by implementing configureTaxApi lazy configuration.
• Standardized Host Provide/Inject Integration: Implemented host boot providers for apiClient, authStore, and tenantStore, ensuring uniform Sanctum Bearer tokens and X-Tenant-Id header propagation.
• Branch API Alignment: Refactored branch loaders across statements and reports to consume GET /tenants/{tenantId}/branches from itc/core-auth-accounts and made branch fields nullable for flexible transactions.
• Route & Menu Discovery Pipeline: Streamlined appPlugin.routes and @itc/menu-system auto-discovery to expose 6 production accounting surfaces under the /penny-perfect/* hierarchy.
• Client-Side PDF Generation Engine: Designed an in-browser PDF export pipeline using hidden iframe rendering, html2canvas, and jsPDF for pixel-perfect A4 accounting statements without server rendering load.