kulakpos_web/walkthroughs/2026-05-07_366a883b_Walkthrough__Simplified_Attendance_History.md

Walkthrough - Simplified Attendance History

I have updated the Attendance History page to be more compact and suitable for web browsers, as requested.

Changes Made

1. Header Refinement

• Reduced the main title font size from 32 to 24.
• Reduced the subtext font size from 16 to 13.
• Tightened the vertical spacing between the title and subtext.

2. Compact Summary Cards

• Changed the card layout from a large vertical stack to a sleek horizontal Row.
• Replaced the large background icon with a smaller, cleaner circular icon.
• Reduced the value font size from 32 to 22.
• Reduced the title font size from 13 to 11.
• Updated the borderRadius and padding for a tighter look.

3. Grid and Layout Optimization

• Reduced major section spacing from 32 to 24.
• Adjusted the childAspectRatio in the summary grid to accommodate the shorter card heights on desktop and mobile.
• Reduced the page padding on desktop for better space utilization.

4. Filter Section

• Reduced the padding and refined the shadow of the filter container to match the new compact aesthetic.

5. Break and Attendance Hours

• Added BREAK (fixed at 60 min) and ATT HRS (Work Hours - 60 min) to the desktop table.
• Integrated these new metrics into the mobile card view and the details dialog.
• Implemented robust parsing logic to subtract 1 hour from the workHours timestamp string.

6. Late Minute Field

• Added LATE MIN column to the desktop table.
• Formula: WORK HRS - 9 hours = Late Minute.
• Positive values (overtime) are shown in Green, while negative values (shortfall) are shown in Red.
• Special Case: If Work Hours is 0, the calculation is skipped and it returns 0 min.
• Updated mobile cards and details dialog to include this calculation.

7. Global Summaries

• Added two new summary cards at the top of the page:
  • Total Att Hrs: Sum of all attendance hours for the current results.
  • Total Late Mins: Sum of all negative late minutes (shortfalls). Extra/overtime minutes are excluded from this total as requested.
• Updated the grid layout to show 3 cards per row on desktop for better balance.

8. Language Settings (English/Indonesian)

• Implemented a modular Localization System in lib/utils/translations.dart.

• Created a LanguageManager with persistence using SharedPreferences.

• Added a Language Toggle in the sidebar settings menu.

• Real-time UI updates: The sidebar, navigation, and settings dialog now update instantly when switching between English and Indonesian.

• Persistence: The chosen language is saved and re-applied automatically when the browser is reopened.

• Localized Pages:

  • Sidebar & Navigation: All menu items and logout dialogs.
  • Settings: Language and theme toggle labels.
  • Attendance History: Headers, table columns, summary cards, and filters.
  • Dashboard: Welcome section, stats grid labels, and section headers.
  • Profile: Personal info, employment details, and quick stats.
  • Directory: Employee directory headers, search placeholders, and profile view.

Verification

• Verified Attendance Hours calculation (Work - 60min).
• Verified Late Minutes calculation (Work - 9hrs) with zero-work handling.
• Verified Language Switching updates all localized labels instantly.
• Verified Persistence of language settings after page refresh.