SuperCards – Unified Enterprise Operations Suite

Executive Summary

SuperCards is a multi-tenant enterprise product suite built on a shared card platform. Work items, financial records, loan accounts, quizzes, and internal applications are all modeled as cards inside one authenticated workspace, and each product (task management, accounting, lending, assessments, recognition, file storage, team apps) is delivered as its own module on top of the same core.

My role as Frontend Engineer covered two layers. At the platform layer, I worked alongside senior engineers on the card and task management system, the login and authentication flow, the core reusable components, and shared packages that every product consumes. At the product layer, I shipped and hardened individual surfaces: full ownership on accounting and assessments, and substantial partial delivery on lending, the dashboard, recognition, file storage, and the team app catalog.

Architecture

Suite Topology & Client-to-Cloud Flow

flowchart TB
    subgraph Client ["SuperCards Client (Web + Capacitor)"]
        AUTH["Login & Auth Flow"]
        CORE["Core Reusable Components"]
        PKG["Shared Packages"]
        STORE["Pinia Stores"]
        AUTH --> STORE
        CORE --> STORE
        PKG --> CORE
    end

    subgraph Products ["Product Modules (Suite)"]
        TASKS["Task Management Cards"]
        PENNY["Accounting (Penny Perfect)"]
        LOAN["Lending (Loan App)"]
        DASH["Operations Dashboard"]
        BOUNTY["Employee Recognition"]
        FILE["Cloud File Manager"]
        QUIZ["Assessment & Quiz"]
        TEAM["Team App Catalog"]
    end

    CORE --> Products
    AUTH --> Products
    STORE --> API["Axios API Client"]
    API --> LARAVEL["Laravel REST API"]
    API --> WS["Laravel Echo / Pusher"]
    LARAVEL --> DB[("PostgreSQL")]
    WS --> LARAVEL
    CAP["Capacitor Native Layer"] --> Client
    CAP --> FCM["Firebase Push"]

Modular Frontend Structure

SuperCards is a suite, not a single distributable package. Each product lives in an isolated module with its own routes, pages, and components, registered into a shared Quasar layout and built on a common core:

Contribution Areas

Platform Layer (shared across all products)

1. Card & Task Management System — Core Contributor (with seniors)

What this surface does (business terms):
The card system is the backbone of the suite. Teams create, assign, tag, comment on, and track operational cards across projects, and other products reuse the same card model.

What I delivered (alongside senior engineers):

• Enhanced task list rendering with configurable field visibility (assignees, tags, attachments, completion state, thumbnails, dashboard-specific layouts).
• Improved list-item performance and correctness: markdown/HTML description previews, media link resolution via computed pipelines, and tag chip enrichment from the global tag store.
• Built meeting-topic task orchestration: sub-task vs. related-task distinction, safe unlink flows (detach without delete), and read-only preview mode for external meeting shares.
• Strengthened store synchronization so UI state updates immediately after unlink, delete, and related-card operations without full page reloads.

Business value: Teams spend less time context-switching during meetings and project reviews, and facilitators can reorganize agendas without risking data loss.

2. Task Detail Experience — Core Contributor (with seniors)

What this surface does:
The detail view is the operational command center for a single card: description, custom fields, child tasks, blockers, related items, comments, attachments, meeting topics, product links, and action workflows.

What I delivered:

• Extended the configurable detail shell (layoutConfig props) so different products show only relevant sections (Quiz hides attachments; Team App shows website/Git URL and publish toggle).
• Integrated rich content rendering (Markdown preview, HTML parsing, heading deep-links, media carousels).
• Wired cross-entity actions: tag assignment, comment threads, attachment management, meeting topic panels, and dynamic meta-field forms.
• Ensured detail views work inside slide-over preview panels used across Dashboard, Quiz Studio, and Team App.

Business value: One detail component powers multiple products, giving users a consistent editing experience whether they are managing a project task, a quiz, or an internal app listing.

3. Login & Authentication Flow — Contributor

What this surface does:
The single entry point into the suite. It authenticates the user, resolves the tenant and branch context, and routes them into the right product with the right permissions.

What I delivered:

• Login flow on web and Capacitor native shells, with token handling through the shared Axios client and auth interceptors.
• Route-level guards (requiresAuth) and session continuity through persisted Pinia state.
• Permission wiring so the v-permission directive and auth store getters gate products and actions consistently.
• Tenant and branch context resolution after login, so finance and lending modules load scoped data.

Business value: Users authenticate once and move across every product in the suite with consistent access control and tenant isolation.

4. Core Reusable Components & Shared Packages — Contributor

What this surface does:
The building blocks every product relies on. Instead of each product team building its own detail drawers, tag selectors, comment threads, and media uploaders, the suite shares one tested set.

What I delivered:

• Card primitives: TaskList, TaskListItem, and TaskDetails, configurable through fields and layoutConfig props per product.
• Cross-module components: tag assignment, comments, media management, and chart wrappers reused across modules.
• Shared composables for criteria/pagination, WebSocket events, and navigation behavior.
• Shared packages that product modules consume, keeping behavior consistent and reducing per-product duplication.

