Budget Widget
A futuristic budget display widget with progressive blur effect and spotlight interaction, designed for ChatGPT MCP integration with Saturation API.
Examples
Different types of budget data from the Saturation API - total budgets, phase totals, and account totals.
Pre Production
Account total for pre production (1100-LABOR)
Usage
app/dashboard.tsx
1600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">import { BudgetWidget } 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">from 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-orange-600 dark:text-orange-400">"@/components/blocks/budget-widget"2 3600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">export 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">default 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">function Dashboard() {4 600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">return (5 600 dark:text-blue-400">className=600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-orange-600 dark:text-orange-400">"p-8">6 600 dark:text-blue-400">class="text-cyan-600 dark:text-cyan-400"> 7 600 dark:text-blue-400">budgetLabel=600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-orange-600 dark:text-orange-400">"Total Budget"8 600 dark:text-blue-400">budgetName=600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-orange-600 dark:text-orange-400">"Spring Campaign 2024"9 600 dark:text-blue-400">budgetUrl=600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-orange-600 dark:text-orange-400">"https:600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-green-600 dark:text-green-400600 dark:text-blue-400">class="text-purple-600 dark:text-purple-400">class="text-orange-600 dark:text-orange-400">">//app.saturation.io/budgets/my-budget" 10 />11 12 )13}