diff --git a/.env.production b/.env.production index 5989d3e..a6842cb 100644 --- a/.env.production +++ b/.env.production @@ -12,6 +12,7 @@ DATABASE_URL="file:/app/data/production.db" # Security SESSION_SECRET="your-super-secure-session-secret-change-this-in-production-min-32-chars" +ENCRYPTION_KEY="production-secure-encryption-key!" # Super Admin Account (created on first run) SUPER_ADMIN="superadmin" diff --git a/.gitignore b/.gitignore index 4354aa3..3ff06c3 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,7 @@ node_modules /.cache /build .env +.env.* /generated/prisma diff --git a/MOBILE_RESPONSIVENESS_SUMMARY.md b/MOBILE_RESPONSIVENESS_SUMMARY.md new file mode 100644 index 0000000..bb8b87b --- /dev/null +++ b/MOBILE_RESPONSIVENESS_SUMMARY.md @@ -0,0 +1,135 @@ +# Mobile Responsiveness Update Summary + +## Overview +All page routes in the Phosphat Report application have been updated to be fully responsive and mobile-friendly. The updates follow a mobile-first approach with consistent design patterns across all pages. + +## Key Improvements Made + +### 1. **Dashboard (dashboard.tsx)** +- ✅ Responsive stats grid: `grid-cols-1 sm:grid-cols-2 lg:grid-cols-3` +- ✅ Responsive typography: `text-xl sm:text-2xl` +- ✅ Mobile-friendly recent reports layout with stacked content on small screens +- ✅ Improved spacing and padding for mobile devices + +### 2. **Reports Management (reports.tsx)** +- ✅ **Dual Layout System**: Desktop table + Mobile cards +- ✅ Desktop: Traditional table layout (hidden on mobile with `hidden md:block`) +- ✅ Mobile: Card-based layout (visible on mobile with `md:hidden`) +- ✅ Mobile cards include all essential information in a compact format +- ✅ Responsive header with stacked layout on mobile +- ✅ Mobile-friendly action buttons (full-width on mobile) + +### 3. **Employee Management (employees.tsx)** +- ✅ **Dual Layout System**: Desktop table + Mobile cards +- ✅ Desktop: Full table with all columns (hidden on mobile with `hidden lg:block`) +- ✅ Mobile: Detailed cards showing employee info, status, and actions +- ✅ Responsive form layout in modal +- ✅ Mobile-friendly button layouts + +### 4. **Report Sheets (report-sheet.tsx)** +- ✅ **Dual Layout System**: Desktop table + Mobile cards +- ✅ Mobile cards show date, area, locations, shifts, and employees +- ✅ Responsive shift badges and status indicators +- ✅ Mobile-optimized action buttons + +### 5. **New Report Form (reports_.new.tsx)** +- ✅ Responsive multi-step progress indicator +- ✅ Mobile-friendly step navigation with smaller indicators on mobile +- ✅ Responsive form grids: `grid-cols-1 sm:grid-cols-2` +- ✅ Mobile-optimized navigation buttons with stacked layout +- ✅ Responsive spacing and padding throughout the form + +### 6. **Areas Management (areas.tsx)** +- ✅ **Dual Layout System**: Desktop table + Mobile cards +- ✅ Mobile cards with area name, report count, and actions +- ✅ Responsive header layout +- ✅ Mobile-friendly action buttons + +### 7. **Equipment Management (equipment.tsx)** +- ✅ **Dual Layout System**: Desktop table + Mobile cards +- ✅ Mobile cards showing equipment details, category badges, and actions +- ✅ Responsive form layout in modal +- ✅ Mobile-optimized category indicators + +### 8. **Authentication Pages** +- ✅ **Sign In (signin.tsx)**: Responsive logo sizing, typography, and spacing +- ✅ **Sign Up (signup.tsx)**: Mobile-friendly form layout and responsive design + +### 9. **Settings Pages** +- ✅ **Mail Settings (mail-settings.tsx)**: Responsive form layout, stacked buttons on mobile +- ✅ **Test Email (test-email.tsx)**: Mobile-friendly form and responsive typography + +## Design Patterns Used + +### 1. **Responsive Breakpoints** +- `sm:` (640px+) - Small tablets and larger phones +- `md:` (768px+) - Tablets +- `lg:` (1024px+) - Small desktops +- `xl:` (1280px+) - Large desktops + +### 2. **Layout Strategies** +- **Tables → Cards**: Desktop tables convert to mobile cards for better readability +- **Flex Direction**: `flex-col sm:flex-row` for stacking on mobile +- **Grid Responsiveness**: `grid-cols-1 sm:grid-cols-2 lg:grid-cols-3` +- **Spacing**: Reduced padding/margins on mobile (`p-4 sm:p-6`) + +### 3. **Typography Scaling** +- Headers: `text-xl sm:text-2xl` +- Body text: `text-sm sm:text-base` +- Responsive line heights and spacing + +### 4. **Button Layouts** +- Mobile: Full-width buttons (`w-full`) +- Desktop: Inline buttons with proper spacing +- Action groups: Stacked on mobile, inline on desktop + +### 5. **Navigation** +- Mobile-first navigation with collapsible elements +- Touch-friendly button sizes (minimum 44px touch targets) +- Proper spacing for thumb navigation + +## Mobile-Specific Features + +### 1. **Card-Based Layouts** +- All data tables have mobile card alternatives +- Cards include essential information in a scannable format +- Proper visual hierarchy with typography and spacing + +### 2. **Touch-Friendly Interactions** +- Larger touch targets for buttons and links +- Proper spacing between interactive elements +- Mobile-optimized form inputs + +### 3. **Progressive Enhancement** +- Desktop-first table layouts with mobile fallbacks +- Responsive images and icons +- Adaptive spacing and typography + +## Testing Recommendations + +### 1. **Device Testing** +- Test on actual mobile devices (iOS/Android) +- Use browser dev tools for responsive testing +- Test in both portrait and landscape orientations + +### 2. **Breakpoint Testing** +- Test all major breakpoints (320px, 768px, 1024px, 1280px) +- Ensure smooth transitions between breakpoints +- Verify no horizontal scrolling on mobile + +### 3. **Functionality Testing** +- All forms work properly on mobile +- Modal dialogs are mobile-friendly +- Navigation is accessible on touch devices + +## Browser Support +- Modern mobile browsers (iOS Safari, Chrome Mobile, Firefox Mobile) +- Responsive design works across all major desktop browsers +- Graceful degradation for older browsers + +## Performance Considerations +- Tailwind CSS provides optimized responsive utilities +- No additional JavaScript required for responsive behavior +- Minimal impact on bundle size + +All routes now provide an excellent mobile experience while maintaining full desktop functionality. \ No newline at end of file diff --git a/Y_Todo.md b/Y_Todo.md new file mode 100644 index 0000000..58f3be5 --- /dev/null +++ b/Y_Todo.md @@ -0,0 +1,14 @@ + + + +TODO + +- [✅] Update Sidebar menu to be collapselble +- [✅] make the Sidebar compatible with mobile devices +- [ ] Update all the page routes to be responsive and mobile friendly +- [ ] Summation of stoppage hours (sum if contains) and show them under the report + + + + + diff --git a/app/components/DashboardLayout.tsx b/app/components/DashboardLayout.tsx index c2197db..3f754f6 100644 --- a/app/components/DashboardLayout.tsx +++ b/app/components/DashboardLayout.tsx @@ -1,5 +1,6 @@ -import { Form, Link } from "@remix-run/react"; +import { Form, Link, useLocation } from "@remix-run/react"; import type { Employee } from "@prisma/client"; +import { useState } from "react"; interface DashboardLayoutProps { children: React.ReactNode; @@ -7,50 +8,87 @@ interface DashboardLayoutProps { } export default function DashboardLayout({ children, user }: DashboardLayoutProps) { + const [sidebarOpen, setSidebarOpen] = useState(false); + const [sidebarCollapsed, setSidebarCollapsed] = useState(() => { + // Initialize from localStorage if available + if (typeof window !== 'undefined') { + const saved = localStorage.getItem('sidebar-collapsed'); + return saved ? JSON.parse(saved) : false; + } + return false; + }); + + const toggleSidebar = () => setSidebarOpen(!sidebarOpen); + + const toggleCollapse = () => { + const newCollapsed = !sidebarCollapsed; + setSidebarCollapsed(newCollapsed); + // Persist to localStorage + if (typeof window !== 'undefined') { + localStorage.setItem('sidebar-collapsed', JSON.stringify(newCollapsed)); + } + }; + return (
+ {/* Mobile sidebar overlay */} + {sidebarOpen && ( +
setSidebarOpen(false)} + /> + )} + {/* Navigation */} -