338 lines
12 KiB
Markdown
338 lines
12 KiB
Markdown
# UI/UX Audit Sprint 6.12
|
|
|
|
## Executive Summary
|
|
|
|
- Audit type: code-and-structure review of current UI implementation before Sprint 7
|
|
- Audit basis: current page composition, shared layout/components, responsive class behavior, table/form/dialog patterns
|
|
- Overall UI score: 7.2/10
|
|
- Overall UX score: 6.9/10
|
|
- Overall Responsive score: 6.8/10
|
|
|
|
The application already has a solid shared shell, reusable table layer, and consistent shadcn-based primitives. The main gaps are inconsistency between older page-specific patterns and newer shared components, mixed language/tone across screens, crowded dashboards, and form/table experiences that are functionally correct but still feel dense on mobile and mid-width screens.
|
|
|
|
## Files Reviewed
|
|
|
|
- `src/components/layout/page-container.tsx`
|
|
- `src/components/layout/app-sidebar.tsx`
|
|
- `src/components/layout/header.tsx`
|
|
- `src/components/ui/table.tsx`
|
|
- `src/components/ui/table/data-table.tsx`
|
|
- `src/components/ui/table/data-table-toolbar.tsx`
|
|
- `src/components/ui/table/data-table-pagination.tsx`
|
|
- `src/components/ui/dialog.tsx`
|
|
- `src/components/ui/drawer.tsx`
|
|
- `src/components/ui/tanstack-form.tsx`
|
|
- `src/features/overview/components/overview-filter-panel.tsx`
|
|
- `src/app/dashboard/overview/layout.tsx`
|
|
- `src/features/training-records/components/training-record-tables/index.tsx`
|
|
- `src/features/training-records/components/training-record-tables/columns.tsx`
|
|
- `src/features/training-records/components/training-record-form.tsx`
|
|
- `src/features/training-records/components/training-record-view-page.tsx`
|
|
- `src/features/training-records/components/pending-review-table.tsx`
|
|
- `src/features/employee-directory/components/employee-directory-table.tsx`
|
|
- `src/features/employee-directory/components/employee-directory-toolbar.tsx`
|
|
- `src/features/employee-directory/components/employee-directory-detail-page.tsx`
|
|
- `src/features/users/components/users-table/index.tsx`
|
|
- `src/features/users/components/user-form-sheet.tsx`
|
|
- `src/features/reports/components/reports-page-content.tsx`
|
|
- `src/features/reports/components/report-table-card.tsx`
|
|
|
|
## Components Reviewed
|
|
|
|
- Sidebar
|
|
- Header
|
|
- Page container
|
|
- DataTable
|
|
- DataTable toolbar
|
|
- DataTable pagination
|
|
- Dialog
|
|
- Drawer
|
|
- Card patterns
|
|
- Form patterns
|
|
- Sheet form pattern
|
|
- Report table cards
|
|
|
|
## Screens Reviewed
|
|
|
|
- Employee Dashboard
|
|
- HRD Dashboard
|
|
- Training Records
|
|
- Create Training Record
|
|
- Edit Training Record
|
|
- Pending Review
|
|
- Employee Directory
|
|
- Employee Detail
|
|
- Users
|
|
- Reports
|
|
|
|
## Page-by-Page Review
|
|
|
|
### Dashboard
|
|
|
|
#### Strengths
|
|
|
|
- Shared `PageContainer` gives pages a predictable shell.
|
|
- KPI cards are already separated from filter controls and chart sections.
|
|
- Role-based dashboard branching is clear and prevents irrelevant content.
|
|
|
|
#### Problems
|
|
|
|
- Dashboard filter panels are built with native `select` controls and page-specific styling instead of a shared filter component.
|
|
- KPI cards mix useful metrics with low-information badges; some badges render with little visual meaning.
|
|
- The admin dashboard grid is content-heavy and risks weak hierarchy on tablet widths.
|
|
- Chart and card density is high before enough whitespace separates sections.
|
|
|
|
#### Suggested Improvements
|
|
|
|
- Standardize dashboard filters into one reusable filter-bar component shared by Overview and Reports.
|
|
- Reduce secondary badge noise on KPI cards and surface only one key supporting datum.
|
|
- Increase sectional separation between cards, charts, and recent activity panels.
|
|
- Introduce a consistent empty-state design for dashboard subpanels.
|
|
|
|
#### Priority
|
|
|
|
- Medium
|
|
|
|
### Training Records
|
|
|
|
#### Strengths
|
|
|
|
- Reusable DataTable pattern is in place.
|
|
- Status and training-type badges improve scannability.
|
|
- Certificate preview has a dedicated component and modal flow.
|
|
|
|
#### Problems
|
|
|
|
- Table still depends on many medium-width columns, so discoverability on mobile remains limited even when overflow is contained.
|
|
- Certificate column is useful but visually expensive relative to the information density of the row.
|
|
- Search/filter controls are still form-like rather than “quick filter” optimized.
|
|
- Empty-state quality is better than older pages, but the table view remains dense before interaction.
|
|
|
|
#### Suggested Improvements
|
|
|
|
- Collapse secondary row metadata into stacked cell layouts more aggressively on smaller breakpoints.
|
|
- Consider moving certificate preview into row details or action menu on mobile.
|
|
- Add a compact filter mode for narrow widths.
|
|
- Normalize hours formatting and right-alignment across all numeric columns.
|
|
|
|
#### Priority
|
|
|
|
- High
|
|
|
|
### Create Training Record
|
|
|
|
#### Strengths
|
|
|
|
- Form validation, required states, and permission messaging are present.
|
|
- Scroll-to-first-error behavior improves usability.
|
|
- Upload guidance and review status context are included.
|
|
|
|
#### Problems
|
|
|
|
- The form is long and visually uniform, making it hard to scan by section.
|
|
- Inputs, selects, upload, and custom combobox patterns feel mixed rather than part of one clearly grouped form system.
|
|
- The time-to-hours interaction is clever but not instantly obvious to first-time users.
|
|
- Supporting text competes with labels because spacing and hierarchy are similar everywhere.
|
|
|
|
#### Suggested Improvements
|
|
|
|
- Break the form into named sections such as participant, course, schedule, evidence, and notes.
|
|
- Add section separators or cards to reduce cognitive load.
|
|
- Improve time input affordance with inline example formatting or helper chips.
|
|
- Standardize textarea styling with shared form field components where possible.
|
|
|
|
#### Priority
|
|
|
|
- High
|
|
|
|
### Edit Training Record
|
|
|
|
#### Strengths
|
|
|
|
- Existing status and reviewer note context reduce ambiguity.
|
|
- Read-only guard for non-editable records is explicit.
|
|
|
|
#### Problems
|
|
|
|
- Edit mode and create mode share nearly the same visual treatment, so users get weak cues about record lifecycle.
|
|
- Read-only state depends on warning copy more than structural UI changes.
|
|
|
|
#### Suggested Improvements
|
|
|
|
- Add stronger edit-state framing with status banner treatment and section locking visuals.
|
|
- Visually disable non-editable zones instead of only relying on top-level alert copy.
|
|
|
|
#### Priority
|
|
|
|
- Medium
|
|
|
|
### Pending Review
|
|
|
|
#### Strengths
|
|
|
|
- Purpose is clear and the empty state is task-appropriate.
|
|
- Action column supports review workflow efficiently.
|
|
|
|
#### Problems
|
|
|
|
- The table is still the dominant interaction model on narrow screens despite workflow-oriented content.
|
|
- Search plus multiple filters can become visually busy and difficult to parse quickly.
|
|
|
|
#### Suggested Improvements
|
|
|
|
- Consider a card-list fallback or row-detail preview pattern for mobile.
|
|
- Group filters into primary and secondary tiers.
|
|
- Surface status totals above the table for queue triage.
|
|
|
|
#### Priority
|
|
|
|
- High
|
|
|
|
### Employee Directory
|
|
|
|
#### Strengths
|
|
|
|
- Search and faceted filters are relevant to the use case.
|
|
- Detail page contains a strong breadth of information and summary metrics.
|
|
|
|
#### Problems
|
|
|
|
- List view is highly column-dense for the typical HR scan workflow.
|
|
- Detail page combines summary, profile, K/S/A, and history into a long vertical stack with limited sectional differentiation.
|
|
- The detail history table still uses a page-local table pattern instead of the shared table primitive style.
|
|
|
|
#### Suggested Improvements
|
|
|
|
- Reprioritize columns for the list page around primary identity and status first.
|
|
- Convert the detail screen into clearer sections with stronger rhythm between summary and history.
|
|
- Migrate the detail history table to the shared table system for consistency.
|
|
|
|
#### Priority
|
|
|
|
- High
|
|
|
|
### Users
|
|
|
|
#### Strengths
|
|
|
|
- User creation/editing via sheet is efficient for admin workflows.
|
|
- Table and form share reusable infrastructure.
|
|
|
|
#### Problems
|
|
|
|
- Users screen remains visually English-first while much of the application is Thai-first.
|
|
- Sheet form is dense and can become cramped for long option labels.
|
|
- Table columns are more operational than people-centric, which reduces scan speed.
|
|
|
|
#### Suggested Improvements
|
|
|
|
- Normalize content language strategy for admin screens.
|
|
- Increase grouping inside the sheet form: identity, organization, role, access.
|
|
- Shorten or visually tier organizer/account metadata in the list.
|
|
|
|
#### Priority
|
|
|
|
- Medium
|
|
|
|
### Reports
|
|
|
|
#### Strengths
|
|
|
|
- Clear export intent and multiple report blocks are easy to understand.
|
|
- Summary cards and data tables create a useful reporting structure.
|
|
|
|
#### Problems
|
|
|
|
- Reports page is one of the densest screens in the app.
|
|
- Multiple large tables in sequence create fatigue and weak “at a glance” hierarchy.
|
|
- Filter UI duplicates the dashboard filter style rather than sharing a standard analytics filter bar.
|
|
- Table cards vary from core DataTable behavior and still feel visually separate from the rest of the system.
|
|
|
|
#### Suggested Improvements
|
|
|
|
- Add a report section navigator or tabs to reduce long-page fatigue.
|
|
- Convert filter/header treatment into a shared analytics toolbar.
|
|
- Tighten summary-card copy and increase visual hierarchy before tables.
|
|
- Align report tables more closely with DataTable spacing, badges, and empty states.
|
|
|
|
#### Priority
|
|
|
|
- High
|
|
|
|
## Global Design Issues
|
|
|
|
- Native `select` usage and custom filter bars coexist with shadcn form patterns, creating inconsistent control styling.
|
|
- Data tables are shared in many places, but several detail/report views still use page-local table markup.
|
|
- Mixed Thai and English labels reduce product voice consistency.
|
|
- Button hierarchy is inconsistent across admin screens: some pages lead with outline actions, others with filled primary actions without a clear pattern.
|
|
- Dashboard KPI cards use inconsistent supporting content density.
|
|
|
|
## Responsive Issues
|
|
|
|
- Dashboard chart areas likely become visually crowded on tablet layouts before they become technically broken.
|
|
- Long forms such as Training Record still feel mobile-heavy even without viewport overflow.
|
|
- Pending Review and Training Records remain table-first on mobile and would benefit from alternate compact layouts.
|
|
- Employee Detail history table still relies on a local scroll-area table pattern and may diverge from shared overflow fixes.
|
|
- Header space is limited for future growth; breadcrumbs, trigger, theme toggle, and notifications already consume most of the row.
|
|
|
|
## Accessibility Issues
|
|
|
|
- Some flows still rely heavily on visual layout rather than explicit grouping or headings.
|
|
- Mixed native and custom controls may create uneven keyboard and focus behavior across filters/forms.
|
|
- Dense dashboard and report layouts risk poor focus traversal experience.
|
|
- Language inconsistency may also affect assistive clarity if labels change idiom by screen.
|
|
- More icon-only affordances should be audited for consistent accessible names, especially action menus and future toolbar actions.
|
|
|
|
## Recommended Refactoring
|
|
|
|
- Build a shared analytics filter panel used by Overview and Reports.
|
|
- Build a shared sectioned form layout wrapper for long forms.
|
|
- Standardize detail-page summary cards into a reusable metric-strip component.
|
|
- Migrate page-local tables to the shared `Table` or `DataTable` conventions.
|
|
- Standardize badge semantics for status, type, and progress across features.
|
|
- Create a language/content guideline for Thai-first vs English admin terminology.
|
|
|
|
## Suggested Improvements
|
|
|
|
- Introduce a shared dashboard filter component with the same spacing, field height, and button grouping everywhere.
|
|
- Add responsive “compact row” patterns for operational tables.
|
|
- Use clearer section headers and dividers on long forms and detail pages.
|
|
- Simplify KPI cards by limiting each to one primary metric and one supporting hint.
|
|
- Standardize empty-state design across DataTable, reports, and detail history sections.
|
|
- Normalize numeric formatting and alignment in all summary/table/report surfaces.
|
|
|
|
## Refactoring Opportunities
|
|
|
|
- Shared filter-bar abstraction for Overview and Reports
|
|
- Shared admin metric card for Dashboard, Reports, Employee Detail
|
|
- Shared detail-history table wrapper
|
|
- Shared long-form section component
|
|
- Shared status badge map component for approval, active/inactive, target status
|
|
|
|
## UI Consistency Checklist
|
|
|
|
- Typography: Partial pass
|
|
- Buttons: Partial pass
|
|
- Cards: Partial pass
|
|
- Tables: Partial pass
|
|
- Dialogs: Pass
|
|
- Forms: Partial pass
|
|
- Filters: Needs improvement
|
|
- Pagination: Partial pass
|
|
- Search: Partial pass
|
|
|
|
## Final Score
|
|
|
|
- UI: 7.2/10
|
|
- UX: 6.9/10
|
|
- Responsive: 6.8/10
|
|
- Accessibility: 7.0/10
|
|
- Performance: 7.6/10
|
|
- Maintainability: 7.4/10
|
|
- Overall Readiness: 7.1/10
|
|
|
|
## Notes
|
|
|
|
- This audit is based on the current code structure and component implementation patterns reviewed in Sprint 6.12.
|
|
- Scores reflect product readiness for UI refinement work before Sprint 7, not business-logic completeness.
|