Midnight Debt Payoff & Income Injection TrackerLegacy format
The Midnight Debt Payoff & Income Injection Tracker is an ultra-performant, responsive dashboard optimized for debt recovery pipelines using the Snowball methodology. It integrates side-hustle/freelance income injections directly into active debt payoff schedules, running on a Next.js 16 App Router, Bun runtime, Drizzle ORM, and Neon PostgreSQL database stack. The system's design style is a premium dark theme utilizing deep slate and zinc backdrops, high-contrast typography, emerald green highlight metrics, and soft amber deadline warning accents.
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
The Midnight Debt Payoff & Income Injection Tracker is an ultra-performant, responsive dashboard optimized for debt recovery pipelines using the Snowball methodology. It integrates side-hustle/freelance income injections directly into active debt payoff schedules, running on a Next.js 16 App Router, Bun runtime, Drizzle ORM, and Neon PostgreSQL database stack. The system's design style is a premium dark theme utilizing deep slate and zinc backdrops, high-contrast typography, emerald green highlight metrics, and soft amber deadline warning accents.
Components
Cards
Card Title
Sample body text for the card component.
Elevation & Depth
Do's & Don'ts
Do
Don't
Design System Tokens
### Colors
• Background (#09090b): Deep base zinc-950 color for primary page canvas.
• Surface (#18181b): Card surfaces, panel containers, and dialog bodies (zinc-900).
• Surface Hover (#27272a): Interactive list items and card hover states (zinc-800).
• Border (#2e2e33): Muted dividers, input outlines, and component boundaries.
• Primary (Emerald) (#10b981): Progression indicators, positive extra payment badges, payoff metrics.
• Primary Hover (#059669): Filled CTA interactive hover states.
• Secondary (Amber) (#f59e0b): Imminent due dates, warnings, and deadline countdown indicators.
• Text Primary (#fafafa): Headings, body text, primary labels (zinc-50).
• Text Secondary (#a1a1aa): Muted descriptions, metadata, inactive labels (zinc-400).
• Danger (#ef4444): Delete actions, overdraft states, negative indicators.
### Typography
• Display Font: Inter / System Sans (sans-serif)
• Body Font: Inter / System Sans
• Code Font: JetBrains Mono / System Monospace
### Elevation & Shadows
• Flat: Standard dashboard widgets and forms sit flat with a 1px border (border-[#2e2e33]).
• Active Elev: Cards gain a subtle glow/shadow on hover (shadow-[0_8px_30px_rgb(0,0,0,0.3)]).
### Spacing & Grid
• Mobile: Single column, 16px padding, 16px gap.
• Desktop: Grid layouts with 24px padding, 24px gap, max-width 1440px.
---
System Architecture
```mermaid
graph TD
Client[Client Browser App Router Components] -->|Invokes Server Actions| Actions[Next.js Server Actions payments.ts]
Actions -->|Calculates Projections| Engine[Snowball Core Calculation Engine]
Actions -->|ACID Database Transactions| Drizzle[Drizzle ORM & Migrations]
Drizzle -->|Executes Relational SQL Queries| Neon[Neon PostgreSQL Serverless]
```
---
Database Relational Model
```mermaid
erDiagram
debts {
uuid id PK
text name
numeric total_principal
numeric remaining_balance
numeric min_monthly_payment
numeric interest_rate_monthly
integer due_date_day
}
budget_config {
uuid id PK
numeric monthly_snowball_budget
}
payment_logs {
uuid id PK
uuid debt_id FK
numeric amount_paid
timestamp payment_date
}
extra_income_logs {
uuid id PK
text source_name
numeric amount
boolean is_debt_injected
}
debts ||--o{ payment_logs : "receives"
```
---
Use with MCP
Don't have the MCP? Install it here