-
{id ? "Edit Follow Up" : "Add Follow Up"}
+
+
+ {isEdit ? "Edit Follow-up" : "Create Follow-up"}
+
-
);
}
diff --git a/src/pages/followup/list/List.js b/src/pages/followup/list/List.js
index 7bc30e49..ac1af34c 100644
--- a/src/pages/followup/list/List.js
+++ b/src/pages/followup/list/List.js
@@ -1,98 +1,144 @@
-import React, { useEffect, useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { fetchFollowUpsPaged, deleteFollowUp } from "../new/api";
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
+import useFollowUps from "./useFollowUps";
+import Table from "./Table";
+import DeleteModal from "../../../components/DeleteModal";
+import ActionBar from "../../../components/ActionBar";
+import { deleteFollowUp } from "../api";
+import "./styles.css";
export default function FollowUpList() {
const navigate = useNavigate();
- const [rows, setRows] = useState([]);
- const [search, setSearch] = useState("");
- const [page, setPage] = useState(1);
- const [totalPages, setTotalPages] = useState(1);
+ const { rows, search, setSearch, page, setPage, pageSize, setPageSize, totalCount, loading, err, reload } = useFollowUps();
+ const [viewMode, setViewMode] = useState("list");
+ const [deleteModal, setDeleteModal] = useState({ isOpen: false, item: null, loading: false });
+ const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
- const loadData = async () => {
- const res = await fetchFollowUpsPaged({ search, page });
- setRows(res.rows);
- setTotalPages(res.totalPages);
+ const handleDeleteClick = (item) => {
+ setDeleteModal({ isOpen: true, item, loading: false });
};
- useEffect(() => {
- loadData();
- }, [page]);
+ const handleDeleteConfirm = async () => {
+ setDeleteModal(prev => ({ ...prev, loading: true }));
+ try {
+ await deleteFollowUp(deleteModal.item.id);
+ toast.success(`Follow-up deleted successfully!`);
+ setDeleteModal({ isOpen: false, item: null, loading: false });
+ reload();
+ } catch (err) {
+ console.error(err);
+ toast.error("Failed to delete follow-up");
+ setDeleteModal(prev => ({ ...prev, loading: false }));
+ }
+ };
return (
-
-
-
Follow Ups
-
-
+ <>
+
navigate("/followups/new")}
+ onBulkEdit={() => console.log("Bulk edit")}
+ selectedCount={0}
+ />
-
-
setSearch(e.target.value)}
+
+
+ Follow Ups
+
+
+
+
+
+
+
+
+
+ Search for Follow Ups
+
+ Use the settings menu to adjust how to filter the list, and which columns to display.
+
+
+
+
+
+
+ setSearch(e.target.value)}
+ placeholder="Enter search criteria here..."
+ />
+
+
+
+
+
+
+
+
+
+
+
+ {page}
+
+
+
+
+
navigate(`/followups/edit/${item.id}`)}
+ onDelete={handleDeleteClick}
+ page={page}
+ setPage={setPage}
+ pageSize={pageSize}
+ setPageSize={setPageSize}
+ totalCount={totalCount}
+ totalPages={totalPages}
/>
-
-
-
-
-
- | Reason |
- Schedule Date |
- Account |
- Assigned To |
- Work Order |
- Status |
- Actions |
-
-
-
- {rows.map((x) => (
-
- | {x.reason} |
- {x.scheduleDate} |
- {x.account} |
- {x.assignedTo} |
- {x.workOrderNumber} |
- {x.status} |
-
-
-
- |
-
- ))}
- {rows.length === 0 && (
-
- | No follow ups found |
-
- )}
-
-
-
-
-
-
- Page {page} / {totalPages}
-
-
-
-
+ setDeleteModal({ isOpen: false, item: null, loading: false })}
+ onConfirm={handleDeleteConfirm}
+ title="Delete Follow-up"
+ message={`Are you sure you want to delete this follow-up for "${deleteModal.item?.workOrder}"? This action cannot be undone.`}
+ loading={deleteModal.loading}
+ />
+
+
);
}
diff --git a/src/pages/followup/list/Table.js b/src/pages/followup/list/Table.js
index bce57b8d..46aa5456 100644
--- a/src/pages/followup/list/Table.js
+++ b/src/pages/followup/list/Table.js
@@ -1,37 +1,16 @@
import React from "react";
+import SharedTable from "../../../components/SharedTable";
+
+export default function Table({ loading, error, rows, onEdit, onDelete, page, setPage, pageSize, setPageSize, totalCount, totalPages }) {
+ const columns = [
+ { key: "workOrder", label: "Work Order", render: (val, row) => { e.preventDefault(); onEdit && onEdit(row); }}>{val} },
+ { key: "reason", label: "Reason" },
+ { key: "scheduledDate", label: "Scheduled Date" },
+ { key: "status", label: "Status" },
+ { key: "createdBy", label: "Created By" },
+ ];
-export default function Table({ loading, error, rows, onEdit, onDelete,
- page, setPage, pageSize, setPageSize, totalCount, totalPages }) {
return (
-
+
);
}
diff --git a/src/pages/followup/list/styles.css b/src/pages/followup/list/styles.css
index 801b23a9..70c5799b 100644
--- a/src/pages/followup/list/styles.css
+++ b/src/pages/followup/list/styles.css
@@ -1,6 +1,231 @@
-/* CSS for modals, table, and controls – minimal to work with existing global styles */
-.contactTable { width:100%; border-collapse:collapse; }
-.contactTable th, .contactTable td { border:1px solid #ddd; padding:8px; }
+/* Modal styles for Follow-ups module */
.modalRoot{position:fixed;inset:0;z-index:1000;}
.modalScrim{position:absolute;inset:0;background:rgba(0,0,0,.3);}
.modalCard{position:relative;margin:10% auto;padding:20px;background:#fff;width:400px;}
+
+/* Override listPage padding for this module */
+.listPage {
+ padding: 0 !important;
+ background: white !important;
+ min-height: auto !important;
+}
+
+/* Breadcrumb */
+.breadcrumb {
+ background: white;
+ padding: 10px 20px;
+ margin: 0;
+ border-bottom: 1px solid #e5e5e5;
+ font-size: 13px;
+}
+
+.breadcrumbItem {
+ color: #333;
+}
+
+.breadcrumbItem.active {
+ cursor: default;
+ font-weight: bold;
+ color: #00a0d1;
+}
+
+/* Search Section Styles */
+.searchSection {
+ background: white;
+ padding: 20px;
+ margin-bottom: 0;
+ border-bottom: 1px solid #e5e5e5;
+ position: relative;
+ z-index: 1;
+}
+
+.searchHeader {
+ margin-bottom: 20px;
+}
+
+.searchHeading {
+ font-size: 24px;
+ font-weight: 300;
+ margin: 0 0 8px 0;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.iconStack {
+ font-size: 0.9em;
+}
+
+.text-primary {
+ color: #0088cc;
+}
+
+.fa-inverse {
+ color: white;
+}
+
+.searchSubheading {
+ color: #666;
+ font-size: 14px;
+ display: block;
+ margin-left: 45px;
+}
+
+.searchControls {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ gap: 20px;
+}
+
+.searchLeft {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+ flex: 1;
+}
+
+.searchInputGroup {
+ display: flex;
+ align-items: center;
+ gap: 0;
+ flex: 1;
+ max-width: 600px;
+}
+
+.searchDropdown {
+ height: 38px;
+ padding: 6px 12px;
+ border: 1px solid #ccc;
+ border-right: none;
+ border-radius: 4px 0 0 4px;
+ background: white;
+ font-size: 14px;
+ min-width: 120px;
+}
+
+.searchInput {
+ height: 38px;
+ padding: 6px 12px;
+ border: 1px solid #ccc;
+ border-left: none;
+ border-right: 1px solid #ccc;
+ flex: 1;
+ font-size: 14px;
+ outline: none;
+}
+
+.searchInput:focus {
+ border-color: #66afe9;
+ box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+}
+
+.searchButton {
+ height: 38px;
+ padding: 6px 20px;
+ background: #0088cc;
+ color: white;
+ border: 1px solid #0088cc;
+ border-radius: 0 4px 4px 0;
+ font-size: 14px;
+ cursor: pointer;
+ white-space: nowrap;
+ margin-left: 20px;
+}
+
+.searchButton:hover {
+ background: #0077b3;
+ border-color: #0077b3;
+}
+
+.viewToggle {
+ display: flex;
+ border: 1px solid #0088cc;
+ border-radius: 4px;
+ overflow: hidden;
+}
+
+.viewBtn {
+ width: 40px;
+ height: 38px;
+ background: white;
+ border: none;
+ border-right: 1px solid #0088cc;
+ color: #0088cc;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s;
+}
+
+.viewBtn:last-child {
+ border-right: none;
+}
+
+.viewBtn.active {
+ background: #0088cc;
+ color: white;
+}
+
+.viewBtn:hover:not(.active) {
+ background: #e6f2f8;
+}
+
+.searchRight {
+ display: flex;
+ align-items: center;
+}
+
+.paginationTop {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ background: white;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ padding: 0;
+}
+
+.pageBtn {
+ width: 35px;
+ height: 36px;
+ background: white;
+ border: none;
+ cursor: pointer;
+ font-size: 14px;
+ color: #0088cc;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.pageBtn:hover:not(:disabled) {
+ background: #e6f2f8;
+}
+
+.pageBtn:disabled {
+ color: #ccc;
+ cursor: not-allowed;
+}
+
+.pageNumber {
+ min-width: 35px;
+ height: 36px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #0088cc;
+ color: white;
+ font-size: 14px;
+ border-left: 1px solid #ddd;
+ border-right: 1px solid #ddd;
+}
+
+/* Table wrapper */
+.tableContainer {
+ background: white;
+ border: 1px solid #ddd;
+ border-radius: 0;
+ margin: 0;
+}
diff --git a/src/pages/followup/list/useFollowUps.js b/src/pages/followup/list/useFollowUps.js
new file mode 100644
index 00000000..8a6efce9
--- /dev/null
+++ b/src/pages/followup/list/useFollowUps.js
@@ -0,0 +1,41 @@
+import { useState, useEffect } from "react";
+import { getFollowUps } from "../api";
+
+const useFollowUps = () => {
+ const [rows, setRows] = useState([]);
+ const [search, setSearch] = useState("");
+ const [page, setPage] = useState(1);
+ const [pageSize, setPageSize] = useState(12);
+ const [totalCount, setTotalCount] = useState(0);
+ const [loading, setLoading] = useState(false);
+ const [err, setErr] = useState("");
+
+ const reload = async () => {
+ setLoading(true);
+ try {
+ const followups = await getFollowUps();
+ let filtered = followups;
+ if (search) {
+ filtered = followups.filter((f) =>
+ f.workOrder.toLowerCase().includes(search.toLowerCase()) ||
+ f.reason.toLowerCase().includes(search.toLowerCase())
+ );
+ }
+ setTotalCount(filtered.length);
+ const start = (page - 1) * pageSize;
+ setRows(filtered.slice(start, start + pageSize));
+ } catch (error) {
+ setErr(error.message);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ reload();
+ }, [search, page, pageSize]);
+
+ return { rows, search, setSearch, page, setPage, pageSize, setPageSize, totalCount, loading, err, reload };
+};
+
+export default useFollowUps;
diff --git a/src/pages/locations/api.js b/src/pages/locations/api.js
new file mode 100644
index 00000000..ae7aa6eb
--- /dev/null
+++ b/src/pages/locations/api.js
@@ -0,0 +1,73 @@
+// Mock locations data
+const mockLocations = [
+ {
+ id: 1,
+ name: "Springfield Office",
+ address: "123 Main St",
+ city: "Springfield",
+ state: "IL",
+ zipCode: "62701",
+ phone: "(555) 123-4567",
+ contact: "Jane Smith",
+ contactEmail: "jane.smith@company.com",
+ status: "Active",
+ accountId: "ACC001",
+ },
+ {
+ id: 2,
+ name: "Chicago Distribution Center",
+ address: "456 Oak Ave",
+ city: "Chicago",
+ state: "IL",
+ zipCode: "60601",
+ phone: "(555) 234-5678",
+ contact: "Bob Wilson",
+ contactEmail: "bob.wilson@company.com",
+ status: "Active",
+ accountId: "ACC002",
+ },
+ {
+ id: 3,
+ name: "Indianapolis Warehouse",
+ address: "789 Pine Rd",
+ city: "Indianapolis",
+ state: "IN",
+ zipCode: "46201",
+ phone: "(555) 345-6789",
+ contact: "Alice Brown",
+ contactEmail: "alice.brown@company.com",
+ status: "Active",
+ accountId: "ACC003",
+ },
+];
+
+export const getLocations = async () => {
+ await new Promise(resolve => setTimeout(resolve, 300));
+ return [...mockLocations];
+};
+
+export const getLocationById = async (id) => {
+ await new Promise(resolve => setTimeout(resolve, 200));
+ return mockLocations.find(l => l.id === parseInt(id));
+};
+
+export const addLocation = async (location) => {
+ await new Promise(resolve => setTimeout(resolve, 500));
+ const newLocation = { id: mockLocations.length + 1, ...location };
+ mockLocations.push(newLocation);
+ return newLocation;
+};
+
+export const editLocation = async (location) => {
+ await new Promise(resolve => setTimeout(resolve, 500));
+ const idx = mockLocations.findIndex(l => l.id === location.id);
+ if (idx >= 0) mockLocations[idx] = location;
+ return location;
+};
+
+export const deleteLocation = async (id) => {
+ await new Promise(resolve => setTimeout(resolve, 500));
+ const idx = mockLocations.findIndex(l => l.id === id);
+ if (idx >= 0) mockLocations.splice(idx, 1);
+ return true;
+};
diff --git a/src/pages/locations/form/LocationFormPage.js b/src/pages/locations/form/LocationFormPage.js
new file mode 100644
index 00000000..bd8742b7
--- /dev/null
+++ b/src/pages/locations/form/LocationFormPage.js
@@ -0,0 +1,253 @@
+import React, { useState, useEffect } from "react";
+import { useParams, useNavigate } from "react-router";
+import { toast } from "react-toastify";
+import { getLocationById, addLocation, editLocation } from "../api";
+
+export default function LocationFormPage() {
+ const { id } = useParams();
+ const navigate = useNavigate();
+ const isEdit = !!id;
+
+ const [formData, setFormData] = useState({
+ name: "",
+ address: "",
+ city: "",
+ state: "IL",
+ zipCode: "",
+ phone: "",
+ contact: "",
+ contactEmail: "",
+ status: "Active",
+ accountId: "",
+ });
+
+ const [loading, setLoading] = useState(false);
+
+ useEffect(() => {
+ if (isEdit && id) {
+ const loadLocation = async () => {
+ try {
+ const location = await getLocationById(id);
+ if (location) {
+ setFormData(location);
+ }
+ } catch (err) {
+ console.error("Failed to load location", err);
+ toast.error("Failed to load location");
+ }
+ };
+ loadLocation();
+ }
+ }, [id, isEdit]);
+
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+ setFormData(prev => ({
+ ...prev,
+ [name]: value,
+ }));
+ };
+
+ const handleSave = async (e) => {
+ e.preventDefault();
+ setLoading(true);
+
+ try {
+ if (isEdit) {
+ await editLocation(formData);
+ toast.success("Location updated successfully!");
+ } else {
+ await addLocation(formData);
+ toast.success("Location created successfully!");
+ }
+ navigate("/locations");
+ } catch (err) {
+ console.error(err);
+ toast.error("Failed to save location");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const handleCancel = () => {
+ navigate("/locations");
+ };
+
+ return (
+
+
+ {isEdit ? "Edit Location" : "Create Location"}
+
+
+
+
+ );
+}
diff --git a/src/pages/locations/list/List.js b/src/pages/locations/list/List.js
new file mode 100644
index 00000000..0888dade
--- /dev/null
+++ b/src/pages/locations/list/List.js
@@ -0,0 +1,156 @@
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
+import useLocations from "./useLocations";
+import Table from "./Table";
+import DeleteModal from "../../../components/DeleteModal";
+import ActionBar from "../../../components/ActionBar";
+import { deleteLocation } from "../api";
+import "./styles.css";
+
+export default function LocationsList() {
+ const navigate = useNavigate();
+
+ const {
+ rows,
+ search,
+ setSearch,
+ page,
+ setPage,
+ pageSize,
+ setPageSize,
+ totalCount,
+ loading,
+ err,
+ reload
+ } = useLocations();
+
+ const [viewMode, setViewMode] = useState("list");
+ const [delState, setDelState] = useState({ open: false, item: null, loading: false });
+
+ const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
+
+ const handleDeleteConfirm = async () => {
+ setDelState(prev => ({ ...prev, loading: true }));
+ try {
+ await deleteLocation(delState.item.id);
+ toast.success("Location deleted successfully!");
+ setDelState({ open: false, item: null, loading: false });
+ reload();
+ } catch (err) {
+ console.error(err);
+ toast.error("Failed to delete location");
+ setDelState(prev => ({ ...prev, loading: false }));
+ }
+ };
+
+ return (
+ <>
+ navigate("/locations/new")}
+ onBulkEdit={() => console.log("Bulk edit")}
+ selectedCount={0}
+ />
+
+
+
+ Locations
+
+
+
+
+
+
+
+
+
+ Search for Locations
+
+ Use the settings menu to adjust how to filter the list, and which columns to display.
+
+
+
+
+
+
+ setSearch(e.target.value)}
+ placeholder="Enter search criteria here..."
+ />
+
+
+
+
+
+
+
+
+
+
+
+ {page}
+
+
+
+
+
navigate(`/locations/edit/${item.id}`)}
+ onDelete={(item) => setDelState({ open: true, item, loading: false })}
+ page={page}
+ setPage={setPage}
+ pageSize={pageSize}
+ setPageSize={setPageSize}
+ totalCount={totalCount}
+ totalPages={totalPages}
+ />
+
+ setDelState({ open: false, item: null, loading: false })}
+ onConfirm={handleDeleteConfirm}
+ title="Delete Location"
+ message={`Are you sure you want to delete "${delState.item?.name}"?`}
+ loading={delState.loading}
+ />
+
+
+ );
+}
diff --git a/src/pages/locations/list/Table.js b/src/pages/locations/list/Table.js
new file mode 100644
index 00000000..82646d50
--- /dev/null
+++ b/src/pages/locations/list/Table.js
@@ -0,0 +1,18 @@
+import React from "react";
+import SharedTable from "../../../components/SharedTable";
+
+export default function Table({ loading, error, rows, onEdit, onDelete, page, setPage, pageSize, setPageSize, totalCount, totalPages }) {
+ const columns = [
+ { key: "name", label: "Location Name", render: (val, row) => { e.preventDefault(); onEdit && onEdit(row); }}>{val} },
+ { key: "address", label: "Address" },
+ { key: "city", label: "City" },
+ { key: "state", label: "State" },
+ { key: "phone", label: "Phone" },
+ { key: "contactPerson", label: "Contact" },
+ { key: "status", label: "Status" },
+ ];
+
+ return (
+
+ );
+}
diff --git a/src/pages/locations/list/styles.css b/src/pages/locations/list/styles.css
new file mode 100644
index 00000000..8b17a23c
--- /dev/null
+++ b/src/pages/locations/list/styles.css
@@ -0,0 +1,231 @@
+/* Modal styles for Locations module */
+.modalRoot{position:fixed;inset:0;z-index:1000;}
+.modalScrim{position:absolute;inset:0;background:rgba(0,0,0,.3);}
+.modalCard{position:relative;margin:10% auto;padding:20px;background:#fff;width:400px;}
+
+/* Override listPage padding for this module */
+.listPage {
+ padding: 0 !important;
+ background: white !important;
+ min-height: auto !important;
+}
+
+/* Breadcrumb */
+.breadcrumb {
+ background: white;
+ padding: 10px 20px;
+ margin: 0;
+ border-bottom: 1px solid #e5e5e5;
+ font-size: 13px;
+}
+
+.breadcrumbItem {
+ color: #333;
+}
+
+.breadcrumbItem.active {
+ cursor: default;
+ font-weight: bold;
+ color: #00a0d1;
+}
+
+/* Search Section Styles */
+.searchSection {
+ background: white;
+ padding: 20px;
+ margin-bottom: 0;
+ border-bottom: 1px solid #e5e5e5;
+ position: relative;
+ z-index: 1;
+}
+
+.searchHeader {
+ margin-bottom: 20px;
+}
+
+.searchHeading {
+ font-size: 24px;
+ font-weight: 300;
+ margin: 0 0 8px 0;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.iconStack {
+ font-size: 0.9em;
+}
+
+.text-primary {
+ color: #0088cc;
+}
+
+.fa-inverse {
+ color: white;
+}
+
+.searchSubheading {
+ color: #666;
+ font-size: 14px;
+ display: block;
+ margin-left: 45px;
+}
+
+.searchControls {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ gap: 20px;
+}
+
+.searchLeft {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+ flex: 1;
+}
+
+.searchInputGroup {
+ display: flex;
+ align-items: center;
+ gap: 0;
+ flex: 1;
+ max-width: 600px;
+}
+
+.searchDropdown {
+ height: 38px;
+ padding: 6px 12px;
+ border: 1px solid #ccc;
+ border-right: none;
+ border-radius: 4px 0 0 4px;
+ background: white;
+ font-size: 14px;
+ min-width: 120px;
+}
+
+.searchInput {
+ height: 38px;
+ padding: 6px 12px;
+ border: 1px solid #ccc;
+ border-left: none;
+ border-right: 1px solid #ccc;
+ flex: 1;
+ font-size: 14px;
+ outline: none;
+}
+
+.searchInput:focus {
+ border-color: #66afe9;
+ box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+}
+
+.searchButton {
+ height: 38px;
+ padding: 6px 20px;
+ background: #0088cc;
+ color: white;
+ border: 1px solid #0088cc;
+ border-radius: 0 4px 4px 0;
+ font-size: 14px;
+ cursor: pointer;
+ white-space: nowrap;
+ margin-left: 20px;
+}
+
+.searchButton:hover {
+ background: #0077b3;
+ border-color: #0077b3;
+}
+
+.viewToggle {
+ display: flex;
+ border: 1px solid #0088cc;
+ border-radius: 4px;
+ overflow: hidden;
+}
+
+.viewBtn {
+ width: 40px;
+ height: 38px;
+ background: white;
+ border: none;
+ border-right: 1px solid #0088cc;
+ color: #0088cc;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s;
+}
+
+.viewBtn:last-child {
+ border-right: none;
+}
+
+.viewBtn.active {
+ background: #0088cc;
+ color: white;
+}
+
+.viewBtn:hover:not(.active) {
+ background: #e6f2f8;
+}
+
+.searchRight {
+ display: flex;
+ align-items: center;
+}
+
+.paginationTop {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ background: white;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ padding: 0;
+}
+
+.pageBtn {
+ width: 35px;
+ height: 36px;
+ background: white;
+ border: none;
+ cursor: pointer;
+ font-size: 14px;
+ color: #0088cc;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.pageBtn:hover:not(:disabled) {
+ background: #e6f2f8;
+}
+
+.pageBtn:disabled {
+ color: #ccc;
+ cursor: not-allowed;
+}
+
+.pageNumber {
+ min-width: 35px;
+ height: 36px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #0088cc;
+ color: white;
+ font-size: 14px;
+ border-left: 1px solid #ddd;
+ border-right: 1px solid #ddd;
+}
+
+/* Table wrapper */
+.tableContainer {
+ background: white;
+ border: 1px solid #ddd;
+ border-radius: 0;
+ margin: 0;
+}
diff --git a/src/pages/locations/list/useLocations.js b/src/pages/locations/list/useLocations.js
new file mode 100644
index 00000000..0aff2aff
--- /dev/null
+++ b/src/pages/locations/list/useLocations.js
@@ -0,0 +1,42 @@
+import { useState, useEffect } from "react";
+import { getLocations } from "../api";
+
+const useLocations = () => {
+ const [rows, setRows] = useState([]);
+ const [search, setSearch] = useState("");
+ const [page, setPage] = useState(1);
+ const [pageSize, setPageSize] = useState(12);
+ const [totalCount, setTotalCount] = useState(0);
+ const [loading, setLoading] = useState(false);
+ const [err, setErr] = useState("");
+
+ const reload = async () => {
+ setLoading(true);
+ try {
+ const locations = await getLocations();
+ let filtered = locations;
+ if (search) {
+ filtered = locations.filter((l) =>
+ l.name.toLowerCase().includes(search.toLowerCase()) ||
+ l.city.toLowerCase().includes(search.toLowerCase()) ||
+ l.phone.includes(search)
+ );
+ }
+ setTotalCount(filtered.length);
+ const start = (page - 1) * pageSize;
+ setRows(filtered.slice(start, start + pageSize));
+ } catch (error) {
+ setErr(error.message);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ reload();
+ }, [search, page, pageSize]);
+
+ return { rows, search, setSearch, page, setPage, pageSize, setPageSize, totalCount, loading, err, reload };
+};
+
+export default useLocations;
diff --git a/src/pages/workorders/api.js b/src/pages/workorders/api.js
new file mode 100644
index 00000000..88810072
--- /dev/null
+++ b/src/pages/workorders/api.js
@@ -0,0 +1,73 @@
+// Mock work orders data
+const mockWorkOrders = [
+ {
+ id: 1,
+ workOrderNumber: "WO-001",
+ title: "HVAC System Maintenance",
+ location: "Springfield Office",
+ priority: "High",
+ status: "In Progress",
+ createdDate: "2024-01-15",
+ dueDate: "2024-01-22",
+ assignedTo: "John Anderson",
+ description: "Quarterly maintenance for HVAC system including filter replacement and inspection",
+ estimatedHours: 4,
+ },
+ {
+ id: 2,
+ workOrderNumber: "WO-002",
+ title: "Electrical Repair",
+ location: "Chicago Distribution Center",
+ priority: "Medium",
+ status: "Open",
+ createdDate: "2024-01-16",
+ dueDate: "2024-01-25",
+ assignedTo: "Sarah Martinez",
+ description: "Fix faulty outlet in warehouse section C",
+ estimatedHours: 2,
+ },
+ {
+ id: 3,
+ workOrderNumber: "WO-003",
+ title: "Plumbing Issue",
+ location: "Indianapolis Warehouse",
+ priority: "Low",
+ status: "Completed",
+ createdDate: "2024-01-10",
+ dueDate: "2024-01-20",
+ assignedTo: "Mike Johnson",
+ description: "Repair leaking pipe in bathroom",
+ estimatedHours: 3,
+ },
+];
+
+export const getWorkOrders = async () => {
+ await new Promise(resolve => setTimeout(resolve, 300));
+ return [...mockWorkOrders];
+};
+
+export const getWorkOrderById = async (id) => {
+ await new Promise(resolve => setTimeout(resolve, 200));
+ return mockWorkOrders.find(w => w.id === parseInt(id));
+};
+
+export const addWorkOrder = async (workOrder) => {
+ await new Promise(resolve => setTimeout(resolve, 500));
+ const newWorkOrder = { id: mockWorkOrders.length + 1, ...workOrder };
+ mockWorkOrders.push(newWorkOrder);
+ return newWorkOrder;
+};
+
+export const editWorkOrder = async (workOrder) => {
+ await new Promise(resolve => setTimeout(resolve, 500));
+ const idx = mockWorkOrders.findIndex(w => w.id === workOrder.id);
+ if (idx >= 0) mockWorkOrders[idx] = workOrder;
+ return workOrder;
+};
+
+export const deleteWorkOrder = async (id) => {
+ await new Promise(resolve => setTimeout(resolve, 500));
+ const idx = mockWorkOrders.findIndex(w => w.id === id);
+ if (idx >= 0) mockWorkOrders.splice(idx, 1);
+ return true;
+};
diff --git a/src/pages/workorders/form/WorkOrderFormPage.js b/src/pages/workorders/form/WorkOrderFormPage.js
new file mode 100644
index 00000000..a4d85d97
--- /dev/null
+++ b/src/pages/workorders/form/WorkOrderFormPage.js
@@ -0,0 +1,262 @@
+import React, { useState, useEffect } from "react";
+import { useParams, useNavigate } from "react-router";
+import { toast } from "react-toastify";
+import { getWorkOrderById, addWorkOrder, editWorkOrder } from "../api";
+
+export default function WorkOrderFormPage() {
+ const { id } = useParams();
+ const navigate = useNavigate();
+ const isEdit = !!id;
+
+ const [formData, setFormData] = useState({
+ workOrderNumber: "",
+ title: "",
+ location: "",
+ priority: "Medium",
+ status: "Open",
+ createdDate: new Date().toISOString().split("T")[0],
+ dueDate: "",
+ assignedTo: "",
+ description: "",
+ estimatedHours: 1,
+ });
+
+ const [loading, setLoading] = useState(false);
+
+ useEffect(() => {
+ if (isEdit && id) {
+ const loadWorkOrder = async () => {
+ try {
+ const wo = await getWorkOrderById(id);
+ if (wo) {
+ setFormData(wo);
+ }
+ } catch (err) {
+ console.error("Failed to load work order", err);
+ toast.error("Failed to load work order");
+ }
+ };
+ loadWorkOrder();
+ }
+ }, [id, isEdit]);
+
+ const handleChange = (e) => {
+ const { name, value } = e.target;
+ setFormData(prev => ({
+ ...prev,
+ [name]: value,
+ }));
+ };
+
+ const handleSave = async (e) => {
+ e.preventDefault();
+ setLoading(true);
+
+ try {
+ if (isEdit) {
+ await editWorkOrder(formData);
+ toast.success("Work Order updated successfully!");
+ } else {
+ await addWorkOrder(formData);
+ toast.success("Work Order created successfully!");
+ }
+ navigate("/workorders");
+ } catch (err) {
+ console.error(err);
+ toast.error("Failed to save work order");
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ const handleCancel = () => {
+ navigate("/workorders");
+ };
+
+ return (
+
+
+ {isEdit ? "Edit Work Order" : "Create Work Order"}
+
+
+
+
+ );
+}
diff --git a/src/pages/workorders/list/List.js b/src/pages/workorders/list/List.js
new file mode 100644
index 00000000..27c74983
--- /dev/null
+++ b/src/pages/workorders/list/List.js
@@ -0,0 +1,161 @@
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import { toast } from "react-toastify";
+import useWorkOrders from "./useWorkOrders";
+import Table from "./Table";
+import DeleteModal from "../../../components/DeleteModal";
+import ActionBar from "../../../components/ActionBar";
+import "./styles.css";
+
+export default function WorkOrdersList() {
+ const navigate = useNavigate();
+ const {
+ rows,
+ search,
+ setSearch,
+ page,
+ setPage,
+ pageSize,
+ setPageSize,
+ totalCount,
+ loading,
+ err
+ } = useWorkOrders();
+
+ const [viewMode, setViewMode] = useState("list");
+ const [deleteModal, setDeleteModal] = useState({
+ isOpen: false,
+ item: null,
+ loading: false
+ });
+
+ const totalPages = Math.max(1, Math.ceil(totalCount / pageSize));
+
+ const handleDeleteClick = (item) => {
+ setDeleteModal({ isOpen: true, item, loading: false });
+ };
+
+ const handleDeleteConfirm = async () => {
+ setDeleteModal((prev) => ({ ...prev, loading: true }));
+ try {
+ await new Promise((resolve) => setTimeout(resolve, 500));
+ toast.success("Work Order deleted successfully!");
+ setDeleteModal({ isOpen: false, item: null, loading: false });
+ } catch {
+ toast.error("Failed to delete work order");
+ setDeleteModal((prev) => ({ ...prev, loading: false }));
+ }
+ };
+
+ return (
+ <>
+ navigate("/workorders/new")}
+ onBulkEdit={() => console.log("Bulk edit")}
+ selectedCount={0}
+ />
+
+
+
+ Work Orders
+
+
+
+
+
+
+
+
+
+ Search for Work Orders
+
+ Use the settings menu to adjust how to filter the list, and which columns to display.
+
+
+
+
+
+
+ setSearch(e.target.value)}
+ placeholder="Enter search criteria here..."
+ />
+
+
+
+
+
+
+
+
+
+
+
+ {page}
+
+
+
+
+
navigate(`/workorders/edit/${item.id}`)}
+ onDelete={handleDeleteClick}
+ page={page}
+ setPage={setPage}
+ pageSize={pageSize}
+ setPageSize={setPageSize}
+ totalCount={totalCount}
+ totalPages={totalPages}
+ />
+
+
+ setDeleteModal({ isOpen: false, item: null, loading: false })
+ }
+ onConfirm={handleDeleteConfirm}
+ title="Delete Work Order"
+ message={`Are you sure you want to delete "${deleteModal.item?.title}"? This action cannot be undone.`}
+ loading={deleteModal.loading}
+ />
+
+
+ );
+}
diff --git a/src/pages/workorders/list/Table.js b/src/pages/workorders/list/Table.js
new file mode 100644
index 00000000..fc9f8a7d
--- /dev/null
+++ b/src/pages/workorders/list/Table.js
@@ -0,0 +1,18 @@
+import React from "react";
+import SharedTable from "../../../components/SharedTable";
+
+export default function Table({ loading, error, rows, onEdit, onDelete, page, setPage, pageSize, setPageSize, totalCount, totalPages }) {
+ const columns = [
+ { key: "number", label: "WO #", render: (val, row) => { e.preventDefault(); onEdit && onEdit(row); }}>{val} },
+ { key: "title", label: "Title" },
+ { key: "location", label: "Location" },
+ { key: "priority", label: "Priority" },
+ { key: "status", label: "Status" },
+ { key: "createdDate", label: "Created" },
+ { key: "assignedTo", label: "Assigned To" },
+ ];
+
+ return (
+
+ );
+}
diff --git a/src/pages/workorders/list/styles.css b/src/pages/workorders/list/styles.css
new file mode 100644
index 00000000..33dfaf54
--- /dev/null
+++ b/src/pages/workorders/list/styles.css
@@ -0,0 +1,247 @@
+/* Modal styles for Work Orders module */
+.modalRoot {
+ position: fixed;
+ inset: 0;
+ z-index: 1000;
+}
+
+.modalScrim {
+ position: absolute;
+ inset: 0;
+ background: rgba(0, 0, 0, 0.3);
+}
+
+.modalCard {
+ position: relative;
+ margin: 10% auto;
+ padding: 20px;
+ background: #fff;
+ width: 400px;
+}
+
+/* Override listPage padding for this module */
+.listPage {
+ padding: 0 !important;
+ background: white !important;
+ min-height: auto !important;
+}
+
+/* Breadcrumb */
+.breadcrumb {
+ background: white;
+ padding: 10px 20px;
+ margin: 0;
+ border-bottom: 1px solid #e5e5e5;
+ font-size: 13px;
+}
+
+.breadcrumbItem {
+ color: #333;
+}
+
+.breadcrumbItem.active {
+ cursor: default;
+ font-weight: bold;
+ color: #00a0d1;
+}
+
+/* Search Section Styles */
+.searchSection {
+ background: white;
+ padding: 20px;
+ margin-bottom: 0;
+ border-bottom: 1px solid #e5e5e5;
+ position: relative;
+ z-index: 1;
+}
+
+.searchHeader {
+ margin-bottom: 20px;
+}
+
+.searchHeading {
+ font-size: 24px;
+ font-weight: 300;
+ margin: 0 0 8px 0;
+ display: flex;
+ align-items: center;
+ gap: 10px;
+}
+
+.iconStack {
+ font-size: 0.9em;
+}
+
+.text-primary {
+ color: #0088cc;
+}
+
+.fa-inverse {
+ color: white;
+}
+
+.searchSubheading {
+ color: #666;
+ font-size: 14px;
+ display: block;
+ margin-left: 45px;
+}
+
+.searchControls {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ gap: 20px;
+}
+
+.searchLeft {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+ flex: 1;
+}
+
+.searchInputGroup {
+ display: flex;
+ align-items: center;
+ gap: 0;
+ flex: 1;
+ max-width: 600px;
+}
+
+.searchDropdown {
+ height: 38px;
+ padding: 6px 12px;
+ border: 1px solid #ccc;
+ border-right: none;
+ border-radius: 4px 0 0 4px;
+ background: white;
+ font-size: 14px;
+ min-width: 120px;
+}
+
+.searchInput {
+ height: 38px;
+ padding: 6px 12px;
+ border: 1px solid #ccc;
+ border-left: none;
+ border-right: 1px solid #ccc;
+ flex: 1;
+ font-size: 14px;
+ outline: none;
+}
+
+.searchInput:focus {
+ border-color: #66afe9;
+ box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
+}
+
+.searchButton {
+ height: 38px;
+ padding: 6px 20px;
+ background: #0088cc;
+ color: white;
+ border: 1px solid #0088cc;
+ border-radius: 0 4px 4px 0;
+ font-size: 14px;
+ cursor: pointer;
+ white-space: nowrap;
+ margin-left: 20px;
+}
+
+.searchButton:hover {
+ background: #0077b3;
+ border-color: #0077b3;
+}
+
+.viewToggle {
+ display: flex;
+ border: 1px solid #0088cc;
+ border-radius: 4px;
+ overflow: hidden;
+}
+
+.viewBtn {
+ width: 40px;
+ height: 38px;
+ background: white;
+ border: none;
+ border-right: 1px solid #0088cc;
+ color: #0088cc;
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s;
+}
+
+.viewBtn:last-child {
+ border-right: none;
+}
+
+.viewBtn.active {
+ background: #0088cc;
+ color: white;
+}
+
+.viewBtn:hover:not(.active) {
+ background: #e6f2f8;
+}
+
+.searchRight {
+ display: flex;
+ align-items: center;
+}
+
+.paginationTop {
+ display: flex;
+ align-items: center;
+ gap: 5px;
+ background: white;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ padding: 0;
+}
+
+.pageBtn {
+ width: 35px;
+ height: 36px;
+ background: white;
+ border: none;
+ cursor: pointer;
+ font-size: 14px;
+ color: #0088cc;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.pageBtn:hover:not(:disabled) {
+ background: #e6f2f8;
+}
+
+.pageBtn:disabled {
+ color: #ccc;
+ cursor: not-allowed;
+}
+
+.pageNumber {
+ min-width: 35px;
+ height: 36px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: #0088cc;
+ color: white;
+ font-size: 14px;
+ border-left: 1px solid #ddd;
+ border-right: 1px solid #ddd;
+}
+
+/* Table wrapper */
+.tableContainer {
+ background: white;
+ border: 1px solid #ddd;
+ border-radius: 0;
+ margin: 0;
+}
diff --git a/src/pages/workorders/list/useWorkOrders.js b/src/pages/workorders/list/useWorkOrders.js
new file mode 100644
index 00000000..6e098a89
--- /dev/null
+++ b/src/pages/workorders/list/useWorkOrders.js
@@ -0,0 +1,42 @@
+import { useState, useEffect } from "react";
+import { getWorkOrders } from "../api";
+
+const useWorkOrders = () => {
+ const [rows, setRows] = useState([]);
+ const [search, setSearch] = useState("");
+ const [page, setPage] = useState(1);
+ const [pageSize, setPageSize] = useState(12);
+ const [totalCount, setTotalCount] = useState(0);
+ const [loading, setLoading] = useState(false);
+ const [err, setErr] = useState("");
+
+ const reload = async () => {
+ setLoading(true);
+ try {
+ const workorders = await getWorkOrders();
+ let filtered = workorders;
+ if (search) {
+ filtered = workorders.filter((w) =>
+ w.title.toLowerCase().includes(search.toLowerCase()) ||
+ w.number.toLowerCase().includes(search.toLowerCase()) ||
+ w.location.toLowerCase().includes(search.toLowerCase())
+ );
+ }
+ setTotalCount(filtered.length);
+ const start = (page - 1) * pageSize;
+ setRows(filtered.slice(start, start + pageSize));
+ } catch (error) {
+ setErr(error.message);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ useEffect(() => {
+ reload();
+ }, [search, page, pageSize]);
+
+ return { rows, search, setSearch, page, setPage, pageSize, setPageSize, totalCount, loading, err, reload };
+};
+
+export default useWorkOrders;
diff --git a/src/site.css b/src/site.css
index 73717903..d23cb2ff 100644
--- a/src/site.css
+++ b/src/site.css
@@ -4,4 +4,396 @@
margin: 0;
padding: 0;
z-index: 0;
-}
\ No newline at end of file
+ box-sizing: border-box;
+}
+
+body {
+ font-family: "Nunito", sans-serif;
+ background-color: #f5f5f5;
+ color: #333;
+ line-height: 1.5;
+}
+
+/* Page Layout */
+.listPage, .contactsPage {
+ padding: 20px;
+ background: #f5f5f5;
+ min-height: 100vh;
+}
+
+.pageTitle {
+ font-size: 28px;
+ font-weight: 600;
+ color: #333;
+ margin-bottom: 20px;
+}
+
+.card, .controlsCard {
+ background: white;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+ margin-bottom: 20px;
+}
+
+/* Controls */
+.controlsTop {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 15px;
+ border-bottom: 1px solid #eee;
+}
+
+.leftControls {
+ flex: 1;
+}
+
+.filter {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+}
+
+.filter select, .filter input {
+ padding: 8px 12px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ font-size: 14px;
+}
+
+.filter input {
+ flex: 1;
+ min-width: 300px;
+}
+
+.searchBtn {
+ padding: 8px 16px;
+ background: #007bff;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ font-weight: 600;
+}
+
+.searchBtn:hover {
+ background: #0056b3;
+}
+
+.rightControls {
+ display: flex;
+ gap: 8px;
+}
+
+.iconSmall {
+ width: 36px;
+ height: 36px;
+ padding: 0;
+ border: 1px solid #ddd;
+ background: white;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 18px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ transition: all 0.2s;
+}
+
+.iconSmall:hover {
+ background: #f0f0f0;
+ border-color: #999;
+}
+
+/* Table Styles */
+.tableContainer {
+ padding: 15px;
+}
+
+.tableResponsive {
+ overflow-x: auto;
+}
+
+.dataTable {
+ width: 100%;
+ border-collapse: collapse;
+ font-size: 14px;
+}
+
+.dataTable thead {
+ background: #f9f9f9;
+}
+
+.dataTable th {
+ padding: 12px;
+ text-align: left;
+ font-weight: 600;
+ color: #333;
+ border-bottom: 2px solid #ddd;
+}
+
+.dataTable td {
+ padding: 12px;
+ border-bottom: 1px solid #eee;
+ color: #333;
+}
+
+.dataTable tbody tr:hover {
+ background: #f9f9f9;
+}
+
+.dataTable a {
+ color: #007bff;
+ text-decoration: none;
+ cursor: pointer;
+}
+
+.dataTable a:hover {
+ text-decoration: underline;
+}
+
+.actionButtons {
+ display: flex;
+ gap: 8px;
+}
+
+.btnIcon {
+ padding: 4px 8px;
+ background: white;
+ border: 1px solid #ddd;
+ border-radius: 3px;
+ cursor: pointer;
+ font-size: 14px;
+ transition: all 0.2s;
+}
+
+.btnIcon:hover {
+ background: #f0f0f0;
+ border-color: #999;
+}
+
+.btnIcon.edit {
+ color: #28a745;
+}
+
+.btnIcon.delete {
+ color: #dc3545;
+}
+
+/* Pagination */
+.paginationContainer {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 15px;
+ border-top: 1px solid #eee;
+ font-size: 13px;
+}
+
+.paginationLeft, .paginationRight {
+ display: flex;
+ align-items: center;
+ gap: 15px;
+}
+
+.pagination {
+ display: flex;
+ gap: 8px;
+ align-items: center;
+}
+
+.pagination button {
+ padding: 6px 12px;
+ border: 1px solid #ddd;
+ background: white;
+ border-radius: 3px;
+ cursor: pointer;
+ font-size: 12px;
+}
+
+.pagination button:hover:not(:disabled) {
+ background: #f0f0f0;
+}
+
+.pagination button:disabled {
+ opacity: 0.5;
+ cursor: not-allowed;
+}
+
+/* Form Styles */
+.formWrapper {
+ padding: 20px;
+ background: #f5f5f5;
+ min-height: 100vh;
+}
+
+.formCard {
+ background: white;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ max-width: 900px;
+ margin: 0 auto;
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+}
+
+.formHeader {
+ padding: 20px;
+ border-bottom: 1px solid #ddd;
+ background: #f9f9f9;
+}
+
+.formHeader h2 {
+ margin: 0;
+ font-size: 22px;
+ color: #333;
+}
+
+.dataForm {
+ padding: 20px;
+}
+
+.section {
+ margin-bottom: 25px;
+}
+
+.sectionTitle {
+ font-size: 16px;
+ font-weight: 600;
+ color: #333;
+ margin-bottom: 15px;
+ border-bottom: 2px solid #007bff;
+ padding-bottom: 8px;
+}
+
+.formBody {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+ gap: 15px;
+ margin-bottom: 15px;
+}
+
+.formGroup {
+ display: flex;
+ flex-direction: column;
+}
+
+.formLabel {
+ font-size: 14px;
+ font-weight: 600;
+ margin-bottom: 6px;
+ color: #333;
+}
+
+.required {
+ color: #dc3545;
+}
+
+.formControl {
+ padding: 10px;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ font-size: 14px;
+ font-family: inherit;
+}
+
+.formControl:focus {
+ outline: none;
+ border-color: #007bff;
+ box-shadow: 0 0 0 3px rgba(0,123,255,0.1);
+}
+
+.formActions {
+ display: flex;
+ gap: 12px;
+ padding-top: 20px;
+ border-top: 1px solid #ddd;
+}
+
+.btnPrimary {
+ padding: 10px 24px;
+ background: #007bff;
+ color: white;
+ border: none;
+ border-radius: 4px;
+ font-size: 14px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.btnPrimary:hover {
+ background: #0056b3;
+}
+
+.btnPrimary:disabled {
+ opacity: 0.6;
+ cursor: not-allowed;
+}
+
+.btnSecondary {
+ padding: 10px 24px;
+ background: white;
+ color: #333;
+ border: 1px solid #ddd;
+ border-radius: 4px;
+ font-size: 14px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.2s;
+}
+
+.btnSecondary:hover {
+ background: #f0f0f0;
+}
+
+/* Loading State */
+.loading {
+ padding: 40px;
+ text-align: center;
+ color: #666;
+ font-size: 16px;
+}
+
+.error {
+ padding: 15px;
+ background: #f8d7da;
+ border: 1px solid #f5c6cb;
+ color: #721c24;
+ border-radius: 4px;
+ margin: 15px;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+ .controlsTop {
+ flex-direction: column;
+ align-items: stretch;
+ gap: 12px;
+ }
+
+ .filter {
+ flex-direction: column;
+ }
+
+ .filter input, .filter select {
+ width: 100%;
+ }
+
+ .dataTable {
+ font-size: 12px;
+ }
+
+ .dataTable th, .dataTable td {
+ padding: 8px;
+ }
+
+ .paginationContainer {
+ flex-direction: column;
+ gap: 12px;
+ }
+
+ .formBody {
+ grid-template-columns: 1fr;
+ }
+}