Business value: New product surfaces start from proven building blocks, so they are faster to deliver and look and behave consistently.

Product Layer

5. Accounting Module (Penny Perfect) — Full

What this surface does:
Branch-level bookkeeping for organizations that need general ledger, journal entries, financial statements, and voucher printing inside the same platform they use for operations.

What I delivered:

• Transaction ledger with date controls, branch filtering, debit/credit columns, running balances, and color-coded entry types.
• Journal entry creation and editing with account multi-select, media attachments on entries, and detail dialogs.
• Financial reporting surfaces: balance sheet, income statement, chart of accounts, and report index with print-preview routes.
• Import/export pipelines for bulk transaction and journal data.
• External print layouts for vouchers, transaction reports, and report previews (shareable/printable views).

Business value: Finance teams no longer need a separate accounting tool for day-to-day posting and statement generation, and branch operators work in the same tenant context as the rest of the organization.

6. Assessment & Quiz Platform — Full

What this surface does:
Internal learning and knowledge checks. Authors build quizzes, publish them, and employees attend timed assessments or self-challenge sessions.

What I delivered:

• Quiz Studio: card-grid management, status tags, preview panel, and inline question authoring (QuizQuestionForm).
• Question lifecycle: create, update, delete questions; cover image upload/removal; quiz status transitions.
• Participation flows: attend-quiz route, challenge-yourself mode, participant tracking, and result display.
• Reuse of TaskDetails as the quiz metadata shell with quiz-specific layout config (attachments off, custom fields off).

Business value: HR and team leads can run knowledge checks without a separate LMS, and quizzes inherit the platform’s tagging, ownership, and preview patterns.

7. Lending Platform (Loan App) — Partial

What this surface does:
Microfinance and cooperative lending: member onboarding, loan lifecycle, collections, branch management, dues tracking, and regulatory-style reports.

What I contributed:

• Loan and member management UI: searchable loan tables, member detail panels, loan dialogs, and status-filtered views (pending, approved, disbursed, ongoing).
• Collection and dues workflows: collection date editing, add-dues dialogs, and payment-day request settings.
• Reporting surfaces: account statements, monthly summary reports, collection sheet reports, and LLP reports, including print-preview routes.
• Branch and settings integration: tenant/branch preference resolution, sales tax configuration, and import dialogs for savings/member data.
• Member audit and settlement dialogs for operational review.

Remaining scope (not yet full): Additional home/entry flows, agent management parity, and deeper cooperative settings.

8. Operations Dashboard — Partial

What this surface does:
The landing workspace where users see today’s time entries, assigned tasks, starred/watch items, team availability, announcements, and recognition leaderboard highlights in one scrollable view.

What I contributed:

• Composed multi-source dashboard panels: Klockins time entries, task lists with inline preview, bounty leaderboard medals, and announcement covers.
• Implemented in-dashboard task preview using the shared TaskDetails slide-over without route navigation.
• Wired pagination and criteria across watch lists, star lists, and resource views.
• Integrated availability status and tag-filtered resource browsing.

Remaining scope: Configurable widget layout and executive-level analytics cards.

9. Employee Recognition (Office Bounty) — Partial

What this surface does:
Peer and manager recognition: allocate bounty budgets, award colleagues, track given bounties, and display period-based leaderboards.

What I contributed:

• Bounty awarding flow with balance checks, admin/owner permission gates, and creation dialogs.
• Leaderboard and period filtering (monthly default range, custom date windows).
• Given bounty history with paginated lists and tag-enriched records.
• Dashboard integration: top-3 medal display on the home dashboard.

Remaining scope: Advanced allocation rules, team-level analytics, and notification hooks.

10. Cloud File Manager — Partial

What this surface does:
Google Drive–connected document storage: browse folders, upload files, preview documents, and organize content with breadcrumb navigation.

What I contributed:

• Drive browser UI with folder navigation, breadcrumb trail, and nested route support (/drive/:path).
• File operations: create folder, upload, preview (open in new tab), context menu actions.
• Move workflow via FileMoveComponent for reorganizing files across directories.
• Store-driven state for file lists, preview image links, and breadcrumb building.

Remaining scope: Bulk move/copy, sharing permissions UI, and multi-provider support beyond Google Drive.

11. Team App Catalog — Partial

What this surface does:
An internal app marketplace where teams publish tools they’ve built, with publish/unpublish status, website links, Git URLs, ratings, and searchable card listings.

What I contributed:

• My Apps and App List pages with status filters (All / Published / Unpublished).
• App card grid with preview panel, average rating display, and status tag chips.
• TaskDetails integration with team-app-specific props: website URL, Git URL, publish toggle, and rating mode.
• App lifecycle handlers: status change, deletion, and preview scroll-into-view on selection.

Remaining scope: Full admin review workflow, app discovery/search, and install/analytics tracking.

Technical Highlights

Summary Table — Contribution Depth