diff --git a/beveren_fsm/field_service_management/api/schedule.py b/beveren_fsm/field_service_management/api/schedule.py
index 177f495..1bf7d60 100644
--- a/beveren_fsm/field_service_management/api/schedule.py
+++ b/beveren_fsm/field_service_management/api/schedule.py
@@ -3,6 +3,28 @@
 import frappe
 
 
+@frappe.whitelist()
+def get_unassigned_service_orders(limit=50):
+	filters = {"docstatus": 1}
+	assigned_orders = frappe.get_all(
+		"Service Appointment",
+		filters={"service_order": ["is", "set"], "docstatus": ["!=", 2]},
+		pluck="service_order",
+		limit_page_length=0,
+	)
+	if assigned_orders:
+		filters["name"] = ["not in", assigned_orders]
+
+	orders = frappe.get_all(
+		"Service Order",
+		fields=["name", "customer", "priority", "posting_date", "status", "type"],
+		filters=filters,
+		order_by="posting_date desc",
+		limit_page_length=limit,
+	)
+	return orders
+
+
 @frappe.whitelist()
 def create_appointment_from_api(
 	posting_date,
diff --git a/beveren_fsm/field_service_management/api/service_appointment.py b/beveren_fsm/field_service_management/api/service_appointment.py
index 033c7ea..c7e861b 100644
--- a/beveren_fsm/field_service_management/api/service_appointment.py
+++ b/beveren_fsm/field_service_management/api/service_appointment.py
@@ -59,7 +59,7 @@ def get_appointments(
 		"Service Appointment",
 		filters=filters,
 		fields=requested_fields,
-		order_by="scheduled_start_datetime asc",
+		order_by="scheduled_start_datetime desc",
 		limit_page_length=limit_page_length if limit_page_length > 0 else None,
 	)
 
diff --git a/beveren_fsm/field_service_management/api/service_request.py b/beveren_fsm/field_service_management/api/service_request.py
new file mode 100644
index 0000000..e85b1b4
--- /dev/null
+++ b/beveren_fsm/field_service_management/api/service_request.py
@@ -0,0 +1,77 @@
+import frappe
+from frappe.utils import getdate
+
+
+@frappe.whitelist()
+def get_service_requests(
+	status=None,
+	start_date=None,
+	end_date=None,
+	search=None,
+	limit_page_length: int | None = 50,
+):
+	filters = {"docstatus": ["!=", 2]}
+
+	if status and status != "all":
+		filters["status"] = status
+
+	if start_date and end_date:
+		filters["posting_date"] = ["between", [getdate(start_date), getdate(end_date)]]
+	elif start_date:
+		filters["posting_date"] = [">=", getdate(start_date)]
+	elif end_date:
+		filters["posting_date"] = ["<=", getdate(end_date)]
+
+	or_filters = []
+	if search:
+		search_term = f"%{search.strip()}%"
+		or_filters = [
+			["Service Request", "name", "like", search_term],
+			["Service Request", "customer", "like", search_term],
+			["Service Request", "serial_no", "like", search_term],
+			["Service Request", "item_code", "like", search_term],
+		]
+
+	fields = [
+		"name",
+		"subject",
+		"customer",
+		"status",
+		"posting_date",
+		"due_date",
+		"serial_no",
+		"item_code",
+		"item_name",
+		"current_product_location",
+		"description",
+	]
+
+	limit = int(limit_page_length) if limit_page_length else None
+
+	requests = frappe.get_all(
+		"Service Request",
+		filters=filters,
+		or_filters=or_filters,
+		fields=fields,
+		order_by="posting_date desc",
+		limit_page_length=limit,
+	)
+
+	results = []
+	for req in requests:
+		doc = frappe.get_doc("Service Request", req.name)
+		req["product_movement"] = [
+			{
+				"name": movement.name,
+				"movement_type": movement.movement_type,
+				"destination": movement.destination,
+				"movement_date": movement.movement_date,
+				"linked_document_type": movement.linked_document_type,
+				"linked_document": movement.linked_document,
+				"handled_by": movement.handled_by,
+			}
+			for movement in doc.product_movement
+		]
+		results.append(req)
+
+	return results
diff --git a/beveren_fsm/field_service_management/doctype/product_movement/product_movement.json b/beveren_fsm/field_service_management/doctype/product_movement/product_movement.json
index 3f7255f..ba4e42c 100644
--- a/beveren_fsm/field_service_management/doctype/product_movement/product_movement.json
+++ b/beveren_fsm/field_service_management/doctype/product_movement/product_movement.json
@@ -78,6 +78,8 @@
    "fetch_from": "movement_type.destination",
    "fieldname": "destination",
    "fieldtype": "Data",
+   "in_list_view": 1,
+   "in_standard_filter": 1,
    "label": "Destination"
   }
  ],
@@ -85,7 +87,7 @@
  "index_web_pages_for_search": 1,
  "istable": 1,
  "links": [],
- "modified": "2025-11-12 04:12:53.341700",
+ "modified": "2025-11-17 04:21:43.163670",
  "modified_by": "Administrator",
  "module": "Field Service Management",
  "name": "Product Movement",
diff --git a/beveren_fsm/field_service_management/doctype/service_order/service_order.json b/beveren_fsm/field_service_management/doctype/service_order/service_order.json
index 0d85a86..fde64e1 100644
--- a/beveren_fsm/field_service_management/doctype/service_order/service_order.json
+++ b/beveren_fsm/field_service_management/doctype/service_order/service_order.json
@@ -774,7 +774,8 @@
   {
    "fieldname": "service_total",
    "fieldtype": "Currency",
-   "label": "Service Total"
+   "label": "Service Total",
+   "read_only": 1
   },
   {
    "default": "0",
@@ -796,7 +797,8 @@
   {
    "fieldname": "spareparts_total",
    "fieldtype": "Currency",
-   "label": "SpareParts Total"
+   "label": "SpareParts Total",
+   "read_only": 1
   },
   {
    "allow_on_submit": 1,
@@ -819,7 +821,7 @@
    "link_fieldname": "custom_reference_service_document"
   }
  ],
- "modified": "2025-11-12 03:31:42.698792",
+ "modified": "2025-11-17 04:08:15.600873",
  "modified_by": "Administrator",
  "module": "Field Service Management",
  "name": "Service Order",
diff --git a/beveren_fsm/field_service_management/doctype/service_order/service_order.py b/beveren_fsm/field_service_management/doctype/service_order/service_order.py
index e3fef51..3d905aa 100644
--- a/beveren_fsm/field_service_management/doctype/service_order/service_order.py
+++ b/beveren_fsm/field_service_management/doctype/service_order/service_order.py
@@ -8,8 +8,8 @@
 from frappe.utils import flt, today
 
 LOCATION_STATUS_MAP = {
-	"delivered to customer": "Completed",
-	"deliver to customer": "Completed",  # fallback for legacy value
+	"delivered to customer": "Review",
+	"deliver to customer": "Review",  # fallback for legacy value
 	"receive from vendor": "In Progress",
 	"receive from customer": "In Progress",
 	"received from customer": "In Progress",
diff --git a/beveren_fsm/field_service_management/doctype/service_request/service_request.json b/beveren_fsm/field_service_management/doctype/service_request/service_request.json
index 555ab68..d607288 100644
--- a/beveren_fsm/field_service_management/doctype/service_request/service_request.json
+++ b/beveren_fsm/field_service_management/doctype/service_request/service_request.json
@@ -310,6 +310,7 @@
    "label": "Warranty Expiry Date"
   },
   {
+   "depends_on": "amc_contract",
    "fetch_from": "serial_no.amc_expiry_date",
    "fetch_if_empty": 1,
    "fieldname": "amc_expiry_date",
@@ -335,6 +336,7 @@
    "fieldname": "repair_vendor",
    "fieldtype": "Link",
    "label": "Repair Vendor",
+   "no_copy": 1,
    "options": "Supplier"
   },
   {
@@ -343,6 +345,7 @@
    "fieldname": "current_product_location",
    "fieldtype": "Link",
    "label": "Current Product Location",
+   "no_copy": 1,
    "options": "Product Location"
   },
   {
@@ -355,6 +358,7 @@
    "fieldname": "product_movement",
    "fieldtype": "Table",
    "label": "Product Movement",
+   "no_copy": 1,
    "options": "Product Movement",
    "read_only": 1
   }
@@ -371,7 +375,7 @@
    "link_fieldname": "service_request"
   }
  ],
- "modified": "2025-11-17 03:13:18.909917",
+ "modified": "2025-11-17 04:17:34.797562",
  "modified_by": "Administrator",
  "module": "Field Service Management",
  "name": "Service Request",
