NEW

20% Development Fund (20% DF) Module, Reporting System, and UX Improvements

Details

Changelog

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

v1.9.0Latest
20% Development Fund (20% DF) Module, Reporting System, and UX Improvements
Introduction of the 20% Development Fund module, a new screenshot-integrated reporting system, and significant UX enhancements including a global loader and breadcrumb refactor.
January 29, 2026
Melvin Nogoy's avatar
Melvin Nogoy
New Feature

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
New Feature

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
Improvement

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
Refactor

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
Bug Fix

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
v1.8.0
HotFix: Project Breakdown Edit Utilized, Dashboard Redesign, Shared Breakdown Framework
Huge update introducing a new dashboard landing experience, a unified breakdown framework for all fund types, and a professional-grade print preview system with interactive editing.
January 27, 2026
Melvin Nogoy's avatar
Melvin Nogoy
New Feature

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
New Feature

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
New Feature

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
Refactor

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
Improvement

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
Bug Fix

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.
Bug Fix

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
v1.7.0
Trust Funds Enhancement & Table Modernization
Major improvements to trust funds module with hover-to-edit status, compact table design, modular component architecture, and auto-calculate budget utilization toggles.
January 22, 2026
Melvin Nogoy's avatar
Melvin Nogoy
New Feature

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
Refactor

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
New Feature

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
Improvement

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
Refactor

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
New Feature

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
Refactor

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
New Feature

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
Breaking Change

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)
New Feature

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
Improvement

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)
New Feature

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
Improvement

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
New Feature

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
Bug Fix

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
Bug Fix

ProjectSpreadsheetConfig Fix

Resolved configuration issues

  • Fixed projectSpreadsheetConfig.ts configuration errors
  • Ensured proper TypeScript type safety
v1.6.0
Major Particulars Management Overhaul & Trust Funds Module
Complete redesign of the Particulars Management interface with hierarchical view, advanced search capabilities, and introduction of Trust Funds module with fiscal year organization.
January 19, 2026
Melvin Nogoy's avatar
Melvin Nogoy
New Feature

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
New Feature

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
New Feature

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
Improvement

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
Refactor

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
Improvement

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
New Feature

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
New Feature

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
Bug Fix

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
Improvement

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
v1.5
Form Auto-Fill & Year Management
Improved form behavior with automatic year population from URL parameters.
January 14, 2026
Alec Quiambao's avatar
Alec Quiambao
Improvement

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
Improvement

Dashboard Updates

  • Adding new items from year-specific dashboard automatically populates that year
  • Editing existing items preserves current year values
Improvement

Quality Assurance

  • Verified year auto-fill behavior across all forms
  • Confirmed existing entries maintain their year values
  • Updated task documentation with clear test steps
v1.4
UI Redesign & Budget Years Landing
Major UI overhaul with cleaner layouts and improved user experience.
January 8, 2026
DT
Development Team
Improvement

UI Redesign

  • Cleaner card layouts with unified button styles
  • Better visual hierarchy and consistent color schemes
  • Improved spacing and mobile responsiveness
Improvement

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 Feature

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)
v1.3
Bug Fixes & Character Support
Critical bug fixes and improved character support for international names.
January 8, 2026
DT
Development Team
Bug Fix

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
Improvement

Character Support

  • Allowed accented characters (ô, ñ, etc.) in project particulars
  • Prevented validation errors when using special characters
Improvement

Error Handling

  • Improved error handling throughout the system
  • Better user feedback for all operations
New Feature

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
v1.2
Error Handling Improvements
Enhanced error handling and user feedback across the system.
January 7, 2026
DT
Development Team
Bug Fix

Bug Fixes

  • Fixed 'Failed to create project' message on successful operations
  • Improved error handling throughout the application
  • Better user feedback for all system operations
v1.1
Code Format & Currency Display
Improved budget and project code handling with better currency formatting.
January 6, 2026
DT
Development Team
Improvement

Budget & Project Codes

  • Budget and project codes now accept spaces (e.g., '20 DF', 'HEALTH SERVICES')
  • More flexible code format validation
Improvement

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