@optifye/dashboard-core 2.0.5 → 3.0.1

package/README.md

@@ -166,10 +166,17 @@ This package requires the following peer dependencies to be installed in your pr
 npm install react@^18 react-dom@^18 next@^13 tailwindcss@^3 @supabase/supabase-js@^2 date-fns@^4 date-fns-tz@^3
 ```
 
+Additionally, you'll need to install these UI and utility dependencies:
+
+```bash
+npm install lucide-react @heroicons/react @tabler/icons-react @radix-ui/react-select @radix-ui/react-slider @radix-ui/react-slot @radix-ui/react-tabs recharts react-day-picker sonner swr zustand axios hls.js html2canvas jspdf mixpanel-browser tailwindcss-animate @aws-sdk/client-s3 @aws-sdk/s3-request-presigner
+```
+
 Or if using Yarn:
 
 ```bash
 yarn add react@^18 react-dom@^18 next@^13 tailwindcss@^3 @supabase/supabase-js@^2 date-fns@^4 date-fns-tz@^3
+yarn add lucide-react @heroicons/react @tabler/icons-react @radix-ui/react-select @radix-ui/react-slider @radix-ui/react-slot @radix-ui/react-tabs recharts react-day-picker sonner swr zustand axios hls.js html2canvas jspdf mixpanel-browser tailwindcss-animate @aws-sdk/client-s3 @aws-sdk/s3-request-presigner
 ```
 
 ### CSS Setup
@@ -189,6 +196,40 @@ This CSS file includes:
 
 **Note:** You do NOT need to separately import `react-day-picker/dist/style.css` as these styles are already included in the package's global CSS.
 
+## Mobile Responsiveness
+
+All dashboard components are designed to be fully responsive and mobile-friendly:
+
+### Responsive Features
+
+- **Adaptive Grid Layouts**: Workspace video grids automatically adjust to show 2x2 layout on mobile screens
+- **Responsive Text Sizes**: Text sizes scale appropriately across different screen sizes
+- **Touch-Optimized Controls**: Buttons and interactive elements are sized for touch interaction
+- **Flexible KPI Cards**: KPI cards stack vertically on mobile screens for better readability
+- **Mobile-First Navigation**: Compact headers and navigation elements on smaller screens
+
+### Breakpoint System
+
+The dashboard uses Tailwind CSS breakpoints:
+- Mobile: < 640px (default)
+- Small (sm): ≥ 640px
+- Medium (md): ≥ 768px
+- Large (lg): ≥ 1024px
+- Extra Large (xl): ≥ 1280px
+
+### Usage Example for Mobile View
+
+```tsx
+// The dashboard automatically adapts to mobile screens
+<HomeView 
+  defaultLineId={defaultLineId}
+  factoryViewId={factoryViewId}
+  // ... other props
+/>
+```
+
+Components handle responsive behavior internally, no additional configuration needed.
+
 ## Troubleshooting
 
 ### Next.js Module Resolution Error