Skip to content

System Navigation & User Interface

Cashy-Hub features a unified, single-page reactive interface designed for rapid retail counter operations, transparent pawn transactions, and zero-latency workflow execution.


1. Top Navigation Bar

The persistent top navigation bar remains at the top of the screen across all pages and provides immediate access to core operational modules, creation triggers, and administrative configuration.

graph LR
    Logo[Cashy Logo] --> Home["Home Board (/)"]
    Deals["Deals (/deals)"]
    Items["Items (/items)"]
    Customers["Customers (/customers)"]
    CashBook["CashBook (/cashbook)"]
    CreateDeal["Create a Deal (Modal)"]
    Help["Help Modal"]
    Settings["Settings Dropdown (Superadmin)"]
    Logout["Logout (/login)"]

    Settings --> WB["Wizard Builder (/deal-wizard-list)"]
    Settings --> OS["Org Settings (/org-settings)"]
Element / Control Visual Display Exact Target / Action Required Access Role
Cashy Logo SVG Logo (Left) Navigates to Home Kanban board (/). All authenticated users
Deals Text Link Opens searchable Deals Table view (/deals). All authenticated users
Items Text Link Opens collateral Items catalog view (/items). All authenticated users
Customers Text Link Opens Customer KYC and search directory (/customers). All authenticated users
CashBook Text Link Opens store CashBook ledger and reconciliation (/cashbook). All authenticated users
Create a Deal Purple CTA Button (#6366f1) Opens the Deal Wizard in Creation Mode. All authenticated users
Help Icon help-circle.svg Displays help guide and support overlay. All authenticated users
Settings Icon settings.svg Opens the administrative settings menu. Restricted to Superadmin
Logout Icon log-out.svg Logs out of the current session and returns to the login page. All authenticated users

[!NOTE] Superadmin Settings Menu: The gear icon is visible only to users with the Superadmin role. Clicking it opens the administrative dropdown containing: - Wizard Builder (/deal-wizard-list): Create and manage dynamic deal category templates, questionnaires, and workflow stages. - Org Settings (/org-settings): Manage custom Deal Checkpoints, Business Areas, and branch badge colors.


2. Home Kanban Workspace (HomeView)

The Home view (/) provides a multi-column Kanban board representing the store's active transaction pipeline.

The FilterBar

Located directly beneath the global header, the FilterBar enables real-time search and multi-dimensional filtering across active contracts: - Instant Search: Search across booking numbers (B-10948), customer names, or collateral titles. - Company & Cascade Branch: Filter deals by operating entity and specific store branch. - Business Area & Deal Type: Segment pipeline stages by product category (General, Vehicles, Jewelry) or contract type (Pawn vs Purchase). - Date Filters & Task Toggle: Filter by creation timeframe (Last 7 days, Last 30 days) or use the Hide Tasks toggle to isolate customer deals from operational task cards.

Kanban Columns & Pipeline Stages

Pipeline stages reflect the operational checkpoints of your branch. Stages include: 1. INBOX: The landing column for all new incoming store and online submissions. 2. Appraisal & Valuation: Collateral undergoing market evaluation and condition inspection. 3. Customer Verification: Customer identity verification and regulatory KYC compliance. 4. Payout Ready: Approved contracts awaiting cash disbursement or bank transfer. 5. Active Vault Storage: Disbursed loans with collateral secured in physical branch storage bins. 6. Redemption / Extension: Deals settling through payback or renewing for additional terms.

Card Types: Deals vs. Operational Tasks

The board accommodates two distinct types of visual cards: - Deal Cards (Contracts): Display the country and branch badge (e.g. AT / Wien), booking number, customer name, collateral items summary, maturity due date, category badges, and total payout value (€ X.XX). - Task Cards (Store Reminders): Internal to-do items created directly inside columns via the + button. Cards feature automatic priority color coding (Red for due today, Blue for due tomorrow, White for future dates).

[!IMPORTANT] Double-Click Interaction: Double-clicking any deal card opens the Deal Wizard in Management Mode, pre-populated with contract details, category appraisal forms (Steps 2–6), customer notes, timeline events, and action buttons (Payback, Extend).


3. Deal Wizard Architecture: Creation Mode vs Edit Mode

The Deal Wizard is the primary transaction window in Cashy-Hub. It opens as an overlay centered on the screen and operates in two distinct modes: Creation Mode (for creating new deals) and Management Mode (for viewing, updating, extending, or redeeming existing deals).

graph TD
    Trigger{Trigger Source}
    Trigger -->|'Create a Deal' Button| ModeA["Creation Mode "]
    Trigger -->|Double-Click Deal Card| ModeB["Management Mode "]

    subgraph "Creation Mode"
        WHeader["Header: 'New Deal Creation' + live 'EST. PAYOUT: € X.XX'"]
        WStepper["Stepper: Only 'Basic Info' enabled; Steps 2-6 locked"]
        WAction["Top Action Bar: DEAL TYPE Toggle + 'Create PAWN Deal'"]
        WCanvas["Step 1 Canvas: Customer, Deal Metadata, Items, Additional Info"]
        WSidebar["Right: Deal Summary Panel (Live Calculations)"]
    end

    subgraph "Management Mode"
        EHeader["Summary Banner: Booking #, Flag (AT/DE), Branch, Customer, Loan Cost"]
        EStepper["Scroll-Spy Stepper (All 6 Steps Unlocked)"]
        EAction["Top Action Bar: Delete, Payback, Extend, Close"]
        ENav["Item Tabs Row (Item 1, Item 2...)"]
        ESidebar["Right: Tabs (COMMENTS + TIMELINE)"]
    end

    ModeA --> WHeader
    ModeB --> EHeader

Visual Comparison: Creation Mode vs Edit Mode

UI Component Creation Mode (New Deals) Management Mode (Active Deals)
Header Displays "New Deal Creation", description "Initialize basic deal information and customer records", and live "EST. PAYOUT: € X.XX". Displays Booking Number, Custom Deal Number, Country flag badge (AT or DE), Branch name, Customer name, Loan Duration pill, Deal Type (PAWN/PURCHASE), Business Unit, and Total Deal Cost.
Item Navigation Managed via tabs inside Section 3 (Items) of Step 1. Persistent subheader tab strip: Item 1, Item 2 allowing immediate switching between collateral pieces.
Stepper Bar 6 stages visible (Basic Info, Research, Price, Verification, Payout, Storage), but Steps 2–6 are locked/disabled. Full scroll-spy stepper. Clicking or scrolling smoothly navigates across all completed and upcoming stages.
Top Action Bar DEAL TYPE toggle (Pawn vs Purchase), Cancel button, and primary Create PAWN Deal / Create PURCHASE Deal button (located alongside the stepper). Delete (trash icon) button, Payback button (opens modal), Extend button (opens modal), and Close button (located alongside the stepper).
Form Canvas Form sections in Step 1: Customer, Deal Metadata, Items, Transport & Payout, and Additional Notes. Dynamic form grids rendered from category Wizard Builder schemas for each stage.
Right Side Panel Deal Summary: Live payout calculation, fee itemization, and totals. Tab switcher between COMMENTS (thread and note composer) and TIMELINE (audit trail).

4. Master Directory Views

Cashy-Hub provides dedicated full-table directory views for high-volume querying and reporting:

Deals Directory (/deals)

  • Top Filter Pills Row: Visual tags for applied filters (STATUS: ..., PICKUP: ..., CAT: ..., PAYOUT ≥ €..., FROM: ..., TO: ...) with a "Clear all" button.
  • Header Actions:
  • Columns Dropdown: Toggle visibility of optional columns. Note: dealId and customer are locked keys and cannot be hidden.
  • Export Button: Downloads a formatted CSV of all matching deals or selected rows.
  • Left Sidebar: Filter facets for Company, Branch/Shop, Status, Pickup Method, Category Paths, Suggested Payout Range, and Creation Date Range.
  • Interactive Rows: Clicking any deal row opens the Deal Wizard in Edit Mode.

Items Directory (/items)

  • Filter Facets: Search by Item ID, Deal ID, Category Paths, Business Area, Deal Status, Has Media toggle, and Has Attachments toggle.
  • Header Controls: Column customization (locked keys: itemId and title) and "Export to CSV" button.
  • Data Columns: Item ID, Title, Category Path, Business Area, Variant, Market Value, Payout, Deal ID, and Deal Status.

Customers Directory (/customers)

  • Central Customer Search: Live search bar querying the central customer database in real time.
  • Columns Customizer: Locked keys: customerId and name.
  • Actions: Bulk CSV export and row-level export for individual customer records.
  • Data Columns: Customer ID (customerNumber), Full Name (firstname lastname), Email, Phone, Sex, and Date of Birth.

5. Store Financial Console: CashBook (/cashbook)

The CashBook module provides store-level cash accounting and regulatory reconciliation: - Filter Controls: Date range selection (From Date & To Date calendar popovers), CashBook Type dropdown (Cash, Card, Bank, Unzer, PayPal), and Branch selector. - Tab 1: Ledger: Master journal table of cash flows showing cash flow number, booking text, inflows, outflows, fees, and current balance, with a + New Ledger Entry button. - Tab 2: Reconciliation: Dual denomination counter comparing physical till cash (KASSA) and safe reserves (RESERVE) against expected ledger totals across all 15 Euro coin and banknote denominations.