Changelog
Track all updates, improvements, and fixes to the PPDO system

20% Development Fund (20% DF) Integration
A complete end-to-end module for managing the 20% Development Fund, featuring full CRUD, auto-calculation, and stats.
- •Implemented backend architecture (twentyPercentDF, breakdowns, activity logs, shared access)
- •Added aggregation engine for automatic status and financial total calculations
- •Created dedicated 20% DF landing page cards and table interfaces
- •Integrated 20% DF into the shared breakdown framework and sidebar
- •Added full activity log support for all 20% DF operations
- •Aligned 20% DF with projects module conventions for a consistent experience
Screenshot & Bug Reporting Flow
Enhanced maintenance tools with integrated screenshot capture and rich text reports.
- •Integrated screenshot capture using dom-to-image-more with SSR-safe dynamic imports
- •New ConcernModal for bug reports and feature suggestions with automated capture flow
- •Enhanced RichTextEditor with ordered lists, video previews, and screenshot auto-sync
- •Added 'Steps to Replicate' field to bug report schema for better issue tracking
- •ScreenshotZoom component for seamless transitions between capture and modal views
UI/UX & Navigation Polish
Significant improvements to app responsiveness and navigation clarity.
- •Introduced global horizontal loading bar synchronized with app accent colors
- •Complete Breadcrumb system refactor using centralized utilities and skeleton loaders
- •Optimized Sidebar with auto-scroll, mobile back buttons, and lazy-loaded badges
- •Support for recursive nested accordions in navigation sidebar
- •Custom 404 page with interactive Tarlac-themed 3D illustrations
- •CMS Coming Soon page and updated dashboard layout with view mode tabs
Architecture & Maintenance
Internal improvements for stability and code reusability.
- •Modularized projects module into reusable Header, Body, Toolbar, and Footer components
- •Implemented automated error recovery and cache clearing (lib/cache-utils.ts)
- •Reverted slug-based design for a more stable ID-first routing architecture
- •Global-error and segment-level error pages for deep repair & restart
- •Resolved Next.js route conflicts caused by overlapping directory structures
Build & Type Safety
Resolved critical build errors and type mismatches.
- •Fixed TypeScript type mismatches in fund breakdown financial metrics
- •Resolved Convex ID typing issues and schema mismatches in forms
- •Synced ActivityLogType unions to prevent invalid activity log usage
- •Fixed missing trackedFields mappings and loading state checks for 20% DF
- •Corrected Zod validation to support Convex IDs safely across all modules

Dashboard & Navigation Overhaul
Redesigned the main dashboard landing with a folder-style interface and streamlined fund selection.
- •New folder-style fiscal year cards for intuitive navigation
- •Implemented a fluid fund selection flow (Budget, Trust Funds, SEF, SHF)
- •Integrated real-time charts and graphs with live project data
- •Added animated category filters with dynamic project counts
- •Improved landing page typography and responsive grid layout (up to 5 items per row)
- •Sidebar now persists last-clicked active state for better UX
- •Added 'NEW' badges to navigation items for discoverability
Shared Breakdown Framework
Unified the project and trust fund breakdown systems into a single, robust framework.
- •Implemented a shared base schema for all breakdown types (Backend & Frontend)
- •Added support for Special Education Funds (SEF) and Special Health Funds (SHF)
- •Centralized financial validation, calculation, and soft-delete helpers
- •Modularized all breakdown forms (Project, Budget, Trust Funds) into focused subcomponents
- •Added entity-based activity logging for granular tracking across all fund types
- •Added utilization percentage column to all breakdown tables
- •Standardized breadcrumb navigation with clean name extraction
Advanced Print Preview & Canvas Architecture
A professional document editing and printing system built into the app.
- •Interactive table resizing with live preview and auto-fit capabilities
- •Support for default and custom table borders in PDF exports
- •Unified orientation and template selection into a single setup wizard
- •Inline document title editing and column renaming in preview mode
- •Dynamic document ruler with margins, indents, and tab stops
- •Viewer vs. Editor mode toggle for a focused preview experience
- •Support for pasting images directly from the clipboard into the canvas
- •Right-click context menus for page management (duplicate/delete)
- •Enhanced canvas layout with fixed toolbars and upload panels
- •Triple-fallback thumbnail generation for real-time document previews
UI Component Standardization
Massive refactor to unify table and toolbar components across the entire platform.
- •Consolidated all table toolbars into a single, pluggable TableToolbar component
- •Introduced useTableSearch, useTableSelection, and useTableColumnVisibility hooks
- •Standardized print preview patterns across all data tables using an adapter pattern
- •Migrated FiscalYearModal and ColumnVisibilityMenu to shared component library
- •Modularized the canvas editor into specialized hooks and subcomponents
- •Full implementation of shadcn tooltips for improved accessibility
Core Data & Inspections
Enhanced data visualization and status tracking capabilities.
- •New inspection table gallery with thumbnail image previews and click-to-open lightbox
- •Added 'On Process' status support across schemas and UI
- •Optimized Convex queries using bulk fetch to reduce payload size by ~60%
- •Improved year requirement validation for trust fund tables
- •Removed OpenAI dependency and unused chat components
Hotfix for Project Breakdown Edit Utilized
Critical correction for budget utilization editing in project breakdowns.
- •Fixed an issue where utilized budget edits in project breakdowns were not being properly recorded or displayed.
Stability & UX Fixes
Resolved critical navigation and rendering issues.
- •Fixed 404 navigation errors on project row clicks by correcting URL encoding
- •Prevented dropdown action clicks from triggering unintended row navigation
- •Fixed activity logging for SEF and SHF projects
- •Ensured table borders and resize handles respect column visibility
- •Resolved SSR errors in canvas rendering using dynamic imports
- •Fixed React list key warnings in the page panel