diff --git a/beveren_fsm/field_service_management/page/__init__.py b/beveren_fsm/field_service_management/page/__init__.py
deleted file mode 100644
index e69de29..0000000
diff --git a/beveren_fsm/field_service_management/page/dispatch/__init__.py b/beveren_fsm/field_service_management/page/dispatch/__init__.py
deleted file mode 100644
index 2d638b2..0000000
--- a/beveren_fsm/field_service_management/page/dispatch/__init__.py
+++ /dev/null
@@ -1,2 +0,0 @@
-def get_context(context):
-	pass
diff --git a/beveren_fsm/field_service_management/page/dispatch/dispatch.css b/beveren_fsm/field_service_management/page/dispatch/dispatch.css
deleted file mode 100644
index 4c26eab..0000000
--- a/beveren_fsm/field_service_management/page/dispatch/dispatch.css
+++ /dev/null
@@ -1,441 +0,0 @@
-
-/* Full height layout */
-html, body {
-    height: 100%;
-    margin: 0;
-    padding: 0;
-}
-
-.dispatch-page {
-    font-family: "Open Sans", "Roboto", "Helvetica Neue", Arial, sans-serif;
-    background-color: #f5f7fa;
-    color: #444;
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-}
-
-/* Navbar */
-.dispatch-navbar {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background-color: #fff;
-    border-bottom: 1px solid #e0e0e0;
-    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
-    height: 56px;
-    padding: 0 1rem;
-    flex-shrink: 0;
-}
-
-.sidebar-toggle-btn {
-    background: transparent;
-    border: none;
-    color: #666;
-    font-size: 1.2rem;
-    cursor: pointer;
-    padding: 6px 8px;
-    border-radius: 4px;
-    transition: background-color 0.2s, color 0.2s;
-}
-
-.sidebar-toggle-btn:hover {
-    background-color: #e8f2ff;
-    color: #0080ff;
-}
-
-.nav-view-list {
-    list-style: none;
-    display: flex;
-    margin: 0;
-    padding: 0;
-}
-
-.nav-view-list li {
-    margin-left: 0.75rem;
-}
-
-.nav-view-btn {
-    background-color: transparent;
-    border: none;
-    font-weight: 500;
-    padding: 8px 12px;
-    border-radius: 4px;
-    color: #555;
-    cursor: pointer;
-    transition: background-color 0.2s, color 0.2s, border-bottom 0.2s;
-    outline: none;
-    font-size: 0.95rem;
-}
-
-.nav-view-btn:hover {
-    background-color: #e8f2ff;
-    color: #0080ff;
-}
-
-.nav-view-btn.active {
-    color: #0080ff;
-    border-bottom: 2px solid #0080ff;
-}
-
-/* Body layout */
-.dispatch-body {
-    flex: 1;
-    display: flex;
-    height: calc(100% - 56px);
-    overflow: hidden;
-}
-
-/* Sidebar with its own scroller */
-.dispatch-sidebar {
-    width: 300px;
-    background-color: #fff;
-    border-right: 1px solid #e0e0e0;
-    max-height: calc(100vh - 56px);
-    overflow-y: auto;
-    transition: width 0.3s ease, padding 0.3s ease;
-    position: relative;
-    box-shadow: 0 0 2px rgba(0, 0, 0, 0.06);
-    flex-shrink: 0;
-    padding: 0 0.75rem;
-}
-
-.dispatch-sidebar.collapsed {
-    width: 0;
-    padding: 0;
-}
-
-/* Sidebar header with more padding */
-.sidebar-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0.75rem 0;
-    border-bottom: 1px solid #eee;
-    position: sticky;
-    top: 0;
-    background: #fff;
-    z-index: 10;
-}
-
-.sidebar-heading-group {
-    display: flex;
-    align-items: center;
-}
-
-.sidebar-heading {
-    margin: 0;
-    font-size: 1rem;
-    font-weight: 600;
-    color: #333;
-    display: inline-block;
-}
-
-.sidebar-caret {
-    margin-left: 0.5rem;
-    cursor: pointer;
-    color: #666;
-    transition: color 0.2s;
-}
-
-.sidebar-caret:hover {
-    color: #0080ff;
-}
-
-.sidebar-icons {
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-}
-
-.sidebar-icon {
-    background: #fff;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    padding: 4px 6px;
-    cursor: pointer;
-    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
-}
-
-.sidebar-icon i {
-    font-size: 1rem;
-    color: #666;
-}
-
-.sidebar-icon:hover {
-    background-color: #e8f2ff;
-    border-color: #0080ff;
-    color: #0080ff;
-}
-
-/* Dropdown */
-.sidebar-dropdown {
-    position: absolute;
-    top: 60px;
-    left: 0;
-    right: 0;
-    background-color: #fff;
-    border: 1px solid #ddd;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-    padding: 0.75rem;
-    display: none;
-    z-index: 100;
-}
-
-.sidebar-dropdown.open {
-    display: block;
-}
-
-.sidebar-dropdown-tabs {
-    display: flex;
-    gap: 1rem;
-    margin-bottom: 0.5rem;
-}
-
-.dropdown-tab {
-    font-weight: 500;
-    cursor: pointer;
-    color: #555;
-    position: relative;
-}
-
-.dropdown-tab.active {
-    color: #0080ff;
-    border-bottom: 2px solid #0080ff;
-}
-
-.sidebar-dropdown-search {
-    margin-bottom: 0.75rem;
-}
-
-.sidebar-dropdown-search input {
-    width: 100%;
-    padding: 6px 8px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    font-size: 0.9rem;
-}
-
-.sidebar-inline-search {
-    display: none;
-    margin: 0.75rem 0;
-}
-
-.sidebar-inline-search.visible {
-    display: block;
-}
-
-.sidebar-inline-search input {
-    width: 100%;
-    padding: 6px 8px;
-    border: 1px solid #ddd;
-    border-radius: 4px;
-    font-size: 0.9rem;
-}
-
-/* Sidebar list items */
-.sidebar-list {
-    list-style: none;
-    margin: 0.5rem 0 0 0;
-    padding: 0;
-}
-
-.sidebar-list li {
-    margin-bottom: 0.5rem;
-}
-
-.sidebar-list li a {
-    display: block;
-    color: #444;
-    text-decoration: none;
-    padding: 6px 8px;
-    border-radius: 4px;
-    transition: background-color 0.2s;
-}
-
-.sidebar-list li a:hover {
-    background-color: #f0f4f8;
-    color: #0080ff;
-}
-
-.small-text {
-    font-size: 0.85rem;
-    color: #777;
-}
-
-/* Pill for priority/status, smaller and rounder */
-.pill {
-    display: inline-block;
-    color: #fff;
-    padding: 2px 6px;
-    border-radius: 12px;
-    font-size: 0.75rem;
-    margin-top: 2px;
-}
-
-/* Main content */
-.dispatch-content {
-    flex: 1;
-    padding: 1rem;
-    overflow-y: auto;
-    display: flex;
-    flex-direction: column;
-    min-width: 0;
-}
-
-.dispatch-view-content {
-    background-color: #fff;
-    border: 1px solid #e0e0e0;
-    border-radius: 6px;
-    flex: 1;
-    padding: 1.5rem;
-    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.04);
-}
-
-.placeholder-content {
-    text-align: center;
-    margin-top: 2rem;
-}
-
-/* The tooltip for right-click on sidebar items */
-.sidebar-tooltip {
-    position: absolute;
-    background: #ffffff;
-    border: 1px solid #ccc;
-    border-radius: 6px;
-    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
-    padding: 0.75rem;
-    width: 300px;
-    display: none;
-    z-index: 9999;
-}
-
-.tooltip-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 0.5rem;
-}
-
-.tooltip-buttons .btn {
-    margin-left: 4px;
-    padding: 4px 6px;
-    font-size: 0.75rem;
-}
-
-.tooltip-body p {
-    margin: 0.25rem 0;
-    font-size: 0.85rem;
-}
-
-/* Gantt view */
-.gantt-view .schedule-grid-container {
-    position: relative;
-    width: 100%;
-	overflow-x: auto;
-	overflow-y: hidden;
-}
-
-/* Timeline header, time labels, etc. */
-.gantt-view .timeline-header {
-    position: relative;
-    margin-left: 20%;
-    width: 80%;
-    height: 40px;
-    border-bottom: 1px solid #ddd;
-}
-
-.gantt-view .time-label {
-    position: absolute;
-    transform: translateX(-50%);
-    font-size: 12px;
-    color: #555;
-}
-
-/* Technician rows */
-.gantt-view .technician-row {
-    display: flex;
-    height: 50px;
-    border-bottom: 1px solid #ddd;
-}
-
-.gantt-view .technician-name {
-    width: 20%;
-    background: #f0f0f0;
-    text-align: center;
-    line-height: 50px;
-    border-right: 1px solid #ddd;
-}
-
-/* Timeline cell */
-.gantt-view .timeline-cell {
-    width: 80%;
-    position: relative;
-}
-
-/* Timeline background */
-.gantt-view .timeline-background {
-    position: absolute;
-    left: 20%;
-    top: 40px;
-    width: 80%;
-    bottom: 0;
-    pointer-events: none;
-}
-
-/* Schedule event styling */
-.gantt-view .schedule-event {
-    background: #007bff;
-    color: white;
-    padding: 2px;
-    border-radius: 3px;
-    cursor: grab;
-    overflow: hidden;
-    font-size: 10px;
-    text-align: center;
-    z-index: 10;
-    opacity: 0.9;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    top: 0;
-    height: 100%;
-}
-
-/* For resizing and dragging */
-.gantt-view .schedule-event.dragging {
-    border: 2px dashed #ff9900;
-    opacity: 0.7;
-}
-
-.gantt-view .resize-handle {
-    position: absolute;
-    background: rgba(0, 0, 0, 0.3);
-    top: 0;
-    bottom: 0;
-    cursor: ew-resize;
-    z-index: 20;
-    width: 3px;
-}
-
-.gantt-view .left-handle {
-    left: 0;
-}
-
-.gantt-view .right-handle {
-    right: 0;
-}
-
-/* Date table styling */
-.gantt-view .selected-date {
-    background-color: #343a40 !important;
-    color: white !important;
-    font-weight: bold;
-    border-radius: 4px;
-}
-
-.gantt-view #date-table th {
-    text-align: center;
-    vertical-align: middle;
-}
diff --git a/beveren_fsm/field_service_management/page/dispatch/dispatch.html b/beveren_fsm/field_service_management/page/dispatch/dispatch.html
deleted file mode 100644
index 71a2af8..0000000
--- a/beveren_fsm/field_service_management/page/dispatch/dispatch.html
+++ /dev/null
@@ -1,74 +0,0 @@
-<div class="dispatch-page">
-	<!-- Top Navbar -->
-	<nav class="dispatch-navbar">
-		<div class="nav-left">
-			<button class="sidebar-toggle-btn" id="sidebar-toggle-btn" title="Toggle Sidebar">
-				<i class="fa fa-angle-double-left"></i>
-			</button>
-		</div>
-		<div class="nav-right">
-			<ul class="nav-view-list">
-				<li><button class="nav-view-btn active" id="btn-gantt">Gantt</button></li>
-				<li><button class="nav-view-btn" id="btn-calendar">Calendar</button></li>
-				<li><button class="nav-view-btn" id="btn-map">Map</button></li>
-			</ul>
-		</div>
-	</nav>
-
-	<div class="dispatch-body">
-		<!-- Sidebar -->
-		<aside class="dispatch-sidebar" id="dispatch-sidebar">
-			<div class="sidebar-header">
-				<div class="sidebar-heading-group">
-					<strong class="sidebar-heading" id="sidebar-selected-mode">Service Order</strong>
-					<i class="fa fa-caret-down sidebar-caret" id="sidebar-dropdown-toggle"></i>
-				</div>
-				<div class="sidebar-icons" id="sidebar-header-icons">
-					<!-- Always show Add icon now -->
-					<button class="sidebar-icon" id="sidebar-add-icon" title="Add New">
-						<i class="fa fa-plus"></i>
-					</button>
-
-					<button class="sidebar-icon" id="sidebar-search-toggle" title="Search">
-						<i class="fa fa-search"></i>
-					</button>
-					<button class="sidebar-icon" id="sidebar-refresh" title="Refresh">
-						<i class="fa fa-refresh"></i>
-					</button>
-				</div>
-			</div>
-
-			<div class="sidebar-dropdown" id="sidebar-dropdown">
-				<div class="sidebar-dropdown-tabs">
-					<span class="dropdown-tab active" data-mode="Service Order">Service Order</span>
-					<span class="dropdown-tab" data-mode="Service Appointment">Service Appointment</span>
-				</div>
-				<div class="sidebar-dropdown-search">
-					<input type="text" id="dropdown-search-input" placeholder="Search..." />
-				</div>
-				<div class="sidebar-dropdown-list" id="dropdown-list"></div>
-			</div>
-
-			<div class="sidebar-inline-search" id="sidebar-inline-search">
-				<input type="text" placeholder="Search Service Orders..." id="sidebar-search-input" />
-			</div>
-
-			<ul id="sidebar-list" class="sidebar-list">
-				<!-- Populated by JS -->
-			</ul>
-		</aside>
-
-		<!-- Main Content -->
-		<main class="dispatch-content">
-			<div id="view-content" class="dispatch-view-content">
-				<div class="placeholder-content">
-					<h3>Welcome to Dispatch</h3>
-					<p>Select a view (Gantt, Calendar, or Map) to get started.</p>
-				</div>
-			</div>
-		</main>
-	</div>
-
-	<!-- Right-click tooltip container -->
-	<div id="sidebar-tooltip" class="sidebar-tooltip"></div>
-</div>
diff --git a/beveren_fsm/field_service_management/page/dispatch/dispatch.js b/beveren_fsm/field_service_management/page/dispatch/dispatch.js
deleted file mode 100644
index 4db2b2b..0000000
--- a/beveren_fsm/field_service_management/page/dispatch/dispatch.js
+++ /dev/null
@@ -1,549 +0,0 @@
-frappe.pages["dispatch"].on_page_load = function (wrapper) {
-  frappe.ui.make_app_page({
-    parent: wrapper,
-    single_column: true,
-  });
-
-  $(wrapper).html(frappe.render_template("dispatch"));
-
-  frappe.require(
-    [
-      "assets/beveren_fsm/js/dispatch/gantt.js",
-      // Calendar file
-      // Map file
-    ],
-    () => {
-      new DispatchController();
-    }
-  );
-};
-
-class DispatchController {
-  constructor() {
-    this.sidebarMode = "Service Order";
-    this.sidebarCollapsed = false;
-    this.currentView = "gantt";
-    this.cachedDocs = {};
-
-    // Flags for view initialization
-    this.viewInitialized = {
-      gantt: false,
-      calendar: false,
-      map: false,
-    };
-
-    this.setup_navbar_buttons();
-    this.setup_sidebar_header_events();
-
-    // Create containers for each view
-    this.createViewContainers();
-
-    // Load sidebar items for default mode
-    this.loadSidebarItems("Service Order");
-
-    // Initialize default view (Gantt)
-    this.switchView("gantt");
-  }
-
-  createViewContainers() {
-    // Create and append containers for each view; they all reside in #view-content.
-    const viewContent = $("#view-content");
-    viewContent.empty();
-
-    this.$ganttView = $(`
-            <div id="gantt-view" class="view-container gantt-view" style="display: none;">
-                <div id="gantt-page-body"></div>
-            </div>
-        `);
-
-    this.$calendarView = $(`
-            <div id="calendar-view" class="view-container" style="display: none;">
-                <div id="calendar-page-body"></div>
-            </div>
-        `);
-    this.$mapView = $(`
-            <div id="map-view" class="view-container" style="display: none;">
-                <div class="map-placeholder">
-                    <h3>Map View</h3>
-                    <p>Map UI goes here.</p>
-                </div>
-            </div>
-        `);
-
-    viewContent.append(this.$ganttView, this.$calendarView, this.$mapView);
-  }
-
-  // NAVBAR
-  setup_navbar_buttons() {
-    $("#sidebar-toggle-btn").on("click", () => {
-      this.toggleSidebar();
-    });
-    $("#btn-gantt").on("click", () => {
-      this.switchView("gantt");
-    });
-    $("#btn-calendar").on("click", () => {
-      this.switchView("calendar");
-    });
-    $("#btn-map").on("click", () => {
-      this.switchView("map");
-    });
-  }
-
-  toggleSidebar() {
-    this.sidebarCollapsed = !this.sidebarCollapsed;
-    const $sidebar = $("#dispatch-sidebar");
-    if (this.sidebarCollapsed) {
-      $sidebar.addClass("collapsed");
-      $("#sidebar-toggle-btn i")
-        .removeClass("fa-angle-double-left")
-        .addClass("fa-angle-double-right");
-    } else {
-      $sidebar.removeClass("collapsed");
-      $("#sidebar-toggle-btn i")
-        .removeClass("fa-angle-double-right")
-        .addClass("fa-angle-double-left");
-    }
-  }
-
-  // Instead of re-building views on every switch, we hide all and then show the target view.
-  switchView(view) {
-    $(".nav-view-btn").removeClass("active");
-    $(`#btn-${view}`).addClass("active");
-    this.currentView = view;
-
-    // Hide all views
-    $(".view-container").hide();
-
-    if (view === "gantt") {
-      this.$ganttView.show();
-      if (!this.viewInitialized.gantt) {
-        // Load Gantt from separate file (gantt.js)
-        init_gantt("#gantt-page-body");
-        this.viewInitialized.gantt = true;
-      }
-    } else if (view === "calendar") {
-      this.$calendarView.show();
-      if (!this.viewInitialized.calendar) {
-        init_calendar_code("#calendar-page-body");
-        this.viewInitialized.calendar = true;
-      }
-    } else if (view === "map") {
-      this.$mapView.show();
-      if (!this.viewInitialized.map) {
-        // Initialize your Map view if needed.
-        this.viewInitialized.map = true;
-      }
-    }
-  }
-
-  // SIDEBAR and other methods below remain largely unchanged...
-  setup_sidebar_header_events() {
-    $("#sidebar-dropdown-toggle").on("click", () => {
-      $("#sidebar-dropdown").toggleClass("open");
-    });
-
-    $("#sidebar-add-icon").on("click", () => {
-      this.open_create_schedule_dialog();
-    });
-
-    $("#sidebar-search-toggle").on("click", () => {
-      $("#sidebar-inline-search").toggleClass("visible");
-      if ($("#sidebar-inline-search").hasClass("visible")) {
-        $("#sidebar-search-input").focus();
-      }
-    });
-
-    $("#sidebar-refresh").on("click", () => {
-      this.loadSidebarItems(this.sidebarMode, true);
-    });
-
-    $(".dropdown-tab").on("click", (e) => {
-      let mode = $(e.currentTarget).data("mode");
-      this.switchSidebarMode(mode);
-
-      $(".dropdown-tab").removeClass("active");
-      $(e.currentTarget).addClass("active");
-    });
-
-    $("#sidebar-search-input").on("keyup", () => {
-      let val = $("#sidebar-search-input").val().toLowerCase();
-      this.filterSidebarDocs(val);
-    });
-  }
-
-  switchSidebarMode(mode) {
-    this.sidebarMode = mode;
-    $("#sidebar-selected-mode").text(mode);
-    $("#sidebar-dropdown").removeClass("open");
-    this.loadSidebarItems(mode, true);
-
-    let placeholderText =
-      mode === "Service Order"
-        ? "Search Service Orders..."
-        : "Search Service Appointments...";
-    $("#sidebar-search-input").attr("placeholder", placeholderText);
-  }
-
-  loadSidebarItems(mode, forceRefresh = false) {
-    let $sidebarList = $("#sidebar-list");
-    $sidebarList.empty();
-
-    frappe.call({
-      method:
-        "beveren_fsm.field_service_management.page.dispatch.dispatch.get_sidebar_data",
-      args: { mode },
-      callback: (r) => {
-        if (!r.exc) {
-          this.cachedDocs[mode] = r.message || [];
-          this.renderSidebarDocs(this.cachedDocs[mode], mode);
-        }
-      },
-    });
-  }
-
-  renderSidebarDocs(docs, mode) {
-    let $sidebarList = $("#sidebar-list");
-    $sidebarList.empty();
-
-    docs.forEach((doc) => {
-      let pillHtml = this.getPillHtml(doc, mode);
-      let moreInfoHtml = this.getMoreInfoHtml(doc, mode);
-
-      let li = $(`
-                <li class="sidebar-doc-item"
-                    data-doc='${JSON.stringify(doc)}'
-                    data-mode="${mode}">
-                    <a href="#">
-                        <strong>${doc.name}</strong><br>
-                        ${moreInfoHtml}
-                        ${pillHtml}
-                    </a>
-                </li>
-            `);
-      $sidebarList.append(li);
-    });
-
-    this.setupSidebarRightClick();
-  }
-
-  filterSidebarDocs(searchVal) {
-    let filtered = (this.cachedDocs[this.sidebarMode] || []).filter((doc) => {
-      let docStr = JSON.stringify(doc).toLowerCase();
-      return docStr.includes(searchVal);
-    });
-    this.renderSidebarDocs(filtered, this.sidebarMode);
-  }
-
-  setupSidebarRightClick() {
-    $(document)
-      .off("click.sidebarTooltip")
-      .on("click.sidebarTooltip", () => {
-        $("#sidebar-tooltip").hide();
-      });
-
-    $(".sidebar-doc-item")
-      .off("contextmenu")
-      .on("contextmenu", (e) => {
-        e.preventDefault();
-        let $li = $(e.currentTarget);
-        let docStr = $li.attr("data-doc");
-        let doc = JSON.parse(docStr || "{}");
-        let mode = $li.attr("data-mode");
-        this.showSidebarTooltip(e.pageX, e.pageY, doc, mode);
-      });
-  }
-
-  getPillHtml(doc, mode) {
-    if (mode === "Service Order") {
-      let priority = (doc.priority || "").toLowerCase();
-      let color = "#6c757d";
-      if (priority === "high") color = "#dc3545";
-      if (priority === "medium") color = "#ffc107";
-      if (priority === "low") color = "#28a745";
-      return `<span class="pill" style="background-color: ${color}; border-radius: 12px; font-size: 0.75rem;">${
-        doc.priority || ""
-      }</span>`;
-    } else {
-      let status = (doc.status || "").toLowerCase();
-      let color = "#6c757d";
-      if (status === "scheduled") color = "#007bff";
-      if (status === "in progress") color = "#ffc107";
-      if (status === "completed") color = "#28a745";
-      if (status === "cancelled") color = "#dc3545";
-      if (status === "dispatched") color = "#17a2b8";
-      return `<span class="pill" style="background-color: ${color}; border-radius: 12px; font-size: 0.75rem;">${
-        doc.status || ""
-      }</span>`;
-    }
-  }
-
-  getMoreInfoHtml(doc, mode) {
-    if (mode === "Service Order") {
-      let date = doc.posting_date || "";
-      let customer = doc.customer || "";
-      return `<span class="small-text" style="font-size: 0.8rem;">${date} - ${customer}</span><br>`;
-    } else {
-      let date = doc.posting_date || "";
-      let start = doc.scheduled_start_datetime
-        ? doc.scheduled_start_datetime.split(" ")[1]
-        : "";
-      let end = doc.scheduled_finish_datetime
-        ? doc.scheduled_finish_datetime.split(" ")[1]
-        : "";
-      return `<span class="small-text" style="font-size: 0.8rem;">${date} - ${start} to ${end}</span><br>`;
-    }
-  }
-
-  showSidebarTooltip(x, y, doc, mode) {
-    let tooltip = $("#sidebar-tooltip");
-    tooltip.empty().show();
-
-    let itemsIcon = `<i class="fa fa-list"></i>`;
-    let techsIcon = `<i class="fa fa-users"></i>`;
-    let addIcon = `<i class="fa fa-plus"></i>`;
-
-    let itemsBtn = `<button class="btn btn-sm btn-secondary" data-action="view-items" title="View Items">${itemsIcon}</button>`;
-    let techsBtn =
-      mode === "Service Appointment"
-        ? `<button class="btn btn-sm btn-info" data-action="view-techs" title="View Technicians">${techsIcon}</button>`
-        : ``;
-    let addBtn = ``;
-    if (mode === "Service Order") {
-      if ((doc.status || "").toLowerCase() !== "completed") {
-        addBtn = `<button class="btn btn-sm btn-success" data-action="add-item" title="Add">${addIcon}</button>`;
-      }
-    } else {
-      addBtn = `<button class="btn btn-sm btn-primary" data-action="add-item" title="Create Invoice">${addIcon}</button>`;
-    }
-
-    let headerHtml = `
-            <div class="tooltip-header">
-                <strong>${doc.name}</strong>
-                <div class="tooltip-buttons">
-                    ${itemsBtn}
-                    ${techsBtn}
-                    ${addBtn}
-                </div>
-            </div>
-        `;
-
-    let bodyHtml = `<div class="tooltip-body">`;
-    if (mode === "Service Order") {
-      bodyHtml += `
-                <p><strong>Customer:</strong> ${doc.customer || "N/A"}</p>
-                <p><strong>Date:</strong> ${doc.posting_date || ""}</p>
-                <p><strong>Status:</strong> ${doc.status || ""}</p>
-                <p><strong>Priority:</strong> ${doc.priority || ""}</p>
-            `;
-    } else {
-      bodyHtml += `
-                <p><strong>Posting Date:</strong> ${doc.posting_date || ""}</p>
-                <p><strong>Status:</strong> ${doc.status || ""}</p>
-                <p><strong>Start:</strong> ${
-                  doc.scheduled_start_datetime || ""
-                }</p>
-                <p><strong>Finish:</strong> ${
-                  doc.scheduled_finish_datetime || ""
-                }</p>
-            `;
-    }
-    bodyHtml += `</div>`;
-
-    tooltip.html(headerHtml + bodyHtml);
-
-    let tooltipWidth = tooltip.outerWidth();
-    let tooltipHeight = tooltip.outerHeight();
-    let finalX = x + 10;
-    let finalY = y;
-    if (finalX + tooltipWidth > $(window).width()) {
-      finalX = x - tooltipWidth - 10;
-    }
-    if (finalY + tooltipHeight > $(window).height()) {
-      finalY = $(window).height() - tooltipHeight - 20;
-    }
-    tooltip.css({ left: finalX + "px", top: finalY + "px" });
-
-    tooltip.find("[data-action='view-items']").on("click", () => {
-      this.showItemsDialog(doc, mode);
-    });
-    if (mode === "Service Appointment") {
-      tooltip.find("[data-action='view-techs']").on("click", () => {
-        this.showTechniciansDialog(doc);
-      });
-    }
-    tooltip.find("[data-action='add-item']").on("click", () => {
-      if (mode === "Service Order") {
-        this.create_event_for_order(doc);
-      } else {
-        frappe.confirm("Create an invoice for this appointment?", () => {
-          frappe.msgprint("Proceed with invoice creation...");
-        });
-      }
-    });
-  }
-
-  showItemsDialog(doc) {
-    let dialog = new frappe.ui.Dialog({
-      title: "Service Items",
-      fields: [
-        {
-          fieldname: "service_items",
-          fieldtype: "Table",
-          label: __("Service Items"),
-          in_place_edit: true,
-          reqd: 1,
-          fields: [
-            {
-              fieldname: "item_code",
-              label: __("Item"),
-              fieldtype: "Link",
-              options: "Item",
-              reqd: 1,
-              in_list_view: 1,
-            },
-            {
-              fieldname: "qty",
-              label: __("Qty"),
-              fieldtype: "Data",
-              reqd: 1,
-              in_list_view: 1,
-            },
-            {
-              fieldname: "invoice_status",
-              label: __("Invoice Status"),
-              fieldtype: "Data",
-              reqd: 1,
-              in_list_view: 1,
-            },
-          ],
-        },
-      ],
-      primary_action_label: "Close",
-      primary_action: () => dialog.hide(),
-    });
-
-    let tableField = dialog.get_field("service_items");
-    tableField.df.data = doc.items;
-    tableField.grid.refresh();
-
-    dialog.show();
-  }
-
-  showTechniciansDialog(doc) {
-    let dialog = new frappe.ui.Dialog({
-      title: "Technicians",
-      fields: [
-        {
-          fieldname: "service_technicians",
-          fieldtype: "Table",
-          label: __("Service Technicians"),
-          options: "Service Technician Item",
-          in_place_edit: true,
-          reqd: 1,
-          fields: [
-            {
-              fieldname: "service_technician",
-              label: __("Item"),
-              fieldtype: "Link",
-              options: "Item",
-              reqd: 1,
-              in_list_view: 1,
-            },
-            {
-              fieldname: "full_name",
-              label: __("Full Name"),
-              fieldtype: "Data",
-              fetch_from: "service_technician.full_name",
-              reqd: 1,
-              in_list_view: 1,
-            },
-          ],
-        },
-      ],
-      primary_action_label: "Close",
-      primary_action: () => dialog.hide(),
-    });
-
-    let tableField = dialog.get_field("service_technicians");
-    tableField.df.data = doc.service_technicians;
-    tableField.grid.refresh();
-
-    dialog.show();
-  }
-
-  create_event_for_order(orderDoc = null) {
-    if (!orderDoc) {
-      frappe.prompt(
-        [
-          {
-            fieldname: "service_order",
-            label: "Service Order",
-            fieldtype: "Link",
-            options: "Service Order",
-            reqd: 1,
-          },
-        ],
-        (values) => {
-          this.open_create_schedule_dialog(values.service_order);
-        },
-        "Create Schedule",
-        "Create"
-      );
-    } else {
-      this.open_create_schedule_dialog(orderDoc.name);
-    }
-  }
-
-  open_create_schedule_dialog(OrderName = "") {
-    let selectedDate = frappe.datetime.get_today();
-    let d = new frappe.ui.Dialog({
-      title: "Create Schedule",
-      fields: [
-        {
-          fieldname: "service_order",
-          fieldtype: "Link",
-          options: "Service Order",
-          label: "Service Order",
-          default: OrderName,
-          reqd: 1,
-        },
-        { fieldtype: "Column Break" },
-        {
-          fieldname: "selected_date",
-          fieldtype: "Date",
-          label: "Selected Date",
-          default: selectedDate,
-        },
-        {
-          fieldname: "start_time",
-          fieldtype: "Time",
-          label: "Start Time",
-          default: "09:00",
-        },
-        {
-          fieldname: "finish_time",
-          fieldtype: "Time",
-          label: "Finish Time",
-          default: "10:00",
-        },
-      ],
-      primary_action_label: "Schedule & Dispatch",
-      primary_action: (values) => {
-        let scheduledStart = values.selected_date + " " + values.start_time;
-        let scheduledFinish = values.selected_date + " " + values.finish_time;
-        create_appointment(
-          values.selected_date,
-          values.service_order,
-          scheduledStart,
-          scheduledFinish,
-          "TECH-0001",
-          (r) => {
-            frappe.msgprint("Appointment created for " + values.service_order);
-          }
-        );
-        d.hide();
-      },
-    });
-    d.show();
-  }
-}
diff --git a/beveren_fsm/field_service_management/page/dispatch/dispatch.json b/beveren_fsm/field_service_management/page/dispatch/dispatch.json
deleted file mode 100644
index c51fb02..0000000
--- a/beveren_fsm/field_service_management/page/dispatch/dispatch.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
- "content": null,
- "creation": "2025-02-17 20:56:52.652328",
- "docstatus": 0,
- "doctype": "Page",
- "idx": 0,
- "modified": "2025-02-17 20:56:52.652328",
- "modified_by": "Administrator",
- "module": "Field Service Management",
- "name": "dispatch",
- "owner": "Administrator",
- "page_name": "dispatch",
- "roles": [],
- "script": null,
- "standard": "Yes",
- "style": null,
- "system_page": 0
-}
diff --git a/beveren_fsm/field_service_management/page/dispatch/dispatch.py b/beveren_fsm/field_service_management/page/dispatch/dispatch.py
deleted file mode 100644
index 6ecafcc..0000000
--- a/beveren_fsm/field_service_management/page/dispatch/dispatch.py
+++ /dev/null
@@ -1,232 +0,0 @@
-import frappe
-from frappe.utils import get_datetime, getdate
-
-
-@frappe.whitelist()
-def get_schedule_data(selected_date, all_dates=False):
-	technicians = frappe.get_all("Service Technician", fields=["name", "full_name"])
-
-	selected_date = getdate(selected_date)
-
-	if all_dates:
-		appointments = frappe.get_all(
-			"Service Appointment",
-			fields=[
-				"name",
-				"posting_date",
-				"service_order",
-				"scheduled_start_datetime",
-				"scheduled_finish_datetime",
-				"status",
-			],
-			filters={"docstatus": 1},
-			order_by="posting_date desc",
-		)
-	else:
-		appointments = frappe.get_all(
-			"Service Appointment",
-			filters={
-				"posting_date": selected_date,
-			},
-			fields=[
-				"name",
-				"posting_date",
-				"service_order",
-				"scheduled_start_datetime",
-				"scheduled_finish_datetime",
-				"status",
-			],
-		)
-
-	meta = frappe.get_meta("Service Appointment")
-	appointments_with_technicians = []
-	for appointment in appointments:
-		appointment_doc = frappe.get_doc("Service Appointment", appointment.name)
-		service_technicians = [
-			frappe.get_doc("Service Technician", tech.service_technician).name
-			for tech in appointment_doc.service_technicians
-		]
-		start_time = get_datetime(appointment_doc.scheduled_start_datetime)
-		finish_time = get_datetime(appointment_doc.scheduled_finish_datetime)
-
-		state_color = None
-		if meta.states:
-			for s in meta.states:
-				if s.title == appointment_doc.status:
-					state_color = s.color
-					break
-
-		structured_appointment = {
-			"name": appointment.name,
-			"posting_date": appointment.posting_date,
-			"service_order": appointment.service_order,
-			"start_time": start_time.strftime("%H:%M"),
-			"finish_time": finish_time.strftime("%H:%M"),
-			"service_technicians": service_technicians,
-			"status": appointment_doc.status,
-			"color": state_color,
-		}
-		appointments_with_technicians.append(structured_appointment)
-
-	return {"technicians": technicians, "appointments": appointments_with_technicians}
-
-
-@frappe.whitelist()
-def create_service_appointment(
-	selected_date, service_order, scheduled_start_datetime, scheduled_finish_datetime, technician, dispatch=0
-):
-	from frappe.utils import get_datetime, getdate
-
-	scheduled_start_datetime = get_datetime(scheduled_start_datetime)
-	scheduled_finish_datetime = get_datetime(scheduled_finish_datetime)
-
-	appointment_list = frappe.get_all(
-		"Service Appointment",
-		filters={
-			"posting_date": getdate(selected_date),
-			"service_order": service_order,
-			"scheduled_start_datetime": scheduled_start_datetime,
-			"scheduled_finish_datetime": scheduled_finish_datetime,
-		},
-		limit=10,
-	)
-
-	found = None
-	for app in appointment_list:
-		app_doc = frappe.get_doc("Service Appointment", app.name)
-		for row in app_doc.get("service_technicians"):
-			if row.service_technician == technician:
-				found = app_doc
-				break
-		if found:
-			break
-
-	if found:
-		appointment = found
-	else:
-		service_order_doc = frappe.get_doc("Service Order", service_order)
-		appointment = frappe.new_doc("Service Appointment")
-		appointment.posting_date = getdate(selected_date)
-		appointment.service_order = service_order
-		appointment.scheduled_start_datetime = scheduled_start_datetime
-		appointment.scheduled_finish_datetime = scheduled_finish_datetime
-		appointment.customer = service_order_doc.customer
-		for item in service_order_doc.get("items") or []:
-			appointment.append(
-				"items",
-				{
-					"item_code": item.item_code,
-					"qty": item.qty,
-					"uom": item.uom,
-					"invoice_status": item.invoice_status,
-				},
-			)
-		appointment.append("service_technicians", {"service_technician": technician})
-		appointment.save()
-		appointment.submit()
-		# Dispatch
-		if int(dispatch) == 1:
-			appointment.status = "Dispatched"
-			appointment.save()
-
-	meta = frappe.get_meta("Service Appointment")
-	state_color = None
-	if meta.states:
-		for s in meta.states:
-			if s.title == appointment.status:
-				state_color = s.color
-				break
-
-	return {"name": appointment.name, "status": appointment.status, "color": state_color}
-
-
-@frappe.whitelist()
-def update_service_appointment(
-	appointment_id,
-	selected_date,
-	service_order,
-	scheduled_start_datetime,
-	scheduled_finish_datetime,
-	technician,
-):
-	from frappe.utils import get_datetime, getdate
-
-	appointment = frappe.get_doc("Service Appointment", appointment_id)
-
-	appointment.update(
-		{
-			"posting_date": getdate(selected_date),
-			"service_order": service_order,
-			"scheduled_start_datetime": get_datetime(scheduled_start_datetime),
-			"scheduled_finish_datetime": get_datetime(scheduled_finish_datetime),
-		}
-	)
-
-	appointment.set("service_technicians", [])
-	appointment.append("service_technicians", {"service_technician": technician})
-
-	appointment.save()
-	return appointment.name
-
-
-@frappe.whitelist()
-def start_work(appointment_id):
-	appointment = frappe.get_doc("Service Appointment", appointment_id)
-	if appointment.status == "Dispatched":
-		appointment.status = "In Progress"
-		appointment.save(ignore_permissions=True)
-		return appointment.name
-	else:
-		frappe.throw("Appointment is not in Dispatched status. Cannot start work.")
-
-
-@frappe.whitelist()
-def get_sidebar_data(mode):
-	if mode == "Service Order":
-		orders = frappe.get_all(
-			"Service Order",
-			fields=["name", "customer", "priority", "posting_date", "status"],
-			filters={"docstatus": 1},
-			order_by="posting_date desc",
-			limit=30,
-		)
-		for o in orders:
-			items = frappe.get_all(
-				"Service Order Item",
-				filters={"parent": o.name},
-				fields=["item_code", "item_name", "qty", "uom", "invoice_status"],
-			)
-			o["items"] = items
-		return orders
-
-	elif mode == "Service Appointment":
-		appointments = frappe.get_all(
-			"Service Appointment",
-			fields=[
-				"name",
-				"posting_date",
-				"status",
-				"scheduled_start_datetime",
-				"scheduled_finish_datetime",
-			],
-			filters={"docstatus": 1},
-			order_by="posting_date desc",
-			limit=30,
-		)
-		for a in appointments:
-			items = frappe.get_all(
-				"Service Order Item",
-				filters={"parent": a.name},
-				fields=["item_code", "item_name", "qty", "uom", "invoice_status"],
-			)
-			techs = frappe.get_all(
-				"Service Technician Item",
-				filters={"parent": a.name},
-				fields=["service_technician", "full_name"],
-			)
-			a["items"] = items
-			a["service_technicians"] = techs
-		return appointments
-
-	else:
-		return []
diff --git a/beveren_fsm/field_service_management/page/service_scheduling/__init__.py b/beveren_fsm/field_service_management/page/service_scheduling/__init__.py
deleted file mode 100644
index e69de29..0000000
diff --git a/beveren_fsm/field_service_management/page/service_scheduling/service_scheduling.css b/beveren_fsm/field_service_management/page/service_scheduling/service_scheduling.css
deleted file mode 100644
index e2a4a41..0000000
--- a/beveren_fsm/field_service_management/page/service_scheduling/service_scheduling.css
+++ /dev/null
@@ -1,114 +0,0 @@
-/* Container for the entire schedule grid */
-.schedule-grid-container {
-	position: relative;
-	width: 100%;
-  }
-
-  /* Timeline header that holds the time labels */
-  .timeline-header {
-	position: relative;
-	margin-left: 20%;
-	width: 80%;
-	height: 40px;
-	border-bottom: 1px solid #ddd;
-  }
-
-  /* Time labels in the timeline header */
-  .time-label {
-	position: absolute;
-	transform: translateX(-50%);
-	font-size: 12px;
-	color: #555;
-  }
-
-  /* Technician rows container */
-  .technician-rows { }
-
-  /* Each technician row */
-  .technician-row {
-	display: flex;
-	height: 50px;
-	border-bottom: 1px solid #ddd;
-  }
-
-  /* Technician name column */
-  .technician-name {
-	width: 20%;
-	background: #f0f0f0;
-	text-align: center;
-	line-height: 50px;
-	border-right: 1px solid #ddd;
-  }
-
-  /* Timeline cell */
-  .timeline-cell {
-	width: 80%;
-	position: relative;
-  }
-
-  /* Timeline background */
-  .timeline-background {
-	position: absolute;
-	left: 20%;
-	top: 40px;
-	width: 80%;
-	bottom: 0;
-	pointer-events: none;
-  }
-
-  /* Schedule event styling */
-  .schedule-event {
-	background: #007bff;
-	color: white;
-	padding: 2px;
-	border-radius: 3px;
-	cursor: grab;
-	overflow: hidden;
-	font-size: 10px;
-	text-align: center;
-	z-index: 10;
-	opacity: 0.9;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	position: absolute;
-	top: 0;
-	height: 100%;
-  }
-
-  /* Styling for the selected date */
-  .selected-date {
-	background-color: #343a40 !important;
-	color: white !important;
-	font-weight: bold;
-	border-radius: 4px;
-  }
-
-  .schedule-event.dragging {
-	border: 2px dashed #ff9900;
-	opacity: 0.7;
-  }
-
-  #date-table th {
-	text-align: center;
-	vertical-align: middle;
-  }
-
-  /* Resize handles (moved from inline to CSS) */
-  .resize-handle {
-	position: absolute;
-	background: rgba(0, 0, 0, 0.3);
-	top: 0;
-	bottom: 0;
-	cursor: ew-resize;
-	z-index: 20;
-	width: 3px;
-  }
-
-  .left-handle {
-	left: 0;
-  }
-
-  .right-handle {
-	right: 0;
-  }
diff --git a/beveren_fsm/field_service_management/page/service_scheduling/service_scheduling.html b/beveren_fsm/field_service_management/page/service_scheduling/service_scheduling.html
deleted file mode 100644
index 27ce433..0000000
--- a/beveren_fsm/field_service_management/page/service_scheduling/service_scheduling.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<div class="service-scheduling-container">
-	<div id="header-controls" class="d-flex justify-content-between align-items-center mb-2">
-		<h3 id="month-header"></h3>
-		<div>
-			<button class="btn btn-sm btn-primary mr-2" id="today-btn">Today</button>
-			<button class="btn btn-sm btn-secondary mr-2" id="tomorrow-btn">Tomorrow</button>
-		</div>
-	</div>
-	<div id="month-row" class="text-center font-weight-bold mb-1"></div>
-	<div id="date-table"></div>
-	<div id="technician-search-container" class="mb-2">
-		<input type="text" id="technician-search" class="form-control form-control-sm" placeholder="Search Technician">
-	</div>
-	<div id="schedule-grid"></div>
-</div>
-<script src="service_scheduling.js"></script>
diff --git a/beveren_fsm/field_service_management/page/service_scheduling/service_scheduling.js b/beveren_fsm/field_service_management/page/service_scheduling/service_scheduling.js
deleted file mode 100644
index c2ce0d1..0000000
--- a/beveren_fsm/field_service_management/page/service_scheduling/service_scheduling.js
+++ /dev/null
@@ -1,1026 +0,0 @@
-// Global constants and variables
-const START_TIME_MINUTES = 420; // 07:00 in minutes
-const END_TIME_MINUTES = 1140; // 19:00 in minutes
-const TOTAL_WORKING_MINUTES = END_TIME_MINUTES - START_TIME_MINUTES; // 720 minutes
-
-var status_colors = {
-  Scheduled: "#007bff",
-  Rescheduled: "#28a745",
-  Completed: "#6c757d",
-  Cancelled: "#dc3545",
-};
-
-let isResizing = false;
-let justResized = false;
-let currentSelectedDate = frappe.datetime.get_today();
-
-// Mobile detection and date range helpers
-function isMobile() {
-  return window.innerWidth < 768;
-}
-
-function generate_date_range(selected_date) {
-  let dates = [];
-  if (isMobile()) {
-    // Show 5 days: 2 before, current, 2 after.
-    for (let i = -2; i <= 2; i++) {
-      dates.push(frappe.datetime.add_days(selected_date, i));
-    }
-  } else {
-    // Default range: from -10 to +9 days (20 days)
-    let today_index = 10;
-    for (let i = -today_index; i <= 20 - today_index - 1; i++) {
-      dates.push(frappe.datetime.add_days(selected_date, i));
-    }
-  }
-  return dates;
-}
-
-function openDatePicker() {
-  let d = new frappe.ui.Dialog({
-    title: "Select Date",
-    fields: [
-      {
-        fieldname: "selected_date",
-        fieldtype: "Date",
-        label: "Date",
-        default: currentSelectedDate,
-      },
-    ],
-    primary_action_label: "Go",
-    primary_action: (values) => {
-      currentSelectedDate = values.selected_date;
-      load_schedule(values.selected_date);
-      d.hide();
-    },
-  });
-  d.show();
-}
-
-// Helper functions
-const timeStringToMinutes = (timeStr) => {
-  const parts = timeStr.split(":");
-  return parseInt(parts[0]) * 60 + parseInt(parts[1]);
-};
-
-const minutesToTimeString = (minutes) => {
-  const hrs = Math.floor(minutes / 60);
-  const mins = minutes % 60;
-  return ("0" + hrs).slice(-2) + ":" + ("0" + mins).slice(-2);
-};
-
-const roundToNearestTen = (mins) => Math.round(mins / 10) * 10;
-
-const formatDatetime = (date, timeStr) => {
-  const parts = timeStr.split(":");
-  if (parts.length === 2) {
-    return date + " " + timeStr + ":00";
-  }
-  return date + " " + timeStr;
-};
-
-const calculatePosition = (startMins, endMins) => {
-  const leftPercent =
-    ((startMins - START_TIME_MINUTES) / TOTAL_WORKING_MINUTES) * 100;
-  const widthPercent = ((endMins - startMins) / TOTAL_WORKING_MINUTES) * 100;
-  return { leftPercent, widthPercent };
-};
-
-const debounce = (func, delay) => {
-  let timeout;
-  return function (...args) {
-    clearTimeout(timeout);
-    timeout = setTimeout(() => func.apply(this, args), delay);
-  };
-};
-
-// Transform a service order number.
-// For example, "SVC-APP-2025-00043" becomes "ORD-00043".
-function transformServiceOrder(order) {
-  if (!order) return "";
-  let parts = order.split("-");
-  if (parts.length >= 1) {
-    return "ORD-" + parts[parts.length - 1];
-  }
-  return order;
-}
-
-// Consolidated drag & drop functions
-function drag(event) {
-  event.dataTransfer.setData("text", event.target.outerHTML);
-  event.target.classList.add("dragging");
-}
-
-function dragEnd(event) {
-  event.target.classList.remove("dragging");
-}
-
-const allowDrop = (event) => {
-  event.preventDefault();
-};
-
-function is_overlapping(technician, startMins, endMins) {
-  let overlapping = false;
-  $(`.technician-row[data-tech='${technician}'] .schedule-event`).each(
-    function () {
-      const eventStart = timeStringToMinutes($(this).attr("data-start"));
-      const eventEnd = timeStringToMinutes($(this).attr("data-end"));
-      if (startMins < eventEnd && endMins > eventStart) {
-        overlapping = true;
-        return false;
-      }
-    }
-  );
-  return overlapping;
-}
-
-function is_overlapping_excluding(technician, startMins, endMins, excludeId) {
-  let overlapping = false;
-  $(`.technician-row[data-tech='${technician}'] .schedule-event`).each(
-    function () {
-      if ($(this).data("appointment") == excludeId) return;
-      const eventStart = timeStringToMinutes($(this).attr("data-start"));
-      const eventEnd = timeStringToMinutes($(this).attr("data-end"));
-      if (startMins < eventEnd && endMins > eventStart) {
-        overlapping = true;
-        return false;
-      }
-    }
-  );
-  return overlapping;
-}
-
-// Page load initialization
-frappe.pages["service-scheduling"].on_page_load = function (wrapper) {
-  let page = frappe.ui.make_app_page({
-    parent: wrapper,
-    single_column: true,
-  });
-
-  // Breadcrumbs
-  $(
-    '<div class="breadcrumbs" style="font-size: 14px; margin-bottom: 5px;"><a style="color:blue; text-decoration:none;" href="/app/beveren-fsm">HOME</a> > <strong>Schedule & Dispatch</strong></div>'
-  ).appendTo(page.body);
-
-  // Header controls with "Select Date" button (using calendar icon)
-  let header_controls = $(`
-		<div class="d-flex justify-content-between align-items-center mb-2">
-			<h3 id="month-header"></h3>
-			<div>
-				<button class="btn btn-sm btn-secondary mr-2" id="select-date-btn"><i class="fa fa-calendar"></i></button>
-				<button class="btn btn-sm btn-primary mr-2" id="today-btn">Today</button>
-				<button class="btn btn-sm btn-secondary mr-2" id="tomorrow-btn">Tomorrow</button>
-			</div>
-		</div>
-	`).appendTo(page.body);
-
-  $("#select-date-btn").on("click", () => {
-    openDatePicker();
-  });
-
-  let month_row = $(
-    `<div id="month-row" class="text-center font-weight-bold mb-1"></div>`
-  ).appendTo(page.body);
-  let date_table = $(`<div id="date-table"></div>`).appendTo(page.body);
-
-  // The merged header (with search and time labels) will be built in render_schedule_grid.
-  let schedule_grid = $(`<div id="schedule-grid"></div>`);
-  // For mobile, allow horizontal scrolling.
-  if (isMobile()) {
-    schedule_grid.css("overflow-x", "auto");
-  }
-  schedule_grid.appendTo(page.body);
-
-  currentSelectedDate = frappe.datetime.get_today();
-  load_schedule(currentSelectedDate);
-
-  $("#today-btn").on("click", () => {
-    const selected_date = frappe.datetime.get_today();
-    currentSelectedDate = selected_date;
-    load_schedule(selected_date);
-  });
-
-  $("#tomorrow-btn").on("click", () => {
-    const selected_date = frappe.datetime.add_days(
-      frappe.datetime.get_today(),
-      1
-    );
-    currentSelectedDate = selected_date;
-    load_schedule(selected_date);
-  });
-};
-
-// Event resizing functions
-function startResizing(e, eventElement, side) {
-  e.stopPropagation();
-  isResizing = true;
-  $(eventElement).attr("draggable", false);
-  const initialX = e.pageX;
-  const initialStart = timeStringToMinutes($(eventElement).data("start"));
-  const initialEnd = timeStringToMinutes($(eventElement).data("end"));
-
-  const onMouseMove = (e) => {
-    const delta = e.pageX - initialX;
-    const timelineWidth = $(eventElement).parent().width();
-    const deltaMins = (delta / timelineWidth) * TOTAL_WORKING_MINUTES;
-    if (side === "left") {
-      let newStart = initialStart + deltaMins;
-      if (newStart < START_TIME_MINUTES) newStart = START_TIME_MINUTES;
-      if (newStart >= initialEnd - 30) newStart = initialEnd - 30;
-      $(eventElement).attr("data-start", minutesToTimeString(newStart));
-      const pos = calculatePosition(newStart, initialEnd);
-      $(eventElement).css({
-        left: pos.leftPercent + "%",
-        width: pos.widthPercent + "%",
-      });
-    } else if (side === "right") {
-      let newEnd = initialEnd + deltaMins;
-      if (newEnd > END_TIME_MINUTES) newEnd = END_TIME_MINUTES;
-      if (newEnd <= initialStart + 30) newEnd = initialStart + 30;
-      $(eventElement).attr("data-end", minutesToTimeString(newEnd));
-      const pos = calculatePosition(initialStart, newEnd);
-      $(eventElement).css({ width: pos.widthPercent + "%" });
-    }
-  };
-
-  const onMouseUp = (e) => {
-    $(document).off("mousemove", onMouseMove);
-    $(document).off("mouseup", onMouseUp);
-    $(eventElement).attr("draggable", true);
-    isResizing = false;
-    justResized = true;
-    setTimeout(() => {
-      justResized = false;
-    }, 300);
-
-    const newStartStr = $(eventElement).attr("data-start");
-    const newEndStr = $(eventElement).attr("data-end");
-    if (!newStartStr || !newEndStr) {
-      frappe.msgprint("Error reading time data after resizing.");
-      return;
-    }
-    const newStart = timeStringToMinutes(newStartStr);
-    const newEnd = timeStringToMinutes(newEndStr);
-    const technician = $(eventElement).data("tech");
-    const appointmentId = $(eventElement).data("appointment");
-    if (is_overlapping_excluding(technician, newStart, newEnd, appointmentId)) {
-      frappe.msgprint(
-        "Time overlap detected during resizing. Reverting changes."
-      );
-      $(eventElement).attr("data-start", minutesToTimeString(initialStart));
-      $(eventElement).attr("data-end", minutesToTimeString(initialEnd));
-      const pos = calculatePosition(initialStart, initialEnd);
-      $(eventElement).css({
-        left: pos.leftPercent + "%",
-        width: pos.widthPercent + "%",
-      });
-      return;
-    }
-    update_appointment(
-      appointmentId,
-      currentSelectedDate,
-      $(eventElement).data("service-order"),
-      formatDatetime(currentSelectedDate, minutesToTimeString(newStart)),
-      formatDatetime(currentSelectedDate, minutesToTimeString(newEnd)),
-      $(eventElement).data("tech")
-    );
-  };
-
-  $(document).on("mousemove", onMouseMove);
-  $(document).on("mouseup", onMouseUp);
-}
-
-function attachResizeHandles(eventElement) {
-  if ($(eventElement).find(".resize-handle").length === 0) {
-    $(eventElement).append('<div class="resize-handle left-handle"></div>');
-    $(eventElement).append('<div class="resize-handle right-handle"></div>');
-  }
-  $(eventElement)
-    .find(".left-handle")
-    .on("mousedown", (e) => {
-      startResizing(e, eventElement, "left");
-    });
-  $(eventElement)
-    .find(".right-handle")
-    .on("mousedown", (e) => {
-      startResizing(e, eventElement, "right");
-    });
-}
-
-// Create event function
-function create_event(event, timelineCell) {
-  if ($(event.target).hasClass("schedule-event") || isResizing || justResized)
-    return;
-  const technician = $(timelineCell).closest(".technician-row").data("tech");
-  const timelineOffset = $(timelineCell).offset();
-  const clickX = event.pageX - timelineOffset.left;
-  const timelineWidth = $(timelineCell).width();
-  let minutesFromStart = (clickX / timelineWidth) * TOTAL_WORKING_MINUTES;
-  minutesFromStart = roundToNearestTen(minutesFromStart);
-  const eventStartMinutes = START_TIME_MINUTES + minutesFromStart;
-  const eventEndMinutes = eventStartMinutes + 30;
-  const selectedDate = currentSelectedDate || frappe.datetime.get_today();
-
-  const d = new frappe.ui.Dialog({
-    title: "Create Schedule",
-    fields: [
-      {
-        fieldname: "appointment",
-        fieldtype: "Link",
-        options: "Service Appointment",
-        label: "Appointment",
-        read_only: 1,
-        default: "",
-        hidden: 1,
-      },
-      {
-        fieldname: "service_order",
-        fieldtype: "Link",
-        options: "Service Order",
-        label: "Service Order",
-        reqd: 1,
-      },
-      {
-        fieldname: "technician",
-        fieldtype: "Link",
-        options: "Service Technician",
-        label: "Technician",
-        read_only: 1,
-        default: technician,
-      },
-      { fieldtype: "Column Break" },
-      {
-        fieldname: "selected_date",
-        fieldtype: "Date",
-        label: "Selected Date",
-        default: selectedDate,
-        read_only: 1,
-      },
-      {
-        fieldname: "start_time",
-        fieldtype: "Time",
-        label: "Start Time",
-        default: minutesToTimeString(eventStartMinutes),
-        reqd: 1,
-      },
-      {
-        fieldname: "finish_time",
-        fieldtype: "Time",
-        label: "Finish Time",
-        default: minutesToTimeString(eventEndMinutes),
-        reqd: 1,
-      },
-    ],
-    primary_action_label: "Schedule & Dispatch",
-    primary_action: (values) => {
-      const startMins = timeStringToMinutes(values.start_time);
-      const endMins = timeStringToMinutes(values.finish_time);
-      if (
-        startMins >= endMins ||
-        startMins < START_TIME_MINUTES ||
-        endMins > END_TIME_MINUTES
-      ) {
-        frappe.msgprint(
-          "Invalid time range. Select a valid start and finish time between 07:00 - 19:00."
-        );
-        return;
-      }
-      if (endMins - startMins < 30) {
-        frappe.msgprint("Time range must be at least 30 minutes.");
-        return;
-      }
-      if (is_overlapping(technician, startMins, endMins)) {
-        frappe.msgprint(
-          "Time overlap detected! Please select a different time."
-        );
-        return;
-      }
-      const scheduledStartDatetime = formatDatetime(
-        values.selected_date,
-        values.start_time
-      );
-      const scheduledFinishDatetime = formatDatetime(
-        values.selected_date,
-        values.finish_time
-      );
-      create_appointment(
-        values.selected_date,
-        values.service_order,
-        scheduledStartDatetime,
-        scheduledFinishDatetime,
-        technician,
-        (appointment_data) => {
-          const appointment_id = appointment_data.name;
-          const appointment_status = appointment_data.status || "Dispatched";
-          const event_color =
-            appointment_data.color ||
-            status_colors[appointment_status] ||
-            "#007bff";
-          const duration = endMins - startMins;
-          const pos = calculatePosition(startMins, endMins);
-          const $eventEl = $(`
-						<div class="schedule-event" draggable="true" ondragstart="drag(event)" ondragend="dragEnd(event)" onclick="edit_event(this)"
-							data-appointment="${appointment_id}" data-tech="${technician}" data-start="${
-            values.start_time
-          }" data-end="${values.finish_time}"
-							data-service-order="${
-                values.service_order
-              }" data-status="${appointment_status}" data-color="${
-            appointment_data.color
-          }">
-							${transformServiceOrder(values.service_order)} (${values.start_time} - ${
-            values.finish_time
-          })
-						</div>
-					`);
-          $eventEl.css({
-            background: event_color,
-            left: pos.leftPercent + "%",
-            width: pos.widthPercent + "%",
-          });
-          $(timelineCell).append($eventEl);
-          attachResizeHandles($eventEl);
-          d.set_value("appointment", appointment_id);
-          d.hide();
-        }
-      );
-    },
-  });
-  d.show();
-}
-
-// Render schedule grid
-function render_schedule_grid(technicians, selected_date, appointments) {
-  const gridContainer = $(`
-		<div class="schedule-grid-container" style="position: relative; width: 100%;"></div>
-	`);
-
-  // Create a merged header row with search input and bold time labels.
-  const headerRow = $(`
-		<div class="technician-row header-row" style="display: flex; height: 40px; border-bottom: 1px solid #ddd;">
-			<div class="technician-name" style="width: 20%; background: #f0f0f0; text-align: center; line-height: 40px; border-right: 1px solid #ddd; font-size: ${
-        isMobile() ? "10px" : "12px"
-      };">
-				<input type="text" id="technician-search" class="form-control form-control-sm" placeholder="Search Technician" style="height: 100%; border: none; outline: none; box-shadow: none; border-radius: 0;"/>
-			</div>
-			<div class="timeline-cell" style="width: 80%; position: relative;">
-			</div>
-		</div>
-	`);
-  // Insert bold time labels inside the timeline-cell; on mobile display only the hour (e.g., "7") with a smaller font.
-  for (let m = 0; m < TOTAL_WORKING_MINUTES; m += 60) {
-    const rawTime = minutesToTimeString(START_TIME_MINUTES + m);
-    const displayTime = isMobile() ? parseInt(rawTime.split(":")[0]) : rawTime;
-    const leftPercent = (m / TOTAL_WORKING_MINUTES) * 100;
-    const labelDiv = $(`
-			<div class="time-label" style="position: absolute; left: ${leftPercent}%; transform: translateX(-50%); font-size: ${
-      isMobile() ? "10px" : "12px"
-    }; color: #555; font-weight: bold;">
-				${displayTime}
-			</div>
-		`);
-    headerRow.find(".timeline-cell").append(labelDiv);
-  }
-  gridContainer.append(headerRow);
-
-  // Separator: horizontal line spanning full width.
-  const separator = $(`
-		<div class="separator" style="width: 100%; border-top: 1px solid #ddd; margin: 0; padding: 0;"></div>
-	`);
-  gridContainer.append(separator);
-
-  // Technician rows container.
-  const techRowsContainer = $(`<div class="technician-rows"></div>`);
-  technicians.forEach((tech) => {
-    const techRow = $(`
-			<div class="technician-row" data-tech="${
-        tech.name
-      }" style="display: flex; height: 33px; border-bottom: 1px solid #ddd;">
-				<div class="technician-name" style="width: 20%; background: #f0f0f0; text-align: center; line-height: 33px; border-right: 1px solid #ddd; font-size: ${
-          isMobile() ? "10px" : "12px"
-        }; ${
-      isMobile()
-        ? "white-space: nowrap; overflow: hidden; text-overflow: ellipsis;"
-        : ""
-    }">
-					${tech.full_name}
-				</div>
-				<div class="timeline-cell" style="width: 80%; position: relative;" onclick="create_event(event, this)" ondrop="drop(event, this)" ondragover="allowDrop(event)"></div>
-			</div>
-		`);
-    techRowsContainer.append(techRow);
-  });
-  gridContainer.append(techRowsContainer);
-  $("#schedule-grid").html(gridContainer);
-
-  // Timeline background: vertical grid lines now start below the header row.
-  const timelineBackground = $(`
-		<div class="timeline-background" style="position: absolute; left: 20%; top: 15px; width: 80%; bottom: 0; pointer-events: none;"></div>
-	`);
-  for (let m = 0; m <= TOTAL_WORKING_MINUTES; m += 10) {
-    const leftPercent = (m / TOTAL_WORKING_MINUTES) * 100;
-    const lineWidth = m % 60 === 0 ? 2 : 1;
-    const lineColor = m % 60 === 0 ? "#aaa" : "#ddd";
-    const lineDiv = $(`
-			<div style="position: absolute; top: 0; bottom: 0; left: ${leftPercent}%; width: ${lineWidth}px; background: ${lineColor};"></div>
-		`);
-    timelineBackground.append(lineDiv);
-  }
-  gridContainer.append(timelineBackground);
-
-  // Filter technician rows but exclude the header row so that the search input stays visible.
-  $("#technician-search")
-    .off("keyup")
-    .on(
-      "keyup",
-      debounce(function () {
-        const value = $(this).val().toLowerCase();
-        $(".technician-row")
-          .not(".header-row")
-          .filter(function () {
-            $(this).toggle($(this).text().toLowerCase().includes(value));
-          });
-      }, 300)
-    );
-
-  appointments.forEach((appointment) => {
-    appointment.service_technicians.forEach((technicianName) => {
-      technicianName = technicianName.trim();
-      const $techRow = $(`.technician-row[data-tech='${technicianName}']`);
-      if ($techRow.length === 0) return;
-      const timelineCell = $techRow.find(".timeline-cell");
-      const startMins = timeStringToMinutes(appointment.start_time);
-      const endMins = timeStringToMinutes(appointment.finish_time);
-      const pos = calculatePosition(startMins, endMins);
-      const appointment_status = appointment.status || "Dispatched";
-      const event_color =
-        appointment.color || status_colors[appointment_status] || "#007bff";
-      const $ev = $(`
-				<div class="schedule-event" draggable="true" ondragstart="drag(event)" ondragend="dragEnd(event)" onclick="edit_event(this)"
-					data-appointment="${
-            appointment.name
-          }" data-tech="${technicianName}" data-start="${
-        appointment.start_time
-      }"
-					data-end="${appointment.finish_time}" data-service-order="${
-        appointment.service_order
-      }" data-status="${appointment_status}" data-color="${appointment.color}">
-					${transformServiceOrder(appointment.service_order)} (${
-        appointment.start_time
-      } - ${appointment.finish_time})
-				</div>
-			`);
-      $ev.css({
-        background: event_color,
-        left: pos.leftPercent + "%",
-        width: pos.widthPercent + "%",
-      });
-      timelineCell.append($ev);
-      attachResizeHandles($ev);
-    });
-  });
-}
-
-// Edit event dialog
-function edit_event(eventElement) {
-  if (justResized) return;
-  const appointmentId = $(eventElement).data("appointment");
-  const service_order = $(eventElement).data("service-order");
-  const start_time = $(eventElement).attr("data-start");
-  const finish_time = $(eventElement).attr("data-end");
-  const technician = $(eventElement).data("tech");
-  const selectedDate = currentSelectedDate || frappe.datetime.get_today();
-  const d = new frappe.ui.Dialog({
-    title: "Edit Schedule",
-    fields: [
-      {
-        fieldname: "appointment",
-        fieldtype: "Link",
-        options: "Service Appointment",
-        label: "Appointment",
-        default: appointmentId,
-        read_only: 1,
-      },
-      {
-        fieldname: "service_order",
-        fieldtype: "Link",
-        options: "Service Order",
-        label: "Service Order",
-        default: service_order,
-        read_only: 1,
-      },
-      {
-        fieldname: "technician",
-        fieldtype: "Link",
-        options: "Service Technician",
-        label: "Technician",
-        default: technician,
-        read_only: 1,
-      },
-      { fieldtype: "Column Break" },
-      {
-        fieldname: "selected_date",
-        fieldtype: "Date",
-        label: "Selected Date",
-        default: selectedDate,
-        read_only: 1,
-      },
-      {
-        fieldname: "start_time",
-        fieldtype: "Time",
-        label: "Start Time",
-        default: start_time,
-        reqd: 1,
-      },
-      {
-        fieldname: "finish_time",
-        fieldtype: "Time",
-        label: "Finish Time",
-        default: finish_time,
-        reqd: 1,
-      },
-    ],
-    primary_action_label: "Update",
-    primary_action: (values) => {
-      const newStart = timeStringToMinutes(values.start_time);
-      const newEnd = timeStringToMinutes(values.finish_time);
-      if (
-        newStart >= newEnd ||
-        newStart < START_TIME_MINUTES ||
-        newEnd > END_TIME_MINUTES
-      ) {
-        frappe.msgprint(
-          "Invalid time range. Select a valid start and finish time between 07:00 - 19:00."
-        );
-        return;
-      }
-      if (newEnd - newStart < 30) {
-        frappe.msgprint("Time range must be at least 30 minutes.");
-        return;
-      }
-      const pos = calculatePosition(newStart, newEnd);
-      $(eventElement).css({
-        left: pos.leftPercent + "%",
-        width: pos.widthPercent + "%",
-      });
-      $(eventElement).attr("data-start", values.start_time);
-      $(eventElement).attr("data-end", values.finish_time);
-      $(eventElement).html(
-        `${transformServiceOrder(values.service_order)} (${
-          values.start_time
-        } - ${values.finish_time})`
-      );
-
-      const scheduledStartDatetime = formatDatetime(
-        values.selected_date,
-        values.start_time
-      );
-      const scheduledFinishDatetime = formatDatetime(
-        values.selected_date,
-        values.finish_time
-      );
-      update_appointment(
-        values.appointment,
-        values.selected_date,
-        values.service_order,
-        scheduledStartDatetime,
-        scheduledFinishDatetime,
-        $(eventElement).data("tech")
-      );
-      d.hide();
-    },
-  });
-  d.show();
-}
-
-// Drag & drop handler
-function drop(event, timelineCell) {
-  event.preventDefault();
-  const draggedHtml = event.dataTransfer.getData("text");
-  const draggedElement = $(draggedHtml);
-  const oldStart = timeStringToMinutes(draggedElement.attr("data-start"));
-  const oldEnd = timeStringToMinutes(draggedElement.attr("data-end"));
-  const duration = oldEnd - oldStart;
-  const timelineOffset = $(timelineCell).offset();
-  const dropX = event.pageX - timelineOffset.left;
-  const timelineWidth = $(timelineCell).width();
-  let minutesFromStart = (dropX / timelineWidth) * TOTAL_WORKING_MINUTES;
-  minutesFromStart = roundToNearestTen(minutesFromStart);
-  let newStartMins = START_TIME_MINUTES + minutesFromStart;
-  let newEndMins = newStartMins + duration;
-  if (newStartMins < START_TIME_MINUTES) {
-    newStartMins = START_TIME_MINUTES;
-    newEndMins = newStartMins + duration;
-  }
-  if (newEndMins > END_TIME_MINUTES) {
-    newStartMins = END_TIME_MINUTES - duration;
-    newEndMins = END_TIME_MINUTES;
-  }
-  const technician = $(timelineCell).closest(".technician-row").data("tech");
-  if (
-    is_overlapping_excluding(
-      technician,
-      newStartMins,
-      newEndMins,
-      draggedElement.data("appointment")
-    )
-  ) {
-    frappe.msgprint(
-      "Time overlap detected after drop! Please choose a different position."
-    );
-    return;
-  }
-  const serviceOrder = draggedElement.data("service-order");
-  if (!serviceOrder) {
-    frappe.msgprint("Service Order is required. Please create an event first.");
-    return;
-  }
-  const newStartTime = minutesToTimeString(newStartMins);
-  const newEndTime = minutesToTimeString(newEndMins);
-  $(
-    `.schedule-event[data-appointment='${draggedElement.data("appointment")}']`
-  ).remove();
-  const pos = calculatePosition(newStartMins, newEndMins);
-  const event_color =
-    draggedElement.data("color") ||
-    status_colors[draggedElement.data("status")] ||
-    "#007bff";
-  const event_html = `
-		<div class="schedule-event" draggable="true" ondragstart="drag(event)" ondragend="dragEnd(event)" onclick="edit_event(this)"
-			data-appointment="${draggedElement.data(
-        "appointment"
-      )}" data-tech="${technician}" data-start="${newStartTime}" data-end="${newEndTime}"
-			data-service-order="${serviceOrder}" data-status="${draggedElement.data(
-    "status"
-  )}" data-color="${event_color}">
-			${transformServiceOrder(serviceOrder)} (${newStartTime} - ${newEndTime})
-		</div>
-	`;
-  const $newEvent = $(event_html);
-  $newEvent.css({
-    background: event_color,
-    left: pos.leftPercent + "%",
-    width: pos.widthPercent + "%",
-  });
-  $(timelineCell).append($newEvent);
-  const selectedDate = currentSelectedDate || frappe.datetime.get_today();
-  const scheduledStartDatetime = formatDatetime(selectedDate, newStartTime);
-  const scheduledFinishDatetime = formatDatetime(selectedDate, newEndTime);
-  update_appointment(
-    draggedElement.data("appointment"),
-    selectedDate,
-    serviceOrder,
-    scheduledStartDatetime,
-    scheduledFinishDatetime,
-    technician
-  );
-}
-
-// --- Context Menu ---
-// For "Dispatched": show [Start Work, Invoice].
-// For "Scheduled": show [Reschedule, Invoice].
-
-// Desktop right-click context menu.
-$(document).on("contextmenu", ".schedule-event", function (e) {
-  var $this = $(this);
-  var status = $this.data("status");
-  if (status !== "Dispatched" && status !== "Scheduled") {
-    return;
-  }
-  e.preventDefault();
-  $("#custom-context-menu").remove();
-  var appointmentId = $this.data("appointment");
-  var menuItems = "";
-  if (status === "Dispatched") {
-    menuItems = `
-			<div class="context-menu-item" data-action="start_work" style="padding: 5px 10px; cursor: pointer; border-bottom: 1px solid #eee;">Start Work</div>
-			<div class="context-menu-item" data-action="invoice" style="padding: 5px 10px; cursor: pointer;">Invoice</div>
-		`;
-  } else if (status === "Scheduled") {
-    menuItems = `
-			<div class="context-menu-item" data-action="reschedule" style="padding: 5px 10px; cursor: pointer; border-bottom: 1px solid #eee;">Reschedule</div>
-			<div class="context-menu-item" data-action="invoice" style="padding: 5px 10px; cursor: pointer;">Invoice</div>
-		`;
-  }
-  var menu = $(`
-		<div id="custom-context-menu" style="position: absolute; z-index: 10000; background: #fff; border: 1px solid #ccc; box-shadow: 2px 2px 5px rgba(0,0,0,0.2); font-family: sans-serif; font-size: 14px;">
-			${menuItems}
-		</div>
-	`);
-  menu.data("appointmentId", appointmentId);
-  menu.data("eventElement", this);
-  menu.css({ top: e.pageY + "px", left: e.pageX + "px" });
-  $("body").append(menu);
-});
-
-$(document)
-  .on("mouseenter", "#custom-context-menu .context-menu-item", function () {
-    $(this).css("background", "#f5f5f5");
-  })
-  .on("mouseleave", "#custom-context-menu .context-menu-item", function () {
-    $(this).css("background", "#fff");
-  });
-
-$(document).on("click", ".context-menu-item", function (e) {
-  e.stopPropagation();
-  var action = $(this).data("action");
-  var appointmentId = $("#custom-context-menu").data("appointmentId");
-  var eventElement = $("#custom-context-menu").data("eventElement");
-  $("#custom-context-menu").remove();
-  if (action === "start_work") {
-    startWork(appointmentId);
-  } else if (action === "reschedule") {
-    edit_event(eventElement);
-  } else if (action === "invoice") {
-    invoiceAppointment(appointmentId);
-  }
-});
-
-$(document).on("click", function (e) {
-  $("#custom-context-menu").remove();
-});
-
-// Mobile long-press context menu.
-var touchTimer;
-$(document)
-  .on("touchstart", ".schedule-event", function (e) {
-    var $this = $(this);
-    touchTimer = setTimeout(function () {
-      var status = $this.data("status");
-      if (status !== "Dispatched" && status !== "Scheduled") {
-        return;
-      }
-      $("#custom-context-menu").remove();
-      var appointmentId = $this.data("appointment");
-      var touch = e.originalEvent.touches[0];
-      var menuItems = "";
-      if (status === "Dispatched") {
-        menuItems = `
-				<div class="context-menu-item" data-action="start_work" style="padding: 5px 10px; cursor: pointer; border-bottom: 1px solid #eee;">Start Work</div>
-				<div class="context-menu-item" data-action="invoice" style="padding: 5px 10px; cursor: pointer;">Invoice</div>
-			`;
-      } else if (status === "Scheduled") {
-        menuItems = `
-				<div class="context-menu-item" data-action="reschedule" style="padding: 5px 10px; cursor: pointer; border-bottom: 1px solid #eee;">Reschedule</div>
-				<div class="context-menu-item" data-action="invoice" style="padding: 5px 10px; cursor: pointer;">Invoice</div>
-			`;
-      }
-      var menu = $(`
-			<div id="custom-context-menu" style="position: absolute; z-index: 10000; background: #fff; border: 1px solid #ccc; box-shadow: 2px 2px 5px rgba(0,0,0,0.2); font-family: sans-serif; font-size: 14px;">
-				${menuItems}
-			</div>
-		`);
-      menu.data("appointmentId", appointmentId);
-      menu.data("eventElement", $this.get(0));
-      menu.css({ top: touch.pageY + "px", left: touch.pageX + "px" });
-      $("body").append(menu);
-    }, 800);
-  })
-  .on("touchend touchcancel", ".schedule-event", function (e) {
-    clearTimeout(touchTimer);
-  });
-
-// Backend actions for context menu
-function startWork(appointmentId) {
-  frappe.call({
-    method:
-      "beveren_fsm.field_service_management.page.service_scheduling.service_scheduling.start_work",
-    args: { appointment_id: appointmentId },
-    callback: function (r) {
-      if (!r.exc) {
-        frappe.msgprint("Appointment started");
-        refresh_schedule_grid(currentSelectedDate);
-      }
-    },
-  });
-}
-
-function invoiceAppointment(appointmentId) {
-  frappe.set_route("Form", "Service Appointment", appointmentId);
-}
-
-// Date table & refresh functions
-function render_date_table(selected_date) {
-  const dates = generate_date_range(selected_date);
-  let table_html = `<table class="table table-bordered"><thead><tr>`;
-  dates.forEach((date) => {
-    const isSelected = date === selected_date ? "selected-date" : "";
-    const monthName = new Date(date)
-      .toLocaleString("en-us", { month: "short" })
-      .toUpperCase();
-    table_html += `<th class="date-header ${isSelected}" data-date="${date}" onclick="filter_by_date('${date}')">
-							<div>${format_date(date)}</div>
-							<div class="small" style="font-size: 8px;">${monthName}</div>
-					   </th>`;
-  });
-  table_html += `</tr></thead></table>`;
-  $("#date-table").html(table_html);
-}
-
-function filter_by_date(date) {
-  $(".date-header").removeClass("selected-date");
-  $(`.date-header[data-date='${date}']`).addClass("selected-date");
-  currentSelectedDate = date;
-  load_schedule(date);
-}
-
-function format_date(date) {
-  const dateObj = new Date(date);
-  const dayName = dateObj
-    .toLocaleString("en-us", { weekday: "short" })
-    .toUpperCase();
-  const dayNum = dateObj.getDate();
-  return `<div>${dayName}</div><div>${dayNum}</div>`;
-}
-
-function refresh_schedule_grid(selected_date) {
-  $("#schedule-grid").html(`
-		<div class="text-center" style="padding: 20px;">
-			<div class="spinner-border text-muted"></div>
-		</div>
-	`);
-  setTimeout(() => {
-    load_schedule(selected_date);
-  }, 100);
-}
-
-// Backend calls
-function create_appointment(
-  selected_date,
-  service_order,
-  scheduled_start_datetime,
-  scheduled_finish_datetime,
-  technician,
-  callback
-) {
-  frappe.call({
-    method:
-      "beveren_fsm.field_service_management.page.service_scheduling.service_scheduling.create_service_appointment",
-    args: {
-      selected_date,
-      service_order,
-      scheduled_start_datetime,
-      scheduled_finish_datetime,
-      technician,
-    },
-    callback: (r) => {
-      if (!r.exc) {
-        if (callback) {
-          callback(r.message);
-        }
-        refresh_schedule_grid(selected_date);
-      } else {
-        frappe.msgprint("Failed to update schedule.");
-      }
-    },
-  });
-}
-
-function update_appointment(
-  appointment_id,
-  selected_date,
-  service_order,
-  start_time,
-  end_time,
-  technician
-) {
-  frappe.call({
-    method:
-      "beveren_fsm.field_service_management.page.service_scheduling.service_scheduling.update_service_appointment",
-    args: {
-      appointment_id,
-      selected_date,
-      service_order,
-      scheduled_start_datetime: start_time,
-      scheduled_finish_datetime: end_time,
-      technician,
-    },
-    callback: (r) => {
-      if (!r.exc) {
-        refresh_schedule_grid(selected_date);
-      }
-    },
-  });
-}
-
-function load_schedule(selected_date) {
-  currentSelectedDate = selected_date;
-  frappe.call({
-    method:
-      "beveren_fsm.field_service_management.page.service_scheduling.service_scheduling.get_schedule_data",
-    args: { selected_date },
-    callback: (r) => {
-      if (r.message) {
-        render_date_table(selected_date);
-        render_schedule_grid(
-          r.message.technicians,
-          selected_date,
-          r.message.appointments
-        );
-      } else if (r.exc) {
-        console.error("Error fetching schedule data", r.exc);
-        frappe.msgprint("An error occurred while loading the schedule.");
-      }
-    },
-  });
-}
diff --git a/beveren_fsm/field_service_management/page/service_scheduling/service_scheduling.json b/beveren_fsm/field_service_management/page/service_scheduling/service_scheduling.json
deleted file mode 100644
index a3c81b9..0000000
--- a/beveren_fsm/field_service_management/page/service_scheduling/service_scheduling.json
+++ /dev/null
@@ -1,18 +0,0 @@
-{
- "content": null,
- "creation": "2025-02-12 12:35:28.281192",
- "docstatus": 0,
- "doctype": "Page",
- "idx": 0,
- "modified": "2025-02-12 12:35:28.281192",
- "modified_by": "Administrator",
- "module": "Field Service Management",
- "name": "service-scheduling",
- "owner": "Administrator",
- "page_name": "service-scheduling",
- "roles": [],
- "script": null,
- "standard": "Yes",
- "style": null,
- "system_page": 0
-}
diff --git a/beveren_fsm/field_service_management/page/service_scheduling/service_scheduling.py b/beveren_fsm/field_service_management/page/service_scheduling/service_scheduling.py
deleted file mode 100644
index 8924215..0000000
--- a/beveren_fsm/field_service_management/page/service_scheduling/service_scheduling.py
+++ /dev/null
@@ -1,164 +0,0 @@
-import frappe
-from frappe.utils import get_datetime, getdate
-
-
-@frappe.whitelist()
-def get_schedule_data(selected_date):
-	# Fetch Technicians
-	technicians = frappe.get_all("Service Technician", fields=["name", "full_name"])
-
-	# Convert selected_date to a date object
-	selected_date = getdate(selected_date)
-
-	# Fetch Service Appointments for the selected date
-	appointments = frappe.get_all(
-		"Service Appointment",
-		filters={
-			"posting_date": selected_date,
-		},
-		fields=[
-			"name",
-			"posting_date",
-			"service_order",
-			"scheduled_start_datetime",
-			"scheduled_finish_datetime",
-		],
-	)
-
-	# Get metadata for Service Appointment to fetch workflow states and their colors
-	meta = frappe.get_meta("Service Appointment")
-
-	appointments_with_technicians = []
-	for appointment in appointments:
-		# Get the full document to access child table and status.
-		appointment_doc = frappe.get_doc("Service Appointment", appointment.name)
-
-		# Fetch service technicians from child table
-		service_technicians = [
-			frappe.get_doc("Service Technician", tech.service_technician).name
-			for tech in appointment_doc.service_technicians
-		]
-
-		# Convert scheduled datetime fields to proper datetime objects
-		start_time = get_datetime(appointment_doc.scheduled_start_datetime)
-		finish_time = get_datetime(appointment_doc.scheduled_finish_datetime)
-
-		# Get the color for the current state using meta.states
-		state_color = None
-		if meta.states:
-			for s in meta.states:
-				if s.title == appointment_doc.status:
-					state_color = s.color
-					break
-
-		# Prepare the structured appointment data
-		structured_appointment = {
-			"name": appointment.name,
-			"service_order": appointment.service_order,
-			"start_time": start_time.strftime("%H:%M"),
-			"finish_time": finish_time.strftime("%H:%M"),
-			"service_technicians": service_technicians,
-			"status": appointment_doc.status,
-			"color": state_color,
-		}
-		appointments_with_technicians.append(structured_appointment)
-
-	return {"technicians": technicians, "appointments": appointments_with_technicians}
-
-
-@frappe.whitelist()
-def create_service_appointment(
-	selected_date, service_order, scheduled_start_datetime, scheduled_finish_datetime, technician
-):
-	# This function only creates a new appointment if one does NOT already exist
-	# for the same posting date, service order, scheduled times, and where the specified technician exists.
-
-	# Convert the datetime strings to datetime objects.
-	scheduled_start_datetime = get_datetime(scheduled_start_datetime)
-	scheduled_finish_datetime = get_datetime(scheduled_finish_datetime)
-
-	# Search for an existing Service Appointment using the main filters.
-	appointment_list = frappe.get_all(
-		"Service Appointment",
-		filters={
-			"posting_date": getdate(selected_date),
-			"service_order": service_order,
-			"scheduled_start_datetime": scheduled_start_datetime,
-			"scheduled_finish_datetime": scheduled_finish_datetime,
-		},
-		limit=10,
-	)
-
-	found = None
-	for app in appointment_list:
-		app_doc = frappe.get_doc("Service Appointment", app.name)
-		# Check if the technician is in the child table.
-		for row in app_doc.get("service_technicians"):
-			if row.service_technician == technician:
-				found = app_doc
-				break
-		if found:
-			break
-
-	if found:
-		appointment = found
-	else:
-		# Create a new Service Appointment.
-		appointment = frappe.new_doc("Service Appointment")
-		appointment.posting_date = getdate(selected_date)
-		appointment.service_order = service_order
-		appointment.scheduled_start_datetime = scheduled_start_datetime
-		appointment.scheduled_finish_datetime = scheduled_finish_datetime
-		appointment.append("service_technicians", {"service_technician": technician})
-		appointment.save()
-		appointment.submit()
-
-	# Get metadata to fetch the workflow state color.
-	meta = frappe.get_meta("Service Appointment")
-	state_color = None
-	if meta.states:
-		for s in meta.states:
-			if s.title == appointment.status:
-				state_color = s.color
-				break
-
-	return {"name": appointment.name, "status": appointment.status, "color": state_color}
-
-
-@frappe.whitelist()
-def update_service_appointment(
-	appointment_id,
-	selected_date,
-	service_order,
-	scheduled_start_datetime,
-	scheduled_finish_datetime,
-	technician,
-):
-	appointment = frappe.get_doc("Service Appointment", appointment_id)
-
-	appointment.update(
-		{
-			"posting_date": getdate(selected_date),
-			"service_order": service_order,
-			"scheduled_start_datetime": get_datetime(scheduled_start_datetime),
-			"scheduled_finish_datetime": get_datetime(scheduled_finish_datetime),
-		}
-	)
-
-	# Clear existing technicians and add the new one.
-	appointment.set("service_technicians", [])
-	appointment.append("service_technicians", {"service_technician": technician})
-
-	appointment.save()
-	return appointment.name
-
-
-@frappe.whitelist()
-def start_work(appointment_id):
-	appointment = frappe.get_doc("Service Appointment", appointment_id)
-	if appointment.status == "Dispatched":
-		appointment.status = "In Progress"
-		appointment.save(ignore_permissions=True)
-		return appointment.name
-	else:
-		frappe.throw("Appointment is not in Dispatched status. Cannot start work.")
diff --git a/beveren_fsm/hooks.py b/beveren_fsm/hooks.py
index 615e9ef..5fa0002 100644
--- a/beveren_fsm/hooks.py
+++ b/beveren_fsm/hooks.py
@@ -20,6 +20,7 @@
 # 		"has_permission": "beveren_fsm.api.permission.has_app_permission"
 # 	}
 # ]
