-
- {appointment.service_order || appointment.name}
-
+ {appointment.name}
+ {appointment.service_order && (
+
+ Order: {appointment.service_order}
+
+ )}
{getShortDescription(appointment)}
diff --git a/schedule/src/components/schedule/service-order-detail-sheet.tsx b/schedule/src/components/schedule/service-order-detail-sheet.tsx
index e3c037a..a2b4af5 100644
--- a/schedule/src/components/schedule/service-order-detail-sheet.tsx
+++ b/schedule/src/components/schedule/service-order-detail-sheet.tsx
@@ -7,6 +7,7 @@ import {
SheetHeader,
SheetTitle,
} from "../ui/sheet";
+import { Button } from "../ui/button";
import { Badge } from "../ui/badge";
import { Separator } from "../ui/separator";
import { format } from "date-fns";
@@ -23,18 +24,13 @@ interface ServiceOrderDetailSheetProps {
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";
- }
+ if (normalized === "open") return "bg-cyan-50 text-cyan-700 border-cyan-200";
+ if (normalized === "scheduled") return "bg-blue-50 text-blue-700 border-blue-200";
+ if (normalized === "dispatched") return "bg-purple-50 text-purple-700 border-purple-200";
+ if (normalized === "in progress") return "bg-orange-50 text-orange-700 border-orange-200";
+ if (normalized === "review") return "bg-pink-50 text-pink-700 border-pink-200";
+ if (normalized === "completed") return "bg-green-50 text-green-700 border-green-200";
+ if (normalized === "cancelled") return "bg-gray-100 text-gray-700 border-gray-200";
return "border-border text-muted-foreground";
};
@@ -61,6 +57,23 @@ export function ServiceOrderDetailSheet({
Service Order Details
{order?.name}
+ {order?.status?.toLowerCase() === "open" && (
+
+ )}
{order?.status && (
@@ -92,6 +105,18 @@ export function ServiceOrderDetailSheet({
{order.type}
)}
+ {order.product_location && (
+
Posting Date
diff --git a/schedule/src/components/schedule/technicians-view.tsx b/schedule/src/components/schedule/technicians-view.tsx
index 168f6d8..a57fde6 100644
--- a/schedule/src/components/schedule/technicians-view.tsx
+++ b/schedule/src/components/schedule/technicians-view.tsx
@@ -126,11 +126,11 @@ export function TechniciansView({
{/* Technician Info */}
-
{technician.full_name}
+ {technician.full_name}
{techAppointments.length > 0 && (
-
- {techAppointments.length} {techAppointments.length === 1 ? "appointment" : "appointments"}
-
+
+ {techAppointments.length} {techAppointments.length === 1 ? "appt" : "appts"}
+
)}
{technician.service_area && (
@@ -162,7 +162,7 @@ export function TechniciansView({
}}
>
-
+
{appointment.service_order || appointment.name}
= {
+ Open: "bg-cyan-100 text-cyan-800 border-cyan-300",
+ Scheduled: "bg-blue-100 text-blue-800 border-blue-300",
+ Dispatched: "bg-purple-100 text-purple-800 border-purple-300",
+ "In Progress": "bg-orange-100 text-orange-800 border-orange-300",
+ Review: "bg-pink-100 text-pink-800 border-pink-300",
+ Completed: "bg-green-100 text-green-800 border-green-300",
+ Cancelled: "bg-gray-200 text-gray-700 border-gray-300",
+};
+
+const formatDate = (value?: string) => {
+ if (!value) return "—";
+ try {
+ return format(new Date(value), "MMM d, yyyy");
+ } catch {
+ return value;
+ }
+};
+
+export function ServiceOrdersView() {
+ const [orders, setOrders] = useState([]);
+ const [selectedOrderId, setSelectedOrderId] = useState(null);
+ const [statusFilter, setStatusFilter] = useState("all");
+ const [searchQuery, setSearchQuery] = useState("");
+ const [loading, setLoading] = useState(false);
+
+ useEffect(() => {
+ loadOrders();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [statusFilter]);
+
+ const loadOrders = async () => {
+ try {
+ setLoading(true);
+ const data = await fetchServiceOrdersForTracking({
+ status: statusFilter,
+ limit: 100,
+ });
+ setOrders(data);
+ if (!selectedOrderId && data.length) {
+ setSelectedOrderId(data[0].name);
+ } else if (selectedOrderId && !data.find((req) => req.name === selectedOrderId)) {
+ setSelectedOrderId(data[0]?.name ?? null);
+ }
+ } catch (error) {
+ console.error("Failed to load service orders", error);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const filteredOrders = useMemo(() => {
+ if (!searchQuery.trim()) {
+ return orders;
+ }
+ const term = searchQuery.toLowerCase();
+ return orders.filter((req) => {
+ return (
+ req.name?.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: ServiceRequestMovement) => {
+ const dest = mv.destination?.toLowerCase() || "";
+ const type = mv.movement_type?.toLowerCase() || "";
+ const so = mv.service_order?.toLowerCase() || "";
+ return dest.includes(term) || type.includes(term) || so.includes(term);
+ })
+ );
+ });
+ }, [orders, searchQuery]);
+
+ useEffect(() => {
+ if (!filteredOrders.length) {
+ setSelectedOrderId(null);
+ return;
+ }
+ if (!selectedOrderId || !filteredOrders.find((req) => req.name === selectedOrderId)) {
+ setSelectedOrderId(filteredOrders[0].name);
+ }
+ }, [filteredOrders, selectedOrderId]);
+
+ const selectedOrder =
+ filteredOrders.find((req) => req.name === selectedOrderId) || filteredOrders[0] || null;
+
+ return (
+
+ {/* Left Pane */}
+
+
+
+
+
Service Orders
+
+ Track orders and their movement history
+
+
+
{filteredOrders.length}
+
+
+
+
+ setSearchQuery(e.target.value)}
+ className="pl-9"
+ />
+
+
+
+
+
+
+
+ {loading &&
+ [1, 2, 3, 4].map((i) => (
+
+
+
+
+
+ ))}
+
+ {!loading && filteredOrders.length === 0 && (
+
+ No service orders found
+
+ )}
+
+ {!loading &&
+ filteredOrders.map((req) => {
+ const isActive = selectedOrder?.name === req.name;
+ const badgeColor =
+ statusColors[req.status] || "bg-gray-100 text-gray-800 border-gray-300";
+ return (
+
+ );
+ })}
+
+
+
+ {/* Right Pane */}
+
+ {selectedOrder ? (
+
+
+
+
+
+ {selectedOrder.name}
+
+
+
+
+ {selectedOrder.status || "Unknown"}
+
+
+
+
+
+
+
Serial No
+
+ {selectedOrder.serial_no || "Not linked"}
+
+
+
+
Item
+
+ {selectedOrder.item_code || "Not set"}
+
+
+
+
Current Location
+
+ {selectedOrder.product_location || "Unknown"}
+
+
+
+
Due Date
+
{formatDate(selectedOrder.due_date)}
+
+
+
+ {selectedOrder.description && (
+
+
+
Notes
+
+
+ {selectedOrder.description}
+
+
+ )}
+
+
+
+
+
Movement Tracker
+
+ Latest known location changes for this item
+
+
+
+ {selectedOrder.product_movement?.length || 0} entries
+
+
+
+ {selectedOrder.product_movement && selectedOrder.product_movement.length ? (
+
+
+
+
+ Date
+ Destination
+ Linked Document
+ Service Order
+ Handled By
+
+
+
+ {[...selectedOrder.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) => (
+
+ {formatDate(movement.movement_date)}
+ {movement.destination || movement.movement_type || "—"}
+
+ {movement.linked_document ? (
+
+
+ {movement.linked_document_type || ""}
+
+ {movement.linked_document}
+
+ ) : (
+ "—"
+ )}
+
+ {movement.service_order || "—"}
+ {movement.handled_by || "—"}
+
+ ))}
+
+
+
+ ) : (
+
+ No movement entries recorded yet for this request.
+
+ )}
+
+
+
+ ) : (
+
+ No service order selected
+
+ )}
+
+
@@ -115,12 +115,12 @@ export function ServiceRequestsView() {
-
Service Requests
+
Service Orders
- Track requests and their movement history
+ Track orders and their movement history
-
{filteredRequests.length}
+
{filteredOrders.length}
@@ -132,7 +132,7 @@ export function ServiceRequestsView() {
className="pl-9"
/>
-
@@ -161,15 +161,15 @@ export function ServiceRequestsView() {
))}
- {!loading && filteredRequests.length === 0 && (
+ {!loading && filteredOrders.length === 0 && (
No service requests found
)}
{!loading &&
- filteredRequests.map((req) => {
- const isActive = selectedRequest?.name === req.name;
+ filteredOrders.map((req) => {
+ const isActive = selectedOrder?.name === req.name;
const badgeColor =
statusColors[req.status] || "bg-gray-100 text-gray-800 border-gray-300";
return (
@@ -178,15 +178,15 @@ export function ServiceRequestsView() {
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)}
+ onClick={() => setSelectedOrderId(req.name)}
>
-
-
- {req.subject || req.name}
-
-
- {req.status}
-
+
+
+ {req.name}
+
+
+ {req.status || "Unknown"}
+
{req.customer || "No customer"}
@@ -207,22 +207,22 @@ export function ServiceRequestsView() {
{/* Right Pane */}
- {selectedRequest ? (
+ {selectedOrder ? (
- Service Request
+ Service Order
- {selectedRequest.subject || selectedRequest.name}
+ {selectedOrder.name}
- {selectedRequest.customer || "No customer specified"}
+ {selectedOrder.customer || "No customer specified"}
-
- {selectedRequest.status}
+
+ {selectedOrder.status || "Unknown"}
@@ -231,34 +231,34 @@ export function ServiceRequestsView() {
Serial No
- {selectedRequest.serial_no || "Not linked"}
+ {selectedOrder.serial_no || "Not linked"}
Item
- {selectedRequest.item_code || "Not set"}
+ {selectedOrder.item_code || "Not set"}
Current Location
- {selectedRequest.current_product_location || "Unknown"}
+ {selectedOrder.current_product_location || "Unknown"}
Due Date
-
{formatDate(selectedRequest.due_date)}
+
{formatDate(selectedOrder.due_date)}
- {selectedRequest.description && (
+ {selectedOrder.description && (
Notes
- {selectedRequest.description}
+ {selectedOrder.description}
)}
@@ -272,24 +272,24 @@ export function ServiceRequestsView() {
- {selectedRequest.product_movement && selectedRequest.product_movement.length ? (
+ {selectedOrder.product_movement && selectedOrder.product_movement.length ? (
Date
- Current Location
Destination
Linked Document
+ Service Order
Handled By
- {[...selectedRequest.product_movement]
+ {[...selectedOrder.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;
@@ -298,18 +298,20 @@ export function ServiceRequestsView() {
.map((movement) => (
{formatDate(movement.movement_date)}
- {movement.movement_type || "—"}
- {movement.destination || "—"}
+ {movement.destination || movement.movement_type || "—"}
{movement.linked_document ? (
-
- {movement.linked_document_type || ""}{" "}
+
+
+ {movement.linked_document_type || ""}
+
{movement.linked_document}
) : (
"—"
)}
+ {movement.service_order || "—"}
{movement.handled_by || "—"}
))}
@@ -327,7 +329,7 @@ export function ServiceRequestsView() {
) : (
- No service request selected
+ No service order selected
)}
diff --git a/schedule/src/hooks/use-service-requests.ts b/schedule/src/hooks/use-service-requests.ts
index 6939c67..3d6ec09 100644
--- a/schedule/src/hooks/use-service-requests.ts
+++ b/schedule/src/hooks/use-service-requests.ts
@@ -1,6 +1,6 @@
-import { ServiceRequest } from "../pages/schedule/types";
+import { ServiceOrderSummary } from "../pages/schedule/types";
-interface ServiceRequestFilters {
+interface ServiceOrderFilters {
status?: string;
startDate?: Date | null;
endDate?: Date | null;
@@ -8,7 +8,9 @@ interface ServiceRequestFilters {
limit?: number;
}
-export async function fetchServiceRequests(filters: ServiceRequestFilters = {}): Promise {
+export async function fetchServiceOrdersForTracking(
+ filters: ServiceOrderFilters = {}
+): Promise {
try {
//eslint-disable-next-line @typescript-eslint/no-explicit-any
const csrfToken = (window as any).csrf_token;
@@ -34,7 +36,7 @@ export async function fetchServiceRequests(filters: ServiceRequestFilters = {}):
params.append("limit_page_length", String(filters.limit));
}
- const url = `/api/method/beveren_fsm.field_service_management.api.service_request.get_service_requests?${
+ const url = `/api/method/beveren_fsm.field_service_management.api.service_order.get_service_orders_for_tracking?${
params.toString()
}`;
@@ -48,13 +50,13 @@ export async function fetchServiceRequests(filters: ServiceRequestFilters = {}):
});
if (!response.ok) {
- throw new Error(`Failed to fetch service requests: ${response.statusText}`);
+ throw new Error(`Failed to fetch service orders: ${response.statusText}`);
}
const result = await response.json();
return result.message || [];
} catch (error) {
- console.error("Error fetching service requests:", error);
+ console.error("Error fetching service orders:", error);
throw error;
}
}
diff --git a/schedule/src/pages/schedule/schedule.tsx b/schedule/src/pages/schedule/schedule.tsx
index ae671be..a719b04 100644
--- a/schedule/src/pages/schedule/schedule.tsx
+++ b/schedule/src/pages/schedule/schedule.tsx
@@ -8,8 +8,8 @@ import { SidebarMenu } from "../../components/layout/sidebar-menu";
import { useScheduleStore } from "../../store";
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";
+import { useCallback, useEffect, useState } from "react";
+import { ServiceOrdersView } from "../../components/service-request/product-tracking";
export default function SchedulePage() {
const [direction, setDirection] = useState<'ltr' | 'rtl'>('ltr');
@@ -64,20 +64,11 @@ export default function SchedulePage() {
setRequestsView,
setServiceOrders,
setServiceOrdersLoading,
- toggleAppointmentSelection,
selectAllAppointments,
clearSelectedAppointments,
} = useScheduleStore();
- useEffect(() => {
- loadAppointments();
- }, [appointmentDateRange.startDate, appointmentDateRange.endDate, statusFilter]);
-
- useEffect(() => {
- loadServiceOrders();
- }, []);
-
- const loadAppointments = async () => {
+ const loadAppointments = useCallback(async () => {
try {
setLoading(true);
const data = await fetchAppointmentsWithFilter(
@@ -91,9 +82,15 @@ export default function SchedulePage() {
} finally {
setLoading(false);
}
- };
+ }, [
+ appointmentDateRange.startDate,
+ appointmentDateRange.endDate,
+ statusFilter,
+ setAppointments,
+ setLoading,
+ ]);
- const loadServiceOrders = async () => {
+ const loadServiceOrders = useCallback(async () => {
try {
setServiceOrdersLoading(true);
const data = await fetchServiceOrders();
@@ -103,7 +100,15 @@ export default function SchedulePage() {
} finally {
setServiceOrdersLoading(false);
}
- };
+ }, [setServiceOrders, setServiceOrdersLoading]);
+
+ useEffect(() => {
+ loadAppointments();
+ }, [loadAppointments]);
+
+ useEffect(() => {
+ loadServiceOrders();
+ }, [loadServiceOrders]);
const handleAppointmentSelect = (appointmentId: string, checked: boolean) => {
if (checked) {
@@ -169,9 +174,9 @@ export default function SchedulePage() {
setSettingsView(false)} />
- ) : requestsView ? (
+ ) : requestsView ? (
-
+
) : (
<>
diff --git a/schedule/src/pages/schedule/types.ts b/schedule/src/pages/schedule/types.ts
index 92188d3..d6f603c 100644
--- a/schedule/src/pages/schedule/types.ts
+++ b/schedule/src/pages/schedule/types.ts
@@ -32,6 +32,12 @@ export type ViewType = "gantt" | "grid" | "maps" | "calendar";
export type AppointmentStatus =
| "Open"
+ | "Quotation"
+ | "Converted"
+ | "Due Soon"
+ | "Overdue"
+ | "On Hold"
+ | "Closed"
| "Scheduled"
| "Dispatched"
| "In Progress"
@@ -49,30 +55,23 @@ export interface ServiceRequestMovement {
service_order?: string;
}
-export interface ServiceRequest {
+export interface ServiceOrderSummary {
name: string;
subject?: string;
customer?: string;
- status: string;
+ status?: string;
+ priority?: string;
posting_date?: string;
due_date?: string;
+ type?: string;
serial_no?: string;
item_code?: string;
- item_name?: string;
current_product_location?: string;
+ 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;
@@ -94,8 +93,5 @@ export interface ServiceOrderDetail extends ServiceOrderSummary {
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 510a6b2..326f4ba 100644
--- a/schedule/src/store/schedule-store.ts
+++ b/schedule/src/store/schedule-store.ts
@@ -29,7 +29,7 @@ interface ScheduleState {
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
+ requestsView: boolean; // Track if service orders tracker view is active
// Actions
setAppointments: (appointments: Appointment[]) => void;
@@ -71,10 +71,23 @@ export const useScheduleStore = create((set, get) => ({
statusFilter: "all",
serviceOrderStatusFilter: "all",
viewType: getInitialViewType(),
- leftPanelView: "appointments",
- leftListMode: "orders",
- settingsView: false, // Settings view closed by default
- requestsView: false,
+ leftPanelView: ((): "appointments" | "technicians" => {
+ if (typeof window === "undefined") return "appointments";
+ const saved = localStorage.getItem("schedule-left-panel-view");
+ return saved === "technicians" ? "technicians" : "appointments";
+ })(),
+ leftListMode:
+ (typeof window !== "undefined" && localStorage.getItem("schedule-left-list-mode") === "appointments")
+ ? "appointments"
+ : (typeof window !== "undefined" && localStorage.getItem("schedule-left-list-mode") === "orders")
+ ? "orders"
+ : "appointments",
+ settingsView:
+ (typeof window !== "undefined" && localStorage.getItem("schedule-settings-view") === "1") ||
+ false,
+ requestsView:
+ (typeof window !== "undefined" && localStorage.getItem("schedule-requests-view") === "1") ||
+ false,
// Actions
setAppointments: (appointments) => set({ appointments }),
@@ -110,10 +123,34 @@ export const useScheduleStore = create((set, get) => ({
localStorage.setItem("schedule-view-type", view);
}
},
- setLeftPanelView: (view) => set({ leftPanelView: view }),
- setLeftListMode: (mode) => set({ leftListMode: mode }),
- setSettingsView: (open) => set({ settingsView: open }),
- setRequestsView: (open) => set({ requestsView: open }),
+ setLeftPanelView: (view) =>
+ set(() => {
+ if (typeof window !== "undefined") {
+ localStorage.setItem("schedule-left-panel-view", view);
+ }
+ return { leftPanelView: view };
+ }),
+ setLeftListMode: (mode) =>
+ set(() => {
+ if (typeof window !== "undefined") {
+ localStorage.setItem("schedule-left-list-mode", mode);
+ }
+ return { leftListMode: mode };
+ }),
+ setSettingsView: (open) =>
+ set(() => {
+ if (typeof window !== "undefined") {
+ localStorage.setItem("schedule-settings-view", open ? "1" : "0");
+ }
+ return { settingsView: open };
+ }),
+ setRequestsView: (open) =>
+ set(() => {
+ if (typeof window !== "undefined") {
+ localStorage.setItem("schedule-requests-view", open ? "1" : "0");
+ }
+ return { requestsView: open };
+ }),
// Helper getters
isAppointmentSelected: (appointmentId) => {