Trust Funds Status Management
Enhanced status tracking with inline editing and improved statistics
- •Added hover-to-edit status dropdown with plain text styling and loading states
- •Implemented collapsible status breakdown in statistics card
- •Hidden status:active in statistics card and forms (set to not_available)
- •Added inline Select dropdown on hover for quick status updates
- •Fixed status persistence issue in create/edit forms
- •Enhanced UX with disabled states during updates
Trust Funds Module Reorganization
Complete restructure for better maintainability and scalability
- •Centralized TrustFund types, constants, and utilities at parent level
- •Refactored TrustFundsTable into 5 focused subcomponents
- •Introduced dedicated table hooks (sorting, filtering, selection, resizing)
- •Preserved existing data hooks without modification
- •Improved clarity, scalability, and maintainability of trust-funds module
Budget Statistics Enhancement
Added comprehensive budget tracking with subtotals
- •Enhanced budget statistics with subtotals display
- •Added obligated budget tracking across all budget items
- •Improved financial metrics calculation and presentation
Compact Table Design
Professional table layout with complete border grid
- •Replaced CSS Grid with HTML table for reliable border rendering
- •Reduced default row height to 32px for higher data density
- •Added consistent borders to all cells (always visible, no hover required)
- •Applied light gray backgrounds to header/totals rows
- •Used smaller fonts and tighter spacing for professional appearance
- •Maintained full resizing and interaction functionality
ImplementingOfficeSelector Modularization
Split large selector component into focused modules
- •Extracted types, constants, and utility functions
- •Created useOfficeSelector hook for business logic
- •Split into 6 focused sub-components (ModeSelector, OfficeItemList, CreateNewSection, CreateOfficeDialog, SelectedOfficeInfo)
- •Reduced main component from 400+ to 150 lines
- •Preserved all features and styling
Trust Funds Advanced Table Features
Added status tracking and professional table capabilities
- •Added status field with supported values: not_available (default), not_yet_started, ongoing, completed, active (legacy)
- •Updated create and update mutations to accept optional status
- •Enhanced activity logger to record status changes in changeSummary
- •Added color-coded Status column between Office In-Charge and Date Received
- •Display status summary counts in table toolbar
- •Implemented column visibility controls with show/hide all and session persistence
- •Added expandable Project Title and Remarks columns with visual indicators
- •Introduced right-click context menu for pin, view activity, edit, and trash actions
- •Added print modal with portrait/landscape orientation preview and correct @page CSS
- •Printing respects visible columns only
BreakdownHistoryTable Modularization
Complete refactor for better code organization
- •Extracted 5 utility files (types, constants, formatters, helpers, navigation)
- •Created 3 custom hooks (useTableSettings, useTableResize, useColumnDragDrop)
- •Split into 6 focused components (Toolbar, Header, Row, Totals, EmptyState)
- •Reduced main component from 500+ to 150 lines
- •Maintained full backward compatibility and all features
Auto-Calculate Budget Utilization
Toggle between automatic aggregation and manual entry modes
- •Added context menu toggle with switch component for single item toggle
- •Added bulk toggle dialog with mode selection and optional reason field
- •Added auto-calculate switch field in Budget Item and Project forms
- •Implemented loading states and comprehensive toast notifications
- •Disabled manual input fields when auto-calculate is enabled
- •Added visual feedback with Auto/Manual badges in forms
- •Default new items to auto-calculate mode (true)
- •Preserved backward compatibility with existing data
Auto-Calculate Schema Changes
Added auto-calculate flags to budgetItems and projects schemas
- •Added autoCalculateBudgetUtilized flag to budgetItems schema (optional boolean, default true)
- •Added autoCalculateBudgetUtilized flag to projects schema (optional boolean, default true)
- •Added indexes for autoCalculate field on both tables
- •Updated aggregation logic to respect auto-calculate flag
- •Created toggleAutoCalculate and bulkToggleAutoCalculate mutations
- •No migration needed - existing records default to auto-calculate (true)
Google Sheets-like Spreadsheet
Advanced spreadsheet component with professional features
- •Added dynamic spreadsheet component with column configuration
- •Implemented text alignment (left/center/right) with Tailwind classes
- •Added text transform (uppercase, lowercase, camelCase) for text columns only
- •Prevented browser shortcuts (Ctrl+R, Ctrl+P, etc.) like Google Sheets
- •Added keyboard shortcuts for alignment (Ctrl+Shift+L/E/R)
- •Included shadcn tooltips showing keyboard shortcuts
- •Implemented column resizing with drag and auto-fit
- •Added CSV export with totals calculation
- •Stored preferences in session storage
- •Supported viewer/editor modes with permission control
Year Field Auto-Fill Enhancement
Intelligent year population from URL path
- •Replaced useSearchParams with usePathname to extract year from URL path
- •Added intelligent year extraction from /dashboard/project/[year] pattern
- •Automatically populated year field when creating new budget items
- •Disabled year field when auto-filled from URL to prevent modification
- •Added visual indicator '(Auto-filled from URL)' in blue when year is auto-set
- •Added helper text explaining why year field is disabled
- •Maintained editable year field when editing existing budget items
- •Validated extracted year is within valid range (2000-2100)
Year Grouping Headers
Visual year separators in 'All Years' view
- •Added year-based grouping in useHierarchyData hook when 'All Years' selected
- •Display fiscal year headers with light blue gradient background
- •Show duplicate particulars separately under respective years
- •Extracted renderTreeItems helper for code reusability
- •Maintained all existing functionality, styles, and permissions
Display Text Cleanup
Removed redundant 'fiscal' terminology
- •Removed the word 'fiscal' from displays, pages, and forms
- •Simplified user-facing text for better clarity
- •Updated all references to use 'year' instead of 'fiscal year' where appropriate
Development Constants
Centralized configuration for easier maintenance
- •Added constants for easy dev management in particular page frontend codes
- •Centralized configuration values for consistent behavior
- •Improved maintainability with single source of truth
BudgetItems Query Arguments
Fixed TypeScript compilation errors across components
- •Fixed BudgetParticularsList: pass empty args {} to budgetItems.list query
- •Fixed ConsolidatedParticularsList: pass empty args {} to budgetItems.list query
- •Fixed particulars/page.tsx: pass empty args {} to budgetItems.list query
- •Fixed project/page.tsx: pass empty args {} to budgetItems.list query
- •Fixed useBudgetData hook: pass empty args {} to budgetItems.list query
- •Fixed budgetSpreadsheetConfig: add required viewMode property to features
- •Resolved TypeScript error: 'Expected 2 arguments, but got 1' across all components
- •Maintained backward compatibility with optional year parameter
ProjectSpreadsheetConfig Fix
Resolved configuration issues
- •Fixed projectSpreadsheetConfig.ts configuration errors
- •Ensured proper TypeScript type safety

