Add new pages for managing tags, tasks, transitions, users, user groups, and their respective JavaScript functionalities

- Implemented tag management page with filtering, data table, and AJAX functionality. - Created task management page with task listing, filtering, and AJAX data loading. - Developed transition management page with a data table for transitions. - Added user management page with comprehensive user details, filtering options, and AJAX support. - Introduced user group management page with filtering and data table for user groups. - Enhanced JavaScript for data tables, including state saving, filtering, and AJAX data fetching for all new pages.
2026-02-06 23:54:21 -05:00
parent 122d098be4
commit 87a444b8de
34 changed files with 4579 additions and 688 deletions
--- a/SIDEBAR_DESIGN_REVIEW.md
+++ b/SIDEBAR_DESIGN_REVIEW.md
@@ -0,0 +1,320 @@
+# Comprehensive Sidebar Design Review - OTS Signage Theme
+
+## Executive Summary
+The sidebar is well-structured with a modern dark-mode design, but has several areas for refinement:
+- **Padding**: Generally good, but can be more consistent
+- **Icon Arrangement**: Icons are properly centered and sized, but scaling between states could be improved
+- **Overall Style**: Cohesive and modern, with good dark mode aesthetics
+
+---
+
+## 1. SIDEBAR DIMENSIONS & STRUCTURE
+
+### CSS Variables (in `override.css`):
+```css
+--ots-sidebar-width: 256px                  /* Full width */
+--ots-sidebar-collapsed-width: 64px         /* Collapsed width */
+--ots-sidebar-header-height: 64px           /* Header section */
+--ots-sidebar-item-height: 44px             /* Nav item height */
+--ots-sidebar-item-radius: 10px             /* Border radius */
+--ots-sidebar-item-padding-x: 12px          /* Horizontal padding */
+```
+
+### Layout Analysis:
+- **Full Width**: 256px (reasonable for desktop, matches common patterns)
+- **Collapsed Width**: 64px (good for icon-only display)
+- **Responsive Break**: Changes to overlay at 768px (mobile-first, good)
+
+**Issue #1**: When collapsed, icons still have adequate space (20px icon + padding), but text labels are 100% hidden. Consider adding a tooltip system for discoverability.
+
+---
+
+## 2. PADDING ANALYSIS
+
+### Sidebar Header (`.sidebar-header`)
+```css
+padding: 20px 16px;           /* Vertical: 20px | Horizontal: 16px */
+```
+- **Assessment**: ✅ Good - balanced and symmetrical
+- **Component**: Contains logo (32px icon) + brand text + toggle button
+- **Vertical Alignment**: Properly centered with `align-items: center`
+
+### Sidebar Content (`.sidebar-content`)
+```css
+padding: 12px 0;              /* Vertical: 12px | Horizontal: 0 */
+```
+- **Assessment**: ⚠️ Inconsistent - no horizontal padding here
+- **Issue**: Padding is applied at the list item level instead (see nav items)
+
+### Sidebar Navigation (`.sidebar-nav`)
+```css
+padding: 72px 0 120px;        /* Top: 72px | Bottom: 120px | Sides: 0 */
+```
+- **Assessment**: ⚠️ **PROBLEM AREA** - padding is excessive for top/bottom
+  - 72px top padding assumes a fixed header height, could be dynamic
+  - 120px bottom padding creates large blank space (mobile unfriendly)
+  - No horizontal padding means nav items extend to edge
+
+### Navigation Items (`.ots-sidebar li.sidebar-list > a`)
+```css
+padding: 6px 10px;            /* Item content padding */
+margin: 3px 10px;             /* Outer margin/spacing */
+border-radius: 12px;
+min-height: 40px;
+```
+- **Assessment**: ⚠️ Mixed padding/margin approach
+  - **Inner padding (6px 10px)**: Good for text breathing room
+  - **Outer margin (3px 10px)**: Creates 10px left/right space from sidebar edge
+  - **Min-height (40px)**: Good touch target size
+
+**Recommendation**: The left margin (10px) combined with border-radius (12px) creates a nice inset look. Could be intentional and good.
+
+---
+
+## 3. ICON ARRANGEMENT
+
+### Icon Container (`.ots-nav-icon`)
+```css
+width: 24px;
+height: 24px;
+display: flex;
+align-items: center;
+justify-content: center;
+font-size: 16px;
+color: currentColor;
+justify-self: center;
+```
+- **Assessment**: ✅ Excellent
+  - Square container with centered content
+  - `justify-self: center` ensures centering in CSS Grid layout
+  - `color: currentColor` inherits link color for active/hover states
+
+### Nav Item Grid Layout
+```css
+display: grid;
+grid-template-columns: 20px 1fr;        /* Icon: 20px fixed | Text: flex */
+align-items: center;
+column-gap: 12px;
+```
+- **Assessment**: ✅ Good grid-based approach
+  - Consistent 12px gap between icon and text
+  - Icon column is tight (20px), text is flexible
+  - **Issue**: 20px icon container is narrower than 24px icon element - could cause slight misalignment
+
+**Recommendation**: Change to `grid-template-columns: 24px 1fr` to match the icon container size.
+
+### Active Item Styling
+```css
+.ots-sidebar li.sidebar-list.active > a {
+  color: #0b1221;           /* Dark text on light bg */
+  background-color: #ffffff;
+  font-weight: 600;
+  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.25);
+}
+```
+- **Assessment**: ✅ Strong visual feedback
+  - High contrast (white background + dark text)
+  - Shadow adds depth
+  - Icon inherits dark color via `currentColor`
+
+---
+
+## 4. OVERALL STYLE & DESIGN CONSISTENCY
+
+### Color Palette (Dark Mode)
+```css
+--ots-sidebar-bg: #08132a;                    /* Very dark blue */
+--ots-sidebar-link: #f9fbff;                  /* Nearly white text */
+--ots-sidebar-link-hover-bg: rgba(255,255,255,0.08);
+--ots-sidebar-active-bg: rgba(255,255,255,0.06);
+--ots-sidebar-active-text: #ffffff;
+--ots-sidebar-muted-text: #8ea4c7;            /* Muted section headers */
+```
+- **Assessment**: ✅ Excellent contrast and hierarchy
+  - Background: Deep navy (#08132a)
+  - Primary text: Nearly white (#f9fbff)
+  - Hover: 8% white overlay (subtle)
+  - Active: 6% white overlay (subtle)
+  - Section headers: Medium blue (#8ea4c7)
+  - **Accessibility**: WCAG AA compliant (>4.5:1 contrast)
+
+### Section Headers (`.sidebar-title`)
+```css
+display: block;
+font-size: 10px;
+font-weight: 700;
+text-transform: uppercase;
+color: #8ea4c7;
+letter-spacing: 0.12em;
+padding: 12px 14px 4px;
+```
+- **Assessment**: ✅ Good hierarchy
+  - Small, uppercase, muted color clearly distinguishes from regular nav items
+  - Letter spacing adds visual interest
+  - Adequate padding separates sections
+
+### Sidebar Footer (`.sidebar-footer`)
+```css
+border-top: 1px solid var(--color-border);
+padding: 16px;
+background-color: rgba(59, 130, 246, 0.05);   /* Slight blue tint */
+```
+- **Assessment**: ✅ Good
+  - Separated with border
+  - Subtle background color differentiates from main nav
+  - 16px padding consistent with other components
+
+---
+
+## 5. RESPONSIVE BEHAVIOR
+
+### Mobile Override (@media max-width: 768px)
+```css
+.ots-sidebar {
+  transform: translateX(-100%);
+  transition: transform var(--transition-base);
+  width: 280px;
+}
+.ots-sidebar.active {
+  transform: translateX(0);
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3);
+}
+.ots-main {
+  margin-left: 0;
+}
+```
+- **Assessment**: ✅ Good mobile experience
+  - Slides in from left (drawer pattern)
+  - Shadow adds depth when open
+  - Content isn't pushed aside (overlay instead)
+  - **Issue**: Sidebar width changes from 256px → 280px on mobile (should be 280px, maybe even narrower for mobile)
+
+---
+
+## 6. COLLAPSED STATE STYLING
+
+### Collapsed Class
+```css
+.ots-sidebar.collapsed {
+  /* No explicit width override - uses CSS variable */
+}
+```
+- **Assessment**: ⚠️ Lacks dedicated styling
+  - When `.collapsed` is added, only width changes (via CSS variable)
+  - No visual indicator (badge, animation) that it's collapsed
+  - Icon-only display works but lacks affordance
+
+### Collapsed Item Styling (`.sidebar-collapsed-item-bg`)
+```css
+--ots-sidebar-collapsed-item-bg: rgba(255, 255, 255, 0.08);
+--ots-sidebar-collapsed-item-hover-bg: rgba(255, 255, 255, 0.16);
+```
+- **Assessment**: ⚠️ Variables defined but not actively used in CSS rules
+  - These variables exist but I don't see them applied to `.collapsed` state styling
+  - **Action Item**: Verify if collapsed items have proper styling
+
+---
+
+## 7. KEY ISSUES & RECOMMENDATIONS
+
+### 🔴 HIGH PRIORITY
+
+1. **Icon/Grid Mismatch**
+   - Icon container: 24px, but grid column: 20px
+   - **Fix**: Change `grid-template-columns: 20px 1fr` → `grid-template-columns: 24px 1fr`
+
+2. **Excessive Nav Padding**
+   - `.sidebar-nav { padding: 72px 0 120px }` is too much
+   - **Fix**: Use dynamic sizing based on header height (JavaScript or CSS custom property)
+   - **Suggestion**: `padding: var(--ots-sidebar-header-height) 0 60px` (60px is enough for footer breathing room)
+
+3. **Collapsed State Styling**
+   - Collapsed items have CSS variables defined but not used
+   - **Fix**: Add active rules like:
+     ```css
+     .ots-sidebar.collapsed li.sidebar-list.active > a {
+       background-color: rgba(255, 255, 255, 0.12);
+     }
+     ```
+
+### 🟡 MEDIUM PRIORITY
+
+4. **Icon Discoverability When Collapsed**
+   - No tooltips or labels appear when sidebar is collapsed
+   - **Suggestion**: Add `title` attributes to nav items or implement CSS tooltips
+
+5. **Sidebar Header Button Spacing**
+   - Header has "toggle" button but spacing could be tighter on mobile
+   - **Suggestion**: When collapsed, header could be more compact
+
+6. **Mobile Width Inconsistency**
+   - Sidebar is 256px full-width but 280px on mobile (why wider?)
+   - **Suggestion**: Keep consistent at 256px or make it responsive (e.g., 90vw max 280px on small phones)
+
+### 🟢 LOW PRIORITY
+
+7. **Brand Icon & Text**
+   - Logo + text look good but could use more breathing room
+   - **Current**: `gap: 12px` - consider `gap: 16px` for more visual separation
+
+---
+
+## 8. VISUAL SPACING SUMMARY
+
+| Component | Padding | Margin | Assessment |
+|-----------|---------|--------|------------|
+| Header | 20px V, 16px H | — | ✅ Good |
+| Content Wrapper | 12px V, 0 H | — | ⚠️ Inconsistent |
+| Nav List | 72px T, 120px B | — | 🔴 Excessive |
+| Nav Items | 6px V, 10px H | 3px V, 10px H | ✅ Good |
+| Section Headers | 12px T, 14px H | — | ✅ Good |
+| Footer | 16px | — | ✅ Consistent |
+
+---
+
+## 9. ICON SIZING CONSISTENCY
+
+| Element | Width | Height | Font Size | Usage |
+|---------|-------|--------|-----------|-------|
+| Nav Icon | 24px | 24px | 16px | Primary nav items |
+| Brand Icon | 32px | 32px | 24px | Logo in header |
+| Topbar Icon | 20px | 20px | 16px | Topbar controls |
+
+**Assessment**: ✅ Good hierarchy and clarity
+
+---
+
+## 10. RECOMMENDATIONS FOR NEXT PHASE
+
+1. ✅ Fix grid column width mismatch (20px → 24px)
+2. ✅ Refactor `.sidebar-nav` padding (use CSS variables or dynamic)
+3. ✅ Add collapsed state active item styling
+4. ✅ Add `title` attributes to nav items for tooltip support
+5. ⚠️ Consider adding a visual "collapse indicator" (e.g., chevron or light pulsing border)
+6. ⚠️ Standardize mobile sidebar width
+7. ⚠️ Add more breathing room in header (gap: 16px instead of 12px for brand icon)
+
+---
+
+## Summary
+
+**Overall Grade: B+ (85/100)**
+
+### Strengths:
+- ✅ Modern, cohesive dark-mode aesthetic
+- ✅ Good color contrast and accessibility
+- ✅ Proper icon sizing and centering
+- ✅ Responsive mobile overlay pattern
+- ✅ Clear visual hierarchy (headers, active states, hover)
+
+### Weaknesses:
+- ⚠️ Excessive bottom padding in nav list
+- ⚠️ Grid icon column width mismatch
+- ⚠️ Lacking visual affordance when collapsed
+- ⚠️ Icon discoverability issues
+
+### Quick Wins (implement first):
+1. Change `grid-template-columns: 20px 1fr` → `24px 1fr`
+2. Change `.sidebar-nav padding: 72px 0 120px` → `64px 0 60px`
+3. Add collapsed state styling for active items
+