Feat/grid list

Overview

This MR introduces a Grid/List view toggle for all directory-related pages to improve usability and allow users to switch between layouts dynamically.

---

What does this MR do and why?

This MR adds the ability for users to switch between Grid View (card layout) and List View (horizontal layout) across multiple pages.

Previously, all data was displayed only in a fixed grid layout, which made it difficult to scan large datasets. This change improves flexibility, readability, and overall UI experience.

---

Changes Made

• Added view toggle (Grid/List) at the top-right
• Implemented state-based layout switching
• Persisted selected view using localStorage (assign-roles-view)
• Updated UI to support both layouts
• Ensured book number is visible in both views

Pages Updated

• managedoctorpage
• staffattendancepage
• managemedicinespage
• managemedicalcampspage
• assignrolepage

---

Technical Details

• Introduced view state ('grid' | 'list')
• Used conditional rendering for layout switching
• Implemented flex layout for list view
• Used Tailwind CSS for responsiveness
• Reused logic across all pages for consistency

---

Type of Change

• 🐛 Bug fix
• ✨ New feature
• 💥 Breaking change
• 📝 Documentation update
• 🎨 UI/UX improvement
• ♻️ Refactor
• ⚡ Performance improvement
• 🧪 Test update
• 🔧 Configuration change
• 🚨 Security fix

---

Related Issues / References

Closes #318 (closed)

---

Screenshots or Screen Recordings

Before

Grid only

After

Grid + List toggle

---

How to Set Up and Validate Locally

1. Checkout this branch:

   git checkout feat/view-toggle

2. Install dependencies:

   bun install

3. Run development server:

   bun dev

4. Navigate to:

   • /managedoctors
   • /staffattendance
   • /medicines
   • /medicalcamps
   • /assignroles

5. Test:

   • Use toggle button at top-right
   • Switch between Grid and List views

6. Expected behavior:

   • Layout switches instantly
   • Selected view is highlighted
   • Layout persists after refresh

---

Testing Done

• Manual testing completed
• Unit tests added/updated

Test Cases Covered:

Scenario	Expected Result	Status
Toggle visible	Button at top-right	✅
Switch to list view	Horizontal layout	✅
Switch back to grid	Card layout	✅
Works across all pages	Consistent behavior	✅
Persistence	View saved in localStorage	✅

---

Code Quality Checklist

Code Standards

• Code follows project conventions
• No console.log() left
• No unused imports
• Reusable components used
• TypeScript types defined
• ESLint & Prettier pass

React Best Practices

• Proper component structure
• Hooks used correctly
• State managed efficiently
• No unnecessary re-renders

Component Patterns

• Tailwind used correctly
• Responsive design handled
• UI consistent across pages

---

Documentation

• README updated
• .env changes
• CHANGELOG updated

---

Known Limitations / Technical Debt

• View preference stored per browser (localStorage)
• Not synced across devices

---

Additional Notes

This implementation is reusable and can be extended to other modules easily.

---