Particulars Management Redesign
Overhauled the entire Particulars UI with a unified, IDE-style hierarchical tree view
- •Single unified tree view: Budget → Projects → Breakdowns with clear visual hierarchy
- •Inline editing capabilities with hover-triggered edit icons and confirmation dialogs
- •Year-based filtering with horizontal scrolling year selector
- •URL state management for shareable views (year, search, sort, expanded nodes)
- •Real-time search across all hierarchy levels with debouncing
- •Context menus for quick edit/delete actions with permission awareness
- •Stair-step animations when changing years with cascading fade effects
- •Responsive 12-column grid layout for consistent alignment
Trust Funds Module
Complete trust funds management system with fiscal year organization
- •Fiscal year-based routing structure (/trust-funds/[year])
- •Year landing page with expandable year cards and statistics
- •Trust fund CRUD operations with activity logging
- •Auto-calculated balance and utilization rate tracking
- •Soft delete with restore and permanent delete capabilities
- •Search toolbar with export (CSV) and print functionality
- •Optional date received field with proper type handling
- •Role-based access control for all operations
Fiscal Year Management
Introduced fiscal year management system across the platform
- •Fiscal year landing pages with statistics and accordion details
- •Current year badge display with responsive grid layout
- •Delete fiscal year functionality with confirmation dialogs
- •Year-specific statistics calculation and display
Table System Enhancements
Major improvements to table functionality and user experience
- •Column visibility controls with hide/show all options
- •Export to CSV with column filtering capabilities
- •Print to PDF with customizable column selection
- •Inline search moved from expandable section to toolbar
- •Bulk selection and trash operations for administrators
- •Real-time search across multiple fields with visual feedback
Codebase Modularization
Extensive refactoring to improve maintainability and reduce duplication
- •Created shared foundation library (lib/shared/) for utilities, types, and constants
- •Extracted reusable hooks (useFormattedNumber, useTableState, useAutoSave, useURLParams)
- •Added service layer for mutations, filtering, and exports
- •Split monolithic table components into modular, single-responsibility components
- •Reduced code duplication by ~60% across budget and project modules
- •Improved TypeScript type safety with explicit type annotations
- •Eliminated ~1,000+ lines of duplicated logic across modules
Routing & Navigation
Migrated to dynamic year-based routing for cleaner URLs
- •Changed from /dashboard/project/budget?year=2026 to /dashboard/project/[year]
- •Implemented dynamic routing for budget, projects, and trust funds
- •Updated breadcrumbs for consistent navigation hierarchy
- •Preserved all existing functionality with no breaking changes
Access Control System
Implemented particular-level access control with request-based sharing
- •Request-based access sharing for budget particulars
- •Admin approval workflow for access requests
- •Fine-grained permission management at particular level
- •Extended access request system to support particular-level requests
- •Created budgetParticularSharedAccess schema with comprehensive indexing
Modular Spreadsheet System
Created reusable spreadsheet component architecture
- •Reusable Spreadsheet component for all table views
- •Custom hooks for data fetching, state management, and keyboard navigation
- •Modular components (Container, Header, MenuBar, FormulaBar, Grid, Cell, SheetTabs)
- •Dynamic column definitions and feature flags
- •CSV export and print functionality
- •Full TypeScript support with clear separation of concerns
TypeScript & Type Safety Fixes
Resolved compilation errors and improved type safety throughout the application
- •Fixed ProjectSortField and SortDirection to allow null values
- •Replaced withMutationHandling with direct mutation calls and proper error handling
- •Fixed ContextMenuState usage across components
- •Removed duplicate type declarations
- •Added type assertions for refs and mutation responses
- •Removed unused imports across the codebase
UI/UX Enhancements
Various improvements to user interface and experience
- •Separated budget and particular access requests with improved UI
- •Enhanced AccessDeniedPage with responsive design and clear labels
- •Added icons for better visual hierarchy
- •Improved placeholder text with helpful examples
- •Better dark mode support across updated components
- •Consistent color schemes and styling throughout the application