+
 fixtures = [
 	# Export your custom "Service Type" doctype
 	"Service Type",
diff --git a/schedule/src/components/layout/sidebar-menu.tsx b/schedule/src/components/layout/sidebar-menu.tsx
index 3fc0128..a2b028b 100644
--- a/schedule/src/components/layout/sidebar-menu.tsx
+++ b/schedule/src/components/layout/sidebar-menu.tsx
@@ -1,29 +1,38 @@
 "use client";
 
-import { Home, Users, Settings } from "lucide-react";
+import { Home, Users, Settings, ClipboardList } from "lucide-react";
 import { cn } from "../../lib/utils";
 import { useState } from "react";
 
 interface MenuItem {
   icon: React.ComponentType<{ className?: string }>;
   label: string;
-  active?: boolean;
+  key: "home" | "requests" | "technicians" | "settings";
   onClick?: () => void;
 }
 
 interface SidebarMenuProps {
+  activeMenu: "home" | "requests" | "technicians" | "settings";
   onTechniciansClick?: () => void;
   onScheduleClick?: () => void;
+  onRequestsClick?: () => void;
   onSettingsClick?: () => void;
 }
 
-export function SidebarMenu({ onTechniciansClick, onScheduleClick, onSettingsClick }: SidebarMenuProps) {
+export function SidebarMenu({
+  activeMenu,
+  onTechniciansClick,
+  onScheduleClick,
+  onRequestsClick,
+  onSettingsClick,
+}: SidebarMenuProps) {
   const [hoveredItem, setHoveredItem] = useState<string | null>(null);
 
   const menuItems: MenuItem[] = [
-    { icon: Home, label: "Home", active: true, onClick: onScheduleClick },
-    { icon: Users, label: "Technicians", onClick: onTechniciansClick },
-    { icon: Settings, label: "Settings", onClick: onSettingsClick },
+    { icon: Home, label: "Home", key: "home", onClick: onScheduleClick },
+    { icon: ClipboardList, label: "Requests", key: "requests", onClick: onRequestsClick },
+    { icon: Users, label: "Technicians", key: "technicians", onClick: onTechniciansClick },
+    { icon: Settings, label: "Settings", key: "settings", onClick: onSettingsClick },
   ];
 
   return (
@@ -42,7 +51,7 @@ export function SidebarMenu({ onTechniciansClick, onScheduleClick, onSettingsCli
             <button
               className={cn(
                 "w-12 h-12 rounded-lg flex items-center justify-center transition-colors",
-                item.active
+                activeMenu === item.key
                   ? "bg-primary text-white shadow-md"
                   : "hover:bg-primary/20 text-muted-foreground hover:text-foreground hover:bg-primary/30"
               )}
diff --git a/schedule/src/components/schedule/gantt-view.tsx b/schedule/src/components/schedule/gantt-view.tsx
index 363d721..81b42de 100644
--- a/schedule/src/components/schedule/gantt-view.tsx
+++ b/schedule/src/components/schedule/gantt-view.tsx
@@ -4,7 +4,7 @@ import { useState, useEffect, useMemo, useRef } from "react";
 import { Button } from "../ui/button";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import { Appointment } from "../../pages/schedule/types";
-import { fetchTechnicians, reallocateAppointment, createAppointment, fetchServiceOrders, fetchServiceTypes, fetchItems } from "../../hooks/use-appointments";
+import { fetchTechnicians, reallocateAppointment, createAppointment, fetchServiceOrders, fetchServiceTypes, fetchItems, fetchAvailableServiceOrders } from "../../hooks/use-appointments";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table";
 import { toast } from "../ui/use-toast";
 import { format, startOfDay, parse } from "date-fns";
@@ -53,7 +53,7 @@ export function GanttView({
 
   useEffect(() => {
     // Load master data for create modal
-    Promise.all([fetchServiceOrders(), fetchServiceTypes(), fetchItems()])
+    Promise.all([fetchAvailableServiceOrders(), fetchServiceTypes(), fetchItems()])
       .then(([so, st, it]) => {
         setOptionsServiceOrders(so);
         setOptionsServiceTypes(st);
diff --git a/schedule/src/components/schedule/grid-view.tsx b/schedule/src/components/schedule/grid-view.tsx
index 432bb90..bd87635 100644
--- a/schedule/src/components/schedule/grid-view.tsx
+++ b/schedule/src/components/schedule/grid-view.tsx
@@ -7,13 +7,12 @@ import { Appointment } from "../../pages/schedule/types";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table";
 import { Badge } from "../ui/badge";
 import { cn } from "../../lib/utils";
-import { Input } from "../ui/input";
-import { Search } from "lucide-react";
 
 interface GridViewProps {
   appointments: Appointment[];
   selectedDate: Date;
   onAppointmentClick?: (appointment: Appointment) => void;
+  searchQuery?: string;
 }
 
 type SortField = "name" | "service_order" | "customer" | "status" | "posting_date" | "scheduled_start_datetime" | null;
@@ -35,10 +34,10 @@ export function GridView({
   appointments,
   selectedDate,
   onAppointmentClick,
+  searchQuery = "",
 }: GridViewProps) {
   const [sortField, setSortField] = useState<SortField>(null);
   const [sortDirection, setSortDirection] = useState<SortDirection>("asc");
-  const [searchQuery, setSearchQuery] = useState("");
 
   // Parse backend datetime as local to avoid timezone drift
   const parseLocalDateTime = (value: string): Date => {
@@ -58,12 +57,21 @@ export function GridView({
     if (searchQuery.trim()) {
       const query = searchQuery.toLowerCase();
       filtered = filtered.filter((apt) => {
+        const technicianMatch = (apt.service_technicians || []).some((tech) => {
+          const fullName = tech.full_name || "";
+          const code = tech.service_technician || "";
+          return (
+            fullName.toLowerCase().includes(query) || code.toLowerCase().includes(query)
+          );
+        });
+
         return (
           apt.name?.toLowerCase().includes(query) ||
           apt.service_order?.toLowerCase().includes(query) ||
           apt.customer?.toLowerCase().includes(query) ||
           apt.service_type?.toLowerCase().includes(query) ||
-          apt.status?.toLowerCase().includes(query)
+          apt.status?.toLowerCase().includes(query) ||
+          technicianMatch
         );
       });
     }
@@ -151,19 +159,6 @@ export function GridView({
 
   return (
     <div className="flex flex-col h-full bg-background">
-      {/* Search Bar */}
-      <div className="p-4 border-b border-border">
-        <div className="relative">
-          <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-          <Input
-            placeholder="Search appointments by ID, order, customer, type, or status..."
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            className="pl-9"
-          />
-        </div>
-      </div>
-
       {/* Table */}
       <div className="flex-1 overflow-auto">
         <Table>
diff --git a/schedule/src/components/schedule/maps-view.tsx b/schedule/src/components/schedule/maps-view.tsx
index 8a9732a..b895e4d 100644
--- a/schedule/src/components/schedule/maps-view.tsx
+++ b/schedule/src/components/schedule/maps-view.tsx
@@ -14,7 +14,7 @@ interface MapsViewProps {
   statusFilter?: string;
   technicianSearch?: string;
   searchQuery?: string;
-  durationFilter?: "thisWeek" | "thisMonth" | "thisYear";
+  durationFilter?: "date" | "today" | "thisWeek" | "thisMonth" | "thisYear";
 }
 
 const STATUS_COLORS: Record<string, { bg: string; border: string; dot: string; hex: string; bgHex: string; borderHex: string }> = {
@@ -28,16 +28,13 @@ const STATUS_COLORS: Record<string, { bg: string; border: string; dot: string; h
 
 // Get coordinates from appointment location data
 const getCoordinates = (appointment: Appointment): [number, number] | null => {
-	// If location is an object with lat/lng, use it
 	if (appointment.location && typeof appointment.location === "object" && "lat" in appointment.location && "lng" in appointment.location) {
 		const coords: [number, number] = [appointment.location.lat, appointment.location.lng];
-		// Validate coordinates are valid numbers
 		if (isNaN(coords[0]) || isNaN(coords[1]) || coords[0] === 0 || coords[1] === 0) {
 			return null;
 		}
 		return coords;
 	}
-	// Fallback to random coordinates if no location data
 	return null;
 };
 
@@ -54,6 +51,7 @@ const parseLocalDateTime = (value: string): Date => {
 // Fix Leaflet default icon issue
 if (typeof window !== "undefined") {
 
+  //eslint-disable-next-line @typescript-eslint/no-explicit-any
   delete (L.Icon.Default.prototype as any)._getIconUrl;
   L.Icon.Default.mergeOptions({
     iconRetinaUrl: "https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/images/marker-icon-2x.png",
@@ -77,8 +75,7 @@ export function MapsView({
 
   // Calculate date range based on duration filter or selected date
   const dateRange = useMemo(() => {
-    // If no duration filter, use selected date (single day)
-    if (!durationFilter) {
+    if (!durationFilter || durationFilter === "date") {
       return {
         start: startOfDay(selectedDate),
         end: endOfDay(selectedDate),
@@ -88,10 +85,15 @@ export function MapsView({
     // Otherwise use duration filter
     const today = new Date();
     switch (durationFilter) {
+      case "today":
+        return {
+          start: startOfDay(today),
+          end: endOfDay(today),
+        };
       case "thisWeek":
         return {
-          start: startOfWeek(today, { weekStartsOn: 1 }), // Monday
-          end: endOfWeek(today, { weekStartsOn: 1 }), // Sunday
+          start: startOfWeek(today, { weekStartsOn: 1 }),
+          end: endOfWeek(today, { weekStartsOn: 1 }),
         };
       case "thisMonth":
         return {
@@ -119,7 +121,6 @@ export function MapsView({
         return false;
       }
 
-      // Duration filter - check if appointment scheduled date falls within range
       if (apt.scheduled_start_datetime || apt.posting_date) {
         const appointmentDate = apt.scheduled_start_datetime
           ? parseLocalDateTime(apt.scheduled_start_datetime)
@@ -270,7 +271,6 @@ export function MapsView({
       const group = new L.FeatureGroup(markersRef.current);
       map.fitBounds(group.getBounds().pad(0.1));
     } else {
-      // If no markers, center on a default location (or first appointment's location if available)
       const firstWithLocation = filteredAppointments.find(apt => getCoordinates(apt));
       if (firstWithLocation) {
         const coords = getCoordinates(firstWithLocation);
@@ -281,7 +281,6 @@ export function MapsView({
     }
   }, [filteredAppointments, onAppointmentClick]);
 
-  // Handle custom event for popup button clicks
   useEffect(() => {
     const handleOpenAppointment = (event: CustomEvent) => {
       const appointment = filteredAppointments.find((apt) => apt.name === event.detail);
@@ -290,8 +289,10 @@ export function MapsView({
       }
     };
 
+    //eslint-disable-next-line @typescript-eslint/no-explicit-any
     window.addEventListener("openAppointment" as any, handleOpenAppointment as EventListener);
     return () => {
+      //eslint-disable-next-line @typescript-eslint/no-explicit-any
       window.removeEventListener("openAppointment" as any, handleOpenAppointment as EventListener);
     };
   }, [filteredAppointments, onAppointmentClick]);
diff --git a/schedule/src/components/schedule/schedule-left-panel.tsx b/schedule/src/components/schedule/schedule-left-panel.tsx
index 3cdefe8..1b035c9 100644
--- a/schedule/src/components/schedule/schedule-left-panel.tsx
+++ b/schedule/src/components/schedule/schedule-left-panel.tsx
@@ -5,9 +5,15 @@ import { Checkbox } from "../ui/checkbox";
 import { Badge } from "../ui/badge";
 import { ScrollArea } from "../ui/scroll-area";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
-import { Appointment, AppointmentStatus } from "../../pages/schedule/types";
+import {
+  Appointment,
+  AppointmentStatus,
+  ServiceOrderDetail,
+  ServiceOrderSummary,
+} from "../../pages/schedule/types";
 import { Skeleton } from "../ui/skeleton";
 import { AppointmentDetailSheet } from "./appointment-detail-sheet";
+import { ServiceOrderDetailSheet } from "./service-order-detail-sheet";
 import { MassActionsDropdown } from "./mass-actions-dropdown";
 import { Filter, CalendarIcon } from "lucide-react";
 import { Button } from "../ui/button";
@@ -15,6 +21,7 @@ import { Calendar } from "../ui/calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { format } from "date-fns";
 import { cn } from "../../lib/utils";
+import { fetchServiceOrderDetail } from "../../hooks/use-appointments";
 
 const STATUS_OPTIONS: AppointmentStatus[] = [
   "Open",
@@ -42,13 +49,19 @@ interface ScheduleLeftPanelProps {
   loading: boolean;
   selectedAppointments: string[];
   statusFilter: string;
+  serviceOrderStatusFilter: string;
   appointmentDateRange: { startDate: Date | null; endDate: Date | null };
   onStatusFilterChange: (status: string) => void;
+  onServiceOrderFilterChange: (status: string) => void;
   onDateRangeChange: (range: { startDate: Date | null; endDate: Date | null }) => void;
   onAppointmentSelect: (appointmentId: string, checked: boolean) => void;
   onSelectAll: (checked: boolean) => void;
   onAppointmentClick: (appointment: Appointment) => void;
   onMassActionComplete: () => void;
+  mode: "orders" | "appointments";
+  onModeToggle: () => void;
+  serviceOrders: ServiceOrderSummary[];
+  serviceOrdersLoading: boolean;
 }
 
 export function ScheduleLeftPanel({
@@ -56,15 +69,24 @@ export function ScheduleLeftPanel({
   loading,
   selectedAppointments,
   statusFilter,
+  serviceOrderStatusFilter,
   appointmentDateRange,
   onStatusFilterChange,
+  onServiceOrderFilterChange,
   onDateRangeChange,
   onAppointmentSelect,
   onSelectAll,
   onAppointmentClick,
   onMassActionComplete,
+  mode,
+  onModeToggle,
+  serviceOrders,
+  serviceOrdersLoading,
 }: ScheduleLeftPanelProps) {
   const [selectedAppointment, setSelectedAppointment] = useState<Appointment | null>(null);
+  const [selectedServiceOrder, setSelectedServiceOrder] = useState<ServiceOrderDetail | null>(null);
+  const [serviceOrderSheetOpen, setServiceOrderSheetOpen] = useState(false);
+  const [serviceOrderDetailLoading, setServiceOrderDetailLoading] = useState(false);
   const [filtersPopoverOpen, setFiltersPopoverOpen] = useState(false);
   const [startDatePickerOpen, setStartDatePickerOpen] = useState(false);
   const [endDatePickerOpen, setEndDatePickerOpen] = useState(false);
@@ -116,128 +138,193 @@ export function ScheduleLeftPanel({
     onAppointmentClick(appointment);
   };
 
+  const formatOrderDate = (dateString?: string) => {
+    if (!dateString) return null;
+    try {
+      return format(new Date(dateString), "MMM d, yyyy");
+    } catch {
+      return dateString;
+    }
+  };
+
+  const getOrderStatusColor = (status?: string) => {
+    if (!status) return "border-border text-muted-foreground";
+    const normalized = status.toLowerCase();
+    if (normalized.includes("open") || normalized.includes("pending")) {
+      return "bg-blue-50 text-blue-700 border-blue-200";
+    }
+    if (normalized.includes("progress") || normalized.includes("dispatch")) {
+      return "bg-orange-50 text-orange-700 border-orange-200";
+    }
+    if (normalized.includes("complete") || normalized.includes("closed")) {
+      return "bg-green-50 text-green-700 border-green-200";
+    }
+    if (normalized.includes("cancel")) {
+      return "bg-gray-50 text-gray-600 border-gray-200";
+    }
+    return "border-border text-muted-foreground";
+  };
+
+  const getOrderPriorityColor = (priority?: string) => {
+    if (!priority) return "border-border text-muted-foreground";
+    const normalized = priority.toLowerCase();
+    if (normalized === "high") {
+      return "bg-red-50 text-red-700 border-red-200";
+    }
+    if (normalized === "medium") {
+      return "bg-amber-50 text-amber-700 border-amber-200";
+    }
+    if (normalized === "low") {
+      return "bg-emerald-50 text-emerald-700 border-emerald-200";
+    }
+    return "border-border text-muted-foreground";
+  };
+
+  const orderStatusOptions = Array.from(
+    new Set(
+      serviceOrders
+        .map((order) => (order.status || "").trim())
+        .filter((status) => !!status)
+    )
+  ).sort();
+
+  const filteredServiceOrders = serviceOrders.filter((order) => {
+    if (serviceOrderStatusFilter === "all") return true;
+    const status = (order.status || "").toLowerCase();
+    return status === serviceOrderStatusFilter.toLowerCase();
+  });
+
+  const handleServiceOrderClick = async (orderName: string) => {
+    try {
+      setServiceOrderDetailLoading(true);
+      setServiceOrderSheetOpen(true);
+      const detail = await fetchServiceOrderDetail(orderName);
+      setSelectedServiceOrder(detail);
+    } catch (error) {
+      console.error("Failed to load service order detail", error);
+    } finally {
+      setServiceOrderDetailLoading(false);
+    }
+  };
+
+  const renderServiceOrders = () => {
+    if (serviceOrdersLoading) {
+      return (
+        <div className="space-y-2 p-2">
+          {[1, 2, 3, 4].map((i) => (
+            <div key={i} className="space-y-2 p-3 border rounded-md">
+              <Skeleton className="h-4 w-3/4" />
+              <Skeleton className="h-3 w-full" />
+              <Skeleton className="h-3 w-1/2" />
+            </div>
+          ))}
+        </div>
+      );
+    }
+
+    if (!serviceOrdersLoading && filteredServiceOrders.length === 0) {
+      return (
+        <div className="p-8 text-center text-muted-foreground">
+          <p>No service orders found</p>
+        </div>
+      );
+    }
+
+    return (
+      <div className="p-2 space-y-2">
+        {filteredServiceOrders.map((order) => (
+          <div
+            key={order.name}
+            className="p-3 border rounded-md hover:bg-muted/50 transition-colors cursor-pointer"
+            onClick={() => handleServiceOrderClick(order.name)}
+          >
+            <div className="flex items-start justify-between gap-3">
+              <div className="min-w-0">
+                <p className="text-sm font-medium truncate">{order.name}</p>
+                {order.customer && (
+                  <p className="text-xs text-muted-foreground truncate">{order.customer}</p>
+                )}
+              </div>
+              {order.status && (
+                <Badge
+                  variant="outline"
+                  className={`text-xs border ${getOrderStatusColor(order.status)}`}
+                >
+                  {order.status}
+                </Badge>
+              )}
+            </div>
+            <div className="mt-3 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+              {order.priority && (
+                <span
+                  className={`px-2 py-0.5 rounded-full border ${getOrderPriorityColor(
+                    order.priority
+                  )}`}
+                >
+                  Priority: {order.priority}
+                </span>
+              )}
+              {order.type && (
+                <span className="px-2 py-0.5 rounded-full border border-border">
+                  {order.type}
+                </span>
+              )}
+              {formatOrderDate(order.posting_date) && (
+                <span>Created {formatOrderDate(order.posting_date)}</span>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    );
+  };
+
+  const isOrderMode = mode === "orders";
+
   return (
     <>
       <div className="flex flex-col h-full">
         {/* Header */}
         <div className="p-4 border-b border-border">
-          <div className="flex items-center justify-between mb-3">
-            <h2 className="text-lg font-semibold">Service Appointments</h2>
-            <Badge variant="secondary">{appointments.length}</Badge>
-          </div>
+          <div className="flex items-center justify-between mb-3 gap-3">
+            <div>
 
-          {/* Filter Section */}
-          <div className="flex items-center gap-2 mb-3">
-            {/* Filter Menu Button */}
-            <Popover open={filtersPopoverOpen} onOpenChange={setFiltersPopoverOpen}>
-              <PopoverTrigger asChild>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="h-8 w-8 p-0"
-                  title="More Filters"
-                >
-                  <Filter className="h-4 w-4" />
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="w-80" align="start">
-                <div className="space-y-4">
-                  <div className="space-y-2">
-                    <h4 className="font-medium text-sm">Date Range Filter</h4>
-
-                    {/* Start Date */}
-                    <div className="space-y-1">
-                      <label className="text-xs text-muted-foreground">From Date</label>
-                      <Popover open={startDatePickerOpen} onOpenChange={setStartDatePickerOpen}>
-                        <PopoverTrigger asChild>
-                          <Button
-                            variant="outline"
-                            className={cn(
-                              "w-full justify-start text-left font-normal",
-                              !appointmentDateRange.startDate && "text-muted-foreground"
-                            )}
-                            size="sm"
-                          >
-                            <CalendarIcon className="mr-2 h-4 w-4" />
-                            {appointmentDateRange.startDate ? (
-                              format(appointmentDateRange.startDate, "PPP")
-                            ) : (
-                              <span>Pick a date</span>
-                            )}
-                          </Button>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-auto p-0" align="start">
-                          <Calendar
-                            mode="single"
-                            selected={appointmentDateRange.startDate || undefined}
-                            onSelect={(date) => {
-                              if (date) {
-                                onDateRangeChange({
-                                  ...appointmentDateRange,
-                                  startDate: date,
-                                });
-                                setStartDatePickerOpen(false);
-                              }
-                            }}
-                            initialFocus
-                          />
-                        </PopoverContent>
-                      </Popover>
-                    </div>
-
-                    {/* End Date */}
-                    <div className="space-y-1">
-                      <label className="text-xs text-muted-foreground">To Date</label>
-                      <Popover open={endDatePickerOpen} onOpenChange={setEndDatePickerOpen}>
-                        <PopoverTrigger asChild>
-                          <Button
-                            variant="outline"
-                            className={cn(
-                              "w-full justify-start text-left font-normal",
-                              !appointmentDateRange.endDate && "text-muted-foreground"
-                            )}
-                            size="sm"
-                          >
-                            <CalendarIcon className="mr-2 h-4 w-4" />
-                            {appointmentDateRange.endDate ? (
-                              format(appointmentDateRange.endDate, "PPP")
-                            ) : (
-                              <span>Pick a date</span>
-                            )}
-                          </Button>
-                        </PopoverTrigger>
-                        <PopoverContent className="w-auto p-0" align="start">
-                          <Calendar
-                            mode="single"
-                            selected={appointmentDateRange.endDate || undefined}
-                            onSelect={(date) => {
-                              if (date) {
-                                onDateRangeChange({
-                                  ...appointmentDateRange,
-                                  endDate: date,
-                                });
-                                setEndDatePickerOpen(false);
-                              }
-                            }}
-                            initialFocus
-                          />
-                        </PopoverContent>
-                      </Popover>
-                    </div>
-                  </div>
-                </div>
-              </PopoverContent>
-            </Popover>
+              <h2 className="text-lg font-semibold">
+                {isOrderMode ? "Service Orders" : "Service Appointments"}
+              </h2>
+            </div>
+            <div className="flex items-center gap-2">
+              <Badge variant="secondary">
+                {isOrderMode ? serviceOrders.length : appointments.length}
+              </Badge>
+              <Button
+                variant={isOrderMode ? "outline" : "default"}
+                size="sm"
+                className={cn(
+                  "text-xs font-semibold transition-colors",
+                  isOrderMode
+                    ? "border-primary text-primary hover:bg-primary/10"
+                    : "bg-primary text-primary-foreground"
+                )}
+                onClick={onModeToggle}
+              >
+                {isOrderMode ? "View Appointments" : "View Service Orders"}
+              </Button>
+            </div>
+          </div>
 
-            {/* Status Filter - Always Visible */}
-            <div className="flex-1">
-              <Select value={statusFilter} onValueChange={onStatusFilterChange}>
+          {isOrderMode ? (
+            <div className="mb-3">
+              <Select
+                value={serviceOrderStatusFilter}
+                onValueChange={onServiceOrderFilterChange}
+              >
                 <SelectTrigger className="w-full">
                   <SelectValue placeholder="All Statuses" />
                 </SelectTrigger>
                 <SelectContent>
                   <SelectItem value="all">All Statuses</SelectItem>
-                  {STATUS_OPTIONS.map((status) => (
+                  {orderStatusOptions.map((status) => (
                     <SelectItem key={status} value={status}>
                       {status}
                     </SelectItem>
@@ -245,155 +332,282 @@ export function ScheduleLeftPanel({
                 </SelectContent>
               </Select>
             </div>
-          </div>
+          ) : (
+            <>
+              {/* Filter Section */}
+              <div className="flex items-center gap-2 mb-3">
+                {/* Filter Menu Button */}
+                <Popover open={filtersPopoverOpen} onOpenChange={setFiltersPopoverOpen}>
+                  <PopoverTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-8 w-8 p-0"
+                      title="More Filters"
+                    >
+                      <Filter className="h-4 w-4" />
+                    </Button>
+                  </PopoverTrigger>
+                  <PopoverContent className="w-80" align="start">
+                    <div className="space-y-4">
+                      <div className="space-y-2">
+                        <h4 className="font-medium text-sm">Date Range Filter</h4>
 
-          {/* Mass Actions */}
-          {selectedAppointments.length > 0 && (
-            <div className="mt-3 pt-3 border-t border-border">
-              <MassActionsDropdown
-                selectedAppointmentIds={selectedAppointments}
-                onComplete={onMassActionComplete}
-              />
-            </div>
+                        {/* Start Date */}
+                        <div className="space-y-1">
+                          <label className="text-xs text-muted-foreground">From Date</label>
+                          <Popover open={startDatePickerOpen} onOpenChange={setStartDatePickerOpen}>
+                            <PopoverTrigger asChild>
+                              <Button
+                                variant="outline"
+                                className={cn(
+                                  "w-full justify-start text-left font-normal",
+                                  !appointmentDateRange.startDate && "text-muted-foreground"
+                                )}
+                                size="sm"
+                              >
+                                <CalendarIcon className="mr-2 h-4 w-4" />
+                                {appointmentDateRange.startDate ? (
+                                  format(appointmentDateRange.startDate, "PPP")
+                                ) : (
+                                  <span>Pick a date</span>
+                                )}
+                              </Button>
+                            </PopoverTrigger>
+                            <PopoverContent className="w-auto p-0" align="start">
+                              <Calendar
+                                mode="single"
+                                selected={appointmentDateRange.startDate || undefined}
+                                onSelect={(date) => {
+                                  if (date) {
+                                    onDateRangeChange({
+                                      ...appointmentDateRange,
+                                      startDate: date,
+                                    });
+                                    setStartDatePickerOpen(false);
+                                  }
+                                }}
+                                initialFocus
+                              />
+                            </PopoverContent>
+                          </Popover>
+                        </div>
+
+                        {/* End Date */}
+                        <div className="space-y-1">
+                          <label className="text-xs text-muted-foreground">To Date</label>
+                          <Popover open={endDatePickerOpen} onOpenChange={setEndDatePickerOpen}>
+                            <PopoverTrigger asChild>
+                              <Button
+                                variant="outline"
+                                className={cn(
+                                  "w-full justify-start text-left font-normal",
+                                  !appointmentDateRange.endDate && "text-muted-foreground"
+                                )}
+                                size="sm"
+                              >
+                                <CalendarIcon className="mr-2 h-4 w-4" />
+                                {appointmentDateRange.endDate ? (
+                                  format(appointmentDateRange.endDate, "PPP")
+                                ) : (
+                                  <span>Pick a date</span>
+                                )}
+                              </Button>
+                            </PopoverTrigger>
+                            <PopoverContent className="w-auto p-0" align="start">
+                              <Calendar
+                                mode="single"
+                                selected={appointmentDateRange.endDate || undefined}
+                                onSelect={(date) => {
+                                  if (date) {
+                                    onDateRangeChange({
+                                      ...appointmentDateRange,
+                                      endDate: date,
+                                    });
+                                    setEndDatePickerOpen(false);
+                                  }
+                                }}
+                                initialFocus
+                              />
+                            </PopoverContent>
+                          </Popover>
+                        </div>
+                      </div>
+                    </div>
+                  </PopoverContent>
+                </Popover>
+
+                {/* Status Filter - Always Visible */}
+                <div className="flex-1">
+                  <Select value={statusFilter} onValueChange={onStatusFilterChange}>
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="All Statuses" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="all">All Statuses</SelectItem>
+                      {STATUS_OPTIONS.map((status) => (
+                        <SelectItem key={status} value={status}>
+                          {status}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+
+              {/* Mass Actions */}
+              {selectedAppointments.length > 0 && (
+                <div className="mt-3 pt-3 border-t border-border">
+                  <MassActionsDropdown
+                    selectedAppointmentIds={selectedAppointments}
+                    onComplete={onMassActionComplete}
+                  />
+                </div>
+              )}
+            </>
           )}
         </div>
 
         {/* Appointments List */}
         <ScrollArea className="flex-1">
-          <div className="p-2 space-y-1">
-            {/* Select All Checkbox */}
-            {appointments.length > 0 && (
-              <div className="flex items-center gap-2 p-2 hover:bg-muted/50 rounded-md">
-                <div className="relative">
-                  <Checkbox
-                    ref={selectAllCheckboxRef}
-                    checked={allSelected}
-                    onCheckedChange={onSelectAll}
-                    className={someSelected ? "data-[indeterminate=true]:bg-primary/50" : ""}
-                  />
-                  {someSelected && !allSelected && (
-                    <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
-                      <div className="w-2 h-0.5 bg-primary-foreground rounded"></div>
+          {isOrderMode ? (
+            renderServiceOrders()
+          ) : (
+            <div className="p-2 space-y-1">
+              {/* Select All Checkbox */}
+              {appointments.length > 0 && (
+                <div className="flex items-center gap-2 p-2 hover:bg-muted/50 rounded-md">
+                  <div className="relative">
+                    <Checkbox
+                      ref={selectAllCheckboxRef}
+                      checked={allSelected}
+                      onCheckedChange={onSelectAll}
+                      className={someSelected ? "data-[indeterminate=true]:bg-primary/50" : ""}
+                    />
+                    {someSelected && !allSelected && (
+                      <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+                        <div className="w-2 h-0.5 bg-primary-foreground rounded"></div>
+                      </div>
+                    )}
+                  </div>
+                  <span className="text-sm text-muted-foreground">
+                    {selectedAppointments.length > 0
+                      ? `${selectedAppointments.length} selected`
+                      : "Select all"}
+                  </span>
+                </div>
+              )}
+
+              {/* Loading State */}
+              {loading && (
+                <div className="space-y-2 p-2">
+                  {[1, 2, 3, 4].map((i) => (
+                    <div key={i} className="space-y-2 p-3 border rounded-md">
+                      <Skeleton className="h-4 w-3/4" />
+                      <Skeleton className="h-3 w-full" />
+                      <Skeleton className="h-3 w-1/2" />
                     </div>
-                  )}
+                  ))}
                 </div>
-                <span className="text-sm text-muted-foreground">
-                  {selectedAppointments.length > 0
-                    ? `${selectedAppointments.length} selected`
-                    : "Select all"}
-                </span>
-              </div>
-            )}
-
-            {/* Loading State */}
-            {loading && (
-              <div className="space-y-2 p-2">
-                {[1, 2, 3, 4].map((i) => (
-                  <div key={i} className="space-y-2 p-3 border rounded-md">
-                    <Skeleton className="h-4 w-3/4" />
-                    <Skeleton className="h-3 w-full" />
-                    <Skeleton className="h-3 w-1/2" />
-                  </div>
-                ))}
-              </div>
-            )}
+              )}
 
-            {/* Appointments */}
-            {!loading && appointments.length === 0 && (
-              <div className="p-8 text-center text-muted-foreground">
-                <p>No appointments found</p>
-              </div>
-            )}
-
-            {!loading &&
-              appointments.map((appointment) => {
-                const isSelected = selectedAppointments.includes(appointment.name);
-                const isCompleted = appointment.status === "Completed";
-                return (
-                  <div
-                    key={appointment.name}
-                    className={`
+              {/* Appointments */}
+              {!loading && appointments.length === 0 && (
+                <div className="p-8 text-center text-muted-foreground">
+                  <p>No appointments found</p>
+                </div>
+              )}
+
+              {!loading &&
+                appointments.map((appointment) => {
+                  const isSelected = selectedAppointments.includes(appointment.name);
+                  const isCompleted = appointment.status === "Completed";
+                  return (
+                    <div
+                      key={appointment.name}
+                      className={`
                       group relative p-3 border rounded-md cursor-pointer transition-colors
                       ${isSelected ? "bg-primary/5 border-primary" : "hover:bg-muted/50"}
                       ${isCompleted ? "opacity-80" : ""}
                     `}
-                    onClick={() => handleAppointmentClick(appointment)}
-                    draggable={!isCompleted}
-                    onDragStart={(e) => {
-                      if (isCompleted) {
-                        e.preventDefault();
-                        return;
-                      }
-                      // Package minimal data for drop target: id, duration, current start
-                      const start = appointment.scheduled_start_datetime
-                        ? new Date(appointment.scheduled_start_datetime).toISOString()
-                        : null;
-                      const end = appointment.scheduled_finish_datetime
-                        ? new Date(appointment.scheduled_finish_datetime).toISOString()
-                        : null;
-                      const durationMin = start && end ? Math.max(0, Math.round((new Date(end).getTime() - new Date(start).getTime()) / 60000)) : 60;
-                      e.dataTransfer.setData(
-                        "application/json",
-                        JSON.stringify({
-                          type: "appointment",
-                          id: appointment.name,
-                          durationMinutes: durationMin,
-                        })
-                      );
-                    }}
-                  >
-                    <div className="flex items-start gap-3">
-                      <Checkbox
-                        checked={isSelected}
-                        disabled={isCompleted}
-                        onCheckedChange={(checked) =>
-                          onAppointmentSelect(appointment.name, checked as boolean)
+                      onClick={() => handleAppointmentClick(appointment)}
+                      draggable={!isCompleted}
+                      onDragStart={(e) => {
+                        if (isCompleted) {
+                          e.preventDefault();
+                          return;
                         }
-                        onClick={(e) => e.stopPropagation()}
-                        className="mt-1"
-                      />
-                      <div className="flex-1 min-w-0">
-                        <div className="flex items-center justify-between mb-1">
-                          <span className="text-sm font-medium truncate">
-                            {appointment.service_order || appointment.name}
-                          </span>
-                          <Badge
-                            variant="outline"
-                            className={`text-xs ${getStatusColor(appointment.status)}`}
-                          >
-                            {appointment.status}
-                          </Badge>
-                        </div>
-                        <p className="text-xs text-muted-foreground mb-2 line-clamp-2">
-                          {getShortDescription(appointment)}
-                        </p>
-                        <div className="flex items-center gap-2 text-xs text-muted-foreground">
-                          {appointment.customer && (
-                            <span className="truncate">{appointment.customer}</span>
-                          )}
-                          {appointment.scheduled_start_datetime && (
-                            <>
-                              <span>•</span>
-                              <span>{formatDate(appointment.scheduled_start_datetime)}</span>
-                            </>
-                          )}
+                        // Package minimal data for drop target: id, duration, current start
+                        const start = appointment.scheduled_start_datetime
+                          ? new Date(appointment.scheduled_start_datetime).toISOString()
+                          : null;
+                        const end = appointment.scheduled_finish_datetime
+                          ? new Date(appointment.scheduled_finish_datetime).toISOString()
+                          : null;
+                        const durationMin = start && end ? Math.max(0, Math.round((new Date(end).getTime() - new Date(start).getTime()) / 60000)) : 60;
+                        e.dataTransfer.setData(
+                          "application/json",
+                          JSON.stringify({
+                            type: "appointment",
+                            id: appointment.name,
+                            durationMinutes: durationMin,
+                          })
+                        );
+                      }}
+                    >
+                      <div className="flex items-start gap-3">
+                        <Checkbox
+                          checked={isSelected}
+                          disabled={isCompleted}
+                          onCheckedChange={(checked) =>
+                            onAppointmentSelect(appointment.name, checked as boolean)
+                          }
+                          onClick={(e) => e.stopPropagation()}
+                          className="mt-1"
+                        />
+                        <div className="flex-1 min-w-0">
+                          <div className="flex items-center justify-between mb-1">
+                            <span className="text-sm font-medium truncate">
+                              {appointment.service_order || appointment.name}
+                            </span>
+                            <Badge
+                              variant="outline"
+                              className={`text-xs ${getStatusColor(appointment.status)}`}
+                            >
+                              {appointment.status}
+                            </Badge>
+                          </div>
+                          <p className="text-xs text-muted-foreground mb-2 line-clamp-2">
+                            {getShortDescription(appointment)}
+                          </p>
+                          <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                            {appointment.customer && (
+                              <span className="truncate">{appointment.customer}</span>
+                            )}
+                            {appointment.scheduled_start_datetime && (
+                              <>
+                                <span>•</span>
+                                <span>{formatDate(appointment.scheduled_start_datetime)}</span>
+                              </>
+                            )}
+                          </div>
+                          {appointment.service_technicians &&
+                            appointment.service_technicians.length > 0 && (
+                              <div className="mt-2 text-xs text-muted-foreground">
+                                <span>
+                                  {appointment.service_technicians
+                                    .map((t) => t.full_name)
+                                    .join(", ")}
+                                </span>
+                              </div>
+                            )}
                         </div>
-                        {appointment.service_technicians &&
-                          appointment.service_technicians.length > 0 && (
-                            <div className="mt-2 text-xs text-muted-foreground">
-                              <span>
-                                {appointment.service_technicians
-                                  .map((t) => t.full_name)
-                                  .join(", ")}
-                              </span>
-                            </div>
-                          )}
                       </div>
                     </div>
-                  </div>
-                );
-              })}
-          </div>
+                  );
+                })}
+            </div>
+          )}
         </ScrollArea>
       </div>
 
@@ -405,6 +619,18 @@ export function ScheduleLeftPanel({
           onOpenChange={(open) => !open && setSelectedAppointment(null)}
         />
       )}
+
+      <ServiceOrderDetailSheet
+        order={selectedServiceOrder}
+        open={serviceOrderSheetOpen}
+        loading={serviceOrderDetailLoading}
+        onOpenChange={(open) => {
+          setServiceOrderSheetOpen(open);
+          if (!open) {
+            setSelectedServiceOrder(null);
+          }
+        }}
+      />
     </>
   );
 }
diff --git a/schedule/src/components/schedule/schedule-right-panel.tsx b/schedule/src/components/schedule/schedule-right-panel.tsx
index ae18785..44aa43a 100644
--- a/schedule/src/components/schedule/schedule-right-panel.tsx
+++ b/schedule/src/components/schedule/schedule-right-panel.tsx
@@ -44,9 +44,10 @@ export function ScheduleRightPanel({
 }: ScheduleRightPanelProps) {
   const [datePickerOpen, setDatePickerOpen] = useState(false);
   const [technicianSearch, setTechnicianSearch] = useState("");
+  const [gridSearch, setGridSearch] = useState("");
   const [calendarMonth, setCalendarMonth] = useState(selectedDate);
   const [mapSearchQuery, setMapSearchQuery] = useState("");
-  const [mapDurationFilter, setMapDurationFilter] = useState<"thisWeek" | "thisMonth" | "thisYear" | "">("thisWeek");
+  const [mapDurationFilter, setMapDurationFilter] = useState<"date" | "today" | "thisWeek" | "thisMonth" | "thisYear">("thisWeek");
   const [theme, setTheme] = useState<"light" | "dark">(() => {
     if (typeof window !== "undefined") {
       const savedTheme = localStorage.getItem("theme") as "light" | "dark" | null;
@@ -56,14 +57,6 @@ export function ScheduleRightPanel({
     return "light";
   });
 
-  // Auto-clear duration filter when a specific date is selected (not today)
-  // Only clear if duration filter is currently set (not already empty)
-  useEffect(() => {
-    if (viewType === "maps" && !isToday(selectedDate) && mapDurationFilter) {
-      setMapDurationFilter("");
-    }
-  }, [selectedDate, viewType]);
-
   // Apply theme to document
   useEffect(() => {
     const root = document.documentElement;
@@ -115,6 +108,8 @@ export function ScheduleRightPanel({
     onDateChange(newDate);
   };
 
+  const shouldShowDateControls = viewType !== "maps" || mapDurationFilter === "date";
+
   return (
     <div className="flex flex-col h-full">
       {/* Section 1: View Type Switcher (Top) */}
@@ -177,101 +172,112 @@ export function ScheduleRightPanel({
       <div className="border-b border-border p-4 bg-card">
         <div className="flex items-center justify-between gap-3">
           <div className="flex items-center gap-3">
-            {viewType === "calendar" ? (
-              <>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => setCalendarMonth(subMonths(calendarMonth, 1))}
-                  className="h-8 w-8 p-0"
-                >
-                  ←
-                </Button>
-                <h2 className="text-xl font-semibold min-w-[140px]">
-                  {format(calendarMonth, "MMMM yyyy")}
-                </h2>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={() => setCalendarMonth(addMonths(calendarMonth, 1))}
-                  className="h-8 w-8 p-0"
-                >
-                  →
-                </Button>
-              </>
-            ) : (
-              <>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => handleDateNavigation("prev")}
-            >
-              ←
-            </Button>
-            <Popover open={datePickerOpen} onOpenChange={setDatePickerOpen}>
-              <PopoverTrigger asChild>
-                <Button
-                  variant="outline"
-                  className={cn(
-                    "w-auto min-w-[140px] justify-start text-left font-normal px-3",
-                    !selectedDate && "text-muted-foreground"
-                  )}
-                >
-                  <CalendarIcon className="mr-2 h-4 w-4" />
-                  {selectedDate ? (
-                    <span>{formatDateDisplay(selectedDate)}</span>
-                  ) : (
-                    <span>Pick a date</span>
-                  )}
-                </Button>
-              </PopoverTrigger>
-              <PopoverContent className="w-auto p-0" align="start">
-                <Calendar
-                  mode="single"
-                  selected={selectedDate}
-                  onSelect={(date) => {
-                    if (date) {
-                      onDateChange(date);
-                      setDatePickerOpen(false);
-                    }
-                  }}
-                  initialFocus
-                />
-              </PopoverContent>
-            </Popover>
-            <Button
-              variant="outline"
-              size="sm"
-              onClick={() => handleDateNavigation("next")}
-            >
-              →
-            </Button>
-              </>
-            )}
-          </div>
-
-          {/* Right side controls */}
-          <div className="flex items-center gap-3">
-            {/* Map Duration Filter - Only show in maps view */}
             {viewType === "maps" && (
-              <Select value={mapDurationFilter || "date"} onValueChange={(value: "thisWeek" | "thisMonth" | "thisYear" | "date") => {
-                if (value === "date") {
-                  setMapDurationFilter("");
-                } else {
+              <Select
+                value={mapDurationFilter}
+                onValueChange={(
+                  value:
+                    | "date"
+                    | "today"
+                    | "thisWeek"
+                    | "thisMonth"
+                    | "thisYear"
+                ) => {
                   setMapDurationFilter(value);
-                }
-              }}>
+                }}
+              >
                 <SelectTrigger className="w-40">
-                  <SelectValue placeholder="Selected Date" />
+                  <SelectValue placeholder="Select Date" />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="date">Selected Date</SelectItem>
+                  <SelectItem value="date">Select Date</SelectItem>
+                  <SelectItem value="today">Today</SelectItem>
                   <SelectItem value="thisWeek">This Week</SelectItem>
                   <SelectItem value="thisMonth">This Month</SelectItem>
                   <SelectItem value="thisYear">This Year</SelectItem>
                 </SelectContent>
               </Select>
             )}
+            {shouldShowDateControls &&
+              (viewType === "calendar" ? (
+                <>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() =>
+                      setCalendarMonth(subMonths(calendarMonth, 1))
+                    }
+                    className="h-8 w-8 p-0"
+                  >
+                    ←
+                  </Button>
+                  <h2 className="text-xl font-semibold min-w-[140px]">
+                    {format(calendarMonth, "MMMM yyyy")}
+                  </h2>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() =>
+                      setCalendarMonth(addMonths(calendarMonth, 1))
+                    }
+                    className="h-8 w-8 p-0"
+                  >
+                    →
+                  </Button>
+                </>
+              ) : (
+                <>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handleDateNavigation("prev")}
+                  >
+                    ←
+                  </Button>
+                  <Popover open={datePickerOpen} onOpenChange={setDatePickerOpen}>
+                    <PopoverTrigger asChild>
+                      <Button
+                        variant="outline"
+                        className={cn(
+                          "w-auto min-w-[140px] justify-start text-left font-normal px-3",
+                          !selectedDate && "text-muted-foreground"
+                        )}
+                      >
+                        <CalendarIcon className="mr-2 h-4 w-4" />
+                        {selectedDate ? (
+                          <span>{formatDateDisplay(selectedDate)}</span>
+                        ) : (
+                          <span>Pick a date</span>
+                        )}
+                      </Button>
+                    </PopoverTrigger>
+                    <PopoverContent className="w-auto p-0" align="start">
+                      <Calendar
+                        mode="single"
+                        selected={selectedDate}
+                        onSelect={(date) => {
+                          if (date) {
+                            onDateChange(date);
+                            setDatePickerOpen(false);
+                          }
+                        }}
+                        initialFocus
+                      />
+                    </PopoverContent>
+                  </Popover>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handleDateNavigation("next")}
+                  >
+                    →
+                  </Button>
+                </>
+              ))}
+          </div>
+
+          {/* Right side controls */}
+          <div className="flex items-center gap-3">
             {/* Map Search - Only show in maps view */}
             {viewType === "maps" && (
               <div className="relative w-64">
@@ -284,8 +290,21 @@ export function ScheduleRightPanel({
                 />
               </div>
             )}
-            {/* Technician Search - Hidden in calendar and maps view */}
-            {viewType !== "calendar" && viewType !== "maps" && (
+            {/* Grid appointment search (includes technicians) */}
+            {viewType === "grid" ? (
+              <div className="relative w-72">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  placeholder="Search appointments, customers, or technicians..."
+                  value={gridSearch}
+                  onChange={(e) => setGridSearch(e.target.value)}
+                  className="pl-9"
+                />
+              </div>
+            ) : (
+              /* Technician search for gantt view */
+              viewType !== "calendar" &&
+              viewType !== "maps" && (
               <div className="relative w-64">
                 <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
                 <Input
@@ -295,6 +314,7 @@ export function ScheduleRightPanel({
                   className="pl-9"
                 />
               </div>
+              )
             )}
           </div>
         </div>
@@ -318,7 +338,7 @@ export function ScheduleRightPanel({
             statusFilter={statusFilter}
             technicianSearch={technicianSearch}
             searchQuery={mapSearchQuery}
-            durationFilter={mapDurationFilter || undefined}
+            durationFilter={mapDurationFilter}
           />
         )}
         {viewType === "grid" && (
@@ -326,6 +346,7 @@ export function ScheduleRightPanel({
             appointments={appointments}
             selectedDate={selectedDate}
             onAppointmentClick={onAppointmentSelect}
+            searchQuery={gridSearch}
           />
         )}
         {viewType === "calendar" && (
diff --git a/schedule/src/components/schedule/service-order-detail-sheet.tsx b/schedule/src/components/schedule/service-order-detail-sheet.tsx
new file mode 100644
index 0000000..e3c037a
--- /dev/null
+++ b/schedule/src/components/schedule/service-order-detail-sheet.tsx
@@ -0,0 +1,194 @@
+"use client";
+
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "../ui/sheet";
+import { Badge } from "../ui/badge";
+import { Separator } from "../ui/separator";
+import { format } from "date-fns";
+import { ServiceOrderDetail } from "../../pages/schedule/types";
+import { ScrollArea } from "../ui/scroll-area";
+
+interface ServiceOrderDetailSheetProps {
+  order: ServiceOrderDetail | null;
+  open: boolean;
+  loading?: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const getStatusBadgeColor = (status?: string) => {
+  if (!status) return "border-border text-muted-foreground";
+  const normalized = status.toLowerCase();
+  if (normalized.includes("open") || normalized.includes("pending")) {
+    return "bg-blue-100 text-blue-800 border-blue-200";
+  }
+  if (normalized.includes("progress") || normalized.includes("dispatch")) {
+    return "bg-orange-100 text-orange-800 border-orange-200";
+  }
+  if (normalized.includes("complete") || normalized.includes("close")) {
+    return "bg-green-100 text-green-800 border-green-200";
+  }
+  if (normalized.includes("cancel")) {
+    return "bg-gray-100 text-gray-700 border-gray-200";
+  }
+  return "border-border text-muted-foreground";
+};
+
+const formatDate = (dateString?: string) => {
+  if (!dateString) return null;
+  try {
+    return format(new Date(dateString), "PPP");
+  } catch {
+    return dateString;
+  }
+};
+
+export function ServiceOrderDetailSheet({
+  order,
+  open,
+  loading,
+  onOpenChange,
+}: ServiceOrderDetailSheetProps) {
+  return (
+    <Sheet open={open} onOpenChange={onOpenChange}>
+      <SheetContent className="w-full sm:max-w-2xl overflow-hidden">
+        <SheetHeader>
+          <div className="flex items-center justify-between gap-3">
+            <div className="min-w-0">
+              <SheetTitle>Service Order Details</SheetTitle>
+              <SheetDescription className="truncate">{order?.name}</SheetDescription>
+            </div>
+            {order?.status && (
+              <Badge variant="outline" className={getStatusBadgeColor(order.status)}>
+                {order.status}
+              </Badge>
+            )}
+          </div>
+        </SheetHeader>
+
+        <ScrollArea className="mt-6 h-[calc(100vh-9rem)] pr-4">
+          {loading || !order ? (
+            <div className="text-center text-muted-foreground py-10">Loading order details…</div>
+          ) : (
+            <div className="space-y-6">
+              <section>
+                <h3 className="text-sm font-semibold mb-3">Summary</h3>
+                <div className="space-y-2 text-sm">
+                  <div className="flex justify-between">
+                    <span className="text-muted-foreground">Customer</span>
+                    <span className="font-medium">{order.customer || "—"}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-muted-foreground">Priority</span>
+                    <span className="font-medium">{order.priority || "—"}</span>
+                  </div>
+                  {order.type && (
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">Service Type</span>
+                      <span className="font-medium">{order.type}</span>
+                    </div>
+                  )}
+                  {formatDate(order.posting_date) && (
+                    <div className="flex justify-between">
+                      <span className="text-muted-foreground">Posting Date</span>
+                      <span className="font-medium">{formatDate(order.posting_date)}</span>
+                    </div>
+                  )}
+                </div>
+              </section>
+
+              <Separator />
+
+              <section>
+                <h3 className="text-sm font-semibold mb-3">Linked Documents</h3>
+                <div className="space-y-2 text-sm">
+                  <div className="flex justify-between">
+                    <span className="text-muted-foreground">Service Request</span>
+                    <span className="font-medium">{order.service_request || "—"}</span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-muted-foreground">Service Quotation</span>
+                    <span className="font-medium">{order.service_quotation || "—"}</span>
+                  </div>
+                </div>
+              </section>
+
+              <Separator />
+
+              <section>
+                <h3 className="text-sm font-semibold mb-3">Financials</h3>
+                <div className="space-y-2 text-sm">
+                  <div className="flex justify-between">
+                    <span className="text-muted-foreground">Service Total</span>
+                    <span className="font-medium">
+                      {order.service_total !== undefined ? order.service_total : "—"}
+                    </span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-muted-foreground">Spare Parts Total</span>
+                    <span className="font-medium">
+                      {order.spareparts_total !== undefined ? order.spareparts_total : "—"}
+                    </span>
+                  </div>
+                  <div className="flex justify-between">
+                    <span className="text-muted-foreground">Grand Total</span>
+                    <span className="font-semibold">
+                      {order.grand_total !== undefined ? order.grand_total : "—"}
+                    </span>
+                  </div>
+                </div>
+              </section>
+
+              <Separator />
+
+              {order.items && order.items.length > 0 && (
+                <section>
+                  <h3 className="text-sm font-semibold mb-3">Items</h3>
+                  <div className="space-y-2">
+                    {order.items.map((item, idx) => (
+                      <div
+                        key={`${item.item_code}-${idx}`}
+                        className="p-3 border rounded-md space-y-1 text-sm"
+                      >
+                        <div className="flex justify-between">
+                          <span className="font-medium">{item.item_name || item.item_code}</span>
+                          <span className="text-muted-foreground">
+                            {item.qty} {item.uom || ""}
+                          </span>
+                        </div>
+                        {item.description && (
+                          <p className="text-xs text-muted-foreground">{item.description}</p>
+                        )}
+                        {item.invoice_status && (
+                          <p className="text-xs text-muted-foreground">
+                            Invoice Status: {item.invoice_status}
+                          </p>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </section>
+              )}
+
+              {order.notes && (
+                <>
+                  <Separator />
+                  <section>
+                    <h3 className="text-sm font-semibold mb-3">Notes</h3>
+                    <p className="text-sm text-muted-foreground whitespace-pre-wrap">
+                      {order.notes}
+                    </p>
+                  </section>
+                </>
+              )}
+            </div>
+          )}
+        </ScrollArea>
+      </SheetContent>
+    </Sheet>
+  );
+}
diff --git a/schedule/src/components/schedule/settings-view.tsx b/schedule/src/components/schedule/settings-view.tsx
index 5296f50..2da783c 100644
--- a/schedule/src/components/schedule/settings-view.tsx
+++ b/schedule/src/components/schedule/settings-view.tsx
@@ -152,15 +152,21 @@ export function SettingsView({ onBack }: SettingsViewProps) {
   const currentLanguage = languages.find(l => l.code === language) || languages[0];
 
   return (
-    <div className="flex flex-col gap-6 w-full h-full overflow-y-auto p-6">
-      {onBack && (
-        <Button variant="ghost" onClick={onBack} className="w-fit">
-          ← Back
-        </Button>
-      )}
-
-      <div className="flex items-center justify-between">
-        <h2 className="text-2xl font-bold">Settings</h2>
+    <div className="flex flex-col gap-6 w-full h-full overflow-y-auto">
+      <div className="w-full bg-gradient-to-b from-primary/80 via-primary/60 to-primary/20 text-primary-foreground shadow-md border-b border-primary/20">
+        <div className="max-w-6xl mx-auto px-6 py-4 min-h-[70px] flex items-center justify-between">
+          <div className="flex-1">
+            {onBack && (
+              <Button variant="secondary" onClick={onBack} className="whitespace-nowrap">
+                ← Back
+              </Button>
+            )}
+          </div>
+          <div className="flex-1 text-center">
+            <p className="text-sm uppercase tracking-[0.4em] opacity-80">Settings</p>
+          </div>
+          <div className="flex-1" />
+        </div>
       </div>
 
       <Card>
diff --git a/schedule/src/components/service-request/service-requests-view.tsx b/schedule/src/components/service-request/service-requests-view.tsx
new file mode 100644
index 0000000..18131a8
--- /dev/null
+++ b/schedule/src/components/service-request/service-requests-view.tsx
@@ -0,0 +1,336 @@
+"use client";
+
+import { useEffect, useMemo, useState } from "react";
+import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { ScrollArea } from "../ui/scroll-area";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../ui/select";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../ui/table";
+import { Skeleton } from "../ui/skeleton";
+import { RefreshCcw, Search } from "lucide-react";
+import { fetchServiceRequests } from "../../hooks/use-service-requests";
+import { ServiceRequest } from "../../pages/schedule/types";
+import { format } from "date-fns";
+
+const STATUS_OPTIONS = [
+  "Open",
+  "Quotation",
+  "Converted",
+  "Due Soon",
+  "Overdue",
+  "On Hold",
+  "Closed",
+];
+
+const statusColors: Record<string, string> = {
+  Open: "bg-blue-100 text-blue-800 border-blue-300",
+  "Due Soon": "bg-amber-100 text-amber-800 border-amber-300",
+  Overdue: "bg-red-100 text-red-800 border-red-300",
+  Converted: "bg-emerald-100 text-emerald-800 border-emerald-300",
+  "On Hold": "bg-gray-200 text-gray-800 border-gray-300",
+  Quotation: "bg-indigo-100 text-indigo-800 border-indigo-300",
+  Closed: "bg-slate-100 text-slate-800 border-slate-300",
+};
+
+const formatDate = (value?: string) => {
+  if (!value) return "—";
+  try {
+    return format(new Date(value), "MMM d, yyyy");
+  } catch {
+    return value;
+  }
+};
+
+export function ServiceRequestsView() {
+  const [requests, setRequests] = useState<ServiceRequest[]>([]);
+  const [selectedRequestId, setSelectedRequestId] = useState<string | null>(null);
+  const [statusFilter, setStatusFilter] = useState("all");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    loadRequests();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [statusFilter]);
+
+  const loadRequests = async () => {
+    try {
+      setLoading(true);
+      const data = await fetchServiceRequests({
+        status: statusFilter,
+        limit: 100,
+      });
+      setRequests(data);
+      if (!selectedRequestId && data.length) {
+        setSelectedRequestId(data[0].name);
+      } else if (selectedRequestId && !data.find((req) => req.name === selectedRequestId)) {
+        setSelectedRequestId(data[0]?.name ?? null);
+      }
+    } catch (error) {
+      console.error("Failed to load service requests", error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const filteredRequests = useMemo(() => {
+    if (!searchQuery.trim()) {
+      return requests;
+    }
+    const term = searchQuery.toLowerCase();
+    return requests.filter((req) => {
+      return (
+        req.name?.toLowerCase().includes(term) ||
+        req.subject?.toLowerCase().includes(term) ||
+        req.customer?.toLowerCase().includes(term) ||
+        req.serial_no?.toLowerCase().includes(term) ||
+        req.item_code?.toLowerCase().includes(term) ||
+        req.product_movement?.some(
+          (mv) =>
+            mv.destination?.toLowerCase().includes(term) ||
+            mv.movement_type?.toLowerCase().includes(term)
+        )
+      );
+    });
+  }, [requests, searchQuery]);
+
+  useEffect(() => {
+    if (!filteredRequests.length) {
+      setSelectedRequestId(null);
+      return;
+    }
+    if (!selectedRequestId || !filteredRequests.find((req) => req.name === selectedRequestId)) {
+      setSelectedRequestId(filteredRequests[0].name);
+    }
+  }, [filteredRequests, selectedRequestId]);
+
+  const selectedRequest =
+    filteredRequests.find((req) => req.name === selectedRequestId) || filteredRequests[0] || null;
+
+  return (
+    <div className="flex flex-1 h-full bg-background">
+      {/* Left Pane */}
+      <div className="w-[25%] border-r border-border flex flex-col bg-card/40">
+        <div className="p-4 border-b border-border space-y-3">
+          <div className="flex items-center justify-between">
+            <div>
+              <h2 className="text-lg font-semibold">Service Requests</h2>
+              <p className="text-xs text-muted-foreground">
+                Track requests and their movement history
+              </p>
+            </div>
+            <Badge variant="secondary">{filteredRequests.length}</Badge>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="flex-1 relative">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+              <Input
+                placeholder="Search by ID, customer, serial..."
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="pl-9"
+              />
+            </div>
+            <Button variant="outline" size="icon" onClick={loadRequests} disabled={loading}>
+              <RefreshCcw className={`h-4 w-4 ${loading ? "animate-spin" : ""}`} />
+            </Button>
+          </div>
+          <Select value={statusFilter} onValueChange={setStatusFilter}>
+            <SelectTrigger>
+              <SelectValue placeholder="All statuses" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Statuses</SelectItem>
+              {STATUS_OPTIONS.map((status) => (
+                <SelectItem key={status} value={status}>
+                  {status}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <ScrollArea className="flex-1">
+          <div className="p-3 space-y-2">
+            {loading &&
+              [1, 2, 3, 4].map((i) => (
+                <div key={i} className="border rounded-md p-3 space-y-2">
+                  <Skeleton className="h-4 w-3/4" />
+                  <Skeleton className="h-3 w-full" />
+                  <Skeleton className="h-3 w-1/2" />
+                </div>
+              ))}
+
+            {!loading && filteredRequests.length === 0 && (
+              <div className="text-center text-sm text-muted-foreground py-10">
+                No service requests found
+              </div>
+            )}
+
+            {!loading &&
+              filteredRequests.map((req) => {
+                const isActive = selectedRequest?.name === req.name;
+                const badgeColor =
+                  statusColors[req.status] || "bg-gray-100 text-gray-800 border-gray-300";
+                return (
+                  <button
+                    key={req.name}
+                    className={`w-full text-left border rounded-lg p-3 transition-colors ${
+                      isActive ? "border-primary bg-primary/5" : "hover:bg-muted/50"
+                    }`}
+                    onClick={() => setSelectedRequestId(req.name)}
+                  >
+                    <div className="flex items-center justify-between gap-2">
+                      <p className="text-sm font-semibold truncate">
+                        {req.subject || req.name}
+                      </p>
+                      <Badge variant="outline" className={`text-xs ${badgeColor}`}>
+                        {req.status}
+                      </Badge>
+                    </div>
+                    <p className="text-xs text-muted-foreground truncate">
+                      {req.customer || "No customer"}
+                    </p>
+                    <div className="mt-2 text-xs text-muted-foreground flex flex-wrap gap-2">
+                      {req.serial_no && <span>Serial: {req.serial_no}</span>}
+                      {req.item_code && <span>Item: {req.item_code}</span>}
+                    </div>
+                    <div className="mt-1 text-xs text-muted-foreground">
+                      {req.posting_date ? `Created ${formatDate(req.posting_date)}` : ""}
+                    </div>
+                  </button>
+                );
+              })}
+          </div>
+        </ScrollArea>
+      </div>
+
+      {/* Right Pane */}
+      <div className="flex-1 overflow-hidden">
+        {selectedRequest ? (
+          <div className="h-full flex flex-col">
+            <div className="border-b border-border px-6 py-4 bg-card/60 flex items-center justify-between">
+              <div>
+                <p className="text-xs uppercase tracking-[0.3em] text-muted-foreground">
+                  Service Request
+                </p>
+                <h2 className="text-2xl font-semibold">
+                  {selectedRequest.subject || selectedRequest.name}
+                </h2>
+                <p className="text-sm text-muted-foreground">
+                  {selectedRequest.customer || "No customer specified"}
+                </p>
+              </div>
+              <Badge variant="outline" className={statusColors[selectedRequest.status] ?? ""}>
+                {selectedRequest.status}
+              </Badge>
+            </div>
+            <ScrollArea className="flex-1">
+              <div className="p-6 space-y-6">
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                  <div className="p-4 border rounded-lg bg-card shadow-sm">
+                    <p className="text-xs text-muted-foreground uppercase">Serial No</p>
+                    <p className="text-lg font-semibold">
+                      {selectedRequest.serial_no || "Not linked"}
+                    </p>
+                  </div>
+                  <div className="p-4 border rounded-lg bg-card shadow-sm">
+                    <p className="text-xs text-muted-foreground uppercase">Item</p>
+                    <p className="text-lg font-semibold">
+                      {selectedRequest.item_code || "Not set"}
+                    </p>
+                  </div>
+                  <div className="p-4 border rounded-lg bg-card shadow-sm">
+                    <p className="text-xs text-muted-foreground uppercase">Current Location</p>
+                    <p className="text-lg font-semibold">
+                      {selectedRequest.current_product_location || "Unknown"}
+                    </p>
+                  </div>
+                  <div className="p-4 border rounded-lg bg-card shadow-sm">
+                    <p className="text-xs text-muted-foreground uppercase">Due Date</p>
+                    <p className="text-lg font-semibold">{formatDate(selectedRequest.due_date)}</p>
+                  </div>
+                </div>
+
+                {selectedRequest.description && (
+                  <div className="border rounded-lg bg-card shadow-sm">
+                    <div className="border-b border-border px-4 py-2">
+                      <h3 className="text-sm font-semibold">Notes</h3>
+                    </div>
+                    <p className="px-4 py-3 text-sm text-muted-foreground whitespace-pre-wrap">
+                      {selectedRequest.description}
+                    </p>
+                  </div>
+                )}
+
+                <div className="border rounded-lg bg-card shadow-sm overflow-hidden">
+                  <div className="border-b border-border px-4 py-3 flex items-center justify-between">
+                    <div>
+                      <h3 className="text-base font-semibold">Movement Tracker</h3>
+                      <p className="text-xs text-muted-foreground">
+                        Latest known location changes for this item
+                      </p>
+                    </div>
+                    <Badge variant="secondary">
+                      {selectedRequest.product_movement?.length || 0} entries
+                    </Badge>
+                  </div>
+
+                  {selectedRequest.product_movement && selectedRequest.product_movement.length ? (
+                    <div className="overflow-auto">
+                      <Table>
+                        <TableHeader>
+                          <TableRow>
+                            <TableHead>Date</TableHead>
+                            <TableHead>Current Location</TableHead>
+                            <TableHead>Destination</TableHead>
+                            <TableHead>Linked Document</TableHead>
+                            <TableHead>Handled By</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {[...selectedRequest.product_movement]
+                            .sort((a, b) => {
+                              const aTime = a.movement_date ? new Date(a.movement_date).getTime() : 0;
+                              const bTime = b.movement_date ? new Date(b.movement_date).getTime() : 0;
+                              return bTime - aTime;
+                            })
+                            .map((movement) => (
+                              <TableRow key={movement.name}>
+                                <TableCell>{formatDate(movement.movement_date)}</TableCell>
+                                <TableCell>{movement.movement_type || "—"}</TableCell>
+                                <TableCell>{movement.destination || "—"}</TableCell>
+                                <TableCell>
+                                  {movement.linked_document ? (
+                                    <span>
+                                      {movement.linked_document_type || ""}{" "}
+                                      <span className="font-medium">{movement.linked_document}</span>
+                                    </span>
+                                  ) : (
+                                    "—"
+                                  )}
+                                </TableCell>
+                                <TableCell>{movement.handled_by || "—"}</TableCell>
+                              </TableRow>
+                            ))}
+                        </TableBody>
+                      </Table>
+                    </div>
+                  ) : (
+                    <div className="p-6 text-center text-muted-foreground text-sm">
+                      No movement entries recorded yet for this request.
+                    </div>
+                  )}
+                </div>
+              </div>
+            </ScrollArea>
+          </div>
+        ) : (
+          <div className="h-full flex items-center justify-center text-muted-foreground">
+            No service request selected
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/schedule/src/hooks/use-appointments.ts b/schedule/src/hooks/use-appointments.ts
index 21f3ac9..e432cbb 100644
--- a/schedule/src/hooks/use-appointments.ts
+++ b/schedule/src/hooks/use-appointments.ts
@@ -1,4 +1,4 @@
-import { Appointment } from "../pages/schedule/types";
+import { Appointment, ServiceOrderDetail } from "../pages/schedule/types";
 
 export async function fetchAppointmentsWithFilter(
   startDate: Date | null,
@@ -178,15 +178,77 @@ export interface CreateAppointmentTechnician {
 export async function fetchServiceOrders(): Promise<any[]> {
   //eslint-disable-next-line @typescript-eslint/no-explicit-any
   const csrfToken = (window as any).csrf_token;
-  const url = '/api/resource/Service Order?fields=["name","customer","type"]&limit_page_length=50';
+
+  const params = new URLSearchParams({
+    fields: JSON.stringify(["name", "customer", "status", "priority", "posting_date", "type"]),
+    filters: JSON.stringify([["docstatus", "=", 1]]),
+    order_by: "posting_date desc",
+    limit_page_length: "50",
+  });
+
+  const url = `/api/resource/Service Order?${params.toString()}`;
+
   const resp = await fetch(url, {
-    headers: { Accept: "application/json", "Content-Type": "application/json", "X-Frappe-CSRF-Token": csrfToken },
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+      "X-Frappe-CSRF-Token": csrfToken,
+    },
     credentials: "include",
   });
+
+  if (!resp.ok) {
+    throw new Error(`Failed to fetch service orders: ${resp.statusText}`);
+  }
+
   const json = await resp.json();
   return json.data || [];
 }
 
+export async function fetchServiceOrderDetail(name: string): Promise<ServiceOrderDetail> {
+  //eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const csrfToken = (window as any).csrf_token;
+
+  const url = `/api/resource/Service Order/${encodeURIComponent(name)}`;
+
+  const resp = await fetch(url, {
+    headers: {
+      Accept: "application/json",
+      "Content-Type": "application/json",
+      "X-Frappe-CSRF-Token": csrfToken,
+    },
+    credentials: "include",
+  });
+
+  if (!resp.ok) {
+    throw new Error(`Failed to fetch service order: ${resp.statusText}`);
+  }
+
+  const json = await resp.json();
+  return json.data || json.data?.data || json;
+}
+
+export async function fetchAvailableServiceOrders(): Promise<any[]> {
+  //eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const csrfToken = (window as any).csrf_token;
+  const resp = await fetch(
+    "/api/method/beveren_fsm.field_service_management.api.schedule.get_unassigned_service_orders",
+    {
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        "X-Frappe-CSRF-Token": csrfToken,
+      },
+      credentials: "include",
+    }
+  );
+  if (!resp.ok) {
+    throw new Error(`Failed to fetch available service orders: ${resp.statusText}`);
+  }
+  const json = await resp.json();
+  return json.message || [];
+}
+
 //eslint-disable-next-line @typescript-eslint/no-explicit-any
 export async function fetchCustomers(): Promise<any[]> {
   //eslint-disable-next-line @typescript-eslint/no-explicit-any
diff --git a/schedule/src/hooks/use-service-requests.ts b/schedule/src/hooks/use-service-requests.ts
new file mode 100644
index 0000000..6939c67
--- /dev/null
+++ b/schedule/src/hooks/use-service-requests.ts
@@ -0,0 +1,60 @@
+import { ServiceRequest } from "../pages/schedule/types";
+
+interface ServiceRequestFilters {
+  status?: string;
+  startDate?: Date | null;
+  endDate?: Date | null;
+  search?: string;
+  limit?: number;
+}
+
+export async function fetchServiceRequests(filters: ServiceRequestFilters = {}): Promise<ServiceRequest[]> {
+  try {
+    //eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const csrfToken = (window as any).csrf_token;
+    const params = new URLSearchParams();
+
+    if (filters.status && filters.status !== "all") {
+      params.append("status", filters.status);
+    }
+
+    if (filters.startDate) {
+      params.append("start_date", filters.startDate.toISOString().split("T")[0]);
+    }
+
+    if (filters.endDate) {
+      params.append("end_date", filters.endDate.toISOString().split("T")[0]);
+    }
+
+    if (filters.search) {
+      params.append("search", filters.search);
+    }
+
+    if (filters.limit) {
+      params.append("limit_page_length", String(filters.limit));
+    }
+
+    const url = `/api/method/beveren_fsm.field_service_management.api.service_request.get_service_requests?${
+      params.toString()
+    }`;
+
+    const response = await fetch(url, {
+      headers: {
+        Accept: "application/json",
+        "Content-Type": "application/json",
+        "X-Frappe-CSRF-Token": csrfToken,
+      },
+      credentials: "include",
+    });
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch service requests: ${response.statusText}`);
+    }
+
+    const result = await response.json();
+    return result.message || [];
+  } catch (error) {
+    console.error("Error fetching service requests:", error);
+    throw error;
+  }
+}
diff --git a/schedule/src/index.css b/schedule/src/index.css
index 87b4ffe..82ab812 100644
--- a/schedule/src/index.css
+++ b/schedule/src/index.css
@@ -32,7 +32,7 @@
     --card-foreground: 210 40% 98%;
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
-    --primary: 204 87% 53%;
+    --primary: 0 0% 7%;
     --primary-foreground: 0 0% 100%;
     --secondary: 122 39% 49%;
     --secondary-foreground: 0 0% 100%;
@@ -44,7 +44,7 @@
     --destructive-foreground: 210 40% 98%;
     --border: 217.2 32.6% 17.5%;
     --input: 217.2 32.6% 17.5%;
-    --ring: 204 87% 53%;
+    --ring: 0 0% 7%;
   }
   * {
     @apply border-border;
diff --git a/schedule/src/pages/schedule/schedule.tsx b/schedule/src/pages/schedule/schedule.tsx
index 9e83faa..ae671be 100644
--- a/schedule/src/pages/schedule/schedule.tsx
+++ b/schedule/src/pages/schedule/schedule.tsx
@@ -6,9 +6,10 @@ import { TechniciansView } from "../../components/schedule/technicians-view";
 import { SettingsView } from "../../components/schedule/settings-view";
 import { SidebarMenu } from "../../components/layout/sidebar-menu";
 import { useScheduleStore } from "../../store";
-import { fetchAppointmentsWithFilter } from "../../hooks/use-appointments";
+import { fetchAppointmentsWithFilter, fetchServiceOrders } from "../../hooks/use-appointments";
 import { Toaster } from "../../components/ui/sonner";
 import { useEffect, useState } from "react";
+import { ServiceRequestsView } from "../../components/service-request/service-requests-view";
 
 export default function SchedulePage() {
   const [direction, setDirection] = useState<'ltr' | 'rtl'>('ltr');
@@ -39,20 +40,30 @@ export default function SchedulePage() {
     selectedDate,
     appointmentDateRange,
     statusFilter,
+    serviceOrderStatusFilter,
     viewType,
     selectedAppointment,
     leftPanelView,
+    leftListMode,
     settingsView,
+    requestsView,
+    serviceOrders,
+    serviceOrdersLoading,
     setAppointments,
     setLoading,
     setSelectedAppointments,
     setSelectedDate,
     setAppointmentDateRange,
     setStatusFilter,
+    setServiceOrderStatusFilter,
     setViewType,
     setSelectedAppointment,
     setLeftPanelView,
+    setLeftListMode,
     setSettingsView,
+    setRequestsView,
+    setServiceOrders,
+    setServiceOrdersLoading,
     toggleAppointmentSelection,
     selectAllAppointments,
     clearSelectedAppointments,
@@ -62,6 +73,10 @@ export default function SchedulePage() {
     loadAppointments();
   }, [appointmentDateRange.startDate, appointmentDateRange.endDate, statusFilter]);
 
+  useEffect(() => {
+    loadServiceOrders();
+  }, []);
+
   const loadAppointments = async () => {
     try {
       setLoading(true);
@@ -78,6 +93,18 @@ export default function SchedulePage() {
     }
   };
 
+  const loadServiceOrders = async () => {
+    try {
+      setServiceOrdersLoading(true);
+      const data = await fetchServiceOrders();
+      setServiceOrders(data);
+    } catch (error) {
+      console.error("Error loading service orders:", error);
+    } finally {
+      setServiceOrdersLoading(false);
+    }
+  };
+
   const handleAppointmentSelect = (appointmentId: string, checked: boolean) => {
     if (checked) {
       if (!selectedAppointments.includes(appointmentId)) {
@@ -101,70 +128,107 @@ export default function SchedulePage() {
     loadAppointments();
   };
 
+  const activeMenu = settingsView
+    ? "settings"
+    : requestsView
+    ? "requests"
+    : leftPanelView === "technicians"
+    ? "technicians"
+    : "home";
+
   return (
-    <div className="flex h-screen w-full bg-background overflow-hidden" dir={direction}>
-      {/* Left Sidebar Menu */}
-      <SidebarMenu
-        onTechniciansClick={() => {
-          setLeftPanelView("technicians");
-          setSettingsView(false);
-        }}
-        onScheduleClick={() => {
-          setLeftPanelView("appointments");
-          setSettingsView(false);
-        }}
-        onSettingsClick={() => {
-          setSettingsView(true);
-        }}
-      />
-
-      {settingsView ? (
-        /* Settings View - Full Width */
-        <div className="flex-1 flex flex-col overflow-hidden">
-          <SettingsView onBack={() => setSettingsView(false)} />
+    <div className="flex flex-col h-screen w-full bg-background overflow-hidden">
+      <div className="relative flex-1 overflow-hidden" dir={direction}>
+        <div className="absolute inset-y-0 right-0 w-1 bg-primary/60 pointer-events-none" />
+        <div className="flex h-full w-full bg-background overflow-hidden">
+          {/* Left Sidebar Menu */}
+          <SidebarMenu
+            activeMenu={activeMenu}
+            onTechniciansClick={() => {
+              setRequestsView(false);
+              setLeftPanelView("technicians");
+              setSettingsView(false);
+            }}
+            onScheduleClick={() => {
+              setRequestsView(false);
+              setLeftPanelView("appointments");
+              setSettingsView(false);
+            }}
+            onRequestsClick={() => {
+              setRequestsView(true);
+              setSettingsView(false);
+            }}
+            onSettingsClick={() => {
+              setRequestsView(false);
+              setSettingsView(true);
+            }}
+          />
+
+          {settingsView ? (
+            /* Settings View - Full Width */
+            <div className="flex-1 flex flex-col overflow-hidden">
+              <SettingsView onBack={() => setSettingsView(false)} />
+            </div>
+          ) : requestsView ? (
+            <div className="flex-1 flex flex-col overflow-hidden">
+              <ServiceRequestsView />
+            </div>
+          ) : (
+            <>
+              {/* Left Panel - 20% */}
+              <div className="w-[20%] border-r border-border flex flex-col">
+                {leftPanelView === "appointments" ? (
+                  <ScheduleLeftPanel
+                    appointments={appointments}
+                    loading={loading}
+                    selectedAppointments={selectedAppointments}
+                    statusFilter={statusFilter}
+                    serviceOrderStatusFilter={serviceOrderStatusFilter}
+                    appointmentDateRange={appointmentDateRange}
+                    onStatusFilterChange={setStatusFilter}
+                    onServiceOrderFilterChange={setServiceOrderStatusFilter}
+                    onDateRangeChange={setAppointmentDateRange}
+                    onAppointmentSelect={handleAppointmentSelect}
+                    onSelectAll={handleSelectAll}
+                    onAppointmentClick={setSelectedAppointment}
+                    onMassActionComplete={handleMassActionComplete}
+                    mode={leftListMode}
+                    onModeToggle={() =>
+                      setLeftListMode(leftListMode === "orders" ? "appointments" : "orders")
+                    }
+                    serviceOrders={serviceOrders}
+                    serviceOrdersLoading={serviceOrdersLoading}
+                  />
+                ) : (
+                  <TechniciansView
+                    appointments={appointments}
+                    onAppointmentClick={setSelectedAppointment}
+                  />
+                )}
+              </div>
+
+              {/* Right Panel - 75% */}
+              <div className="flex-1 flex flex-col">
+                <ScheduleRightPanel
+                  appointments={appointments}
+                  selectedDate={selectedDate}
+                  onDateChange={setSelectedDate}
+                  viewType={viewType}
+                  onViewTypeChange={setViewType}
+                  selectedAppointment={selectedAppointment}
+                  onAppointmentSelect={setSelectedAppointment}
+                  onRefresh={loadAppointments}
+                  statusFilter={statusFilter}
+                />
+              </div>
+            </>
+          )}
         </div>
-      ) : (
-        <>
-          {/* Left Panel - 20% */}
-          <div className="w-[20%] border-r border-border flex flex-col">
-            {leftPanelView === "appointments" ? (
-              <ScheduleLeftPanel
-                appointments={appointments}
-                loading={loading}
-                selectedAppointments={selectedAppointments}
-                statusFilter={statusFilter}
-                appointmentDateRange={appointmentDateRange}
-                onStatusFilterChange={setStatusFilter}
-                onDateRangeChange={setAppointmentDateRange}
-                onAppointmentSelect={handleAppointmentSelect}
-                onSelectAll={handleSelectAll}
-                onAppointmentClick={setSelectedAppointment}
-                onMassActionComplete={handleMassActionComplete}
-              />
-            ) : (
-              <TechniciansView
-                appointments={appointments}
-                onAppointmentClick={setSelectedAppointment}
-              />
-            )}
-          </div>
-
-          {/* Right Panel - 75% */}
-          <div className="flex-1 flex flex-col">
-            <ScheduleRightPanel
-              appointments={appointments}
-              selectedDate={selectedDate}
-              onDateChange={setSelectedDate}
-              viewType={viewType}
-              onViewTypeChange={setViewType}
-              selectedAppointment={selectedAppointment}
-              onAppointmentSelect={setSelectedAppointment}
-              onRefresh={loadAppointments}
-              statusFilter={statusFilter}
-            />
-          </div>
-        </>
-      )}
+      </div>
+
+      <div className="border-t border-primary text-right text-[0.65rem] tracking-[0.2em] uppercase text-primary px-4 py-3 bg-gradient-to-t from-primary/75 via-primary/10 to-transparent">
+        Powered By Beveren Software
+      </div>
 
       <Toaster />
     </div>
diff --git a/schedule/src/pages/schedule/types.ts b/schedule/src/pages/schedule/types.ts
index 138b3db..3487e8a 100644
--- a/schedule/src/pages/schedule/types.ts
+++ b/schedule/src/pages/schedule/types.ts
@@ -37,3 +37,64 @@ export type AppointmentStatus =
   | "In Progress"
   | "Completed"
   | "Cancelled";
+
+export interface ServiceRequestMovement {
+  name: string;
+  movement_type?: string;
+  destination?: string;
+  movement_date?: string;
+  linked_document_type?: string;
+  linked_document?: string;
+  handled_by?: string;
+}
+
+export interface ServiceRequest {
+  name: string;
+  subject?: string;
+  customer?: string;
+  status: string;
+  posting_date?: string;
+  due_date?: string;
+  serial_no?: string;
+  item_code?: string;
+  item_name?: string;
+  current_product_location?: string;
+  description?: string;
+  product_movement?: ServiceRequestMovement[];
+}
+
+export interface ServiceOrderSummary {
+  name: string;
+  customer?: string;
+  status?: string;
+  priority?: string;
+  posting_date?: string;
+  type?: string;
+}
+
+export interface ServiceOrderItem {
+  item_code?: string;
+  item_name?: string;
+  qty?: number;
+  uom?: string;
+  invoice_status?: string;
+  description?: string;
+}
+
+export interface ServiceOrderDetail extends ServiceOrderSummary {
+  service_request?: string;
+  service_quotation?: string;
+  service_total?: number;
+  spareparts_total?: number;
+  grand_total?: number;
+  company?: string;
+  contact_person?: string;
+  contact_email?: string;
+  service_area?: string;
+  items?: ServiceOrderItem[];
+  notes?: string;
+  priority?: string;
+  status?: string;
+  customer_address?: string;
+  posting_date?: string;
+}
diff --git a/schedule/src/store/schedule-store.ts b/schedule/src/store/schedule-store.ts
index df3b326..510a6b2 100644
--- a/schedule/src/store/schedule-store.ts
+++ b/schedule/src/store/schedule-store.ts
@@ -1,5 +1,5 @@
 import { create } from "zustand";
-import { Appointment } from "../pages/schedule/types";
+import { Appointment, ServiceOrderSummary } from "../pages/schedule/types";
 
 // Helper function to get initial viewType from localStorage
 const getInitialViewType = (): "gantt" | "grid" | "maps" | "calendar" => {
@@ -17,18 +17,25 @@ interface ScheduleState {
   selectedAppointments: string[];
   selectedAppointment: Appointment | null;
   loading: boolean;
+  serviceOrders: ServiceOrderSummary[];
+  serviceOrdersLoading: boolean;
 
   // Filters
   selectedDate: Date; // For right panel (Gantt view)
   appointmentDateRange: { startDate: Date | null; endDate: Date | null }; // For left panel appointments list
   statusFilter: string;
+  serviceOrderStatusFilter: string;
   viewType: "gantt" | "grid" | "maps" | "calendar";
-  leftPanelView: "appointments" | "technicians"; // New: track left panel view mode
+  leftPanelView: "appointments" | "technicians"; // Track left panel view mode
+  leftListMode: "orders" | "appointments"; // Track list content within schedule view
   settingsView: boolean; // Track if settings view is open
+  requestsView: boolean; // Track if service requests view is active
 
   // Actions
   setAppointments: (appointments: Appointment[]) => void;
   setLoading: (loading: boolean) => void;
+  setServiceOrders: (orders: ServiceOrderSummary[]) => void;
+  setServiceOrdersLoading: (loading: boolean) => void;
   setSelectedAppointments: (selectedAppointments: string[]) => void;
   toggleAppointmentSelection: (appointmentId: string) => void;
   selectAllAppointments: (appointmentIds: string[]) => void;
@@ -37,9 +44,12 @@ interface ScheduleState {
   setSelectedDate: (date: Date) => void;
   setAppointmentDateRange: (range: { startDate: Date | null; endDate: Date | null }) => void;
   setStatusFilter: (filter: string) => void;
+  setServiceOrderStatusFilter: (filter: string) => void;
   setViewType: (view: "gantt" | "grid" | "maps" | "calendar") => void;
   setLeftPanelView: (view: "appointments" | "technicians") => void;
+  setLeftListMode: (mode: "orders" | "appointments") => void;
   setSettingsView: (open: boolean) => void;
+  setRequestsView: (open: boolean) => void;
 
   // Helper getters
   isAppointmentSelected: (appointmentId: string) => boolean;
@@ -51,19 +61,26 @@ export const useScheduleStore = create<ScheduleState>((set, get) => ({
   selectedAppointments: [],
   selectedAppointment: null,
   loading: false,
+  serviceOrders: [],
+  serviceOrdersLoading: false,
   selectedDate: new Date(),
   appointmentDateRange: {
     startDate: new Date(new Date().getFullYear(), 0, 1), // Start of year
     endDate: new Date(), // Today
   },
   statusFilter: "all",
+  serviceOrderStatusFilter: "all",
   viewType: getInitialViewType(),
-  leftPanelView: "appointments", // Default to appointments view
+  leftPanelView: "appointments",
+  leftListMode: "orders",
   settingsView: false, // Settings view closed by default
+  requestsView: false,
 
   // Actions
   setAppointments: (appointments) => set({ appointments }),
   setLoading: (loading) => set({ loading }),
+  setServiceOrders: (orders) => set({ serviceOrders: orders }),
+  setServiceOrdersLoading: (loading) => set({ serviceOrdersLoading: loading }),
   setSelectedAppointments: (selectedAppointments) => set({ selectedAppointments }),
   toggleAppointmentSelection: (appointmentId) =>
     set((state) => {
@@ -85,6 +102,7 @@ export const useScheduleStore = create<ScheduleState>((set, get) => ({
   setSelectedDate: (date) => set({ selectedDate: date }),
   setAppointmentDateRange: (range) => set({ appointmentDateRange: range }),
   setStatusFilter: (filter) => set({ statusFilter: filter }),
+  setServiceOrderStatusFilter: (filter) => set({ serviceOrderStatusFilter: filter }),
   setViewType: (view) => {
     set({ viewType: view });
     // Save to localStorage
@@ -93,7 +111,9 @@ export const useScheduleStore = create<ScheduleState>((set, get) => ({
     }
   },
   setLeftPanelView: (view) => set({ leftPanelView: view }),
+  setLeftListMode: (mode) => set({ leftListMode: mode }),
   setSettingsView: (open) => set({ settingsView: open }),
+  setRequestsView: (open) => set({ requestsView: open }),
 
   // Helper getters
   isAppointmentSelected: (appointmentId) => {