diff --git a/src/Modules/Visitors_Hostel/ARCHITECTURE.md b/src/Modules/Visitors_Hostel/ARCHITECTURE.md
new file mode 100644
index 000000000..dba078504
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/ARCHITECTURE.md
@@ -0,0 +1,197 @@
+# Visitor Hostel Module - Frontend Architecture
+
+## Folder Structure
+
+```
+Visitors_Hostel/
+├── pages/
+│   ├── PendingBookingsPage.jsx
+│   ├── ActiveBookingsPage.jsx
+│   ├── InventoryManagementPage.jsx
+│   ├── CancelledBookingsPage.jsx
+│   └── CompletedBookingsPage.jsx
+│
+├── components/
+│   ├── forms/
+│   │   ├── BookingRequestForm.jsx
+│   │   ├── ConfirmBookingForm.jsx
+│   │   ├── ForwardBookingForm.jsx
+│   │   ├── CheckoutForm.jsx
+│   │   └── InventoryForm.jsx
+│   │
+│   ├── tables/
+│   │   ├── PendingRequestsTable.jsx
+│   │   ├── ActiveBookingsTable.jsx
+│   │   ├── CancelledRequestsTable.jsx
+│   │   ├── CompletedBookingsTable.jsx
+│   │   └── InventoryTable.jsx
+│   │
+│   └── common/
+│       ├── ViewBookingModal.jsx
+│       ├── ViewActiveBookingModal.jsx
+│       ├── RoleBasedAccess.jsx
+│       └── LoadingSpinner.jsx
+│
+├── services/
+│   └── visitorHostelApi.js
+│
+├── utils/
+│   ├── validators.js
+│   ├── dateHelpers.js
+│   └── constants.js
+│
+├── styles/
+│   └── visitorHostel.module.css
+│
+└── index.js
+```
+
+## Component Responsibilities
+
+### pages/
+- **Route-level components** representing screens
+- Assemble page-level components
+- Don't contain heavy UI logic
+- Handle page state and data fetching
+
+### components/forms/
+- **Form components** for user input
+- Handle form validation
+- Submit data to API via services
+- Show success/error messages
+
+### components/tables/
+- **Table components** for data display
+- Handle sorting, filtering, search
+- Support pagination
+- Include action buttons
+
+### components/common/
+- **Shared UI components** used across module
+- Modal wrappers
+- Reusable UI elements
+- Role-based access control
+
+### services/
+- **Centralized API communication**
+- RESTful endpoint definitions
+- Request/response handling
+- Token management via interceptors
+
+### utils/
+- **Helper functions** used across components
+- Date formatting and validation
+- Form validation utilities
+- Constants and enumerations
+
+### styles/
+- **CSS modules** for component styling
+- Responsive design utilities
+- Print styles
+
+## Migration Status
+
+### ✅ Completed
+- `pages/` - All page components created
+- `components/tables/` - All table components created
+- `components/forms/` - Form component references created
+- `components/common/` - Modal component references created
+- `services/visitorHostelApi.js` - Service layer completed
+- `utils/` - Validators, helpers, and constants created
+- `styles/` - CSS modules created
+
+### 🔄 In Progress
+- Moving form implementations from root to `components/forms/`
+- Moving modal implementations from root to `components/common/`
+
+### ⏳ TODO
+- Create `RoleBasedAccess.jsx` component
+- Create `LoadingSpinner.jsx` component
+- Create page for Account Statements
+- Full integration testing
+
+## API Endpoints Mapping
+
+| Feature | Endpoint | Status |
+|---------|----------|--------|
+| Pending Bookings | GET /api/bookings/pending/ | ✅ |
+| Active Bookings | GET /api/bookings/active/ | ✅ |
+| Confirm Booking | POST /api/bookings/confirm/ | ✅ |
+| Reject Booking | POST /api/bookings/reject/ | ✅ |
+| Forward Booking | POST /api/bookings/forward/ | ✅ |
+| Cancel Booking | POST /api/bookings/cancel/ | ✅ |
+| Checkout | POST /api/bookings/checkout/ | ✅ |
+| Room Availability | GET /api/rooms/availability/ | ✅ |
+| Add Inventory | POST /api/inventory/add/ | ✅ |
+| Get Inventory | GET /api/inventory/ | ⏳ NEEDED |
+| Cancelled Bookings | GET /api/bookings/cancelled/ | ⏳ NEEDED |
+| Completed Bookings | GET /api/bookings/completed/ | ⏳ NEEDED |
+| Get Booking Details | GET /api/bookings/{id}/ | ⏳ NEEDED |
+
+## Usage Examples
+
+### Using Pages
+```javascript
+// In routes or navigation
+import PendingBookingsPage from './pages/PendingBookingsPage';
+
+<Route path="/vh/bookings/pending" component={PendingBookingsPage} />
+```
+
+### Using Components
+```javascript
+// In page components
+import PendingRequestsTable from '../components/tables/PendingRequestsTable';
+import BookingRequestForm from '../components/forms/BookingRequestForm';
+
+<PendingRequestsTable />
+<BookingRequestForm modalOpened={true} onClose={() => {}} />
+```
+
+### Using Services
+```javascript
+// In components
+import { bookingsAPI } from '../../services/visitorHostelApi';
+
+const pendingBookings = await bookingsAPI.getPendingBookings();
+const result = await bookingsAPI.confirmBooking(bookingId, category, rooms);
+```
+
+### Using Utils
+```javascript
+import { validateEmail, formatDate, getDaysBetween } from '../../utils/';
+import { USER_ROLES, BOOKING_STATUS } from '../../utils/constants';
+
+if (validateEmail(email)) {
+  const formatted = formatDate(date);
+  const days = getDaysBetween(startDate, endDate);
+}
+```
+
+## Next Steps
+
+1. **Move existing implementations**
+   - Move `bookingForm.jsx` → `components/forms/BookingRequestForm.jsx`
+   - Move `confirmBooking_Incharge.jsx` → `components/forms/ConfirmBookingForm.jsx`
+   - (and other forms)
+
+2. **Create shared components**
+   - `components/common/RoleBasedAccess.jsx`
+   - `components/common/LoadingSpinner.jsx`
+
+3. **Backend coordination**
+   - Create missing endpoints:
+     - GET /api/inventory/
+     - GET /api/bookings/cancelled/
+     - GET /api/bookings/completed/
+     - GET /api/bookings/{id}/
+
+4. **Integration testing**
+   - End-to-end workflow for all 3 roles
+   - Browser console validation
+   - API contract validation
+
+5. **Performance optimization**
+   - Add pagination to tables
+   - Implement lazy loading
+   - Optimize re-renders
diff --git a/src/Modules/Visitors_Hostel/CheckoutForm.jsx b/src/Modules/Visitors_Hostel/CheckoutForm.jsx
index f18425921..23bd3e331 100644
--- a/src/Modules/Visitors_Hostel/CheckoutForm.jsx
+++ b/src/Modules/Visitors_Hostel/CheckoutForm.jsx
@@ -12,9 +12,8 @@ import {
   NumberInput,
   Divider,
 } from "@mantine/core";
-import axios from "axios";
 import PropTypes from "prop-types";
-import { host } from "../../routes/globalRoutes";
+import { bookingsAPI } from "./services/visitorHostelApi";
 
 function CheckoutForm({ modalOpened, onClose, bookingId, bookingDetails }) {
   const [items, setItems] = useState([
@@ -53,43 +52,15 @@ function CheckoutForm({ modalOpened, onClose, bookingId, bookingDetails }) {
   };
 
   const handleCompleteCheckout = async () => {
-    const token = localStorage.getItem("authToken");
-    if (!token) {
-      return console.error("No authentication token found!");
-    }
-
     try {
-      const now = new Date();
-      const formattedTime = now.toTimeString().split(" ")[0]; // Extract time in HH:MM:SS format
-
-      const data = {
-        booking_id: bookingId,
-        inventory_items: items.map((item) => ({
-          name: item.name,
-          quantity: item.quantity,
-          cost: item.cost,
-        })),
-        meal_bill: 0, // Add meal bill if applicable
-        room_bill: totalAmount, // Total amount as room bill
-        check_out_time: formattedTime, // Send time in HH:MM:SS format
-      };
-
-      console.log("Data being sent to backend:", data); // Log the data
+      // Use bookingsAPI service for checkout
+      const mealBill = 0; // Default meal bill
+      const roomBill = totalAmount; // Total amount as room bill
 
-      // Send request to the backend
-      const response = await axios.post(
-        `${host}/visitorhostel/check-out-with-inventory/`,
-        data,
-        {
-          headers: {
-            Authorization: `Token ${token}`,
-            "Content-Type": "application/json",
-          },
-        },
-      );
+      const response = await bookingsAPI.checkOut(bookingId, mealBill, roomBill);
 
       console.log("Successfully completed checkout for booking ID:", bookingId);
-      console.log("Response from backend:", response.data);
+      console.log("Response from backend:", response);
 
       alert("Checkout completed successfully!");
       onClose(); // Close the modal after checkout
diff --git a/src/Modules/Visitors_Hostel/MIGRATION_CHECKLIST.md b/src/Modules/Visitors_Hostel/MIGRATION_CHECKLIST.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/Modules/Visitors_Hostel/STAGE3_4_CHECKLIST.js b/src/Modules/Visitors_Hostel/STAGE3_4_CHECKLIST.js
new file mode 100644
index 000000000..7c86c3eba
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/STAGE3_4_CHECKLIST.js
@@ -0,0 +1,410 @@
+/**
+ * STAGE 3 & 4: COMPONENT MIGRATION & TESTING CHECKLIST
+ * 
+ * Status: Current progress ~2.5/10 hours
+ * Remaining: Component migration (3-4 hrs) + Testing (2-3 hrs)
+ * 
+ * This file tracks all components requiring migration and testing
+ */
+
+// ============================================================================
+// STAGE 3: COMPONENT MIGRATION CHECKLIST
+// ============================================================================
+
+/**
+ * PRIORITY 1: CRITICAL COMPONENTS (Migrate First)
+ * These are active in current UI and used by all roles
+ */
+
+// ✅ COMPLETED
+const COMPLETED_COMPONENTS = [
+  {
+    name: "visitorsContent.jsx",
+    status: "✅ DONE",
+    task: "Added Routes/Route configuration",
+    file: "Modules/Visitors_Hostel/visitorsContent.jsx",
+    notes: "Now routes to bookings, room-availability, inventory, bills",
+  },
+  {
+    name: "visitorHostelApi.js",
+    status: "✅ DONE",
+    task: "Created centralized service layer",
+    file: "Modules/Visitors_Hostel/services/visitorHostelApi.js",
+    notes: "19 API methods, proper error handling, auth interceptor",
+  },
+];
+
+// 🟡 IN PROGRESS / READY TO START
+const PRIORITY_1_COMPONENTS = [
+  {
+    name: "bookings.jsx",
+    status: "🟡 READY TO START",
+    task: "Migrate to use bookingsAPI service",
+    location: "Modules/Visitors_Hostel/bookings.jsx",
+    targetLocation: "Modules/Visitors_Hostel/pages/BookingsPage.jsx (NEW)",
+    requirements: [
+      "Remove axios imports and hardcoded URLs",
+      "Import { bookingsAPI } from ../services/visitorHostelApi",
+      "Use useSelector for Redux user role",
+      "Add loading/error/filter states",
+      "Replace POST /get-booking-requests/ with GET /api/bookings/pending/",
+      "Replace POST /get-active-bookings/ with GET /api/bookings/active/",
+      "Implement role-based tab filtering (pending/active/completed)",
+      "Test with VhIncharge (see all) and Student (see own)",
+    ],
+    estimate: "45 minutes",
+    apiMethods: ["getPendingBookings()", "getActiveBookings()", "confirmBooking()", "rejectBooking()"],
+  },
+  {
+    name: "bookingForm.jsx",
+    status: "🟡 READY TO START",
+    task: "Migrate form to use bookingsAPI.requestBooking()",
+    location: "Modules/Visitors_Hostel/bookingForm.jsx",
+    targetLocation: "Modules/Visitors_Hostel/components/forms/BookingRequestForm.jsx (NEW)",
+    requirements: [
+      "Remove axios post to /visitorhostel/request-booking/",
+      "Use bookingsAPI.requestBooking({ intender, category, dates, ... })",
+      "Move file upload handling (if any) to be compatible with multipart requests",
+      "Add form validation via utils/validators.js",
+      "Add success/error notifications",
+      "Test form submission and file upload",
+    ],
+    estimate: "30 minutes",
+    apiMethods: ["requestBooking()"],
+  },
+  {
+    name: "roomsAvailability.jsx",
+    status: "🟡 READY TO START",
+    task: "Migrate to use roomsAPI service",
+    location: "Modules/Visitors_Hostel/roomsAvailability.jsx",
+    targetLocation: "Modules/Visitors_Hostel/pages/RoomAvailabilityPage.jsx (NEW)",
+    requirements: [
+      "Remove POST to /visitorhostel/room_availabity_new/",
+      "Use roomsAPI.getAvailableRooms(startDate, endDate)",
+      "Add date range picker component",
+      "Add loading state during room fetch",
+      "Display available room numbers in table/grid",
+      "Add room filtering by category",
+    ],
+    estimate: "35 minutes",
+    apiMethods: ["getAvailableRooms()"],
+  },
+  {
+    name: "inventory.jsx",
+    status: "🟡 READY TO START",
+    task: "Migrate to use inventoryAPI service",
+    location: "Modules/Visitors_Hostel/inventory.jsx",
+    targetLocation: "Modules/Visitors_Hostel/pages/InventoryPage.jsx (NEW)",
+    requirements: [
+      "Remove POST to /visitorhostel/api/inventory_add/",
+      "Use inventoryAPI.addInventory() and updateInventory()",
+      "Add form for adding items (ItemForm.jsx)",
+      "Add table for displaying inventory (InventoryTable.jsx)",
+      "Add role check: VhIncharge only",
+      "Test add/update operations",
+    ],
+    estimate: "40 minutes",
+    apiMethods: ["addInventory()", "updateInventory()"],
+  },
+  {
+    name: "accountStatements.jsx",
+    status: "🟡 READY TO START",
+    task: "Migrate to use reportsAPI service",
+    location: "Modules/Visitors_Hostel/accountStatements.jsx",
+    targetLocation: "Modules/Visitors_Hostel/pages/BillsPage.jsx (NEW)",
+    requirements: [
+      "Remove GET to /visitorhostel/accounts-income/",
+      "Use reportsAPI.getBillsBetweenDates(startDate, endDate)",
+      "Add date range filter",
+      "Display bill totals (meal_total, room_total, total)",
+      "Add table for bill records",
+      "Add generate bill button: reportsAPI.generateBill()",
+      "Role check: VhIncharge only",
+    ],
+    estimate: "40 minutes",
+    apiMethods: ["getBillsBetweenDates()", "generateBill()"],
+  },
+];
+
+/**
+ * PRIORITY 2: CHECK-IN/OUT & FORMS
+ * Support components for role-specific operations
+ */
+const PRIORITY_2_COMPONENTS = [
+  {
+    name: "CheckoutForm.jsx",
+    task: "Migrate to use bookingsAPI.checkOut()",
+    requirements: [
+      "Import { bookingsAPI } from ../services/visitorHostelApi",
+      "Replace POST to /check-out/ with checkOut(bookingId, mealBill, roomBill)",
+      "Add validation for meal/room bill amounts",
+      "Test with VhCaretaker role",
+    ],
+    estimate: "20 minutes",
+  },
+  {
+    name: "check-in logic (in existing components)",
+    task: "Refactor check-in to use bookingsAPI.checkIn()",
+    requirements: [
+      "Find check-in form/handler (may be in bookingForm.jsx or separate)",
+      "Replace POST to /check-in/ with checkIn(bookingId, name, phone, ...)",
+      "Create CheckInForm.jsx component",
+    ],
+    estimate: "25 minutes",
+  },
+  {
+    name: "confirmBooking_Incharge.jsx",
+    task: "Migrate to use bookingsAPI.confirmBooking()",
+    requirements: [
+      "Replace POST to /confirm-booking-new/ with confirmBooking(bookingId, category, rooms)",
+      "Add room selector component (RoomSelector.jsx)",
+      "Add category dropdown",
+      "Test confirmation flow",
+    ],
+    estimate: "30 minutes",
+  },
+  {
+    name: "forwardBooking.jsx",
+    task: "Migrate to use bookingsAPI.forwardBooking()",
+    requirements: [
+      "Replace POST to /forward-booking/ with forwardBooking(bookingId, category, rooms, remark)",
+      "Add room selector for new rooms",
+      "Add remark field",
+    ],
+    estimate: "20 minutes",
+  },
+];
+
+/**
+ * PRIORITY 3: SUPPORTING COMPONENTS
+ * Shared UI components for consistent UX
+ */
+const PRIORITY_3_COMPONENTS = [
+  {
+    name: "RoleBasedAccess.jsx",
+    task: "Create role access wrapper component",
+    location: "Modules/Visitors_Hostel/components/common/RoleBasedAccess.jsx (NEW)",
+    requirements: [
+      "Wrap content based on user role",
+      "Usage: <RoleBasedAccess allowedRoles={['VhIncharge', 'VhCaretaker']}> content </RoleBasedAccess>",
+      "Show message if user doesn't have access",
+    ],
+    estimate: "15 minutes",
+  },
+  {
+    name: "DateRangePicker.jsx",
+    task: "Create reusable date range picker",
+    location: "Modules/Visitors_Hostel/components/common/DateRangePicker.jsx (NEW)",
+    requirements: [
+      "Accept onDateChange callback",
+      "Validate end_date > start_date",
+      "Use Mantine or native input",
+    ],
+    estimate: "20 minutes",
+  },
+  {
+    name: "RoomSelector.jsx",
+    task: "Create room selection component",
+    location: "Modules/Visitors_Hostel/components/common/RoomSelector.jsx (NEW)",
+    requirements: [
+      "Display available rooms as checkboxes/tags",
+      "Accept onChange callback",
+      "Show room count",
+    ],
+    estimate: "15 minutes",
+  },
+  {
+    name: "ErrorBoundary.jsx",
+    task: "Create error boundary for graceful failures",
+    location: "Modules/Visitors_Hostel/components/common/ErrorBoundary.jsx (NEW)",
+    requirements: [
+      "Catch errors in child components",
+      "Display user-friendly error message",
+      "Add retry button",
+    ],
+    estimate: "20 minutes",
+  },
+];
+
+/**
+ * PRIORITY 4: UTILITIES & STYLES
+ * Supporting files for consistency
+ */
+const PRIORITY_4_FILES = [
+  {
+    name: "validators.js",
+    task: "Create validation utilities",
+    location: "Modules/Visitors_Hostel/utils/validators.js (NEW)",
+    functions: [
+      "validateDateRange(startDate, endDate)",
+      "validatePhoneNumber(phone)",
+      "validateEmail(email)",
+      "validateRoomCount(numberOfRooms, maxRooms)",
+      "validateBookingDates(fromDate, toDate, minDays)",
+    ],
+    estimate: "25 minutes",
+  },
+  {
+    name: "formatters.js",
+    task: "Create formatting utilities",
+    location: "Modules/Visitors_Hostel/utils/formatters.js (NEW)",
+    functions: [
+      "formatDate(date) → YYYY-MM-DD",
+      "formatCurrency(amount) → Rs. X,XXX",
+      "formatPhone(phone) → +91-XXXX-XXXXX",
+      "formatStatus(status) → Title Case",
+    ],
+    estimate: "15 minutes",
+  },
+  {
+    name: "constants.js",
+    task: "Centralize all constants",
+    location: "Modules/Visitors_Hostel/utils/constants.js (NEW)",
+    constants: [
+      "ROOM_CATEGORIES: { 'RP': 'Regular', 'DLX': 'Deluxe' }",
+      "BOOKING_STATUSES: ['pending', 'confirmed', 'active', 'completed', 'cancelled']",
+      "USER_ROLES: ['VhIncharge', 'VhCaretaker', 'Student', 'Intender']",
+      "MEAL_TYPES: ['m_tea', 'breakfast', 'lunch', 'eve_tea', 'dinner']",
+      "MEAL_RATES: { ... }",
+    ],
+    estimate: "15 minutes",
+  },
+  {
+    name: "CSS Modules",
+    task: "Create modularized CSS files",
+    location: "Modules/Visitors_Hostel/styles/",
+    files: [
+      "pages.module.css (page layouts)",
+      "forms.module.css (form styling)",
+      "tables.module.css (table styling)",
+      "common.module.css (shared components)",
+    ],
+    estimate: "30 minutes",
+  },
+];
+
+// ============================================================================
+// STAGE 4: TESTING CHECKLIST
+// ============================================================================
+
+const TESTING_PHASES = {
+  phase1_smoke_tests: {
+    name: "Phase 1: Smoke Tests (Postman/Browser)",
+    tasks: [
+      "✓ GET /api/visitorhostel/health/ → 200 OK",
+      "✓ GET /api/visitorhostel/bookings/pending/ → 200 OK (with token)",
+      "✓ GET /api/visitorhostel/bookings/active/ → 200 OK (with token)",
+      "✓ GET /api/visitorhostel/rooms/availability/?start_date=...&end_date=... → 200 OK",
+      "✓ POST /api/visitorhostel/bookings/request/ → 200 OK (valid payload)",
+      "✓ POST /api/visitorhostel/bookings/request/ → 400 (invalid payload)",
+    ],
+    estimate: "30 minutes",
+  },
+  phase2_component_tests: {
+    name: "Phase 2: Component Migration Tests",
+    tasks: [
+      "✓ BookingsPage loads pending/active bookings",
+      "✓ BookingRequestForm submits and shows success",
+      "✓ RoomAvailabilityPage fetches and displays rooms",
+      "✓ InventoryPage CRUD operations work",
+      "✓ BillsPage generates and displays reports",
+      "✓ CheckIn/Out form submissions work",
+      "✓ No console errors (check browser DevTools)",
+      "✓ Loading states appear and disappear correctly",
+      "✓ Error messages display on API failures",
+    ],
+    estimate: "1 hour",
+  },
+  phase3_e2e_workflow: {
+    name: "Phase 3: End-to-End Workflow Tests",
+    scenarios: [
+      {
+        name: "Student Booking Workflow",
+        steps: [
+          "1. Student logs in",
+          "2. Navigates to /visitors_hostel/",
+          "3. Clicks 'Request Booking'",
+          "4. Fills out booking form (dates, purpose, rooms)",
+          "5. Submits form → POST /api/bookings/request/",
+          "6. Sees success message",
+          "7. Booking appears in 'My Bookings'",
+        ],
+      },
+      {
+        name: "VhIncharge Confirmation Workflow",
+        steps: [
+          "1. VhIncharge logs in",
+          "2. Navigates to Pending Bookings tab",
+          "3. Sees student booking request",
+          "4. Clicks 'Confirm'",
+          "5. Selects room category and room numbers",
+          "6. Submits → POST /api/bookings/confirm/",
+          "7. Booking status changes to 'confirmed'",
+          "8. Student can see confirmed rooms",
+        ],
+      },
+      {
+        name: "Check-In/Out Workflow",
+        steps: [
+          "1. VhCaretaker logs in",
+          "2. Finds confirmed booking",
+          "3. Clicks 'Check In'",
+          "4. Enters visitor details (name, phone)",
+          "5. Submits → POST /api/bookings/checkin/",
+          "6. Booking status changes to 'active/checked-in'",
+          "7. Later: Click 'Check Out'",
+          "8. Enter meal/room bills",
+          "9. Submits → POST /api/bookings/checkout/",
+          "10. Bill finalized",
+        ],
+      },
+    ],
+    estimate: "1.5 hours",
+  },
+  phase4_regression: {
+    name: "Phase 4: Regression Testing",
+    tasks: [
+      "✓ All 19 API endpoints respond correctly",
+      "✓ Role-based access works (VhIncharge ≠ Student visibility)",
+      "✓ No feature loss from legacy → REST migration",
+      "✓ No broken links or routing",
+      "✓ File uploads work (if applicable)",
+      "✓ Notifications trigger on status changes",
+      "✓ Browser back/forward navigation works",
+      "✓ Token refresh on expiry (if applicable)",
+      "✓ Mobile responsiveness (if required)",
+    ],
+    estimate: "1 hour",
+  },
+};
+
+// ============================================================================
+// SUMMARY & QUICK START
+// ============================================================================
+
+const EXECUTION_SUMMARY = {
+  completed: [
+    "✅ Backend deprecation comments added (Phase 1)",
+    "✅ Services/visitorHostelApi.js created (Phase 2)",
+    "✅ Folder structure created (Phase 2)",
+    "✅ visitorsContent.jsx updated with Routes (Phase 2)",
+    "✅ Migration pattern template created (Phase 2)",
+  ],
+  remaining: [
+    "🟡 Component migrations (5 priority-1 components)",
+    "🟡 Supporting components (4 common components)",
+    "🟡 Utilities & styles (constants, validators, CSS)",
+    "🟡 Testing phases (4 phases: smoke → E2E → regression)",
+  ],
+  nextSteps: [
+    "1. START WITH: bookings.jsx → BookingsPage.jsx (45 min)",
+    "2. FOLLOW BY: bookingForm.jsx → BookingRequestForm.jsx (30 min)",
+    "3. CONTINUE: roomsAvailability, inventory, accountStatements (2-3 hrs)",
+    "4. CREATE: Common components (RoleBasedAccess, DateRangePicker, etc. - 1 hr)",
+    "5. CREATE: Utilities (validators, formatters, constants - 55 min)",
+    "6. TEST: Run full test suite (4+ hours)",
+  ],
+  totalRemaining: "6-8 hours",
+};
+
+export { COMPLETED_COMPONENTS, PRIORITY_1_COMPONENTS, PRIORITY_2_COMPONENTS, PRIORITY_3_COMPONENTS, PRIORITY_4_FILES, TESTING_PHASES, EXECUTION_SUMMARY };
diff --git a/src/Modules/Visitors_Hostel/VisitorsNavbar.jsx b/src/Modules/Visitors_Hostel/VisitorsNavbar.jsx
index 187ab79e5..38a9b9994 100644
--- a/src/Modules/Visitors_Hostel/VisitorsNavbar.jsx
+++ b/src/Modules/Visitors_Hostel/VisitorsNavbar.jsx
@@ -1,36 +1,32 @@
 import React from "react";
 import { Tabs, MantineProvider, Button } from "@mantine/core";
 import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
-import { useNavigate } from "react-router-dom";
+import { useLocation, useNavigate } from "react-router-dom";
 import { useSelector } from "react-redux";
 import CustomBreadcrumbs from "./components/BreadCrumbs"; // Import the CustomBreadcrumbs component
+import { VH_ABSOLUTE_PATHS } from "../../routes/visitorsHostelRoutes";
 
 const TabsModules = [
   {
     label: "Manage Bookings",
     id: "manage-bookings",
-    url: "/visitors_hostel",
+    url: VH_ABSOLUTE_PATHS.ROOT,
   },
   {
     label: "Room Availability",
     id: "room-availability",
-    url: "/visitors_hostel/room-availability",
+    url: VH_ABSOLUTE_PATHS.ROOM_AVAILABILITY,
   },
-  // {
-  //   label: "Mess Record",
-  //   id: "mess-record",
-  //   url: "/visitors_hostel/mess-record",
-  // },
-  { label: "Inventory", id: "inventory", url: "/visitors_hostel/inventory" },
+  { label: "Inventory", id: "inventory", url: VH_ABSOLUTE_PATHS.INVENTORY },
   {
     label: "Account Statement",
     id: "account-statement",
-    url: "/visitors_hostel/account-statement",
+    url: VH_ABSOLUTE_PATHS.ACCOUNT_STATEMENTS,
   },
   {
     label: "Rules and Regulations",
     id: "rules",
-    url: "/visitors_hostel/rules",
+    url: VH_ABSOLUTE_PATHS.GUIDELINES,
   },
 ];
 
@@ -38,27 +34,27 @@ const ManageBookingsTabs = [
   {
     label: "Bookings",
     id: "bookings",
-    url: "/visitors_hostel/",
+    url: VH_ABSOLUTE_PATHS.BOOKINGS,
   },
   {
     label: "Pending Requests",
     id: "pending-requests",
-    url: "/visitors_hostel/pending_requests",
+    url: VH_ABSOLUTE_PATHS.PENDING_BOOKINGS,
   },
   {
     label: "Cancelled Requests",
     id: "cancel-request",
-    url: "/visitors_hostel/cancel_request",
+    url: VH_ABSOLUTE_PATHS.CANCELLED_BOOKINGS,
   },
   {
     label: "Active Bookings",
     id: "active-bookings",
-    url: "/visitors_hostel/active_bookings",
+    url: VH_ABSOLUTE_PATHS.ACTIVE_BOOKINGS,
   },
   {
     label: "Completed Bookings",
     id: "completed-bookings",
-    url: "/visitors_hostel/completed_bookings",
+    url: VH_ABSOLUTE_PATHS.COMPLETED_BOOKINGS,
   },
 ];
 
@@ -66,6 +62,32 @@ export default function BookingManagement() {
   const [activeTab, setActiveTab] = React.useState("manage-bookings");
   const [activeSubTab, setActiveSubTab] = React.useState("bookings");
   const navigate = useNavigate();
+  const location = useLocation();
+
+  React.useEffect(() => {
+    const path = location.pathname;
+
+    if (
+      path.includes(VH_ABSOLUTE_PATHS.ROOM_AVAILABILITY) ||
+      path.includes(VH_ABSOLUTE_PATHS.INVENTORY) ||
+      path.includes(VH_ABSOLUTE_PATHS.ACCOUNT_STATEMENTS) ||
+      path.includes(VH_ABSOLUTE_PATHS.GUIDELINES)
+    ) {
+      if (path.includes(VH_ABSOLUTE_PATHS.ROOM_AVAILABILITY)) setActiveTab("room-availability");
+      else if (path.includes(VH_ABSOLUTE_PATHS.INVENTORY)) setActiveTab("inventory");
+      else if (path.includes(VH_ABSOLUTE_PATHS.ACCOUNT_STATEMENTS)) setActiveTab("account-statement");
+      else if (path.includes(VH_ABSOLUTE_PATHS.GUIDELINES)) setActiveTab("rules");
+      return;
+    }
+
+    setActiveTab("manage-bookings");
+
+    if (path.includes(VH_ABSOLUTE_PATHS.PENDING_BOOKINGS)) setActiveSubTab("pending-requests");
+    else if (path.includes(VH_ABSOLUTE_PATHS.CANCELLED_BOOKINGS)) setActiveSubTab("cancel-request");
+    else if (path.includes(VH_ABSOLUTE_PATHS.ACTIVE_BOOKINGS)) setActiveSubTab("active-bookings");
+    else if (path.includes(VH_ABSOLUTE_PATHS.COMPLETED_BOOKINGS)) setActiveSubTab("completed-bookings");
+    else setActiveSubTab("bookings");
+  }, [location.pathname]);
 
   const handleTabChange = (tabId) => {
     const tab = TabsModules.find((t) => t.id === tabId);
@@ -84,20 +106,36 @@ export default function BookingManagement() {
   };
 
   const role = useSelector((state) => state.user.role);
+  const currentAccessibleModules = useSelector(
+    (state) => state.user.currentAccessibleModules
+  );
+  const isIncharge = role === "VhIncharge";
+  const isCaretaker = role === "VhCaretaker";
+  
+  // Check if user has access to visitor_hostel module
+  const hasVHAccess = currentAccessibleModules?.visitor_hostel === true;
 
   const filteredTabs = TabsModules.filter((tab) => {
-    if (role === "VhCaretaker" || role === "VhIncharge") {
+    // VhIncharge has full module access.
+    if (isIncharge) {
       return true;
     }
-    return ["manage-bookings", "booking-form", "rules"].includes(tab.id);
+    // VhCaretaker cannot access financial reports.
+    if (isCaretaker) {
+      return tab.id !== "account-statement";
+    }
+    // Other users see tabs only if they have visitor_hostel module access
+    if (hasVHAccess) {
+      return ["manage-bookings", "booking-form", "rules"].includes(tab.id);
+    }
+    // If no access, show nothing
+    return false;
   });
 
-  const activeTabLabel = filteredTabs.find(
-    (tab) => tab.id === activeTab,
-  )?.label;
-  const activeSubTabLabel = ManageBookingsTabs.find(
-    (tab) => tab.id === activeSubTab,
-  )?.label;
+  const activeTabLabel =
+    TabsModules.find((tab) => tab.id === activeTab)?.label || "Manage Bookings";
+  const activeSubTabLabel =
+    ManageBookingsTabs.find((tab) => tab.id === activeSubTab)?.label || "Bookings";
 
   const activeTabIndex = filteredTabs.findIndex((tab) => tab.id === activeTab);
   const activeSubTabIndex = ManageBookingsTabs.findIndex(
@@ -136,14 +174,14 @@ export default function BookingManagement() {
     <MantineProvider withGlobalStyles withNormalizeCSS>
       <CustomBreadcrumbs
         activeTab={activeTabLabel}
-        subTab={activeSubTabLabel}
+        subTab={activeTab === "manage-bookings" ? activeSubTabLabel : ""}
       />
       <div className="booking-management">
         {/* Main Tab Navigation */}
         <div className="tabs-navigation">
           <Button
             variant="subtle"
-            compact
+            size="xs"
             onClick={handlePreviousTab}
             disabled={activeTabIndex === 0}
             className="toggle-button"
@@ -151,7 +189,7 @@ export default function BookingManagement() {
             <IconChevronLeft size={18} />
           </Button>
           <div className="tabs-scrollable-container">
-            <Tabs value={activeTab} onTabChange={handleTabChange}>
+            <Tabs value={activeTab} onChange={handleTabChange}>
               <Tabs.List className="responsive-tabs">
                 {filteredTabs.map((tab) => (
                   <Tabs.Tab
@@ -174,7 +212,7 @@ export default function BookingManagement() {
           </div>
           <Button
             variant="subtle"
-            compact
+            size="xs"
             onClick={handleNextTab}
             disabled={activeTabIndex === filteredTabs.length - 1}
             className="toggle-button"
@@ -188,7 +226,7 @@ export default function BookingManagement() {
             <div className="tabs-navigation">
               <Button
                 variant="subtle"
-                compact
+                size="xs"
                 onClick={handlePreviousSubTab}
                 disabled={activeSubTabIndex === 0}
                 className="toggle-button"
@@ -196,9 +234,16 @@ export default function BookingManagement() {
                 <IconChevronLeft size={18} />
               </Button>
               <div className="tabs-scrollable-container">
-                <Tabs value={activeSubTab} onTabChange={handleSubTabChange}>
+                <Tabs value={activeSubTab} onChange={handleSubTabChange}>
                   <Tabs.List className="responsive-tabs">
-                    {ManageBookingsTabs.map((tab) => (
+                    {ManageBookingsTabs.filter((tab) => {
+                      // Pending Requests only for VhIncharge/VhCaretaker
+                      if (tab.id === "pending-requests") {
+                        return role === "VhIncharge" || role === "VhCaretaker";
+                      }
+                      // All other tabs visible to everyone
+                      return true;
+                    }).map((tab) => (
                       <Tabs.Tab
                         key={tab.id}
                         value={tab.id}
@@ -220,7 +265,7 @@ export default function BookingManagement() {
               </div>
               <Button
                 variant="subtle"
-                compact
+                size="xs"
                 onClick={handleNextSubTab}
                 disabled={activeSubTabIndex === ManageBookingsTabs.length - 1}
                 className="toggle-button"
diff --git a/src/Modules/Visitors_Hostel/accountStatements.jsx b/src/Modules/Visitors_Hostel/accountStatements.jsx
deleted file mode 100644
index 0603a4da2..000000000
--- a/src/Modules/Visitors_Hostel/accountStatements.jsx
+++ /dev/null
@@ -1,580 +0,0 @@
-import React, { useState, useEffect } from "react";
-import axios from "axios";
-import {
-  Box,
-  Table,
-  MantineProvider,
-  Tabs,
-  Text,
-  Select,
-  Button,
-} from "@mantine/core";
-// eslint-disable-next-line import/no-unresolved
-import * as XLSX from "xlsx";
-import { fetchIncomeDataRoute } from "../../routes/visitorsHostelRoutes";
-import { host } from "../../routes/globalRoutes";
-
-// Tabs data
-const TabsModules = [
-  { label: "All Transactions", id: "all-transactions" },
-  { label: "Expenditure", id: "expenditure" },
-  { label: "Income", id: "income" },
-];
-
-function FinancialManagement() {
-  const [activeTab, setActiveTab] = useState("expenditure"); // Set default tab
-  const [expenditureData, setExpenditureData] = useState([]);
-  const [incomeData, setIncomeData] = useState([]);
-  const [allTransactionsData, setAllTransactionsData] = useState([]); // State for all transactions
-  const [loadingExpenditure, setLoadingExpenditure] = useState(true);
-  const [loadingIncome, setLoadingIncome] = useState(true);
-  const [loadingAllTransactions, setLoadingAllTransactions] = useState(true); // Loading state for all transactions
-  const [error, setError] = useState(null);
-  const [totalBalance, setTotalBalance] = useState(0);
-  const [selectedMonth, setSelectedMonth] = useState(() => {
-    const currentDate = new Date();
-    const currentMonthYear = `${currentDate.getMonth() + 1}-${currentDate.getFullYear()}`;
-    return currentMonthYear;
-  }); // Default to "All"
-
-  const handleTabChange = (tabId) => {
-    setActiveTab(tabId);
-  };
-
-  // Fetch expenditure data from API
-  useEffect(() => {
-    const fetchExpenditureData = async () => {
-      const token = localStorage.getItem("authToken");
-      if (!token) {
-        setError("No authentication token found. Please log in.");
-        setLoadingExpenditure(false);
-        return;
-      }
-
-      try {
-        const response = await axios.get(`${host}/visitorhostel/inventory`, {
-          headers: {
-            Authorization: `Token ${token}`,
-            "Content-Type": "application/json",
-          },
-        });
-        console.log(response.data);
-        setExpenditureData(response.data);
-        setLoadingExpenditure(false);
-      } catch (err) {
-        setError("Failed to fetch expenditure data.");
-        setLoadingExpenditure(false);
-      }
-    };
-
-    fetchExpenditureData();
-  }, []);
-
-  // Fetch income data from API
-  useEffect(() => {
-    const fetchIncomeData = async () => {
-      const token = localStorage.getItem("authToken");
-      if (!token) {
-        setError("No authentication token found. Please log in.");
-        setLoadingIncome(false);
-        return;
-      }
-
-      try {
-        const response = await axios.get(fetchIncomeDataRoute, {
-          headers: {
-            Authorization: `Token ${token}`,
-            "Content-Type": "application/json",
-          },
-        });
-
-        setIncomeData(response.data);
-        setLoadingIncome(false);
-      } catch (err) {
-        setError("Failed to fetch income data.");
-        setLoadingIncome(false);
-      }
-    };
-
-    fetchIncomeData();
-  }, []);
-
-  // Combine expenditure and income data for All Transactions tab
-  useEffect(() => {
-    const combineData = () => {
-      const combinedData = [
-        ...expenditureData.map((item) => ({
-          heads: `Spent on ${item.item_name}`,
-          bill: item.id, // Assuming quantity is the amount
-          amount: item.quantity * item.total_usable, // Adjust if necessary
-          bill_date: item.bill_date, // Assuming bill_date is available
-        })),
-        ...incomeData.map((item) => ({
-          heads: `Booking from ${item.intender_name}`,
-          bill: item.bill_id, // Assuming total_bill is the amount
-          amount: item.total_bill, // Adjust if necessary
-          bill_date: item.bill_date, // Assuming bill_date is available
-        })),
-      ];
-      setAllTransactionsData(combinedData);
-      console.log("UserUser User: ", combinedData);
-      const total = combinedData.reduce((sum, item) => {
-        if (item.heads.includes("Spent")) {
-          return sum - item.amount;
-        }
-        return sum + item.amount;
-      }, 0);
-
-      console.log("Total: ", total);
-      setTotalBalance(total);
-      setLoadingAllTransactions(false);
-    };
-
-    if (!loadingExpenditure && !loadingIncome) {
-      combineData();
-    }
-  }, [expenditureData, incomeData, loadingExpenditure, loadingIncome]);
-
-  // Group data by month and year
-  const groupByMonth = (data) => {
-    return data.reduce((acc, item) => {
-      const monthYear = `${new Date(item.bill_date).getMonth() + 1}-${new Date(item.bill_date).getFullYear()}`;
-      if (!acc[monthYear]) {
-        acc[monthYear] = [];
-      }
-      acc[monthYear].push(item);
-      return acc;
-    }, {});
-  };
-
-  // Render "All Transactions" table
-  const renderAllTransactionsTable = (data) => {
-    return (
-      <Table
-        style={{
-          borderRadius: "8px",
-          overflow: "hidden",
-          border: "1px solid #E0E0E0",
-          marginTop: "20px",
-        }}
-      >
-        <thead>
-          <tr>
-            <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-              Heads
-            </th>
-            <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-              Bill ID
-            </th>
-            <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-              Amount
-            </th>
-            <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-              Bill Date
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          {data
-            .filter((item) => item.bill !== null)
-            .map((item, index) => (
-              <tr
-                key={index}
-                style={{
-                  backgroundColor: index % 2 === 0 ? "#ffffff" : "#F5F7F8", // Alternating row colors
-                }}
-              >
-                <td
-                  style={{
-                    padding: "12px",
-                    textAlign: "center",
-                    borderBottom: "1px solid #E0E0E0",
-                  }}
-                >
-                  {item.heads}
-                </td>
-                <td
-                  style={{
-                    padding: "12px",
-                    textAlign: "center",
-                    borderBottom: "1px solid #E0E0E0",
-                  }}
-                >
-                  {item.bill}
-                </td>
-                <td
-                  style={{
-                    padding: "12px",
-                    textAlign: "center",
-                    borderBottom: "1px solid #E0E0E0",
-                  }}
-                >
-                  {item.heads.includes("Spent")
-                    ? `-${item.amount}`
-                    : item.amount}
-                </td>
-                <td
-                  style={{
-                    padding: "12px",
-                    textAlign: "center",
-                    borderBottom: "1px solid #E0E0E0",
-                  }}
-                >
-                  {item.bill_date}
-                </td>
-              </tr>
-            ))}
-        </tbody>
-      </Table>
-    );
-  };
-
-  // Render "Income" table
-  const renderIncomeTable = (data) => {
-    const sortedData = data.sort(
-      (a, b) => new Date(a.bill_date) - new Date(b.bill_date),
-    );
-    const groupedData = groupByMonth(sortedData);
-
-    const handleMonthChange = (value) => {
-      setSelectedMonth(value);
-    };
-
-    const monthOptions = [
-      { value: "All", label: "All" },
-      ...Object.keys(groupedData).map((monthYear) => ({
-        value: monthYear,
-        label: monthYear,
-      })),
-    ];
-
-    const exportToExcel = () => {
-      const dataToExport =
-        selectedMonth === "All" ? data : groupedData[selectedMonth];
-      const worksheet = XLSX.utils.json_to_sheet(dataToExport);
-      const workbook = XLSX.utils.book_new();
-      XLSX.utils.book_append_sheet(workbook, worksheet, "Income Data");
-      XLSX.writeFile(workbook, `Income_Data_${selectedMonth}.xlsx`);
-    };
-
-    // Calculate total income for the selected month
-    // const totalIncomeForSelectedMonth =
-    //   selectedMonth === "All"
-    //     ? data.reduce((sum, item) => sum + item.total_bill, 0)
-    //     : groupedData[selectedMonth].reduce(
-    //         (sum, item) => sum + item.total_bill,
-    //         0,
-    //       );
-    let totalIncomeForSelectedMonth = 0;
-
-    try {
-      if (selectedMonth === "All") {
-        totalIncomeForSelectedMonth = data.reduce(
-          (sum, item) => sum + item.total_bill,
-          0,
-        );
-      } else if (groupedData[selectedMonth]) {
-        totalIncomeForSelectedMonth = groupedData[selectedMonth].reduce(
-          (sum, item) => sum + item.total_bill,
-          0,
-        );
-      } else {
-        totalIncomeForSelectedMonth = 0; // Default to 0 if no data for the selected month
-      }
-    } catch (err) {
-      console.error(
-        "Error calculating total income for the selected month:",
-        err,
-      );
-    }
-
-    return (
-      <Box>
-        <Box
-          style={{
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-            marginBottom: "10px",
-            marginTop: "10px",
-          }}
-        >
-          <Box sx={{ flexGrow: 1 }}>
-            <Select
-              placeholder="Select Month"
-              data={monthOptions}
-              value={selectedMonth}
-              onChange={handleMonthChange}
-              size="xs" // Smaller size for a more professional look
-              style={{ maxWidth: "150px" }} // Control the width
-            />
-          </Box>
-          <Box>
-            <Button onClick={exportToExcel} size="xs">
-              Export to Excel
-            </Button>
-          </Box>
-        </Box>
-
-        <Text
-          style={{
-            textAlign: "right", // Aligns the text to the right
-            marginRight: "10px", // Adds some space from the right edge
-            fontWeight: "bold", // Makes the text bold
-            fontSize: "18px", // Adjust the font size as needed
-            color: "#333", // Customize the color if necessary
-            paddingTop: "10px",
-          }}
-        >
-          Total Income: ₹{totalIncomeForSelectedMonth}
-        </Text>
-
-        {selectedMonth &&
-        (selectedMonth === "All" || groupedData[selectedMonth]) ? (
-          <Table
-            style={{
-              borderRadius: "8px",
-              overflow: "hidden",
-              border: "1px solid #E0E0E0",
-              marginTop: "20px",
-            }}
-          >
-            <thead>
-              <tr>
-                <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-                  Intender
-                </th>
-                <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-                  Booking From
-                </th>
-                <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-                  Booking To
-                </th>
-                <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-                  Total Bill
-                </th>
-                <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-                  Bill ID
-                </th>
-                <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-                  Bill Date
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {(selectedMonth === "All"
-                ? sortedData
-                : groupedData[selectedMonth]
-              ).map((item, index) => (
-                <tr
-                  key={item.bill_id}
-                  style={{
-                    backgroundColor: index % 2 === 0 ? "#ffffff" : "#f5f7f8", // Alternating row colors
-                  }}
-                >
-                  <td
-                    style={{
-                      padding: "12px",
-                      borderBottom: "1px solid #E0E0E0",
-                      textAlign: "center",
-                    }}
-                  >
-                    <Text weight={500}>{item.intender_name}</Text>
-                  </td>
-                  <td
-                    style={{
-                      padding: "12px",
-                      borderBottom: "1px solid #E0E0E0",
-                      textAlign: "center",
-                    }}
-                  >
-                    {item.booking_from}
-                  </td>
-                  <td
-                    style={{
-                      padding: "12px",
-                      borderBottom: "1px solid #E0E0E0",
-                      textAlign: "center",
-                    }}
-                  >
-                    {item.booking_to}
-                  </td>
-                  <td
-                    style={{
-                      padding: "12px",
-                      borderBottom: "1px solid #E0E0E0",
-                      textAlign: "center",
-                    }}
-                  >
-                    {item.total_bill}
-                  </td>
-                  <td
-                    style={{
-                      padding: "12px",
-                      borderBottom: "1px solid #E0E0E0",
-                      textAlign: "center",
-                    }}
-                  >
-                    {item.bill_id}
-                  </td>
-                  <td
-                    style={{
-                      padding: "12px",
-                      borderBottom: "1px solid #E0E0E0",
-                      textAlign: "center",
-                    }}
-                  >
-                    {item.bill_date}
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </Table>
-        ) : (
-          <Text>Select a month to view data</Text>
-        )}
-      </Box>
-    );
-  };
-
-  // Render "Expenditure" table
-  const renderExpenditureTable = (data) => {
-    return (
-      <Table
-        style={{
-          borderRadius: "8px",
-          overflow: "hidden",
-          border: "1px solid #E0E0E0",
-          marginTop: "20px",
-        }}
-      >
-        <thead>
-          <tr>
-            <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-              Item Name
-            </th>
-            <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-              Bill ID
-            </th>
-            <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-              Amount
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          {data.map((item, index) => (
-            <tr
-              key={item.id}
-              style={{
-                backgroundColor: index % 2 === 0 ? "#ffffff" : "#F5F7F8", // Alternating row colors
-              }}
-            >
-              <td
-                style={{
-                  padding: "12px",
-                  borderBottom: "1px solid #E0E0E0",
-                  textAlign: "center",
-                }}
-              >
-                <Text weight={500}>{item.item_name}</Text>
-              </td>
-              <td
-                style={{
-                  padding: "12px",
-                  borderBottom: "1px solid #E0E0E0",
-                  textAlign: "center",
-                }}
-              >
-                {item.id} {/* Assuming 'id' is used as Bill ID */}
-              </td>
-              <td
-                style={{
-                  padding: "12px",
-                  borderBottom: "1px solid #E0E0E0",
-                  textAlign: "center",
-                }}
-              >
-                {item.quantity * item.total_usable}{" "}
-                {/* Assuming 'quantity' is the amount */}
-                {console.log("Item :", item)}
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </Table>
-    );
-  };
-
-  return (
-    <MantineProvider withGlobalStyles withNormalizeCSS>
-      <Box
-        style={{
-          maxWidth: "1200px",
-          margin: "0 auto",
-          backgroundColor: "white",
-          borderRadius: "12px",
-          padding: "16px",
-          boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
-        }}
-      >
-        <Tabs value={activeTab}>
-          <Tabs.List>
-            {TabsModules.map((tab) => (
-              <Tabs.Tab
-                key={tab.id}
-                value={tab.id}
-                onClick={() => handleTabChange(tab.id)}
-              >
-                {tab.label}
-              </Tabs.Tab>
-            ))}
-          </Tabs.List>
-
-          <Tabs.Panel value="all-transactions">
-            <Text
-              style={{
-                textAlign: "right", // Aligns the text to the right
-                marginRight: "10px", // Adds some space from the right edge
-                fontWeight: "bold", // Makes the text bold
-                fontSize: "18px", // Adjust the font size as needed
-                color: "#333", // Customize the color if necessary
-                paddingTop: "10px",
-              }}
-            >
-              Current Balance: ₹{totalBalance}
-            </Text>
-            {loadingAllTransactions ? (
-              <Text>Loading all transactions data...</Text>
-            ) : error ? (
-              <Text color="red">{error}</Text>
-            ) : (
-              renderAllTransactionsTable(allTransactionsData)
-            )}
-          </Tabs.Panel>
-
-          <Tabs.Panel value="expenditure">
-            {loadingExpenditure ? (
-              <Text>Loading expenditure data...</Text>
-            ) : error ? (
-              <Text color="red">{error}</Text>
-            ) : (
-              renderExpenditureTable(expenditureData)
-            )}
-          </Tabs.Panel>
-
-          <Tabs.Panel value="income">
-            {loadingIncome ? (
-              <Text>Loading income data...</Text>
-            ) : error ? (
-              <Text color="red">{error}</Text>
-            ) : (
-              renderIncomeTable(incomeData)
-            )}
-          </Tabs.Panel>
-        </Tabs>
-      </Box>
-    </MantineProvider>
-  );
-}
-
-export default FinancialManagement;
diff --git a/src/Modules/Visitors_Hostel/activeBookings.jsx b/src/Modules/Visitors_Hostel/activeBookings.jsx
index 6803db160..0191f710e 100644
--- a/src/Modules/Visitors_Hostel/activeBookings.jsx
+++ b/src/Modules/Visitors_Hostel/activeBookings.jsx
@@ -265,12 +265,8 @@ import {
   TextInput,
   Select,
 } from "@mantine/core";
-import axios from "axios";
 import { FaEye } from "react-icons/fa"; // Import the eye icon
-import {
-  cancelBookingRoute,
-  getActiveBookingsRoute,
-} from "../../routes/visitorsHostelRoutes";
+import { bookingsAPI } from "./services/visitorHostelApi";
 import ViewBooking from "./viewActiveBooking"; // Import the new ViewActiveBooking component
 
 function BookingTable({ activeBooking }) {
@@ -299,7 +295,6 @@ function BookingTable({ activeBooking }) {
     })
     .sort((a, b) => new Date(b.bookingFrom) - new Date(a.bookingFrom));
 
-  console.log("Sorted Bookings from Active Booking", sortedBookings);
   return (
     <Box p="md" style={{ margin: 10 }}>
       <Box
@@ -474,16 +469,9 @@ function ActiveBookings() {
 
   useEffect(() => {
     const fetchActiveBookings = async () => {
-      const token = localStorage.getItem("authToken");
-      if (!token) {
-        return console.error("No authentication token found!");
-      }
-
       try {
-        const { data } = await axios.get(getActiveBookingsRoute, {
-          headers: { Authorization: `Token ${token}` },
-        });
-        setActiveBooking(data.active_bookings);
+        const activeBookingsData = await bookingsAPI.getActiveBookings();
+        setActiveBooking(activeBookingsData || []);
       } catch (error) {
         console.error("Error fetching active bookings:", error);
       }
@@ -493,17 +481,8 @@ function ActiveBookings() {
   }, []);
 
   const handleCancel = async (id) => {
-    const token = localStorage.getItem("authToken");
-    if (!token) {
-      return console.error("No authentication token found!");
-    }
-
     try {
-      await axios.post(
-        cancelBookingRoute,
-        { booking_id: id },
-        { headers: { Authorization: `Token ${token}` } },
-      );
+      await bookingsAPI.cancelBooking(id);
       setActiveBooking((prev) => prev.filter((booking) => booking.id !== id));
     } catch (error) {
       console.error("Error canceling booking:", error);
diff --git a/src/Modules/Visitors_Hostel/addItems.jsx b/src/Modules/Visitors_Hostel/addItems.jsx
deleted file mode 100644
index a373ef322..000000000
--- a/src/Modules/Visitors_Hostel/addItems.jsx
+++ /dev/null
@@ -1,175 +0,0 @@
-import React, { useState } from "react";
-import {
-  Select,
-  TextInput,
-  Button,
-  Switch,
-  Group,
-  Modal,
-  MantineProvider,
-} from "@mantine/core";
-import { addInventoryRoute } from "../../routes/visitorsHostelRoutes";
-
-function AddItems() {
-  const [billId, setBillId] = useState("");
-  const [itemName, setItemName] = useState("");
-  const [quantity, setQuantity] = useState("");
-  const [cost, setCost] = useState("");
-  const [consumable, setConsumable] = useState(false);
-  const [modalOpened, setModalOpened] = useState(false);
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-
-    const token = localStorage.getItem("authToken");
-
-    const data = {
-      item_name: itemName,
-      bill_number: billId,
-      quantity: parseInt(quantity, 10),
-      cost: parseInt(cost, 10),
-      consumable,
-    };
-
-    try {
-      const response = await fetch(addInventoryRoute, {
-        method: "POST",
-        headers: {
-          Authorization: `Token ${token}`,
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(data),
-      });
-
-      if (response.ok) {
-        const responseData = await response.json();
-        console.log("Item added successfully:", responseData);
-        setModalOpened(false);
-      } else {
-        const errorData = await response.json();
-        console.error("Failed to add item:", errorData);
-      }
-    } catch (error) {
-      console.error("An error occurred:", error);
-    }
-  };
-
-  return (
-    <MantineProvider withGlobalStyles withNormalizeCSS>
-      <div style={{ padding: "20px", maxWidth: "800px", margin: "0 auto" }}>
-        <Button
-          onClick={() => setModalOpened(true)}
-          size="md"
-          variant="gradient"
-          gradient={{ from: "indigo", to: "cyan" }}
-        >
-          Add Item
-        </Button>
-      </div>
-      <Modal
-        opened={modalOpened}
-        onClose={() => setModalOpened(false)}
-        title="Add Item"
-        size="lg"
-        centered
-        overlayOpacity={0.5}
-        overlayBlur={2}
-        styles={{
-          header: { fontSize: "20px", fontWeight: 600 },
-          body: { padding: "20px" },
-        }}
-      >
-        <form
-          onSubmit={handleSubmit}
-          style={{
-            gap: "20px",
-            display: "flex",
-            flexDirection: "column",
-            padding: "20px", // Added padding here
-          }}
-        >
-          <TextInput
-            id="itemName"
-            label="Item Name*"
-            placeholder="Enter item name"
-            value={itemName}
-            onChange={(e) => setItemName(e.target.value)}
-            required
-          />
-          <Select
-            label="Bill ID*"
-            id="billId"
-            value={billId}
-            onChange={setBillId}
-            placeholder="Select Bill ID"
-            data={[
-              { value: "1", label: "1" },
-              { value: "2", label: "2" },
-              { value: "3", label: "3" },
-            ]}
-            required
-          />
-          <div
-            style={{
-              display: "grid",
-              gridTemplateColumns: "1fr 1fr",
-              gap: "20px",
-            }}
-          >
-            <TextInput
-              id="quantity"
-              label="Quantity*"
-              placeholder="Enter quantity"
-              value={quantity}
-              onChange={(e) => setQuantity(e.target.value)}
-              required
-            />
-            <TextInput
-              id="cost"
-              label="Cost*"
-              placeholder="Enter cost"
-              value={cost}
-              onChange={(e) => setCost(e.target.value)}
-              required
-            />
-          </div>
-          <Group
-            position="apart"
-            mt="md"
-            align="center"
-            style={{
-              marginTop: "20px",
-              padding: "10px 0",
-              borderTop: "1px solid #e9ecef",
-            }}
-          >
-            <span style={{ fontSize: "16px", fontWeight: "500" }}>
-              Consumable
-            </span>
-            <Switch
-              id="consumable"
-              checked={consumable}
-              onChange={(e) => setConsumable(e.currentTarget.checked)}
-              color="teal"
-            />
-          </Group>
-          <Button
-            type="submit"
-            size="md"
-            fullWidth
-            variant="gradient"
-            gradient={{ from: "indigo", to: "cyan" }}
-            style={{
-              marginTop: "20px",
-              padding: "12px 0",
-            }}
-          >
-            Submit
-          </Button>
-        </form>
-      </Modal>
-    </MantineProvider>
-  );
-}
-
-export default AddItems;
diff --git a/src/Modules/Visitors_Hostel/bookingForm.jsx b/src/Modules/Visitors_Hostel/bookingForm.jsx
deleted file mode 100644
index d9e7ec936..000000000
--- a/src/Modules/Visitors_Hostel/bookingForm.jsx
+++ /dev/null
@@ -1,473 +0,0 @@
-import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
-import {
-  MantineProvider,
-  TextInput,
-  Select,
-  NumberInput,
-  Button,
-  Textarea,
-  Group,
-  Grid,
-  Modal,
-  Text,
-  Box,
-} from "@mantine/core";
-import axios from "axios";
-import { useSelector } from "react-redux";
-import { useForm } from "@mantine/form";
-import { showNotification } from "@mantine/notifications";
-import { requestBookingRoute } from "../../routes/visitorsHostelRoutes";
-import { countries } from "./data/countries";
-
-function CombinedBookingForm({ modalOpened, onClose }) {
-  const form = useForm({
-    initialValues: {
-      intender: "",
-      arrivalDate: "",
-      arrivalHour: "",
-      arrivalMinutes: "",
-      arrivalAMPM: "",
-      departureDate: "",
-      departureHour: "",
-      departureMinutes: "",
-      departureAMPM: "",
-      numberOfPeople: 1,
-      numberOfRooms: 1,
-      category: "",
-      purpose: "",
-      remarks: "",
-      billsBy: "",
-      visitor_name: "",
-      visitor_email: "",
-      visitor_phone: "",
-      visitor_organization: "",
-      visitor_address: "",
-      nationality: "",
-    },
-  });
-
-  // Function to get today's date in yyyy-mm-dd format
-  const getTodayDate = () => {
-    const today = new Date();
-    const year = today.getFullYear();
-    const month = String(today.getMonth() + 1).padStart(2, "0");
-    const day = String(today.getDate()).padStart(2, "0");
-    return `${year}-${month}-${day}`;
-  };
-
-  function getCookie(name) {
-    let cookieValue = null;
-    if (document.cookie && document.cookie !== "") {
-      const cookies = document.cookie.split(";");
-      for (let i = 0; i < cookies.length; i += 1) {
-        const cookie = cookies[i].trim();
-        if (cookie.substring(0, name.length + 1) === `${name}=`) {
-          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-          break;
-        }
-      }
-    }
-    return cookieValue;
-  }
-
-  const csrfToken = getCookie("csrftoken");
-  console.log("CSRF TOKEN:  ", csrfToken);
-
-  const handleSubmit = async (values) => {
-    const token = localStorage.getItem("authToken");
-    console.log(" Token : ", token);
-
-    const emailRegex =
-      /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9-]+\.[a-zA-Z]{2,}(?:\.[a-zA-Z]{2,})?$/;
-
-    if (!emailRegex.test(values.visitor_email)) {
-      form.setFieldError("visitor_email", "Invalid email format");
-
-      // Show notification for invalid email
-      showNotification({
-        title: "Invalid Email",
-        message: "Please enter a valid email address.",
-        color: "red",
-      });
-
-      return; // Stop form submission
-    }
-
-    const requestData = {
-      intender: values.intender,
-      category: values.category,
-      booking_from: values.arrivalDate,
-      booking_to: values.departureDate,
-      "number-of-people": values.numberOfPeople.toString(),
-      "purpose-of-visit": values.purpose,
-      "number-of-rooms": values.numberOfRooms.toString(),
-      booking_from_time: `${values.arrivalHour}:${values.arrivalMinutes} ${values.arrivalAMPM}`,
-      booking_to_time: `${values.departureHour}:${values.departureMinutes} ${values.departureAMPM}`,
-      remarks_during_booking_request: values.remarks,
-      bill_settlement: values.billsBy,
-      visitor_name: values.visitor_name,
-      visitor_phone: values.visitor_phone,
-      visitor_email: values.visitor_email,
-      visitor_address: values.visitor_address,
-      nationality: values.nationality,
-      visitor_organization: values.visitor_organization,
-      csrfmiddlewaretoken: csrfToken,
-    };
-
-    try {
-      const response = await axios.post(requestBookingRoute, requestData, {
-        headers: {
-          Authorization: `Token ${token}`,
-          "X-CSRFToken": csrfToken,
-          "Content-Type": "application/json",
-        },
-      });
-      console.log("Form submitted", response.data);
-      onClose(); // Close the modal on successful submission
-      window.location.reload(); // Reload the page
-    } catch (error) {
-      console.error("Error submitting form", error);
-    }
-  };
-
-  const username = useSelector((state) => state);
-  console.log("IntenderID: ", username);
-  const role = useSelector((state) => state.user.role);
-
-  const [todayDate, setTodayDate] = useState(getTodayDate());
-
-  useEffect(() => {
-    setTodayDate(getTodayDate());
-  }, []);
-
-  return (
-    <MantineProvider theme={{ fontFamily: "Arial, sans-serif" }}>
-      <Modal
-        opened={modalOpened}
-        onClose={onClose}
-        size="xl"
-        styles={{
-          content: {
-            paddingLeft: "32px",
-            paddingRight: "32px",
-          },
-        }}
-        title={
-          <Box
-            style={{
-              display: "flex",
-              justifyContent: "center",
-              alignItems: "center",
-              width: "100%", // Ensure it spans the full width of the modal
-            }}
-          >
-            <Text
-              style={{
-                textAlign: "center", // Center-align the text
-                fontWeight: "bold", // Make the text bold
-                color: "#228be6", // Blue color
-                fontSize: "20px", // Adjust size as needed
-                width: "100%", //
-              }}
-            >
-              Place a Booking Request
-            </Text>
-          </Box>
-        }
-      >
-        <form onSubmit={form.onSubmit(handleSubmit)}>
-          <Grid>
-            {/* {username} */}
-            {/* Conditionally render Intender ID field */}
-            {role !== "student" &&
-              role !== "Professor" &&
-              role !== "VhCaretaker" &&
-              role !== "VhIncharge" && (
-                <Grid.Col span={12}>
-                  <TextInput
-                    label="Intender"
-                    placeholder="Intender ID"
-                    value={form.values.intender}
-                    onChange={(event) =>
-                      form.setFieldValue("intender", event.currentTarget.value)
-                    }
-                    required
-                  />
-                </Grid.Col>
-              )}
-            <Grid.Col span={12}>
-              <TextInput
-                label="Name"
-                placeholder="Visitor's Name"
-                value={form.values.visitor_name}
-                onChange={(event) =>
-                  form.setFieldValue("visitor_name", event.currentTarget.value)
-                }
-                required
-              />
-            </Grid.Col>
-
-            {/* Arrival Details */}
-            <Grid.Col span={12}>
-              <TextInput
-                label="Arrival Date"
-                placeholder="From"
-                type="date"
-                value={form.values.arrivalDate || ""}
-                onChange={(event) => {
-                  form.setFieldValue("arrivalDate", event.currentTarget.value);
-                }}
-                required
-                min={todayDate} // Ensures that the arrival date can't be in the past (yyyy-mm-dd format)
-              />
-            </Grid.Col>
-
-            <Grid.Col span={6}>
-              <NumberInput
-                label="Arrival Hour"
-                placeholder="12"
-                value={form.values.arrivalHour}
-                onChange={(value) => form.setFieldValue("arrivalHour", value)}
-                min={1}
-                max={12}
-                required
-              />
-            </Grid.Col>
-            <Grid.Col span={6}>
-              <NumberInput
-                label="Arrival Minutes"
-                placeholder="59"
-                value={form.values.arrivalMinutes}
-                onChange={(value) =>
-                  form.setFieldValue("arrivalMinutes", value)
-                }
-                min={0}
-                max={59}
-                required
-              />
-            </Grid.Col>
-            <Grid.Col span={6}>
-              <Select
-                label="AM/PM"
-                placeholder="AM"
-                value={form.values.arrivalAMPM}
-                onChange={(value) => form.setFieldValue("arrivalAMPM", value)}
-                data={["AM", "PM"]}
-                required
-              />
-            </Grid.Col>
-
-            {/* Departure Details */}
-            <Grid.Col span={12}>
-              <TextInput
-                label="Departure Date"
-                placeholder="To"
-                type="date"
-                value={form.values.departureDate || ""}
-                onChange={(event) => {
-                  form.setFieldValue(
-                    "departureDate",
-                    event.currentTarget.value,
-                  );
-                }}
-                required
-                min={form.values.arrivalDate || todayDate} // Ensures departure date is after arrival date
-              />
-            </Grid.Col>
-
-            <Grid.Col span={6}>
-              <NumberInput
-                label="Departure Hour"
-                placeholder="12"
-                value={form.values.departureHour}
-                onChange={(value) => form.setFieldValue("departureHour", value)}
-                min={1}
-                max={12}
-                required
-              />
-            </Grid.Col>
-            <Grid.Col span={6}>
-              <NumberInput
-                label="Departure Minutes"
-                placeholder="59"
-                value={form.values.departureMinutes}
-                onChange={(value) =>
-                  form.setFieldValue("departureMinutes", value)
-                }
-                min={0}
-                max={59}
-                required
-              />
-            </Grid.Col>
-            <Grid.Col span={6}>
-              <Select
-                label="AM/PM"
-                placeholder="AM"
-                value={form.values.departureAMPM}
-                onChange={(value) => form.setFieldValue("departureAMPM", value)}
-                data={["AM", "PM"]}
-                required
-              />
-            </Grid.Col>
-
-            {/* Number of People and Rooms */}
-            <Grid.Col span={6}>
-              <NumberInput
-                label="Number of People"
-                value={form.values.numberOfPeople}
-                onChange={(value) =>
-                  form.setFieldValue("numberOfPeople", value)
-                }
-                min={1}
-                required
-              />
-            </Grid.Col>
-            <Grid.Col span={6}>
-              <NumberInput
-                label="Number of Rooms"
-                value={form.values.numberOfRooms}
-                onChange={(value) => form.setFieldValue("numberOfRooms", value)}
-                min={1}
-                required
-              />
-            </Grid.Col>
-
-            {/* Category, Purpose, Remarks, Bills By */}
-            <Grid.Col span={6}>
-              <Select
-                label="Category"
-                placeholder="A"
-                value={form.values.category}
-                onChange={(value) => form.setFieldValue("category", value)}
-                data={["A", "B", "C", "D"]}
-                required
-              />
-            </Grid.Col>
-            <Grid.Col span={6}>
-              <TextInput
-                label="Purpose"
-                placeholder="Purpose"
-                value={form.values.purpose}
-                onChange={(event) =>
-                  form.setFieldValue("purpose", event.currentTarget.value)
-                }
-                required
-              />
-            </Grid.Col>
-            <Grid.Col span={6}>
-              <Textarea
-                label="Remarks"
-                placeholder="Remarks"
-                value={form.values.remarks}
-                onChange={(event) =>
-                  form.setFieldValue("remarks", event.currentTarget.value)
-                }
-              />
-            </Grid.Col>
-            <Grid.Col span={6}>
-              <Select
-                label="Bills To Be Paid By"
-                placeholder="Visitor"
-                value={form.values.billsBy}
-                onChange={(value) => form.setFieldValue("billsBy", value)}
-                data={[
-                  "Visitor",
-                  "Intender",
-                  "Institute / No Charges",
-                  "Project No.",
-                ]}
-                required
-              />
-            </Grid.Col>
-
-            {/* Visitor Details Form */}
-            <Grid.Col span={6}>
-              <TextInput
-                label="Email"
-                placeholder="Visitor's Email: abc@gmail.com"
-                value={form.values.visitor_email}
-                onChange={(event) => {
-                  const email = event.currentTarget.value;
-                  form.setFieldValue("visitor_email", email);
-
-                  const emailRegex =
-                    /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9-]+\.[a-zA-Z]{2,}(?:\.[a-zA-Z]{2,})?$/;
-
-                  if (email.trim() === "" || !emailRegex.test(email)) {
-                    form.setFieldError("visitor_email", "Invalid email format");
-                  } else {
-                    form.clearFieldError("visitor_email");
-                  }
-                }}
-                error={form.errors.visitor_email || undefined}
-                required
-              />
-            </Grid.Col>
-            <Grid.Col span={6}>
-              <TextInput
-                label="Phone No."
-                placeholder="0987654321"
-                value={form.values.visitor_phone}
-                onChange={(event) =>
-                  form.setFieldValue("visitor_phone", event.currentTarget.value)
-                }
-                required
-              />
-            </Grid.Col>
-            <Grid.Col span={6}>
-              <TextInput
-                label="Organisation"
-                placeholder="IIITDMJ"
-                value={form.values.visitor_organization}
-                onChange={(event) =>
-                  form.setFieldValue(
-                    "visitor_organization",
-                    event.currentTarget.value,
-                  )
-                }
-                required
-              />
-            </Grid.Col>
-            <Grid.Col span={6}>
-              <TextInput
-                label="Address"
-                placeholder="Visitor's Address"
-                value={form.values.visitor_address}
-                onChange={(event) =>
-                  form.setFieldValue(
-                    "visitor_address",
-                    event.currentTarget.value,
-                  )
-                }
-                required
-              />
-            </Grid.Col>
-            <Grid.Col span={6}>
-              <Select
-                label="Nationality"
-                placeholder="Select your nationality"
-                value={form.values.nationality}
-                onChange={(value) => form.setFieldValue("nationality", value)}
-                data={countries}
-                required
-                searchable
-                nothingFound="No countries found"
-              />
-            </Grid.Col>
-          </Grid>
-          <Group position="right" mt="md">
-            <Button type="submit">Submit Booking Request</Button>
-          </Group>
-        </form>
-      </Modal>
-    </MantineProvider>
-  );
-}
-
-CombinedBookingForm.propTypes = {
-  modalOpened: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-};
-
-export default CombinedBookingForm;
diff --git a/src/Modules/Visitors_Hostel/bookings.jsx b/src/Modules/Visitors_Hostel/bookings.jsx
deleted file mode 100644
index 18b4575d1..000000000
--- a/src/Modules/Visitors_Hostel/bookings.jsx
+++ /dev/null
@@ -1,389 +0,0 @@
-import React, { useState, useEffect } from "react";
-import axios from "axios";
-import {
-  MantineProvider,
-  Table,
-  Button,
-  Badge,
-  Text,
-  Box,
-  TextInput,
-  Select, // Add TextInput import
-} from "@mantine/core";
-import PropTypes from "prop-types";
-import { useSelector } from "react-redux";
-// eslint-disable-next-line import/no-unresolved
-import { FaEye } from "react-icons/fa"; // Import the eye icon
-import CombinedBookingForm from "./bookingForm";
-import ViewBooking from "./viewBooking"; // Import the new ViewBooking component
-import { fetchBookingsRoute } from "../../routes/visitorsHostelRoutes";
-
-function BookingsRequestTable({ bookings }) {
-  const [modalOpened, setModalOpened] = useState(false); // State to control modal
-  // const [forwardModalOpened, setForwardModalOpened] = useState(null); // State to control forward modal for each booking
-  const [viewModalOpened, setViewModalOpened] = useState(null); // State to control view modal for each booking
-  const [searchTerm, setSearchTerm] = useState(""); // State to store the search term
-
-  // const handleForwardButtonClick = (bookingId) => {
-  //   setForwardModalOpened(bookingId); // Open modal for the specific booking
-  // };
-
-  // const handleForwardCloseModal = () => {
-  //   setForwardModalOpened(null); // Close modal
-  //   onBookingForward(); // Call the fetch function to refresh bookings when closing the modal
-  // };
-
-  const handleButtonClick = () => {
-    setModalOpened(true); // Open modal when "Place Request" is clicked
-  };
-
-  const handleCloseModal = () => {
-    setModalOpened(false); // Close modal
-  };
-
-  const handleViewBooking = (bookingId) => {
-    setViewModalOpened(bookingId); // Open modal for the specific booking
-  };
-
-  const handleViewCloseModal = () => {
-    setViewModalOpened(null); // Close modal
-  };
-  const [sortBy, setSortBy] = useState("bookingFrom"); // Default sorting by "Booking From"
-  const role = useSelector((state) => state.user.role);
-
-  // Filter bookings based on role and status
-  const filteredBookings = bookings.filter(() => {
-    if (role === "VhIncharge") {
-      return true;
-    }
-    if (role === "VhCaretaker") {
-      return true;
-    }
-    return true;
-  });
-
-  // Filter bookings based on search term
-  const searchedBookings = filteredBookings.filter((booking) => {
-    return (
-      booking.intender.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      booking.status.toLowerCase().includes(searchTerm.toLowerCase())
-    );
-  });
-
-  // Sort bookings by "booking from" date in descending order
-  const sortedBookings = searchedBookings.sort((a, b) => {
-    if (sortBy === "bookingFrom") {
-      return new Date(b.bookingFrom) - new Date(a.bookingFrom);
-    }
-    if (sortBy === "bookingTo") {
-      return new Date(b.bookingTo) - new Date(a.bookingTo);
-    }
-    return 0;
-  });
-
-  return (
-    <Box p="md" style={{ margin: 10 }}>
-      <Box
-        mb="md"
-        style={{
-          display: "flex",
-          justifyContent: "center", // Centers the content horizontally
-          alignItems: "center", // Centers the content vertically
-          width: "100%", // Ensures the Box takes full width
-          gap: "1rem", // Adds space between the text and button
-        }}
-      >
-        <Box
-          style={{ display: "flex", justifyContent: "center", width: "80%" }}
-        >
-          <Text
-            style={{
-              paddingBottom: 15,
-              fontWeight: "bold",
-              fontSize: "24px",
-              color: "#228be6",
-            }}
-          >
-            Booking Requests
-          </Text>
-        </Box>
-
-        <Button variant="outline" color="red" onClick={handleButtonClick}>
-          Place Request
-        </Button>
-      </Box>
-
-      <Box
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-          marginBottom: "1rem",
-        }}
-      >
-        <TextInput
-          placeholder="Search by Intender or Booking Status"
-          value={searchTerm}
-          onChange={(event) => setSearchTerm(event.currentTarget.value)}
-          style={{ flex: 1, marginRight: "1rem" }} // Adjust spacing
-        />
-
-        <Select
-          placeholder="Sort by"
-          value={sortBy}
-          onChange={(value) => setSortBy(value)}
-          data={[
-            { value: "bookingFrom", label: "Booking From" },
-            { value: "bookingTo", label: "Booking To" },
-          ]}
-          style={{ flex: 1 }} // Adjust spacing
-        />
-      </Box>
-
-      {modalOpened && (
-        <CombinedBookingForm
-          modalOpened={modalOpened}
-          onClose={handleCloseModal}
-        />
-      )}
-      <Box style={{ overflowX: "auto", maxWidth: "100%" }}>
-        <Table
-          style={{
-            borderRadius: "8px",
-            border: "1px solid #E0E0E0",
-            minWidth: "600px", // Adjust this value based on your table's minimum width
-          }}
-        >
-          <thead>
-            <tr>
-              <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-                Intender
-              </th>
-              <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-                Booking From
-              </th>
-              <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-                Booking To
-              </th>
-              <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-                Category
-              </th>
-              {role === "VhIncharge" && (
-                <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-                  Modified Category
-                </th>
-              )}
-              <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-                Status
-              </th>
-              <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-                Actions
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {sortedBookings.map((booking, index) => (
-              <tr
-                key={booking.id}
-                style={{
-                  backgroundColor: index % 2 === 0 ? "#ffffff" : "#F5F7F8", // Alternating row colors
-                }}
-              >
-                <td
-                  style={{
-                    padding: "12px",
-                    borderBottom: "1px solid #E0E0E0",
-                    textAlign: "center",
-                  }}
-                >
-                  <Text weight={500}>{booking.intender}</Text>
-                  <Text size="sm" color="dimmed">
-                    {booking.email}
-                  </Text>
-                </td>
-                <td
-                  style={{
-                    padding: "12px",
-                    borderBottom: "1px solid #E0E0E0",
-                    textAlign: "center",
-                  }}
-                >
-                  {booking.bookingFrom}
-                </td>
-                <td
-                  style={{
-                    padding: "12px",
-                    borderBottom: "1px solid #E0E0E0",
-                    textAlign: "center",
-                  }}
-                >
-                  {booking.bookingTo}
-                </td>
-                <td
-                  style={{
-                    padding: "12px",
-                    borderBottom: "1px solid #E0E0E0",
-                    textAlign: "center",
-                  }}
-                >
-                  {booking.category || booking.modifiedCategory}
-                  {/* {console.log("BOOKING: ", booking)} */}
-                </td>
-                {role === "VhIncharge" ? (
-                  <td
-                    style={{
-                      padding: "12px",
-                      borderBottom: "1px solid #E0E0E0",
-                      textAlign: "center",
-                    }}
-                  >
-                    {booking.modifiedCategory}
-                  </td>
-                ) : null}
-                <td
-                  style={{
-                    padding: "12px",
-                    borderBottom: "1px solid #E0E0E0",
-                    textAlign: "center",
-                  }}
-                >
-                  <Badge
-                    color={
-                      booking.status === "Pending"
-                        ? "gray"
-                        : booking.status === "Confirmed" ||
-                            booking.status === "Complete"
-                          ? "green"
-                          : "red"
-                    }
-                    variant="light"
-                    style={{
-                      backgroundColor:
-                        booking.status === "Pending"
-                          ? "#E0E0E0"
-                          : booking.status === "Confirmed" ||
-                              booking.status === "Complete"
-                            ? "#dffbe0"
-                            : "#f8d7da",
-                      color:
-                        booking.status === "Pending"
-                          ? "#757575"
-                          : booking.status === "Confirmed" ||
-                              booking.status === "Complete"
-                            ? "#84b28c"
-                            : "#721c24",
-                      padding: "4px 8px",
-                      borderRadius: "4px",
-                    }}
-                  >
-                    {booking.status}
-                  </Badge>
-                  {/* )
-                  } */}
-                </td>
-                <td
-                  style={{
-                    padding: "12px",
-                    borderBottom: "1px solid #E0E0E0",
-                    textAlign: "center",
-                  }}
-                >
-                  <Button
-                    variant="outline"
-                    color="blue"
-                    onClick={() => handleViewBooking(booking.id)}
-                  >
-                    <FaEye />
-                  </Button>
-                  {viewModalOpened === booking.id && (
-                    <ViewBooking
-                      modalOpened={viewModalOpened === booking.id}
-                      onClose={handleViewCloseModal}
-                      bookingId={booking.id}
-                      bookingf={booking}
-                    />
-                  )}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </Table>
-      </Box>
-    </Box>
-  );
-}
-
-// Define prop types for BookingsRequestTable
-BookingsRequestTable.propTypes = {
-  bookings: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.number.isRequired,
-      intender: PropTypes.string.isRequired,
-      email: PropTypes.string.isRequired,
-      bookingFrom: PropTypes.string.isRequired,
-      bookingTo: PropTypes.string.isRequired,
-      category: PropTypes.string.isRequired,
-      status: PropTypes.string.isRequired,
-    }),
-  ).isRequired,
-  // onBookingForward: PropTypes.func.isRequired, // Add this line for validation
-};
-
-function Bookings() {
-  const [bookings, setBookings] = useState([]);
-
-  const fetchBookings = async () => {
-    const token = localStorage.getItem("authToken");
-    if (!token) {
-      return console.error("No authentication token found!");
-    }
-
-    try {
-      const { data } = await axios.get(fetchBookingsRoute, {
-        headers: { Authorization: `Token ${token}` },
-      });
-      setBookings(data.pending_bookings);
-    } catch (error) {
-      console.error("Error fetching booking requests:", error);
-    }
-  };
-
-  // Use useEffect to fetch bookings on mount
-  useEffect(() => {
-    fetchBookings();
-  }, []);
-
-  return (
-    <MantineProvider
-      withGlobalStyles
-      withNormalizeCSS
-      theme={{
-        globalStyles: () => ({
-          "@media (max-width: 768px)": {
-            ".mantine-Table-root": {
-              fontSize: "14px",
-            },
-          },
-        }),
-      }}
-    >
-      <Box
-        style={{
-          maxWidth: "1200px",
-          margin: "0 auto",
-          backgroundColor: "white",
-          borderRadius: "12px",
-          padding: "16px",
-          boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
-        }}
-      >
-        <BookingsRequestTable
-          bookings={bookings}
-          onBookingForward={fetchBookings} // Pass the fetch function as a prop
-        />
-      </Box>
-    </MantineProvider>
-  );
-}
-
-export default Bookings;
diff --git a/src/Modules/Visitors_Hostel/cancellationRequest.jsx b/src/Modules/Visitors_Hostel/cancellationRequest.jsx
deleted file mode 100644
index 19c3b772c..000000000
--- a/src/Modules/Visitors_Hostel/cancellationRequest.jsx
+++ /dev/null
@@ -1,215 +0,0 @@
-import React, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
-import { MantineProvider, Table, Badge, Text, Box } from "@mantine/core";
-import axios from "axios";
-import { fetchCancelledBookingsRoute } from "../../routes/visitorsHostelRoutes";
-
-function CancellationRequestTable({ bookings }) {
-  const sortedBookings = bookings.sort(
-    (a, b) => new Date(b.bookingFrom) - new Date(a.bookingFrom),
-  );
-
-  return (
-    <Box p="md" style={{ margin: 10 }}>
-      <Box
-        mb="md"
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-        }}
-      >
-        <Box
-          style={{ display: "flex", justifyContent: "center", width: "100%" }}
-        >
-          <Text
-            style={{
-              paddingBottom: 15,
-              fontWeight: "bold",
-              fontSize: "24px",
-              color: "#228be6",
-            }}
-          >
-            Cancelled Requests
-          </Text>
-        </Box>
-      </Box>
-
-      <Box style={{ overflowX: "auto", maxWidth: "100%" }}>
-        <Table
-          style={{
-            borderRadius: "8px",
-            border: "1px solid #E0E0E0",
-            minWidth: "800px",
-          }}
-        >
-          <thead>
-            <tr>
-              <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-                Intender
-              </th>
-              <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-                Booking From
-              </th>
-              <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-                Booking To
-              </th>
-              <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-                Category
-              </th>
-              <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-                Status
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {sortedBookings.map((booking, index) => (
-              <tr
-                key={booking.id}
-                style={{
-                  backgroundColor: index % 2 === 0 ? "#ffffff" : "#F5F7F8",
-                }}
-              >
-                <td
-                  style={{
-                    padding: "12px",
-                    borderBottom: "1px solid #E0E0E0",
-                    textAlign: "center",
-                  }}
-                >
-                  <Text weight={500}>{booking.intender}</Text>
-                  <Text size="sm" color="dimmed">
-                    {booking.email}
-                  </Text>
-                </td>
-                <td
-                  style={{
-                    padding: "12px",
-                    borderBottom: "1px solid #E0E0E0",
-                    textAlign: "center",
-                  }}
-                >
-                  {booking.bookingFrom}
-                </td>
-                <td
-                  style={{
-                    padding: "12px",
-                    borderBottom: "1px solid #E0E0E0",
-                    textAlign: "center",
-                  }}
-                >
-                  {booking.bookingTo}
-                </td>
-                <td
-                  style={{
-                    padding: "12px",
-                    borderBottom: "1px solid #E0E0E0",
-                    textAlign: "center",
-                  }}
-                >
-                  {booking.category}
-                </td>
-                <td
-                  style={{
-                    padding: "12px",
-                    borderBottom: "1px solid #E0E0E0",
-                    textAlign: "center",
-                  }}
-                >
-                  <Badge
-                    color={booking.status === "Pending" ? "gray" : "pink"}
-                    variant="light"
-                    style={{
-                      backgroundColor:
-                        booking.status === "Pending" ? "#E0E0E0" : "#FFE0E0",
-                      color:
-                        booking.status === "Pending" ? "#757575" : "#FF6B6B",
-                      padding: "4px 8px",
-                      borderRadius: "4px",
-                    }}
-                  >
-                    {booking.status}
-                  </Badge>
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </Table>
-      </Box>
-    </Box>
-  );
-}
-
-CancellationRequestTable.propTypes = {
-  bookings: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.number.isRequired,
-      intender: PropTypes.string.isRequired,
-      email: PropTypes.string.isRequired,
-      bookingFrom: PropTypes.string.isRequired,
-      bookingTo: PropTypes.string.isRequired,
-      category: PropTypes.string.isRequired,
-      modifiedCategory: PropTypes.string.isRequired,
-      status: PropTypes.string.isRequired,
-    }),
-  ).isRequired,
-};
-
-function CancellationRequest() {
-  const [bookings, setBookings] = useState([]);
-
-  useEffect(() => {
-    const fetchCancelledBookings = async () => {
-      const token = localStorage.getItem("authToken");
-      if (!token) {
-        return console.error("No authentication token found!");
-      }
-
-      try {
-        const { data } = await axios.get(fetchCancelledBookingsRoute, {
-          headers: { Authorization: `Token ${token}` },
-        });
-        console.log("Cancelled Bookings: ", data.cancelled_bookings);
-        setBookings(data.cancelled_bookings);
-      } catch (error) {
-        console.error("Error fetching cancelled bookings:", error);
-      }
-    };
-
-    fetchCancelledBookings();
-  }, []);
-
-  return (
-    <MantineProvider
-      withGlobalStyles
-      withNormalizeCSS
-      theme={{
-        globalStyles: () => ({
-          ".mantine-Table-root": {
-            overflowX: "auto",
-          },
-          "@media (max-width: 768px)": {
-            ".mantine-Table-root": {
-              fontSize: "14px",
-            },
-          },
-        }),
-      }}
-    >
-      <Box
-        style={{
-          maxWidth: "1200px",
-          margin: "0 auto",
-          backgroundColor: "white",
-          borderRadius: "12px",
-          padding: "16px",
-          boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
-        }}
-      >
-        <CancellationRequestTable bookings={bookings} />
-      </Box>
-    </MantineProvider>
-  );
-}
-
-export default CancellationRequest;
diff --git a/src/Modules/Visitors_Hostel/completedBookings.jsx b/src/Modules/Visitors_Hostel/completedBookings.jsx
deleted file mode 100644
index c0d2c5c41..000000000
--- a/src/Modules/Visitors_Hostel/completedBookings.jsx
+++ /dev/null
@@ -1,201 +0,0 @@
-import React, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
-import { MantineProvider, Table, Text, Box } from "@mantine/core";
-import axios from "axios";
-import { fetchCompletedBookingsRoute } from "../../routes/visitorsHostelRoutes";
-
-function BookingTable({ bookings }) {
-  console.log("Bookings Table", bookings);
-  const sortedBookings = bookings.sort(
-    (a, b) => new Date(b.checkIn) - new Date(a.checkIn),
-  );
-
-  return (
-    <Box p="md" style={{ margin: 10 }}>
-      <Box
-        mb="md"
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-        }}
-      >
-        <Box
-          style={{ display: "flex", justifyContent: "center", width: "100%" }}
-        >
-          <Text
-            style={{
-              paddingBottom: 15,
-              fontWeight: "bold",
-              fontSize: "24px",
-              color: "#228be6",
-            }}
-          >
-            Completed Bookings
-          </Text>
-        </Box>
-      </Box>
-      <Box style={{ overflowX: "auto", maxWidth: "100%" }}>
-        <Table
-          style={{
-            borderRadius: "8px",
-            border: "1px solid #E0E0E0",
-            minWidth: "800px", // Adjust this value based on your table's minimum width
-          }}
-        >
-          <thead>
-            <tr>
-              <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-                Intender
-              </th>
-              <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-                Booking Date
-              </th>
-              <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-                Check In
-              </th>
-              <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-                Check Out
-              </th>
-              <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-                Category
-              </th>
-            </tr>
-          </thead>
-          <tbody>
-            {sortedBookings.map((booking, index) => (
-              <tr
-                key={booking.id}
-                style={{
-                  backgroundColor: index % 2 === 0 ? "#ffffff" : "#F5F7F8",
-                }}
-              >
-                <td
-                  style={{
-                    padding: "12px",
-                    borderBottom: "1px solid #E0E0E0",
-                    textAlign: "center",
-                  }}
-                >
-                  <Text weight={500}>{booking.intender}</Text>
-                  <Text size="sm" color="dimmed">
-                    {booking.intender}
-                  </Text>
-                </td>
-                <td
-                  style={{
-                    padding: "12px",
-                    borderBottom: "1px solid #E0E0E0",
-                    textAlign: "center",
-                  }}
-                >
-                  {booking.bookingDate}
-                </td>
-                <td
-                  style={{
-                    padding: "12px",
-                    borderBottom: "1px solid #E0E0E0",
-                    textAlign: "center",
-                  }}
-                >
-                  {booking.checkIn}
-                </td>
-                <td
-                  style={{
-                    padding: "12px",
-                    borderBottom: "1px solid #E0E0E0",
-                    textAlign: "center",
-                  }}
-                >
-                  {booking.checkOut}
-                </td>
-                <td
-                  style={{
-                    padding: "12px",
-                    borderBottom: "1px solid #E0E0E0",
-                    textAlign: "center",
-                  }}
-                >
-                  {booking.modifiedVisitorCategory}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </Table>
-      </Box>
-    </Box>
-  );
-}
-
-BookingTable.propTypes = {
-  bookings: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.number.isRequired,
-      intender: PropTypes.string.isRequired,
-      bookingDate: PropTypes.string.isRequired,
-      checkIn: PropTypes.string.isRequired,
-      checkOut: PropTypes.string.isRequired,
-      category: PropTypes.string.isRequired,
-      modifiedVisitorCategory: PropTypes.string.isRequired,
-    }),
-  ).isRequired,
-};
-
-function CompletedBookingsPage() {
-  const [bookings, setBookings] = useState([]);
-
-  useEffect(() => {
-    const fetchCompletedBookings = async () => {
-      const token = localStorage.getItem("authToken");
-      if (!token) {
-        return console.error("No authentication token found!");
-      }
-
-      try {
-        const { data } = await axios.get(fetchCompletedBookingsRoute, {
-          headers: { Authorization: `Token ${token}` },
-        });
-        console.log("Completed Bookings: ", data.completed_bookings);
-        setBookings(data.completed_bookings);
-      } catch (error) {
-        console.error("Error fetching completed bookings:", error);
-      }
-    };
-
-    fetchCompletedBookings();
-  }, []);
-
-  return (
-    <MantineProvider
-      withGlobalStyles
-      withNormalizeCSS
-      theme={{
-        globalStyles: () => ({
-          ".mantine-Table-root": {
-            overflowX: "auto",
-          },
-          "@media (max-width: 768px)": {
-            ".mantine-Table-root": {
-              fontSize: "14px",
-            },
-          },
-        }),
-      }}
-    >
-      <Box
-        style={{
-          maxWidth: "1200px",
-          margin: "0 auto",
-          backgroundColor: "white",
-          borderRadius: "12px",
-          padding: "16px",
-          boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
-        }}
-      >
-        <BookingTable bookings={bookings} />
-      </Box>
-    </MantineProvider>
-  );
-}
-
-export default CompletedBookingsPage;
diff --git a/src/Modules/Visitors_Hostel/components/InventoryManagement.jsx b/src/Modules/Visitors_Hostel/components/InventoryManagement.jsx
new file mode 100644
index 000000000..e428e0bbc
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/components/InventoryManagement.jsx
@@ -0,0 +1,58 @@
+/**
+ * InventoryManagement
+ * UC-VH-011: Main inventory management component with tabs
+ * Combines InventoryTable and ReplenishmentRequestsTable
+ */
+
+import React, { useState } from "react";
+import { Tabs, Box, Badge, Alert } from "@mantine/core";
+import { useSelector } from "react-redux";
+import InventoryTable from "./tables/InventoryTable";
+import ReplenishmentRequestsTable from "./tables/ReplenishmentRequestsTable";
+
+function InventoryManagement() {
+  const [activeTab, setActiveTab] = useState("inventory");
+  const role = useSelector((state) => state.user?.role);
+  const isIncharge = role === "VhIncharge";
+  const isStaff = role === "VhIncharge" || role === "VhCaretaker";
+
+  if (!isStaff) {
+    return (
+      <Box p="md">
+        <Alert color="orange">
+          Access denied. Only VhIncharge and VhCaretaker can access inventory management.
+        </Alert>
+      </Box>
+    );
+  }
+
+  return (
+    <Box p="md">
+      <Tabs value={activeTab} onChange={setActiveTab}>
+        <Tabs.List>
+          <Tabs.Tab value="inventory">
+            📦 Inventory Items
+          </Tabs.Tab>
+          {isIncharge && (
+            <Tabs.Tab value="requests">
+              🛒 Replenishment Requests
+              <Badge size="xs" color="red" ml="xs">BR-VH-016</Badge>
+            </Tabs.Tab>
+          )}
+        </Tabs.List>
+
+        <Tabs.Panel value="inventory" pt="md">
+          <InventoryTable />
+        </Tabs.Panel>
+
+        {isIncharge && (
+          <Tabs.Panel value="requests" pt="md">
+            <ReplenishmentRequestsTable />
+          </Tabs.Panel>
+        )}
+      </Tabs>
+    </Box>
+  );
+}
+
+export default InventoryManagement;
\ No newline at end of file
diff --git a/src/Modules/Visitors_Hostel/components/OverstayDashboard.jsx b/src/Modules/Visitors_Hostel/components/OverstayDashboard.jsx
new file mode 100644
index 000000000..52b612ba1
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/components/OverstayDashboard.jsx
@@ -0,0 +1,166 @@
+/**
+ * OverstayDashboard
+ * BR-VH-018: Complete Overstay Management Dashboard
+ * 
+ * Integration example showing how to use all BR-VH-018 components together.
+ * This demonstrates the complete overstay detection and alert system.
+ */
+
+import React, { useState } from "react";
+import {
+  Tabs,
+  Box,
+  Badge,
+  Alert,
+  Group,
+  ActionIcon,
+  Tooltip,
+  Paper,
+} from "@mantine/core";
+import { IconAlertTriangle, IconSettings, IconEye } from "@tabler/icons-react";
+import { useSelector } from "react-redux";
+import OverstayDetectionTable from "./tables/OverstayDetectionTable";
+import OverstayMonitor from "./OverstayMonitor";
+
+function OverstayDashboard() {
+  const [activeTab, setActiveTab] = useState("monitor");
+  const [showFullTable, setShowFullTable] = useState(false);
+
+  const role = useSelector((state) => state.user?.role);
+  const isIncharge = role === "VhIncharge";
+  const isStaff = role === "VhIncharge" || role === "VhCaretaker";
+
+  if (!isStaff) {
+    return (
+      <Box p="md">
+        <Alert color="orange">
+          Access denied. Only VhIncharge and VhCaretaker can access overstay management.
+        </Alert>
+      </Box>
+    );
+  }
+
+  const viewOverstayDetails = () => {
+    setActiveTab("detection");
+    setShowFullTable(true);
+  };
+
+  return (
+    <Box p="md">
+      <Tabs value={activeTab} onChange={setActiveTab}>
+        <Tabs.List>
+          <Tabs.Tab value="monitor">
+            🔍 Overstay Monitor
+          </Tabs.Tab>
+          <Tabs.Tab value="detection">
+            ⚠️ Detection & Alerts
+            <Badge size="xs" color="red" ml="xs">BR-VH-018</Badge>
+          </Tabs.Tab>
+          {isIncharge && (
+            <Tabs.Tab value="settings">
+              ⚙️ Settings
+            </Tabs.Tab>
+          )}
+        </Tabs.List>
+
+        <Tabs.Panel value="monitor" pt="md">
+          {/* BR-VH-018 Authority Notice */}
+          <Alert color="blue" mb="md" icon={<IconAlertTriangle size={16} />}>
+            <strong>BR-VH-018:</strong> Overstay alerts MUST be generated when checkout time is exceeded. 
+            This monitor automatically checks for overstays and enables quick alert generation.
+          </Alert>
+
+          <OverstayMonitor 
+            onViewOverstays={viewOverstayDetails}
+            compact={false}
+            autoStart={true}
+          />
+
+          {/* Quick Actions Panel */}
+          <Paper withBorder p="md" mt="md">
+            <Group justify="space-between">
+              <div>
+                <strong>Quick Actions:</strong>
+              </div>
+              <Group spacing="xs">
+                <Tooltip label="View Detailed Overstay Table">
+                  <ActionIcon
+                    variant="light"
+                    color="blue"
+                    onClick={() => setActiveTab("detection")}
+                  >
+                    <IconEye size={16} />
+                  </ActionIcon>
+                </Tooltip>
+                {isIncharge && (
+                  <Tooltip label="Configure Settings">
+                    <ActionIcon
+                      variant="light"
+                      onClick={() => setActiveTab("settings")}
+                    >
+                      <IconSettings size={16} />
+                    </ActionIcon>
+                  </Tooltip>
+                )}
+              </Group>
+            </Group>
+          </Paper>
+        </Tabs.Panel>
+
+        <Tabs.Panel value="detection" pt="md">
+          <OverstayDetectionTable />
+        </Tabs.Panel>
+
+        {isIncharge && (
+          <Tabs.Panel value="settings" pt="md">
+            <Alert color="blue" mb="md">
+              <strong>BR-VH-018 Configuration:</strong> As VhIncharge, you can configure 
+              overstay detection settings and alert preferences.
+            </Alert>
+
+            <Paper withBorder p="md">
+              <div style={{ color: "#666", fontStyle: "italic" }}>
+                <strong>Overstay Detection Rules (BR-VH-018):</strong>
+                <ul style={{ margin: "10px 0", paddingLeft: "20px" }}>
+                  <li>
+                    <strong>Trigger Condition:</strong> current_time &gt; approved_checkout
+                  </li>
+                  <li>
+                    <strong>Default Checkout Time:</strong> 11:00 AM (if not specified)
+                  </li>
+                  <li>
+                    <strong>Critical Overstay:</strong> More than 1 day past checkout
+                  </li>
+                  <li>
+                    <strong>Alert Recipients:</strong> VhIncharge and VhCaretaker
+                  </li>
+                  <li>
+                    <strong>Effect:</strong> Prevents unauthorized extended stays
+                  </li>
+                </ul>
+
+                <strong>Automatic Monitoring:</strong>
+                <ul style={{ margin: "10px 0", paddingLeft: "20px" }}>
+                  <li>Real-time overstay detection based on booking checkout times</li>
+                  <li>Configurable monitoring intervals (5-60 minutes)</li>
+                  <li>Automatic alert generation for critical overstays</li>
+                  <li>Dashboard notifications and badges</li>
+                </ul>
+
+                <strong>Manual Operations:</strong>
+                <ul style={{ margin: "10px 0", paddingLeft: "20px" }}>
+                  <li>On-demand overstay checks</li>
+                  <li>Manual alert triggering for specific overstays</li>
+                  <li>Detailed overstay information viewing</li>
+                  <li>Visitor and intender contact information access</li>
+                </ul>
+              </div>
+            </Paper>
+          </Tabs.Panel>
+        )}
+      </Tabs>
+    </Box>
+  );
+}
+
+export default OverstayDashboard;
\ No newline at end of file
diff --git a/src/Modules/Visitors_Hostel/components/OverstayMonitor.jsx b/src/Modules/Visitors_Hostel/components/OverstayMonitor.jsx
new file mode 100644
index 000000000..0adc2b617
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/components/OverstayMonitor.jsx
@@ -0,0 +1,280 @@
+/**
+ * OverstayMonitor
+ * BR-VH-018: Automated Overstay Detection & Alert Component
+ * 
+ * This component provides automated monitoring for overstays and can be
+ * embedded in dashboard or as a standalone monitoring service.
+ * 
+ * Features:
+ * - Automatic periodic overstay checks
+ * - Real-time notification badges
+ * - Quick action buttons for staff
+ * - Configurable monitoring intervals
+ */
+
+import React, { useState, useEffect } from "react";
+import {
+  Badge,
+  Group,
+  ActionIcon,
+  Tooltip,
+  Alert,
+  Text,
+  Button,
+  Stack,
+  Card,
+  Indicator,
+  Switch,
+  NumberInput,
+} from "@mantine/core";
+import { 
+  IconBell, 
+  IconAlertTriangle, 
+  IconSettings,
+  IconRefresh,
+  IconClock,
+  IconEye,
+  IconBellRinging
+} from "@tabler/icons-react";
+import { useSelector } from "react-redux";
+import { bookingsAPI } from "../services/visitorHostelApi";
+
+function OverstayMonitor({ onViewOverstays, compact = false, autoStart = true }) {
+  const [overstayData, setOverstayData] = useState({ 
+    overstayCount: 0, 
+    criticalOverstays: 0,
+    lastCheck: null 
+  });
+  const [isMonitoring, setIsMonitoring] = useState(autoStart);
+  const [checkInterval, setCheckInterval] = useState(15); // minutes
+  const [loading, setLoading] = useState(false);
+  const [alertResults, setAlertResults] = useState(null);
+  const [showSettings, setShowSettings] = useState(false);
+
+  const role = useSelector((state) => state.user?.role);
+  const isStaff = role === "VhIncharge" || role === "VhCaretaker";
+
+  useEffect(() => {
+    let intervalId;
+    
+    if (isMonitoring && isStaff) {
+      // Initial check
+      checkOverstays();
+      
+      // Set up periodic monitoring
+      intervalId = setInterval(checkOverstays, checkInterval * 60 * 1000);
+    }
+
+    return () => {
+      if (intervalId) clearInterval(intervalId);
+    };
+  }, [isMonitoring, checkInterval, isStaff]);
+
+  const checkOverstays = async () => {
+    if (!isStaff) return;
+    
+    try {
+      const response = await bookingsAPI.detectOverstays();
+      if (response.success) {
+        setOverstayData({
+          overstayCount: response.overstay_count || 0,
+          criticalOverstays: response.critical_overstays || 0,
+          lastCheck: new Date().toLocaleTimeString(),
+          overstays: response.overstays || []
+        });
+      }
+    } catch (err) {
+      console.error("Failed to check overstays:", err);
+    }
+  };
+
+  const triggerAlerts = async () => {
+    if (!isStaff) return;
+    
+    setLoading(true);
+    try {
+      const response = await bookingsAPI.triggerOverstayAlerts();
+      if (response.success) {
+        setAlertResults({
+          alertsSent: response.alerts_sent,
+          message: response.message
+        });
+        // Refresh overstay data
+        await checkOverstays();
+      }
+    } catch (err) {
+      console.error("Failed to trigger alerts:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  if (!isStaff) {
+    return null; // Hidden for non-staff users
+  }
+
+  if (compact) {
+    // Compact version for dashboard/navbar
+    return (
+      <Group spacing="xs">
+        <Indicator
+          color="red"
+          disabled={overstayData.overstayCount === 0}
+          size={16}
+          label={overstayData.overstayCount}
+        >
+          <ActionIcon
+            variant="light"
+            color={overstayData.criticalOverstays > 0 ? "red" : overstayData.overstayCount > 0 ? "orange" : "blue"}
+            onClick={onViewOverstays}
+          >
+            <IconAlertTriangle size={16} />
+          </ActionIcon>
+        </Indicator>
+        
+        {overstayData.overstayCount > 0 && (
+          <Tooltip label="Trigger Overstay Alerts">
+            <ActionIcon
+              variant="light"
+              color="red"
+              onClick={triggerAlerts}
+              loading={loading}
+            >
+              <IconBellRinging size={16} />
+            </ActionIcon>
+          </Tooltip>
+        )}
+      </Group>
+    );
+  }
+
+  // Full monitoring panel
+  return (
+    <Card withBorder padding="md">
+      <Stack spacing="md">
+        {/* Header */}
+        <Group justify="space-between">
+          <Group spacing="xs">
+            <IconClock size={20} />
+            <Text fw={500}>Overstay Monitor</Text>
+            <Badge size="xs" color="blue">BR-VH-018</Badge>
+          </Group>
+          <ActionIcon 
+            variant="light" 
+            onClick={() => setShowSettings(!showSettings)}
+          >
+            <IconSettings size={16} />
+          </ActionIcon>
+        </Group>
+
+        {/* Settings Panel */}
+        {showSettings && (
+          <Alert color="blue">
+            <Stack spacing="xs">
+              <Group justify="space-between">
+                <Text size="sm">Auto-monitoring:</Text>
+                <Switch
+                  checked={isMonitoring}
+                  onChange={(event) => setIsMonitoring(event.currentTarget.checked)}
+                />
+              </Group>
+              <Group justify="space-between">
+                <Text size="sm">Check interval (minutes):</Text>
+                <NumberInput
+                  size="xs"
+                  style={{ width: 80 }}
+                  value={checkInterval}
+                  onChange={setCheckInterval}
+                  min={5}
+                  max={60}
+                />
+              </Group>
+            </Stack>
+          </Alert>
+        )}
+
+        {/* Status Display */}
+        <Group justify="space-between">
+          <Group spacing="md">
+            <div>
+              <Text size="xs" color="dimmed">Total Overstays</Text>
+              <Badge 
+                size="lg" 
+                color={overstayData.overstayCount > 0 ? "orange" : "green"}
+              >
+                {overstayData.overstayCount}
+              </Badge>
+            </div>
+            <div>
+              <Text size="xs" color="dimmed">Critical (1 day)</Text>
+              <Badge 
+                size="lg" 
+                color={overstayData.criticalOverstays > 0 ? "red" : "green"}
+                variant={overstayData.criticalOverstays > 0 ? "filled" : "light"}
+              >
+                {overstayData.criticalOverstays}
+              </Badge>
+            </div>
+          </Group>
+          
+          {overstayData.lastCheck && (
+            <Text size="xs" color="dimmed">
+              Last check: {overstayData.lastCheck}
+            </Text>
+          )}
+        </Group>
+
+        {/* Alert Results */}
+        {alertResults && (
+          <Alert color="green" icon={<IconBell size={16} />}>
+            <Text size="sm">{alertResults.message}</Text>
+          </Alert>
+        )}
+
+        {/* Action Buttons */}
+        <Group spacing="xs">
+          <Button
+            leftSection={<IconRefresh size={16} />}
+            variant="light"
+            size="xs"
+            onClick={checkOverstays}
+          >
+            Check Now
+          </Button>
+          
+          {overstayData.overstayCount > 0 && (
+            <>
+              <Button
+                leftSection={<IconEye size={16} />}
+                variant="light"
+                color="blue"
+                size="xs"
+                onClick={onViewOverstays}
+              >
+                View Details
+              </Button>
+              
+              <Button
+                leftSection={<IconBellRinging size={16} />}
+                color="red"
+                size="xs"
+                onClick={triggerAlerts}
+                loading={loading}
+              >
+                Send Alerts
+              </Button>
+            </>
+          )}
+        </Group>
+
+        {/* BR-VH-018 Notice */}
+        <Text size="xs" color="dimmed" style={{ fontStyle: "italic" }}>
+          BR-VH-018: Automated overstay detection monitors checkout times and generates alerts 
+          when checkout time is exceeded. Default checkout time is 11:00 AM.
+        </Text>
+      </Stack>
+    </Card>
+  );
+}
+
+export default OverstayMonitor;
\ No newline at end of file
diff --git a/src/Modules/Visitors_Hostel/components/RoomAvailabilityContainer.jsx b/src/Modules/Visitors_Hostel/components/RoomAvailabilityContainer.jsx
new file mode 100644
index 000000000..58013fd41
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/components/RoomAvailabilityContainer.jsx
@@ -0,0 +1,139 @@
+import React, { useState } from "react";
+import {
+  MantineProvider,
+  Button,
+  Box,
+  Text,
+  TextInput,
+  Grid,
+  Select,
+  Paper,
+} from "@mantine/core";
+import RoomAvailabilityDetails from "./RoomAvailabilityDetails";
+
+const ROOM_CATEGORIES = [
+  { value: "A", label: "Category A" },
+  { value: "B", label: "Category B" },
+  { value: "C", label: "Category C" },
+  { value: "D", label: "Category D" },
+];
+
+function RoomAvailabilityContainer() {
+  const [showForm, setShowForm] = useState(false);
+  const [bookingFrom, setBookingFrom] = useState("");
+  const [bookingTo, setBookingTo] = useState("");
+  const [selectedCategory, setSelectedCategory] = useState("");
+
+  const handleButtonClick = () => {
+    setShowForm(true);
+  };
+
+  return (
+    <Box p="md" style={{ margin: 10 }}>
+      <Box
+        mb="md"
+        style={{
+          display: "flex",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <Box
+          style={{ display: "flex", justifyContent: "center", width: "90%" }}
+        >
+          <Text
+            style={{
+              paddingBottom: 10,
+              fontWeight: "bold",
+              fontSize: "24px",
+              color: "#228be6",
+            }}
+          >
+            Rooms Availability
+          </Text>
+        </Box>
+
+        <Button
+          variant="outline"
+          color="green"
+          onClick={handleButtonClick}
+          sx={{ paddingLeft: "10px" }}
+          disabled={!bookingFrom || !bookingTo || !selectedCategory}
+        >
+          Submit
+        </Button>
+      </Box>
+
+      <Paper
+        mt="md"
+        p="md"
+        withBorder
+        radius="md"
+        style={{ borderColor: "#E0E0E0" }}
+      >
+        <Grid gutter="md" align="end">
+          <Grid.Col span={4}>
+            <TextInput
+              label="Booking From"
+              placeholder="From"
+              type="date"
+              required
+              value={bookingFrom}
+              onChange={(event) => setBookingFrom(event.currentTarget.value)}
+            />
+          </Grid.Col>
+          <Grid.Col span={4}>
+            <TextInput
+              label="Booking To"
+              placeholder="To"
+              type="date"
+              required
+              value={bookingTo}
+              onChange={(event) => setBookingTo(event.currentTarget.value)}
+            />
+          </Grid.Col>
+          <Grid.Col span={4}>
+            <Select
+              label="Category"
+              placeholder="Select category"
+              data={ROOM_CATEGORIES}
+              value={selectedCategory}
+              onChange={(value) => setSelectedCategory(value || "")}
+              clearable
+            />
+          </Grid.Col>
+        </Grid>
+      </Paper>
+
+      {showForm && (
+        <RoomAvailabilityDetails
+          bookingFrom={bookingFrom}
+          bookingTo={bookingTo}
+          selectedCategory={selectedCategory}
+          onClose={() => setShowForm(false)}
+        />
+      )}
+    </Box>
+  );
+}
+
+function RoomAvailabilityPage() {
+  return (
+    <MantineProvider withGlobalStyles withNormalizeCSS>
+      <Box
+        style={{
+          maxWidth: "1200px",
+          margin: "0 auto",
+          backgroundColor: "white",
+          borderRadius: "12px",
+          padding: "16px",
+          boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
+        }}
+      >
+        <RoomAvailabilityContainer />
+      </Box>
+    </MantineProvider>
+  );
+}
+
+export default RoomAvailabilityPage;
diff --git a/src/Modules/Visitors_Hostel/roomsAvailibilityDetails.jsx b/src/Modules/Visitors_Hostel/components/RoomAvailabilityDetails.jsx
similarity index 59%
rename from src/Modules/Visitors_Hostel/roomsAvailibilityDetails.jsx
rename to src/Modules/Visitors_Hostel/components/RoomAvailabilityDetails.jsx
index f7dcacf53..362e1d99a 100644
--- a/src/Modules/Visitors_Hostel/roomsAvailibilityDetails.jsx
+++ b/src/Modules/Visitors_Hostel/components/RoomAvailabilityDetails.jsx
@@ -9,79 +9,56 @@ import {
   Group,
   Badge,
 } from "@mantine/core";
-import axios from "axios";
 import PropTypes from "prop-types";
-import { fetchPartialBookingdataRoute } from "../../routes/visitorsHostelRoutes";
-import { host } from "../../routes/globalRoutes";
+import { roomsAPI } from "../services/visitorHostelApi";
 
-function RoomsDetails({ bookingFrom, bookingTo }) {
+function RoomAvailabilityDetails({ bookingFrom, bookingTo, selectedCategory }) {
   const [availableRooms, setAvailableRooms] = useState([]);
   const [partialBookingData, setPartialBookingData] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
 
   const roomData = {
-    G: ["G01", "G02", "G03", "G04", "G05", "G06", "G07", "G08", "G09", "G10"],
-    F: [
-      "F01",
-      "F02",
-      "F03",
-      "F04",
-      "F05",
-      "F06",
-      "F07",
-      "F08",
-      "F09",
-      "F10",
-      "F11",
-      "F12",
-    ],
-    S: ["S01", "S02", "S03", "S04", "S05", "S06"],
-    T: ["T01", "T02", "T03", "T04", "T05", "T06", "T07", "T08"],
+    A: ["A01", "A02", "A03", "A04", "A05", "A06"],
+    B: ["B01", "B02", "B03", "B04", "B05", "B06"],
+    C: ["C01", "C02", "C03", "C04", "C05", "C06"],
+    D: ["D01", "D02", "D03", "D04"],
   };
 
   useEffect(() => {
     const fetchAvailableRooms = async () => {
-      const token = localStorage.getItem("authToken");
-      if (!token) {
-        return console.error("No authentication token found!");
+      if (!selectedCategory) {
+        setAvailableRooms([]);
+        setError("Please select a category to check availability.");
+        return;
       }
 
       try {
-        const response = await axios.post(
-          `${host}/visitorhostel/room_availabity_new/`,
-          { start_date: bookingFrom, end_date: bookingTo },
-          {
-            headers: {
-              Authorization: `Token ${token}`,
-              "Content-Type": "application/json",
-            },
-          },
-        );
-        setAvailableRooms(response.data.available_rooms);
-      } catch (error) {
-        console.error("Error fetching available rooms:", error);
+        setLoading(true);
+        setError(null);
+
+        // Use service layer for room availability
+        const rooms = await roomsAPI.getAvailableRooms(bookingFrom, bookingTo, selectedCategory);
+        setAvailableRooms(rooms || []);
+      } catch (err) {
+        const errorMsg = err?.message || "Error fetching available rooms";
+        console.error("Error fetching available rooms:", err);
+        setError(errorMsg);
+        setAvailableRooms([]);
+      } finally {
+        setLoading(false);
       }
     };
 
+    // Note: Partial booking data endpoint not yet available in REST API
+    // TODO: Implement this endpoint or remove feature if not needed
     const fetchPartialBookingData = async () => {
-      const token = localStorage.getItem("authToken");
-      if (!token) {
-        return console.error("No authentication token found!");
-      }
-
       try {
-        const response = await axios.post(
-          fetchPartialBookingdataRoute,
-          { start_date: bookingFrom, end_date: bookingTo },
-          {
-            headers: {
-              Authorization: `Token ${token}`,
-              "Content-Type": "application/json",
-            },
-          },
-        );
-        setPartialBookingData(response.data);
-      } catch (error) {
-        console.error("Error fetching partial booking data:", error);
+        // Placeholder - will be implemented when API endpoint is available
+        setPartialBookingData([]);
+      } catch (err) {
+        console.error("Error fetching partial booking data:", err);
+        setPartialBookingData([]);
       }
     };
 
@@ -89,7 +66,7 @@ function RoomsDetails({ bookingFrom, bookingTo }) {
       fetchAvailableRooms();
       fetchPartialBookingData();
     }
-  }, [bookingFrom, bookingTo]);
+  }, [bookingFrom, bookingTo, selectedCategory]);
 
   const filteredPartialBookingData = partialBookingData.filter(
     (data) => data.available_ranges && data.available_ranges.length > 0,
@@ -111,30 +88,32 @@ function RoomsDetails({ bookingFrom, bookingTo }) {
   return (
     <MantineProvider theme={{ fontFamily: "Arial, sans-serif" }}>
       <Box>
-        {Object.keys(roomData).map((section) => (
-          <Grid
-            key={section}
-            justify="center"
-            gutter="xs"
-            style={{ marginBottom: "10px", marginTop: "10px" }}
-          >
-            {roomData[section].map((room) => (
-              <Grid.Col
-                span={1}
-                key={room}
-                style={{ textAlign: "center", padding: "5px" }}
-              >
-                <Button
-                  variant="filled"
-                  color={getButtonColor(room)}
-                  style={{ width: "64px", height: "40px" }}
+        {Object.keys(roomData)
+          .filter((section) => !selectedCategory || selectedCategory === section)
+          .map((section) => (
+            <Grid
+              key={section}
+              justify="center"
+              gutter="xs"
+              style={{ marginBottom: "10px", marginTop: "10px" }}
+            >
+              {roomData[section].map((room) => (
+                <Grid.Col
+                  span={1}
+                  key={room}
+                  style={{ textAlign: "center", padding: "5px" }}
                 >
-                  {room}
-                </Button>
-              </Grid.Col>
-            ))}
-          </Grid>
-        ))}
+                  <Button
+                    variant="filled"
+                    color={getButtonColor(room)}
+                    style={{ width: "64px", height: "40px" }}
+                  >
+                    {room}
+                  </Button>
+                </Grid.Col>
+              ))}
+            </Grid>
+          ))}
       </Box>
 
       <Box mt="xl">
@@ -209,9 +188,10 @@ function RoomsDetails({ bookingFrom, bookingTo }) {
   );
 }
 
-RoomsDetails.propTypes = {
+RoomAvailabilityDetails.propTypes = {
   bookingFrom: PropTypes.string.isRequired,
   bookingTo: PropTypes.string.isRequired,
+  selectedCategory: PropTypes.string,
 };
 
-export default RoomsDetails;
+export default RoomAvailabilityDetails;
diff --git a/src/Modules/Visitors_Hostel/components/common/ActionConfirmationProvider.jsx b/src/Modules/Visitors_Hostel/components/common/ActionConfirmationProvider.jsx
new file mode 100644
index 000000000..359df6aeb
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/components/common/ActionConfirmationProvider.jsx
@@ -0,0 +1,83 @@
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Button, Group, Modal, Stack, Text } from "@mantine/core";
+
+const ActionConfirmationContext = createContext(null);
+
+export function ActionConfirmationProvider({ children }) {
+  const resolverRef = useRef(null);
+  const [dialog, setDialog] = useState({
+    opened: false,
+    title: "Please Confirm",
+    message: "",
+    confirmLabel: "Confirm",
+    cancelLabel: "Cancel",
+    confirmColor: "red",
+  });
+
+  const closeDialog = useCallback((result) => {
+    if (resolverRef.current) {
+      resolverRef.current(result);
+      resolverRef.current = null;
+    }
+    setDialog((prev) => ({ ...prev, opened: false }));
+  }, []);
+
+  const confirmAction = useCallback((message, options = {}) => {
+    return new Promise((resolve) => {
+      resolverRef.current = resolve;
+      setDialog({
+        opened: true,
+        title: options.title || "Please Confirm",
+        message,
+        confirmLabel: options.confirmLabel || "Confirm",
+        cancelLabel: options.cancelLabel || "Cancel",
+        confirmColor: options.confirmColor || "red",
+      });
+    });
+  }, []);
+
+  const value = useMemo(() => ({ confirmAction }), [confirmAction]);
+
+  return (
+    <ActionConfirmationContext.Provider value={value}>
+      {children}
+      <Modal
+        opened={dialog.opened}
+        onClose={() => closeDialog(false)}
+        title={dialog.title}
+        centered
+        size="sm"
+        withCloseButton
+        withinPortal
+        zIndex={10000}
+      >
+        <Stack spacing="md">
+          <Text>{dialog.message}</Text>
+          <Group position="right">
+            <Button variant="default" onClick={() => closeDialog(false)}>
+              {dialog.cancelLabel}
+            </Button>
+            <Button color={dialog.confirmColor} onClick={() => closeDialog(true)}>
+              {dialog.confirmLabel}
+            </Button>
+          </Group>
+        </Stack>
+      </Modal>
+    </ActionConfirmationContext.Provider>
+  );
+}
+
+export function useActionConfirmation() {
+  const context = useContext(ActionConfirmationContext);
+  if (!context) {
+    throw new Error("useActionConfirmation must be used inside ActionConfirmationProvider");
+  }
+  return context;
+}
diff --git a/src/Modules/Visitors_Hostel/components/common/ErrorBoundary.jsx b/src/Modules/Visitors_Hostel/components/common/ErrorBoundary.jsx
new file mode 100644
index 000000000..8cd13f2e7
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/components/common/ErrorBoundary.jsx
@@ -0,0 +1,128 @@
+/**
+ * React Error Boundary for Visitor Hostel Module
+ * Catches JavaScript errors anywhere in the child component tree
+ */
+
+import React from 'react';
+import { Alert, Button, Container, Stack, Text, Title } from '@mantine/core';
+import { IconAlertTriangle, IconRefresh } from '@tabler/icons-react';
+import { ErrorHandlers } from '../../utils/errorHandler';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { 
+      hasError: false, 
+      error: null,
+      errorInfo: null 
+    };
+  }
+
+  static getDerivedStateFromError(error) {
+    // Update state so the next render will show the fallback UI
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    // Log the error with our centralized error handler
+    ErrorHandlers.criticalError(error, `React Component: ${errorInfo.componentStack}`);
+    
+    this.setState({
+      error,
+      errorInfo
+    });
+
+    // Log additional details for debugging
+    console.group('🚨 React Error Boundary Triggered');
+    console.error('Error:', error);
+    console.error('Error Info:', errorInfo);
+    console.error('Component Stack:', errorInfo.componentStack);
+    console.groupEnd();
+  }
+
+  handleReload = () => {
+    window.location.reload();
+  };
+
+  handleRetry = () => {
+    this.setState({ 
+      hasError: false, 
+      error: null, 
+      errorInfo: null 
+    });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      const isDevelopment = process.env.NODE_ENV === 'development';
+      
+      return (
+        <Container size="sm" py="xl">
+          <Stack spacing="lg" align="center">
+            <IconAlertTriangle size={64} color="red" />
+            
+            <Title order={2} align="center" color="dimmed">
+              Something went wrong
+            </Title>
+            
+            <Alert 
+              icon={<IconAlertTriangle size="1rem" />} 
+              title="Application Error" 
+              color="red"
+              style={{ width: '100%' }}
+            >
+              <Text size="sm" mb="md">
+                We're sorry, but something unexpected happened. Our team has been 
+                automatically notified about this issue.
+              </Text>
+              
+              {isDevelopment && this.state.error && (
+                <Text size="xs" color="dimmed" style={{ fontFamily: 'monospace' }}>
+                  Error: {this.state.error.toString()}
+                </Text>
+              )}
+              
+              <Stack spacing="sm" mt="md">
+                <Button 
+                  leftIcon={<IconRefresh size="1rem" />}
+                  onClick={this.handleRetry}
+                  variant="outline"
+                  color="red"
+                >
+                  Try Again
+                </Button>
+                
+                <Button 
+                  onClick={this.handleReload}
+                  color="red"
+                >
+                  Reload Page
+                </Button>
+              </Stack>
+            </Alert>
+            
+            {isDevelopment && this.state.errorInfo && (
+              <Alert 
+                title="Debug Information (Development Only)" 
+                color="gray"
+                style={{ width: '100%' }}
+              >
+                <Text size="xs" style={{ fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
+                  {this.state.errorInfo.componentStack}
+                </Text>
+              </Alert>
+            )}
+            
+            <Text size="sm" color="dimmed" align="center">
+              If this problem persists, please contact the system administrator.
+            </Text>
+          </Stack>
+        </Container>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;
\ No newline at end of file
diff --git a/src/Modules/Visitors_Hostel/components/common/LoadingSpinner.jsx b/src/Modules/Visitors_Hostel/components/common/LoadingSpinner.jsx
new file mode 100644
index 000000000..4e4224e31
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/components/common/LoadingSpinner.jsx
@@ -0,0 +1,97 @@
+/**
+ * LoadingSpinner
+ * Reusable loading indicator component
+ * 
+ * Supports multiple sizes and variants
+ */
+
+import React from "react";
+import { Loader, Center, Box, Stack, Text } from "@mantine/core";
+
+/**
+ * Centered loading spinner
+ * 
+ * @param {Object} props
+ * @param {string} props.size - Spinner size: xs, sm, md, lg, xl (default: md)
+ * @param {string} props.variant - Spinner style: bars, dots, oval (default: dots)
+ * @param {string} props.message - Optional loading message below spinner
+ * @param {boolean} props.fullHeight - Make container full height (default: false)
+ */
+function LoadingSpinner({
+  size = "md",
+  variant = "dots",
+  message = "",
+  fullHeight = false,
+}) {
+  const containerHeight = fullHeight ? "100vh" : "auto";
+  const containerMinHeight = fullHeight ? "200px" : "auto";
+
+  return (
+    <Center style={{ minHeight: containerMinHeight, height: containerHeight }}>
+      <Stack align="center" spacing="md">
+        <Loader size={size} variant={variant} />
+        {message && (
+          <Text size="sm" color="dimmed">
+            {message}
+          </Text>
+        )}
+      </Stack>
+    </Center>
+  );
+}
+
+/**
+ * Inline loading spinner for integration into layouts
+ * 
+ * @param {Object} props
+ * @param {string} props.size - Spinner size (default: sm)
+ * @param {string} props.message - Optional message
+ */
+export function InlineLoadingSpinner({ size = "sm", message = "" }) {
+  return (
+    <Box style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+      <Loader size={size} />
+      {message && <Text size="sm">{message}</Text>}
+    </Box>
+  );
+}
+
+/**
+ * Loading overlay for covering content during async operations
+ * 
+ * @param {Object} props
+ * @param {boolean} props.visible - Whether to show the overlay
+ * @param {string} props.message - Message to display
+ * @param {React.ReactNode} props.children - Content to overlay
+ */
+export function LoadingOverlay({ visible = false, message = "Loading...", children }) {
+  return (
+    <Box style={{ position: "relative" }}>
+      {visible && (
+        <Box
+          style={{
+            position: "absolute",
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            backgroundColor: "rgba(255, 255, 255, 0.7)",
+            zIndex: 1000,
+            borderRadius: "4px",
+          }}
+        >
+          <Stack align="center" spacing="md">
+            <Loader />
+            {message && <Text size="sm">{message}</Text>}
+          </Stack>
+        </Box>
+      )}
+      {children}
+    </Box>
+  );
+}
+
+export default LoadingSpinner;
diff --git a/src/Modules/Visitors_Hostel/components/common/MealBookingHistory.jsx b/src/Modules/Visitors_Hostel/components/common/MealBookingHistory.jsx
new file mode 100644
index 000000000..59fa18c5a
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/components/common/MealBookingHistory.jsx
@@ -0,0 +1,206 @@
+/**
+ * MealBookingHistory
+ * Component to display meal booking history for a specific booking
+ * 
+ * Features:
+ * - Shows all meal records with dates
+ * - Displays meal breakdown (breakfast, lunch, dinner, etc.)
+ * - Shows cost calculation
+ * - Organized by date and visitor
+ * - Visual meal type indicators
+ */
+
+import React from "react";
+import {
+  Paper,
+  Stack,
+  Group,
+  Badge,
+  Divider,
+  Card,
+  Grid,
+  Alert,
+  Table,
+} from "@mantine/core";
+import {
+  IconToolsKitchen2,
+  IconCoffee,
+  IconCalendar,
+  IconUser,
+  IconCurrencyRupee,
+  IconInfoCircle
+} from "@tabler/icons-react";
+
+const MEAL_TYPES = {
+  morning_tea: { label: "Morning Tea", icon: <IconCoffee size={14} />, cost: 10, color: "orange" },
+  breakfast: { label: "Breakfast", icon: <IconToolsKitchen2 size={14} />, cost: 50, color: "yellow" },
+  lunch: { label: "Lunch", icon: <IconToolsKitchen2 size={14} />, cost: 100, color: "green" },
+  eve_tea: { label: "Evening Tea", icon: <IconCoffee size={14} />, cost: 10, color: "orange" },
+  dinner: { label: "Dinner", icon: <IconToolsKitchen2 size={14} />, cost: 100, color: "blue" }
+};
+
+function MealBookingHistory({ mealBookings = [], totalMealsCost = 0 }) {
+  if (!mealBookings || mealBookings.length === 0) {
+    return (
+      <Alert 
+        icon={<IconInfoCircle size={16} />} 
+        color="blue"
+        title="No Meal Bookings"
+      >
+        No meals have been booked for this reservation yet. Use the "Book Meals" button to add meal bookings.
+      </Alert>
+    );
+  }
+
+  // Group meal bookings by date
+  const mealsByDate = mealBookings.reduce((acc, booking) => {
+    const date = booking.meal_date;
+    if (!acc[date]) {
+      acc[date] = [];
+    }
+    acc[date].push(booking);
+    return acc;
+  }, {});
+
+  const sortedDates = Object.keys(mealsByDate).sort();
+
+  return (
+    <Stack spacing="md">
+      {/* Header */}
+      <Group position="apart" mb="md">
+        <div>
+          <div style={{ fontWeight: 600, fontSize: '18px' }}>Meal Booking History</div>
+          <div style={{ fontSize: '14px', color: '#666' }}>
+            All meals booked for this reservation
+          </div>
+        </div>
+        <Group spacing="xs">
+          <IconCurrencyRupee size={16} />
+          <div style={{ fontWeight: 600, color: '#51cf66' }}>
+            ₹{totalMealsCost}
+          </div>
+          <div style={{ fontSize: '14px', color: '#666' }}>Total</div>
+        </Group>
+      </Group>
+
+      {/* Meal Records by Date */}
+      {sortedDates.map((date) => (
+        <Card key={date} p="md" withBorder>
+          <Group mb="md" position="apart">
+            <Group spacing="xs">
+              <IconCalendar size={16} />
+              <div style={{ fontWeight: 600 }}>{new Date(date).toLocaleDateString()}</div>
+            </Group>
+            <Badge variant="light" color="blue">
+              {mealsByDate[date].reduce((total, booking) => total + booking.total_meals, 0)} meals
+            </Badge>
+          </Group>
+
+          <Stack spacing="md">
+            {mealsByDate[date].map((booking) => (
+              <Paper key={booking.id} p="md" style={{ backgroundColor: "#f8f9fa" }}>
+                <Group position="apart" mb="sm">
+                  <Group spacing="xs">
+                    <IconUser size={14} />
+                    <div style={{ fontWeight: 500, fontSize: '14px' }}>{booking.visitor_name}</div>
+                  </Group>
+                  <Group spacing="xs">
+                    <IconCurrencyRupee size={14} />
+                    <div style={{ fontWeight: 600, fontSize: '14px', color: '#51cf66' }}>₹{booking.meal_cost}</div>
+                  </Group>
+                </Group>
+
+                {/* Meal Breakdown */}
+                <Grid gutter="xs">
+                  {Object.keys(MEAL_TYPES).map((mealType) => {
+                    const quantity = booking.meals[mealType];
+                    if (quantity === 0) return null;
+
+                    const meal = MEAL_TYPES[mealType];
+                    return (
+                      <Grid.Col span={6} key={mealType}>
+                        <Group spacing="xs" position="apart">
+                          <Group spacing="xs">
+                            {meal.icon}
+                            <div style={{ fontSize: '12px' }}>{meal.label}</div>
+                          </Group>
+                          <Group spacing="xs">
+                            <Badge size="xs" color={meal.color} variant="light">
+                              {quantity}x
+                            </Badge>
+                            <div style={{ fontSize: '12px', color: '#666' }}>
+                              ₹{quantity * meal.cost}
+                            </div>
+                          </Group>
+                        </Group>
+                      </Grid.Col>
+                    );
+                  })}
+                </Grid>
+              </Paper>
+            ))}
+          </Stack>
+        </Card>
+      ))}
+
+      {/* Summary */}
+      <Paper p="md" style={{ backgroundColor: "#e7f5ff", border: "1px solid #339af0" }}>
+        <Group position="apart">
+          <div>
+            <div style={{ fontWeight: 600, color: '#228be6' }}>Summary</div>
+            <div style={{ fontSize: '14px', color: '#666' }}>
+              {mealBookings.length} meal record(s) across {sortedDates.length} day(s)
+            </div>
+          </div>
+          <div style={{ textAlign: "right" }}>
+            <div style={{ fontWeight: 700, fontSize: '18px', color: '#228be6' }}>
+              ₹{totalMealsCost}
+            </div>
+            <div style={{ fontSize: '12px', color: '#666' }}>
+              Total Meal Cost
+            </div>
+          </div>
+        </Group>
+      </Paper>
+
+      {/* Detailed Table View */}
+      <details>
+        <summary style={{ cursor: "pointer", padding: "8px 0" }}>
+          <span style={{ fontSize: '14px', fontWeight: 500 }}>
+            View Detailed Breakdown
+          </span>
+        </summary>
+        <Table striped highlightOnHover mt="md">
+          <thead>
+            <tr>
+              <th>Date</th>
+              <th>Visitor</th>
+              <th>Morning Tea</th>
+              <th>Breakfast</th>
+              <th>Lunch</th>
+              <th>Evening Tea</th>
+              <th>Dinner</th>
+              <th>Cost</th>
+            </tr>
+          </thead>
+          <tbody>
+            {mealBookings.map((booking) => (
+              <tr key={booking.id}>
+                <td>{new Date(booking.meal_date).toLocaleDateString()}</td>
+                <td>{booking.visitor_name}</td>
+                <td>{booking.meals.morning_tea || "-"}</td>
+                <td>{booking.meals.breakfast || "-"}</td>
+                <td>{booking.meals.lunch || "-"}</td>
+                <td>{booking.meals.eve_tea || "-"}</td>
+                <td>{booking.meals.dinner || "-"}</td>
+                <td>₹{booking.meal_cost}</td>
+              </tr>
+            ))}
+          </tbody>
+        </Table>
+      </details>
+    </Stack>
+  );
+}
+
+export default MealBookingHistory;
\ No newline at end of file
diff --git a/src/Modules/Visitors_Hostel/components/common/RoleBasedAccess.jsx b/src/Modules/Visitors_Hostel/components/common/RoleBasedAccess.jsx
new file mode 100644
index 000000000..8492efdc8
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/components/common/RoleBasedAccess.jsx
@@ -0,0 +1,85 @@
+/**
+ * RoleBasedAccess
+ * Component for conditionally rendering content based on user role
+ * 
+ * Supported roles:
+ * - VhIncharge: Full access to all booking management features
+ * - Student: Can only create bookings and view own bookings
+ * - AccountsOfficer: Can view bills and financial reports
+ */
+
+import React from "react";
+import { useSelector } from "react-redux";
+import { Alert, Text, Box } from "@mantine/core";
+
+export const ROLES = {
+  VH_INCHARGE: "VhIncharge",
+  STUDENT: "Student",
+  ACCOUNTS_OFFICER: "AccountsOfficer",
+};
+
+/**
+ * Component that conditionally renders children based on user role
+ * 
+ * @param {Object} props
+ * @param {Array<string>} props.allowedRoles - Array of roles that can access this content
+ * @param {React.ReactNode} props.children - Content to render if user has allowed role
+ * @param {React.ReactNode} props.fallback - Content to render if user doesn't have access (optional)
+ * @param {boolean} props.showMessage - Show message when access is denied (default: true)
+ */
+function RoleBasedAccess({ allowedRoles, children, fallback, showMessage = true }) {
+  const user = useSelector((state) => state.user?.user);
+  const userRole = user?.role;
+
+  // Check if user has an allowed role
+  const hasAccess = allowedRoles.includes(userRole);
+
+  if (!hasAccess) {
+    if (fallback) {
+      return fallback;
+    }
+
+    if (showMessage) {
+      return (
+        <Alert type="error" title="Access Denied">
+          <Text size="sm">
+            You don't have permission to access this content. Required role: {allowedRoles.join(" or ")}
+          </Text>
+        </Alert>
+      );
+    }
+
+    return null;
+  }
+
+  return <>{children}</>;
+}
+
+/**
+ * Higher-order component to wrap a component with role-based access control
+ * 
+ * @param {React.Component} Component - Component to wrap
+ * @param {Array<string>} allowedRoles - Array of allowed roles
+ * @param {React.ReactNode} fallback - Fallback component to render
+ */
+export function withRoleAccess(Component, allowedRoles, fallback) {
+  return function ProtectedComponent(props) {
+    return (
+      <RoleBasedAccess allowedRoles={allowedRoles} fallback={fallback}>
+        <Component {...props} />
+      </RoleBasedAccess>
+    );
+  };
+}
+
+/**
+ * Hook to check if current user has a specific role
+ */
+export function useCanAccess(allowedRoles) {
+  const user = useSelector((state) => state.user?.user);
+  const userRole = user?.role;
+  
+  return allowedRoles.includes(userRole);
+}
+
+export default RoleBasedAccess;
diff --git a/src/Modules/Visitors_Hostel/components/common/ViewActiveBookingModal.jsx b/src/Modules/Visitors_Hostel/components/common/ViewActiveBookingModal.jsx
new file mode 100644
index 000000000..22e3ebb5d
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/components/common/ViewActiveBookingModal.jsx
@@ -0,0 +1,622 @@
+/**
+ * ViewActiveBookingModal
+ * Modal component for viewing active booking details with check-in/check-out actions
+ * 
+ * Features:
+ * - Display all booking details
+ * - Show room assignments
+ * - Print booking confirmation
+ * - Check-in/Check-out actions
+ * - Status indicators
+ */
+
+import React, { useState } from "react";
+import {
+  Modal,
+  Grid,
+  Badge,
+  Button,
+  Group,
+  Divider,
+  Stack,
+  Paper,
+  Alert,
+  TextInput,
+  MultiSelect,
+} from "@mantine/core";
+import { IconPrinter, IconCheck, IconX, IconHome, IconUser, IconToolsKitchen2 } from "@tabler/icons-react";
+import CheckoutForm from "../forms/CheckoutForm";
+import MealBookingForm from "../forms/MealBookingForm";
+import MealBookingHistory from "./MealBookingHistory";
+import { useActionConfirmation } from "./ActionConfirmationProvider";
+import { bookingsAPI, mealsAPI, roomsAPI } from "../../services/visitorHostelApi";
+
+const STATUS_COLORS = {
+  Pending: "yellow",
+  Forward: "indigo",
+  Confirmed: "blue",
+  CheckedIn: "green",
+  Complete: "gray",
+  Canceled: "red",
+  Rejected: "red",
+};
+
+function ViewActiveBookingModal({ opened, onClose, bookingData, userRole, onCheckIn, onCheckOut, onRefresh }) {
+  const { confirmAction } = useActionConfirmation();
+  const primaryVisitor = bookingData?.visitors?.[0] || {};
+  const [assignedRooms, setAssignedRooms] = useState([]);
+  const [availableRooms, setAvailableRooms] = useState([]);
+  const [selectedRooms, setSelectedRooms] = useState([]);
+  const [allocationError, setAllocationError] = useState("");
+  const [isAllocatingRooms, setIsAllocatingRooms] = useState(false);
+
+  const [checkInForm, setCheckInForm] = useState({
+    name: "",
+    phone: "",
+    email: "",
+    address: "",
+  });
+  const [checkoutForm, setCheckoutForm] = useState({
+    mealBill: 0,
+    roomBill: 0,
+    billSettlement: "Intender",
+  });
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [mealBookingOpen, setMealBookingOpen] = useState(false);
+  const [mealBookingSuccess, setMealBookingSuccess] = useState("");
+
+  React.useEffect(() => {
+    if (!bookingData) {
+      return;
+    }
+
+    setAssignedRooms(bookingData.rooms || []);
+    setAllocationError("");
+    setSelectedRooms([]);
+    setAvailableRooms([]);
+
+    setCheckInForm({
+      name: primaryVisitor.name || "",
+      phone: primaryVisitor.phone || "",
+      email: primaryVisitor.email || "",
+      address: primaryVisitor.address || "",
+    });
+    setCheckoutForm({
+      mealBill: Number(bookingData.total_meals_cost || 0),
+      roomBill: 0,
+      billSettlement: bookingData.bill_to_be_settled_by || "Intender",
+    });
+  }, [bookingData, primaryVisitor.address, primaryVisitor.email, primaryVisitor.name, primaryVisitor.phone]);
+
+  React.useEffect(() => {
+    const loadAvailableRooms = async () => {
+      if (!opened || !bookingData || bookingData.status !== "Confirmed") {
+        return;
+      }
+
+      if (assignedRooms.length > 0) {
+        return;
+      }
+
+      try {
+        const rooms = await roomsAPI.getAvailableRooms(
+          bookingData.booking_from,
+          bookingData.booking_to,
+          bookingData.visitor_category
+        );
+        setAvailableRooms(Array.isArray(rooms) ? rooms : []);
+      } catch (error) {
+        setAllocationError(error?.detail || error?.message || "Unable to load available rooms.");
+      }
+    };
+
+    loadAvailableRooms();
+  }, [opened, bookingData, assignedRooms.length]);
+
+  if (!bookingData) {
+    return (
+      <Modal opened={opened} onClose={onClose} title="Active Booking Details" size="lg">
+        <Alert type="info">No booking data available</Alert>
+      </Modal>
+    );
+  }
+
+  const handleCheckIn = async () => {
+    if (!checkInForm.name || !checkInForm.phone) {
+      return;
+    }
+
+    if (!(await confirmAction("Are you sure you want to check in this booking?", {
+      title: "Confirm Check-In",
+      confirmLabel: "Check In",
+      confirmColor: "green",
+    }))) {
+      return;
+    }
+
+    setIsProcessing(true);
+    try {
+      if (onCheckIn) {
+        await onCheckIn({
+          bookingId: bookingData.id,
+          name: checkInForm.name,
+          phone: checkInForm.phone,
+          email: checkInForm.email,
+          address: checkInForm.address,
+        });
+      }
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const handleCheckOut = async () => {
+    if (!(await confirmAction("Are you sure you want to check out this booking?", {
+      title: "Confirm Check-Out",
+      confirmLabel: "Check Out",
+      confirmColor: "orange",
+    }))) {
+      return;
+    }
+
+    setIsProcessing(true);
+    try {
+      if (onCheckOut) {
+        await onCheckOut({
+          bookingId: bookingData.id,
+          mealBill: checkoutForm.mealBill,
+          roomBill: checkoutForm.roomBill,
+          billSettlement: checkoutForm.billSettlement,
+        });
+      }
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  const handleMealBooking = async (mealData) => {
+    try {
+      const result = await mealsAPI.bookMeals(mealData);
+      if (result.success) {
+        setMealBookingSuccess("Meals booked successfully!");
+        setTimeout(() => setMealBookingSuccess(""), 3000);
+        if (onRefresh) {
+          onRefresh();
+        }
+      }
+    } catch (error) {
+      console.error("Error booking meals:", error);
+      throw error;
+    }
+  };
+
+  const handlePrint = () => {
+    const printContent = `
+      <div style="font-family: Arial, sans-serif; padding: 20px; max-width: 600px; margin: 0 auto;">
+        <h2 style="text-align: center; color: #228be6;">Active Booking Details</h2>
+        <hr/>
+        
+        <h3>Booking Information</h3>
+        <p><strong>Booking ID:</strong> ${bookingData.id}</p>
+        <p><strong>Status:</strong> ${bookingData.status || "N/A"}</p>
+        <p><strong>Check-In Date:</strong> ${bookingData.checked_in_date ? new Date(bookingData.checked_in_date).toLocaleDateString() : "Not checked in yet"}</p>
+        
+        <h3>Guest Information</h3>
+        <p><strong>Name:</strong> ${primaryVisitor.name || "N/A"}</p>
+        <p><strong>Email:</strong> ${primaryVisitor.email || "N/A"}</p>
+        <p><strong>Phone:</strong> ${primaryVisitor.phone || "N/A"}</p>
+        <p><strong>Organization:</strong> ${primaryVisitor.organization || "N/A"}</p>
+
+        <h3>Intender Information</h3>
+        <p><strong>Name:</strong> ${bookingData.intender_name || "N/A"}</p>
+        <p><strong>Email:</strong> ${bookingData.intender_email || "N/A"}</p>
+        <p><strong>Phone:</strong> ${bookingData.intender_phone || "N/A"}</p>
+        
+        <h3>Stay Details</h3>
+        <p><strong>Check-In:</strong> ${bookingData.booking_from || "N/A"}</p>
+        <p><strong>Check-Out:</strong> ${bookingData.booking_to || "N/A"}</p>
+        <p><strong>Room Category:</strong> ${bookingData.visitor_category || "N/A"}</p>
+        
+        ${assignedRooms.length > 0 ? `
+          <h3>Room Assignments</h3>
+          <p>${assignedRooms.map((room) => room.room_number).join(", ")}</p>
+        ` : ""}
+        
+        <hr/>
+        <p style="text-align: center; font-size: 12px; color: #666;">
+          Printed on: ${new Date().toLocaleString()}
+        </p>
+      </div>
+    `;
+
+    const printWindow = window.open("", "_blank");
+    printWindow.document.write(printContent);
+    printWindow.document.close();
+    printWindow.print();
+  };
+
+  const isCheckedIn = bookingData.status === "CheckedIn";
+  const isCompleted = bookingData.status === "Complete";
+  const requiredRoomCount = Number(bookingData.number_of_rooms || 1);
+
+  const handleAllocateRooms = async () => {
+    if (!bookingData?.id) {
+      return;
+    }
+
+    if (selectedRooms.length !== requiredRoomCount) {
+      setAllocationError(`Select exactly ${requiredRoomCount} room(s) before allocation.`);
+      return;
+    }
+
+    if (!(await confirmAction("Are you sure you want to allocate the selected rooms?", {
+      title: "Confirm Room Allocation",
+      confirmLabel: "Allocate",
+      confirmColor: "blue",
+    }))) {
+      return;
+    }
+
+    setIsAllocatingRooms(true);
+    setAllocationError("");
+    try {
+      const response = await bookingsAPI.allocateRooms(bookingData.id, selectedRooms);
+      if (response.success) {
+        const allocatedRooms = Array.isArray(response.allocated_rooms)
+          ? response.allocated_rooms
+          : selectedRooms;
+        setAssignedRooms(allocatedRooms.map((roomNumber) => ({ room_number: roomNumber })));
+        setSelectedRooms([]);
+        setAllocationError("");
+        if (onRefresh) {
+          onRefresh();
+        }
+      }
+    } catch (error) {
+      setAllocationError(error?.detail || error?.message || "Failed to allocate rooms.");
+    } finally {
+      setIsAllocatingRooms(false);
+    }
+  };
+
+  return (
+    <Modal opened={opened} onClose={onClose} title="Active Booking Details" size="lg" centered>
+      <Stack spacing="md">
+        {/* Header with Status */}
+        <Paper p="md" style={{ backgroundColor: "#f1f3f5", borderRadius: "4px" }}>
+          <Group position="apart" mb="sm">
+            <div>
+              <div style={{ fontWeight: 700, fontSize: '18px' }}>
+                Booking #{bookingData.id}
+              </div>
+              <div style={{ fontSize: '14px', color: '#666' }}>
+                {bookingData.intender_name || "Intender"}
+              </div>
+            </div>
+            <Badge
+              size="lg"
+              color={STATUS_COLORS[bookingData.status] || "gray"}
+              variant="filled"
+            >
+              {bookingData.status?.toUpperCase() || "UNKNOWN"}
+            </Badge>
+          </Group>
+          <div style={{ fontSize: '12px', color: '#666' }}>
+            Created: {bookingData.created_at ? new Date(bookingData.created_at).toLocaleDateString() : "N/A"}
+          </div>
+        </Paper>
+
+        <Divider />
+
+        {/* Guest Information */}
+        <div>
+          <Group mb="sm">
+            <IconUser size={18} />
+            <div style={{ fontWeight: 600 }}>Guest Information</div>
+          </Group>
+          <Grid gutter="xs">
+            <Grid.Col span={6}>
+              <div style={{ fontSize: '14px', color: '#666' }}>
+                Name
+              </div>
+              <div style={{ fontWeight: 500 }}>{primaryVisitor.name || "N/A"}</div>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <div style={{ fontSize: '14px', color: '#666' }}>
+                Email
+              </div>
+              <div style={{ fontWeight: 500 }}>{primaryVisitor.email || "N/A"}</div>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <div style={{ fontSize: '14px', color: '#666' }}>
+                Phone
+              </div>
+              <div style={{ fontWeight: 500 }}>{primaryVisitor.phone || "N/A"}</div>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <div style={{ fontSize: '14px', color: '#666' }}>
+                Organization
+              </div>
+              <div style={{ fontWeight: 500 }}>{primaryVisitor.organization || "N/A"}</div>
+            </Grid.Col>
+          </Grid>
+        </div>
+
+        <Divider />
+
+        <div>
+          <Group mb="sm">
+            <IconUser size={18} />
+            <div style={{ fontWeight: 600 }}>Intender Information</div>
+          </Group>
+          <Grid gutter="xs">
+            <Grid.Col span={6}>
+              <div style={{ fontSize: '14px', color: '#666' }}>
+                Name
+              </div>
+              <div style={{ fontWeight: 500 }}>{bookingData.intender_name || "N/A"}</div>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <div style={{ fontSize: '14px', color: '#666' }}>
+                Email
+              </div>
+              <div style={{ fontWeight: 500 }}>{bookingData.intender_email || "N/A"}</div>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <div style={{ fontSize: '14px', color: '#666' }}>
+                Phone
+              </div>
+              <div style={{ fontWeight: 500 }}>{bookingData.intender_phone || "N/A"}</div>
+            </Grid.Col>
+          </Grid>
+        </div>
+
+        <Divider />
+
+        {/* Stay Details */}
+        <div>
+          <Group mb="sm">
+            <IconHome size={18} />
+            <div style={{ fontWeight: 600 }}>Stay Details</div>
+          </Group>
+          <Grid gutter="xs">
+            <Grid.Col span={6}>
+              <div style={{ fontSize: '14px', color: '#666' }}>
+                Check-In
+              </div>
+              <div style={{ fontWeight: 500 }}>{bookingData.booking_from || "N/A"}</div>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <div style={{ fontSize: '14px', color: '#666' }}>
+                Check-Out
+              </div>
+              <div style={{ fontWeight: 500 }}>{bookingData.booking_to || "N/A"}</div>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <div style={{ fontSize: '14px', color: '#666' }}>
+                Room Category
+              </div>
+              <div style={{ fontWeight: 500 }}>{bookingData.visitor_category || "N/A"}</div>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <div style={{ fontSize: '14px', color: '#666' }}>
+                Number of Rooms
+              </div>
+              <div style={{ fontWeight: 500 }}>{bookingData.number_of_rooms || "N/A"}</div>
+            </Grid.Col>
+          </Grid>
+        </div>
+
+        {/* Room Assignments */}
+        {assignedRooms.length > 0 && (
+          <>
+            <Divider />
+            <div>
+              <div style={{ fontWeight: 600, marginBottom: '12px' }}>
+                Assigned Rooms
+              </div>
+              <Group>
+                {assignedRooms.map((room, idx) => (
+                  <Badge key={idx} variant="light" color="blue">
+                    {room.room_number}
+                  </Badge>
+                ))}
+              </Group>
+              {bookingData.status === "Confirmed" && (
+                <Alert color="blue" mt="sm">
+                  Room allocation is finalized for this booking and cannot be changed.
+                </Alert>
+              )}
+            </div>
+          </>
+        )}
+
+        {(userRole === "VhCaretaker") && bookingData.status === "Confirmed" && assignedRooms.length === 0 && (
+          <>
+            <Divider />
+            <Stack spacing="xs">
+              <div style={{ fontWeight: 600, fontSize: "14px" }}>Allocate Rooms Before Check-In</div>
+              {allocationError && <Alert color="red">{allocationError}</Alert>}
+              <Alert color="blue">
+                Select exactly {requiredRoomCount} room(s) in category {bookingData.visitor_category}.
+              </Alert>
+              <MultiSelect
+                data={availableRooms.map((roomNumber) => ({ value: roomNumber, label: roomNumber }))}
+                value={selectedRooms}
+                onChange={(values) => {
+                  if (values.length > requiredRoomCount) {
+                    setAllocationError(`You can select only ${requiredRoomCount} room(s) for this booking.`);
+                    return;
+                  }
+                  setAllocationError("");
+                  setSelectedRooms(values);
+                }}
+                searchable
+                clearable
+                placeholder="Select available rooms"
+                disabled={isAllocatingRooms}
+              />
+              <Group position="right">
+                <Button
+                  onClick={handleAllocateRooms}
+                  loading={isAllocatingRooms}
+                  disabled={selectedRooms.length !== requiredRoomCount}
+                >
+                  Allocate Rooms
+                </Button>
+              </Group>
+            </Stack>
+          </>
+        )}
+
+        {/* Check-In Details */}
+        {!isCheckedIn && !isCompleted && (
+          <>
+            <Divider />
+            <div>
+              <div style={{ fontWeight: 600, fontSize: '14px', marginBottom: '8px' }}>
+                Check-In Details
+              </div>
+              <Grid gutter="xs">
+                <Grid.Col span={6}>
+                  <TextInput
+                    label="Name*"
+                    value={checkInForm.name}
+                    onChange={(e) =>
+                      setCheckInForm((prev) => ({ ...prev, name: e.currentTarget.value }))
+                    }
+                    disabled={isProcessing}
+                  />
+                </Grid.Col>
+                <Grid.Col span={6}>
+                  <TextInput
+                    label="Phone*"
+                    value={checkInForm.phone}
+                    onChange={(e) =>
+                      setCheckInForm((prev) => ({ ...prev, phone: e.currentTarget.value }))
+                    }
+                    disabled={isProcessing}
+                  />
+                </Grid.Col>
+                <Grid.Col span={6}>
+                  <TextInput
+                    label="Email"
+                    value={checkInForm.email}
+                    onChange={(e) =>
+                      setCheckInForm((prev) => ({ ...prev, email: e.currentTarget.value }))
+                    }
+                    disabled={isProcessing}
+                  />
+                </Grid.Col>
+                <Grid.Col span={6}>
+                  <TextInput
+                    label="Address"
+                    value={checkInForm.address}
+                    onChange={(e) =>
+                      setCheckInForm((prev) => ({ ...prev, address: e.currentTarget.value }))
+                    }
+                    disabled={isProcessing}
+                  />
+                </Grid.Col>
+              </Grid>
+            </div>
+          </>
+        )}
+
+        {/* Check-Out Bill Inputs */}
+        {isCheckedIn && (
+          <>
+            <Divider />
+            <CheckoutForm
+              checkoutForm={checkoutForm}
+              setCheckoutForm={setCheckoutForm}
+              isProcessing={isProcessing}
+            />
+          </>
+        )}
+
+        {/* UC-VH-010: Meal Booking History */}
+        {isCheckedIn && (
+          <>
+            <Divider />
+            <MealBookingHistory 
+              mealBookings={bookingData.meal_bookings || []}
+              totalMealsCost={bookingData.total_meals_cost || 0}
+            />
+          </>
+        )}
+
+        {/* Meal Booking Success Alert */}
+        {mealBookingSuccess && (
+          <Alert color="green" mt="md">
+            {mealBookingSuccess}
+          </Alert>
+        )}
+
+        {/* Actions */}
+        <Group position="right" mt="xl">
+          <Button
+            leftSection={<IconPrinter size={16} />}
+            variant="default"
+            onClick={handlePrint}
+            disabled={isProcessing}
+          >
+            Print
+          </Button>
+          
+          {/* UC-VH-010: Meal Booking - ONLY VhCaretaker can book meals for checked-in guests */}
+          {(userRole === "VhCaretaker") && isCheckedIn && (
+            <Button
+              leftSection={<IconToolsKitchen2 size={16} />}
+              color="blue"
+              variant="light"
+              onClick={() => setMealBookingOpen(true)}
+              disabled={isProcessing}
+            >
+              Book Meals
+            </Button>
+          )}
+          
+          {/* ONLY VhCaretaker can Check-In */}
+          {(userRole === "VhCaretaker") && !isCheckedIn && !isCompleted && (
+            <Button
+              leftSection={<IconCheck size={16} />}
+              color="green"
+              onClick={handleCheckIn}
+              disabled={!checkInForm.name || !checkInForm.phone || assignedRooms.length === 0}
+              loading={isProcessing}
+            >
+              Check In
+            </Button>
+          )}
+          
+          {/* ONLY VhCaretaker can Check-Out */}
+          {(userRole === "VhCaretaker") && isCheckedIn && (
+            <Button
+              leftSection={<IconX size={16} />}
+              color="orange"
+              onClick={handleCheckOut}
+              loading={isProcessing}
+            >
+              Check Out
+            </Button>
+          )}
+          <Button onClick={onClose} disabled={isProcessing}>
+            Close
+          </Button>
+        </Group>
+      </Stack>
+      
+      {/* UC-VH-010: Meal Booking Modal */}
+      <MealBookingForm
+        opened={mealBookingOpen}
+        onClose={() => setMealBookingOpen(false)}
+        bookingData={bookingData}
+        onMealBooking={handleMealBooking}
+      />
+    </Modal>
+  );
+}
+
+export default ViewActiveBookingModal;
+
diff --git a/src/Modules/Visitors_Hostel/components/common/ViewBookingModal.jsx b/src/Modules/Visitors_Hostel/components/common/ViewBookingModal.jsx
new file mode 100644
index 000000000..ea69c7a02
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/components/common/ViewBookingModal.jsx
@@ -0,0 +1,254 @@
+/**
+ * ViewBookingModal
+ * Modal component for viewing booking details with print functionality
+ * 
+ * Features:
+ * - Display all booking details
+ * - Show room assignments
+ * - Print booking confirmation
+ * - Status indicators
+ */
+
+import React from "react";
+import {
+  Modal,
+  Grid,
+  Text,
+  Badge,
+  Button,
+  Group,
+  Divider,
+  Stack,
+  Paper,
+  Alert,
+} from "@mantine/core";
+import { IconPrinter, IconCalendar, IconHome, IconUser } from "@tabler/icons-react";
+
+const STATUS_COLORS = {
+  Pending: "yellow",
+  Forward: "indigo",
+  Confirmed: "blue",
+  CheckedIn: "green",
+  Complete: "gray",
+  Canceled: "red",
+  Rejected: "red",
+};
+
+function ViewBookingModal({ opened, onClose, bookingData }) {
+  const primaryVisitor = bookingData?.visitors?.[0] || {};
+  const assignedRooms = bookingData?.rooms || [];
+
+  if (!bookingData) {
+    return (
+      <Modal opened={opened} onClose={onClose} title="Booking Details" size="lg">
+        <Alert type="info">No booking data available</Alert>
+      </Modal>
+    );
+  }
+
+  const handlePrint = () => {
+    const printContent = `
+      <div style="font-family: Arial, sans-serif; padding: 20px; max-width: 600px; margin: 0 auto;">
+        <h2 style="text-align: center; color: #228be6;">Visitor Hostel Booking Confirmation</h2>
+        <hr/>
+        
+        <h3>Booking Details</h3>
+        <p><strong>Booking ID:</strong> ${bookingData.id}</p>
+        <p><strong>Status:</strong> ${bookingData.status || "N/A"}</p>
+        <p><strong>Booking Date:</strong> ${bookingData.created_at ? new Date(bookingData.created_at).toLocaleDateString() : "N/A"}</p>
+        
+        <h3>Guest Information</h3>
+        <p><strong>Name:</strong> ${bookingData.intender_name || "N/A"}</p>
+        <p><strong>Email:</strong> ${primaryVisitor.email || "N/A"}</p>
+        <p><strong>Phone:</strong> ${primaryVisitor.phone || "N/A"}</p>
+        <p><strong>Organization:</strong> ${primaryVisitor.organization || "N/A"}</p>
+        <p><strong>Address:</strong> ${primaryVisitor.address || "N/A"}</p>
+        
+        <h3>Stay Details</h3>
+        <p><strong>Check-In:</strong> ${bookingData.booking_from || "N/A"}</p>
+        <p><strong>Check-Out:</strong> ${bookingData.booking_to || "N/A"}</p>
+        <p><strong>Room Category:</strong> ${bookingData.visitor_category || "N/A"}</p>
+        <p><strong>Number of Rooms:</strong> ${bookingData.number_of_rooms || "N/A"}</p>
+        <p><strong>Number of Persons:</strong> ${bookingData.person_count || "N/A"}</p>
+        
+        ${bookingData.purpose_of_visit ? `<h3>Purpose</h3><p>${bookingData.purpose_of_visit}</p>` : ""}
+        
+        ${assignedRooms.length > 0 ? `
+          <h3>Room Assignments</h3>
+          <p>${assignedRooms.map((room) => room.room_number).join(", ")}</p>
+        ` : ""}
+        
+        <hr/>
+        <p style="text-align: center; font-size: 12px; color: #666;">
+          Printed on: ${new Date().toLocaleString()}
+        </p>
+      </div>
+    `;
+
+    const printWindow = window.open("", "_blank");
+    printWindow.document.write(printContent);
+    printWindow.document.close();
+    printWindow.print();
+  };
+
+  return (
+    <Modal opened={opened} onClose={onClose} title="Booking Details" size="lg" centered>
+      <Stack spacing="md">
+        {/* Header with Status */}
+        <Paper p="md" style={{ backgroundColor: "#f1f3f5", borderRadius: "4px" }}>
+          <Group position="apart" mb="sm">
+            <div>
+              <Text fw={700} size="lg">
+                Booking #{bookingData.id}
+              </Text>
+              <Text size="sm" color="dimmed">
+                {bookingData.intender_name || "Guest"}
+              </Text>
+            </div>
+            <Badge
+              size="lg"
+              color={STATUS_COLORS[bookingData.status] || "gray"}
+              variant="filled"
+            >
+              {bookingData.status?.toUpperCase() || "UNKNOWN"}
+            </Badge>
+          </Group>
+          <Text size="xs" color="dimmed">
+            Posted: {bookingData.created_at ? new Date(bookingData.created_at).toLocaleDateString() : "N/A"}
+          </Text>
+        </Paper>
+
+        <Divider />
+
+        {/* Guest Information */}
+        <div>
+          <Group mb="sm">
+            <IconUser size={18} />
+            <Text fw={600}>Guest Information</Text>
+          </Group>
+          <Grid gutter="xs">
+            <Grid.Col span={6}>
+              <Text size="sm" color="dimmed">
+                Name
+              </Text>
+              <Text fw={500}>{bookingData.intender_name || "N/A"}</Text>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <Text size="sm" color="dimmed">
+                Email
+              </Text>
+              <Text fw={500}>{primaryVisitor.email || "N/A"}</Text>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <Text size="sm" color="dimmed">
+                Phone
+              </Text>
+              <Text fw={500}>{primaryVisitor.phone || "N/A"}</Text>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <Text size="sm" color="dimmed">
+                Organization
+              </Text>
+              <Text fw={500}>{primaryVisitor.organization || "N/A"}</Text>
+            </Grid.Col>
+            <Grid.Col span={12}>
+              <Text size="sm" color="dimmed">
+                Address
+              </Text>
+              <Text fw={500}>{primaryVisitor.address || "N/A"}</Text>
+            </Grid.Col>
+          </Grid>
+        </div>
+
+        <Divider />
+
+        {/* Stay Details */}
+        <div>
+          <Group mb="sm">
+            <IconHome size={18} />
+            <Text fw={600}>Stay Details</Text>
+          </Group>
+          <Grid gutter="xs">
+            <Grid.Col span={6}>
+              <Text size="sm" color="dimmed">
+                Check-In
+              </Text>
+              <Text fw={500}>{bookingData.booking_from || "N/A"}</Text>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <Text size="sm" color="dimmed">
+                Check-Out
+              </Text>
+              <Text fw={500}>{bookingData.booking_to || "N/A"}</Text>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <Text size="sm" color="dimmed">
+                Room Category
+              </Text>
+              <Text fw={500}>{bookingData.visitor_category || "N/A"}</Text>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <Text size="sm" color="dimmed">
+                Number of Rooms
+              </Text>
+              <Text fw={500}>{bookingData.number_of_rooms || "N/A"}</Text>
+            </Grid.Col>
+            <Grid.Col span={6}>
+              <Text size="sm" color="dimmed">
+                Number of Persons
+              </Text>
+              <Text fw={500}>{bookingData.person_count || "N/A"}</Text>
+            </Grid.Col>
+          </Grid>
+        </div>
+
+        {/* Room Assignments */}
+        {assignedRooms.length > 0 && (
+          <>
+            <Divider />
+            <div>
+              <Text fw={600} mb="sm">
+                Assigned Rooms
+              </Text>
+              <Group>
+                {assignedRooms.map((room, idx) => (
+                  <Badge key={idx} variant="light" color="blue">
+                    {room.room_number}
+                  </Badge>
+                ))}
+              </Group>
+            </div>
+          </>
+        )}
+
+        {/* Purpose */}
+        {bookingData.purpose_of_visit && (
+          <>
+            <Divider />
+            <div>
+              <Text fw={600} size="sm" mb="xs">
+                Purpose of Visit
+              </Text>
+              <Text size="sm">{bookingData.purpose_of_visit}</Text>
+            </div>
+          </>
+        )}
+
+        {/* Actions */}
+        <Group position="right" mt="xl">
+          <Button
+            leftIcon={<IconPrinter size={16} />}
+            variant="default"
+            onClick={handlePrint}
+          >
+            Print
+          </Button>
+          <Button onClick={onClose}>Close</Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}
+
+export default ViewBookingModal;
+
diff --git a/src/Modules/Visitors_Hostel/components/forms/AddInventoryItemsForm.jsx b/src/Modules/Visitors_Hostel/components/forms/AddInventoryItemsForm.jsx
new file mode 100644
index 000000000..037dc1008
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/components/forms/AddInventoryItemsForm.jsx
@@ -0,0 +1,371 @@
+import React, { useState } from "react";
+import {
+  Select,
+  TextInput,
+  Button,
+  Switch,
+  Group,
+  Modal,
+  Box,
+  Alert,
+  NumberInput,
+  Textarea,
+  FileInput,
+  Text,
+  Image,
+  Stack,
+} from "@mantine/core";
+import { IconUpload, IconPhoto } from "@tabler/icons-react";
+import { inventoryAPI } from "../../services/visitorHostelApi";
+import { 
+  validateRequiredFields,
+  validateInventoryItem,
+  validateBillNumber,
+  validateCost,
+  validatePositiveNumber,
+} from "../../utils/validators";
+
+function AddInventoryItemsForm({ onInventoryAdded }) {
+  const [billId, setBillId] = useState("");
+  const [itemName, setItemName] = useState("");
+  const [quantity, setQuantity] = useState("");
+  const [cost, setCost] = useState("");
+  const [consumable, setConsumable] = useState(false);
+  
+  // UC-VH-011: New inventory architecture fields
+  const [thresholdQuantity, setThresholdQuantity] = useState(5);
+  const [unit, setUnit] = useState("pieces");
+  const [category, setCategory] = useState("");
+  const [remark, setRemark] = useState("");
+  
+  // Bill photo upload (VhIncharge requirement)
+  const [billPhoto, setBillPhoto] = useState(null);
+  const [billPhotoPreview, setBillPhotoPreview] = useState(null);
+  
+  const [modalOpened, setModalOpened] = useState(false);
+  const [error, setError] = useState(null);
+  const [loading, setLoading] = useState(false);
+
+  const validateForm = () => {
+    // Check required fields including bill photo
+    const requiredFields = ["item_name", "bill_number", "quantity", "cost", "threshold_quantity", "unit"];
+    const formData = {
+      item_name: itemName,
+      bill_number: billId,
+      quantity: quantity,
+      cost: cost,
+      threshold_quantity: thresholdQuantity,
+      unit: unit,
+    };
+    
+    // VhIncharge must upload bill photo for inventory replenishment
+    if (!billPhoto) {
+      setError("Bill photo is required for inventory replenishment");
+      return false;
+    }
+    
+    // Validate file type
+    const allowedTypes = ['image/jpeg', 'image/jpg', 'image/png', 'image/gif'];
+    if (!allowedTypes.includes(billPhoto.type)) {
+      setError("Please upload a valid image file (JPEG, PNG, or GIF)");
+      return false;
+    }
+    
+    // Validate file size (max 5MB)
+    if (billPhoto.size > 5 * 1024 * 1024) {
+      setError("Bill photo must be less than 5MB");
+      return false;
+    }
+
+    if (!validateRequiredFields(formData, requiredFields)) {
+      setError("Please fill in all required fields");
+      return false;
+    }
+
+    // Validate item name
+    if (!validateInventoryItem(itemName)) {
+      setError("Item name must be 3-100 characters and contain only letters, numbers, spaces, and common punctuation");
+      return false;
+    }
+
+    // Validate bill number
+    if (!validateBillNumber(billId)) {
+      setError("Bill number must be 3-50 characters and contain only letters, numbers, hyphens, underscores, and forward slashes");
+      return false;
+    }
+
+    // Validate quantity
+    if (!validatePositiveNumber(quantity)) {
+      setError("Quantity must be a positive number");
+      return false;
+    }
+
+    // Validate cost
+    if (!validateCost(cost)) {
+      setError("Cost must be a valid amount between 0 and 10,00,000");
+      return false;
+    }
+
+    // Validate threshold quantity
+    if (!validatePositiveNumber(thresholdQuantity)) {
+      setError("Threshold quantity must be a positive number");
+      return false;
+    }
+
+    // Business rule: threshold should be reasonable
+    if (thresholdQuantity > quantity) {
+      setError("Threshold quantity cannot be greater than initial quantity");
+      return false;
+    }
+
+    return true;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    
+    if (!validateForm()) {
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    // Create FormData to handle file upload
+    const formData = new FormData();
+    formData.append('item_name', itemName.trim());
+    formData.append('bill_number', billId.trim());
+    formData.append('quantity', parseInt(quantity, 10));
+    formData.append('cost', parseInt(cost, 10));
+    formData.append('consumable', consumable);
+    formData.append('threshold_quantity', thresholdQuantity);
+    formData.append('unit', unit);
+    formData.append('category', category);
+    formData.append('remark', remark.trim());
+    formData.append('bill_photo', billPhoto);
+
+    try {
+      const result = await inventoryAPI.addInventory(formData);
+      if (result.success) {
+        setModalOpened(false);
+        setBillId("");
+        setItemName("");
+        setQuantity("");
+        setCost("");
+        setConsumable(false);
+        // Reset UC-VH-011 fields
+        setThresholdQuantity(5);
+        setUnit("pieces");
+        setCategory("");
+        setRemark("");
+        setBillPhoto(null);
+        setBillPhotoPreview(null);
+        
+        // Call parent callback to refresh inventory list
+        if (onInventoryAdded) {
+          onInventoryAdded();
+        }
+      } else {
+        setError(result.message || "Failed to add item");
+      }
+    } catch (err) {
+      setError(err.message || "An error occurred");
+    } finally {
+      setLoading(false);
+    }
+  };
+  
+  const handleBillPhotoChange = (file) => {
+    setBillPhoto(file);
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setBillPhotoPreview(reader.result);
+      };
+      reader.readAsDataURL(file);
+    } else {
+      setBillPhotoPreview(null);
+    }
+    setError(null);
+  };
+
+  return (
+    <Box p="md">
+      <Button
+        onClick={() => setModalOpened(true)}
+        size="md"
+        variant="filled"
+        color="blue"
+      >
+        Add Item
+      </Button>
+
+      <Modal
+        opened={modalOpened}
+        onClose={() => setModalOpened(false)}
+        title="Add Inventory Item"
+        size="lg"
+        centered
+      >
+        {error && (
+          <Alert type="error" mb="md">
+            {error}
+          </Alert>
+        )}
+
+        <form onSubmit={handleSubmit}>
+          <TextInput
+            label="Item Name"
+            placeholder="Enter item name"
+            value={itemName}
+            onChange={(e) => setItemName(e.target.value)}
+            required
+            mb="md"
+          />
+
+          <TextInput
+            label="Bill ID"
+            placeholder="Enter bill number"
+            value={billId}
+            onChange={(e) => setBillId(e.target.value)}
+            required
+            mb="md"
+          />
+
+          <Group grow mb="md">
+            <NumberInput
+              label="Quantity"
+              placeholder="Enter quantity"
+              value={quantity}
+              onChange={(value) => setQuantity(value)}
+              required
+              min={0}
+            />
+            <NumberInput
+              label="Cost"
+              placeholder="Enter cost"
+              value={cost}
+              onChange={(value) => setCost(value)}
+              required
+              min={0}
+            />
+          </Group>
+
+          {/* UC-VH-011: Threshold Management Fields (BR-VH-007) */}
+          <Group grow mb="md">
+            <NumberInput
+              label="Threshold Quantity"
+              description="Minimum quantity before alert (BR-VH-007)"
+              value={thresholdQuantity}
+              onChange={(value) => setThresholdQuantity(value)}
+              required
+              min={1}
+            />
+            <Select
+              label="Unit"
+              placeholder="Select unit"
+              value={unit}
+              onChange={(value) => setUnit(value)}
+              data={[
+                { value: "pieces", label: "Pieces" },
+                { value: "kg", label: "Kilograms" },
+                { value: "liters", label: "Liters" },
+                { value: "boxes", label: "Boxes" },
+                { value: "packets", label: "Packets" },
+                { value: "bottles", label: "Bottles" },
+                { value: "meters", label: "Meters" },
+                { value: "sets", label: "Sets" },
+              ]}
+              required
+            />
+          </Group>
+
+          <Select
+            label="Category"
+            placeholder="Select category"
+            value={category}
+            onChange={(value) => setCategory(value)}
+            data={[
+              { value: "cleaning", label: "Cleaning Supplies" },
+              { value: "maintenance", label: "Maintenance" },
+              { value: "bedding", label: "Bedding & Linens" },
+              { value: "kitchen", label: "Kitchen Supplies" },
+              { value: "toiletries", label: "Toiletries" },
+              { value: "furniture", label: "Furniture" },
+              { value: "electronics", label: "Electronics" },
+              { value: "stationery", label: "Stationery" },
+              { value: "safety", label: "Safety Equipment" },
+              { value: "other", label: "Other" },
+            ]}
+            mb="md"
+          />
+
+          <Switch
+            label="Consumable Item"
+            description="Items that are used up and need regular replenishment"
+            checked={consumable}
+            onChange={(e) => setConsumable(e.currentTarget.checked)}
+            mb="md"
+          />
+
+          <Textarea
+            label="Remarks"
+            placeholder="Additional notes or specifications"
+            value={remark}
+            onChange={(e) => setRemark(e.target.value)}
+            rows={3}
+            mb="md"
+          />
+          
+          {/* Bill Photo Upload - Required for VhIncharge */}
+          <Stack spacing="sm" mb="lg">
+            <Text fw={500} size="sm">
+              Bill Photo* 
+              <Text span c="dimmed" size="xs" ml="xs">
+                (Required for inventory replenishment)
+              </Text>
+            </Text>
+            <FileInput
+              placeholder="Upload bill photo"
+              accept="image/*"
+              value={billPhoto}
+              onChange={handleBillPhotoChange}
+              icon={<IconUpload size={14} />}
+              required
+            />
+            {billPhotoPreview && (
+              <Box>
+                <Text size="sm" c="dimmed" mb="xs">
+                  Bill Photo Preview:
+                </Text>
+                <Image
+                  src={billPhotoPreview}
+                  alt="Bill preview"
+                  width={200}
+                  height={150}
+                  fit="contain"
+                  withPlaceholder
+                  placeholder={<IconPhoto size={40} />}
+                />
+              </Box>
+            )}
+            <Text size="xs" c="dimmed">
+              Supported formats: JPEG, PNG, GIF (Max size: 5MB)
+            </Text>
+          </Stack>
+
+          <Group justify="flex-end">
+            <Button variant="outline" onClick={() => setModalOpened(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" loading={loading}>
+              Add Item
+            </Button>
+          </Group>
+        </form>
+      </Modal>
+    </Box>
+  );
+}
+
+export default AddInventoryItemsForm;
diff --git a/src/Modules/Visitors_Hostel/components/forms/BookingRequestForm.jsx b/src/Modules/Visitors_Hostel/components/forms/BookingRequestForm.jsx
new file mode 100644
index 000000000..837a9cc72
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/components/forms/BookingRequestForm.jsx
@@ -0,0 +1,524 @@
+/**
+ * BookingRequestForm
+ * Component for submitting new visitor hostel booking requests
+ * 
+ * Features:
+ * - Form validation
+ * - Guest type selection (Institute staff, Student, External)
+ * - Date range selection
+ * - Room category and count selection
+ * - Purpose of visit
+ * - Remarks
+ * - Integration with visitorHostelApi.js
+ */
+
+import React, { useEffect, useState } from "react";
+import {
+  Box,
+  TextInput,
+  Select,
+  NumberInput,
+  Textarea,
+  Button,
+  Group,
+  Modal,
+  Alert,
+  LoadingOverlay,
+  Stack,
+  Grid,
+  Text,
+} from "@mantine/core";
+import { IconAlertCircle } from "@tabler/icons-react";
+import { useSelector } from "react-redux";
+import { bookingsAPI, roomsAPI } from "../../services/visitorHostelApi";
+import {
+  validateEmail,
+  validatePhone,
+  validateDateRange,
+  validateRequiredFields,
+  validateName,
+  validatePurpose,
+  validateFutureDate,
+  validateStudentRelation,
+  validateOrganization,
+  validateAddress,
+  validatePositiveNumber,
+} from "../../utils/validators";
+
+const ROOM_CATEGORIES = [
+  { value: "A", label: "Category A" },
+  { value: "B", label: "Category B" },
+  { value: "C", label: "Category C" },
+  { value: "D", label: "Category D" },
+];
+
+const GUEST_TYPES = [
+  { value: "institute_staff", label: "Institute Staff" },
+  { value: "student", label: "Student" },
+  { value: "external", label: "External Guest" },
+];
+
+const STUDENT_RELATION_OPTIONS = [
+  { value: "Parent", label: "Parent" },
+  { value: "Spouse", label: "Spouse" },
+];
+
+const BILL_SETTLEMENT_OPTIONS = [
+  { value: "Intender", label: "Intender" },
+  { value: "Visitor", label: "Visitor" },
+  { value: "ProjectNo", label: "Project No" },
+  { value: "Institute", label: "Institute" },
+];
+
+function BookingRequestForm({ opened, onClose, onSuccess }) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [availableRoomCount, setAvailableRoomCount] = useState(null);
+  const [availabilityLoading, setAvailabilityLoading] = useState(false);
+  const [availabilityMessage, setAvailabilityMessage] = useState("");
+
+  // Get token for authentication check
+  const token = localStorage.getItem("authToken");
+  const role = useSelector((state) => state.user?.role);
+  const isStudentIndenter = (role || "").toLowerCase() === "student";
+  const todayDate = new Date().toISOString().split("T")[0];
+
+  const [formData, setFormData] = useState({
+    guestType: "external",
+    visitorName: "",
+    visitorEmail: "",
+    visitorPhone: "",
+    visitorOrganization: "",
+    visitorAddress: "",
+    intenderRelation: "",
+    bookingFrom: "",
+    bookingTo: "",
+    visitorCategory: "A",
+    billSettlement: "Intender",
+    personCount: 1,
+    numberOfRooms: 1,
+    purpose: "",
+    remarks: "",
+  });
+
+  const minCheckoutDate = formData.bookingFrom && formData.bookingFrom > todayDate
+    ? formData.bookingFrom
+    : todayDate;
+
+  const handleChange = (field, value) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+    setError(null);
+  };
+
+  useEffect(() => {
+    const loadAvailability = async () => {
+      if (!formData.bookingFrom || !formData.bookingTo || !validateDateRange(formData.bookingFrom, formData.bookingTo)) {
+        setAvailableRoomCount(null);
+        setAvailabilityMessage("");
+        return;
+      }
+
+      // Ensure category has a default value if empty
+      const categoryToCheck = formData.visitorCategory || "A";
+
+      setAvailabilityLoading(true);
+      try {
+        const availableRooms = await roomsAPI.getAvailableRooms(
+          formData.bookingFrom,
+          formData.bookingTo,
+          categoryToCheck,
+        );
+        if (Array.isArray(availableRooms)) {
+          setAvailableRoomCount(availableRooms.length);
+          setAvailabilityMessage(`${availableRooms.length} room(s) available for the selected dates.`);
+        } else {
+          setAvailableRoomCount(null);
+          setAvailabilityMessage("");
+        }
+      } catch (err) {
+        setAvailableRoomCount(null);
+        setAvailabilityMessage(err.message || "Unable to check room availability right now.");
+      } finally {
+        setAvailabilityLoading(false);
+      }
+    };
+
+    loadAvailability();
+  }, [formData.bookingFrom, formData.bookingTo, formData.visitorCategory]);
+
+  const validateForm = () => {
+    // Check required fields
+    if (!validateRequiredFields(formData, ["visitorName", "visitorPhone", "bookingFrom", "bookingTo", "purpose"])) {
+      setError("Please fill in all required fields");
+      return false;
+    }
+
+    // Validate visitor name
+    if (!validateName(formData.visitorName)) {
+      setError("Visitor name must be at least 2 characters and contain only letters, spaces, and common punctuation");
+      return false;
+    }
+
+    // Validate phone number
+    if (!validatePhone(formData.visitorPhone)) {
+      setError("Please enter a valid phone number (10-13 digits)");
+      return false;
+    }
+
+    // Validate email if provided
+    if (formData.visitorEmail && !validateEmail(formData.visitorEmail)) {
+      setError("Please enter a valid email address");
+      return false;
+    }
+
+    // Validate organization if provided
+    if (formData.visitorOrganization && !validateOrganization(formData.visitorOrganization)) {
+      setError("Organization name must be 2-100 characters long");
+      return false;
+    }
+
+    // Validate address if provided
+    if (formData.visitorAddress && !validateAddress(formData.visitorAddress)) {
+      setError("Address must be 10-500 characters long if provided");
+      return false;
+    }
+
+    // Validate purpose of visit
+    if (!validatePurpose(formData.purpose)) {
+      setError("Purpose of visit must be 5-200 characters long");
+      return false;
+    }
+
+    // Validate dates
+    if (!validateFutureDate(formData.bookingFrom)) {
+      setError("Check-in date cannot be in the past");
+      return false;
+    }
+
+    if (!validateDateRange(formData.bookingFrom, formData.bookingTo)) {
+      setError("Check-out date must be after check-in date");
+      return false;
+    }
+
+    // BR-VH-008: Student intender validation
+    if (isStudentIndenter) {
+      if (!formData.intenderRelation) {
+        setError("Relation with visitor is required for student indenters");
+        return false;
+      }
+      if (!validateStudentRelation(formData.intenderRelation)) {
+        setError("Students can request booking only for Parent or Spouse");
+        return false;
+      }
+    }
+
+    // Validate room and person counts
+    if (!validatePositiveNumber(formData.personCount)) {
+      setError("Person count must be a positive number");
+      return false;
+    }
+
+    if (!validatePositiveNumber(formData.numberOfRooms)) {
+      setError("Number of rooms must be a positive number");
+      return false;
+    }
+
+    if (formData.personCount > formData.numberOfRooms * 4) {
+      setError("Too many persons for the number of rooms requested");
+      return false;
+    }
+
+    // Check room availability
+    if (availableRoomCount !== null && formData.numberOfRooms > availableRoomCount) {
+      setError(`Only ${availableRoomCount} room(s) are available for the selected dates`);
+      return false;
+    }
+
+    return true;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!validateForm()) return;
+
+    // Check if user is authenticated
+    if (!token) {
+      setError("Authentication token not found. Please log in again.");
+      console.error("No auth token in localStorage");
+      return;
+    }
+
+    setLoading(true);
+    try {
+      // Backend will use request.user.id for intender, so we don't need to send it
+      const payload = {
+        name: formData.visitorName,
+        email: formData.visitorEmail,
+        phone: formData.visitorPhone,
+        organization: formData.visitorOrganization,
+        address: formData.visitorAddress,
+        intender_relation: formData.intenderRelation,
+        booking_from: formData.bookingFrom,
+        booking_to: formData.bookingTo,
+        category: formData.visitorCategory,
+        number_of_people: formData.personCount,
+        number_of_rooms: formData.numberOfRooms,
+        purpose_of_visit: formData.purpose,
+        remarks_during_booking_request: formData.remarks,
+        bill_settlement: formData.billSettlement,
+        nationality: "", // Optional
+      };
+
+      console.log("Submitting booking request with payload:", payload);
+      const response = await bookingsAPI.requestBooking(payload);
+      console.log("Booking request submitted successfully:", response);
+
+      // Reset form
+      setFormData({
+        guestType: "external",
+        visitorName: "",
+        visitorEmail: "",
+        visitorPhone: "",
+        visitorOrganization: "",
+        visitorAddress: "",
+        intenderRelation: "",
+        bookingFrom: "",
+        bookingTo: "",
+        visitorCategory: "A",
+        billSettlement: "Intender",
+        personCount: 1,
+        numberOfRooms: 1,
+        purpose: "",
+        remarks: "",
+      });
+
+      onSuccess?.();
+      onClose();
+    } catch (err) {
+      setError(err.message || "Failed to submit booking request. Please try again.");
+      console.error("Error submitting booking request:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title="Submit Booking Request"
+      size="lg"
+      centered
+      closeOnClickOutside={!loading}
+    >
+      <Box position="relative">
+        <LoadingOverlay visible={loading} />
+
+        {error && (
+          <Alert icon={<IconAlertCircle size={16} />} title="Error" color="red" mb="md">
+            {error}
+          </Alert>
+        )}
+
+        <form onSubmit={handleSubmit}>
+          <Stack spacing="md">
+            {/* Guest Type */}
+            <Select
+              label="Guest Type*"
+              placeholder="Select guest type"
+              data={GUEST_TYPES}
+              value={formData.guestType}
+              onChange={(val) => handleChange("guestType", val)}
+              required
+            />
+
+            <Grid>
+              <Grid.Col span={6}>
+                <TextInput
+                  label="Visitor Name*"
+                  placeholder="Enter name"
+                  value={formData.visitorName}
+                  onChange={(e) => handleChange("visitorName", e.target.value)}
+                  required
+                />
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <TextInput
+                  label="Phone Number*"
+                  placeholder="10-digit number"
+                  value={formData.visitorPhone}
+                  onChange={(e) => handleChange("visitorPhone", e.target.value)}
+                  required
+                />
+              </Grid.Col>
+            </Grid>
+
+            {isStudentIndenter ? (
+              <Select
+                label="Relation with Visitor*"
+                placeholder="Select relation"
+                data={STUDENT_RELATION_OPTIONS}
+                value={formData.intenderRelation}
+                onChange={(val) => handleChange("intenderRelation", val || "")}
+                description="As a student, you can book only for Parent or Spouse."
+                required
+              />
+            ) : (
+              <TextInput
+                label="Relation with Visitor"
+                placeholder="e.g., Parent, Spouse, Colleague"
+                value={formData.intenderRelation}
+                onChange={(e) => handleChange("intenderRelation", e.target.value)}
+              />
+            )}
+
+            {(availabilityLoading || availabilityMessage) && (
+              <Alert
+                icon={<IconAlertCircle size={16} />}
+                title={availabilityLoading ? "Checking availability" : "Availability"}
+                color={availableRoomCount !== null && formData.numberOfRooms > availableRoomCount ? "red" : "blue"}
+              >
+                {availabilityLoading ? "Checking room availability for the selected dates..." : availabilityMessage}
+              </Alert>
+            )}
+
+            <Grid>
+              <Grid.Col span={6}>
+                <TextInput
+                  label="Email"
+                  placeholder="visitor@example.com"
+                  type="email"
+                  value={formData.visitorEmail}
+                  onChange={(e) => handleChange("visitorEmail", e.target.value)}
+                />
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <TextInput
+                  label="Organization"
+                  placeholder="Organization name"
+                  value={formData.visitorOrganization}
+                  onChange={(e) => handleChange("visitorOrganization", e.target.value)}
+                />
+              </Grid.Col>
+            </Grid>
+
+            <TextInput
+              label="Address"
+              placeholder="Visitor address"
+              value={formData.visitorAddress}
+              onChange={(e) => handleChange("visitorAddress", e.target.value)}
+            />
+
+            {/* Booking Dates */}
+            <Text fw={500} size="sm">
+              Booking Dates
+            </Text>
+            <Grid>
+              <Grid.Col span={6}>
+                <TextInput
+                  label="Check-In Date*"
+                  type="date"
+                  min={todayDate}
+                  value={formData.bookingFrom}
+                  onChange={(e) => handleChange("bookingFrom", e.target.value)}
+                  required
+                />
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <TextInput
+                  label="Check-Out Date*"
+                  type="date"
+                  min={minCheckoutDate}
+                  value={formData.bookingTo}
+                  onChange={(e) => handleChange("bookingTo", e.target.value)}
+                  required
+                />
+              </Grid.Col>
+            </Grid>
+
+            {/* Room Selection */}
+            <Text fw={500} size="sm">
+              Room Selection
+            </Text>
+            <Grid>
+              <Grid.Col span={6}>
+                <Select
+                  label="Room Category*"
+                  placeholder="Select category"
+                  data={ROOM_CATEGORIES}
+                  value={formData.visitorCategory}
+                  onChange={(val) => handleChange("visitorCategory", val || "A")}
+                  required
+                />
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <Select
+                  label="Bill Settlement*"
+                  placeholder="Select bill settlement"
+                  data={BILL_SETTLEMENT_OPTIONS}
+                  value={formData.billSettlement}
+                  onChange={(val) => handleChange("billSettlement", val)}
+                  required
+                />
+              </Grid.Col>
+            </Grid>
+
+            <Grid>
+              <Grid.Col span={6}>
+                <NumberInput
+                  label="Number of Rooms*"
+                  placeholder="Enter count"
+                  min={1}
+                  value={formData.numberOfRooms}
+                  onChange={(val) => handleChange("numberOfRooms", val)}
+                  required
+                />
+              </Grid.Col>
+            </Grid>
+
+            <NumberInput
+              label="Number of Persons*"
+              placeholder="Enter count"
+              min={1}
+              value={formData.personCount}
+              onChange={(val) => handleChange("personCount", val)}
+              required
+            />
+
+            {/* Purpose & Remarks */}
+            <Textarea
+              label="Purpose of Visit*"
+              placeholder="Enter purpose"
+              value={formData.purpose}
+              onChange={(e) => handleChange("purpose", e.target.value)}
+              minRows={2}
+              required
+            />
+
+            <Textarea
+              label="Remarks"
+              placeholder="Additional remarks (optional)"
+              value={formData.remarks}
+              onChange={(e) => handleChange("remarks", e.target.value)}
+              minRows={2}
+            />
+
+            {/* Actions */}
+            <Group position="right" mt="xl">
+              <Button variant="default" onClick={onClose} disabled={loading}>
+                Cancel
+              </Button>
+              <Button type="submit" loading={loading} disabled={availabilityLoading || (availableRoomCount !== null && formData.numberOfRooms > availableRoomCount)}>
+                Submit Request
+              </Button>
+            </Group>
+          </Stack>
+        </form>
+      </Box>
+    </Modal>
+  );
+}
+
+export default BookingRequestForm;
+
diff --git a/src/Modules/Visitors_Hostel/components/forms/CheckoutForm.jsx b/src/Modules/Visitors_Hostel/components/forms/CheckoutForm.jsx
new file mode 100644
index 000000000..07bc0707a
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/components/forms/CheckoutForm.jsx
@@ -0,0 +1,25 @@
+/**
+ * CheckoutForm
+ * Component for VhCaretaker to checkout visitors and finalize bills
+ * 
+ * Location: components/forms/CheckoutForm.jsx
+ * Implementation: Root-level CheckoutForm.jsx (to be moved here)
+ */
+
+import React, { useState } from "react";
+import { Box, Button, TextInput, Textarea, Select } from "@mantine/core";
+
+/**
+ * TODO: This is a wrapper - implement full checkout form with:
+ * - Visitor selection
+ * - Room checkout
+ * - Bill calculation
+ * - Payment status
+ */
+export default function CheckoutForm() {
+  return (
+    <Box p="md">
+      <p>Checkout form implementation pending...</p>
+    </Box>
+  );
+}
diff --git a/src/Modules/Visitors_Hostel/confirmBooking_Incharge.jsx b/src/Modules/Visitors_Hostel/components/forms/ConfirmBookingForm.jsx
similarity index 65%
rename from src/Modules/Visitors_Hostel/confirmBooking_Incharge.jsx
rename to src/Modules/Visitors_Hostel/components/forms/ConfirmBookingForm.jsx
index ae7845a8d..014422548 100644
--- a/src/Modules/Visitors_Hostel/confirmBooking_Incharge.jsx
+++ b/src/Modules/Visitors_Hostel/components/forms/ConfirmBookingForm.jsx
@@ -13,9 +13,9 @@ import {
   MultiSelect,
   Select,
 } from "@mantine/core";
-import axios from "axios";
-import { host } from "../../routes/globalRoutes";
-import { confirmBookingRoute } from "../../routes/visitorsHostelRoutes";
+import { bookingsAPI, roomsAPI } from "../../services/visitorHostelApi";
+import { ErrorHandlers } from "../../utils/errorHandler";
+import ErrorBoundary from "../common/ErrorBoundary";
 
 function ConfirmBookingIn({
   forwardmodalOpened,
@@ -24,7 +24,7 @@ function ConfirmBookingIn({
   bookingf,
 }) {
   console.log("BOOKING ID: ", bookingId); // Log booking ID for debugging
-  console.log("booking fetched as Props: ", bookingf);
+      
   const [formData, setFormData] = useState({
     intenderUsername: "",
     intenderEmail: "",
@@ -50,35 +50,34 @@ function ConfirmBookingIn({
   useEffect(() => {
     const fetchBookingData = async () => {
       try {
-        const response = await axios.get(
-          `${host}/visitorhostel/get-booking-details/${bookingId}/`,
-        );
-        const booking = response.data;
-        console.log("BOOKING FOR FORM: ", booking);
-        setFormData((prevFormData) => ({
-          ...prevFormData,
-          intenderUsername: booking.intenderUsername,
-          intenderEmail: booking.intenderEmail,
-          bookingFrom: booking.bookingFrom,
-          bookingTo: booking.bookingTo,
-          visitorCategory: booking.visitorCategory,
-          modifiedCategory: booking.visitorCategory || "", // Use optional chaining and fallback
-          personCount: booking.personCount,
-          numberOfRooms: booking.numberOfRooms,
-          rooms: bookingf?.rooms || [], // Use optional chaining and fallback
-          purpose: booking.purpose,
-          billToBeSettledBy: booking.billToBeSettledBy,
-          remarks: booking.remarks,
-          visitorName: booking.visitorName,
-          visitorEmail: booking.visitorEmail,
-          visitorPhone: booking.visitorPhone,
-          visitorOrganization: booking.visitorOrganization,
-          visitorAddress: booking.visitorAddress,
-        }));
-        setAvailableRooms(
-          booking.availableRooms.map((room) => room.room_number),
-        );
-        console.log("Rooms Available are: ", booking.availableRooms);
+        // TODO: Implement GET /api/bookings/{bookingId}/ endpoint on backend
+        // Currently, this endpoint is not available in the REST API
+        
+        // For now, use booking data from props (bookingf)
+        if (bookingf) {
+          setFormData((prevFormData) => ({
+            ...prevFormData,
+            intenderUsername: bookingf.intenderUsername || "",
+            intenderEmail: bookingf.intenderEmail || "",
+            bookingFrom: bookingf.bookingFrom || "",
+            bookingTo: bookingf.bookingTo || "",
+            visitorCategory: bookingf.visitorCategory || "",
+            modifiedCategory: bookingf.visitorCategory || "",
+            personCount: bookingf.personCount || 1,
+            numberOfRooms: bookingf.numberOfRooms || 1,
+            rooms: bookingf?.rooms?.map((room) => room.room_number) || [],
+            purpose: bookingf.purpose || "",
+            billToBeSettledBy: bookingf.billToBeSettledBy || "",
+            remarks: bookingf.remarks || "",
+            visitorName: bookingf.visitorName || "",
+            visitorEmail: bookingf.visitorEmail || "",
+            visitorPhone: bookingf.visitorPhone || "",
+            visitorOrganization: bookingf.visitorOrganization || "",
+            visitorAddress: bookingf.visitorAddress || "",
+          }));
+          const rooms = bookingf.availableRooms?.map((room) => room.room_number) || [];
+          setAvailableRooms(rooms);
+        }
       } catch (error) {
         console.error("Error fetching booking data", error);
       }
@@ -96,60 +95,58 @@ function ConfirmBookingIn({
     }));
   };
 
-  function getCookie(name) {
-    let cookieValue = null;
-    if (document.cookie && document.cookie !== "") {
-      const cookies = document.cookie.split(";");
-      for (let i = 0; i < cookies.length; i += 1) {
-        const cookie = cookies[i].trim();
-        // Does this cookie string begin with the name we want?
-        if (cookie.substring(0, name.length + 1) === `${name}=`) {
-          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-          break;
-        }
-      }
-    }
-    return cookieValue;
-  }
+  // Token handling moved to service layer interceptor - getCookie no longer needed
 
   const handleSubmit = async (e, action) => {
     e.preventDefault();
     setLoading(true);
 
-    const token = localStorage.getItem("authToken");
-    const csrfToken = getCookie("csrftoken");
-
-    const requestData = {
-      booking_id: bookingId,
-      modified_category: formData.modifiedCategory,
-      rooms: formData.rooms,
-      remarks: formData.remarks,
-      action, // "accept" or "reject" as action
-    };
-
     try {
-      // Send the POST request to the confirm_booking_new endpoint
-      const response = await axios.post(confirmBookingRoute, requestData, {
-        headers: {
-          Authorization: `Token ${token}`,
-          "X-CSRFToken": csrfToken,
-          "Content-Type": "application/json",
-        },
-      });
+      if (action === "accept") {
+        // SECURITY ENHANCEMENT: Room allocation now happens ONLY during VhIncharge confirmation
+        // Validate that rooms are selected before confirming
+        if (!formData.rooms || formData.rooms.length === 0) {
+          alert("Please select at least one room before confirming the booking.");
+          setLoading(false);
+          return;
+        }
+        
+        // Confirm the booking with new category and rooms - this will allocate rooms
+        const response = await bookingsAPI.confirmBooking(
+          bookingId,
+          formData.modifiedCategory,
+          formData.rooms,
+        );
+        console.log("Booking confirmed and rooms allocated", response);
+        alert("Booking confirmed successfully! Rooms have been allocated to the guest.");
+      } else if (action === "reject") {
+        // Reject the booking with remarks
+        const response = await bookingsAPI.rejectBooking(
+          bookingId,
+          formData.remarks,
+        );
+        console.log("Booking rejected", response);
+        alert("Booking rejected successfully.");
+      }
 
-      console.log(`Booking ${action}ed`, response.data);
       onClose(); // Close the modal after action
+      window.location.reload(); // Refresh to show updated bookings list
     } catch (error) {
-      console.error(`Error ${action}ing booking:`, error);
+      // Use centralized error handling
+      if (action === "accept") {
+        ErrorHandlers.bookingError(error, 'Booking Confirmation');
+      } else {
+        ErrorHandlers.bookingError(error, 'Booking Rejection');
+      }
     } finally {
       setLoading(false);
     }
-    window.location.reload();
   };
 
   return (
-    <MantineProvider theme={{ fontFamily: "Arial, sans-serif" }}>
-      <Modal
+    <ErrorBoundary>
+      <MantineProvider theme={{ fontFamily: "Arial, sans-serif" }}>
+        <Modal
         opened={forwardmodalOpened}
         onClose={onClose}
         title="Action Booking Request"
@@ -235,7 +232,8 @@ function ConfirmBookingIn({
 
             <Grid.Col span={12}>
               <MultiSelect
-                label="Rooms (required*)"
+                label="🔒 Rooms (required*) - ALLOCATION HAPPENS ONLY AFTER CONFIRMATION"
+                description="⚠️ SECURITY: Rooms will be allocated ONLY when you click 'Accept'. This ensures VhIncharge approval before room assignment."
                 value={formData.rooms}
                 onChange={(value) => handleInputChange("rooms", value)}
                 data={availableRooms.map((room) => ({
@@ -245,6 +243,16 @@ function ConfirmBookingIn({
                 required
                 searchable
                 clearable
+                styles={{
+                  label: { 
+                    fontWeight: 'bold',
+                    color: '#d63384'
+                  },
+                  description: {
+                    color: '#fd7e14',
+                    fontWeight: 500
+                  }
+                }}
               />
             </Grid.Col>
 
@@ -334,8 +342,9 @@ function ConfirmBookingIn({
             </Grid.Col>
           </Grid>
         </form>
-      </Modal>
-    </MantineProvider>
+        </Modal>
+      </MantineProvider>
+    </ErrorBoundary>
   );
 }
 
diff --git a/src/Modules/Visitors_Hostel/forwardBooking.jsx b/src/Modules/Visitors_Hostel/components/forms/ForwardBookingForm.jsx
similarity index 71%
rename from src/Modules/Visitors_Hostel/forwardBooking.jsx
rename to src/Modules/Visitors_Hostel/components/forms/ForwardBookingForm.jsx
index 2efa6661d..90bce050e 100644
--- a/src/Modules/Visitors_Hostel/forwardBooking.jsx
+++ b/src/Modules/Visitors_Hostel/components/forms/ForwardBookingForm.jsx
@@ -13,9 +13,7 @@ import {
   LoadingOverlay,
   MultiSelect,
 } from "@mantine/core";
-import axios from "axios";
-import { host } from "../../routes/globalRoutes";
-import { fetchAvailableRoomsRoute } from "../../routes/visitorsHostelRoutes";
+import { bookingsAPI, roomsAPI } from "../../services/visitorHostelApi";
 
 function ForwardBookingForm({
   forwardmodalOpened,
@@ -49,56 +47,21 @@ function ForwardBookingForm({
 
   useEffect(() => {
     const fetchAvailableRooms = async (startDate, endDate) => {
-      const token = localStorage.getItem("authToken");
-      if (!token) {
-        return console.error("No authentication token found!");
-      }
-
       try {
-        const response = await axios.post(
-          fetchAvailableRoomsRoute,
-          {
-            start_date: startDate,
-            end_date: endDate,
-          },
-          {
-            headers: {
-              Authorization: `Token ${token}`,
-              "Content-Type": "application/json",
-            },
-          },
-        );
-        setAvailableRooms(response.data.available_rooms);
+        const rooms = await roomsAPI.getAvailableRooms(startDate, endDate);
+        setAvailableRooms(rooms || []);
       } catch (error) {
         console.error("Error fetching available rooms:", error);
       }
     };
+
     const fetchBookingData = async () => {
       try {
-        const response = await axios.get(
-          `${host}/visitorhostel/get-booking-details/${bookingId}/`,
-        );
-        const booking = response.data;
-        setFormData({
-          intenderUsername: booking.intenderUsername,
-          intenderEmail: booking.intenderEmail,
-          bookingFrom: booking.bookingFrom,
-          bookingTo: booking.bookingTo,
-          visitorCategory: booking.visitorCategory,
-          modifiedCategory: booking.visitorCategory, // Keep this field empty for editing
-          personCount: booking.personCount,
-          numberOfRooms: booking.numberOfRooms,
-          rooms: [], // Keep this field empty for editing
-          purpose: booking.purpose,
-          billToBeSettledBy: booking.billToBeSettledBy,
-          remarks: booking.remarks,
-          visitorName: booking.visitorName,
-          visitorEmail: booking.visitorEmail,
-          visitorPhone: booking.visitorPhone,
-          visitorOrganization: booking.visitorOrganization,
-          visitorAddress: booking.visitorAddress,
-        });
-        fetchAvailableRooms(booking.bookingFrom, booking.bookingTo);
+        // TODO: Implement GET /api/bookings/{bookingId}/ endpoint on backend
+        // Currently, this endpoint is not available in the REST API
+        console.log("TODO: Fetch booking data for ID:", bookingId);
+        // For now, booking data would need to be passed in as props or fetched from parent
+        // This component should ideally receive booking data via props
       } catch (error) {
         console.error("Error fetching booking data", error);
       }
@@ -113,49 +76,21 @@ function ForwardBookingForm({
     setFormData({ ...formData, [name]: value });
   };
 
-  function getCookie(name) {
-    let cookieValue = null;
-    if (document.cookie && document.cookie !== "") {
-      const cookies = document.cookie.split(";");
-      for (let i = 0; i < cookies.length; i += 1) {
-        const cookie = cookies[i].trim();
-        // Does this cookie string begin with the name we want?
-        if (cookie.substring(0, name.length + 1) === `${name}=`) {
-          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-          break;
-        }
-      }
-    }
-    return cookieValue;
-  }
+  // Token handling moved to service layer interceptor - getCookie no longer needed
 
   const handleSubmit = async (e) => {
     e.preventDefault();
     setLoading(true);
 
-    const token = localStorage.getItem("authToken");
-    const csrfToken = getCookie("csrftoken");
-
-    const requestData = {
-      booking_id: bookingId,
-      modified_category: formData.modifiedCategory,
-      rooms: formData.rooms,
-      remarks: formData.remarks,
-    };
-
     try {
-      const response = await axios.post(
-        `${host}/visitorhostel/forward-booking-new/`,
-        requestData,
-        {
-          headers: {
-            Authorization: `Token ${token}`,
-            "X-CSRFToken": csrfToken,
-            "Content-Type": "application/json",
-          },
-        },
+      // Use bookingsAPI service to forward booking
+      const response = await bookingsAPI.forwardBooking(
+        bookingId,
+        formData.modifiedCategory,
+        formData.rooms,
+        formData.remarks,
       );
-      console.log("Form submitted", response.data);
+      console.log("Form submitted", response);
       onBookingForward(); // Call the fetch function to refresh bookings
       onClose(); // Close the modal after the operation
     } catch (error) {
diff --git a/src/Modules/Visitors_Hostel/components/forms/InventoryForm.jsx b/src/Modules/Visitors_Hostel/components/forms/InventoryForm.jsx
new file mode 100644
index 000000000..a2d23ca95
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/components/forms/InventoryForm.jsx
@@ -0,0 +1,11 @@
+/**
+ * InventoryForm
+ * UC-VH-011: Enhanced inventory form with threshold management (BR-VH-007)
+ * Component for VhIncharge and VhCaretaker to add inventory items
+ * 
+ * Location: components/forms/InventoryForm.jsx
+ */
+
+import AddInventoryItemsForm from "./AddInventoryItemsForm";
+
+export default AddInventoryItemsForm;
diff --git a/src/Modules/Visitors_Hostel/components/forms/MealBookingForm.jsx b/src/Modules/Visitors_Hostel/components/forms/MealBookingForm.jsx
new file mode 100644
index 000000000..2ec8ec222
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/components/forms/MealBookingForm.jsx
@@ -0,0 +1,406 @@
+/**
+ * MealBookingForm
+ * Modal component for booking meals for guests during their stay
+ * 
+ * Features:
+ * - UC-VH-010: Meal selection for morning tea, breakfast, lunch, evening tea, dinner
+ * - BR-VH-011: Deadline validation (Lunch ≤ 09:00, Dinner ≤ 14:00)
+ * - Real-time deadline checking
+ * - Multiple meal selection
+ * - Cost calculation
+ * 
+ * Only VhCaretaker and VhIncharge can book meals
+ */
+
+import React, { useState, useEffect } from "react";
+import {
+  Modal,
+  Grid,
+  Button,
+  Group,
+  Divider,
+  Stack,
+  Paper,
+  Alert,
+  NumberInput,
+  Checkbox,
+  Badge,
+  Title,
+} from "@mantine/core";
+import { 
+  IconCoffee, 
+  IconToolsKitchen2, 
+  IconClock, 
+  IconCalendar,
+  IconAlertCircle 
+} from "@tabler/icons-react";
+
+const MEAL_TYPES = {
+  m_tea: { 
+    label: "Morning Tea", 
+    icon: <IconCoffee size={16} />, 
+    cost: 10,
+    deadline: "09:00",
+    color: "orange"
+  },
+  breakfast: { 
+    label: "Breakfast", 
+    icon: <IconToolsKitchen2 size={16} />, 
+    cost: 50,
+    deadline: "09:00",
+    color: "yellow"
+  },
+  lunch: { 
+    label: "Lunch", 
+    icon: <IconToolsKitchen2 size={16} />, 
+    cost: 100,
+    deadline: "09:00",
+    color: "green"
+  },
+  eve_tea: { 
+    label: "Evening Tea", 
+    icon: <IconCoffee size={16} />, 
+    cost: 10,
+    deadline: "14:00",
+    color: "orange"
+  },
+  dinner: { 
+    label: "Dinner", 
+    icon: <IconToolsKitchen2 size={16} />, 
+    cost: 100,
+    deadline: "14:00",
+    color: "blue"
+  }
+};
+
+function MealBookingForm({ opened, onClose, bookingData, onMealBooking }) {
+  const [mealForm, setMealForm] = useState({
+    m_tea: 0,
+    breakfast: 0,
+    lunch: 0,
+    eve_tea: 0,
+    dinner: 0,
+    meal_type: ""
+  });
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [currentTime, setCurrentTime] = useState(new Date());
+  const [deadlineWarnings, setDeadlineWarnings] = useState([]);
+
+  const primaryVisitor = bookingData?.visitors?.[0] || {};
+
+  // Update current time every minute for deadline checking
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setCurrentTime(new Date());
+    }, 60000); // Update every minute
+
+    return () => clearInterval(interval);
+  }, []);
+
+  // Check deadlines when form changes
+  useEffect(() => {
+    checkDeadlines();
+  }, [mealForm, currentTime]);
+
+  // Reset form when modal opens
+  useEffect(() => {
+    if (opened) {
+      setMealForm({
+        m_tea: 0,
+        breakfast: 0,
+        lunch: 0,
+        eve_tea: 0,
+        dinner: 0,
+        meal_type: ""
+      });
+      setDeadlineWarnings([]);
+    }
+  }, [opened]);
+
+  const checkDeadlines = () => {
+    const warnings = [];
+    const currentHour = currentTime.getHours();
+    const currentMinute = currentTime.getMinutes();
+    const currentTimeDecimal = currentHour + currentMinute / 60;
+
+    // BR-VH-011: Check meal booking deadlines
+    Object.keys(MEAL_TYPES).forEach(mealType => {
+      if (mealForm[mealType] > 0) {
+        const meal = MEAL_TYPES[mealType];
+        const [deadlineHour, deadlineMinute] = meal.deadline.split(':').map(Number);
+        const deadlineDecimal = deadlineHour + deadlineMinute / 60;
+
+        if (currentTimeDecimal > deadlineDecimal) {
+          warnings.push({
+            meal: meal.label,
+            deadline: meal.deadline,
+            current: `${currentHour.toString().padStart(2, '0')}:${currentMinute.toString().padStart(2, '0')}`
+          });
+        }
+      }
+    });
+
+    setDeadlineWarnings(warnings);
+  };
+
+  const handleMealChange = (mealType, value) => {
+    setMealForm(prev => ({
+      ...prev,
+      [mealType]: Math.max(0, Number(value || 0))
+    }));
+  };
+
+  const handleQuickSelect = (mealType) => {
+    // Quick select: toggle between 0 and number of visitors
+    const visitorCount = bookingData?.visitors?.length || 1;
+    const currentValue = mealForm[mealType];
+    const newValue = currentValue === 0 ? visitorCount : 0;
+    
+    handleMealChange(mealType, newValue);
+  };
+
+  const calculateTotalCost = () => {
+    return Object.keys(MEAL_TYPES).reduce((total, mealType) => {
+      return total + (mealForm[mealType] * MEAL_TYPES[mealType].cost);
+    }, 0);
+  };
+
+  const getTotalMeals = () => {
+    return Object.keys(MEAL_TYPES).reduce((total, mealType) => {
+      return total + mealForm[mealType];
+    }, 0);
+  };
+
+  const handleSubmit = async () => {
+    // Check if any meals are selected
+    if (getTotalMeals() === 0) {
+      return;
+    }
+
+    // Check for deadline violations
+    if (deadlineWarnings.length > 0) {
+      // Don't proceed if there are deadline violations
+      return;
+    }
+
+    setIsProcessing(true);
+    try {
+      if (onMealBooking) {
+        await onMealBooking({
+          bookingId: bookingData.id,
+          visitorId: primaryVisitor.id,
+          ...mealForm
+        });
+        onClose();
+      }
+    } finally {
+      setIsProcessing(false);
+    }
+  };
+
+  if (!bookingData) {
+    return (
+      <Modal opened={opened} onClose={onClose} title="Book Meals" size="lg">
+        <Alert color="blue" icon={<IconAlertCircle size={16} />}>
+          No booking data available
+        </Alert>
+      </Modal>
+    );
+  }
+
+  const totalCost = calculateTotalCost();
+  const totalMeals = getTotalMeals();
+  const hasDeadlineViolations = deadlineWarnings.length > 0;
+
+  return (
+    <Modal opened={opened} onClose={onClose} title="Book Meals" size="lg" centered>
+      <Stack spacing="md">
+        {/* Header with Booking Info */}
+        <Paper p="md" style={{ backgroundColor: "#f8f9fa", borderRadius: "4px" }}>
+          <Group position="apart" mb="sm">
+            <div>
+              <Title order={4}>Meal Booking</Title>
+              <div style={{ fontSize: '14px', color: '#666' }}>
+                Booking #{bookingData.id} - {bookingData.intender_name}
+              </div>
+            </div>
+            <Badge
+              size="lg"
+              color="green"
+              variant="light"
+              leftSection={<IconCalendar size={14} />}
+            >
+              {new Date().toLocaleDateString()}
+            </Badge>
+          </Group>
+          
+          <Group spacing="md">
+            <div style={{ fontSize: '12px', color: '#666' }}>
+              <IconClock size={12} style={{ marginRight: 4 }} />
+              Current Time: {currentTime.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'})}
+            </div>
+            <div style={{ fontSize: '12px', color: '#666' }}>
+              Visitors: {bookingData?.visitors?.length || 1}
+            </div>
+          </Group>
+        </Paper>
+
+        {/* BR-VH-011: Deadline Warnings */}
+        {hasDeadlineViolations && (
+          <Alert color="red" icon={<IconAlertCircle size={16} />} title="Deadline Violation">
+            <Stack spacing="xs">
+              {deadlineWarnings.map((warning, idx) => (
+                <div key={idx} size="sm">
+                  <strong>{warning.meal}</strong> deadline is {warning.deadline}, current time is {warning.current}
+                </div>
+              ))}
+              <div size="sm" mt="xs" style={{ fontStyle: 'italic' }}>
+                Please remove these meals or wait for the next booking window.
+              </div>
+            </Stack>
+          </Alert>
+        )}
+
+        {/* Meal Selection */}
+        <div>
+          <div style={{ fontWeight: 600, fontSize: '14px', marginBottom: '12px' }}>
+            Select Meals (UC-VH-010)
+          </div>
+          
+          <Grid gutter="md">
+            {Object.keys(MEAL_TYPES).map((mealType) => {
+              const meal = MEAL_TYPES[mealType];
+              const isDeadlinePassed = deadlineWarnings.some(w => 
+                w.meal === meal.label
+              );
+              
+              return (
+                <Grid.Col span={6} key={mealType}>
+                  <Paper 
+                    p="md" 
+                    style={{ 
+                      border: `1px solid ${isDeadlinePassed ? '#fa5252' : '#e9ecef'}`,
+                      backgroundColor: isDeadlinePassed ? '#fff5f5' : 'white'
+                    }}
+                  >
+                    <Group position="apart" mb="xs">
+                      <Group spacing="xs">
+                        {meal.icon}
+                        <div style={{ fontWeight: 500, fontSize: '14px' }}>{meal.label}</div>
+                      </Group>
+                      <Badge size="xs" color={meal.color} variant="light">
+                        ₹{meal.cost}
+                      </Badge>
+                    </Group>
+                    
+                    <div style={{ fontSize: '12px', color: '#666', marginBottom: '12px' }}>
+                      Deadline: {meal.deadline} | 
+                      <span 
+                        style={{ 
+                          marginLeft: '4px',
+                          color: isDeadlinePassed ? '#fa5252' : '#51cf66',
+                          fontSize: '12px'
+                        }}
+                      >
+                        {isDeadlinePassed ? 'Deadline passed' : 'Available'}
+                      </span>
+                    </div>
+                    
+                    <Group spacing="xs">
+                      <NumberInput
+                        size="sm"
+                        min={0}
+                        max={10}
+                        value={mealForm[mealType]}
+                        onChange={(val) => handleMealChange(mealType, val)}
+                        disabled={isProcessing || isDeadlinePassed}
+                        style={{ flex: 1 }}
+                        placeholder="Qty"
+                      />
+                      <Button
+                        size="xs"
+                        variant="light"
+                        color={meal.color}
+                        onClick={() => handleQuickSelect(mealType)}
+                        disabled={isProcessing || isDeadlinePassed}
+                      >
+                        All
+                      </Button>
+                    </Group>
+                    
+                    {mealForm[mealType] > 0 && (
+                      <div style={{ fontSize: '12px', color: '#666', marginTop: '8px' }}>
+                        Subtotal: ₹{mealForm[mealType] * meal.cost}
+                      </div>
+                    )}
+                  </Paper>
+                </Grid.Col>
+              );
+            })}
+          </Grid>
+        </div>
+
+        {/* Cost Summary */}
+        {totalMeals > 0 && (
+          <>
+            <Divider />
+            <Paper p="md" style={{ backgroundColor: "#e7f5ff", borderRadius: "4px" }}>
+              <Group position="apart">
+                <div>
+                  <div style={{ fontWeight: 600 }}>Order Summary</div>
+                  <div style={{ fontSize: '14px', color: '#666' }}>
+                    {totalMeals} meal(s) selected
+                  </div>
+                </div>
+                <div style={{ textAlign: 'right' }}>
+                  <div style={{ fontWeight: 700, fontSize: '18px', color: '#228be6' }}>
+                    ₹{totalCost}
+                  </div>
+                  <div style={{ fontSize: '12px', color: '#666' }}>
+                    Total Amount
+                  </div>
+                </div>
+              </Group>
+            </Paper>
+          </>
+        )}
+
+        {/* Deadline Info */}
+        <Alert color="blue" icon={<IconClock size={16} />} title="BR-VH-011: Meal Booking Deadlines">
+          <div style={{ fontSize: '14px' }}>
+            • <strong>Breakfast & Lunch:</strong> Must be booked before 09:00 AM
+          </div>
+          <div style={{ fontSize: '14px' }}>
+            • <strong>Dinner & Evening Tea:</strong> Must be booked before 2:00 PM
+          </div>
+          <div style={{ fontSize: '14px' }}>
+            • <strong>Morning Tea:</strong> Must be booked before 09:00 AM
+          </div>
+        </Alert>
+
+        {/* Actions */}
+        <Group position="right" mt="xl">
+          <Button 
+            variant="default" 
+            onClick={onClose} 
+            disabled={isProcessing}
+          >
+            Cancel
+          </Button>
+          
+          <Button
+            color="blue"
+            onClick={handleSubmit}
+            disabled={totalMeals === 0 || hasDeadlineViolations}
+            loading={isProcessing}
+            leftIcon={<IconToolsKitchen2 size={16} />}
+          >
+            Book Meals (₹{totalCost})
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+}
+
+export default MealBookingForm;
\ No newline at end of file
diff --git a/src/Modules/Visitors_Hostel/components/forms/OfflineBookingForm.jsx b/src/Modules/Visitors_Hostel/components/forms/OfflineBookingForm.jsx
new file mode 100644
index 000000000..e808de2f6
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/components/forms/OfflineBookingForm.jsx
@@ -0,0 +1,558 @@
+/**
+ * OfflineBookingForm
+ * Component for caretakers to record telephonic or walk-in bookings (UC-VH-006)
+ * 
+ * Features:
+ * - Caretaker can enter booking details on behalf of visitors
+ * - System flags booking as Offline
+ * - Includes both intender and visitor information
+ * - Follows standard booking workflow
+ * - Only accessible to VhCaretaker role
+ */
+
+import React, { useEffect, useState } from "react";
+import {
+  Box,
+  TextInput,
+  Select,
+  NumberInput,
+  Textarea,
+  Button,
+  Group,
+  Modal,
+  Alert,
+  LoadingOverlay,
+  Stack,
+  Grid,
+  Text,
+  Divider,
+  Badge,
+  Switch,
+} from "@mantine/core";
+import { IconAlertCircle, IconPhone, IconUserPlus } from "@tabler/icons-react";
+import { bookingsAPI, roomsAPI } from "../../services/visitorHostelApi";
+import {
+  validateEmail,
+  validatePhone,
+  validateDateRange,
+  validateRequiredFields,
+  validateName,
+  validatePurpose,
+  validateFutureDate,
+  validateOrganization,
+  validateAddress,
+  validatePositiveNumber,
+} from "../../utils/validators";
+
+const ROOM_CATEGORIES = [
+  { value: "A", label: "Category A" },
+  { value: "B", label: "Category B" },
+  { value: "C", label: "Category C" },
+  { value: "D", label: "Category D" },
+];
+
+const BILL_SETTLEMENT_OPTIONS = [
+  { value: "Intender", label: "Intender" },
+  { value: "Visitor", label: "Visitor" },
+  { value: "ProjectNo", label: "Project Number" },
+  { value: "Institute", label: "Institute" },
+];
+
+const BOOKING_TYPES = [
+  { value: "telephonic", label: "Telephonic Booking" },
+  { value: "walkin", label: "Walk-in Booking" },
+];
+
+function OfflineBookingForm({ opened, onClose, onSuccess }) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [availableRoomCount, setAvailableRoomCount] = useState(null);
+  const [availabilityLoading, setAvailabilityLoading] = useState(false);
+  const [availabilityMessage, setAvailabilityMessage] = useState("");
+  const todayDate = new Date().toISOString().split("T")[0];
+  const [formData, setFormData] = useState({
+    // Offline booking specific
+    bookingType: "telephonic",
+
+    // Intender Information (person making the booking)
+    intenderName: "",
+    intenderEmail: "",
+    intenderPhone: "",
+    intenderRelation: "", // Relation to visitor
+
+    // Visitor Information
+    visitorName: "",
+    visitorEmail: "",
+    visitorPhone: "",
+    visitorAddress: "",
+    visitorOrganization: "",
+    visitorNationality: "Indian",
+
+    // Booking Details
+    bookingFrom: "",
+    bookingTo: "",
+    numberOfRooms: 1,
+    personCount: 1,
+    category: "C",
+    purposeOfVisit: "",
+    billSettlement: "Intender",
+    remarks: "",
+  });
+  const minCheckoutDate = formData.bookingFrom && formData.bookingFrom > todayDate
+    ? formData.bookingFrom
+    : todayDate;
+
+  const handleChange = (field, value) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+    setError(null);
+  };
+
+  useEffect(() => {
+    const loadAvailability = async () => {
+      if (!formData.bookingFrom || !formData.bookingTo || !validateDateRange(formData.bookingFrom, formData.bookingTo)) {
+        setAvailableRoomCount(null);
+        setAvailabilityMessage("");
+        return;
+      }
+
+      setAvailabilityLoading(true);
+      try {
+        const availableRooms = await roomsAPI.getAvailableRooms(
+          formData.bookingFrom,
+          formData.bookingTo,
+          formData.category,
+        );
+        if (Array.isArray(availableRooms)) {
+          setAvailableRoomCount(availableRooms.length);
+          setAvailabilityMessage(`${availableRooms.length} room(s) available for the selected dates.`);
+        } else {
+          setAvailableRoomCount(null);
+          setAvailabilityMessage("");
+        }
+      } catch (err) {
+        setAvailableRoomCount(null);
+        setAvailabilityMessage(err.message || "Unable to check room availability right now.");
+      } finally {
+        setAvailabilityLoading(false);
+      }
+    };
+
+    loadAvailability();
+  }, [formData.bookingFrom, formData.bookingTo, formData.category]);
+
+  const validateForm = () => {
+    const requiredFields = [
+      "intenderName", "intenderPhone", "visitorName", "visitorPhone",
+      "bookingFrom", "bookingTo", "purposeOfVisit"
+    ];
+
+    // Check required fields
+    if (!validateRequiredFields(formData, requiredFields)) {
+      setError("Please fill in all required fields");
+      return false;
+    }
+
+    // Validate intender name
+    if (!validateName(formData.intenderName)) {
+      setError("Intender name must be at least 2 characters and contain only letters, spaces, and common punctuation");
+      return false;
+    }
+
+    // Validate visitor name
+    if (!validateName(formData.visitorName)) {
+      setError("Visitor name must be at least 2 characters and contain only letters, spaces, and common punctuation");
+      return false;
+    }
+
+    // Validate phone numbers
+    if (!validatePhone(formData.intenderPhone)) {
+      setError("Please enter a valid intender phone number (10-13 digits)");
+      return false;
+    }
+
+    if (!validatePhone(formData.visitorPhone)) {
+      setError("Please enter a valid visitor phone number (10-13 digits)");
+      return false;
+    }
+
+    // Validate email addresses if provided
+    if (formData.intenderEmail && !validateEmail(formData.intenderEmail)) {
+      setError("Please enter a valid intender email address");
+      return false;
+    }
+
+    if (formData.visitorEmail && !validateEmail(formData.visitorEmail)) {
+      setError("Please enter a valid visitor email address");
+      return false;
+    }
+
+    // Validate organization if provided
+    if (formData.visitorOrganization && !validateOrganization(formData.visitorOrganization)) {
+      setError("Organization name must be 2-100 characters long");
+      return false;
+    }
+
+    // Validate address if provided
+    if (formData.visitorAddress && !validateAddress(formData.visitorAddress)) {
+      setError("Address must be 10-500 characters long if provided");
+      return false;
+    }
+
+    // Validate purpose of visit
+    if (!validatePurpose(formData.purposeOfVisit)) {
+      setError("Purpose of visit must be 5-200 characters long");
+      return false;
+    }
+
+    // Validate dates
+    if (!validateFutureDate(formData.bookingFrom)) {
+      setError("Check-in date cannot be in the past");
+      return false;
+    }
+
+    if (!validateDateRange(formData.bookingFrom, formData.bookingTo)) {
+      setError("Check-out date must be after check-in date");
+      return false;
+    }
+
+    // Validate room and person counts
+    if (!validatePositiveNumber(formData.personCount)) {
+      setError("Person count must be a positive number");
+      return false;
+    }
+
+    if (!validatePositiveNumber(formData.numberOfRooms)) {
+      setError("Number of rooms must be a positive number");
+      return false;
+    }
+
+    if (formData.personCount > formData.numberOfRooms * 4) {
+      setError("Too many persons for the number of rooms requested");
+      return false;
+    }
+
+    // Check room availability
+    if (availableRoomCount !== null && formData.numberOfRooms > availableRoomCount) {
+      setError(`Only ${availableRoomCount} room(s) are available for the selected dates`);
+      return false;
+    }
+
+    return true;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!validateForm()) return;
+
+    setLoading(true);
+    try {
+      // Create offline booking request
+      const response = await bookingsAPI.createOfflineBooking({
+        // Mark as offline booking
+        booking_type: formData.bookingType,
+        is_offline: true,
+
+        // Intender details (person making booking)
+        intender_name: formData.intenderName,
+        intender_email: formData.intenderEmail || "",
+        intender_phone: formData.intenderPhone,
+        intender_relation: formData.intenderRelation || "",
+
+        // Visitor details
+        name: formData.visitorName,
+        email: formData.visitorEmail || "",
+        phone: formData.visitorPhone,
+        address: formData.visitorAddress || "",
+        organization: formData.visitorOrganization || "",
+        nationality: formData.visitorNationality,
+
+        // Booking details
+        category: formData.category,
+        number_of_people: formData.personCount,
+        purpose_of_visit: formData.purposeOfVisit,
+        booking_from: formData.bookingFrom,
+        booking_to: formData.bookingTo,
+        number_of_rooms: formData.numberOfRooms,
+        bill_settlement: formData.billSettlement,
+        remarks_during_booking_request: formData.remarks,
+      });
+
+      if (response.success) {
+        onSuccess?.();
+        onClose();
+        // Reset form
+        setFormData({
+          bookingType: "telephonic",
+          intenderName: "", intenderEmail: "", intenderPhone: "", intenderRelation: "",
+          visitorName: "", visitorEmail: "", visitorPhone: "", visitorAddress: "",
+          visitorOrganization: "", visitorNationality: "Indian",
+          bookingFrom: "", bookingTo: "", numberOfRooms: 1, personCount: 1,
+          category: "C", purposeOfVisit: "", billSettlement: "Intender", remarks: "",
+        });
+      } else {
+        setError(response.message || "Failed to create offline booking");
+      }
+    } catch (err) {
+      setError(err.message || "Failed to create offline booking. Please try again.");
+      console.error("Error creating offline booking:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title={
+        <Group>
+          <IconPhone size={20} />
+          <Text>Record Offline Booking</Text>
+          <Badge color="blue" variant="light">UC-VH-006</Badge>
+        </Group>
+      }
+      size="xl"
+      centered
+      closeOnClickOutside={!loading}
+    >
+      <Box position="relative">
+        <LoadingOverlay visible={loading} />
+
+        {error && (
+          <Alert icon={<IconAlertCircle size={16} />} title="Error" color="red" mb="md">
+            {error}
+          </Alert>
+        )}
+
+        <form onSubmit={handleSubmit}>
+          <Stack spacing="md">
+            {/* Booking Type Selection */}
+            <Box>
+              <Text size="sm" fw={500} mb="xs">Booking Type*</Text>
+              <Select
+                placeholder="Select booking type"
+                data={BOOKING_TYPES}
+                value={formData.bookingType}
+                onChange={(value) => handleChange("bookingType", value)}
+                icon={<IconPhone size={16} />}
+                required
+              />
+            </Box>
+
+            <Divider label="Intender Information (Person Making Booking)" labelPosition="center" />
+
+            {/* Intender Details */}
+            <Grid>
+              <Grid.Col span={6}>
+                <TextInput
+                  label="Intender Full Name*"
+                  placeholder="Enter full name"
+                  value={formData.intenderName}
+                  onChange={(e) => handleChange("intenderName", e.target.value)}
+                  required
+                />
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <TextInput
+                  label="Intender Phone*"
+                  placeholder="Enter phone number"
+                  value={formData.intenderPhone}
+                  onChange={(e) => handleChange("intenderPhone", e.target.value)}
+                  required
+                />
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <TextInput
+                  label="Intender Email"
+                  placeholder="Enter email address"
+                  type="email"
+                  value={formData.intenderEmail}
+                  onChange={(e) => handleChange("intenderEmail", e.target.value)}
+                />
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <TextInput
+                  label="Relation to Visitor"
+                  placeholder="e.g., Self, Father, Mother, etc."
+                  value={formData.intenderRelation}
+                  onChange={(e) => handleChange("intenderRelation", e.target.value)}
+                />
+              </Grid.Col>
+            </Grid>
+
+            {(availabilityLoading || availabilityMessage) && (
+              <Alert
+                icon={<IconAlertCircle size={16} />}
+                title={availabilityLoading ? "Checking availability" : "Availability"}
+                color={availableRoomCount !== null && formData.numberOfRooms > availableRoomCount ? "red" : "blue"}
+              >
+                {availabilityLoading ? "Checking room availability for the selected dates..." : availabilityMessage}
+              </Alert>
+            )}
+
+            <Divider label="Visitor Information" labelPosition="center" />
+
+            {/* Visitor Details */}
+            <Grid>
+              <Grid.Col span={6}>
+                <TextInput
+                  label="Visitor Full Name*"
+                  placeholder="Enter visitor full name"
+                  value={formData.visitorName}
+                  onChange={(e) => handleChange("visitorName", e.target.value)}
+                  required
+                />
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <TextInput
+                  label="Visitor Phone*"
+                  placeholder="Enter visitor phone"
+                  value={formData.visitorPhone}
+                  onChange={(e) => handleChange("visitorPhone", e.target.value)}
+                  required
+                />
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <TextInput
+                  label="Visitor Email"
+                  placeholder="Enter visitor email"
+                  type="email"
+                  value={formData.visitorEmail}
+                  onChange={(e) => handleChange("visitorEmail", e.target.value)}
+                />
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <TextInput
+                  label="Nationality"
+                  placeholder="Enter nationality"
+                  value={formData.visitorNationality}
+                  onChange={(e) => handleChange("visitorNationality", e.target.value)}
+                />
+              </Grid.Col>
+            </Grid>
+
+            <Textarea
+              label="Visitor Address"
+              placeholder="Enter complete address"
+              value={formData.visitorAddress}
+              onChange={(e) => handleChange("visitorAddress", e.target.value)}
+              minRows={2}
+            />
+
+            <TextInput
+              label="Organization"
+              placeholder="Enter organization/company name"
+              value={formData.visitorOrganization}
+              onChange={(e) => handleChange("visitorOrganization", e.target.value)}
+            />
+
+            <Divider label="Booking Details" labelPosition="center" />
+
+            {/* Booking Dates */}
+            <Grid>
+              <Grid.Col span={6}>
+                <TextInput
+                  label="Check-In Date*"
+                  type="date"
+                  min={todayDate}
+                  value={formData.bookingFrom}
+                  onChange={(e) => handleChange("bookingFrom", e.target.value)}
+                  required
+                />
+              </Grid.Col>
+              <Grid.Col span={6}>
+                <TextInput
+                  label="Check-Out Date*"
+                  type="date"
+                  min={minCheckoutDate}
+                  value={formData.bookingTo}
+                  onChange={(e) => handleChange("bookingTo", e.target.value)}
+                  required
+                />
+              </Grid.Col>
+            </Grid>
+
+            {/* Room Details */}
+            <Grid>
+              <Grid.Col span={4}>
+                <Select
+                  label="Room Category*"
+                  placeholder="Select category"
+                  data={ROOM_CATEGORIES}
+                  value={formData.category}
+                  onChange={(value) => handleChange("category", value)}
+                  required
+                />
+              </Grid.Col>
+              <Grid.Col span={4}>
+                <NumberInput
+                  label="Number of Rooms*"
+                  placeholder="Enter count"
+                  min={1}
+                  value={formData.numberOfRooms}
+                  onChange={(val) => handleChange("numberOfRooms", val)}
+                  required
+                />
+              </Grid.Col>
+              <Grid.Col span={4}>
+                <NumberInput
+                  label="Number of Persons*"
+                  placeholder="Enter count"
+                  min={1}
+                  value={formData.personCount}
+                  onChange={(val) => handleChange("personCount", val)}
+                  required
+                />
+              </Grid.Col>
+            </Grid>
+
+            {/* Purpose and Settlement */}
+            <Textarea
+              label="Purpose of Visit*"
+              placeholder="Enter purpose of visit"
+              value={formData.purposeOfVisit}
+              onChange={(e) => handleChange("purposeOfVisit", e.target.value)}
+              minRows={2}
+              required
+            />
+
+            <Select
+              label="Bill Settlement*"
+              placeholder="Select who will settle the bill"
+              data={BILL_SETTLEMENT_OPTIONS}
+              value={formData.billSettlement}
+              onChange={(value) => handleChange("billSettlement", value)}
+              required
+            />
+
+            <Textarea
+              label="Additional Remarks"
+              placeholder="Enter any additional remarks for this offline booking"
+              value={formData.remarks}
+              onChange={(e) => handleChange("remarks", e.target.value)}
+              minRows={2}
+            />
+
+            {/* Actions */}
+            <Group position="right" mt="xl">
+              <Button variant="default" onClick={onClose} disabled={loading}>
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                loading={loading}
+                leftIcon={<IconUserPlus size={16} />}
+                disabled={availabilityLoading || (availableRoomCount !== null && formData.numberOfRooms > availableRoomCount)}
+              >
+                Record Offline Booking
+              </Button>
+            </Group>
+          </Stack>
+        </form>
+      </Box>
+    </Modal>
+  );
+}
+
+export default OfflineBookingForm;
\ No newline at end of file
diff --git a/src/Modules/Visitors_Hostel/components/forms/UpdateBookingForm.jsx b/src/Modules/Visitors_Hostel/components/forms/UpdateBookingForm.jsx
new file mode 100644
index 000000000..e86f0304d
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/components/forms/UpdateBookingForm.jsx
@@ -0,0 +1,425 @@
+/**
+ * UpdateBookingForm
+ * Component for updating existing booking details
+ * 
+ * Features:
+ * - Load existing booking data
+ * - Update booking dates
+ * - Modify room category and count
+ * - Add remarks
+ * - Integration with visitorHostelApi.js
+ */
+
+import React, { useState, useEffect } from "react";
+import {
+  Box,
+  TextInput,
+  NumberInput,
+  Textarea,
+  Button,
+  Group,
+  Modal,
+  Alert,
+  LoadingOverlay,
+  Stack,
+  Grid,
+  Text,
+  Badge,
+} from "@mantine/core";
+import { IconAlertCircle } from "@tabler/icons-react";
+import { bookingsAPI } from "../../services/visitorHostelApi";
+import {
+  validateDateRange,
+  validateRequiredFields,
+  validateEmail,
+  validatePhone,
+  validateName,
+  validatePurpose,
+  validateFutureDate,
+  validateOrganization,
+  validateAddress,
+  validatePositiveNumber,
+} from "../../utils/validators";
+
+function UpdateBookingForm({ opened, onClose, bookingId, bookingData, onSuccess }) {
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [formData, setFormData] = useState({
+    visitorName: "",
+    visitorEmail: "",
+    visitorPhone: "",
+    visitorOrganization: "",
+    visitorAddress: "",
+    nationality: "",
+    bookingFrom: "",
+    bookingTo: "",
+    numberOfRooms: 1,
+    personCount: 1,
+    purposeOfVisit: "",
+  });
+
+  const normalizeDateForInput = (value) => {
+    if (!value) return "";
+    if (typeof value === "string") return value.slice(0, 10);
+    const parsed = new Date(value);
+    if (Number.isNaN(parsed.getTime())) return "";
+    return parsed.toISOString().slice(0, 10);
+  };
+
+  // Load booking data when modal opens or bookingData changes
+  useEffect(() => {
+    if (opened && bookingData) {
+      console.log('Loading booking data:', bookingData);
+
+      // Load visitor information from the first visitor if available.
+      // Backend returns `visitors` for booking detail API, while some legacy paths used `visitor`.
+      const visitors = bookingData.visitors || bookingData.visitor || [];
+      let visitorData = {};
+      if (Array.isArray(visitors) && visitors.length > 0) {
+        const visitor = visitors[0];
+        visitorData = {
+          visitorName: visitor.name || visitor.visitor_name || "",
+          visitorEmail: visitor.email || visitor.visitor_email || "",
+          visitorPhone: visitor.phone || visitor.visitor_phone || "",
+          visitorOrganization: visitor.organization || visitor.visitor_organization || "",
+          visitorAddress: visitor.address || visitor.visitor_address || "",
+          nationality: visitor.nationality || "",
+        };
+      }
+
+      setFormData({
+        ...visitorData,
+        bookingFrom: normalizeDateForInput(bookingData.booking_from),
+        bookingTo: normalizeDateForInput(bookingData.booking_to),
+        numberOfRooms: bookingData.number_of_rooms || 1,
+        personCount: bookingData.person_count || 1,
+        purposeOfVisit: bookingData.purpose_of_visit || bookingData.purpose || "",
+      });
+      setError(null);
+    }
+  }, [opened, bookingData]);
+
+  const handleChange = (field, value) => {
+    setFormData((prev) => ({ ...prev, [field]: value }));
+    setError(null);
+  };
+
+  const validateForm = () => {
+    // Check required fields
+    if (!validateRequiredFields(formData, ["visitorName", "visitorPhone", "bookingFrom", "bookingTo", "purposeOfVisit"])) {
+      setError("Please fill in all required fields");
+      return false;
+    }
+
+    // UC-VH-003: Ensure booking can only be modified when status is Pending
+    if (bookingData && bookingData.status !== 'Pending') {
+      setError("Booking can only be modified when status is Pending");
+      return false;
+    }
+
+    // Validate visitor name
+    if (!validateName(formData.visitorName)) {
+      setError("Visitor name must be at least 2 characters and contain only letters, spaces, and common punctuation");
+      return false;
+    }
+
+    // Validate phone number
+    if (!validatePhone(formData.visitorPhone)) {
+      setError("Please enter a valid phone number (10-13 digits)");
+      return false;
+    }
+
+    // Validate email if provided
+    if (formData.visitorEmail && !validateEmail(formData.visitorEmail)) {
+      setError("Please enter a valid email address");
+      return false;
+    }
+
+    // Validate organization if provided
+    if (formData.visitorOrganization && !validateOrganization(formData.visitorOrganization)) {
+      setError("Organization name must be 2-100 characters long");
+      return false;
+    }
+
+    // Validate address if provided
+    if (formData.visitorAddress && !validateAddress(formData.visitorAddress)) {
+      setError("Address must be 10-500 characters long if provided");
+      return false;
+    }
+
+    // Validate purpose of visit
+    if (!validatePurpose(formData.purposeOfVisit)) {
+      setError("Purpose of visit must be 5-200 characters long");
+      return false;
+    }
+
+    // Validate dates
+    if (!validateFutureDate(formData.bookingFrom)) {
+      setError("Check-in date cannot be in the past");
+      return false;
+    }
+
+    if (!validateDateRange(formData.bookingFrom, formData.bookingTo)) {
+      setError("Check-out date must be after check-in date");
+      return false;
+    }
+
+    // Validate room and person counts
+    if (!validatePositiveNumber(formData.personCount)) {
+      setError("Person count must be a positive number");
+      return false;
+    }
+
+    if (!validatePositiveNumber(formData.numberOfRooms)) {
+      setError("Number of rooms must be a positive number");
+      return false;
+    }
+
+    if (formData.personCount > formData.numberOfRooms * 4) {
+      setError("Too many persons for the number of rooms requested");
+      return false;
+    }
+
+    return true;
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!validateForm()) return;
+
+    setLoading(true);
+    try {
+      // Update the basic booking details
+      const bookingResponse = await bookingsAPI.updateBooking(
+        bookingId,
+        formData.personCount,
+        formData.purposeOfVisit,
+        formData.bookingFrom,
+        formData.bookingTo,
+        formData.numberOfRooms,
+      );
+
+      // Update visitor information
+      const visitorResponse = await bookingsAPI.updateVisitorInfo(bookingId, {
+        visitorName: formData.visitorName,
+        visitorEmail: formData.visitorEmail,
+        visitorPhone: formData.visitorPhone,
+        visitorOrganization: formData.visitorOrganization,
+        visitorAddress: formData.visitorAddress,
+        nationality: formData.nationality,
+      });
+
+      console.log("Booking updated:", bookingResponse);
+      console.log("Visitor info updated:", visitorResponse);
+
+      onSuccess?.();
+      onClose();
+    } catch (err) {
+      setError(err.message || "Failed to update booking. Please try again.");
+      console.error("Error updating booking:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const isFormDisabled = bookingData && bookingData.status !== 'Pending';
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title="Update Booking"
+      size="lg"
+      centered
+      closeOnClickOutside={!loading}
+    >
+      <Box position="relative">
+        <LoadingOverlay visible={loading} />
+
+        {error && (
+          <Alert icon={<IconAlertCircle size={16} />} title="Error" color="red" mb="md">
+            {error}
+          </Alert>
+        )}
+
+        {bookingData && (
+          <form onSubmit={handleSubmit}>
+            <Stack spacing="md">
+              {/* Display Current Info */}
+              <Box p="sm" style={{ backgroundColor: "#f1f3f5", borderRadius: "4px" }}>
+                <Text size="sm" fw={500}>
+                  Booking ID: {bookingData.id}
+                </Text>
+                <Text size="sm">
+                  Guest: {bookingData.intender_name || "Unknown"}
+                </Text>
+                <Text size="sm">
+                  Current Status: <Badge size="sm" color={bookingData.status === 'Pending' ? 'yellow' : 'gray'}>
+                    {bookingData.status}
+                  </Badge>
+                </Text>
+              </Box>
+
+              {/* Visitor Information - Editable */}
+              <Text fw={500} size="sm">
+                Visitor Information
+              </Text>
+              <Grid>
+                <Grid.Col span={6}>
+                  <TextInput
+                    label="Visitor Name*"
+                    placeholder="Enter name"
+                    value={formData.visitorName}
+                    onChange={(e) => handleChange("visitorName", e.target.value)}
+                    disabled={isFormDisabled}
+                    required
+                  />
+                </Grid.Col>
+                <Grid.Col span={6}>
+                  <TextInput
+                    label="Phone Number*"
+                    placeholder="10-digit number"
+                    value={formData.visitorPhone}
+                    onChange={(e) => handleChange("visitorPhone", e.target.value)}
+                    disabled={isFormDisabled}
+                    required
+                  />
+                </Grid.Col>
+              </Grid>
+
+              <Grid>
+                <Grid.Col span={6}>
+                  <TextInput
+                    label="Email"
+                    placeholder="visitor@example.com"
+                    type="email"
+                    value={formData.visitorEmail}
+                    onChange={(e) => handleChange("visitorEmail", e.target.value)}
+                    disabled={isFormDisabled}
+                  />
+                </Grid.Col>
+                <Grid.Col span={6}>
+                  <TextInput
+                    label="Organization"
+                    placeholder="Organization name"
+                    value={formData.visitorOrganization}
+                    onChange={(e) => handleChange("visitorOrganization", e.target.value)}
+                    disabled={isFormDisabled}
+                  />
+                </Grid.Col>
+              </Grid>
+
+              <Grid>
+                <Grid.Col span={6}>
+                  <TextInput
+                    label="Address"
+                    placeholder="Visitor address"
+                    value={formData.visitorAddress}
+                    onChange={(e) => handleChange("visitorAddress", e.target.value)}
+                    disabled={isFormDisabled}
+                  />
+                </Grid.Col>
+                <Grid.Col span={6}>
+                  <TextInput
+                    label="Nationality"
+                    placeholder="Nationality"
+                    value={formData.nationality}
+                    onChange={(e) => handleChange("nationality", e.target.value)}
+                    disabled={isFormDisabled}
+                  />
+                </Grid.Col>
+              </Grid>
+
+              {/* UC-VH-003: Status validation alert */}
+              {bookingData.status !== 'Pending' && (
+                <Alert icon={<IconAlertCircle size={16} />} title="Modification Not Allowed" color="orange">
+                  This booking cannot be modified because its status is "{bookingData.status}".
+                  Only pending bookings can be modified.
+                </Alert>
+              )}
+
+              {/* Booking Dates */}
+              <Text fw={500} size="sm">
+                Booking Dates
+              </Text>
+              <Grid>
+                <Grid.Col span={6}>
+                  <TextInput
+                    label="Check-In Date*"
+                    type="date"
+                    value={formData.bookingFrom}
+                    onChange={(e) => handleChange("bookingFrom", e.target.value)}
+                    disabled={isFormDisabled}
+                    required
+                  />
+                </Grid.Col>
+                <Grid.Col span={6}>
+                  <TextInput
+                    label="Check-Out Date*"
+                    type="date"
+                    value={formData.bookingTo}
+                    onChange={(e) => handleChange("bookingTo", e.target.value)}
+                    disabled={isFormDisabled}
+                    required
+                  />
+                </Grid.Col>
+              </Grid>
+
+              {/* Room Selection */}
+              <Text fw={500} size="sm">
+                Room Selection
+              </Text>
+              <NumberInput
+                label="Number of Rooms*"
+                placeholder="Enter count"
+                min={1}
+                value={formData.numberOfRooms}
+                onChange={(val) => handleChange("numberOfRooms", val)}
+                disabled={isFormDisabled}
+                required
+              />
+
+              <NumberInput
+                label="Number of Persons*"
+                placeholder="Enter count"
+                min={1}
+                value={formData.personCount}
+                onChange={(val) => handleChange("personCount", val)}
+                disabled={isFormDisabled}
+                required
+              />
+
+              {/* Purpose */}
+              <Textarea
+                label="Purpose of Visit"
+                placeholder="Enter purpose of visit"
+                value={formData.purposeOfVisit}
+                onChange={(e) => handleChange("purposeOfVisit", e.target.value)}
+                disabled={isFormDisabled}
+                minRows={2}
+              />
+
+              {/* Actions */}
+              <Group position="right" mt="xl">
+                <Button variant="default" onClick={onClose} disabled={loading}>
+                  Cancel
+                </Button>
+                <Button
+                  type="submit"
+                  loading={loading}
+                  disabled={bookingData.status !== 'Pending'}
+                >
+                  Update Booking
+                </Button>
+              </Group>
+            </Stack>
+          </form>
+        )}
+      </Box>
+    </Modal>
+  );
+}
+
+export default UpdateBookingForm;
+
diff --git a/src/Modules/Visitors_Hostel/components/tables/ActiveBookingsTable.jsx b/src/Modules/Visitors_Hostel/components/tables/ActiveBookingsTable.jsx
new file mode 100644
index 000000000..00356e98e
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/components/tables/ActiveBookingsTable.jsx
@@ -0,0 +1,346 @@
+/**
+ * ActiveBookingsTable
+ * Displays all active bookings (confirmed and checked-in)
+ * VHMS TRACEABILITY:
+ * - UC-VH-007: Room allotment, active stay, check-in/check-out visibility
+ * - UC-VH-010, BR-VH-011: Meal booking actions and deadline-aligned flow
+ * Caretaker-led check-in flow with room allocation visibility
+ */
+
+import React, { useState, useEffect } from "react";
+import {
+  Table,
+  Group,
+  Badge,
+  Box,
+  ActionIcon,
+  Tooltip,
+  TextInput,
+  Alert,
+  LoadingOverlay,
+  Pagination,
+} from "@mantine/core";
+import { IconEye, IconSearch, IconRefresh, IconToolsKitchen2 } from "@tabler/icons-react";
+import MealBookingForm from "../forms/MealBookingForm";
+import { mealsAPI } from "../../services/visitorHostelApi";
+import { useSelector } from "react-redux";
+import { bookingsAPI } from "../../services/visitorHostelApi";
+import ViewActiveBookingModal from "../common/ViewActiveBookingModal";
+
+const STATUS_COLORS = {
+  Confirmed: "blue",
+  CheckedIn: "green",
+  Complete: "gray",
+  Canceled: "red",
+  Forward: "indigo",
+};
+
+function ActiveBookingsTable() {
+  const [bookings, setBookings] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [page, setPage] = useState(1);
+  const [pageSize] = useState(10);
+  const [totalPages, setTotalPages] = useState(1);
+  const [viewingBooking, setViewingBooking] = useState(null);
+  const [loadingDetails, setLoadingDetails] = useState(false);
+  const [mealBookingOpen, setMealBookingOpen] = useState(false);
+  const [selectedBookingForMeals, setSelectedBookingForMeals] = useState(null);
+
+  const role = useSelector((state) => state.user?.role);
+
+  useEffect(() => {
+    fetchBookings();
+  }, [page]);
+
+  useEffect(() => {
+    const intervalId = setInterval(() => {
+      fetchBookings();
+    }, 15000);
+
+    return () => clearInterval(intervalId);
+  }, [page]);
+
+  const fetchBookings = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await bookingsAPI.getActiveBookings({
+        page,
+        page_size: pageSize,
+      });
+
+      if (response.success) {
+        setBookings(response.data || []);
+        setTotalPages(response.total_pages || 1);
+      } else {
+        setError(response.message || "Failed to fetch active bookings");
+      }
+    } catch (err) {
+      setError(err.message || "An error occurred");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filteredBookings = bookings.filter((booking) => {
+    const query = searchQuery.toLowerCase();
+    return (
+      booking.intender_name?.toLowerCase().includes(query) ||
+      booking.visitor_email?.toLowerCase().includes(query) ||
+      booking.id?.toString().includes(query)
+    );
+  });
+
+  const handleViewDetails = async (booking) => {
+    try {
+      setLoadingDetails(true);
+      const response = await bookingsAPI.getBookingDetail(booking.id);
+      if (response.success && response.data) {
+        setViewingBooking(response.data);
+      } else {
+        setError("Failed to load booking details");
+      }
+    } catch (err) {
+      setError("Error loading booking details: " + err.message);
+    } finally {
+      setLoadingDetails(false);
+    }
+  };
+
+  const handleMealBooking = async (booking) => {
+    try {
+      setLoadingDetails(true);
+      const response = await bookingsAPI.getBookingDetail(booking.id);
+      if (response.success && response.data) {
+        setSelectedBookingForMeals(response.data);
+        setMealBookingOpen(true);
+      } else {
+        setError("Failed to load booking details");
+      }
+    } catch (err) {
+      setError("Error loading booking details: " + err.message);
+    } finally {
+      setLoadingDetails(false);
+    }
+  };
+
+  const handleMealBookingSubmit = async (mealData) => {
+    try {
+      const result = await mealsAPI.bookMeals(mealData);
+      if (result.success) {
+        setMealBookingOpen(false);
+        setSelectedBookingForMeals(null);
+        fetchBookings(); // Refresh the table
+      }
+    } catch (error) {
+      console.error("Error booking meals:", error);
+      throw error;
+    }
+  };
+
+  if (loading && page === 1) {
+    return (
+      <Box p="md">
+        <LoadingOverlay visible={true} />
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      {error && (
+        <Alert type="error" mb="md">
+          {error}
+        </Alert>
+      )}
+
+      {/* Search and Controls */}
+      <Group mb="md" justify="space-between">
+        <TextInput
+          placeholder="Search by name, email, or ID..."
+          leftSection={<IconSearch size={16} />}
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.currentTarget.value)}
+          style={{ flex: 1, maxWidth: "400px" }}
+        />
+        <ActionIcon onClick={fetchBookings} loading={loading} variant="default">
+          <IconRefresh size={16} />
+        </ActionIcon>
+      </Group>
+
+      {/* Table */}
+      <Box style={{ position: "relative", overflow: "auto" }}>
+        <LoadingOverlay visible={loading && page !== 1} />
+        {filteredBookings.length === 0 ? (
+          <Alert type="info">No active bookings found</Alert>
+        ) : (
+          <>
+            <Table striped highlightOnHover>
+              <thead>
+                <tr>
+                  <th>ID</th>
+                  <th>Guest Name</th>
+                  <th>Email</th>
+                  <th>Check-In</th>
+                  <th>Check-Out</th>
+                  <th>Requested Rooms</th>
+                  <th>Allocated Rooms</th>
+                  <th>Status</th>
+                  <th>Meals</th>
+                  <th>Source</th>
+                  <th>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {filteredBookings.map((booking) => (
+                  <tr key={booking.id}>
+                    <td>{booking.id}</td>
+                    <td>{booking.intender_name}</td>
+                    <td>{booking.visitor_email}</td>
+                    <td>{booking.booking_from}</td>
+                    <td>{booking.booking_to}</td>
+                    <td>{booking.number_of_rooms || "N/A"}</td>
+                    <td>
+                      {Array.isArray(booking.allocated_rooms) && booking.allocated_rooms.length > 0
+                        ? booking.allocated_rooms.join(", ")
+                        : "Not allocated"}
+                    </td>
+                    <td>
+                      <Badge color={STATUS_COLORS[booking.status] || "gray"}>
+                        {booking.status?.toUpperCase()}
+                      </Badge>
+                    </td>
+                    <td>
+                      {/* UC-VH-010: Meal booking indicators with fallback */}
+                      {booking.has_meal_bookings ? (
+                        <Badge 
+                          size="sm" 
+                          color="green" 
+                          variant="filled"
+                          leftSection={<IconToolsKitchen2 size={12} />}
+                        >
+                          {booking.total_meals_booked || 0} meals
+                        </Badge>
+                      ) : (
+                        <span style={{ fontSize: '12px', color: '#aaa' }}>
+                          {booking.status === 'CheckedIn' ? 'No meals' : '-'}
+                        </span>
+                      )}
+                    </td>
+                    <td>
+                      {/* UC-VH-006: Show booking source */}
+                      <Badge 
+                        size="sm" 
+                        color={booking.is_offline ? "blue" : "gray"}
+                        variant={booking.is_offline ? "filled" : "light"}
+                      >
+                        {booking.booking_source || "online"}
+                      </Badge>
+                    </td>
+                    <td>
+                      <Group spacing="xs">
+                        <Tooltip label="View Details">
+                          <ActionIcon
+                            size="sm"
+                            variant="light"
+                            onClick={() => handleViewDetails(booking)}
+                            loading={loadingDetails}
+                          >
+                            <IconEye size={16} />
+                          </ActionIcon>
+                        </Tooltip>
+                        
+                        {/* UC-VH-010: Meal Booking - Only for checked-in guests and VhCaretaker */}
+                        {(role === "VhCaretaker") && booking.status === "CheckedIn" && (
+                          <Tooltip label="Book Meals">
+                            <ActionIcon
+                              size="sm"
+                              variant="light"
+                              color="blue"
+                              onClick={() => handleMealBooking(booking)}
+                              loading={loadingDetails}
+                            >
+                              <IconToolsKitchen2 size={16} />
+                            </ActionIcon>
+                          </Tooltip>
+                        )}
+                      </Group>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </Table>
+
+            {/* Pagination */}
+            <Group justify="center" mt="md">
+              <Pagination
+                value={page}
+                onChange={setPage}
+                total={totalPages}
+                boundaries={1}
+                siblings={1}
+              />
+            </Group>
+          </>
+        )}
+      </Box>
+
+      {/* Modals */}
+      <ViewActiveBookingModal
+        opened={!!viewingBooking}
+        onClose={() => setViewingBooking(null)}
+        bookingData={viewingBooking}
+        userRole={role}
+        onRefresh={fetchBookings}
+        onCheckIn={async (payload) => {
+          try {
+            await bookingsAPI.checkIn(
+              payload.bookingId,
+              payload.name,
+              payload.phone,
+              payload.email || "",
+              payload.address || "",
+            );
+            setViewingBooking(null);
+            fetchBookings();
+            return true;
+          } catch (err) {
+            setError(err.detail || err.error || "Failed to check in visitor.");
+            return false;
+          }
+        }}
+        onCheckOut={async (payload) => {
+          try {
+            await bookingsAPI.checkOut(
+              payload.bookingId,
+              Number(payload.mealBill || 0),
+              Number(payload.roomBill || 0),
+              payload.billSettlement || "Intender",
+            );
+            setViewingBooking(null);
+            fetchBookings();
+            return true;
+          } catch (err) {
+            setError(err.detail || err.error || "Failed to check out visitor.");
+            return false;
+          }
+        }}
+      />
+
+      {/* UC-VH-010: Meal Booking Modal */}
+      <MealBookingForm
+        opened={mealBookingOpen}
+        onClose={() => {
+          setMealBookingOpen(false);
+          setSelectedBookingForMeals(null);
+        }}
+        bookingData={selectedBookingForMeals}
+        onMealBooking={handleMealBookingSubmit}
+      />
+    </Box>
+  );
+}
+
+export default ActiveBookingsTable;
diff --git a/src/Modules/Visitors_Hostel/components/tables/CancelledRequestsTable.jsx b/src/Modules/Visitors_Hostel/components/tables/CancelledRequestsTable.jsx
new file mode 100644
index 000000000..9260b5ae5
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/components/tables/CancelledRequestsTable.jsx
@@ -0,0 +1,237 @@
+/**
+ * CancelledRequestsTable
+ * Displays cancellation requests and allows caretaker/incharge review actions
+ */
+
+import React, { useState, useEffect } from "react";
+import {
+  Table,
+  Group,
+  Box,
+  TextInput,
+  Alert,
+  LoadingOverlay,
+  Pagination,
+  ActionIcon,
+  Modal,
+  Text,
+  Button,
+} from "@mantine/core";
+import { IconSearch, IconRefresh, IconInfoCircle, IconCheck, IconX } from "@tabler/icons-react";
+import { bookingsAPI } from "../../services/visitorHostelApi";
+import { useSelector } from "react-redux";
+
+function CancelledRequestsTable() {
+  const [bookings, setBookings] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [page, setPage] = useState(1);
+  const [pageSize] = useState(10);
+  const [totalPages, setTotalPages] = useState(1);
+  const [selectedReason, setSelectedReason] = useState(null);
+  const role = useSelector((state) => state.user?.role);
+  const isStaff = role === "VhIncharge" || role === "VhCaretaker";
+
+  useEffect(() => {
+    fetchCancellationRequests();
+  }, [page]);
+
+  const fetchCancellationRequests = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await bookingsAPI.getCancelRequestedBookings({
+        page,
+        page_size: pageSize,
+      });
+
+      if (response.success) {
+        setBookings(response.data || []);
+        setTotalPages(response.total_pages || 1);
+      } else {
+        setError(response.message || "Failed to fetch cancellation requests");
+      }
+    } catch (err) {
+      setError(err.message || "An error occurred");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleApprove = async (bookingId) => {
+    const txId = window.prompt("Enter online transaction ID for cancellation fee payment:");
+    if (!txId) {
+      setError("Transaction ID is required to approve cancellation.");
+      return;
+    }
+
+    try {
+      const response = await bookingsAPI.approveCancelRequest(bookingId, "", txId);
+      if (!response.success) {
+        setError(response.message || "Failed to approve cancellation request");
+        return;
+      }
+      const finalCharges = Number(response.cancellation_charges || 0);
+      window.alert(`Cancellation approved. Final cancellation charges: Rs. ${finalCharges}`);
+      fetchCancellationRequests();
+    } catch (err) {
+      setError(err.message || "Failed to approve cancellation request");
+    }
+  };
+
+  const handleReject = async (bookingId) => {
+    const remark = window.prompt("Enter rejection reason (optional):", "") || "";
+    try {
+      const response = await bookingsAPI.rejectCancelRequest(bookingId, remark);
+      if (!response.success) {
+        setError(response.message || "Failed to reject cancellation request");
+        return;
+      }
+      fetchCancellationRequests();
+    } catch (err) {
+      setError(err.message || "Failed to reject cancellation request");
+    }
+  };
+
+  const filteredBookings = bookings.filter((booking) => {
+    const query = searchQuery.toLowerCase();
+    return (
+      booking.intender_name?.toLowerCase().includes(query) ||
+      booking.visitor_email?.toLowerCase().includes(query) ||
+      booking.id?.toString().includes(query)
+    );
+  });
+
+  if (loading && page === 1) {
+    return (
+      <Box p="md">
+        <LoadingOverlay visible={true} />
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      {error && (
+        <Alert type="error" mb="md">
+          {error}
+        </Alert>
+      )}
+
+      {/* Search and Controls */}
+      <Group mb="md" justify="space-between">
+        <TextInput
+          placeholder="Search by name, email, or ID..."
+          leftSection={<IconSearch size={16} />}
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.currentTarget.value)}
+          style={{ flex: 1, maxWidth: "400px" }}
+        />
+        <ActionIcon onClick={fetchCancellationRequests} loading={loading} variant="default">
+          <IconRefresh size={16} />
+        </ActionIcon>
+      </Group>
+
+      {/* Table */}
+      <Box style={{ position: "relative", overflow: "auto" }}>
+        <LoadingOverlay visible={loading && page !== 1} />
+        {filteredBookings.length === 0 ? (
+          <Alert type="info">No cancellation requests found</Alert>
+        ) : (
+          <>
+            <Table striped highlightOnHover>
+              <thead>
+                <tr>
+                  <th>ID</th>
+                  <th>Guest Name</th>
+                  <th>Email</th>
+                  <th>Check-In</th>
+                  <th>Status</th>
+                  <th>Est. Charges</th>
+                  <th>Reason</th>
+                  {isStaff && <th>Actions</th>}
+                </tr>
+              </thead>
+              <tbody>
+                {filteredBookings.map((booking) => (
+                  <tr key={booking.id}>
+                    <td>{booking.id}</td>
+                    <td>{booking.intender_name}</td>
+                    <td>{booking.visitor_email}</td>
+                    <td>{booking.booking_from}</td>
+                    <td>{booking.status || "N/A"}</td>
+                    <td>Rs. {Number(booking.estimated_cancellation_charges || 0)}</td>
+                    <td>
+                      <Group spacing="xs">
+                        <Text size="sm" truncate>
+                          {booking.remark
+                            ? `${booking.remark.substring(0, 30)}...`
+                            : "N/A"}
+                        </Text>
+                        {booking.remark && (
+                          <ActionIcon
+                            size="sm"
+                            variant="light"
+                            onClick={() => setSelectedReason(booking.remark)}
+                          >
+                            <IconInfoCircle size={14} />
+                          </ActionIcon>
+                        )}
+                      </Group>
+                    </td>
+                    {isStaff && (
+                      <td>
+                        <Group spacing="xs">
+                          <Button
+                            size="xs"
+                            leftSection={<IconCheck size={14} />}
+                            onClick={() => handleApprove(booking.id)}
+                            color="green"
+                          >
+                            Approve
+                          </Button>
+                          <Button
+                            size="xs"
+                            leftSection={<IconX size={14} />}
+                            onClick={() => handleReject(booking.id)}
+                            color="red"
+                            variant="light"
+                          >
+                            Reject
+                          </Button>
+                        </Group>
+                      </td>
+                    )}
+                  </tr>
+                ))}
+              </tbody>
+            </Table>
+
+            {/* Pagination */}
+            <Group justify="center" mt="md">
+              <Pagination
+                value={page}
+                onChange={setPage}
+                total={totalPages}
+                boundaries={1}
+                siblings={1}
+              />
+            </Group>
+          </>
+        )}
+      </Box>
+
+      {/* Reason Modal */}
+      <Modal
+        opened={!!selectedReason}
+        onClose={() => setSelectedReason(null)}
+        title="Cancellation Reason"
+      >
+        <Text>{selectedReason}</Text>
+      </Modal>
+    </Box>
+  );
+}
+
+export default CancelledRequestsTable;
diff --git a/src/Modules/Visitors_Hostel/components/tables/CompletedBookingsTable.jsx b/src/Modules/Visitors_Hostel/components/tables/CompletedBookingsTable.jsx
new file mode 100644
index 000000000..e8b8441ed
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/components/tables/CompletedBookingsTable.jsx
@@ -0,0 +1,288 @@
+/**
+ * CompletedBookingsTable
+ * Displays all completed bookings (checked out) with duration and bill status
+ */
+
+import React, { useState, useEffect } from "react";
+import {
+  Table,
+  Group,
+  Badge,
+  Box,
+  Text,
+  TextInput,
+  Alert,
+  LoadingOverlay,
+  Pagination,
+  ActionIcon,
+  Select,
+  Button,
+} from "@mantine/core";
+import { IconSearch, IconRefresh } from "@tabler/icons-react";
+import { useSelector } from "react-redux";
+import { bookingsAPI } from "../../services/visitorHostelApi";
+
+const BILL_STATUS_COLORS = {
+  paid: "green",
+  pending: "yellow",
+  cancelled: "red",
+};
+
+const BOOKING_STATUS_COLORS = {
+  Complete: "green",
+  Canceled: "red",
+};
+
+const BILL_SETTLEMENT_OPTIONS = [
+  { value: "Intender", label: "Intender" },
+  { value: "Visitor", label: "Visitor" },
+  { value: "ProjectNo", label: "Project No" },
+  { value: "Institute", label: "Institute" },
+];
+
+function CompletedBookingsTable() {
+  const [bookings, setBookings] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [page, setPage] = useState(1);
+  const [pageSize] = useState(10);
+  const [totalPages, setTotalPages] = useState(1);
+  const [settlingBookingId, setSettlingBookingId] = useState(null);
+
+  const role = useSelector((state) => state.user?.role);
+  const isIncharge = role === "VhIncharge";
+
+  useEffect(() => {
+    fetchCompletedBookings();
+  }, [page]);
+
+  const fetchCompletedBookings = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await bookingsAPI.getCompletedBookings({
+        page,
+        page_size: pageSize,
+      });
+
+      if (response.success) {
+        setBookings(response.data || []);
+        setTotalPages(response.total_pages || 1);
+      } else {
+        setError(response.message || "Failed to fetch completed bookings");
+      }
+    } catch (err) {
+      setError(err.message || "An error occurred");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filteredBookings = bookings.filter((booking) => {
+    const query = searchQuery.toLowerCase();
+    return (
+      booking.intender_name?.toLowerCase().includes(query) ||
+      booking.visitor_email?.toLowerCase().includes(query) ||
+      booking.id?.toString().includes(query)
+    );
+  });
+
+  const calculateDuration = (checkIn, checkOut) => {
+    if (!checkIn || !checkOut) return "N/A";
+    const start = new Date(checkIn);
+    const end = new Date(checkOut);
+    const days = Math.ceil((end - start) / (1000 * 60 * 60 * 24));
+    return `${days} day${days !== 1 ? "s" : ""}`;
+  };
+
+  const handleSettlementChange = (bookingId, billToBeSettledBy) => {
+    setBookings((prev) =>
+      prev.map((booking) =>
+        booking.id === bookingId
+          ? { ...booking, bill_to_be_settled_by: billToBeSettledBy || "Intender" }
+          : booking
+      )
+    );
+  };
+
+  const handleSettleBill = async (booking) => {
+    try {
+      setSettlingBookingId(booking.id);
+      await bookingsAPI.settleBill(
+        booking.id,
+        booking.bill_to_be_settled_by || "Intender",
+        true,
+        Number(booking.meal_bill || 0),
+        Number(booking.room_bill || 0),
+        Number(booking.extra_charges || 0)
+      );
+      fetchCompletedBookings();
+    } catch (err) {
+      setError(err.detail || err.error || "Failed to settle bill");
+    } finally {
+      setSettlingBookingId(null);
+    }
+  };
+
+  if (loading && page === 1) {
+    return (
+      <Box p="md">
+        <LoadingOverlay visible={true} />
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      {error && (
+        <Alert type="error" mb="md">
+          {error}
+        </Alert>
+      )}
+
+      {/* Search and Controls */}
+      <Group mb="md" justify="space-between">
+        <TextInput
+          placeholder="Search by name, email, or ID..."
+          leftSection={<IconSearch size={16} />}
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.currentTarget.value)}
+          style={{ flex: 1, maxWidth: "400px" }}
+        />
+        <ActionIcon onClick={fetchCompletedBookings} loading={loading} variant="default">
+          <IconRefresh size={16} />
+        </ActionIcon>
+      </Group>
+
+      {/* Table */}
+      <Box style={{ position: "relative", overflow: "auto" }}>
+        <LoadingOverlay visible={loading && page !== 1} />
+        {filteredBookings.length === 0 ? (
+          <Alert type="info">No completed bookings found</Alert>
+        ) : (
+          <>
+            <Table striped highlightOnHover>
+              <thead>
+                <tr>
+                  <th>ID</th>
+                  <th>Guest Name</th>
+                  <th>Booking Status</th>
+                  <th>Check-In</th>
+                  <th>Check-Out</th>
+                  <th>Duration</th>
+                  <th>Source</th>
+                  <th>Meal Bill</th>
+                  <th>Room Bill</th>
+                  <th>Extra Charges</th>
+                  <th>Cancellation Charges</th>
+                  <th>Total Bill</th>
+                  <th>Payment Mode</th>
+                  <th>Transaction ID</th>
+                  <th>Offline Bill ID</th>
+                  <th>Proof</th>
+                  <th>Settled By</th>
+                  <th>Bill Status</th>
+                  {isIncharge && <th>Actions</th>}
+                </tr>
+              </thead>
+              <tbody>
+                {filteredBookings.map((booking) => (
+                  <tr key={booking.id}>
+                    <td>{booking.id}</td>
+                    <td>{booking.intender_name}</td>
+                    <td>
+                      <Badge color={BOOKING_STATUS_COLORS[booking.status] || "gray"}>
+                        {(booking.status || "N/A").toUpperCase()}
+                      </Badge>
+                    </td>
+                    <td>{booking.booking_from}</td>
+                    <td>{booking.booking_to}</td>
+                    <td>
+                      <Text size="sm">
+                        {calculateDuration(booking.booking_from, booking.booking_to)}
+                      </Text>
+                    </td>
+                    <td>
+                      {/* UC-VH-006: Show booking source */}
+                      <Badge
+                        size="sm"
+                        color={booking.is_offline ? "blue" : "gray"}
+                        variant={booking.is_offline ? "filled" : "light"}
+                      >
+                        {booking.booking_source || "online"}
+                      </Badge>
+                    </td>
+                    <td>Rs. {Number(booking.meal_bill || 0)}</td>
+                    <td>Rs. {Number(booking.room_bill || 0)}</td>
+                    <td>Rs. {Number(booking.extra_charges || 0)}</td>
+                    <td>Rs. {Number(booking.cancellation_charges || 0)}</td>
+                    <td>Rs. {Number(booking.total_bill || 0)}</td>
+                    <td>{booking.payment_mode || "-"}</td>
+                    <td>{booking.transaction_id || "-"}</td>
+                    <td>{booking.offline_bill_id || "-"}</td>
+                    <td>
+                      {booking.payment_mode === "online" && booking.payment_screenshot ? (
+                        <a href={booking.payment_screenshot} target="_blank" rel="noreferrer">Screenshot</a>
+                      ) : booking.payment_mode === "offline" && booking.offline_bill_photo ? (
+                        <a href={booking.offline_bill_photo} target="_blank" rel="noreferrer">Bill Photo</a>
+                      ) : (
+                        "-"
+                      )}
+                    </td>
+                    <td>
+                      {isIncharge && booking.bill_status !== "paid" ? (
+                        <Select
+                          data={BILL_SETTLEMENT_OPTIONS}
+                          value={booking.bill_to_be_settled_by || "Intender"}
+                          onChange={(value) => handleSettlementChange(booking.id, value)}
+                          size="xs"
+                          w={140}
+                        />
+                      ) : (
+                        <Text size="sm">{booking.bill_to_be_settled_by || "Intender"}</Text>
+                      )}
+                    </td>
+                    <td>
+                      <Badge color={BILL_STATUS_COLORS[booking.bill_status] || "gray"}>
+                        {booking.bill_status?.toUpperCase() || "PENDING"}
+                      </Badge>
+                    </td>
+                    {isIncharge && (
+                      <td>
+                        {booking.bill_status !== "paid" ? (
+                          <Button
+                            size="xs"
+                            onClick={() => handleSettleBill(booking)}
+                            loading={settlingBookingId === booking.id}
+                          >
+                            Mark Settled
+                          </Button>
+                        ) : (
+                          <Text size="sm" c="green">Settled</Text>
+                        )}
+                      </td>
+                    )}
+                  </tr>
+                ))}
+              </tbody>
+            </Table>
+
+            {/* Pagination */}
+            <Group justify="center" mt="md">
+              <Pagination
+                value={page}
+                onChange={setPage}
+                total={totalPages}
+                boundaries={1}
+                siblings={1}
+              />
+            </Group>
+          </>
+        )}
+      </Box>
+    </Box>
+  );
+}
+
+export default CompletedBookingsTable;
diff --git a/src/Modules/Visitors_Hostel/components/tables/InventoryTable.jsx b/src/Modules/Visitors_Hostel/components/tables/InventoryTable.jsx
new file mode 100644
index 000000000..a5462c902
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/components/tables/InventoryTable.jsx
@@ -0,0 +1,594 @@
+/**
+ * InventoryTable
+ * UC-VH-011: Enhanced inventory management with threshold alerts and replenishment
+ * VHMS TRACEABILITY:
+ * - UC-VH-011: Manage inventory and threshold alerts
+ * - BR-VH-007, BR-VH-016: Threshold policy and incharge approval flow
+ * Features:
+ * - BR-VH-007: Threshold alert system
+ * - BR-VH-016: Replenishment approval workflow
+ * - Critical item highlighting
+ * - Role-based permissions
+ */
+
+import React, { useState, useEffect } from "react";
+import {
+  Table,
+  Box,
+  ActionIcon,
+  Tooltip,
+  Tabs,
+  TextInput,
+  Alert,
+  LoadingOverlay,
+  Pagination,
+  Group,
+  Badge,
+  Button,
+  Modal,
+  Text,
+  Stack,
+  NumberInput,
+  Textarea,
+  Select,
+} from "@mantine/core";
+import { IconEdit, IconSearch, IconRefresh, IconAlertTriangle, IconShoppingCart } from "@tabler/icons-react";
+import { inventoryAPI } from "../../services/visitorHostelApi";
+import { useSelector } from "react-redux";
+import { useActionConfirmation } from "../common/ActionConfirmationProvider";
+
+const INVENTORY_LIST_SUPPORTED = true; // UC-VH-011: Enable inventory functionality
+
+function InventoryTable() {
+  const { confirmAction } = useActionConfirmation();
+  const [items, setItems] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [page, setPage] = useState(1);
+  const [pageSize] = useState(10);
+  const [totalPages, setTotalPages] = useState(1);
+  const [activeTab, setActiveTab] = useState("all");
+  const [criticalItems, setCriticalItems] = useState([]);
+  const [showReplenishmentModal, setShowReplenishmentModal] = useState(false);
+  const [showUpdateModal, setShowUpdateModal] = useState(false);
+  const [selectedItem, setSelectedItem] = useState(null);
+
+  const role = useSelector((state) => state.user?.role);
+  const isStaff = role === "VhIncharge" || role === "VhCaretaker";
+  const isIncharge = role === "VhIncharge";
+  const isCaretaker = role === "VhCaretaker";
+
+  useEffect(() => {
+    fetchInventory();
+    if (isStaff) {
+      checkThresholds();
+    }
+  }, [page, isStaff]);
+
+  const fetchInventory = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await inventoryAPI.getInventoryList();
+      if (response.success) {
+        setItems(response.data || []);
+      } else {
+        setError(response.message || "Failed to fetch inventory");
+      }
+    } catch (err) {
+      setError(err.message || "Failed to fetch inventory");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const checkThresholds = async () => {
+    try {
+      const response = await inventoryAPI.checkInventoryThresholds();
+      if (response.success) {
+        setCriticalItems(response.critical_items || []);
+      }
+    } catch (err) {
+      console.error("Failed to check thresholds:", err);
+    }
+  };
+
+  const triggerThresholdCheck = async () => {
+    if (!(await confirmAction("Are you sure you want to run inventory threshold check now?", {
+      title: "Confirm Threshold Check",
+      confirmLabel: "Run",
+      confirmColor: "orange",
+    }))) {
+      return;
+    }
+
+    try {
+      await inventoryAPI.triggerThresholdCheck();
+      checkThresholds();
+      fetchInventory();
+    } catch (err) {
+      setError("Failed to trigger threshold check");
+    }
+  };
+
+  const handleRequestReplenishment = (item) => {
+    setSelectedItem(item);
+    setShowReplenishmentModal(true);
+  };
+
+  const handleEditItem = (item) => {
+    setSelectedItem(item);
+    setShowUpdateModal(true);
+  };
+
+  const filteredItems = items.filter((item) =>
+    item.item_name?.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const getTabItems = () => {
+    switch (activeTab) {
+      case "critical":
+        return filteredItems.filter((item) => item.is_critical);
+      case "consumables":
+        return filteredItems.filter((item) => item.consumable);
+      case "non-consumables":
+        return filteredItems.filter((item) => !item.consumable);
+      default:
+        return filteredItems;
+    }
+  };
+
+  const tabItems = getTabItems();
+
+  return (
+    <Box>
+      {/* UC-VH-011: Critical Items Alert */}
+      {criticalItems.length > 0 && isStaff && (
+        <Alert
+          icon={<IconAlertTriangle size={16} />}
+          title="Critical Inventory Alert "
+          color="red"
+          mb="md"
+        >
+          <Text size="sm" mb="xs">
+            {criticalItems.length} item(s) are below threshold and need immediate attention.
+          </Text>
+          <Group spacing="xs">
+            {criticalItems.slice(0, 3).map((item) => (
+              <Badge key={item.id} color="red" size="sm">
+                {item.item_name}: {item.quantity} {item.unit}
+              </Badge>
+            ))}
+            {criticalItems.length > 3 && (
+              <Badge color="red" size="sm">
+                +{criticalItems.length - 3} more
+              </Badge>
+            )}
+          </Group>
+        </Alert>
+      )}
+
+      <Group mb="md" justify="space-between">
+        <TextInput
+          placeholder="Search inventory items..."
+          leftSection={<IconSearch size={16} />}
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.currentTarget.value)}
+          style={{ flex: 1, maxWidth: "400px" }}
+        />
+        <Group spacing="xs">
+          {isStaff && (
+            <Button
+              leftSection={<IconAlertTriangle size={16} />}
+              variant="outline"
+              color="orange"
+              onClick={triggerThresholdCheck}
+              loading={loading}
+            >
+              Check Thresholds
+            </Button>
+          )}
+          <ActionIcon onClick={fetchInventory} loading={loading} variant="default">
+            <IconRefresh size={16} />
+          </ActionIcon>
+        </Group>
+      </Group>
+
+      {error && (
+        <Alert color="red" mb="md">
+          {error}
+        </Alert>
+      )}
+
+      <LoadingOverlay visible={loading} />
+
+      <Tabs value={activeTab} onChange={setActiveTab}>
+        <Tabs.List>
+          <Tabs.Tab value="all">All Items ({filteredItems.length})</Tabs.Tab>
+          <Tabs.Tab
+            value="critical"
+            color="red"
+            rightSection={
+              filteredItems.filter((item) => item.is_critical).length > 0 ? (
+                <Badge size="xs" color="red">
+                  {filteredItems.filter((item) => item.is_critical).length}
+                </Badge>
+              ) : null
+            }
+          >
+            Critical Items
+          </Tabs.Tab>
+          <Tabs.Tab value="consumables">
+            Consumables ({filteredItems.filter((item) => item.consumable).length})
+          </Tabs.Tab>
+          <Tabs.Tab value="non-consumables">
+            Non-Consumables ({filteredItems.filter((item) => !item.consumable).length})
+          </Tabs.Tab>
+        </Tabs.List>
+
+        <Tabs.Panel value={activeTab} pt="md">
+          <InventoryTabContent
+            items={tabItems}
+            isStaff={isStaff}
+            isIncharge={isIncharge}
+            isCaretaker={isCaretaker}
+            onRequestReplenishment={handleRequestReplenishment}
+            onEditItem={handleEditItem}
+          />
+        </Tabs.Panel>
+      </Tabs>
+
+      <InventoryUpdateModal
+        opened={showUpdateModal}
+        onClose={() => setShowUpdateModal(false)}
+        item={selectedItem}
+        onSuccess={() => {
+          setShowUpdateModal(false);
+          checkThresholds();
+          fetchInventory();
+        }}
+      />
+
+      {/* Replenishment Request Modal */}
+      <ReplenishmentRequestModal
+        opened={showReplenishmentModal}
+        onClose={() => setShowReplenishmentModal(false)}
+        item={selectedItem}
+        onSuccess={() => {
+          setShowReplenishmentModal(false);
+          fetchInventory();
+        }}
+      />
+    </Box>
+  );
+}
+
+function InventoryTabContent({ items, isStaff, isIncharge, isCaretaker, onRequestReplenishment, onEditItem }) {
+  if (items.length === 0) {
+    return <Alert color="blue">No items found in this category</Alert>;
+  }
+
+  return (
+    <Table striped highlightOnHover>
+      <thead>
+        <tr>
+          <th>Item Name</th>
+          <th>Current Stock</th>
+          <th>Threshold</th>
+          <th>Status</th>
+          <th>Category</th>
+          <th>Total Stock</th>
+          <th>In Use</th>
+          {isStaff && <th>Actions</th>}
+        </tr>
+      </thead>
+      <tbody>
+        {items.map((item) => (
+          <tr key={item.id} style={item.is_critical ? { backgroundColor: "#ffe0e0" } : {}}>
+            <td>
+              <Group spacing="xs">
+                <Text fw={item.is_critical ? 600 : 400}>{item.item_name}</Text>
+                {item.is_critical && (
+                  <IconAlertTriangle size={16} color="red" />
+                )}
+              </Group>
+            </td>
+            <td>
+              <Badge
+                color={
+                  item.is_critical
+                    ? "red"
+                    : item.quantity < item.threshold_quantity * 1.5
+                      ? "yellow"
+                      : "green"
+                }
+                variant={item.is_critical ? "filled" : "light"}
+              >
+                {item.quantity} {item.unit}
+              </Badge>
+            </td>
+            <td>
+              <Text size="sm" color="dimmed">
+                {item.threshold_quantity} {item.unit}
+              </Text>
+            </td>
+            <td>
+              <Stack spacing={4}>
+                {item.is_critical && (
+                  <Badge size="xs" color="red">
+                    Critical
+                  </Badge>
+                )}
+                {item.pending_replenishment && (
+                  <Badge size="xs" color="blue">
+                    Replenishment Pending
+                  </Badge>
+                )}
+                {!item.is_critical && !item.pending_replenishment && (
+                  <Badge size="xs" color="green">
+                    OK
+                  </Badge>
+                )}
+              </Stack>
+            </td>
+            <td>
+              <Badge size="sm" variant="outline">
+                {item.category}
+              </Badge>
+            </td>
+            <td>{item.total_stock}</td>
+            <td>{item.inuse}</td>
+            {isStaff && (
+              <td>
+                <Group spacing="xs">
+                  {(isIncharge || isCaretaker) && (
+                    <Tooltip label="Update Item Quantity">
+                      <ActionIcon
+                        size="sm"
+                        variant="light"
+                        color="blue"
+                        onClick={() => onEditItem(item)}
+                      >
+                        <IconEdit size={16} />
+                      </ActionIcon>
+                    </Tooltip>
+                  )}
+                  {isCaretaker && item.is_critical && !item.pending_replenishment && (
+                    <Tooltip label="Request Replenishment">
+                      <ActionIcon
+                        size="sm"
+                        variant="light"
+                        color="orange"
+                        onClick={() => onRequestReplenishment(item)}
+                      >
+                        <IconShoppingCart size={16} />
+                      </ActionIcon>
+                    </Tooltip>
+                  )}
+                </Group>
+              </td>
+            )}
+          </tr>
+        ))}
+      </tbody>
+    </Table>
+  );
+}
+
+function InventoryUpdateModal({ opened, onClose, item, onSuccess }) {
+  const { confirmAction } = useActionConfirmation();
+  const [loading, setLoading] = useState(false);
+  const [quantity, setQuantity] = useState(0);
+  const [error, setError] = useState("");
+
+  useEffect(() => {
+    if (item) {
+      setQuantity(item.quantity ?? 0);
+      setError("");
+    }
+  }, [item]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!item) return;
+
+    if (!(await confirmAction("Are you sure you want to update this inventory quantity?", {
+      title: "Confirm Quantity Update",
+      confirmLabel: "Update",
+      confirmColor: "blue",
+    }))) {
+      return;
+    }
+
+    setLoading(true);
+    setError("");
+    try {
+      const response = await inventoryAPI.updateInventoryQuantity(item.id, Number(quantity), "set");
+      if (response?.success) {
+        onSuccess();
+      } else {
+        setError(response?.detail || "Failed to update item quantity");
+      }
+    } catch (err) {
+      setError(err?.detail || err?.message || "Failed to update item quantity");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title={<Text fw={600}>Update Inventory Item - {item?.item_name}</Text>}
+      size="md"
+    >
+      {item && (
+        <form onSubmit={handleSubmit}>
+          <Stack spacing="md">
+            {error && <Alert color="red">{error}</Alert>}
+
+            <Text size="sm" c="dimmed">
+              Unit: {item.unit} | Current: {item.quantity} | Threshold: {item.threshold_quantity}
+            </Text>
+
+            <NumberInput
+              label="New Quantity"
+              placeholder="Enter updated stock quantity"
+              value={quantity}
+              onChange={setQuantity}
+              min={0}
+              required
+            />
+
+            <Group justify="flex-end">
+              <Button variant="default" onClick={onClose} disabled={loading}>
+                Cancel
+              </Button>
+              <Button type="submit" loading={loading}>
+                Update Item
+              </Button>
+            </Group>
+          </Stack>
+        </form>
+      )}
+    </Modal>
+  );
+}
+
+function ReplenishmentRequestModal({ opened, onClose, item, onSuccess }) {
+  const { confirmAction } = useActionConfirmation();
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [formData, setFormData] = useState({
+    requestedQuantity: 10,
+    urgency: "medium",
+    justification: "",
+  });
+
+  useEffect(() => {
+    if (item) {
+      setError("");
+      setFormData({
+        requestedQuantity: Math.max(item.threshold_quantity * 2 - item.quantity, 5),
+        urgency: item.quantity === 0 ? "critical" : item.quantity < 3 ? "high" : "medium",
+        justification: `Replenishment needed for ${item.item_name}. Current stock: ${item.quantity} ${item.unit}, below threshold of ${item.threshold_quantity} ${item.unit}.`,
+      });
+    }
+  }, [item]);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (!item) return;
+
+    if (!(await confirmAction("Are you sure you want to submit this replenishment request?", {
+      title: "Confirm Replenishment Request",
+      confirmLabel: "Submit",
+      confirmColor: "orange",
+    }))) {
+      return;
+    }
+
+    setLoading(true);
+    setError("");
+    try {
+      const response = await inventoryAPI.createReplenishmentRequest(
+        item.id,
+        formData.requestedQuantity,
+        formData.urgency,
+        formData.justification
+      );
+
+      if (!response?.success) {
+        throw new Error(response?.detail || response?.message || "Failed to create replenishment request.");
+      }
+
+      onSuccess();
+    } catch (err) {
+      const errorMessage =
+        err?.detail ||
+        err?.message ||
+        err?.payload?.detail ||
+        "Failed to create replenishment request.";
+      setError(errorMessage);
+      console.error("Failed to create replenishment request:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Modal
+      opened={opened}
+      onClose={onClose}
+      title={
+        <Group>
+          <IconShoppingCart size={20} />
+          <Text>Request Replenishment - {item?.item_name}</Text>
+        </Group>
+      }
+      size="md"
+    >
+      {item && (
+        <form onSubmit={handleSubmit}>
+          <Stack spacing="md">
+            {error && <Alert color="red">{error}</Alert>}
+            <Alert icon={<IconAlertTriangle size={16} />} color="orange">
+              <Text size="sm">
+                Current stock: <strong>{item.quantity} {item.unit}</strong> (Below threshold of {item.threshold_quantity} {item.unit})
+              </Text>
+            </Alert>
+
+            <NumberInput
+              label="Requested Quantity*"
+              placeholder="Enter quantity needed"
+              value={formData.requestedQuantity}
+              onChange={(val) => setFormData(prev => ({ ...prev, requestedQuantity: val }))}
+              min={1}
+              required
+            />
+
+            <Select
+              label="Urgency Level*"
+              placeholder="Select urgency"
+              data={[
+                { value: "low", label: "Low" },
+                { value: "medium", label: "Medium" },
+                { value: "high", label: "High" },
+                { value: "critical", label: "Critical" },
+              ]}
+              value={formData.urgency}
+              onChange={(val) => setFormData(prev => ({ ...prev, urgency: val }))}
+              required
+            />
+
+            <Textarea
+              label="Justification*"
+              placeholder="Explain why replenishment is needed"
+              value={formData.justification}
+              onChange={(e) => setFormData(prev => ({ ...prev, justification: e.target.value }))}
+              minRows={3}
+              required
+            />
+
+            <Group position="right">
+              <Button variant="default" onClick={onClose} disabled={loading}>
+                Cancel
+              </Button>
+              <Button
+                type="submit"
+                loading={loading}
+                leftSection={<IconShoppingCart size={16} />}
+              >
+                Submit Request
+              </Button>
+            </Group>
+          </Stack>
+        </form>
+      )}
+    </Modal>
+  );
+}
+
+export default InventoryTable;
\ No newline at end of file
diff --git a/src/Modules/Visitors_Hostel/components/tables/OverstayDetectionTable.jsx b/src/Modules/Visitors_Hostel/components/tables/OverstayDetectionTable.jsx
new file mode 100644
index 000000000..f40e4d15d
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/components/tables/OverstayDetectionTable.jsx
@@ -0,0 +1,387 @@
+/**
+ * OverstayDetectionTable
+ * BR-VH-018: Overstay Detection Component
+ * 
+ * Features:
+ * - Real-time overstay detection based on checkout time
+ * - Automatic alert generation when checkout time exceeded
+ * - Critical overstay highlighting (>1 day)
+ * - Role-based access (VhIncharge/VhCaretaker only)
+ */
+
+import React, { useState, useEffect } from "react";
+import {
+  Table,
+  Group,
+  Badge,
+  Box,
+  ActionIcon,
+  Tooltip,
+  TextInput,
+  Alert,
+  LoadingOverlay,
+  Button,
+  Text,
+  Stack,
+  Modal,
+  Card,
+  Timeline,
+  Divider,
+} from "@mantine/core";
+import { 
+  IconSearch, 
+  IconRefresh, 
+  IconAlertTriangle, 
+  IconClock, 
+  IconPhone,
+  IconUser,
+  IconHome,
+  IconCalendar,
+  IconBell,
+  IconExclamationMark
+} from "@tabler/icons-react";
+import { useSelector } from "react-redux";
+import { bookingsAPI } from "../../services/visitorHostelApi";
+
+const URGENCY_COLORS = {
+  normal: "blue",
+  warning: "orange", 
+  critical: "red",
+};
+
+function OverstayDetectionTable() {
+  const [overstays, setOverstays] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [alertLoading, setAlertLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [showDetailModal, setShowDetailModal] = useState(false);
+  const [selectedOverstay, setSelectedOverstay] = useState(null);
+  const [alertResults, setAlertResults] = useState(null);
+
+  const role = useSelector((state) => state.user?.role);
+  const isStaff = role === "VhIncharge" || role === "VhCaretaker";
+
+  useEffect(() => {
+    if (isStaff) {
+      fetchOverstays();
+      // Auto-refresh every 5 minutes
+      const interval = setInterval(fetchOverstays, 5 * 60 * 1000);
+      return () => clearInterval(interval);
+    }
+  }, [isStaff]);
+
+  const fetchOverstays = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await bookingsAPI.detectOverstays();
+      if (response.success) {
+        setOverstays(response.overstays || []);
+      } else {
+        setError(response.message || "Failed to fetch overstay data");
+      }
+    } catch (err) {
+      setError(err.message || "An error occurred while fetching overstays");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const triggerOverstayAlerts = async () => {
+    setAlertLoading(true);
+    try {
+      const response = await bookingsAPI.triggerOverstayAlerts();
+      if (response.success) {
+        setAlertResults({
+          totalOverstays: response.overstay_count,
+          alertsSent: response.alerts_sent,
+          criticalAlerts: response.critical_alerts,
+          message: response.message
+        });
+        // Refresh data after triggering alerts
+        await fetchOverstays();
+      } else {
+        setError(response.message || "Failed to trigger overstay alerts");
+      }
+    } catch (err) {
+      setError(err.message || "An error occurred while triggering alerts");
+    } finally {
+      setAlertLoading(false);
+    }
+  };
+
+  const getUrgencyLevel = (overstay) => {
+    if (overstay.overstay_days > 1) return 'critical';
+    if (overstay.overstay_days > 0) return 'warning';
+    return 'normal';
+  };
+
+  const formatOverstayDuration = (overstay) => {
+    const days = overstay.overstay_days;
+    if (days === 0) {
+      return "Today (hours overdue)";
+    } else if (days === 1) {
+      return "1 day overdue";
+    } else {
+      return `${days} days overdue`;
+    }
+  };
+
+  const viewOverstayDetails = (overstay) => {
+    setSelectedOverstay(overstay);
+    setShowDetailModal(true);
+  };
+
+  const filteredOverstays = overstays.filter((overstay) => {
+    const query = searchQuery.toLowerCase();
+    return (
+      overstay.visitors.some(v => v.name.toLowerCase().includes(query)) ||
+      overstay.rooms.some(room => room.toLowerCase().includes(query)) ||
+      overstay.intender.name.toLowerCase().includes(query) ||
+      overstay.booking_id.toString().includes(query)
+    );
+  });
+
+  if (!isStaff) {
+    return (
+      <Box p="md">
+        <Alert color="orange" icon={<IconExclamationMark size={16} />}>
+          Access denied. Only VhIncharge and VhCaretaker can access overstay detection.
+        </Alert>
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      {/* Header */}
+      <Group mb="md" justify="space-between">
+        <TextInput
+          placeholder="Search by visitor, room, or booking ID..."
+          leftSection={<IconSearch size={16} />}
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.currentTarget.value)}
+          style={{ flex: 1, maxWidth: "400px" }}
+        />
+        <Group spacing="xs">
+          <ActionIcon onClick={fetchOverstays} loading={loading} variant="default">
+            <IconRefresh size={16} />
+          </ActionIcon>
+          <Button
+            leftSection={<IconBell size={16} />}
+            onClick={triggerOverstayAlerts}
+            loading={alertLoading}
+            color="red"
+            disabled={filteredOverstays.length === 0}
+          >
+            Trigger Alerts ({filteredOverstays.length})
+          </Button>
+        </Group>
+      </Group>
+
+      {error && (
+        <Alert color="red" mb="md">
+          {error}
+        </Alert>
+      )}
+
+      {alertResults && (
+        <Alert color="green" mb="md" icon={<IconBell size={16} />}>
+          <Text size="sm">
+            <strong>Alert Status:</strong> {alertResults.message}<br/>
+            <strong>Total Overstays:</strong> {alertResults.totalOverstays} | 
+            <strong> Alerts Sent:</strong> {alertResults.alertsSent} | 
+            <strong> Critical:</strong> {alertResults.criticalAlerts}
+          </Text>
+        </Alert>
+      )}
+
+      {/* BR-VH-018 Notice */}
+      <Alert color="blue" mb="md" icon={<IconAlertTriangle size={16} />}>
+        <Text size="sm">
+          <strong>BR-VH-018:</strong> Overstay alerts are generated when checkout time is exceeded. 
+          Default checkout time is 11:00 AM unless specified otherwise.
+        </Text>
+      </Alert>
+
+      <Box style={{ position: "relative" }}>
+        <LoadingOverlay visible={loading} />
+        
+        {filteredOverstays.length === 0 ? (
+          <Alert color="blue">
+            {loading ? "Checking for overstays..." : "No overstays detected"}
+          </Alert>
+        ) : (
+          <Table striped highlightOnHover>
+            <thead>
+              <tr>
+                <th>Booking ID</th>
+                <th>Visitors</th>
+                <th>Rooms</th>
+                <th>Expected Checkout</th>
+                <th>Overstay Duration</th>
+                <th>Urgency</th>
+                <th>Intender</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {filteredOverstays.map((overstay) => {
+                const urgency = getUrgencyLevel(overstay);
+                return (
+                  <tr key={overstay.booking_id}>
+                    <td>
+                      <Text fw={500}>#{overstay.booking_id}</Text>
+                    </td>
+                    <td>
+                      <Stack spacing={2}>
+                        {overstay.visitors.map((visitor, idx) => (
+                          <Text key={idx} size="sm">
+                            {visitor.name}
+                          </Text>
+                        ))}
+                      </Stack>
+                    </td>
+                    <td>
+                      <Badge color="blue" size="sm">
+                        {overstay.rooms.join(", ")}
+                      </Badge>
+                    </td>
+                    <td>
+                      <Group spacing={4}>
+                        <IconCalendar size={14} />
+                        <Text size="sm">
+                          {overstay.booking_to} at {overstay.departure_time}
+                        </Text>
+                      </Group>
+                    </td>
+                    <td>
+                      <Group spacing={4}>
+                        <IconClock size={14} />
+                        <Text size="sm" color={urgency === 'critical' ? 'red' : urgency === 'warning' ? 'orange' : 'blue'}>
+                          {formatOverstayDuration(overstay)}
+                        </Text>
+                      </Group>
+                    </td>
+                    <td>
+                      <Badge 
+                        color={URGENCY_COLORS[urgency]} 
+                        size="sm"
+                        variant={urgency === 'critical' ? 'filled' : 'light'}
+                      >
+                        {urgency.toUpperCase()}
+                        {urgency === 'critical' && ' ⚠️'}
+                      </Badge>
+                    </td>
+                    <td>
+                      <Text size="sm">{overstay.intender.name}</Text>
+                    </td>
+                    <td>
+                      <Tooltip label="View Details">
+                        <ActionIcon
+                          size="sm"
+                          variant="light"
+                          color="blue"
+                          onClick={() => viewOverstayDetails(overstay)}
+                        >
+                          <IconUser size={16} />
+                        </ActionIcon>
+                      </Tooltip>
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </Table>
+        )}
+      </Box>
+
+      {/* Overstay Detail Modal */}
+      <Modal
+        opened={showDetailModal}
+        onClose={() => setShowDetailModal(false)}
+        title={`Overstay Details - Booking #${selectedOverstay?.booking_id}`}
+        size="lg"
+      >
+        {selectedOverstay && (
+          <Stack spacing="md">
+            {/* Critical Warning */}
+            {selectedOverstay.is_critical && (
+              <Alert color="red" icon={<IconAlertTriangle size={16} />}>
+                <Text fw={500}>CRITICAL OVERSTAY</Text>
+                <Text size="sm">This booking has exceeded checkout time by more than 1 day.</Text>
+              </Alert>
+            )}
+
+            <Card withBorder padding="md">
+              <Text fw={500} mb="md">Booking Information</Text>
+              <Timeline active={2} bulletSize={24} lineWidth={2}>
+                <Timeline.Item bullet={<IconCalendar size={12} />} title="Checkout Date">
+                  <Text size="sm">{selectedOverstay.booking_to}</Text>
+                </Timeline.Item>
+                <Timeline.Item bullet={<IconClock size={12} />} title="Departure Time">
+                  <Text size="sm">{selectedOverstay.departure_time}</Text>
+                </Timeline.Item>
+                <Timeline.Item bullet={<IconAlertTriangle size={12} />} title="Overstay Duration" color="red">
+                  <Text size="sm" color="red">{formatOverstayDuration(selectedOverstay)}</Text>
+                </Timeline.Item>
+              </Timeline>
+            </Card>
+
+            <Card withBorder padding="md">
+              <Text fw={500} mb="md">Visitor Information</Text>
+              {selectedOverstay.visitors.map((visitor, idx) => (
+                <Group key={idx} mb="xs">
+                  <IconUser size={16} />
+                  <div>
+                    <Text size="sm" fw={500}>{visitor.name}</Text>
+                    <Text size="xs" color="dimmed">{visitor.phone}</Text>
+                  </div>
+                </Group>
+              ))}
+            </Card>
+
+            <Card withBorder padding="md">
+              <Text fw={500} mb="md">Room & Contact Information</Text>
+              <Group mb="xs">
+                <IconHome size={16} />
+                <Text size="sm">Rooms: {selectedOverstay.rooms.join(", ")}</Text>
+              </Group>
+              <Group mb="xs">
+                <IconUser size={16} />
+                <Text size="sm">Intender: {selectedOverstay.intender.name}</Text>
+              </Group>
+              {selectedOverstay.intender.email && (
+                <Group>
+                  <IconPhone size={16} />
+                  <Text size="sm">Email: {selectedOverstay.intender.email}</Text>
+                </Group>
+              )}
+            </Card>
+
+            <Divider />
+
+            <Group justify="right">
+              <Button variant="default" onClick={() => setShowDetailModal(false)}>
+                Close
+              </Button>
+              <Button 
+                color="red" 
+                leftIcon={<IconBell size={16} />}
+                onClick={() => {
+                  triggerOverstayAlerts();
+                  setShowDetailModal(false);
+                }}
+              >
+                Send Alert for This Overstay
+              </Button>
+            </Group>
+          </Stack>
+        )}
+      </Modal>
+    </Box>
+  );
+}
+
+export default OverstayDetectionTable;
\ No newline at end of file
diff --git a/src/Modules/Visitors_Hostel/components/tables/PendingRequestsTable.jsx b/src/Modules/Visitors_Hostel/components/tables/PendingRequestsTable.jsx
new file mode 100644
index 000000000..337365da3
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/components/tables/PendingRequestsTable.jsx
@@ -0,0 +1,452 @@
+/**
+ * PendingRequestsTable
+ * Displays all pending booking requests for VhIncharge review
+ * Actions: View, Confirm, Reject
+ */
+
+import React, { useState, useEffect } from "react";
+import {
+  Table,
+  Group,
+  Badge,
+  Box,
+  ActionIcon,
+  Tooltip,
+  TextInput,
+  Alert,
+  LoadingOverlay,
+  Pagination,
+  Button,
+} from "@mantine/core";
+import { IconEye, IconCheck, IconX, IconSearch, IconRefresh, IconArrowRight, IconEdit, IconPhone } from "@tabler/icons-react";
+import { useSelector } from "react-redux";
+import { bookingsAPI } from "../../services/visitorHostelApi";
+import ViewBookingModal from "../common/ViewBookingModal";
+import BookingRequestForm from "../forms/BookingRequestForm";
+import UpdateBookingForm from "../forms/UpdateBookingForm";
+import OfflineBookingForm from "../forms/OfflineBookingForm";
+
+function PendingRequestsTable({ listMode = "queue" }) {
+  const [bookings, setBookings] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [page, setPage] = useState(1);
+  const [pageSize] = useState(10);
+  const [totalPages, setTotalPages] = useState(1);
+  const [viewingBooking, setViewingBooking] = useState(null);
+  const [bookingFormOpened, setBookingFormOpened] = useState(false);
+  const [loadingDetails, setLoadingDetails] = useState(false);
+  const [editingBooking, setEditingBooking] = useState(null);
+  const [updateFormOpened, setUpdateFormOpened] = useState(false);
+  const [offlineBookingFormOpened, setOfflineBookingFormOpened] = useState(false);
+
+  const role = useSelector((state) => state.user?.role);
+
+  useEffect(() => {
+    fetchPendingBookings();
+  }, [page, listMode]);
+
+  const fetchPendingBookings = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await bookingsAPI.getPendingBookings({
+        view: listMode,
+        page,
+        page_size: pageSize,
+      });
+
+      if (response.success) {
+        setBookings(response.data || []);
+        setTotalPages(response.total_pages || 1);
+      } else {
+        setError(response.message || "Failed to fetch pending bookings");
+      }
+    } catch (err) {
+      setError(err.message || "An error occurred");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filteredBookings = bookings.filter((booking) => {
+    const query = searchQuery.toLowerCase();
+    return (
+      booking.guest_name?.toLowerCase().includes(query) ||
+      booking.guest_email?.toLowerCase().includes(query) ||
+      booking.id?.toString().includes(query)
+    );
+  });
+
+  const handleConfirm = async (booking) => {
+    try {
+      const result = await bookingsAPI.confirmBooking(
+        booking.id,
+        booking.visitor_category,
+        [] // Empty rooms array - rooms will be assigned separately if needed
+      );
+      if (result.success) {
+        fetchPendingBookings();
+      } else {
+        setError(result.detail || "Failed to confirm booking");
+      }
+    } catch (err) {
+      setError("Failed to confirm booking: " + err.message);
+    }
+  };
+
+  const handleForward = async (booking) => {
+    try {
+      const result = await bookingsAPI.forwardBooking(
+        booking.id,
+        booking.visitor_category,
+        [],
+        "Forwarded by caretaker"
+      );
+      if (result.success) {
+        fetchPendingBookings();
+      } else {
+        setError(result.detail || "Failed to forward booking");
+      }
+    } catch (err) {
+      setError("Failed to forward booking: " + err.message);
+    }
+  };
+
+  const handleReject = async (bookingId) => {
+    try {
+      const result = await bookingsAPI.rejectBooking(bookingId);
+      if (result.success) {
+        fetchPendingBookings();
+      }
+    } catch (err) {
+      setError("Failed to reject booking");
+    }
+  };
+
+  const handleCancelRequest = async (bookingId) => {
+    try {
+      const result = await bookingsAPI.cancelBookingRequest(bookingId);
+      if (result.success) {
+        fetchPendingBookings();
+      } else {
+        setError(result.detail || "Failed to request cancellation");
+      }
+    } catch (err) {
+      setError("Failed to request cancellation: " + err.message);
+    }
+  };
+
+  const handleViewDetails = async (booking) => {
+    try {
+      setLoadingDetails(true);
+      const response = await bookingsAPI.getBookingDetail(booking.id);
+      if (response.success && response.data) {
+        setViewingBooking(response.data);
+      } else {
+        setError("Failed to load booking details");
+      }
+    } catch (err) {
+      setError("Error loading booking details: " + err.message);
+    } finally {
+      setLoadingDetails(false);
+    }
+  };
+
+  const handleModifyBooking = async (booking) => {
+    try {
+      setLoadingDetails(true);
+      const response = await bookingsAPI.getBookingDetail(booking.id);
+      if (response.success && response.data) {
+        setEditingBooking(response.data);
+        setUpdateFormOpened(true);
+      } else {
+        setError("Failed to load booking details for editing");
+      }
+    } catch (err) {
+      setError("Error loading booking details: " + err.message);
+    } finally {
+      setLoadingDetails(false);
+    }
+  };
+
+  const handleUpdateSuccess = () => {
+    setUpdateFormOpened(false);
+    setEditingBooking(null);
+    fetchPendingBookings(); // Refresh the list
+  };
+
+  if (loading && page === 1) {
+    return (
+      <Box p="md">
+        <LoadingOverlay visible={true} />
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      {error && (
+        <Alert type="error" mb="md">
+          {error}
+        </Alert>
+      )}
+
+      {/* Search and Controls */}
+      <Group mb="md" justify="space-between">
+        <TextInput
+          placeholder="Search by name, email, or ID..."
+          leftSection={<IconSearch size={16} />}
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.currentTarget.value)}
+          style={{ flex: 1, maxWidth: "400px" }}
+        />
+        <Group spacing="xs">
+          <ActionIcon onClick={fetchPendingBookings} loading={loading} variant="default">
+            <IconRefresh size={16} />
+          </ActionIcon>
+          {role !== "VhIncharge" && role !== "VhCaretaker" && (
+            <Button 
+              onClick={() => setBookingFormOpened(true)}
+              size="sm"
+              variant="filled"
+            >
+              + Create Booking
+            </Button>
+          )}
+          {/* UC-VH-006: Offline booking button for caretakers */}
+          {role === "VhCaretaker" && (
+            <Button 
+              onClick={() => setOfflineBookingFormOpened(true)}
+              size="sm"
+              variant="filled"
+              color="blue"
+              leftIcon={<IconPhone size={14} />}
+            >
+              Record Offline Booking
+            </Button>
+          )}
+        </Group>
+      </Group>
+
+      {/* Booking Form Modal */}
+      {bookingFormOpened && (
+        <BookingRequestForm
+          opened={bookingFormOpened}
+          onClose={() => {
+            setBookingFormOpened(false);
+            fetchPendingBookings();
+          }}
+          onSuccess={() => {
+            setBookingFormOpened(false);
+            fetchPendingBookings();
+          }}
+        />
+      )}
+
+      {/* Table */}
+      <Box style={{ position: "relative", overflow: "auto" }}>
+        <LoadingOverlay visible={loading && page !== 1} />
+        {filteredBookings.length === 0 ? (
+          <Alert type="info">
+            {listMode === "bookings" ? "No bookings found" : "No pending requests found"}
+          </Alert>
+        ) : (
+          <>
+            <Table striped highlightOnHover>
+              <thead>
+                <tr>
+                  <th>ID</th>
+                  <th>Guest Name</th>
+                  <th>Email</th>
+                  <th>Check-In</th>
+                  <th>Check-Out</th>
+                  <th>Status</th>
+                  <th>Category</th>
+                  <th>Source</th>
+                  <th>Persons</th>
+                  <th>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {filteredBookings.map((booking) => (
+                  <tr key={booking.id}>
+                    <td>{booking.id}</td>
+                    <td>{booking.guest_name}</td>
+                    <td>{booking.guest_email}</td>
+                    <td>{booking.booking_from}</td>
+                    <td>{booking.booking_to}</td>
+                    <td>
+                      <Badge
+                        size="sm"
+                        color={
+                          booking.status === "Rejected"
+                            ? "red"
+                            : booking.status === "Forward"
+                              ? "indigo"
+                              : booking.status === "Pending"
+                                ? "yellow"
+                                : "gray"
+                        }
+                      >
+                        {booking.status}
+                      </Badge>
+                    </td>
+                    <td>
+                      <Badge size="sm">{booking.visitor_category}</Badge>
+                    </td>
+                    <td>
+                      {/* UC-VH-006: Show booking source */}
+                      <Badge 
+                        size="sm" 
+                        color={booking.is_offline ? "blue" : "gray"}
+                        variant={booking.is_offline ? "filled" : "light"}
+                      >
+                        {booking.booking_source || "online"}
+                      </Badge>
+                    </td>
+                    <td>{booking.person_count || 1}</td>
+                    <td>
+                      <Group spacing="xs">
+                        <Tooltip label="View Details">
+                          <ActionIcon
+                            size="sm"
+                            variant="light"
+                            color="blue"
+                            onClick={() => handleViewDetails(booking)}
+                            loading={loadingDetails}
+                          >
+                            <IconEye size={16} />
+                          </ActionIcon>
+                        </Tooltip>
+                        
+                        {/* ONLY VhIncharge can Confirm forwarded bookings */}
+                        {role === "VhIncharge" && booking.status === "Forward" && (
+                          <Tooltip label="Confirm Booking">
+                            <ActionIcon
+                              size="sm"
+                              variant="light"
+                              color="green"
+                              onClick={() => handleConfirm(booking)}
+                            >
+                              <IconCheck size={16} />
+                            </ActionIcon>
+                          </Tooltip>
+                        )}
+
+                        {/* ONLY VhCaretaker can Forward pending bookings */}
+                        {role === "VhCaretaker" && booking.status === "Pending" && (
+                          <Tooltip label="Forward to VhIncharge">
+                            <ActionIcon
+                              size="sm"
+                              variant="light"
+                              color="indigo"
+                              onClick={() => handleForward(booking)}
+                            >
+                              <IconArrowRight size={16} />
+                            </ActionIcon>
+                          </Tooltip>
+                        )}
+                        
+                        {/* VhIncharge and VhCaretaker can Reject bookings */}
+                        {((role === "VhIncharge" && booking.status === "Forward") ||
+                          (role === "VhCaretaker" && booking.status === "Pending")) && (
+                          <Tooltip label="Reject Booking">
+                            <ActionIcon
+                              size="sm"
+                              variant="light"
+                              color="red"
+                              onClick={() => handleReject(booking.id)}
+                            >
+                              <IconX size={16} />
+                            </ActionIcon>
+                          </Tooltip>
+                        )}
+
+                        {/* Intender can modify booking only when status is Pending (UC-VH-003) */}
+                        {role !== "VhIncharge" &&
+                          role !== "VhCaretaker" &&
+                          booking.status === "Pending" && (
+                            <Tooltip label="Modify Booking">
+                              <ActionIcon
+                                size="sm"
+                                variant="light"
+                                color="blue"
+                                onClick={() => handleModifyBooking(booking)}
+                                loading={loadingDetails}
+                              >
+                                <IconEdit size={16} />
+                              </ActionIcon>
+                            </Tooltip>
+                          )}
+
+                        {/* Intender can request cancellation for active request states */}
+                        {role !== "VhIncharge" &&
+                          role !== "VhCaretaker" &&
+                          ["Pending", "Forward", "Confirmed"].includes(booking.status) && (
+                            <Tooltip label="Request Cancellation">
+                              <ActionIcon
+                                size="sm"
+                                variant="light"
+                                color="orange"
+                                onClick={() => handleCancelRequest(booking.id)}
+                              >
+                                <IconX size={16} />
+                              </ActionIcon>
+                            </Tooltip>
+                          )}
+                      </Group>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </Table>
+
+            {/* Pagination */}
+            <Group justify="center" mt="md">
+              <Pagination
+                value={page}
+                onChange={setPage}
+                total={totalPages}
+                boundaries={1}
+                siblings={1}
+              />
+            </Group>
+          </>
+        )}
+      </Box>
+
+      {/* Modals */}
+      <ViewBookingModal
+        opened={!!viewingBooking}
+        onClose={() => setViewingBooking(null)}
+        bookingData={viewingBooking}
+      />
+
+      {/* Update Booking Modal */}
+      <UpdateBookingForm
+        opened={updateFormOpened}
+        onClose={() => {
+          setUpdateFormOpened(false);
+          setEditingBooking(null);
+        }}
+        bookingId={editingBooking?.id}
+        bookingData={editingBooking}
+        onSuccess={handleUpdateSuccess}
+      />
+
+      {/* UC-VH-006: Offline Booking Modal */}
+      <OfflineBookingForm
+        opened={offlineBookingFormOpened}
+        onClose={() => setOfflineBookingFormOpened(false)}
+        onSuccess={() => {
+          setOfflineBookingFormOpened(false);
+          fetchPendingBookings(); // Refresh the list
+        }}
+      />
+    </Box>
+  );
+}
+
+export default PendingRequestsTable;
diff --git a/src/Modules/Visitors_Hostel/components/tables/ReplenishmentRequestsTable.jsx b/src/Modules/Visitors_Hostel/components/tables/ReplenishmentRequestsTable.jsx
new file mode 100644
index 000000000..601996451
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/components/tables/ReplenishmentRequestsTable.jsx
@@ -0,0 +1,441 @@
+/**
+ * ReplenishmentRequestsTable
+ * UC-VH-011: Replenishment approval workflow for VhIncharge (BR-VH-016)
+ * VHMS TRACEABILITY:
+ * - UC-VH-011: Inventory replenishment operations
+ * - BR-VH-016: Incharge-only approve/reject authority
+ * Shows pending replenishment requests that need VhIncharge approval
+ */
+
+import React, { useState, useEffect } from "react";
+import {
+  Table,
+  Group,
+  Badge,
+  Box,
+  ActionIcon,
+  Tooltip,
+  TextInput,
+  Alert,
+  LoadingOverlay,
+  Pagination,
+  Button,
+  Modal,
+  Stack,
+  NumberInput,
+  Textarea,
+  Text,
+} from "@mantine/core";
+import { IconCheck, IconX, IconSearch, IconRefresh, IconShoppingCart, IconClock } from "@tabler/icons-react";
+import { useSelector } from "react-redux";
+import { inventoryAPI } from "../../services/visitorHostelApi";
+import { useActionConfirmation } from "../common/ActionConfirmationProvider";
+
+const URGENCY_COLORS = {
+  low: "blue",
+  medium: "yellow", 
+  high: "orange",
+  critical: "red",
+};
+
+const STATUS_COLORS = {
+  pending: "yellow",
+  approved: "green",
+  rejected: "red",
+  ordered: "blue",
+  received: "gray",
+};
+
+function ReplenishmentRequestsTable() {
+  const { confirmAction } = useActionConfirmation();
+  const [requests, setRequests] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [page, setPage] = useState(1);
+  const [pageSize] = useState(10);
+  const [totalPages, setTotalPages] = useState(1);
+  
+  // Approval modal state
+  const [showApprovalModal, setShowApprovalModal] = useState(false);
+  const [showRejectionModal, setShowRejectionModal] = useState(false);
+  const [selectedRequest, setSelectedRequest] = useState(null);
+  const [approvalData, setApprovalData] = useState({ quantity: 0, remarks: "" });
+
+  const role = useSelector((state) => state.user?.role);
+  const isIncharge = role === "VhIncharge";
+
+  useEffect(() => {
+    fetchRequests();
+  }, [page]);
+
+  const fetchRequests = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await inventoryAPI.getReplenishmentRequests();
+      if (response.success) {
+        setRequests(response.requests || []);
+      } else {
+        setError(response.message || "Failed to fetch replenishment requests");
+      }
+    } catch (err) {
+      setError(err.message || "An error occurred while fetching requests");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleApprove = (request) => {
+    setSelectedRequest(request);
+    setApprovalData({ 
+      quantity: request.requested_quantity, 
+      remarks: `Approved replenishment for ${request.item_name}` 
+    });
+    setShowApprovalModal(true);
+  };
+
+  const handleReject = (request) => {
+    setSelectedRequest(request);
+    setApprovalData({ quantity: 0, remarks: "" });
+    setShowRejectionModal(true);
+  };
+
+  const submitApproval = async () => {
+    if (!selectedRequest) return;
+
+    if (!(await confirmAction("Are you sure you want to approve this replenishment request?", {
+      title: "Confirm Approval",
+      confirmLabel: "Approve",
+      confirmColor: "green",
+    }))) {
+      return;
+    }
+    
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await inventoryAPI.approveReplenishmentRequest(
+        selectedRequest.id,
+        approvalData.quantity,
+        approvalData.remarks
+      );
+
+      if (!response?.success) {
+        throw new Error(response?.detail || response?.message || "Failed to approve request");
+      }
+
+      setShowApprovalModal(false);
+      setSelectedRequest(null);
+      fetchRequests();
+    } catch (err) {
+      const backendMessage =
+        err?.detail ||
+        err?.payload?.detail ||
+        err?.message ||
+        "Failed to approve request";
+      setError("Failed to approve request: " + backendMessage);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const submitRejection = async () => {
+    if (!selectedRequest) return;
+
+    if (!(await confirmAction("Are you sure you want to reject this replenishment request?", {
+      title: "Confirm Rejection",
+      confirmLabel: "Reject",
+      confirmColor: "red",
+    }))) {
+      return;
+    }
+    
+    setLoading(true);
+    setError(null);
+    try {
+      const response = await inventoryAPI.rejectReplenishmentRequest(
+        selectedRequest.id,
+        approvalData.remarks
+      );
+
+      if (!response?.success) {
+        throw new Error(response?.detail || response?.message || "Failed to reject request");
+      }
+
+      setShowRejectionModal(false);
+      setSelectedRequest(null);
+      fetchRequests();
+    } catch (err) {
+      const backendMessage =
+        err?.detail ||
+        err?.payload?.detail ||
+        err?.message ||
+        "Failed to reject request";
+      setError("Failed to reject request: " + backendMessage);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filteredRequests = requests.filter((request) => {
+    const query = searchQuery.toLowerCase();
+    return (
+      request.item_name?.toLowerCase().includes(query) ||
+      request.requested_by?.toLowerCase().includes(query) ||
+      request.urgency?.toLowerCase().includes(query)
+    );
+  });
+
+  if (!isIncharge) {
+    return (
+      <Box p="md">
+        <Alert color="orange">
+          Access denied. Only VhIncharge can view and approve replenishment requests.
+        </Alert>
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      {/* Header */}
+      <Group mb="md" justify="space-between">
+        <TextInput
+          placeholder="Search by item name, requester, or urgency..."
+          leftSection={<IconSearch size={16} />}
+          value={searchQuery}
+          onChange={(e) => setSearchQuery(e.currentTarget.value)}
+          style={{ flex: 1, maxWidth: "400px" }}
+        />
+        <ActionIcon onClick={fetchRequests} loading={loading} variant="default">
+          <IconRefresh size={16} />
+        </ActionIcon>
+      </Group>
+
+      {error && (
+        <Alert color="red" mb="md">
+          {error}
+        </Alert>
+      )}
+
+      {/* BR-VH-016 Authority Notice */}
+      <Alert color="blue" mb="md" icon={<IconShoppingCart size={16} />}>
+        <Text size="sm">
+          <strong>BR-VH-016:</strong> As VhIncharge, you have exclusive authority to approve or reject inventory replenishment requests.
+        </Text>
+      </Alert>
+
+      <Box style={{ position: "relative" }}>
+        <LoadingOverlay visible={loading} />
+        
+        {filteredRequests.length === 0 ? (
+          <Alert color="blue">
+            {loading ? "Loading requests..." : "No replenishment requests found"}
+          </Alert>
+        ) : (
+          <>
+            <Table striped highlightOnHover>
+              <thead>
+                <tr>
+                  <th>Item Name</th>
+                  <th>Current Stock</th>
+                  <th>Requested Qty</th>
+                  <th>Urgency</th>
+                  <th>Status</th>
+                  <th>Requested By</th>
+                  <th>Days Pending</th>
+                  <th>Justification</th>
+                  <th>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                {filteredRequests.map((request) => (
+                  <tr key={request.id}>
+                    <td>
+                      <Text fw={500}>{request.item_name}</Text>
+                    </td>
+                    <td>
+                      <Badge 
+                        color={request.current_quantity < 5 ? "red" : "blue"} 
+                        size="sm"
+                      >
+                        {request.current_quantity} {request.unit}
+                      </Badge>
+                    </td>
+                    <td>
+                      <Text fw={500}>{request.requested_quantity} {request.unit}</Text>
+                    </td>
+                    <td>
+                      <Badge 
+                        color={URGENCY_COLORS[request.urgency] || "gray"} 
+                        size="sm"
+                        variant={request.urgency === 'critical' ? 'filled' : 'light'}
+                      >
+                        {request.urgency?.toUpperCase()}
+                      </Badge>
+                    </td>
+                    <td>
+                      <Badge color={STATUS_COLORS[request.status] || "gray"} size="sm">
+                        {request.status?.toUpperCase()}
+                      </Badge>
+                    </td>
+                    <td>{request.requested_by}</td>
+                    <td>
+                      <Group spacing={4}>
+                        <IconClock size={14} />
+                        <Text size="sm">{request.days_pending} days</Text>
+                      </Group>
+                    </td>
+                    <td style={{ maxWidth: "200px" }}>
+                      <Text size="xs" lineClamp={2}>
+                        {request.justification}
+                      </Text>
+                    </td>
+                    <td>
+                      {request.status === 'pending' && (
+                        <Group spacing="xs">
+                          <Tooltip label="Approve Request">
+                            <ActionIcon
+                              size="sm"
+                              variant="light"
+                              color="green"
+                              onClick={() => handleApprove(request)}
+                            >
+                              <IconCheck size={16} />
+                            </ActionIcon>
+                          </Tooltip>
+                          <Tooltip label="Reject Request">
+                            <ActionIcon
+                              size="sm"
+                              variant="light"
+                              color="red"
+                              onClick={() => handleReject(request)}
+                            >
+                              <IconX size={16} />
+                            </ActionIcon>
+                          </Tooltip>
+                        </Group>
+                      )}
+                      {request.status !== 'pending' && (
+                        <Text size="xs" color="dimmed">
+                          {request.status === 'approved' && `Approved: ${request.approved_quantity} ${request.unit}`}
+                          {request.status === 'rejected' && 'Rejected'}
+                        </Text>
+                      )}
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </Table>
+
+            <Group justify="center" mt="md">
+              <Pagination
+                value={page}
+                onChange={setPage}
+                total={totalPages}
+                boundaries={1}
+                siblings={1}
+              />
+            </Group>
+          </>
+        )}
+      </Box>
+
+      {/* Approval Modal */}
+      <Modal
+        opened={showApprovalModal}
+        onClose={() => setShowApprovalModal(false)}
+        title={`Approve Replenishment - ${selectedRequest?.item_name}`}
+        size="md"
+      >
+        {selectedRequest && (
+          <Stack spacing="md">
+            <Alert color="green">
+              <Text size="sm">
+                <strong>Current Stock:</strong> {selectedRequest.current_quantity} {selectedRequest.unit}<br/>
+                <strong>Requested:</strong> {selectedRequest.requested_quantity} {selectedRequest.unit}<br/>
+                <strong>Urgency:</strong> {selectedRequest.urgency?.toUpperCase()}
+              </Text>
+            </Alert>
+
+            <NumberInput
+              label="Approved Quantity*"
+              placeholder="Enter approved quantity"
+              value={approvalData.quantity}
+              onChange={(val) => setApprovalData(prev => ({ ...prev, quantity: val }))}
+              min={0}
+              required
+            />
+
+            <Textarea
+              label="Approval Remarks"
+              placeholder="Enter any remarks or conditions"
+              value={approvalData.remarks}
+              onChange={(e) => setApprovalData(prev => ({ ...prev, remarks: e.target.value }))}
+              minRows={3}
+            />
+
+            <Group position="right">
+              <Button variant="default" onClick={() => setShowApprovalModal(false)}>
+                Cancel
+              </Button>
+              <Button 
+                color="green" 
+                onClick={submitApproval}
+                leftSection={<IconCheck size={16} />}
+                disabled={!approvalData.quantity}
+              >
+                Approve Request
+              </Button>
+            </Group>
+          </Stack>
+        )}
+      </Modal>
+
+      {/* Rejection Modal */}
+      <Modal
+        opened={showRejectionModal}
+        onClose={() => setShowRejectionModal(false)}
+        title={`Reject Replenishment - ${selectedRequest?.item_name}`}
+        size="md"
+      >
+        {selectedRequest && (
+          <Stack spacing="md">
+            <Alert color="red">
+              <Text size="sm">
+                You are about to reject the replenishment request for <strong>{selectedRequest.item_name}</strong>.
+                Please provide a clear reason for rejection.
+              </Text>
+            </Alert>
+
+            <Textarea
+              label="Rejection Reason*"
+              placeholder="Explain why this request is being rejected"
+              value={approvalData.remarks}
+              onChange={(e) => setApprovalData(prev => ({ ...prev, remarks: e.target.value }))}
+              minRows={3}
+              required
+            />
+
+            <Group position="right">
+              <Button variant="default" onClick={() => setShowRejectionModal(false)}>
+                Cancel
+              </Button>
+              <Button 
+                color="red" 
+                onClick={submitRejection}
+                leftSection={<IconX size={16} />}
+                disabled={!approvalData.remarks}
+              >
+                Reject Request
+              </Button>
+            </Group>
+          </Stack>
+        )}
+      </Modal>
+    </Box>
+  );
+}
+
+export default ReplenishmentRequestsTable;
\ No newline at end of file
diff --git a/src/Modules/Visitors_Hostel/index.js b/src/Modules/Visitors_Hostel/index.js
new file mode 100644
index 000000000..10815e41c
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/index.js
@@ -0,0 +1,52 @@
+/**
+ * Visitor Hostel Module Entry Point
+ * Exports all public components and utilities
+ */
+
+// Pages
+export { default as PendingBookingsPage } from './pages/PendingBookingsPage';
+export { default as ActiveBookingsPage } from './pages/ActiveBookingsPage';
+export { default as InventoryManagementPage } from './pages/InventoryManagementPage';
+export { default as CancelledBookingsPage } from './pages/CancelledBookingsPage';
+export { default as CompletedBookingsPage } from './pages/CompletedBookingsPage';
+export { default as FinancialReportsPage } from './pages/FinancialReportsPage';
+export { default as GuidelinesPage } from './pages/GuidelinesPage';
+
+// Form Components
+export { default as BookingRequestForm } from './components/forms/BookingRequestForm';
+export { default as ConfirmBookingForm } from './components/forms/ConfirmBookingForm';
+export { default as ForwardBookingForm } from './components/forms/ForwardBookingForm';
+export { default as CheckoutForm } from './components/forms/CheckoutForm';
+export { default as InventoryForm } from './components/forms/InventoryForm';
+export { default as AddInventoryItemsForm } from './components/forms/AddInventoryItemsForm';
+export { default as UpdateBookingForm } from './components/forms/UpdateBookingForm';
+
+// Table Components
+export { default as PendingRequestsTable } from './components/tables/PendingRequestsTable';
+export { default as ActiveBookingsTable } from './components/tables/ActiveBookingsTable';
+export { default as CancelledRequestsTable } from './components/tables/CancelledRequestsTable';
+export { default as CompletedBookingsTable } from './components/tables/CompletedBookingsTable';
+export { default as InventoryTable } from './components/tables/InventoryTable';
+
+// Common Components
+export { default as ViewBookingModal } from './components/common/ViewBookingModal';
+export { default as ViewActiveBookingModal } from './components/common/ViewActiveBookingModal';
+
+// Container Components
+export { default as RoomAvailabilityContainer } from './components/RoomAvailabilityContainer';
+export { default as RoomAvailabilityDetails } from './components/RoomAvailabilityDetails';
+
+// Services
+export {
+  bookingsAPI,
+  roomsAPI,
+  inventoryAPI,
+  mealsAPI,
+  reportsAPI,
+  healthCheck,
+} from './services/visitorHostelApi';
+
+// Utils
+export * from './utils/validators';
+export * from './utils/dateHelpers';
+export { default as constants } from './utils/constants';
diff --git a/src/Modules/Visitors_Hostel/inventory.jsx b/src/Modules/Visitors_Hostel/inventory.jsx
index 35dd9a72b..42da610d0 100644
--- a/src/Modules/Visitors_Hostel/inventory.jsx
+++ b/src/Modules/Visitors_Hostel/inventory.jsx
@@ -13,10 +13,7 @@ import {
   Switch,
   Group,
 } from "@mantine/core";
-import {
-  addItemsRoute,
-  fetchInventorydataRoute,
-} from "../../routes/visitorsHostelRoutes";
+import { inventoryAPI } from "./services/visitorHostelApi";
 
 const TabsModules = [
   { label: "Consumable Inventory", id: "consumable-inventory" },
@@ -47,59 +44,41 @@ function InventoryManagement() {
   const handleSubmit = async (e) => {
     e.preventDefault();
 
-    const token = localStorage.getItem("authToken");
-
-    const data = {
-      item_name: itemName,
-      bill_number: billId,
-      quantity: parseInt(quantity, 10),
-      cost: parseInt(cost, 10),
-      consumable,
-    };
-
     try {
-      const response = await fetch(addItemsRoute, {
-        method: "POST",
-        headers: {
-          Authorization: `Token ${token}`,
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify(data),
-      });
+      // Use inventoryAPI service to add item
+      const response = await inventoryAPI.addInventory(
+        itemName,
+        billId,
+        parseInt(quantity, 10),
+        parseInt(cost, 10),
+        consumable,
+      );
 
-      if (response.ok) {
-        const responseData = await response.json();
-        console.log("Item added successfully:", responseData);
-        setModalOpened(false);
-      } else {
-        const errorData = await response.json();
-        console.error("Failed to add item:", errorData);
-      }
+      console.log("Item added successfully:", response);
+      
+      // Reset form
+      setBillId("");
+      setItemName("");
+      setQuantity("");
+      setCost("");
+      setConsumable(false);
+      setModalOpened(false);
+      
+      // Refresh inventory data
+      // TODO: Implement real-time refresh or polling
     } catch (err) {
-      console.error("An error occurred:", error);
     }
   };
 
   useEffect(() => {
     const fetchInventoryData = async () => {
       try {
-        const token = localStorage.getItem("authToken");
-        const response = await fetch(fetchInventorydataRoute, {
-          headers: {
-            Authorization: `Token ${token}`,
-            "Content-Type": "application/json",
-          },
-        });
-
-        if (!response.ok) {
-          throw new Error("Failed to fetch inventory data");
-        }
-
-        const data = await response.json();
-        setInventoryData(data);
+        // TODO: Implement GET /api/inventory/ endpoint on backend to retrieve inventory data
+        // For now, setting to empty as the endpoint doesn't exist yet
+        setInventoryData([]);
         setLoading(false);
-      } catch (errr) {
-        setError(errr.message);
+      } catch (err) {
+        setError(err?.message || "Failed to fetch inventory data");
         setLoading(false);
       }
     };
diff --git a/src/Modules/Visitors_Hostel/pages/ActiveBookingsPage.jsx b/src/Modules/Visitors_Hostel/pages/ActiveBookingsPage.jsx
new file mode 100644
index 000000000..acd4a13bb
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/pages/ActiveBookingsPage.jsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { MantineProvider, Box } from "@mantine/core";
+import ActiveBookingsTable from "../components/tables/ActiveBookingsTable";
+
+/**
+ * ActiveBookingsPage
+ * Route-level component for active/confirmed bookings management
+ */
+
+function ActiveBookingsPage() {
+  return (
+    <MantineProvider
+      withGlobalStyles
+      withNormalizeCSS
+      theme={{
+        globalStyles: () => ({
+          ".mantine-Table-root": {
+            overflowX: "auto",
+          },
+          "@media (max-width: 768px)": {
+            ".mantine-Table-root": {
+              fontSize: "14px",
+            },
+          },
+        }),
+      }}
+    >
+      <Box
+        style={{
+          maxWidth: "1200px",
+          margin: "0 auto",
+          backgroundColor: "white",
+          borderRadius: "12px",
+          padding: "16px",
+          boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
+        }}
+      >
+        <ActiveBookingsTable />
+      </Box>
+    </MantineProvider>
+  );
+}
+
+export default ActiveBookingsPage;
diff --git a/src/Modules/Visitors_Hostel/pages/CancelledBookingsPage.jsx b/src/Modules/Visitors_Hostel/pages/CancelledBookingsPage.jsx
new file mode 100644
index 000000000..abc7c65f5
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/pages/CancelledBookingsPage.jsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { MantineProvider, Box } from "@mantine/core";
+import CancelledRequestsTable from "../components/tables/CancelledRequestsTable";
+
+/**
+ * CancelledBookingsPage
+ * Route-level component for cancelled bookings history
+ */
+
+function CancelledBookingsPage() {
+  return (
+    <MantineProvider
+      withGlobalStyles
+      withNormalizeCSS
+      theme={{
+        globalStyles: () => ({
+          ".mantine-Table-root": {
+            overflowX: "auto",
+          },
+          "@media (max-width: 768px)": {
+            ".mantine-Table-root": {
+              fontSize: "14px",
+            },
+          },
+        }),
+      }}
+    >
+      <Box
+        style={{
+          maxWidth: "1200px",
+          margin: "0 auto",
+          backgroundColor: "white",
+          borderRadius: "12px",
+          padding: "16px",
+          boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
+        }}
+      >
+        <CancelledRequestsTable />
+      </Box>
+    </MantineProvider>
+  );
+}
+
+export default CancelledBookingsPage;
diff --git a/src/Modules/Visitors_Hostel/pages/CompletedBookingsPage.jsx b/src/Modules/Visitors_Hostel/pages/CompletedBookingsPage.jsx
new file mode 100644
index 000000000..44a72abc4
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/pages/CompletedBookingsPage.jsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { MantineProvider, Box } from "@mantine/core";
+import CompletedBookingsTable from "../components/tables/CompletedBookingsTable";
+
+/**
+ * CompletedBookingsPage
+ * Route-level component for completed bookings history
+ */
+
+function CompletedBookingsPage() {
+  return (
+    <MantineProvider
+      withGlobalStyles
+      withNormalizeCSS
+      theme={{
+        globalStyles: () => ({
+          ".mantine-Table-root": {
+            overflowX: "auto",
+          },
+          "@media (max-width: 768px)": {
+            ".mantine-Table-root": {
+              fontSize: "14px",
+            },
+          },
+        }),
+      }}
+    >
+      <Box
+        style={{
+          maxWidth: "1200px",
+          margin: "0 auto",
+          backgroundColor: "white",
+          borderRadius: "12px",
+          padding: "16px",
+          boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
+        }}
+      >
+        <CompletedBookingsTable />
+      </Box>
+    </MantineProvider>
+  );
+}
+
+export default CompletedBookingsPage;
diff --git a/src/Modules/Visitors_Hostel/pages/FinancialReportsPage.jsx b/src/Modules/Visitors_Hostel/pages/FinancialReportsPage.jsx
new file mode 100644
index 000000000..cb6071b05
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/pages/FinancialReportsPage.jsx
@@ -0,0 +1,727 @@
+import React, { useMemo, useRef, useState } from "react";
+import {
+  Box,
+  Table,
+  MantineProvider,
+  Text,
+  Button,
+  Group,
+  Alert,
+  NumberInput,
+  Select,
+  Divider,
+  SimpleGrid,
+} from "@mantine/core";
+import jsPDF from "jspdf";
+import autoTable from "jspdf-autotable";
+import {
+  ResponsiveContainer,
+  PieChart,
+  Pie,
+  Cell,
+  Tooltip,
+  Legend,
+  BarChart,
+  Bar,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  LineChart,
+  Line,
+} from "recharts";
+import { reportsAPI } from "../services/visitorHostelApi";
+
+const REPORT_TYPES = [
+  { value: "bookings", label: "Booking Report" },
+  { value: "inventory", label: "Inventory Report" },
+];
+
+const CHART_COLORS = ["#1C7ED6", "#2F9E44", "#F08C00", "#E03131", "#5F3DC4", "#0B7285"];
+
+const chartBoxStyle = {
+  border: "1px solid #E0E0E0",
+  borderRadius: "8px",
+  padding: "12px",
+  backgroundColor: "#FFFFFF",
+};
+
+function FinancialManagement() {
+  const [reportType, setReportType] = useState("bookings");
+  const [days, setDays] = useState(7);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+  const [bookingReport, setBookingReport] = useState({
+    total_bookings: 0,
+    offline_audit_count: 0,
+    records: [],
+  });
+  const [inventoryReport, setInventoryReport] = useState({
+    total_requests: 0,
+    critical_items_count: 0,
+    pending_replenishment_count: 0,
+    request_records: [],
+    inventory_snapshot: [],
+  });
+  const bookingStatusChartRef = useRef(null);
+  const bookingSourceChartRef = useRef(null);
+  const bookingTrendChartRef = useRef(null);
+  const inventoryStatusChartRef = useRef(null);
+  const inventoryUrgencyChartRef = useRef(null);
+  const inventoryHealthChartRef = useRef(null);
+  const inventoryStockChartRef = useRef(null);
+
+  const fetchReport = async () => {
+    setLoading(true);
+    setError(null);
+
+    try {
+      if (reportType === "bookings") {
+        const data = await reportsAPI.getBookingsReport(days);
+        if (data?.error || data?.detail) {
+          throw data;
+        }
+        setBookingReport({
+          total_bookings: data?.total_bookings || 0,
+          offline_audit_count: data?.offline_audit_count || 0,
+          records: data?.records || [],
+        });
+      } else {
+        const data = await reportsAPI.getInventoryReport(days);
+        if (data?.error || data?.detail) {
+          throw data;
+        }
+        setInventoryReport({
+          total_requests: data?.total_requests || 0,
+          critical_items_count: data?.critical_items_count || 0,
+          pending_replenishment_count: data?.pending_replenishment_count || 0,
+          request_records: data?.request_records || [],
+          inventory_snapshot: data?.inventory_snapshot || [],
+        });
+      }
+    } catch (err) {
+      setError(err?.detail || err?.error || "Failed to fetch report data.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const bookingExportRows = useMemo(
+    () =>
+      (bookingReport.records || []).map((r) => ({
+        booking_id: r.booking_id,
+        booking_date: r.booking_date,
+        booking_from: r.booking_from,
+        booking_to: r.booking_to,
+        status: r.status,
+        source: r.source,
+        audit_flag: r.audit_flag,
+        intender: r.intender,
+      })),
+    [bookingReport.records]
+  );
+
+  const inventoryExportRows = useMemo(
+    () =>
+      (inventoryReport.request_records || []).map((r) => ({
+        request_id: r.request_id,
+        item_name: r.item_name,
+        requested_quantity: r.requested_quantity,
+        approved_quantity: r.approved_quantity,
+        status: r.status,
+        urgency: r.urgency,
+        requested_by: r.requested_by,
+        approved_by: r.approved_by,
+        created_at: r.created_at,
+      })),
+    [inventoryReport.request_records]
+  );
+
+  const inventorySnapshotExportRows = useMemo(
+    () =>
+      (inventoryReport.inventory_snapshot || []).map((r) => ({
+        item_id: r.item_id,
+        item_name: r.item_name,
+        quantity: r.quantity,
+        threshold_quantity: r.threshold_quantity,
+        is_critical: r.is_critical ? "YES" : "NO",
+        pending_replenishment: r.pending_replenishment ? "YES" : "NO",
+        category: r.category || "-",
+      })),
+    [inventoryReport.inventory_snapshot]
+  );
+
+  const bookingStatusData = useMemo(() => {
+    const statusCount = {};
+    (bookingReport.records || []).forEach((item) => {
+      const key = item.status || "Unknown";
+      statusCount[key] = (statusCount[key] || 0) + 1;
+    });
+    return Object.entries(statusCount).map(([name, value]) => ({ name, value }));
+  }, [bookingReport.records]);
+
+  const bookingSourceData = useMemo(() => {
+    const sourceCount = {};
+    (bookingReport.records || []).forEach((item) => {
+      const key = item.source || "unknown";
+      sourceCount[key] = (sourceCount[key] || 0) + 1;
+    });
+    return Object.entries(sourceCount).map(([name, value]) => ({ name, value }));
+  }, [bookingReport.records]);
+
+  const bookingTrendData = useMemo(() => {
+    const byDate = {};
+    (bookingReport.records || []).forEach((item) => {
+      const key = item.booking_date || "N/A";
+      byDate[key] = (byDate[key] || 0) + 1;
+    });
+    return Object.entries(byDate)
+      .map(([date, count]) => ({ date, count }))
+      .sort((a, b) => a.date.localeCompare(b.date));
+  }, [bookingReport.records]);
+
+  const inventoryRequestStatusData = useMemo(() => {
+    const statusCount = {};
+    (inventoryReport.request_records || []).forEach((item) => {
+      const key = item.status || "Unknown";
+      statusCount[key] = (statusCount[key] || 0) + 1;
+    });
+    return Object.entries(statusCount).map(([name, value]) => ({ name, value }));
+  }, [inventoryReport.request_records]);
+
+  const inventoryUrgencyData = useMemo(() => {
+    const urgencyCount = {};
+    (inventoryReport.request_records || []).forEach((item) => {
+      const key = item.urgency || "Unknown";
+      urgencyCount[key] = (urgencyCount[key] || 0) + 1;
+    });
+    return Object.entries(urgencyCount).map(([name, value]) => ({ name, value }));
+  }, [inventoryReport.request_records]);
+
+  const inventoryHealthData = useMemo(() => {
+    const totalItems = (inventoryReport.inventory_snapshot || []).length;
+    const criticalItems = Number(inventoryReport.critical_items_count || 0);
+    const nonCriticalItems = Math.max(totalItems - criticalItems, 0);
+    return [
+      { name: "Critical", value: criticalItems },
+      { name: "Non-Critical", value: nonCriticalItems },
+    ];
+  }, [inventoryReport.inventory_snapshot, inventoryReport.critical_items_count]);
+
+  const lowStockItemsData = useMemo(() => {
+    return (inventoryReport.inventory_snapshot || [])
+      .filter((item) => Number(item.threshold_quantity || 0) > 0)
+      .sort((a, b) => Number(a.quantity || 0) - Number(b.quantity || 0))
+      .slice(0, 8)
+      .map((item) => ({
+        name: item.item_name,
+        quantity: Number(item.quantity || 0),
+        threshold: Number(item.threshold_quantity || 0),
+      }));
+  }, [inventoryReport.inventory_snapshot]);
+
+  const getChartPngFromRef = async (chartRef) => {
+    const container = chartRef?.current;
+    if (!container) return null;
+
+    const svgElement = container.querySelector("svg");
+    if (!svgElement) return null;
+
+    const bounds = container.getBoundingClientRect();
+    const width = Math.max(1, Math.floor(bounds.width));
+    const height = Math.max(1, Math.floor(bounds.height));
+
+    const clonedSvg = svgElement.cloneNode(true);
+    clonedSvg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
+    const serializedSvg = new XMLSerializer().serializeToString(clonedSvg);
+    const blob = new Blob([serializedSvg], { type: "image/svg+xml;charset=utf-8" });
+    const url = URL.createObjectURL(blob);
+
+    try {
+      const image = await new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve(img);
+        img.onerror = reject;
+        img.src = url;
+      });
+
+      const scale = 2;
+      const canvas = document.createElement("canvas");
+      canvas.width = width * scale;
+      canvas.height = height * scale;
+      const context = canvas.getContext("2d");
+      if (!context) return null;
+      context.fillStyle = "#FFFFFF";
+      context.fillRect(0, 0, canvas.width, canvas.height);
+      context.drawImage(image, 0, 0, canvas.width, canvas.height);
+      return canvas.toDataURL("image/png", 1.0);
+    } finally {
+      URL.revokeObjectURL(url);
+    }
+  };
+
+  const exportVisualReport = async () => {
+    const doc = new jsPDF({ unit: "pt", format: "a4" });
+    const pageWidth = doc.internal.pageSize.getWidth();
+    const pageHeight = doc.internal.pageSize.getHeight();
+    const margin = 32;
+    const contentWidth = pageWidth - 2 * margin;
+    const chartHeight = 185;
+    let y = 36;
+
+    const addSectionTitle = (title) => {
+      if (y > pageHeight - 80) {
+        doc.addPage();
+        y = 36;
+      }
+      doc.setFontSize(14);
+      doc.setTextColor(20, 20, 20);
+      doc.text(title, margin, y);
+      y += 18;
+    };
+
+    const addChartImage = async (title, ref) => {
+      const dataUrl = await getChartPngFromRef(ref);
+      if (!dataUrl) return;
+
+      if (y + chartHeight + 28 > pageHeight - 30) {
+        doc.addPage();
+        y = 36;
+      }
+
+      doc.setFontSize(11);
+      doc.text(title, margin, y);
+      y += 8;
+      doc.addImage(dataUrl, "PNG", margin, y, contentWidth, chartHeight);
+      y += chartHeight + 16;
+    };
+
+    doc.setFontSize(16);
+    doc.setTextColor(14, 61, 99);
+    doc.text(
+      `${reportType === "bookings" ? "Booking" : "Inventory"} Report with Visuals`,
+      margin,
+      y
+    );
+    y += 20;
+    doc.setFontSize(11);
+    doc.setTextColor(60, 60, 60);
+    doc.text(`Generated for last ${days} day(s)`, margin, y);
+    y += 20;
+
+    if (reportType === "bookings") {
+      addSectionTitle("Key Metrics");
+      doc.setFontSize(11);
+      doc.text(`Total Bookings: ${bookingReport.total_bookings}`, margin, y);
+      y += 14;
+      doc.text(`Offline Audit Flag Count: ${bookingReport.offline_audit_count}`, margin, y);
+      y += 18;
+
+      addSectionTitle("Charts");
+      await addChartImage("Bookings by Status", bookingStatusChartRef);
+      await addChartImage("Bookings by Source", bookingSourceChartRef);
+      await addChartImage("Booking Trend (By Date)", bookingTrendChartRef);
+
+      addSectionTitle("Booking Records");
+      autoTable(doc, {
+        startY: y,
+        head: [["Booking ID", "Date", "From", "To", "Status", "Source", "Audit", "Intender"]],
+        body: bookingExportRows.map((r) => [
+          r.booking_id,
+          r.booking_date,
+          r.booking_from,
+          r.booking_to,
+          r.status,
+          r.source,
+          r.audit_flag ? "TRUE" : "FALSE",
+          r.intender,
+        ]),
+        styles: { fontSize: 8 },
+        headStyles: { fillColor: [28, 126, 214] },
+      });
+
+      doc.save(`Booking_Report_with_Charts_Last_${days}_Days.pdf`);
+      return;
+    }
+
+    addSectionTitle("Key Metrics");
+    doc.setFontSize(11);
+    doc.text(`Replenishment Requests: ${inventoryReport.total_requests}`, margin, y);
+    y += 14;
+    doc.text(`Critical Items: ${inventoryReport.critical_items_count}`, margin, y);
+    y += 14;
+    doc.text(`Pending Replenishment: ${inventoryReport.pending_replenishment_count}`, margin, y);
+    y += 18;
+
+    addSectionTitle("Charts");
+    await addChartImage("Replenishment Requests by Status", inventoryStatusChartRef);
+    await addChartImage("Request Urgency Distribution", inventoryUrgencyChartRef);
+    await addChartImage("Inventory Health", inventoryHealthChartRef);
+    await addChartImage("Lowest Stock Items (Top 8)", inventoryStockChartRef);
+
+    addSectionTitle("Replenishment Request Records");
+    autoTable(doc, {
+      startY: y,
+      head: [["Request ID", "Item", "Req Qty", "Appr Qty", "Status", "Urgency", "Requested By", "Created At"]],
+      body: inventoryExportRows.map((r) => [
+        r.request_id,
+        r.item_name,
+        r.requested_quantity,
+        r.approved_quantity ?? "-",
+        r.status,
+        r.urgency,
+        r.requested_by,
+        r.created_at,
+      ]),
+      styles: { fontSize: 8 },
+      headStyles: { fillColor: [240, 140, 0] },
+    });
+
+    const nextY = (doc.lastAutoTable?.finalY || y) + 16;
+    autoTable(doc, {
+      startY: nextY,
+      head: [["Item ID", "Item", "Qty", "Threshold", "Critical", "Pending Repl.", "Category"]],
+      body: inventorySnapshotExportRows.map((r) => [
+        r.item_id,
+        r.item_name,
+        r.quantity,
+        r.threshold_quantity,
+        r.is_critical,
+        r.pending_replenishment,
+        r.category,
+      ]),
+      styles: { fontSize: 8 },
+      headStyles: { fillColor: [12, 114, 133] },
+    });
+
+    doc.save(`Inventory_Report_with_Charts_Last_${days}_Days.pdf`);
+  };
+
+  const renderBookingsTable = (rows) => (
+    <Table
+      style={{
+        borderRadius: "8px",
+        overflow: "hidden",
+        border: "1px solid #E0E0E0",
+        marginTop: "20px",
+      }}
+    >
+      <thead>
+        <tr>
+          <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>Booking ID</th>
+          <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>Date</th>
+          <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>From</th>
+          <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>To</th>
+          <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>Status</th>
+          <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>Source</th>
+          <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>Audit Flag</th>
+          <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>Intender</th>
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((item) => (
+          <tr key={item.booking_id}>
+            <td style={{ padding: "12px", borderBottom: "1px solid #E0E0E0", textAlign: "center" }}>{item.booking_id}</td>
+            <td style={{ padding: "12px", borderBottom: "1px solid #E0E0E0", textAlign: "center" }}>{item.booking_date}</td>
+            <td style={{ padding: "12px", borderBottom: "1px solid #E0E0E0", textAlign: "center" }}>{item.booking_from}</td>
+            <td style={{ padding: "12px", borderBottom: "1px solid #E0E0E0", textAlign: "center" }}>{item.booking_to}</td>
+            <td style={{ padding: "12px", borderBottom: "1px solid #E0E0E0", textAlign: "center" }}>{item.status}</td>
+            <td style={{ padding: "12px", borderBottom: "1px solid #E0E0E0", textAlign: "center" }}>{item.source}</td>
+            <td style={{ padding: "12px", borderBottom: "1px solid #E0E0E0", textAlign: "center" }}>{item.audit_flag ? "TRUE" : "FALSE"}</td>
+            <td style={{ padding: "12px", borderBottom: "1px solid #E0E0E0", textAlign: "center" }}>{item.intender}</td>
+          </tr>
+        ))}
+      </tbody>
+    </Table>
+  );
+
+  const renderInventoryRequestsTable = (rows) => (
+    <Table
+      style={{
+        borderRadius: "8px",
+        overflow: "hidden",
+        border: "1px solid #E0E0E0",
+        marginTop: "20px",
+      }}
+    >
+      <thead>
+        <tr>
+          <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>Request ID</th>
+          <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>Item</th>
+          <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>Requested Qty</th>
+          <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>Approved Qty</th>
+          <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>Status</th>
+          <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>Urgency</th>
+          <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>Requested By</th>
+          <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>Created At</th>
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((item) => (
+          <tr key={item.request_id}>
+            <td style={{ padding: "12px", borderBottom: "1px solid #E0E0E0", textAlign: "center" }}>{item.request_id}</td>
+            <td style={{ padding: "12px", borderBottom: "1px solid #E0E0E0", textAlign: "center" }}>{item.item_name}</td>
+            <td style={{ padding: "12px", borderBottom: "1px solid #E0E0E0", textAlign: "center" }}>{item.requested_quantity}</td>
+            <td style={{ padding: "12px", borderBottom: "1px solid #E0E0E0", textAlign: "center" }}>{item.approved_quantity ?? "-"}</td>
+            <td style={{ padding: "12px", borderBottom: "1px solid #E0E0E0", textAlign: "center" }}>{item.status}</td>
+            <td style={{ padding: "12px", borderBottom: "1px solid #E0E0E0", textAlign: "center" }}>{item.urgency}</td>
+            <td style={{ padding: "12px", borderBottom: "1px solid #E0E0E0", textAlign: "center" }}>{item.requested_by}</td>
+            <td style={{ padding: "12px", borderBottom: "1px solid #E0E0E0", textAlign: "center" }}>{item.created_at}</td>
+          </tr>
+        ))}
+      </tbody>
+    </Table>
+  );
+
+  const renderInventorySnapshotTable = (rows) => (
+    <Table
+      style={{
+        borderRadius: "8px",
+        overflow: "hidden",
+        border: "1px solid #E0E0E0",
+        marginTop: "20px",
+      }}
+    >
+      <thead>
+        <tr>
+          <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>Item</th>
+          <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>Quantity</th>
+          <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>Threshold</th>
+          <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>Critical</th>
+          <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>Pending Replenishment</th>
+          <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>Item ID</th>
+          <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>Category</th>
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((item) => (
+          <tr key={item.item_id}>
+            <td style={{ padding: "12px", borderBottom: "1px solid #E0E0E0", textAlign: "center" }}>{item.item_name}</td>
+            <td style={{ padding: "12px", borderBottom: "1px solid #E0E0E0", textAlign: "center" }}>{item.quantity}</td>
+            <td style={{ padding: "12px", borderBottom: "1px solid #E0E0E0", textAlign: "center" }}>{item.threshold_quantity}</td>
+            <td style={{ padding: "12px", borderBottom: "1px solid #E0E0E0", textAlign: "center" }}>{item.is_critical ? "YES" : "NO"}</td>
+            <td style={{ padding: "12px", borderBottom: "1px solid #E0E0E0", textAlign: "center" }}>{item.pending_replenishment ? "YES" : "NO"}</td>
+            <td style={{ padding: "12px", borderBottom: "1px solid #E0E0E0", textAlign: "center" }}>{item.item_id}</td>
+            <td style={{ padding: "12px", borderBottom: "1px solid #E0E0E0", textAlign: "center" }}>{item.category || "-"}</td>
+          </tr>
+        ))}
+      </tbody>
+    </Table>
+  );
+
+  return (
+    <MantineProvider withGlobalStyles withNormalizeCSS>
+      <Box
+        style={{
+          maxWidth: "1200px",
+          margin: "0 auto",
+          backgroundColor: "white",
+          borderRadius: "12px",
+          padding: "16px",
+          boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
+        }}
+      >
+        <Group mb="md" justify="space-between">
+          <Group>
+            <Select
+              label="Report Type"
+              data={REPORT_TYPES}
+              value={reportType}
+              onChange={(value) => setReportType(value || "bookings")}
+              w={220}
+            />
+            <NumberInput
+              label="Number of days"
+              min={1}
+              max={365}
+              value={days}
+              onChange={(value) => setDays(Number(value || 1))}
+              w={180}
+            />
+            <Button onClick={fetchReport} loading={loading} mt={24}>Generate Report</Button>
+          </Group>
+          <Button
+            onClick={exportVisualReport}
+            disabled={
+              loading ||
+              (reportType === "bookings" && bookingExportRows.length === 0) ||
+              (reportType === "inventory" && inventoryExportRows.length === 0 && inventorySnapshotExportRows.length === 0)
+            }
+          >
+            Export Report
+          </Button>
+        </Group>
+
+        {error && (
+          <Alert type="error" mb="md">
+            {error}
+          </Alert>
+        )}
+
+        {loading ? (
+          <Text mt="md">Generating report...</Text>
+        ) : reportType === "bookings" ? (
+          <>
+            <Group mt="md" gap="lg">
+              <Text fw={700}>Total Bookings: {bookingReport.total_bookings}</Text>
+              <Text fw={700}>Offline Audit Flag Count: {bookingReport.offline_audit_count}</Text>
+            </Group>
+
+            {bookingReport.records.length > 0 && (
+              <SimpleGrid cols={{ base: 1, md: 2 }} mt="md" spacing="md">
+                <Box style={chartBoxStyle} ref={bookingStatusChartRef}>
+                  <Text fw={600} mb="xs">Bookings by Status</Text>
+                  <Box h={280}>
+                    <ResponsiveContainer width="100%" height="100%">
+                      <PieChart>
+                        <Pie data={bookingStatusData} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={90} label>
+                          {bookingStatusData.map((entry, index) => (
+                            <Cell key={`booking-status-${entry.name}`} fill={CHART_COLORS[index % CHART_COLORS.length]} />
+                          ))}
+                        </Pie>
+                        <Tooltip />
+                        <Legend />
+                      </PieChart>
+                    </ResponsiveContainer>
+                  </Box>
+                </Box>
+
+                <Box style={chartBoxStyle} ref={bookingSourceChartRef}>
+                  <Text fw={600} mb="xs">Bookings by Source</Text>
+                  <Box h={280}>
+                    <ResponsiveContainer width="100%" height="100%">
+                      <BarChart data={bookingSourceData} margin={{ top: 10, right: 10, left: 0, bottom: 5 }}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey="name" />
+                        <YAxis allowDecimals={false} />
+                        <Tooltip />
+                        <Legend />
+                        <Bar dataKey="value" name="Bookings" fill="#1C7ED6" radius={[6, 6, 0, 0]} />
+                      </BarChart>
+                    </ResponsiveContainer>
+                  </Box>
+                </Box>
+
+                <Box style={{ ...chartBoxStyle, gridColumn: "1 / -1" }} ref={bookingTrendChartRef}>
+                  <Text fw={600} mb="xs">Booking Trend (By Date)</Text>
+                  <Box h={300}>
+                    <ResponsiveContainer width="100%" height="100%">
+                      <LineChart data={bookingTrendData} margin={{ top: 10, right: 20, left: 0, bottom: 5 }}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey="date" />
+                        <YAxis allowDecimals={false} />
+                        <Tooltip />
+                        <Legend />
+                        <Line type="monotone" dataKey="count" name="Bookings" stroke="#2F9E44" strokeWidth={3} dot={{ r: 4 }} />
+                      </LineChart>
+                    </ResponsiveContainer>
+                  </Box>
+                </Box>
+              </SimpleGrid>
+            )}
+
+            {bookingReport.records.length === 0 ? (
+              <Alert type="info" mt="md">No booking records found for selected days.</Alert>
+            ) : (
+              renderBookingsTable(bookingReport.records)
+            )}
+          </>
+        ) : (
+          <>
+            <Group mt="md" gap="lg">
+              <Text fw={700}>Replenishment Requests: {inventoryReport.total_requests}</Text>
+              <Text fw={700}>Critical Items: {inventoryReport.critical_items_count}</Text>
+              <Text fw={700}>Pending Replenishment: {inventoryReport.pending_replenishment_count}</Text>
+            </Group>
+
+            {(inventoryReport.request_records.length > 0 || inventoryReport.inventory_snapshot.length > 0) && (
+              <SimpleGrid cols={{ base: 1, md: 2 }} mt="md" spacing="md">
+                <Box style={chartBoxStyle} ref={inventoryStatusChartRef}>
+                  <Text fw={600} mb="xs">Replenishment Requests by Status</Text>
+                  <Box h={280}>
+                    <ResponsiveContainer width="100%" height="100%">
+                      <BarChart data={inventoryRequestStatusData} margin={{ top: 10, right: 10, left: 0, bottom: 5 }}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey="name" />
+                        <YAxis allowDecimals={false} />
+                        <Tooltip />
+                        <Legend />
+                        <Bar dataKey="value" name="Requests" fill="#F08C00" radius={[6, 6, 0, 0]} />
+                      </BarChart>
+                    </ResponsiveContainer>
+                  </Box>
+                </Box>
+
+                <Box style={chartBoxStyle} ref={inventoryUrgencyChartRef}>
+                  <Text fw={600} mb="xs">Request Urgency Distribution</Text>
+                  <Box h={280}>
+                    <ResponsiveContainer width="100%" height="100%">
+                      <PieChart>
+                        <Pie data={inventoryUrgencyData} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={90} label>
+                          {inventoryUrgencyData.map((entry, index) => (
+                            <Cell key={`inventory-urgency-${entry.name}`} fill={CHART_COLORS[index % CHART_COLORS.length]} />
+                          ))}
+                        </Pie>
+                        <Tooltip />
+                        <Legend />
+                      </PieChart>
+                    </ResponsiveContainer>
+                  </Box>
+                </Box>
+
+                <Box style={chartBoxStyle} ref={inventoryHealthChartRef}>
+                  <Text fw={600} mb="xs">Inventory Health</Text>
+                  <Box h={280}>
+                    <ResponsiveContainer width="100%" height="100%">
+                      <PieChart>
+                        <Pie data={inventoryHealthData} dataKey="value" nameKey="name" cx="50%" cy="50%" outerRadius={90} label>
+                          {inventoryHealthData.map((entry, index) => (
+                            <Cell key={`inventory-health-${entry.name}`} fill={CHART_COLORS[index % CHART_COLORS.length]} />
+                          ))}
+                        </Pie>
+                        <Tooltip />
+                        <Legend />
+                      </PieChart>
+                    </ResponsiveContainer>
+                  </Box>
+                </Box>
+
+                <Box style={chartBoxStyle} ref={inventoryStockChartRef}>
+                  <Text fw={600} mb="xs">Lowest Stock Items (Top 8)</Text>
+                  <Box h={280}>
+                    <ResponsiveContainer width="100%" height="100%">
+                      <BarChart data={lowStockItemsData} margin={{ top: 10, right: 10, left: 0, bottom: 5 }}>
+                        <CartesianGrid strokeDasharray="3 3" />
+                        <XAxis dataKey="name" hide />
+                        <YAxis allowDecimals={false} />
+                        <Tooltip />
+                        <Legend />
+                        <Bar dataKey="quantity" name="Quantity" fill="#1C7ED6" />
+                        <Bar dataKey="threshold" name="Threshold" fill="#E03131" />
+                      </BarChart>
+                    </ResponsiveContainer>
+                  </Box>
+                </Box>
+              </SimpleGrid>
+            )}
+
+            <Divider my="md" label="Recent Replenishment Requests" />
+            {inventoryReport.request_records.length === 0 ? (
+              <Alert type="info" mt="md">No inventory request records found for selected days.</Alert>
+            ) : (
+              renderInventoryRequestsTable(inventoryReport.request_records)
+            )}
+
+            <Divider my="md" label="Current Inventory Snapshot" />
+            {inventoryReport.inventory_snapshot.length === 0 ? (
+              <Alert type="info" mt="md">No inventory items available.</Alert>
+            ) : (
+              renderInventorySnapshotTable(inventoryReport.inventory_snapshot)
+            )}
+          </>
+        )}
+      </Box>
+    </MantineProvider>
+  );
+}
+
+export default FinancialManagement;
diff --git a/src/Modules/Visitors_Hostel/vhGuidelines.jsx b/src/Modules/Visitors_Hostel/pages/GuidelinesPage.jsx
similarity index 98%
rename from src/Modules/Visitors_Hostel/vhGuidelines.jsx
rename to src/Modules/Visitors_Hostel/pages/GuidelinesPage.jsx
index 0761c0f2a..09b763528 100644
--- a/src/Modules/Visitors_Hostel/vhGuidelines.jsx
+++ b/src/Modules/Visitors_Hostel/pages/GuidelinesPage.jsx
@@ -2,7 +2,7 @@ import React from "react";
 import { Box, Text, List, ThemeIcon, Divider } from "@mantine/core";
 import { IconCircleDot } from "@tabler/icons-react";
 
-function VHGuidelinesPage() {
+function GuidelinesPage() {
   return (
     <Box
       style={{
@@ -148,4 +148,4 @@ function VHGuidelinesPage() {
   );
 }
 
-export default VHGuidelinesPage;
+export default GuidelinesPage;
diff --git a/src/Modules/Visitors_Hostel/pages/InventoryManagementPage.jsx b/src/Modules/Visitors_Hostel/pages/InventoryManagementPage.jsx
new file mode 100644
index 000000000..9782b68c6
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/pages/InventoryManagementPage.jsx
@@ -0,0 +1,51 @@
+import React from "react";
+import { MantineProvider, Box } from "@mantine/core";
+import InventoryTable from "../components/tables/InventoryTable";
+import InventoryForm from "../components/forms/InventoryForm";
+
+/**
+ * InventoryManagementPage
+ * Route-level component for inventory management (VhIncharge only)
+ */
+
+function InventoryManagementPage() {
+  const [refreshKey, setRefreshKey] = React.useState(0);
+
+  const handleInventoryAdded = () => {
+    setRefreshKey((prev) => prev + 1);
+  };
+
+  return (
+    <MantineProvider
+      withGlobalStyles
+      withNormalizeCSS
+      theme={{
+        globalStyles: () => ({
+          "@media (max-width: 768px)": {
+            ".mantine-Table-root": {
+              fontSize: "14px",
+            },
+          },
+        }),
+      }}
+    >
+      <Box
+        style={{
+          maxWidth: "1200px",
+          margin: "0 auto",
+          backgroundColor: "white",
+          borderRadius: "12px",
+          padding: "16px",
+          boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
+        }}
+      >
+        <InventoryForm onInventoryAdded={handleInventoryAdded} />
+        <Box mt="xl">
+          <InventoryTable key={refreshKey} />
+        </Box>
+      </Box>
+    </MantineProvider>
+  );
+}
+
+export default InventoryManagementPage;
diff --git a/src/Modules/Visitors_Hostel/pages/PendingBookingsPage.jsx b/src/Modules/Visitors_Hostel/pages/PendingBookingsPage.jsx
new file mode 100644
index 000000000..0b71bf347
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/pages/PendingBookingsPage.jsx
@@ -0,0 +1,46 @@
+import React from "react";
+import { MantineProvider, Box } from "@mantine/core";
+import PendingRequestsTable from "../components/tables/PendingRequestsTable";
+
+/**
+ * PendingBookingsPage
+ * Route-level component for pending bookings management
+ * 
+ * Responsibilities:
+ * - Assemble page-level components
+ * - Handle page state
+ * - Delegate to sub-components
+ */
+
+function PendingBookingsPage({ listMode = "queue" }) {
+  return (
+    <MantineProvider
+      withGlobalStyles
+      withNormalizeCSS
+      theme={{
+        globalStyles: () => ({
+          "@media (max-width: 768px)": {
+            ".mantine-Table-root": {
+              fontSize: "14px",
+            },
+          },
+        }),
+      }}
+    >
+      <Box
+        style={{
+          maxWidth: "1200px",
+          margin: "0 auto",
+          backgroundColor: "white",
+          borderRadius: "12px",
+          padding: "16px",
+          boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)",
+        }}
+      >
+        <PendingRequestsTable listMode={listMode} />
+      </Box>
+    </MantineProvider>
+  );
+}
+
+export default PendingBookingsPage;
diff --git a/src/Modules/Visitors_Hostel/pendingRequests.jsx b/src/Modules/Visitors_Hostel/pendingRequests.jsx
index 58351bc51..1cc731a4f 100644
--- a/src/Modules/Visitors_Hostel/pendingRequests.jsx
+++ b/src/Modules/Visitors_Hostel/pendingRequests.jsx
@@ -1,5 +1,4 @@
 import React, { useState, useEffect } from "react";
-import axios from "axios";
 import {
   MantineProvider,
   Table,
@@ -16,7 +15,7 @@ import CombinedBookingForm from "./bookingForm";
 import ForwardBookingForm from "./forwardBooking";
 import ConfirmBookingIn from "./confirmBooking_Incharge";
 import ViewBooking from "./viewBooking"; // Import the new ViewBooking component
-import { fetchBookingsRoute } from "../../routes/visitorsHostelRoutes";
+import { bookingsAPI } from "./services/visitorHostelApi";
 
 function BookingsRequestTable({ bookings, onBookingForward }) {
   const [modalOpened, setModalOpened] = useState(false); // State to control modal
@@ -74,26 +73,32 @@ function BookingsRequestTable({ bookings, onBookingForward }) {
         mb="md"
         style={{
           display: "flex",
-          justifyContent: "center", // Centers the content horizontally
+          justifyContent: "space-between", // Space between title and button
           alignItems: "center", // Centers the content vertically
           width: "100%", // Ensures the Box takes full width
           gap: "1rem", // Adds space between the text and button
         }}
       >
-        <Box
-          style={{ display: "flex", justifyContent: "center", width: "80%" }}
+        <Text
+          style={{
+            paddingBottom: 15,
+            fontWeight: "bold",
+            fontSize: "24px",
+            color: "#228be6",
+          }}
         >
-          <Text
-            style={{
-              paddingBottom: 15,
-              fontWeight: "bold",
-              fontSize: "24px",
-              color: "#228be6",
-            }}
+          Pending Requests
+        </Text>
+        {role !== "VhIncharge" && role !== "VhCaretaker" && (
+          <Button
+            variant="filled"
+            color="blue"
+            onClick={() => setModalOpened(true)}
+            style={{ marginBottom: 15 }}
           >
-            Pending Requests
-          </Text>
-        </Box>
+            + Create Booking Request
+          </Button>
+        )}
       </Box>
 
       <TextInput
@@ -190,7 +195,6 @@ function BookingsRequestTable({ bookings, onBookingForward }) {
                   }}
                 >
                   {booking.modifiedCategory}
-                  {console.log("BOOKING: ", booking)}
                 </td>
                 {role === "VhIncharge" ? (
                   <td
@@ -332,16 +336,9 @@ function PendingReqs() {
   const [bookings, setBookings] = useState([]);
 
   const fetchBookings = async () => {
-    const token = localStorage.getItem("authToken");
-    if (!token) {
-      return console.error("No authentication token found!");
-    }
-
     try {
-      const { data } = await axios.get(fetchBookingsRoute, {
-        headers: { Authorization: `Token ${token}` },
-      });
-      setBookings(data.pending_bookings);
+      const pendingBookings = await bookingsAPI.getPendingBookings();
+      setBookings(pendingBookings || []);
     } catch (error) {
       console.error("Error fetching booking requests:", error);
     }
diff --git a/src/Modules/Visitors_Hostel/roomsAvailability.jsx b/src/Modules/Visitors_Hostel/roomsAvailability.jsx
deleted file mode 100644
index 4393769d1..000000000
--- a/src/Modules/Visitors_Hostel/roomsAvailability.jsx
+++ /dev/null
@@ -1,138 +0,0 @@
-import React, { useState } from "react";
-import {
-  MantineProvider,
-  Table,
-  Button,
-  Box,
-  Text,
-  TextInput,
-  Grid,
-} from "@mantine/core";
-import RoomsDetails from "./roomsAvailibilityDetails.jsx";
-
-function BookingsRequestTable() {
-  const [showForm, setShowForm] = useState(false); // Manage form visibility
-  const [bookingFrom, setBookingFrom] = useState(""); // State for booking from date
-  const [bookingTo, setBookingTo] = useState(""); // State for booking to date
-
-  const handleButtonClick = () => {
-    setShowForm(true); // Show the BookingForm when button is clicked
-  };
-
-  return (
-    <Box p="md" style={{ margin: 10 }}>
-      <Box
-        mb="md"
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-        }}
-      >
-        <Box
-          style={{ display: "flex", justifyContent: "center", width: "90%" }}
-        >
-          <Text
-            style={{
-              paddingBottom: 10,
-              fontWeight: "bold",
-              fontSize: "24px",
-              color: "#228be6",
-            }}
-          >
-            Rooms Availability
-          </Text>
-        </Box>
-
-        <Button
-          variant="outline"
-          color="green"
-          onClick={handleButtonClick}
-          sx={{ paddingLeft: "10px" }} // Fixed padding syntax
-        >
-          Submit
-        </Button>
-      </Box>
-
-      <Table
-        style={{
-          marginTop: "20px",
-          borderRadius: "8px", // Border radius for table
-          overflow: "hidden", // Overflow hidden to round table corners
-          border: "1px solid #E0E0E0", // Optional border for visibility
-        }}
-      >
-        <thead>
-          <tr>
-            <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-              Booking From
-            </th>
-            <th style={{ backgroundColor: "#E6F3FF", padding: "12px" }}>
-              Booking To
-            </th>
-          </tr>
-          <tr>
-            <td style={{ padding: "12px" }}>
-              <Grid>
-                <Grid.Col span={12}>
-                  <TextInput
-                    placeholder="From"
-                    type="date"
-                    required
-                    value={bookingFrom}
-                    onChange={(event) =>
-                      setBookingFrom(event.currentTarget.value)
-                    }
-                  />
-                </Grid.Col>
-              </Grid>
-            </td>
-            <td style={{ padding: "12px" }}>
-              <Grid>
-                <Grid.Col span={12}>
-                  <TextInput
-                    placeholder="To"
-                    type="date"
-                    required
-                    value={bookingTo}
-                    onChange={(event) =>
-                      setBookingTo(event.currentTarget.value)
-                    }
-                  />
-                </Grid.Col>
-              </Grid>
-            </td>
-          </tr>
-        </thead>
-      </Table>
-      {showForm && (
-        <RoomsDetails
-          bookingFrom={bookingFrom}
-          bookingTo={bookingTo}
-          onClose={() => setShowForm(false)}
-        />
-      )}
-    </Box>
-  );
-}
-
-function RoomsAvailability() {
-  return (
-    <MantineProvider withGlobalStyles withNormalizeCSS>
-      <Box
-        style={{
-          maxWidth: "1200px",
-          margin: "0 auto",
-          backgroundColor: "white",
-          borderRadius: "12px", // Add border radius to outer Box
-          padding: "16px", // Optional padding
-          boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1)", // Optional shadow
-        }}
-      >
-        <BookingsRequestTable />
-      </Box>
-    </MantineProvider>
-  );
-}
-
-export default RoomsAvailability;
diff --git a/src/Modules/Visitors_Hostel/services/visitorHostelApi.js b/src/Modules/Visitors_Hostel/services/visitorHostelApi.js
new file mode 100644
index 000000000..a276c0bfb
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/services/visitorHostelApi.js
@@ -0,0 +1,1132 @@
+/**
+ * Centralized Visitor Hostel API Service
+ * Handles all REST API communication with the backend
+ * 
+ * Maps to: applications/visitor_hostel/api/
+ * Backend Documentation: See applications/visitor_hostel/api/urls.py
+ * 
+ * Usage:
+ *   import { bookingsAPI, roomsAPI, inventoryAPI } from "../services/visitorHostelApi";
+ *   
+ *   // Get pending bookings
+ *   const pending = await bookingsAPI.getPendingBookings();
+ *   
+ *   // Request new booking
+ *   const booking = await bookingsAPI.requestBooking({ intender: 23, ... });
+ */
+
+import axios from "axios";
+
+const API_BASE = "/visitorhostel/api";
+const IST_TIMEZONE = "Asia/Kolkata";
+
+const getISTTimeParts = () => {
+  const parts = new Intl.DateTimeFormat("en-GB", {
+    timeZone: IST_TIMEZONE,
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  }).formatToParts(new Date());
+
+  const hour = Number(parts.find((part) => part.type === "hour")?.value || 0);
+  const minute = Number(parts.find((part) => part.type === "minute")?.value || 0);
+
+  return {
+    hour,
+    minute,
+    formatted: `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`,
+  };
+};
+
+const client = axios.create({
+  baseURL: API_BASE,
+  headers: { "Content-Type": "application/json" },
+});
+
+// ============================================================
+// REQUEST INTERCEPTOR - Add auth token to all requests
+// ============================================================
+client.interceptors.request.use(
+  (config) => {
+    const token = localStorage.getItem("authToken");
+    if (token) {
+      config.headers.Authorization = `Token ${token}`;
+    }
+    return config;
+  },
+  (error) => Promise.reject(error)
+);
+
+// ============================================================
+// RESPONSE INTERCEPTOR - Handle global errors
+// ============================================================
+client.interceptors.response.use(
+  (response) => response,
+  (error) => {
+    if (error.response?.status === 401) {
+      console.error("Unauthorized - Token may have expired");
+      // Trigger logout/redirect as needed
+    }
+    return Promise.reject(error);
+  }
+);
+
+// ============================================================
+// ERROR HANDLER UTILITY
+// ============================================================
+const getErrorMessage = (error, fallbackMessage = "Request failed") => {
+  const payload = error.response?.data;
+
+  let fieldMessage = "";
+  if (payload && typeof payload === "object" && !Array.isArray(payload)) {
+    const fieldKeys = Object.keys(payload).filter(
+      (key) => !["detail", "error", "message"].includes(key)
+    );
+
+    if (fieldKeys.length > 0) {
+      const firstField = fieldKeys[0];
+      const firstFieldValue = payload[firstField];
+      const firstFieldMessage = Array.isArray(firstFieldValue)
+        ? firstFieldValue[0]
+        : firstFieldValue;
+
+      if (firstFieldMessage) {
+        fieldMessage = `${firstField}: ${firstFieldMessage}`;
+      }
+    }
+  }
+
+  return (
+    fieldMessage ||
+    payload?.detail ||
+    payload?.error ||
+    payload?.message ||
+    error.message ||
+    fallbackMessage
+  );
+};
+
+const buildListFetchSuccess = (data) => ({
+  success: true,
+  data: data.results || [],
+  total_pages: data.total_pages || 1,
+});
+
+const buildListFetchFailure = (error, fallbackMessage) => ({
+  success: false,
+  data: [],
+  total_pages: 1,
+  message: getErrorMessage(error, fallbackMessage),
+});
+
+const buildDetailFetchSuccess = (data) => ({
+  success: true,
+  data,
+});
+
+const buildDetailFetchFailure = (error, fallbackMessage) => ({
+  success: false,
+  data: null,
+  message: getErrorMessage(error, fallbackMessage),
+});
+
+const handleError = (error) => {
+  const payload = error.response?.data;
+  const message = getErrorMessage(error, "Request failed");
+
+  console.error("API Error:", payload || error.message);
+
+  const normalizedError = new Error(message);
+  normalizedError.detail = payload?.detail;
+  normalizedError.error = payload?.error;
+  normalizedError.payload = payload;
+  normalizedError.status = error.response?.status;
+  throw normalizedError;
+};
+
+// ===========================================================================
+// VHMS TRACEABILITY INDEX (UC/BR -> FRONTEND API GROUP)
+// ---------------------------------------------------------------------------
+// UC-VH-001,002,003,004,005,006,007,008,009 : bookingsAPI
+//   BR-VH-001,002,003,004,005,006,008,009,010,012,014,017,018 linkage points
+// UC-VH-007                                  : roomsAPI
+//   BR-VH-012 linkage points
+// UC-VH-010                                  : mealsAPI
+//   BR-VH-011 linkage points
+// UC-VH-011                                  : inventoryAPI
+//   BR-VH-007,016 linkage points
+// UC-VH-012                                  : reportsAPI
+//   BR-VH-017 linkage points
+// NOTE:
+// - This index maps functional ownership so UC/BR-based reviews are quick.
+// - Final source of truth remains backend authorization and validation.
+// ===========================================================================
+
+// ============================================================
+// BOOKINGS API
+// ============================================================
+
+export const bookingsAPI = {
+  /**
+   * GET /api/bookings/pending/
+   * Fetch all pending booking requests
+   * @returns {Object} Response with success flag and bookings array
+   */
+  getPendingBookings: async (params = {}) => {
+    try {
+      const { data } = await client.get("/bookings/pending/", { params });
+      return buildListFetchSuccess(data);
+    } catch (error) {
+      return buildListFetchFailure(error, "Failed to fetch pending bookings");
+    }
+  },
+
+  /**
+   * GET /api/bookings/active/
+   * Fetch all active bookings (confirmed, checked-in, etc.)
+   * @returns {Object} Response with success flag and bookings array
+   */
+  getActiveBookings: async (params = {}) => {
+    try {
+      const { data } = await client.get("/bookings/active/", { params });
+      return buildListFetchSuccess(data);
+    } catch (error) {
+      return buildListFetchFailure(error, "Failed to fetch active bookings");
+    }
+  },
+
+  /**
+   * GET /api/bookings/completed/
+   * Fetch all completed bookings (checked out)
+   * @returns {Object} Response with success flag and bookings array
+   */
+  getCompletedBookings: async (params = {}) => {
+    try {
+      const { data } = await client.get("/bookings/completed/", { params });
+      return buildListFetchSuccess(data);
+    } catch (error) {
+      return buildListFetchFailure(error, "Failed to fetch completed bookings");
+    }
+  },
+
+  /**
+   * Build cancellation view by combining finalized cancellations and cancellation requests.
+   */
+  getCancelledBookings: async (params = {}) => {
+    try {
+      const [completedResponse, bookingsResponse] = await Promise.all([
+        client.get("/bookings/completed/", { params }),
+        client.get("/bookings/pending/", {
+          params: {
+            ...params,
+            view: "bookings",
+          },
+        }),
+      ]);
+
+      const normalizeForCancellationTable = (booking) => ({
+        ...booking,
+        visitor_email: booking.visitor_email || booking.guest_email || "N/A",
+        cancellation_reason:
+          booking.cancellation_reason || booking.remarks || booking.remark || "N/A",
+        cancelled_on: booking.cancelled_on || booking.created_at || booking.booking_to || null,
+      });
+
+      const cancelled = (completedResponse.data.results || [])
+        .filter((booking) => booking.status === "Canceled")
+        .map(normalizeForCancellationTable);
+
+      const cancellationRequests = (bookingsResponse.data.results || [])
+        .filter((booking) => booking.status === "CancelRequested")
+        .map(normalizeForCancellationTable);
+
+      const merged = [...cancellationRequests, ...cancelled].sort((a, b) => {
+        const left = new Date(a.cancelled_on || a.created_at || 0).getTime();
+        const right = new Date(b.cancelled_on || b.created_at || 0).getTime();
+        return right - left;
+      });
+
+      return {
+        success: true,
+        data: merged,
+        total_pages: 1,
+      };
+    } catch (error) {
+      return buildListFetchFailure(error, "Failed to fetch cancelled bookings");
+    }
+  },
+
+  /**
+   * GET /api/bookings/{id}/
+   * Fetch detailed information for a specific booking
+   * @param {number} bookingId - Booking ID
+   * @returns {Object} Booking detail response
+   */
+  getBookingDetail: async (bookingId) => {
+    try {
+      const { data } = await client.get(`/bookings/${bookingId}/`);
+      return buildDetailFetchSuccess(data);
+    } catch (error) {
+      return buildDetailFetchFailure(error, "Failed to fetch booking detail");
+    }
+  },
+
+  /**
+   * POST /api/bookings/request/
+   * Submit a new booking request
+   * @param {Object} payload - Request body with booking details
+   * @returns {Object} Success response
+   */
+  requestBooking: async (payload) => {
+    try {
+      const { data } = await client.post("/bookings/request/", payload);
+      return data;
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * POST /api/bookings/request/
+   * Create offline booking (UC-VH-006) - for caretakers recording telephonic/walk-in bookings
+   * @param {Object} offlineBookingData - Complete offline booking information
+   * @returns {Object} Success response
+   */
+  createOfflineBooking: async (offlineBookingData) => {
+    try {
+      const { data } = await client.post("/bookings/request/", {
+        ...offlineBookingData,
+        is_offline: true, // Flag to mark as offline booking
+        booking_source: offlineBookingData.booking_type || 'telephonic', // telephonic or walkin
+      });
+      return { success: true, ...data };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * POST /api/bookings/confirm/
+   * Confirm a pending booking and assign rooms (VhIncharge only)
+   * @param {number} bookingId - Booking ID to confirm
+   * @param {string} category - Room category code (e.g., "RP", "DLX")
+   * @param {Array<string>} rooms - List of room numbers to assign
+   * @returns {Object} Success response
+   */
+  confirmBooking: async (bookingId, category, rooms) => {
+    try {
+      const { data } = await client.post("/bookings/confirm/", {
+        booking_id: bookingId,
+        category,
+        rooms,
+      });
+      return { success: true, ...data };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * POST /api/bookings/cancel-request/
+   * Request cancellation of a confirmed booking (Intender only)
+   * @param {number} bookingId - Booking ID
+   * @param {string} remark - Cancellation reason (optional)
+   * @returns {Object} Success response
+   */
+  cancelBookingRequest: async (bookingId, remark = "") => {
+    try {
+      const { data } = await client.post("/bookings/cancel-request/", {
+        booking_id: bookingId,
+        remark,
+      });
+      return { success: true, ...data };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * POST /api/bookings/cancel-approve/
+    * Caretaker approves cancellation request and finalizes cancellation
+   */
+  approveCancelRequest: async (bookingId, remark = "") => {
+    try {
+      const { data } = await client.post("/bookings/cancel-approve/", {
+        booking_id: bookingId,
+        remark,
+      });
+      return { success: true, ...data };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * POST /api/bookings/reject/
+   * Reject a pending booking request (VhIncharge only)
+   * @param {number} bookingId - Booking ID to reject
+   * @param {string} remark - Rejection reason (optional)
+   * @returns {Object} Success response
+   */
+  rejectBooking: async (bookingId, remark = "") => {
+    try {
+      const { data } = await client.post("/bookings/reject/", {
+        booking_id: bookingId,
+        remark,
+      });
+      return { success: true, ...data };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * POST /api/bookings/forward/
+   * Forward a booking to a different category/rooms (VhIncharge only)
+   * @param {number} bookingId - Booking ID
+   * @param {string} modifiedCategory - New room category
+   * @param {Array<string>} rooms - New room assignments
+   * @param {string} remark - Forward reason (optional)
+   * @returns {Object} Success response
+   */
+  forwardBooking: async (bookingId, modifiedCategory, rooms, remark = "", billSettlement = "") => {
+    try {
+      const { data } = await client.post("/bookings/forward/", {
+        booking_id: bookingId,
+        modified_category: modifiedCategory,
+        rooms,
+        remark,
+        bill_settlement: billSettlement,
+      });
+      return { success: true, ...data };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * POST /api/bookings/checkin/
+  * Check in a visitor (VhCaretaker)
+   * @param {number} bookingId - Booking ID
+   * @param {string} name - Visitor full name
+   * @param {string} phone - Visitor phone number
+   * @param {string} email - Visitor email (optional)
+   * @param {string} address - Visitor address (optional)
+   * @returns {Object} Success response
+   */
+  checkIn: async (bookingId, name, phone, email = "", address = "") => {
+    try {
+      const { data } = await client.post("/bookings/checkin/", {
+        booking_id: bookingId,
+        name,
+        phone,
+        email,
+        address,
+      });
+      return { success: true, ...data };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * POST /api/bookings/checkout/
+  * Check out a visitor and finalize bills (VhCaretaker)
+   * @param {number} bookingId - Booking ID
+   * @param {number} mealBill - Total meal bill amount
+   * @param {number} roomBill - Total room bill amount
+   * @returns {Object} Success response
+   */
+  checkOut: async (bookingId, mealBill, roomBill, billSettlement = "Intender") => {
+    try {
+      const { data } = await client.post("/bookings/checkout/", {
+        booking_id: bookingId,
+        meal_bill: mealBill,
+        room_bill: roomBill,
+        bill_settlement: billSettlement,
+      });
+      return { success: true, ...data };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * POST /api/bookings/allocate-rooms/
+   * Allocate available rooms for a confirmed booking (VhCaretaker)
+   * @param {number} bookingId - Booking ID
+   * @param {Array<string>} rooms - Selected room numbers
+   * @returns {Object} Success response
+   */
+  allocateRooms: async (bookingId, rooms = []) => {
+    try {
+      const { data } = await client.post("/bookings/allocate-rooms/", {
+        booking_id: bookingId,
+        rooms,
+      });
+      return { success: true, ...data };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * POST /api/bookings/settle-bill/
+   * Finalize offline bill settlement using receipt number (caretaker only)
+   */
+  settleBill: async (bookingId, settlementProof) => {
+    try {
+      const payload = {
+        booking_id: bookingId,
+        payment_status: true,
+        settlement_proof: (settlementProof || "").toString().trim(),
+      };
+
+      const { data } = await client.post("/bookings/settle-bill/", payload);
+      return { success: true, ...data };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * POST /api/bookings/update/
+   * Update booking details and get forwarded room options
+   * @param {number} bookingId - Booking ID
+   * @param {number} numberOfPeople - Updated visitor count (optional)
+   * @param {string} purposeOfVisit - Purpose of visit
+   * @param {string} bookingFrom - Start date (YYYY-MM-DD)
+   * @param {string} bookingTo - End date (YYYY-MM-DD)
+   * @param {number} numberOfRooms - Number of rooms needed
+   * @returns {Object} Updated booking and forwarded room options
+   */
+  updateBooking: async (
+    bookingId,
+    numberOfPeople,
+    purposeOfVisit,
+    bookingFrom,
+    bookingTo,
+    numberOfRooms
+  ) => {
+    try {
+      const { data } = await client.post("/bookings/update/", {
+        booking_id: bookingId,
+        number_of_people: numberOfPeople,
+        purpose_of_visit: purposeOfVisit,
+        booking_from: bookingFrom,
+        booking_to: bookingTo,
+        number_of_rooms: numberOfRooms,
+      });
+      return { success: true, ...data };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * POST /api/bookings/detect-no-shows/
+   */
+  detectNoShows: async () => {
+    try {
+      const { data } = await client.post("/bookings/detect-no-shows/");
+      return { success: true, data };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * GET /api/bookings/detect-overstays/
+   * BR-VH-018: Get current overstay information without triggering alerts
+   * @returns {Object} Overstay data with detailed information
+   */
+  detectOverstays: async () => {
+    try {
+      const { data } = await client.get("/bookings/detect-overstays/");
+      return { success: true, ...data };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * POST /api/bookings/detect-overstays/
+   * BR-VH-018: Trigger overstay detection and send alerts
+   * Overstay alerts MUST be generated when checkout time is exceeded
+   * @returns {Object} Alert results and overstay data
+   */
+  triggerOverstayAlerts: async () => {
+    try {
+      const { data } = await client.post("/bookings/detect-overstays/");
+      return { success: true, ...data };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * GET /api/bookings/cancel-requests/
+   * Get all bookings in cancellation workflow (CancelRequested or Canceled status)
+   * Indenter: see own cancel-requested/canceled bookings only
+   * Caretaker/Incharge: see all cancel-requested/canceled bookings
+   * @returns {Object} Response with success flag and cancel-requested bookings array
+   */
+  getCancelRequestedBookings: async (params = {}) => {
+    try {
+      const { data } = await client.get("/bookings/cancel-requests/", { params });
+      return buildListFetchSuccess(data);
+    } catch (error) {
+      return buildListFetchFailure(error, "Failed to fetch cancel-requested bookings");
+    }
+  },
+
+  /**
+   * POST /api/bookings/update-visitor-info/
+   * Update visitor information during active stay (VhCaretaker only)
+   * @param {number} bookingId - Booking ID
+   * @param {Object} visitorInfo - Updated visitor information
+   * @returns {Object} Success response with updated visitor info
+   */
+  updateVisitorInfo: async (bookingId, visitorInfo) => {
+    try {
+      const { data } = await client.post("/bookings/update-visitor-info/", {
+        booking_id: bookingId,
+        ...visitorInfo,
+      });
+      return { success: true, ...data };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+};
+
+// ============================================================
+// ROOMS API
+// ============================================================
+
+export const roomsAPI = {
+  /**
+   * GET /api/rooms/availability/?start_date=YYYY-MM-DD&end_date=YYYY-MM-DD
+   * Get list of available rooms within date range
+   * @param {string} startDate - Start date (YYYY-MM-DD)
+   * @param {string} endDate - End date (YYYY-MM-DD)
+   * @returns {Array<string>} List of available room numbers
+   */
+  getAvailableRooms: async (startDate, endDate, category = "") => {
+    try {
+      const params = { start_date: startDate, end_date: endDate, category: category || "" };
+      const { data } = await client.get("/rooms/availability/", { params });
+      return data.available_rooms || [];
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * POST /api/rooms/status/
+   * Update room status (e.g., maintenance, blocked, available)
+   * @param {string} roomNumber - Room number to update
+   * @param {string} roomStatus - New status
+   * @returns {Object} Success response
+   */
+  editRoomStatus: async (roomNumber, roomStatus) => {
+    try {
+      const { data } = await client.post("/rooms/status/", {
+        room_number: roomNumber,
+        room_status: roomStatus,
+      });
+      return data;
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+};
+
+// ============================================================
+// INVENTORY API
+// ============================================================
+
+export const inventoryAPI = {
+  /**
+   * POST /api/inventory/add/
+   * Add new inventory item (VhIncharge only)
+   * @param {string} itemName - Name of inventory item
+   * @param {string} billNumber - Associated bill/invoice number
+   * @param {number} quantity - Quantity
+   * @param {number} cost - Total cost
+   * @param {boolean} consumable - Is consumable item? (true/false)
+   * @returns {Object} Success response
+   */
+  addInventory: async (inventoryData) => {
+    try {
+      // Support both old and new calling patterns
+      let requestData;
+      
+      if (typeof inventoryData === 'object' && inventoryData.item_name) {
+        // New UC-VH-011 format with enhanced fields
+        requestData = {
+          item_name: inventoryData.item_name,
+          bill_number: inventoryData.bill_number,
+          quantity: inventoryData.quantity,
+          cost: inventoryData.cost,
+          consumable: inventoryData.consumable,
+          // UC-VH-011: Include new threshold management fields
+          threshold_quantity: inventoryData.threshold_quantity || 5,
+          unit: inventoryData.unit || 'pieces',
+          category: inventoryData.category || '',
+          remark: inventoryData.remark || '',
+        };
+      } else {
+        // Legacy format for backward compatibility
+        const [itemName, billNumber, quantity, cost, consumable] = arguments;
+        requestData = {
+          item_name: itemName,
+          bill_number: billNumber,
+          quantity,
+          cost,
+          consumable,
+          threshold_quantity: 5,
+          unit: 'pieces',
+          category: '',
+          remark: '',
+        };
+      }
+
+      const { data } = await client.post("/inventory/add/", requestData);
+      return { success: true, data };
+    } catch (error) {
+      console.error('Add inventory error:', error);
+      return { success: false, message: error.response?.data?.detail || error.message };
+    }
+  },
+
+  /**
+   * POST /api/inventory/update/
+    * Update quantity of existing inventory item (VhIncharge/VhCaretaker)
+   * @param {number} itemId - Inventory item ID
+   * @param {number} quantity - Updated quantity
+   * @returns {Object} Success response
+   */
+  updateInventory: async (itemId, quantity) => {
+    try {
+      const { data } = await client.post("/inventory/update/", {
+        id: itemId,
+        quantity,
+      });
+      return data;
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * GET /api/inventory/list/
+   * Fetch full inventory list for management table
+   * @returns {Object} Inventory items
+   */
+  getInventoryList: async () => {
+    try {
+      const { data } = await client.get("/inventory/list/");
+      return { success: true, data: data.results || [] };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  // UC-VH-011: Inventory threshold & replenishment APIs
+
+  /**
+   * GET /api/inventory/threshold-check/
+   * Check inventory thresholds and get critical items (BR-VH-007)
+   * @returns {Object} List of critical inventory items
+   */
+  checkInventoryThresholds: async () => {
+    try {
+      const { data } = await client.get("/inventory/threshold-check/");
+      return { success: true, ...data };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * POST /api/inventory/threshold-check/
+   * Manually trigger threshold check
+   * @returns {Object} Success response
+   */
+  triggerThresholdCheck: async () => {
+    try {
+      const { data } = await client.post("/inventory/threshold-check/");
+      return { success: true, ...data };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * POST /api/inventory/replenishment-request/
+   * Create replenishment request (Caretaker only)
+   * @param {number} itemId - Inventory item ID
+   * @param {number} requestedQuantity - Quantity requested
+   * @param {string} urgency - Urgency level
+   * @param {string} justification - Justification for request
+   * @returns {Object} Success response
+   */
+  createReplenishmentRequest: async (itemId, requestedQuantity, urgency, justification) => {
+    try {
+      const { data } = await client.post("/inventory/replenishment-request/", {
+        item_id: itemId,
+        requested_quantity: requestedQuantity,
+        urgency,
+        justification,
+      });
+      return { success: true, ...data };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * GET /api/inventory/replenishment-request/
+   * Get replenishment requests based on user role
+   * @returns {Object} List of replenishment requests
+   */
+  getReplenishmentRequests: async () => {
+    try {
+      const { data } = await client.get("/inventory/replenishment-request/");
+      return { success: true, ...data };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * POST /api/inventory/approve-replenishment/
+   * Approve replenishment request (VhIncharge only, BR-VH-016)
+   * @param {number} requestId - Request ID
+   * @param {number} approvedQuantity - Approved quantity
+   * @param {string} approvalRemarks - Approval remarks
+   * @returns {Object} Success response
+   */
+  approveReplenishmentRequest: async (requestId, approvedQuantity, approvalRemarks) => {
+    try {
+      const { data } = await client.post("/inventory/approve-replenishment/", {
+        request_id: requestId,
+        approved_quantity: approvedQuantity,
+        approval_remarks: approvalRemarks,
+      });
+      return { success: true, ...data };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * POST /api/inventory/reject-replenishment/
+   * Reject replenishment request (VhIncharge only, BR-VH-016)
+   * @param {number} requestId - Request ID
+   * @param {string} approvalRemarks - Rejection reason
+   * @returns {Object} Success response
+   */
+  rejectReplenishmentRequest: async (requestId, approvalRemarks) => {
+    try {
+      const { data } = await client.post("/inventory/reject-replenishment/", {
+        request_id: requestId,
+        approval_remarks: approvalRemarks,
+      });
+      return { success: true, ...data };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * POST /api/inventory/update-quantity/
+    * Update inventory quantity with threshold checking (VhIncharge/VhCaretaker)
+   * @param {number} itemId - Item ID
+   * @param {number} quantity - New quantity
+   * @param {string} operation - Operation type ('set', 'add', 'subtract')
+   * @returns {Object} Success response
+   */
+  updateInventoryQuantity: async (itemId, quantity, operation = 'set') => {
+    try {
+      const { data } = await client.post("/inventory/update-quantity/", {
+        item_id: itemId,
+        quantity,
+        operation,
+      });
+      return { success: true, ...data };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * POST /api/inventory/mark-received/
+   * Mark replenishment as received and update inventory
+   * @param {number} requestId - Request ID
+   * @param {number} actualCost - Actual cost
+   * @param {string} deliveryDate - Delivery date (YYYY-MM-DD)
+   * @returns {Object} Success response
+   */
+  markReplenishmentReceived: async (requestId, actualCost, deliveryDate) => {
+    try {
+      const { data } = await client.post("/inventory/mark-received/", {
+        request_id: requestId,
+        actual_cost: actualCost,
+        delivery_date: deliveryDate,
+      });
+      return { success: true, ...data };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+};
+
+// ============================================================
+// MEALS API
+// ============================================================
+
+export const mealsAPI = {
+  /**
+   * POST /api/meals/record/
+   * Record meal consumption for a visitor (VhCaretaker only)
+   * @param {number} visitorId - Visitor ID
+   * @param {number} bookingId - Associated booking ID
+   * @param {Object} mealData - Meal counts {m_tea, breakfast, lunch, eve_tea, dinner}
+   * @returns {Object} Success response
+   */
+  recordMeal: async (visitorId, bookingId, mealData = {}) => {
+    try {
+      const { data } = await client.post("/meals/record/", {
+        visitor_id: visitorId,
+        booking_id: bookingId,
+        m_tea: mealData.m_tea || 0,
+        breakfast: mealData.breakfast || 0,
+        lunch: mealData.lunch || 0,
+        eve_tea: mealData.eve_tea || 0,
+        dinner: mealData.dinner || 0,
+      });
+      return data;
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * POST /api/meals/record/
+   * UC-VH-010: Book meals for guests with BR-VH-011 deadline validation
+   * @param {Object} mealBookingData - Meal booking data
+   * @param {number} mealBookingData.bookingId - Booking ID
+   * @param {number} mealBookingData.visitorId - Visitor ID  
+   * @param {number} mealBookingData.m_tea - Morning tea quantity
+   * @param {number} mealBookingData.breakfast - Breakfast quantity
+   * @param {number} mealBookingData.lunch - Lunch quantity
+   * @param {number} mealBookingData.eve_tea - Evening tea quantity
+   * @param {number} mealBookingData.dinner - Dinner quantity
+   * @returns {Object} Success response with meal booking details
+   */
+  bookMeals: async (mealBookingData) => {
+    try {
+      // Determine primary meal type for deadline validation
+      let mealType = '';
+      const { m_tea, breakfast, lunch, eve_tea, dinner } = mealBookingData;
+      
+      if (lunch > 0) mealType = 'lunch';
+      else if (dinner > 0) mealType = 'dinner';  
+      else if (breakfast > 0) mealType = 'breakfast';
+      else if (m_tea > 0 || eve_tea > 0) mealType = m_tea > 0 ? 'breakfast' : 'dinner';
+
+      const { data } = await client.post("/meals/record/", {
+        visitor_id: mealBookingData.visitorId,
+        booking_id: mealBookingData.bookingId,
+        m_tea: m_tea || 0,
+        breakfast: breakfast || 0,
+        lunch: lunch || 0,
+        eve_tea: eve_tea || 0,
+        dinner: dinner || 0,
+        meal_type: mealType, // For BR-VH-011 deadline validation
+      });
+      return { success: true, ...data };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * GET /api/meals/records/<booking_id>/
+   * Get meal records for a specific booking
+   * @param {number} bookingId - Booking ID
+   * @returns {Object} Meal records with cost breakdown
+   */
+  getMealRecords: async (bookingId) => {
+    try {
+      const { data } = await client.get(`/meals/records/${bookingId}/`);
+      return { success: true, ...data };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * Validate meal booking deadlines (client-side check)
+    * BR-VH-011: Breakfast/Morning Tea ≤ 09:00, Lunch/Evening Tea ≤ 14:00, Dinner ≤ 19:30
+   * @param {Object} mealData - Meal data to validate
+   * @returns {Object} Validation result with warnings
+   */
+  validateMealDeadlines: (mealData) => {
+    const { hour: currentHour, minute: currentMinute, formatted } = getISTTimeParts();
+    const currentTimeDecimal = currentHour + currentMinute / 60;
+    
+    const warnings = [];
+    
+    // BR-VH-011: Check meal booking deadlines
+    if ((mealData.breakfast > 0 || mealData.m_tea > 0) && currentTimeDecimal > 9) {
+      warnings.push({
+        meal: mealData.breakfast > 0 ? 'Breakfast' : 'Morning Tea',
+        deadline: '09:00',
+        current: formatted
+      });
+    }
+    
+    if ((mealData.lunch > 0 || mealData.eve_tea > 0) && currentTimeDecimal > 14) {
+      warnings.push({
+        meal: mealData.lunch > 0 ? 'Lunch' : 'Evening Tea',
+        deadline: '14:00',
+        current: formatted
+      });
+    }
+
+    if (mealData.dinner > 0 && currentTimeDecimal > 19.5) {
+      warnings.push({
+        meal: 'Dinner',
+        deadline: '19:30',
+        current: formatted,
+      });
+    }
+    
+    return {
+      isValid: warnings.length === 0,
+      warnings,
+      currentTime: formatted
+    };
+  },
+};
+
+// ============================================================
+// REPORTS & BILLS API
+// ============================================================
+
+export const reportsAPI = {
+  /**
+   * GET /api/reports/bills/?start_date=YYYY-MM-DD&end_date=YYYY-MM-DD
+   * Generate bill report for date range (VhIncharge only)
+   * @param {string} startDate - Start date (YYYY-MM-DD)
+   * @param {string} endDate - End date (YYYY-MM-DD)
+   * @returns {Object} Bill summary with meal_total, room_total, and detailed records
+   */
+  getBillsBetweenDates: async (startDate, endDate) => {
+    try {
+      const { data } = await client.get("/reports/bills/", {
+        params: { start_date: startDate, end_date: endDate },
+      });
+      return data;
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * POST /api/bills/generate/
+   * Generate and finalize bill for a visitor (VhIncharge only)
+   * @param {string} visitor - Visitor identifier/username
+   * @param {number} messBill - Meal bill amount
+   * @param {number} roomBill - Room bill amount
+   * @param {string} status - Bill status (e.g., "paid", "pending")
+   * @returns {Object} Success response
+   */
+  generateBill: async (visitor, messBill, roomBill, status) => {
+    try {
+      const { data } = await client.post("/bills/generate/", {
+        visitor,
+        mess_bill: messBill,
+        room_bill: roomBill,
+        status,
+      });
+      return data;
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * GET /api/reports/bookings/?days=7
+   * Generate booking reports for specified period with offline audit tracking
+   * UC-VH-012: Report generation with offline source audit flags (BR-VH-017)
+   * @param {number} days - Number of days back to report (default 7)
+   * @param {string} dateFrom - Optional start date (YYYY-MM-DD)
+   * @param {string} dateTo - Optional end date (YYYY-MM-DD)
+   * @returns {Object} Booking report with total, offline count, and records
+   */
+  getBookingsReport: async (days = 7, dateFrom = null, dateTo = null) => {
+    try {
+      const params = { days };
+      if (dateFrom) params.date_from = dateFrom;
+      if (dateTo) params.date_to = dateTo;
+      
+      const { data } = await client.get("/reports/bookings/", { params });
+      return { success: true, ...data };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+
+  /**
+   * GET /api/reports/inventory/?days=7
+   * Generate inventory health and replenishment reports
+   * UC-VH-011: Inventory threshold and replenishment tracking (BR-VH-007, BR-VH-016)
+   * @param {number} days - Number of days back to report (default 7)
+   * @returns {Object} Inventory report with critical items, requests, and snapshot
+   */
+  getInventoryReport: async (days = 7) => {
+    try {
+      const { data } = await client.get("/reports/inventory/", { params: { days } });
+      return { success: true, ...data };
+    } catch (error) {
+      return handleError(error);
+    }
+  },
+};
+
+// ============================================================
+// HEALTH CHECK
+// ============================================================
+
+/**
+ * GET /api/health/
+ * Health check endpoint for API availability
+ * @returns {Object} Health status response
+ */
+export const healthCheck = async () => {
+  try {
+    const { data } = await client.get("/health/");
+    console.log("Visitor Hostel API Health: OK");
+    return data;
+  } catch (error) {
+    console.error("Visitor Hostel API Health: FAILED");
+    return handleError(error);
+  }
+};
+
+// ============================================================
+// DEFAULT EXPORT
+// ============================================================
+
+export default {
+  bookingsAPI,
+  roomsAPI,
+  inventoryAPI,
+  mealsAPI,
+  reportsAPI,
+  healthCheck,
+};
diff --git a/src/Modules/Visitors_Hostel/styles/visitorHostel.module.css b/src/Modules/Visitors_Hostel/styles/visitorHostel.module.css
new file mode 100644
index 000000000..fcb241c20
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/styles/visitorHostel.module.css
@@ -0,0 +1,230 @@
+/**
+ * Visitor Hostel Module Styles
+ * CSS Modules for VH components
+ */
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+.pageContainer {
+  background-color: white;
+  border-radius: 12px;
+  padding: 16px;
+  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+.pageTitle {
+  font-weight: bold;
+  font-size: 28px;
+  color: #228be6;
+  margin-bottom: 1.5rem;
+}
+
+.sectionTitle {
+  font-weight: bold;
+  font-size: 18px;
+  color: #228be6;
+  margin-bottom: 1rem;
+  margin-top: 1.5rem;
+}
+
+.table {
+  border-radius: 8px;
+  border: 1px solid #e0e0e0;
+  overflow: hidden;
+}
+
+.tableHeader {
+  background-color: #e6f3ff;
+  padding: 12px;
+  font-weight: 600;
+}
+
+.tableRow {
+  border-bottom: 1px solid #e0e0e0;
+  padding: 12px;
+  text-align: center;
+}
+
+.tableRowAlternate {
+  background-color: #f5f7f8;
+}
+
+.button {
+  padding: 8px 16px;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  font-weight: 500;
+  transition: all 0.3s ease;
+}
+
+.buttonPrimary {
+  background-color: #228be6;
+  color: white;
+}
+
+.buttonPrimary:hover {
+  background-color: #1971c2;
+}
+
+.buttonOutline {
+  background-color: transparent;
+  color: #228be6;
+  border: 1px solid #228be6;
+}
+
+.buttonOutline:hover {
+  background-color: #e6f3ff;
+}
+
+.buttonDanger {
+  background-color: #fa5252;
+  color: white;
+}
+
+.buttonDanger:hover {
+  background-color: #f03e3e;
+}
+
+.badge {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.badgePending {
+  background-color: #ffe066;
+  color: #856404;
+}
+
+.badgeConfirmed {
+  background-color: #51cf66;
+  color: #2b8a3e;
+}
+
+.badgeCancelled {
+  background-color: #ff8787;
+  color: #c92a2a;
+}
+
+.badgeCompleted {
+  background-color: #a8e6cf;
+  color: #27ae60;
+}
+
+.form {
+  background-color: #f8f9fa;
+  padding: 1.5rem;
+  border-radius: 8px;
+}
+
+.formGroup {
+  margin-bottom: 1.5rem;
+}
+
+.formLabel {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+  color: #333;
+}
+
+.formInput {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 14px;
+}
+
+.formInput:focus {
+  outline: none;
+  border-color: #228be6;
+  box-shadow: 0 0 0 3px rgba(34, 139, 230, 0.1);
+}
+
+.modal {
+  background-color: white;
+  border-radius: 8px;
+  padding: 2rem;
+  box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.25);
+}
+
+.searchBox {
+  display: flex;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+}
+
+.searchInput {
+  flex: 1;
+  min-width: 250px;
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.loadingSpinner {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 200px;
+  color: #666;
+}
+
+.emptyState {
+  text-align: center;
+  padding: 2rem;
+  color: #999;
+}
+
+/* Responsive Styles */
+@media (max-width: 768px) {
+  .pageTitle {
+    font-size: 20px;
+  }
+
+  .sectionTitle {
+    font-size: 16px;
+  }
+
+  .table {
+    font-size: 12px;
+  }
+
+  .tableRow {
+    padding: 8px;
+  }
+
+  .searchBox {
+    flex-direction: column;
+  }
+
+  .searchInput {
+    min-width: 100%;
+  }
+
+  .button {
+    padding: 6px 12px;
+    font-size: 12px;
+  }
+}
+
+/* Print Styles */
+@media print {
+  .button,
+  .searchBox {
+    display: none;
+  }
+
+  .table {
+    box-shadow: none;
+    border: 1px solid #ccc;
+  }
+}
diff --git a/src/Modules/Visitors_Hostel/updateBooking.jsx b/src/Modules/Visitors_Hostel/updateBooking.jsx
deleted file mode 100644
index 12226c04c..000000000
--- a/src/Modules/Visitors_Hostel/updateBooking.jsx
+++ /dev/null
@@ -1,416 +0,0 @@
-import React, { useState, useEffect } from "react";
-import PropTypes from "prop-types";
-import {
-  MantineProvider,
-  TextInput,
-  Select,
-  NumberInput,
-  Button,
-  Textarea,
-  Group,
-  Grid,
-  Modal,
-  LoadingOverlay,
-  MultiSelect,
-} from "@mantine/core";
-import axios from "axios";
-import { host } from "../../routes/globalRoutes";
-import { fetchAvailableRoomsRoute } from "../../routes/visitorsHostelRoutes";
-
-function UpdateBookingForm({
-  forwardmodalOpened,
-  onClose,
-  //   onBookingForward,
-  bookingId,
-}) {
-  console.log("BOOKING ID: ", bookingId); // Log booking ID for debugging
-  const [formData, setFormData] = useState({
-    intenderUsername: "",
-    intenderEmail: "",
-    bookingFrom: "",
-    bookingTo: "",
-    visitorCategory: "",
-    modifiedCategory: "",
-    personCount: 1,
-    numberOfRooms: 1,
-    rooms: [],
-    purpose: "",
-    billToBeSettledBy: "",
-    remarks: "",
-    visitorName: "",
-    visitorEmail: "",
-    visitorPhone: "",
-    visitorOrganization: "",
-    visitorAddress: "",
-  });
-
-  const [loading, setLoading] = useState(false);
-  const [availableRooms, setAvailableRooms] = useState([]);
-
-  useEffect(() => {
-    const fetchAvailableRooms = async (startDate, endDate) => {
-      const token = localStorage.getItem("authToken");
-      if (!token) {
-        return console.error("No authentication token found!");
-      }
-
-      try {
-        const response = await axios.post(
-          fetchAvailableRoomsRoute,
-          {
-            start_date: startDate,
-            end_date: endDate,
-          },
-          {
-            headers: {
-              Authorization: `Token ${token}`,
-              "Content-Type": "application/json",
-            },
-          },
-        );
-        setAvailableRooms(response.data.available_rooms);
-      } catch (error) {
-        console.error("Error fetching available rooms:", error);
-      }
-    };
-    const fetchBookingData = async () => {
-      try {
-        const response = await axios.get(
-          `${host}/visitorhostel/get-booking-details/${bookingId}/`,
-        );
-        const booking = response.data;
-        setFormData({
-          intenderUsername: booking.intenderUsername,
-          intenderEmail: booking.intenderEmail,
-          bookingFrom: booking.bookingFrom,
-          bookingTo: booking.bookingTo,
-          visitorCategory: booking.visitorCategory,
-          modifiedCategory: booking.visitorCategory, // Keep this field empty for editing
-          personCount: booking.personCount,
-          numberOfRooms: booking.numberOfRooms,
-          rooms: booking.rooms
-            ? booking.rooms.map((room) => room.room_number)
-            : [], // Set the assigned rooms
-          purpose: booking.purpose,
-          billToBeSettledBy: booking.billToBeSettledBy,
-          remarks: booking.remarks,
-          visitorName: booking.visitorName,
-          visitorEmail: booking.visitorEmail,
-          visitorPhone: booking.visitorPhone,
-          visitorOrganization: booking.visitorOrganization,
-          visitorAddress: booking.visitorAddress,
-        });
-        console.log("Update Bookings: ", booking);
-        fetchAvailableRooms(booking.bookingFrom, booking.bookingTo);
-      } catch (error) {
-        console.error("Error fetching booking data", error);
-      }
-    };
-
-    if (bookingId) {
-      fetchBookingData();
-    }
-  }, [bookingId]);
-
-  const handleInputChange = (name, value) => {
-    setFormData({ ...formData, [name]: value });
-  };
-
-  function getCookie(name) {
-    let cookieValue = null;
-    if (document.cookie && document.cookie !== "") {
-      const cookies = document.cookie.split(";");
-      for (let i = 0; i < cookies.length; i += 1) {
-        const cookie = cookies[i].trim();
-        // Does this cookie string begin with the name we want?
-        if (cookie.substring(0, name.length + 1) === `${name}=`) {
-          cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-          break;
-        }
-      }
-    }
-    return cookieValue;
-  }
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setLoading(true);
-
-    const token = localStorage.getItem("authToken");
-    const csrfToken = getCookie("csrftoken");
-
-    const requestData = {
-      booking_id: bookingId,
-      modified_category: formData.modifiedCategory,
-      rooms: formData.rooms,
-      remarks: formData.remarks,
-      visitorOrganization: formData.visitorOrganization,
-      visitorPhone: formData.visitorPhone,
-      visitorEmail: formData.visitorEmail,
-      visitorName: formData.visitorName,
-      visitorAddress: formData.visitorAddress,
-      billToBeSettledBy: formData.billToBeSettledBy,
-      purpose: formData.purpose,
-      numberOfRooms: formData.numberOfRooms,
-      personCount: formData.personCount,
-    };
-
-    try {
-      const response = await axios.post(
-        `${host}/visitorhostel/update-booking-new/`,
-        requestData,
-        {
-          headers: {
-            Authorization: `Token ${token}`,
-            "X-CSRFToken": csrfToken,
-            "Content-Type": "application/json",
-          },
-        },
-      );
-      console.log("Form submitted", response.data);
-      //   onBookingForward(); // Call the fetch function to refresh bookings
-      onClose(); // Close the modal after the operation
-    } catch (error) {
-      console.error("Error submitting form", error);
-    } finally {
-      setLoading(false);
-    }
-    window.location.reload();
-  };
-
-  return (
-    <MantineProvider theme={{ fontFamily: "Arial, sans-serif" }}>
-      <Modal
-        opened={forwardmodalOpened}
-        onClose={onClose}
-        title="Update Booking Request"
-        size="xl"
-        overlayOpacity={0.55}
-        overlayBlur={3}
-        transition="fade"
-        transitionDuration={500}
-      >
-        <LoadingOverlay visible={loading} overlayBlur={2} />
-        <form onSubmit={handleSubmit}>
-          <Grid>
-            <Grid.Col span={12}>
-              <TextInput
-                label="Username"
-                value={formData.intenderUsername}
-                readOnly
-              />
-            </Grid.Col>
-
-            <Grid.Col span={12}>
-              <TextInput
-                label="Email"
-                value={formData.intenderEmail}
-                readOnly
-              />
-            </Grid.Col>
-
-            <Grid.Col span={6}>
-              <TextInput
-                label="From"
-                type="date"
-                value={formData.bookingFrom}
-                readOnly
-              />
-            </Grid.Col>
-
-            <Grid.Col span={6}>
-              <TextInput
-                label="To"
-                type="date"
-                value={formData.bookingTo}
-                readOnly
-              />
-            </Grid.Col>
-
-            <Grid.Col span={6}>
-              <TextInput
-                label="Category"
-                value={formData.visitorCategory}
-                readOnly
-              />
-            </Grid.Col>
-
-            <Grid.Col span={6}>
-              <Select
-                label="Modified Category"
-                value={formData.modifiedCategory}
-                onChange={(value) =>
-                  handleInputChange("modifiedCategory", value)
-                }
-                data={["A", "B", "C", "D"]}
-                required
-              />
-            </Grid.Col>
-
-            <Grid.Col span={6}>
-              <NumberInput
-                label="Number Of People"
-                value={formData.personCount}
-                min={1} // Set minimum value to 1
-                onChange={(value) => handleInputChange("personCount", value)}
-              />
-            </Grid.Col>
-
-            <Grid.Col span={6}>
-              <NumberInput
-                label="Rooms Required"
-                value={formData.numberOfRooms}
-                min={1}
-                max={availableRooms.length}
-                onChange={(value) => handleInputChange("numberOfRooms", value)}
-              />
-            </Grid.Col>
-
-            <Grid.Col span={12}>
-              <MultiSelect
-                label="Rooms (required*)"
-                value={formData.rooms}
-                onChange={(value) => handleInputChange("rooms", value)}
-                data={availableRooms.map((room) => ({
-                  value: room,
-                  label: room,
-                }))}
-                required
-                multiple
-                searchable
-                clearable
-              />
-            </Grid.Col>
-
-            <Grid.Col span={12}>
-              <TextInput
-                label="Purpose Of Visit"
-                value={formData.purpose}
-                onChange={(event) =>
-                  handleInputChange("purpose", event.currentTarget.value)
-                }
-              />
-            </Grid.Col>
-
-            <Grid.Col span={12}>
-              <Select
-                label="Bill to be settled by"
-                value={formData.billToBeSettledBy}
-                onChange={(value) =>
-                  handleInputChange("billToBeSettledBy", value)
-                }
-                data={[
-                  { value: "Visitor", label: "Visitor" },
-                  { value: "Intender", label: "Intender" },
-                  {
-                    value: "Institute / No Charges",
-                    label: "Institute / No Charges",
-                  },
-                  { value: "Project No.", label: "Project No." },
-                ]}
-                placeholder="Select an option"
-              />
-            </Grid.Col>
-
-            <Grid.Col span={12}>
-              <Textarea
-                label="Remarks"
-                value={formData.remarks}
-                onChange={(event) =>
-                  handleInputChange("remarks", event.currentTarget.value)
-                }
-              />
-            </Grid.Col>
-
-            <Grid.Col span={12}>
-              <TextInput
-                label="Visitor Name"
-                value={formData.visitorName}
-                onChange={(event) =>
-                  handleInputChange("visitorName", event.currentTarget.value)
-                }
-              />
-            </Grid.Col>
-
-            <Grid.Col span={12}>
-              <TextInput
-                label="Visitor Email"
-                value={formData.visitorEmail}
-                onChange={(event) => {
-                  const email = event.currentTarget.value;
-
-                  // Regex for validating email
-                  const emailRegex =
-                    /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
-
-                  if (email.trim() === "" || !emailRegex.test(email)) {
-                    console.error("Invalid email format");
-                  } else {
-                    handleInputChange("visitorEmail", email);
-                  }
-                }}
-                error={
-                  formData.visitorEmail &&
-                  !/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(
-                    formData.visitorEmail,
-                  )
-                    ? "Invalid email format"
-                    : undefined
-                }
-              />
-            </Grid.Col>
-
-            <Grid.Col span={12}>
-              <TextInput
-                label="Visitor Phone"
-                value={formData.visitorPhone}
-                onChange={(event) =>
-                  handleInputChange("visitorPhone", event.currentTarget.value)
-                }
-              />
-            </Grid.Col>
-
-            <Grid.Col span={12}>
-              <TextInput
-                label="Visitor Organization"
-                value={formData.visitorOrganization}
-                onChange={(event) =>
-                  handleInputChange(
-                    "visitorOrganization",
-                    event.currentTarget.value,
-                  )
-                }
-              />
-            </Grid.Col>
-
-            <Grid.Col span={12}>
-              <TextInput
-                label="Visitor Address"
-                value={formData.visitorAddress}
-                onChange={(event) =>
-                  handleInputChange("visitorAddress", event.currentTarget.value)
-                }
-              />
-            </Grid.Col>
-
-            <Grid.Col span={12}>
-              <Group position="right" mt="md">
-                <Button type="submit">Update</Button>
-              </Group>
-            </Grid.Col>
-          </Grid>
-        </form>
-      </Modal>
-    </MantineProvider>
-  );
-}
-
-UpdateBookingForm.propTypes = {
-  forwardmodalOpened: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-  bookingId: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-    .isRequired,
-  //   onBookingForward: PropTypes.func.isRequired, // Add this prop type
-};
-
-export default UpdateBookingForm;
diff --git a/src/Modules/Visitors_Hostel/utils/constants.js b/src/Modules/Visitors_Hostel/utils/constants.js
new file mode 100644
index 000000000..a899258b7
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/utils/constants.js
@@ -0,0 +1,85 @@
+/**
+ * VH Module Constants
+ * Centralized definitions for roles, statuses, categories, etc.
+ */
+
+export const USER_ROLES = {
+  STUDENT: "Student",
+  VH_INCHARGE: "VhIncharge",
+  VH_CARETAKER: "VhCaretaker",
+};
+
+export const BOOKING_STATUS = {
+  PENDING: "Pending",
+  CONFIRMED: "Confirmed",
+  CHECKED_IN: "CheckedIn",
+  CHECKED_OUT: "CheckedOut",
+  CANCELLED: "Cancelled",
+  REJECTED: "Rejected",
+};
+
+export const ROOM_CATEGORIES = {
+  DELUXE: "Deluxe",
+  REGULAR: "Regular",
+  ECONOMY: "Economy",
+  SINGLE: "Single",
+  DOUBLE: "Double",
+};
+
+export const MEAL_TYPES = {
+  M_TEA: "m_tea",
+  BREAKFAST: "breakfast",
+  LUNCH: "lunch",
+  EVE_TEA: "eve_tea",
+  DINNER: "dinner",
+};
+
+export const BILL_STATUS = {
+  PENDING: "pending",
+  PAID: "paid",
+  SETTLED: "settled",
+};
+
+export const ROOM_STATUS = {
+  AVAILABLE: "Available",
+  BOOKED: "Booked",
+  MAINTENANCE: "Maintenance",
+  BLOCKED: "Blocked",
+};
+
+export const API_ENDPOINTS = {
+  BOOKINGS_PENDING: "/api/visitorhostel/bookings/pending/",
+  BOOKINGS_ACTIVE: "/api/visitorhostel/bookings/active/",
+  BOOKINGS_CONFIRM: "/api/visitorhostel/bookings/confirm/",
+  BOOKINGS_CANCEL: "/api/visitorhostel/bookings/cancel/",
+  BOOKINGS_REJECT: "/api/visitorhostel/bookings/reject/",
+  BOOKINGS_FORWARD: "/api/visitorhostel/bookings/forward/",
+  ROOMS_AVAILABILITY: "/api/visitorhostel/rooms/availability/",
+  INVENTORY_ADD: "/api/visitorhostel/inventory/add/",
+  INVENTORY_LIST: "/api/visitorhostel/inventory/",
+};
+
+export const VALIDATION_RULES = {
+  EMAIL_PATTERN: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+  PHONE_PATTERN: /^[0-9]{10}$/,
+  MIN_BOOKING_DAYS: 1,
+  MAX_BOOKING_DAYS: 90,
+  MIN_ROOMS: 1,
+  MAX_ROOMS: 10,
+  MIN_VISITORS: 1,
+  MAX_VISITORS: 50,
+};
+
+export const MESSAGES = {
+  BOOKING_SUCCESS: "Booking submitted successfully",
+  BOOKING_CONFIRMED: "Booking confirmed successfully",
+  BOOKING_REJECTED: "Booking rejected successfully",
+  BOOKING_CANCELLED: "Booking cancelled successfully",
+  BOOKING_FORWARDED: "Booking forwarded successfully",
+  CHECKOUT_SUCCESS: "Checkout completed successfully",
+  INVENTORY_ADDED: "Inventory item added successfully",
+  ERROR_GENERIC: "An error occurred. Please try again.",
+  ERROR_INVALID_DATE: "Invalid date range selected",
+  ERROR_INVALID_EMAIL: "Invalid email address",
+  ERROR_INVALID_PHONE: "Invalid phone number",
+};
diff --git a/src/Modules/Visitors_Hostel/utils/dateHelpers.js b/src/Modules/Visitors_Hostel/utils/dateHelpers.js
new file mode 100644
index 000000000..afdedce32
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/utils/dateHelpers.js
@@ -0,0 +1,94 @@
+/**
+ * Date Helper Functions
+ * Reusable date formatting and manipulation utilities
+ */
+
+/**
+ * Format date to YYYY-MM-DD
+ * @param {Date|string} date
+ * @returns {string}
+ */
+export const formatDate = (date) => {
+  const d = new Date(date);
+  const month = String(d.getMonth() + 1).padStart(2, "0");
+  const day = String(d.getDate()).padStart(2, "0");
+  return `${d.getFullYear()}-${month}-${day}`;
+};
+
+/**
+ * Format date to readable format (e.g., "Jan 15, 2025")
+ * @param {Date|string} date
+ * @returns {string}
+ */
+export const formatDateReadable = (date) => {
+  const options = { year: "numeric", month: "short", day: "numeric" };
+  return new Date(date).toLocaleDateString(undefined, options);
+};
+
+/**
+ * Format date with time
+ * @param {Date|string} date
+ * @returns {string}
+ */
+export const formatDateTime = (date) => {
+  const d = new Date(date);
+  const dateStr = formatDate(d);
+  const time = d.toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: true,
+  });
+  return `${dateStr} ${time}`;
+};
+
+/**
+ * Get number of days between two dates
+ * @param {string} startDate - YYYY-MM-DD
+ * @param {string} endDate - YYYY-MM-DD
+ * @returns {number}
+ */
+export const getDaysBetween = (startDate, endDate) => {
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+  const diffTime = Math.abs(end - start);
+  return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+};
+
+/**
+ * Check if date is in the past
+ * @param {string} date - YYYY-MM-DD
+ * @returns {boolean}
+ */
+export const isDateInPast = (date) => {
+  return new Date(date) < new Date();
+};
+
+/**
+ * Check if date is today
+ * @param {string} date - YYYY-MM-DD
+ * @returns {boolean}
+ */
+export const isDateToday = (date) => {
+  const today = formatDate(new Date());
+  return formatDate(date) === today;
+};
+
+/**
+ * Get current date in YYYY-MM-DD format
+ * @returns {string}
+ */
+export const getTodayDate = () => {
+  return formatDate(new Date());
+};
+
+/**
+ * Add days to a date
+ * @param {string} date - YYYY-MM-DD
+ * @param {number} days
+ * @returns {string}
+ */
+export const addDaysToDate = (date, days) => {
+  const d = new Date(date);
+  d.setDate(d.getDate() + days);
+  return formatDate(d);
+};
diff --git a/src/Modules/Visitors_Hostel/utils/errorHandler.js b/src/Modules/Visitors_Hostel/utils/errorHandler.js
new file mode 100644
index 000000000..e7edbccc2
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/utils/errorHandler.js
@@ -0,0 +1,276 @@
+/**
+ * Centralized Error Handling for Visitor Hostel Module
+ * Provides user-friendly error messages and proper error logging
+ */
+
+import React, { createElement } from 'react';
+import { notifications } from '@mantine/notifications';
+import { IconX, IconExclamationMark, IconAlertTriangle } from '@tabler/icons-react';
+
+/**
+ * Error severity levels
+ */
+export const ERROR_SEVERITY = {
+  INFO: 'info',
+  WARNING: 'warning', 
+  ERROR: 'error',
+  CRITICAL: 'critical'
+};
+
+/**
+ * User-friendly error message mappings
+ */
+const ERROR_MESSAGES = {
+  // Network errors
+  'Network Error': 'Unable to connect to the server. Please check your internet connection.',
+  'timeout': 'Request timed out. Please try again.',
+  'ECONNREFUSED': 'Server is currently unavailable. Please try again later.',
+
+  // Authentication errors  
+  '401': 'Your session has expired. Please log in again.',
+  'Unauthorized': 'You do not have permission to perform this action.',
+  
+  // Validation errors
+  '400': 'Please check your input and try again.',
+  'ValidationError': 'Please fill in all required fields correctly.',
+  
+  // Server errors
+  '500': 'A server error occurred. Our team has been notified.',
+  '502': 'Service temporarily unavailable. Please try again in a moment.',
+  '503': 'System maintenance in progress. Please try again later.',
+
+  // Visitor Hostel specific errors
+  'BR-VH-014 Violation': 'This bill cannot be modified as the guest has already checked out.',
+  'room.*not.*available': 'Selected rooms are no longer available. Please choose different rooms.',
+  'booking.*confirmed': 'This booking has already been confirmed and cannot be modified.',
+  'insufficient.*permissions': 'You do not have permission to perform this action.',
+  
+  // Default fallback
+  default: 'An unexpected error occurred. Please try again or contact support if the issue persists.'
+};
+
+/**
+ * Get user-friendly error message
+ */
+function getUserFriendlyMessage(error) {
+  const errorText = error?.message || error?.detail || error?.error || String(error);
+  
+  // Check for specific error patterns
+  for (const [pattern, message] of Object.entries(ERROR_MESSAGES)) {
+    if (pattern === 'default') continue;
+    
+    if (errorText.includes(pattern) || new RegExp(pattern, 'i').test(errorText)) {
+      return message;
+    }
+  }
+  
+  return ERROR_MESSAGES.default;
+}
+
+/**
+ * Get appropriate icon for error severity
+ */
+function getErrorIcon(severity) {
+  switch (severity) {
+    case ERROR_SEVERITY.WARNING:
+      return createElement(IconExclamationMark, { size: '1.1rem' });
+    case ERROR_SEVERITY.ERROR:
+      return createElement(IconX, { size: '1.1rem' });
+    case ERROR_SEVERITY.CRITICAL:
+      return createElement(IconAlertTriangle, { size: '1.1rem' });
+    default:
+      return createElement(IconX, { size: '1.1rem' });
+  }
+}
+
+/**
+ * Enhanced error handler with user-friendly notifications
+ */
+export function handleError(error, options = {}) {
+  const {
+    severity = ERROR_SEVERITY.ERROR,
+    title = 'Error',
+    showNotification = true,
+    logToConsole = true,
+    context = 'Unknown',
+    userId = null
+  } = options;
+
+  // Extract error details
+  const errorDetails = {
+    message: error?.message || error?.detail || error?.error || String(error),
+    status: error?.response?.status || error?.status,
+    statusText: error?.response?.statusText,
+    url: error?.config?.url,
+    method: error?.config?.method,
+    data: error?.response?.data,
+    timestamp: new Date().toISOString(),
+    context,
+    userId,
+    userAgent: navigator.userAgent,
+    url_current: window.location.href
+  };
+
+  // Get user-friendly message
+  const userMessage = getUserFriendlyMessage(error);
+
+  // Log detailed error (for developers)
+  if (logToConsole) {
+    console.group(`🚨 Visitor Hostel Error - ${context}`);
+    console.error('User Message:', userMessage);
+    console.error('Error Details:', errorDetails);
+    console.error('Original Error:', error);
+    console.groupEnd();
+  }
+
+  // Send error to logging service (if available)
+  try {
+    // This would integrate with your logging service
+    logErrorToService(errorDetails);
+  } catch (logError) {
+    console.warn('Failed to log error to service:', logError);
+  }
+
+  // Show user-friendly notification
+  if (showNotification) {
+    const notificationColor = {
+      [ERROR_SEVERITY.INFO]: 'blue',
+      [ERROR_SEVERITY.WARNING]: 'yellow', 
+      [ERROR_SEVERITY.ERROR]: 'red',
+      [ERROR_SEVERITY.CRITICAL]: 'red'
+    }[severity] || 'red';
+
+    notifications.show({
+      title,
+      message: userMessage,
+      color: notificationColor,
+      icon: getErrorIcon(severity),
+      autoClose: severity === ERROR_SEVERITY.CRITICAL ? false : 5000,
+      withBorder: true
+    });
+  }
+
+  return {
+    userMessage,
+    errorDetails,
+    severity
+  };
+}
+
+/**
+ * Specific error handlers for common scenarios
+ */
+export const ErrorHandlers = {
+  // Network/API errors
+  networkError: (error, context = 'API Request') => 
+    handleError(error, { 
+      severity: ERROR_SEVERITY.ERROR,
+      title: 'Connection Error',
+      context 
+    }),
+
+  // Validation errors
+  validationError: (error, context = 'Form Validation') =>
+    handleError(error, {
+      severity: ERROR_SEVERITY.WARNING,
+      title: 'Validation Error', 
+      context
+    }),
+
+  // Permission errors
+  permissionError: (error, context = 'Authorization') =>
+    handleError(error, {
+      severity: ERROR_SEVERITY.WARNING,
+      title: 'Permission Denied',
+      context
+    }),
+
+  // Critical system errors
+  criticalError: (error, context = 'System Error') =>
+    handleError(error, {
+      severity: ERROR_SEVERITY.CRITICAL,
+      title: 'Critical Error',
+      context
+    }),
+
+  // Booking-specific errors
+  bookingError: (error, context = 'Booking Operation') =>
+    handleError(error, {
+      severity: ERROR_SEVERITY.ERROR,
+      title: 'Booking Error',
+      context
+    }),
+
+  // Payment/billing errors
+  billingError: (error, context = 'Billing Operation') =>
+    handleError(error, {
+      severity: ERROR_SEVERITY.ERROR,
+      title: 'Billing Error',
+      context
+    })
+};
+
+/**
+ * Log error to external service (implement based on your logging service)
+ */
+function logErrorToService(errorDetails) {
+  // Example implementation - replace with your actual logging service
+  if (process.env.NODE_ENV === 'production') {
+    // Send to logging service like Sentry, LogRocket, etc.
+    try {
+      fetch('/api/logs/client-error', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          module: 'visitor_hostel',
+          ...errorDetails
+        })
+      }).catch(() => {
+        // Silent failure - don't interrupt user experience
+      });
+    } catch (e) {
+      // Silent failure
+    }
+  }
+}
+
+/**
+ * Higher-order component for error boundaries
+ */
+export class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    handleError(error, {
+      severity: ERROR_SEVERITY.CRITICAL,
+      title: 'Application Crash',
+      context: `React Component: ${errorInfo.componentStack}`,
+      showNotification: false // Don't show notification for crashes
+    });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return React.createElement(
+        'div',
+        { className: 'error-boundary-fallback' },
+        React.createElement('h2', null, 'Something went wrong'),
+        React.createElement('p', null, "We're sorry, but something unexpected happened."),
+        React.createElement(
+          'button',
+          { onClick: () => window.location.reload() },
+          'Reload Page'
+        )
+      );
+    }
+
+    return this.props.children;
+  }
+}
\ No newline at end of file
diff --git a/src/Modules/Visitors_Hostel/utils/validators.js b/src/Modules/Visitors_Hostel/utils/validators.js
new file mode 100644
index 000000000..149f51149
--- /dev/null
+++ b/src/Modules/Visitors_Hostel/utils/validators.js
@@ -0,0 +1,174 @@
+/**
+ * Visitor Hostel Validators
+ * Reusable validation functions for forms
+ */
+
+/**
+ * Validate email format
+ * @param {string} email
+ * @returns {boolean}
+ */
+export const validateEmail = (email) => {
+  if (!email || typeof email !== 'string') return false;
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailRegex.test(email.trim());
+};
+
+/**
+ * Validate phone number format (supports Indian and international formats)
+ * @param {string} phone
+ * @returns {boolean}
+ */
+export const validatePhone = (phone) => {
+  if (!phone || typeof phone !== 'string') return false;
+  const cleanPhone = phone.replace(/\D/g, "");
+  // Allow 10-digit Indian numbers or 11-13 digit international
+  return /^[0-9]{10}$/.test(cleanPhone) || /^[0-9]{11,13}$/.test(cleanPhone);
+};
+
+/**
+ * Validate date range (departure > arrival)
+ * @param {string} arrivalDate - YYYY-MM-DD format
+ * @param {string} departureDate - YYYY-MM-DD format
+ * @returns {boolean}
+ */
+export const validateDateRange = (arrivalDate, departureDate) => {
+  if (!arrivalDate || !departureDate) return false;
+  const arrival = new Date(arrivalDate);
+  const departure = new Date(departureDate);
+  return !isNaN(arrival.getTime()) && !isNaN(departure.getTime()) && departure > arrival;
+};
+
+/**
+ * Validate required fields
+ * @param {Object} formData
+ * @param {Array<string>} requiredFields - field names
+ * @returns {boolean}
+ */
+export const validateRequiredFields = (formData, requiredFields) => {
+  if (!formData || !Array.isArray(requiredFields)) return false;
+  return requiredFields.every((field) => {
+    const value = formData[field];
+    return value !== null && value !== undefined && value.toString().trim() !== "";
+  });
+};
+
+/**
+ * Validate room count against visitor count
+ * @param {number} visitorCount
+ * @param {number} roomCount
+ * @returns {boolean}
+ */
+export const validateRoomCount = (visitorCount, roomCount) => {
+  return Number.isInteger(roomCount) && Number.isInteger(visitorCount) && roomCount > 0 && visitorCount > 0;
+};
+
+/**
+ * Validate name format (no numbers, minimum length)
+ * @param {string} name
+ * @returns {boolean}
+ */
+export const validateName = (name) => {
+  if (!name || typeof name !== 'string') return false;
+  const trimmedName = name.trim();
+  return trimmedName.length >= 2 && /^[a-zA-Z\s'.,-]+$/.test(trimmedName);
+};
+
+/**
+ * Validate positive number
+ * @param {number|string} value
+ * @returns {boolean}
+ */
+export const validatePositiveNumber = (value) => {
+  const num = Number(value);
+  return !isNaN(num) && num > 0;
+};
+
+/**
+ * Validate purpose of visit (minimum length and content)
+ * @param {string} purpose
+ * @returns {boolean}
+ */
+export const validatePurpose = (purpose) => {
+  if (!purpose || typeof purpose !== 'string') return false;
+  const trimmed = purpose.trim();
+  return trimmed.length >= 5 && trimmed.length <= 200;
+};
+
+/**
+ * Validate future date (not in the past)
+ * @param {string} date - YYYY-MM-DD format
+ * @returns {boolean}
+ */
+export const validateFutureDate = (date) => {
+  if (!date) return false;
+  const inputDate = new Date(date);
+  const today = new Date();
+  today.setHours(0, 0, 0, 0); // Reset time for date-only comparison
+  return inputDate >= today;
+};
+
+/**
+ * Validate student relation (BR-VH-008)
+ * @param {string} relation
+ * @returns {boolean}
+ */
+export const validateStudentRelation = (relation) => {
+  if (!relation || typeof relation !== 'string') return false;
+  const normalizedRelation = relation.trim().toLowerCase();
+  return ['parent', 'spouse'].includes(normalizedRelation);
+};
+
+/**
+ * Validate organization name
+ * @param {string} organization
+ * @returns {boolean}
+ */
+export const validateOrganization = (organization) => {
+  if (!organization || typeof organization !== 'string') return false;
+  const trimmed = organization.trim();
+  return trimmed.length >= 2 && trimmed.length <= 100;
+};
+
+/**
+ * Validate address
+ * @param {string} address
+ * @returns {boolean}
+ */
+export const validateAddress = (address) => {
+  if (!address || typeof address !== 'string') return false;
+  const trimmed = address.trim();
+  return trimmed.length >= 10 && trimmed.length <= 500;
+};
+
+/**
+ * Validate inventory item name
+ * @param {string} itemName
+ * @returns {boolean}
+ */
+export const validateInventoryItem = (itemName) => {
+  if (!itemName || typeof itemName !== 'string') return false;
+  const trimmed = itemName.trim();
+  return trimmed.length >= 3 && trimmed.length <= 100 && /^[a-zA-Z0-9\s\-_().]+$/.test(trimmed);
+};
+
+/**
+ * Validate bill number
+ * @param {string} billNumber
+ * @returns {boolean}
+ */
+export const validateBillNumber = (billNumber) => {
+  if (!billNumber || typeof billNumber !== 'string') return false;
+  const trimmed = billNumber.trim();
+  return trimmed.length >= 3 && trimmed.length <= 50 && /^[a-zA-Z0-9\-_/]+$/.test(trimmed);
+};
+
+/**
+ * Validate cost/price
+ * @param {number|string} cost
+ * @returns {boolean}
+ */
+export const validateCost = (cost) => {
+  const num = Number(cost);
+  return !isNaN(num) && num >= 0 && num <= 1000000; // Up to 10 lakh
+};
diff --git a/src/Modules/Visitors_Hostel/viewActiveBooking.jsx b/src/Modules/Visitors_Hostel/viewActiveBooking.jsx
deleted file mode 100644
index aaabafb05..000000000
--- a/src/Modules/Visitors_Hostel/viewActiveBooking.jsx
+++ /dev/null
@@ -1,593 +0,0 @@
-import React, { useEffect, useState, useRef } from "react";
-import { useSelector } from "react-redux";
-import PropTypes from "prop-types";
-import {
-  MantineProvider,
-  TextInput,
-  NumberInput,
-  Textarea,
-  Group,
-  Grid,
-  Modal,
-  LoadingOverlay,
-  MultiSelect,
-  Button,
-  Text,
-} from "@mantine/core";
-import axios from "axios";
-import html2canvas from "html2canvas";
-import JsPDF from "jspdf";
-import { host } from "../../routes/globalRoutes";
-import {
-  cancelBookingRoute,
-  checkInBookingRoute,
-  // checkOutBookingRoute,
-} from "../../routes/visitorsHostelRoutes"; // Add this import
-import UpdateBookingForm from "./updateBooking";
-import CheckoutForm from "./CheckoutForm";
-import ConfirmBookingIn from "./confirmBooking_Incharge";
-// import ForwardBookingForm from "./forwardBooking";
-
-function ViewBooking({ modalOpened, onClose, bookingId, bookingf, onCancel }) {
-  const [formData, setFormData] = useState({
-    intenderUsername: "",
-    intenderEmail: "",
-    bookingFrom: "",
-    bookingTo: "",
-    visitorCategory: "",
-    modifiedVisitorCategory: "",
-    personCount: 1,
-    numberOfRooms: 1,
-    rooms: [],
-    purpose: "",
-    billToBeSettledBy: "",
-    remarks: "",
-    visitorName: "",
-    visitorEmail: "",
-    visitorPhone: "",
-    visitorOrganization: "",
-    visitorAddress: "",
-  });
-  const [confirmModalOpened, setConfirmModalOpened] = useState(false); // New state for ConfirmBookingIn modal
-  const [availableRooms, setAvailableRooms] = useState([]);
-  // const [forwardModalOpened, setForwardModalOpened] = useState(null);
-  const printRef = useRef();
-  const role = useSelector((state) => state.user.role);
-
-  useEffect(() => {
-    const fetchBookingData = async () => {
-      try {
-        const response = await axios.get(
-          `${host}/visitorhostel/get-booking-details/${bookingId}/`,
-        );
-        const booking = response.data;
-        console.log("Active Booking Data: ", booking);
-
-        setFormData({
-          intenderUsername: booking.intenderUsername,
-          intenderEmail: booking.intenderEmail,
-          bookingFrom: booking.bookingFrom,
-          bookingTo: booking.bookingTo,
-          visitorCategory: booking.visitorCategory,
-          modifiedVisitorCategory: booking.modifiedVisitorCategory,
-          personCount: booking.personCount,
-          numberOfRooms: booking.numberOfRooms,
-          // Use the rooms data from bookingf prop instead
-          rooms: bookingf.rooms || [],
-          purpose: booking.purpose,
-          billToBeSettledBy: booking.billToBeSettledBy,
-          remarks: booking.remarks,
-          visitorName: booking.visitorName,
-          visitorEmail: booking.visitorEmail,
-          visitorPhone: booking.visitorPhone,
-          visitorOrganization: booking.visitorOrganization,
-          visitorAddress: booking.visitorAddress,
-        });
-
-        setAvailableRooms(
-          booking.availableRooms.map((room) => room.room_number),
-        );
-      } catch (error) {
-        console.error("Error fetching booking data", error);
-      }
-    };
-
-    if (bookingId) {
-      fetchBookingData();
-    }
-  }, [bookingId, bookingf]); // Add bookingf as a dependency
-  const handlePrint = () => {
-    const printContent = printRef.current.innerHTML;
-    const originalContent = document.body.innerHTML;
-
-    document.body.innerHTML = printContent;
-    window.print();
-    document.body.innerHTML = originalContent;
-    window.location.reload();
-  };
-
-  const handleSaveToPDF = async () => {
-    const input = printRef.current;
-    const canvas = await html2canvas(input, { scale: 3 }); // Increased scaling
-    const imgData = canvas.toDataURL("image/png");
-    const pdf = new JsPDF("p", "mm", "a4");
-    const pdfWidth = pdf.internal.pageSize.getWidth();
-    const pdfHeight = (canvas.height * pdfWidth) / canvas.width;
-    pdf.addImage(imgData, "PNG", 10, 10, pdfWidth - 20, pdfHeight - 95);
-    pdf.save("booking_details.pdf");
-  };
-
-  const handleCheckIn = async () => {
-    const token = localStorage.getItem("authToken");
-    if (!token) {
-      return console.error("No authentication token found!");
-    }
-    try {
-      const data = {
-        booking_id: bookingId,
-        name: formData.visitorName,
-        phone: formData.visitorPhone,
-        email: formData.visitorEmail,
-        address: formData.visitorAddress,
-        check_in_date: new Date().toISOString().split("T")[0], // Current date
-        check_in_time: new Date().toLocaleTimeString([], {
-          hour: "2-digit",
-          minute: "2-digit",
-          hour12: true,
-        }), // Current time in "12:12 AM" format
-      };
-      await axios.post(checkInBookingRoute, data, {
-        headers: {
-          Authorization: `Token ${token}`,
-          "Content-Type": "application/json",
-        },
-      });
-      console.log("Successfully checked in booking with ID:", bookingId);
-      // Optionally, you can add logic to refresh the booking data or close the modal
-      onClose(); // Close the modal after check-in
-      window.location.reload();
-    } catch (error) {
-      console.error("Error checking in the booking:", error);
-    }
-  };
-
-  // const handleCheckOut = async () => {
-  //   const token = localStorage.getItem("authToken");
-  //   if (!token) {
-  //     return console.error("No authentication token found!");
-  //   }
-  //   try {
-  //     const data = {
-  //       booking_id: bookingId,
-  //       name: formData.visitorName,
-  //       phone: formData.visitorPhone,
-  //       email: formData.visitorEmail,
-  //       address: formData.visitorAddress,
-  //       check_out_date: new Date().toISOString().split("T")[0], // Current date
-  //       check_out_time: new Date().toLocaleTimeString([], {
-  //         hour: "2-digit",
-  //         minute: "2-digit",
-  //         hour12: true,
-  //       }), // Current time in "12:12 AM" format
-  //     };
-  //     await axios.post(checkOutBookingRoute, data, {
-  //       headers: {
-  //         Authorization: `Token ${token}`,
-  //         "Content-Type": "application/json",
-  //       },
-  //     });
-  //     console.log("Successfully checked out booking with ID:", bookingId);
-  //     // Optionally, you can add logic to refresh the booking data or close the modal
-  //     onClose(); // Close the modal after check-out
-  //   } catch (error) {
-  //     console.error("Error checking out the booking:", error);
-  //   }
-  // };
-
-  const handleCancel = async () => {
-    const token = localStorage.getItem("authToken");
-    if (!token) {
-      return console.error("No authentication token found!");
-    }
-    try {
-      const data = {
-        "booking-id": bookingId,
-        remark: "User canceled the booking.",
-        charges: 0,
-      };
-      await axios.post(cancelBookingRoute, data, {
-        headers: {
-          Authorization: `Token ${token}`,
-          "Content-Type": "application/x-www-form-urlencoded",
-        },
-      });
-      console.log("Successfully canceled booking with ID:", bookingId);
-      // Optionally, you can add logic to refresh the booking data or close the modal
-      onClose(); // Close the modal after cancellation
-      if (onCancel) {
-        onCancel(bookingId); // Call the onCancel callback to refresh the bookings list
-      }
-    } catch (error) {
-      console.error("Error canceling the booking:", error);
-    }
-    window.location.reload();
-  };
-
-  const isCheckInEnabled = () => {
-    const currentDateTime = new Date();
-    const bookingDateTime = new Date(`${formData.bookingFrom}T00:00:00`);
-    return (
-      currentDateTime >= bookingDateTime && bookingf.status !== "CheckedIn"
-    );
-  };
-
-  const isCheckOutEnabled = () => {
-    return bookingf.status === "CheckedIn";
-  };
-
-  const [updateModalOpened, setUpdateModalOpened] = useState(false);
-
-  const handleUpdateButtonClick = () => {
-    setUpdateModalOpened(true); // Open the UpdateBookingForm modal
-  };
-
-  const handleUpdateCloseModal = () => {
-    setUpdateModalOpened(false); // Close the UpdateBookingForm modal
-  };
-
-  const [checkoutModalOpened, setCheckoutModalOpened] = useState(false);
-
-  const handleCheckoutButtonClick = () => {
-    setCheckoutModalOpened(true); // Open the CheckoutForm modal
-  };
-
-  const handleCheckoutCloseModal = () => {
-    setCheckoutModalOpened(false); // Close the CheckoutForm modal
-  };
-
-  return (
-    <MantineProvider theme={{ fontFamily: "Arial, sans-serif" }}>
-      <Modal
-        opened={modalOpened}
-        onClose={onClose}
-        title="IIITDMJ Visitors Hostel"
-        size="xl"
-        overlayOpacity={0.55}
-        overlayBlur={3}
-        transition="fade"
-        transitionDuration={500}
-      >
-        <LoadingOverlay overlayBlur={2} />
-        <div
-          ref={printRef}
-          className="print-content"
-          style={{ border: "2px solid #000", padding: "20px", margin: "20px" }}
-        >
-          <div>
-            <Text align="center" weight={900} size="xl" mb="xs">
-              <b>Visitors Hostel</b>
-            </Text>
-            <Text align="center" weight={700} size="md" mb="md">
-              <b>PDPM IIITDM Jabalpur</b>
-            </Text>
-            <Text align="center" weight={800} size="lg" mb="md">
-              <b>Booking for {formData.visitorName}</b>
-            </Text>
-          </div>
-          <form>
-            <Grid>
-              <Grid.Col span={12}>
-                <div
-                  style={{
-                    backgroundColor:
-                      bookingf.status === "Pending"
-                        ? "#E0E0E0"
-                        : bookingf.status === "Confirmed"
-                          ? "#dffbe0"
-                          : bookingf.status === "Forward"
-                            ? "#fff3cd"
-                            : bookingf.status === "CheckedIn"
-                              ? "#cce5ff"
-                              : bookingf.status === "Complete"
-                                ? "#d4edda"
-                                : "#f8d7da",
-                    color:
-                      bookingf.status === "Pending"
-                        ? "#757575"
-                        : bookingf.status === "Confirmed"
-                          ? "#84b28c"
-                          : bookingf.status === "Forward"
-                            ? "#856404"
-                            : bookingf.status === "CheckedIn"
-                              ? "#004085"
-                              : bookingf.status === "Complete"
-                                ? "#155724"
-                                : "#721c24",
-                    padding: "4px 8px",
-                    borderRadius: "4px",
-                    display: "inline-block",
-                  }}
-                >
-                  {bookingf.status}
-                </div>
-              </Grid.Col>
-              <Grid.Col span={12}>
-                <TextInput
-                  label="Username"
-                  value={formData.intenderUsername}
-                  readOnly
-                />
-              </Grid.Col>
-
-              <Grid.Col span={12}>
-                <TextInput
-                  label="Email"
-                  value={formData.intenderEmail}
-                  readOnly
-                />
-              </Grid.Col>
-
-              <Grid.Col span={6}>
-                <TextInput
-                  label="From"
-                  type="date"
-                  value={formData.bookingFrom}
-                  readOnly
-                />
-              </Grid.Col>
-
-              <Grid.Col span={6}>
-                <TextInput
-                  label="To"
-                  type="date"
-                  value={formData.bookingTo}
-                  readOnly
-                />
-              </Grid.Col>
-
-              <Grid.Col span={6}>
-                <TextInput
-                  label="Category"
-                  value={formData.visitorCategory}
-                  readOnly
-                />
-              </Grid.Col>
-
-              <Grid.Col span={6}>
-                <TextInput
-                  label="Modified Category"
-                  value={formData.modifiedVisitorCategory}
-                  readOnly
-                />
-              </Grid.Col>
-
-              <Grid.Col span={6}>
-                <NumberInput
-                  label="Number Of People"
-                  value={formData.personCount}
-                  readOnly
-                />
-              </Grid.Col>
-
-              <Grid.Col span={6}>
-                <NumberInput
-                  label="Rooms Required"
-                  value={formData.numberOfRooms}
-                  readOnly
-                />
-              </Grid.Col>
-              {/* <Grid.Col span={12}>
-                <MultiSelect
-                  label="Rooms"
-                  value={formData.rooms}
-                  data={availableRooms.map((room) => ({
-                    value: room,
-                    label: room,
-                  }))}
-                  readOnly
-                />
-              </Grid.Col> */}
-
-              <Grid.Col span={12}>
-                <MultiSelect
-                  label="Rooms"
-                  value={formData.rooms}
-                  data={availableRooms.map((room) => ({
-                    value: room,
-                    label: room,
-                  }))}
-                  readOnly
-                />
-              </Grid.Col>
-
-              <Grid.Col span={12}>
-                <TextInput
-                  label="Purpose Of Visit"
-                  value={formData.purpose}
-                  readOnly
-                />
-              </Grid.Col>
-
-              <Grid.Col span={12}>
-                <TextInput
-                  label="Bill to be settled by"
-                  value={formData.billToBeSettledBy}
-                  readOnly
-                />
-              </Grid.Col>
-
-              <Grid.Col span={12}>
-                <Textarea label="Remarks" value={formData.remarks} readOnly />
-              </Grid.Col>
-
-              <Grid.Col span={12}>
-                <TextInput
-                  label="Visitor Email"
-                  value={formData.visitorEmail}
-                  readOnly
-                />
-              </Grid.Col>
-
-              <Grid.Col span={12}>
-                <TextInput
-                  label="Visitor Phone"
-                  value={formData.visitorPhone}
-                  readOnly
-                />
-              </Grid.Col>
-
-              <Grid.Col span={12}>
-                <TextInput
-                  label="Visitor Organization"
-                  value={formData.visitorOrganization}
-                  readOnly
-                />
-              </Grid.Col>
-
-              <Grid.Col span={12}>
-                <TextInput
-                  label="Visitor Address"
-                  value={formData.visitorAddress}
-                  readOnly
-                />
-              </Grid.Col>
-            </Grid>
-          </form>
-        </div>
-        <Group position="apart" mt="md">
-          <Button onClick={handlePrint} variant="outline" color="blue">
-            Print
-          </Button>
-          <Button onClick={handleSaveToPDF} variant="outline" color="green">
-            Save to PDF
-          </Button>
-          {(role === "VhCaretaker" || role === "VhIncharge") && (
-            <>
-              <Button
-                onClick={handleCheckIn}
-                variant="outline"
-                color="teal"
-                disabled={!isCheckInEnabled()}
-                style={{
-                  backgroundColor: isCheckInEnabled() ? "#20c997" : "#d3d3d3",
-                  color: isCheckInEnabled() ? "#fff" : "#757575",
-                }}
-              >
-                CheckIn
-              </Button>
-              <Button
-                onClick={handleCheckoutButtonClick} // Open the modal
-                variant="outline"
-                color="orange"
-                disabled={!isCheckOutEnabled()}
-                style={{
-                  backgroundColor: isCheckOutEnabled() ? "#fd7e14" : "#d3d3d3",
-                  color: isCheckOutEnabled() ? "#fff" : "#757575",
-                }}
-              >
-                CheckOut
-              </Button>
-              {checkoutModalOpened && (
-                <CheckoutForm
-                  modalOpened={checkoutModalOpened}
-                  onClose={handleCheckoutCloseModal}
-                  bookingId={bookingId}
-                  bookingDetails={formData} // Pass the booking details
-                />
-              )}
-            </>
-          )}
-          {/* <Button onClick={() => handleForwardButtonClick(formData.id)}>
-            Update Details
-          </Button>
-          {forwardModalOpened === formData.id && (
-            <ForwardBookingForm
-              forwardmodalOpened={forwardModalOpened === formData.id}
-              onClose={handleForwardCloseModal}
-              onBookingForward={} // Pass the function down
-              bookingId={formData.id}
-            />
-          )} */}
-          {role === "VhIncharge" && (
-            <>
-              <Button
-                onClick={() => setConfirmModalOpened(true)} // Open ConfirmBookingIn modal
-                disabled={bookingf.status !== "Forward"}
-                style={{
-                  backgroundColor:
-                    bookingf.status === "Forward" ? "#28a745" : "#d3d3d3",
-                  color: bookingf.status === "Forward" ? "#fff" : "#757575",
-                  cursor:
-                    bookingf.status === "Forward" ? "pointer" : "not-allowed",
-                }}
-              >
-                Confirm
-              </Button>
-              {confirmModalOpened && (
-                <ConfirmBookingIn
-                  forwardmodalOpened={confirmModalOpened}
-                  onClose={() => setConfirmModalOpened(false)} // Close ConfirmBookingIn modal
-                  bookingId={bookingId}
-                />
-              )}
-            </>
-          )}
-          {(role === "VhCaretaker" || role === "VhIncharge") && (
-            <>
-              <Button onClick={handleUpdateButtonClick}>Update Booking</Button>
-              {updateModalOpened && (
-                <UpdateBookingForm
-                  forwardmodalOpened={updateModalOpened}
-                  onClose={handleUpdateCloseModal}
-                  bookingId={bookingId}
-                />
-              )}
-            </>
-          )}
-          <Button onClick={handleCancel} variant="outline" color="red">
-            Cancel
-          </Button>
-        </Group>
-      </Modal>
-      <style>{`
-        @media print {
-          .print-only {
-            display: block;
-          }
-          .no-print {
-            display: none;
-          }
-          .print-content {
-            border: 2px solid #000;
-            padding: 20px;
-            margin: 20px;
-            page-break-inside: avoid;
-          }
-        }
-        .print-only {
-          display: none;
-        }
-      `}</style>
-    </MantineProvider>
-  );
-}
-
-ViewBooking.propTypes = {
-  modalOpened: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-  bookingId: PropTypes.string.isRequired,
-  bookingf: PropTypes.shape({
-    intender: PropTypes.string.isRequired,
-    email: PropTypes.string.isRequired,
-    bookingFrom: PropTypes.string.isRequired,
-    bookingTo: PropTypes.string.isRequired,
-    category: PropTypes.string.isRequired,
-    // modifiedCategory: PropTypes.string,
-    modifiedVisitorCategory: PropTypes.string,
-    rooms: PropTypes.arrayOf(PropTypes.string),
-    status: PropTypes.string.isRequired,
-  }).isRequired,
-  onCancel: PropTypes.func, // Add this prop type
-};
-
-export default ViewBooking;
diff --git a/src/Modules/Visitors_Hostel/viewBooking.jsx b/src/Modules/Visitors_Hostel/viewBooking.jsx
deleted file mode 100644
index cf28b2ea4..000000000
--- a/src/Modules/Visitors_Hostel/viewBooking.jsx
+++ /dev/null
@@ -1,349 +0,0 @@
-import React, { useEffect, useState, useRef } from "react";
-import PropTypes from "prop-types";
-import {
-  MantineProvider,
-  TextInput,
-  NumberInput,
-  Textarea,
-  Group,
-  Grid,
-  Modal,
-  LoadingOverlay,
-  MultiSelect,
-  Button,
-  Text,
-} from "@mantine/core";
-import axios from "axios";
-// eslint-disable-next-line import/no-unresolved
-import html2canvas from "html2canvas";
-// eslint-disable-next-line import/no-unresolved
-import JsPDF from "jspdf";
-import { host } from "../../routes/globalRoutes";
-
-function ViewBooking({ modalOpened, onClose, bookingId, bookingf }) {
-  const [formData, setFormData] = useState({
-    intenderUsername: "",
-    intenderEmail: "",
-    bookingFrom: "",
-    bookingTo: "",
-    visitorCategory: "",
-    modifiedCategory: "",
-    personCount: 1,
-    numberOfRooms: 1,
-    rooms: [],
-    purpose: "",
-    billToBeSettledBy: "",
-    remarks: "",
-    visitorName: "",
-    visitorEmail: "",
-    visitorPhone: "",
-    visitorOrganization: "",
-    visitorAddress: "",
-  });
-
-  const [availableRooms, setAvailableRooms] = useState([]);
-  const printRef = useRef();
-
-  useEffect(() => {
-    const fetchBookingData = async () => {
-      try {
-        const response = await axios.get(
-          `${host}/visitorhostel/get-booking-details/${bookingId}/`,
-        );
-        const booking = response.data;
-        setFormData({
-          intenderUsername: booking.intenderUsername,
-          intenderEmail: booking.intenderEmail,
-          bookingFrom: booking.bookingFrom,
-          bookingTo: booking.bookingTo,
-          visitorCategory: booking.visitorCategory,
-          modifiedCategory: bookingf.modifiedCategory,
-          personCount: booking.personCount,
-          numberOfRooms: booking.numberOfRooms,
-          rooms: bookingf.rooms,
-          purpose: booking.purpose,
-          billToBeSettledBy: booking.billToBeSettledBy,
-          remarks: booking.remarks,
-          visitorName: booking.visitorName,
-          visitorEmail: booking.visitorEmail,
-          visitorPhone: booking.visitorPhone,
-          visitorOrganization: booking.visitorOrganization,
-          visitorAddress: booking.visitorAddress,
-        });
-        setAvailableRooms(
-          booking.availableRooms.map((room) => room.room_number),
-        );
-      } catch (error) {
-        console.error("Error fetching booking data", error);
-      }
-    };
-
-    if (bookingId) {
-      fetchBookingData();
-    }
-  }, [bookingId, bookingf]);
-
-  const handlePrint = () => {
-    const printContent = printRef.current.innerHTML;
-    const originalContent = document.body.innerHTML;
-
-    document.body.innerHTML = printContent;
-    window.print();
-    document.body.innerHTML = originalContent;
-    window.location.reload();
-  };
-
-  const handleSaveToPDF = async () => {
-    const input = printRef.current;
-    const canvas = await html2canvas(input, { scale: 3 }); // Increased scaling
-    const imgData = canvas.toDataURL("image/png");
-    const pdf = new JsPDF("p", "mm", "a4");
-    const pdfWidth = pdf.internal.pageSize.getWidth();
-    const pdfHeight = (canvas.height * pdfWidth) / canvas.width;
-    pdf.addImage(imgData, "PNG", 10, 10, pdfWidth - 20, pdfHeight - 95);
-    pdf.save("booking_details.pdf");
-  };
-
-  return (
-    <MantineProvider theme={{ fontFamily: "Arial, sans-serif" }}>
-      <Modal
-        opened={modalOpened}
-        onClose={onClose}
-        title="IIITDMJ Visitors Hostel"
-        size="xl"
-        overlayOpacity={0.55}
-        overlayBlur={3}
-        transition="fade"
-        transitionDuration={500}
-      >
-        <LoadingOverlay overlayBlur={2} />
-        <div
-          ref={printRef}
-          className="print-content"
-          style={{ border: "2px solid #000", padding: "20px", margin: "20px" }}
-        >
-          <div>
-            <Text align="center" weight={900} size="xl" mb="xs">
-              <b>Visitors Hostel</b>
-            </Text>
-            <Text align="center" weight={700} size="md" mb="md">
-              <b>PDPM IIITDM Jabalpur</b>
-            </Text>
-            <Text align="center" weight={800} size="lg" mb="md">
-              <b>Booking for {formData.visitorName}</b>
-            </Text>
-          </div>
-          <form>
-            <Grid>
-              <Grid.Col span={12}>
-                <div
-                  style={{
-                    backgroundColor:
-                      bookingf.status === "Pending"
-                        ? "#E0E0E0"
-                        : bookingf.status === "Confirmed"
-                          ? "#dffbe0"
-                          : "#f8d7da",
-                    color:
-                      bookingf.status === "Pending"
-                        ? "#757575"
-                        : bookingf.status === "Confirmed"
-                          ? "#84b28c"
-                          : "#721c24",
-                    padding: "4px 8px",
-                    borderRadius: "4px",
-                    display: "inline-block",
-                  }}
-                >
-                  {bookingf.status}
-                </div>
-              </Grid.Col>
-              <Grid.Col span={12}>
-                <TextInput
-                  label="Username"
-                  value={formData.intenderUsername}
-                  readOnly
-                />
-              </Grid.Col>
-
-              <Grid.Col span={12}>
-                <TextInput
-                  label="Email"
-                  value={formData.intenderEmail}
-                  readOnly
-                />
-              </Grid.Col>
-
-              <Grid.Col span={6}>
-                <TextInput
-                  label="From"
-                  type="date"
-                  value={formData.bookingFrom}
-                  readOnly
-                />
-              </Grid.Col>
-
-              <Grid.Col span={6}>
-                <TextInput
-                  label="To"
-                  type="date"
-                  value={formData.bookingTo}
-                  readOnly
-                />
-              </Grid.Col>
-
-              <Grid.Col span={6}>
-                <TextInput
-                  label="Category"
-                  value={formData.visitorCategory}
-                  readOnly
-                />
-              </Grid.Col>
-
-              <Grid.Col span={6}>
-                <TextInput
-                  label="Modified Category"
-                  value={formData.modifiedCategory}
-                  readOnly
-                />
-              </Grid.Col>
-
-              <Grid.Col span={6}>
-                <NumberInput
-                  label="Number Of People"
-                  value={formData.personCount}
-                  readOnly
-                />
-              </Grid.Col>
-
-              <Grid.Col span={6}>
-                <NumberInput
-                  label="Rooms Required"
-                  value={formData.numberOfRooms}
-                  readOnly
-                />
-              </Grid.Col>
-
-              <Grid.Col span={12}>
-                <MultiSelect
-                  label="Rooms"
-                  value={formData.rooms}
-                  data={availableRooms.map((room) => ({
-                    value: room,
-                    label: room,
-                  }))}
-                  readOnly
-                />
-              </Grid.Col>
-
-              <Grid.Col span={12}>
-                <TextInput
-                  label="Purpose Of Visit"
-                  value={formData.purpose}
-                  readOnly
-                />
-              </Grid.Col>
-
-              <Grid.Col span={12}>
-                <TextInput
-                  label="Bill to be settled by"
-                  value={formData.billToBeSettledBy}
-                  readOnly
-                />
-              </Grid.Col>
-
-              <Grid.Col span={12}>
-                <Textarea label="Remarks" value={formData.remarks} readOnly />
-              </Grid.Col>
-
-              {/* <Grid.Col span={12}>
-                <TextInput
-                  label="Visitor Name"
-                  value={formData.visitorName}
-                  readOnly
-                />
-              </Grid.Col> */}
-
-              <Grid.Col span={12}>
-                <TextInput
-                  label="Visitor Email"
-                  value={formData.visitorEmail}
-                  readOnly
-                />
-              </Grid.Col>
-
-              <Grid.Col span={12}>
-                <TextInput
-                  label="Visitor Phone"
-                  value={formData.visitorPhone}
-                  readOnly
-                />
-              </Grid.Col>
-
-              <Grid.Col span={12}>
-                <TextInput
-                  label="Visitor Organization"
-                  value={formData.visitorOrganization}
-                  readOnly
-                />
-              </Grid.Col>
-
-              <Grid.Col span={12}>
-                <TextInput
-                  label="Visitor Address"
-                  value={formData.visitorAddress}
-                  readOnly
-                />
-              </Grid.Col>
-            </Grid>
-          </form>
-        </div>
-        <Group position="apart" mt="md">
-          <Button onClick={handlePrint} variant="outline" color="blue">
-            Print
-          </Button>
-          <Button onClick={handleSaveToPDF} variant="outline" color="green">
-            Save to PDF
-          </Button>
-        </Group>
-      </Modal>
-      <style>{`
-        @media print {
-          .print-only {
-            display: block;
-          }
-          .no-print {
-            display: none;
-          }
-          .print-content {
-            border: 2px solid #000;
-            padding: 20px;
-            margin: 20px;
-            page-break-inside: avoid;
-          }
-        }
-        .print-only {
-          display: none;
-        }
-      `}</style>
-    </MantineProvider>
-  );
-}
-
-ViewBooking.propTypes = {
-  modalOpened: PropTypes.bool.isRequired,
-  onClose: PropTypes.func.isRequired,
-  bookingId: PropTypes.string.isRequired,
-  bookingf: PropTypes.shape({
-    intender: PropTypes.string.isRequired,
-    email: PropTypes.string.isRequired,
-    bookingFrom: PropTypes.string.isRequired,
-    bookingTo: PropTypes.string.isRequired,
-    category: PropTypes.string.isRequired,
-    modifiedCategory: PropTypes.string,
-    rooms: PropTypes.arrayOf(PropTypes.string),
-    status: PropTypes.string.isRequired,
-  }).isRequired,
-};
-
-export default ViewBooking;
diff --git a/src/Modules/Visitors_Hostel/visitorsContent.jsx b/src/Modules/Visitors_Hostel/visitorsContent.jsx
index a7f22a508..15e78db27 100644
--- a/src/Modules/Visitors_Hostel/visitorsContent.jsx
+++ b/src/Modules/Visitors_Hostel/visitorsContent.jsx
@@ -1,15 +1,157 @@
+/**
+ * Main Visitor Hostel Module Router
+ * 
+ * Handles routing for all visitor hostel pages:
+ * - /visitors_hostel/          → Redirects to /visitors_hostel/bookings
+ * - /visitors_hostel/bookings  → Manage bookings (pending/active)
+ * - /visitors_hostel/room-availability → Check room availability
+ * - /visitors_hostel/inventory  → Manage inventory
+ * - /visitors_hostel/bills      → View and generate bills
+ * - /visitors_hostel/check-inout → Check in/out visitors
+ * 
+ * Tab Navigation: VisitorsNavbar.jsx
+ * Service Layer: services/visitorHostelApi.js (DO NOT use direct axios)
+ */
+
 import React from "react";
-// import BookingNavbars from "./navbar";
-import BookingManagement from "./VisitorsNavbar";
-// import CancellationRequest from "./cancellationRequest";
+import { Routes, Route, Navigate } from "react-router-dom";
+import { useSelector } from "react-redux";
+import VisitorsNavbar from "./VisitorsNavbar";
+import {
+  VH_ABSOLUTE_PATHS,
+  VH_INCHARGE_ONLY_ROLES,
+  VH_RELATIVE_PATHS,
+  VH_STAFF_ROLES,
+} from "../../routes/visitorsHostelRoutes";
+
+// ============================================================================
+// PAGE COMPONENT IMPORTS
+// ============================================================================
+// Import from pages/ folder as they are created during migration
+// For now, import existing components and gradually refactor into pages/
+
+// PAGE IMPORTS - properly organized
+import PendingBookingsPage from "./pages/PendingBookingsPage";
+import ActiveBookingsPage from "./pages/ActiveBookingsPage";
+import CompletedBookingsPage from "./pages/CompletedBookingsPage";
+import CancelledBookingsPage from "./pages/CancelledBookingsPage";
+import RoomAvailabilityContainer from "./components/RoomAvailabilityContainer";
+import InventoryManagementPage from "./pages/InventoryManagementPage";
+import FinancialReportsPage from "./pages/FinancialReportsPage";
+import GuidelinesPage from "./pages/GuidelinesPage";
+import InventoryManagement from "./components/InventoryManagement";
+import OverstayDashboard from "./components/OverstayDashboard";
+import OverstayMonitor from "./components/OverstayMonitor";
+import { ActionConfirmationProvider } from "./components/common/ActionConfirmationProvider";
+// ============================================================================
+// MAIN ROUTER COMPONENT
+// ============================================================================
+
+function ProtectedRoute({ allowedRoles, children }) {
+  const role = useSelector((state) => state.user.role);
+
+  if (role === undefined || role === null) {
+    return null;
+  }
+
+  if (!allowedRoles.includes(role)) {
+    return <Navigate to={VH_RELATIVE_PATHS.BOOKINGS} replace />;
+  }
+
+  return children;
+}
 
 function VisitorsContent() {
   return (
-    <>
-      {/* <div>visitorsContent</div> */}
-      <BookingManagement />
-      {/* <CancellationRequest/> */}
-    </>
+    <ActionConfirmationProvider>
+      <div className="visitors-module">
+        {/* Navigation Tabs */}
+        <VisitorsNavbar />
+
+        {/* Page Router */}
+        <Routes>
+          {/* Default redirect */}
+          <Route path={VH_RELATIVE_PATHS.ROOT} element={<Navigate to={VH_RELATIVE_PATHS.BOOKINGS} replace />} />
+
+        {/* Booking Management */}
+        <Route path={VH_RELATIVE_PATHS.BOOKINGS} element={<PendingBookingsPage listMode="bookings" />} />
+        <Route
+          path={VH_RELATIVE_PATHS.PENDING_BOOKINGS}
+          element={
+            <ProtectedRoute allowedRoles={VH_STAFF_ROLES}>
+              <PendingBookingsPage listMode="queue" />
+            </ProtectedRoute>
+          }
+        />
+        <Route path={VH_RELATIVE_PATHS.CANCELLED_BOOKINGS} element={<CancelledBookingsPage />} />
+        <Route path={VH_RELATIVE_PATHS.ACTIVE_BOOKINGS} element={<ActiveBookingsPage />} />
+        <Route path={VH_RELATIVE_PATHS.COMPLETED_BOOKINGS} element={<CompletedBookingsPage />} />
+
+        {/* Legacy Booking Aliases */}
+        <Route path={VH_RELATIVE_PATHS.PENDING_REQUESTS_LEGACY} element={<Navigate to={VH_ABSOLUTE_PATHS.PENDING_BOOKINGS} replace />} />
+        <Route path={VH_RELATIVE_PATHS.CANCEL_REQUEST_LEGACY} element={<Navigate to={VH_ABSOLUTE_PATHS.CANCELLED_BOOKINGS} replace />} />
+        <Route path={VH_RELATIVE_PATHS.ACTIVE_BOOKINGS_LEGACY} element={<Navigate to={VH_ABSOLUTE_PATHS.ACTIVE_BOOKINGS} replace />} />
+        <Route path={VH_RELATIVE_PATHS.COMPLETED_BOOKINGS_LEGACY} element={<Navigate to={VH_ABSOLUTE_PATHS.COMPLETED_BOOKINGS} replace />} />
+
+        {/* Room Management */}
+        <Route
+          path={VH_RELATIVE_PATHS.ROOM_AVAILABILITY}
+          element={
+            <ProtectedRoute allowedRoles={VH_STAFF_ROLES}>
+              <RoomAvailabilityContainer />
+            </ProtectedRoute>
+          }
+        />
+
+        {/* Inventory Management */}
+        <Route
+          path={VH_RELATIVE_PATHS.INVENTORY}
+          element={
+            <ProtectedRoute allowedRoles={VH_STAFF_ROLES}>
+              <InventoryManagementPage />
+            </ProtectedRoute>
+          }
+        />
+        <Route
+          path={VH_RELATIVE_PATHS.INVENTORY_MANAGEMENT}
+          element={
+            <ProtectedRoute allowedRoles={VH_STAFF_ROLES}>
+              <InventoryManagement />
+            </ProtectedRoute>
+          }
+        />
+
+        {/* Financial Reports */}
+        <Route
+          path={VH_RELATIVE_PATHS.BILLS}
+          element={
+            <ProtectedRoute allowedRoles={VH_INCHARGE_ONLY_ROLES}>
+              <FinancialReportsPage />
+            </ProtectedRoute>
+          }
+        />
+        <Route
+          path={VH_RELATIVE_PATHS.ACCOUNT_STATEMENTS}
+          element={
+            <ProtectedRoute allowedRoles={VH_INCHARGE_ONLY_ROLES}>
+              <FinancialReportsPage />
+            </ProtectedRoute>
+          }
+        />
+        <Route path={VH_RELATIVE_PATHS.ACCOUNT_STATEMENT_LEGACY} element={<Navigate to={VH_ABSOLUTE_PATHS.ACCOUNT_STATEMENTS} replace />} />
+
+        {/* Rules */}
+        <Route path={VH_RELATIVE_PATHS.GUIDELINES} element={<GuidelinesPage />} />
+        <Route path={VH_RELATIVE_PATHS.RULES_LEGACY} element={<Navigate to={VH_ABSOLUTE_PATHS.GUIDELINES} replace />} />
+
+        {/* Check-In/Out (placeholder - create CheckInOutPage.jsx when ready) */}
+        {/* <Route path="check-in-out" element={<CheckInOutPage />} /> */}
+
+          {/* 404 Fallback */}
+          <Route path="*" element={<Navigate to={VH_RELATIVE_PATHS.BOOKINGS} replace />} />
+        </Routes>
+      </div>
+    </ActionConfirmationProvider>
   );
 }
 
diff --git a/src/routes/visitorsHostelRoutes/index.jsx b/src/routes/visitorsHostelRoutes/index.jsx
index 69baec77d..5d1c4a1e0 100644
--- a/src/routes/visitorsHostelRoutes/index.jsx
+++ b/src/routes/visitorsHostelRoutes/index.jsx
@@ -1,18 +1,45 @@
-// export const host = "http://127.0.0.1:8000";
-import { host } from "../globalRoutes";
+const VH_BASE_PATH = "/visitors_hostel";
 
-export const fetchAvailableRoomsRoute = `${host}/visitorhostel/room_availabity_new/`;
-export const confirmBookingRoute = `${host}/visitorhostel/confirm-booking-new/`;
-export const fetchCompletedBookingsRoute = `${host}/visitorhostel/completed-bookings/`;
-export const fetchCancelledBookingsRoute = `${host}/visitorhostel/get-inactive-bookings/`;
-export const fetchBookingsRoute = `${host}/visitorhostel/get-booking-requests/`;
-export const requestBookingRoute = `${host}/visitorhostel/request-booking/`;
-export const addInventoryRoute = `${host}/visitorhostel/api/inventory_add/`;
-export const getActiveBookingsRoute = `${host}/visitorhostel/get-active-bookings/`;
-export const cancelBookingRoute = `${host}/visitorhostel/cancel-booking/`;
-export const fetchIncomeDataRoute = `${host}/visitorhostel/accounts-income/`;
-export const addItemsRoute = `${host}/visitorhostel/api/inventory_add/`;
-export const fetchInventorydataRoute = `${host}/visitorhostel/api/inventory_list/`;
-export const fetchPartialBookingdataRoute = `${host}/visitorhostel/check-partial-booking/`;
-export const checkInBookingRoute = `${host}/visitorhostel/check-in/`;
-export const checkOutBookingRoute = `${host}/visitorhostel/check-out/`;
+export const VH_ROLES = {
+  INCHARGE: "VhIncharge",
+  CARETAKER: "VhCaretaker",
+};
+
+export const VH_STAFF_ROLES = [VH_ROLES.INCHARGE, VH_ROLES.CARETAKER];
+export const VH_INCHARGE_ONLY_ROLES = [VH_ROLES.INCHARGE];
+
+export const VH_RELATIVE_PATHS = {
+  ROOT: "/",
+  BOOKINGS: "bookings",
+  PENDING_BOOKINGS: "pending-bookings",
+  CANCELLED_BOOKINGS: "cancelled-bookings",
+  ACTIVE_BOOKINGS: "active-bookings",
+  COMPLETED_BOOKINGS: "completed-bookings",
+  ROOM_AVAILABILITY: "room-availability",
+  INVENTORY: "inventory",
+  INVENTORY_MANAGEMENT: "inventory-management",
+  BILLS: "bills",
+  ACCOUNT_STATEMENTS: "account-statements",
+  GUIDELINES: "guidelines",
+  PENDING_REQUESTS_LEGACY: "pending_requests",
+  CANCEL_REQUEST_LEGACY: "cancel_request",
+  ACTIVE_BOOKINGS_LEGACY: "active_bookings",
+  COMPLETED_BOOKINGS_LEGACY: "completed_bookings",
+  ACCOUNT_STATEMENT_LEGACY: "account-statement",
+  RULES_LEGACY: "rules",
+};
+
+export const VH_ABSOLUTE_PATHS = {
+  ROOT: VH_BASE_PATH,
+  BOOKINGS: `${VH_BASE_PATH}/${VH_RELATIVE_PATHS.BOOKINGS}`,
+  PENDING_BOOKINGS: `${VH_BASE_PATH}/${VH_RELATIVE_PATHS.PENDING_BOOKINGS}`,
+  CANCELLED_BOOKINGS: `${VH_BASE_PATH}/${VH_RELATIVE_PATHS.CANCELLED_BOOKINGS}`,
+  ACTIVE_BOOKINGS: `${VH_BASE_PATH}/${VH_RELATIVE_PATHS.ACTIVE_BOOKINGS}`,
+  COMPLETED_BOOKINGS: `${VH_BASE_PATH}/${VH_RELATIVE_PATHS.COMPLETED_BOOKINGS}`,
+  ROOM_AVAILABILITY: `${VH_BASE_PATH}/${VH_RELATIVE_PATHS.ROOM_AVAILABILITY}`,
+  INVENTORY: `${VH_BASE_PATH}/${VH_RELATIVE_PATHS.INVENTORY}`,
+  INVENTORY_MANAGEMENT: `${VH_BASE_PATH}/${VH_RELATIVE_PATHS.INVENTORY_MANAGEMENT}`,
+  BILLS: `${VH_BASE_PATH}/${VH_RELATIVE_PATHS.BILLS}`,
+  ACCOUNT_STATEMENTS: `${VH_BASE_PATH}/${VH_RELATIVE_PATHS.ACCOUNT_STATEMENTS}`,
+  GUIDELINES: `${VH_BASE_PATH}/${VH_RELATIVE_PATHS.GUIDELINES}`,
+};
\ No newline at end of file