Form Auto-Fill
- •Year field now auto-fills based on the year in the dashboard URL
- •Auto-filled fields remain editable with clear '(Auto-filled)' label
- •Existing records preserve their original year values when edited
Dashboard Updates
- •Adding new items from year-specific dashboard automatically populates that year
- •Editing existing items preserves current year values
Quality Assurance
- •Verified year auto-fill behavior across all forms
- •Confirmed existing entries maintain their year values
- •Updated task documentation with clear test steps
UI Redesign
- •Cleaner card layouts with unified button styles
- •Better visual hierarchy and consistent color schemes
- •Improved spacing and mobile responsiveness
Dashboard Updates
- •Polished Budget Statistics metric cards
- •Activity Log with timeline layout and search/filters
- •Revamped Budget Table toolbar with dropdown filters
- •Skeleton loaders for better loading states
New Features
- •'New Item Here' quick-add button for faster data entry
- •Budget Years landing page with year tiles
- •Click year tiles to auto-filter budget view (client-side)
Project Creation
- •Fixed 'Failed to create project' message appearing on successful saves
- •Corrected breadcrumb display on particulars page
- •Fixed toaster messages for project add/edit operations
Character Support
- •Allowed accented characters (ô, ñ, etc.) in project particulars
- •Prevented validation errors when using special characters
Error Handling
- •Improved error handling throughout the system
- •Better user feedback for all operations
Budget Years Landing
- •Simple Budget Years landing page showing year tiles
- •Only displays years with actual budget data
- •Clicking year opens budget page with auto-filter
Bug Fixes
- •Fixed 'Failed to create project' message on successful operations
- •Improved error handling throughout the application
- •Better user feedback for all system operations
Budget & Project Codes
- •Budget and project codes now accept spaces (e.g., '20 DF', 'HEALTH SERVICES')
- •More flexible code format validation
Currency Input
- •All peso amounts displayed with comma separators (₱1,000,000)
- •Added slider controls for tracking accomplishment percentages
- •Improved number input formatting throughout forms