Claude/add dark mode colors y82ik #94
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
…e scripts - Added a new column `payment_status` to the `expenses` table with default value 'pendiente' and a check constraint. - Updated existing expenses to set the default payment status. - Created an index on `payment_status` for improved query performance. - Developed initialization scripts for setting up the database schema, including tables for categories, expenses, budgets, and incomes. - Included example categories and verification queries in the setup script. - Extended TypeScript definitions for NextAuth to include user ID in session and JWT.
Funcionalidades principales implementadas:
## Gastos
- ✅ CRUD completo de gastos (crear, editar, eliminar)
- ✅ Estados de pago (pendiente, pagado, vencido)
- ✅ Detección automática de gastos vencidos por fecha
- ✅ Gastos recurrentes (semanal, mensual, anual)
- ✅ Métodos de pago (efectivo, tarjeta débito/crédito, transferencia)
- ✅ Notas adicionales por gasto
- ✅ Filtros por tipo (todos, recurrentes, únicos)
## Gastos Recurrentes Avanzados
- ✅ Generación virtual de próximas instancias (sin crear en BD)
- ✅ Mensajes inteligentes de vencimiento ("Vence en X días/semanas")
- ✅ Pago anticipado de instancias futuras
- ✅ Filtrado automático de instancias ya pagadas
- ✅ Vista dedicada en pestaña "Recurrentes"
## Categorías
- ✅ CRUD completo de categorías
- ✅ Personalización con colores e iconos
- ✅ Cálculo de total gastado por categoría
- ✅ Visualización en cards con totales
## UI/UX
- ✅ Interfaz moderna con shadcn/ui
- ✅ Badges con colores semánticos para estados
- ✅ Tablas responsivas con acciones contextuales
- ✅ Diálogos modales para crear/editar
- ✅ Formato de moneda mexicana (MXN)
## Técnico
- ✅ Next.js 15 con App Router
- ✅ Supabase para base de datos
- ✅ TypeScript con tipado completo
- ✅ Server Actions para mutaciones
- ✅ Validaciones en cliente y servidor
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
- Implemented payment methods functionality including adding, editing, and deleting payment methods. - Updated AddExpenseDialog and EditExpenseDialog to include payment method selection. - Enhanced ExpensesTable to display payment method details and statistics. - Created new pages and components for managing payment methods. - Added database schema and queries for payment methods.
… comparison, upcoming expenses, and top categories
- Added MetodosPagoPage for managing user payment methods. - Created PaymentMethodCard component for displaying individual payment methods. - Introduced MonthlyComparisonCard for visualizing monthly expense comparisons. - Developed UpcomingExpensesWidget to show upcoming expenses. - Added TopCategoriesChart to display top spending categories. - Implemented user dropdown menu for account management. - Enhanced dashboard layout with new components and improved user experience. - Updated middleware to protect dashboard routes and handle user redirection. - Modified home page to provide a clear introduction to the application.
…omes, and payment methods management
- Created `diagnose-complete.sql` for full database diagnostics including tables, users, identities, RLS policies, and record counts. - Developed `diagnose-user.sql` to inspect user and identity relationships, including schema verification. - Introduced `fix-user-identity.sql` to resolve issues with users lacking identities, ensuring proper identity creation. - Established initial schema migration in `00-initial-schema.sql`, creating essential tables (categories, expenses, budgets, incomes, statistics) with RLS policies. - Implemented `quick-check.sql` for a rapid overview of tables and user identity status. - Compiled `setup-all-in-one-v2.sql` for a complete database setup, including all necessary tables and configurations. - Created `setup-all-in-one.sql` for a streamlined database setup process. - Developed `setup-complete.sql` to execute all migrations in order for a fresh database setup. - Added `test-categories-access.sql` to verify access to the categories table and test RLS policies.
…scripts, add user deletion and diagnostic scripts, and implement test queries for dashboard functionality.
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
…ara que parseen la fecha como local sin conversión de zona horaria:
…for state management
…thod additions - Added toast notifications for error handling in EditIncomeDialog and AddPaymentMethodDialog. - Implemented ConfirmDialog component for delete confirmations in IncomesList. - Refactored delete functionality to use ConfirmDialog for better user experience. - Centralized color constants into a new colors.ts file. - Introduced enums for payment statuses and recurrence frequencies. - Created utility functions for formatting currency and dates. - Established validation schemas for expenses, incomes, categories, and payment methods using Zod. - Updated dependencies to include @radix-ui/react-alert-dialog and upgraded zod to version 3.25.76.
- Implemented CategoryHeader component for displaying category details and breadcrumb navigation. - Created CategoryStatsCards component to show various statistics related to the category. - Developed CategoryTrendChart component to visualize monthly expense trends for the category. - Integrated components into the new CategoryDetailsPage, fetching necessary data from the database. - Added EditCategoryDialog for editing category details. - Updated AddExpenseDialog to support default category selection and locking category for expense addition. - Enhanced database functions to retrieve category details, expenses, statistics, and monthly trends.
…ntation Update color palette and create design system documentation: Color System: - Replace emerald green with vibrant lime green (#9FFF66) as primary color - Introduce dark pine green (#071C11) for dark mode backgrounds - Add beige/cream (#F9F8E3) for soft surfaces in light mode - Maintain WCAG AA accessibility standards (13.8:1+ contrast ratios) Light Mode: - Soft beige-white backgrounds for reduced eye strain - Dark pine green text for optimal readability - Vibrant green accents for CTAs and positive states Dark Mode: - Dark pine green backgrounds for depth and modernity - Beige/cream text for comfortable reading - Vibrant green accents maintain consistency across themes Documentation: - Complete design system guide in docs/design-system.md - Color palette with hex, RGB, and HSL values - WCAG AA contrast ratio verification table - Usage guidelines for all color combinations - Component examples (buttons, cards, badges, inputs) - Finance-specific use cases (balance, expenses, income) - Best practices and anti-patterns This update aligns Homelas branding with modern, nature-inspired aesthetics while ensuring accessibility and maintaining visual hierarchy for financial data.
Add detailed documentation for enhancing user experience across the application: Badges & Chips: - Solid badge variants for financial states (paid, pending, overdue) - Interactive chip component for filters - Badge with count for visual counters - Fix transparency issues in dark mode Buttons & States: - Improved hover/active states with scale and shadow - Loading button component with spinner - Better disabled state (opacity-40 + saturate-50) - Button group for segmented controls - FAB (Floating Action Button) for mobile Navigation & Contrast: - Fix hardcoded 'text-black' in NavItem (dark mode incompatible) - Enhanced active state indicators with proper theming - Improved mobile bottom navigation with visual feedback - Desktop sidebar improvements with gradients and animations Typography: - Recommend Inter + JetBrains Mono font pairing - MoneyDisplay component with tabular numbers - Responsive font scaling - Optimized font sizes for financial data Implementation Guide: - Quick wins section (30-minute high-impact changes) - Phased implementation plan - Code examples for all components - Before/after comparison table This documentation complements the design system and provides actionable improvements for better UX and accessibility.
Implement all recommended UI/UX enhancements from documentation: Critical Fixes: - Fix hardcoded 'text-black' in NavItem (dark mode incompatible) - Replace with proper theme-aware colors (bg-primary text-primary-foreground) - Add active indicator (vertical bar) to desktop navigation Badge Component Enhancements: - Add solid badge variants for financial states (paid, pending, overdue) - Improve contrast with solid backgrounds instead of transparency - Add 'overdue' variant with pulse animation - Add soft variants for secondary information - Better dark mode support with proper opacity levels Button Component Improvements: - Enhanced hover states with scale-[1.02] and shadow-md - Improved disabled state (opacity-40 + saturate-50) - Better active feedback with shadow-inner - Added 'icon-sm' size variant - Improved outline variant with border-2 and hover effects - Added gap-2 for better icon spacing Mobile Navigation Enhancements: - Add gradient top bar indicator - Add pulsing dot indicator for active item - Add circular background highlight (bg-primary/15) for active icons - Improved backdrop blur and shadow - Better visual hierarchy with scale effects Typography System: - Add Inter font for UI (excellent readability) - Add JetBrains Mono for numbers and financial data - Configure font-feature-settings for better number legibility - Add responsive font scaling (15px mobile, 16px base, 17px desktop, 18px XL) - Add specialized 'money-sm/md/lg' font sizes with optimized weights - Configure tabular numbers support in tailwind New UI Components: - ButtonLoading: Button with loading spinner and disabled state - MoneyDisplay: Optimized component for financial amounts with: * Automatic formatting with Intl.NumberFormat * Color coding (green/red) based on positive/negative * Monospace font with tabular numbers * Configurable sizes (sm/md/lg) * Support for MXN, USD, EUR currencies - Chip: Interactive filter chips with: * Selected/unselected states * Icon support * Custom color support * Scale animations on hover/active - ButtonGroup: Segmented control for filters/tabs with: * Active state highlighting * Smooth transitions * Icon support for options All components follow the OLEA design system palette and maintain WCAG AA accessibility standards. Full backward compatibility maintained.
Create detailed plan for transforming generic cards into distinctive financial UI components: Analysis: - Current state: Generic shadcn/ui cards - Problem: Lack financial personality and brand identity - Opportunity: Leverage OLEA design system for unique look Inspiration from Modern Fintech: - N26: Subtle gradients, generous border radius, micro-animations - Nubank: Bold typography for amounts, left accent borders - Revolut: Glassmorphism, 3D icons, dark mode optimization - Monzo: Clear visual states, integrated badges, skeleton loaders Proposed Improvements: 1. Accent borders (top/left) with vibrant green gradient 2. Glassmorphism for depth without losing legibility 3. Icon containers with brand gradient backgrounds 4. Color-coded separators reinforcing brand 5. Integrated badges for status visibility 6. Money amounts with mono typography 7. Advanced hover states (scale, shadow, translate) 8. Branded skeleton loaders with shimmer New Card Variants: - CardFinance: Enhanced base with accent positions and variants - CardStat: Specialized for KPIs with trend indicators - CardCategory: Visual preview with hover effects - CardExpense: Compact layout for expense lists Micro-interactions: - Ripple effect on click - Subtle 3D tilt on hover (desktop only) - Custom shimmer with primary color - Smooth enter/exit animations Implementation Plan: - Phase 1: Base components (Day 1-2) - Phase 2: Specialized cards (Day 3-4) - Phase 3: Micro-interactions (Day 5) - Phase 4: Polish & testing (Day 6-7) Expected Results: - Transform generic cards into distinctive Homelas components - Integrate OLEA green throughout visual hierarchy - Improve interactivity with meaningful feedback - Maintain excellent legibility with mono fonts for amounts - Create unmistakably financial app aesthetic
Implement distinctive card components with modern financial UX: Card Base Improvements: - Increase border radius to rounded-xl for softer appearance - Enhance hover states: scale-[1.01] + shadow-xl - Smoother transitions (shadow-sm to shadow-xl) - More generous padding and spacing New Card Components: 1. CardFinance (Enhanced Base): - 4 variants: default, glass, gradient, elevated - 3 accent positions: top (gradient bar), left (border), none - Interactive mode with hover glow effect - Custom accent colors support - Group hover states for child elements 2. CardStat (KPI Cards): - Specialized for financial metrics - Trend indicators (up/down/neutral) with colors - Left accent border color-coded by trend - Icon with colored background (success/destructive/primary) - Automatic percentage change display with arrows - Monospace font for values (tabular numbers) - Optional description field 3. CardSkeleton (Loading States): - Shimmer animation with primary color - 3 variants: default, stat, category - Branded loading experience - Smooth pulse animations - Maintains layout during load Enhanced CategoryCard: - Replace generic Card with CardFinance - Add gradient glow effect on icon hover - Implement decorative separator with category color - Use MoneyDisplay component for amounts - Enhanced icon presentation with blur effect - Improved hover interactions (scale + translate) - Better visual hierarchy - Remove deprecated formatCurrency function Visual Improvements: - Icons with gradient backgrounds and blur effects - Color-coded separators reinforcing brand - Hover states with 3D depth (scale, shadow, translate) - Smooth micro-interactions throughout - Consistent use of OLEA green accents All components maintain WCAG AA accessibility and integrate seamlessly with the existing OLEA design system.
Remove CardProps import that doesn't exist in card.tsx This was causing TypeScript build error: Module './card' has no exported member 'CardProps' The CardFinanceProps already extends React.HTMLAttributes directly, so no need to import CardProps.
Replaced all-green dark mode with a sophisticated neutral palette: - Background: Charcoal gray with subtle green tint (#15191A) - Cards: Dark slate gray for better hierarchy (#1E2325) - Borders: Subtle neutral separators - Text: Warm white for better readability Benefits: - Verde vibrante (#9FFF66) now reserved as accent color - Better visual balance and hierarchy - Reduced color fatigue in dark mode - Maintains OLEA brand identity through strategic green accents - Improved text contrast and readability
Corrected brand references in design system comments: - Changed "OLEA brand palette" to "Homelas brand color palette" - Updated dark mode description to "strategic green accents" - Maintained color palette (no visual changes)
Contributor
|
@claude is attempting to deploy a commit to the Vercel Team on Vercel. A member of the Team first needs to authorize it. |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No description provided.