From f2c5d542e896dec2f04bfa8285ee75ce8b3f3895 Mon Sep 17 00:00:00 2001
From: Vikas <vikas.satyanarayana.bolla@ibm.com>
Date: Tue, 21 Apr 2026 14:27:14 +0530
Subject: [PATCH] Add maintenance notification UI implementation

Signed-off-by: Vikas <vikas.satyanarayana.bolla@ibm.com>
---
 .secrets.baseline                             |   4 +-
 web/src/components/App.jsx                    |  12 +-
 web/src/components/Header.jsx                 |   1 +
 web/src/components/MaintenanceConfig.jsx      | 234 +++++++++
 web/src/components/MaintenanceManager.jsx     | 484 ++++++++++++++++++
 .../components/MaintenanceNotification.jsx    | 107 ++++
 web/src/services/request.js                   |  76 +++
 web/src/styles/maintenance-config.scss        |  97 ++++
 web/src/styles/maintenance-manager.scss       |  68 +++
 web/src/styles/maintenance-notification.scss  |  16 +
 10 files changed, 1096 insertions(+), 3 deletions(-)
 create mode 100644 web/src/components/MaintenanceConfig.jsx
 create mode 100644 web/src/components/MaintenanceManager.jsx
 create mode 100644 web/src/components/MaintenanceNotification.jsx
 create mode 100644 web/src/styles/maintenance-config.scss
 create mode 100644 web/src/styles/maintenance-manager.scss
 create mode 100644 web/src/styles/maintenance-notification.scss

diff --git a/.secrets.baseline b/.secrets.baseline
index 88c34c81..a3c6ce6e 100644
--- a/.secrets.baseline
+++ b/.secrets.baseline
@@ -3,7 +3,7 @@
     "files": "go.mod|go.sum|^.secrets.baseline$",
     "lines": null
   },
-  "generated_at": "2025-11-27T10:58:34Z",
+  "generated_at": "2026-04-17T11:13:23Z",
   "plugins_used": [
     {
       "name": "AWSKeyDetector"
@@ -340,7 +340,7 @@
         "hashed_secret": "6947818ac409551f11fbaa78f0ea6391960aa5b8",
         "is_secret": false,
         "is_verified": false,
-        "line_number": 115,
+        "line_number": 113,
         "type": "Secret Keyword",
         "verified_result": null
       }
diff --git a/web/src/components/App.jsx b/web/src/components/App.jsx
index 5ed76415..0fc61a71 100644
--- a/web/src/components/App.jsx
+++ b/web/src/components/App.jsx
@@ -20,6 +20,8 @@ import Events from "./Events";
 import Keys from "./Keys";
 import { Theme } from "@carbon/react";
 import Feedbacks from "./Feedbacks";
+import MaintenanceNotification from "./MaintenanceNotification";
+import MaintenanceManager from "./MaintenanceManager";
 
 const RouterClass = React.memo(({ isAdmin }) => {
     return (
@@ -84,6 +86,12 @@ const RouterClass = React.memo(({ isAdmin }) => {
             element={<TnCRoute Component={Feedbacks} />}
           />
         )}
+        {isAdmin && (
+          <Route
+            path="/maintenance"
+            element={<TnCRoute Component={MaintenanceManager} />}
+          />
+        )}
       </Routes>
     );
 });
@@ -111,6 +119,7 @@ const App = () => {
       "/events",
       "/keys",
       "/feedbacks",
+      "/maintenance",
     ].includes(window.location.pathname)
   ) {
     window.location.href = "/login";
@@ -118,7 +127,8 @@ const App = () => {
   }
   return (
     <React.Fragment>
-      <Theme theme="g90">{auth === true && <HeaderNav onSideNavToggle={handleSideNavToggle} />} </Theme>
+      <Theme theme="g90">{auth && <HeaderNav onSideNavToggle={handleSideNavToggle} />} </Theme>
+      {auth && <MaintenanceNotification />}
       <section className={auth ? `contentSection ${isAdmin && isSideNavExpanded ? 'sideNavExpanded' : ''}` : ""}>
         <RouterClass isAdmin={isAdmin} />
       </section>
diff --git a/web/src/components/Header.jsx b/web/src/components/Header.jsx
index 63314461..06401854 100644
--- a/web/src/components/Header.jsx
+++ b/web/src/components/Header.jsx
@@ -178,6 +178,7 @@ const HeaderNav = ({ onSideNavToggle }) => {
                   {isAdmin && <MenuLink url="/keys" label="Keys" />}
                   {isAdmin && <MenuLink url="/users" label="Users" />}
                   {isAdmin && <MenuLink url="/events" label="Events" />}
+                  {isAdmin && <MenuLink url="/maintenance" label="Maintenance" />}
                 </SideNavItems>
               </SideNav>
               </div>
diff --git a/web/src/components/MaintenanceConfig.jsx b/web/src/components/MaintenanceConfig.jsx
new file mode 100644
index 00000000..51edecc2
--- /dev/null
+++ b/web/src/components/MaintenanceConfig.jsx
@@ -0,0 +1,234 @@
+import React, { useState, useEffect } from "react";
+import {
+  Toggle,
+  TextArea,
+  Button,
+  InlineNotification,
+  Loading,
+  Form,
+  Stack,
+} from "@carbon/react";
+import { getMaintenanceStatus, updateMaintenanceConfig } from "../services/request";
+import "../styles/maintenance-config.scss";
+
+const MaintenanceConfig = () => {
+  const [enabled, setEnabled] = useState(false);
+  const [startDate, setStartDate] = useState("");
+  const [endDate, setEndDate] = useState("");
+  const [message, setMessage] = useState("");
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [notification, setNotification] = useState(null);
+
+  // Helper function to format UTC date for datetime-local input
+  const formatDateForInput = (isoString) => {
+    if (!isoString) return "";
+    // datetime-local expects format: YYYY-MM-DDTHH:mm
+    // We keep it in UTC by using the ISO string directly
+    return isoString.slice(0, 16);
+  };
+
+  // Helper function to convert datetime-local value to UTC ISO string
+  const convertToUTC = (dateTimeLocal) => {
+    if (!dateTimeLocal) return null;
+    // Treat the input as UTC time
+    return new Date(dateTimeLocal + ':00Z').toISOString();
+  };
+
+  // Fetch current configuration
+  useEffect(() => {
+    fetchConfig();
+  }, []);
+
+  const fetchConfig = async () => {
+    setLoading(true);
+    try {
+      const response = await getMaintenanceStatus();
+      if (response.type === "GET_MAINTENANCE_STATUS" && response.payload) {
+        const config = response.payload;
+        setEnabled(config.enabled || false);
+        setStartDate(config.start_time ? formatDateForInput(config.start_time) : "");
+        setEndDate(config.end_time ? formatDateForInput(config.end_time) : "");
+        setMessage(config.message || "");
+      }
+    } catch (error) {
+      console.error("Error fetching maintenance config:", error);
+      showNotification("error", "Failed to load maintenance configuration");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const showNotification = (kind, subtitle) => {
+    setNotification({ kind, subtitle });
+    setTimeout(() => setNotification(null), 5000);
+  };
+
+  const handleSave = async () => {
+    // Validation
+    if (enabled) {
+      if (!startDate || !endDate) {
+        showNotification("error", "Start time and end time are required when maintenance is enabled");
+        return;
+      }
+      if (new Date(convertToUTC(endDate)) <= new Date(convertToUTC(startDate))) {
+        showNotification("error", "End time must be after start time");
+        return;
+      }
+      if (!message.trim()) {
+        showNotification("error", "Message is required when maintenance is enabled");
+        return;
+      }
+    }
+
+    setSaving(true);
+    try {
+      const payload = {
+        enabled,
+        start_time: enabled ? convertToUTC(startDate) : null,
+        end_time: enabled ? convertToUTC(endDate) : null,
+        message: enabled ? message.trim() : "",
+      };
+
+      console.log("Sending payload:", payload);
+
+      const response = await updateMaintenanceConfig(payload);
+      
+      if (response.type === "UPDATE_MAINTENANCE_CONFIG") {
+        const successMsg = enabled
+          ? "Successfully updated maintenance notification"
+          : "Successfully disabled maintenance notification";
+        showNotification("success", successMsg);
+        // Refresh the config to show updated values
+        await fetchConfig();
+      } else if (response.type === "API_ERROR") {
+        const errorMsg = response.payload?.response?.data?.error || response.payload?.message || "Failed to update maintenance configuration";
+        showNotification("error", errorMsg);
+      } else {
+        showNotification("error", "Failed to update maintenance configuration");
+      }
+    } catch (error) {
+      console.error("Error updating maintenance config:", error);
+      const errorMsg = error.response?.data?.error || error.message || "Failed to update maintenance configuration";
+      showNotification("error", errorMsg);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="maintenance-config-loading">
+        <Loading description="Loading maintenance configuration..." withOverlay={false} />
+      </div>
+    );
+  }
+
+  return (
+    <div className="maintenance-config-container">
+      <h2>Maintenance Notification Configuration</h2>
+      <p className="maintenance-config-description">
+        Configure maintenance notifications that will be displayed to all users. 
+        Notifications will appear 24 hours before the maintenance start time and remain visible until the end time.
+        <strong> All times are in UTC timezone.</strong>
+      </p>
+
+      {notification && (
+        <InlineNotification
+          kind={notification.kind}
+          title={notification.kind === "success" ? "Success" : "Error"}
+          subtitle={notification.subtitle}
+          onCloseButtonClick={() => setNotification(null)}
+          lowContrast
+        />
+      )}
+
+      <Form className="maintenance-config-form">
+        <Stack gap={6}>
+          <Toggle
+            id="maintenance-enabled"
+            labelText="Enable Maintenance Notification"
+            labelA="Disabled"
+            labelB="Enabled"
+            toggled={enabled}
+            onToggle={(checked) => setEnabled(checked)}
+          />
+
+          {enabled && (
+            <>
+              <div className="date-picker-group">
+                <label htmlFor="start-date" className="cds--label">
+                  Maintenance Start Time (UTC)
+                </label>
+                <input
+                  id="start-date"
+                  type="datetime-local"
+                  className="cds--text-input datetime-input"
+                  value={startDate}
+                  onChange={(e) => setStartDate(e.target.value)}
+                  onBlur={(e) => setStartDate(e.target.value)}
+                  step="60"
+                  min={new Date().toISOString().slice(0, 16)}
+                />
+                <div className="cds--form__helper-text">
+                  Format: YYYY-MM-DDTHH:mm (e.g., {new Date().getFullYear()}-04-15T10:00) - UTC timezone
+                </div>
+              </div>
+
+              <div className="date-picker-group">
+                <label htmlFor="end-date" className="cds--label">
+                  Maintenance End Time (UTC)
+                </label>
+                <input
+                  id="end-date"
+                  type="datetime-local"
+                  className="cds--text-input datetime-input"
+                  value={endDate}
+                  onChange={(e) => setEndDate(e.target.value)}
+                  onBlur={(e) => setEndDate(e.target.value)}
+                  step="60"
+                  min={new Date().toISOString().slice(0, 16)}
+                />
+                <div className="cds--form__helper-text">
+                  Format: YYYY-MM-DDTHH:mm (e.g., {new Date().getFullYear()}-04-15T14:00) - UTC timezone
+                </div>
+              </div>
+
+              <TextArea
+                id="maintenance-message"
+                labelText="Notification Message"
+                placeholder="Enter the maintenance notification message..."
+                value={message}
+                onChange={(e) => setMessage(e.target.value)}
+                rows={4}
+                helperText="This message will be displayed to all users during the maintenance window"
+              />
+            </>
+          )}
+
+          <div className="button-group">
+            <Button
+              kind="primary"
+              onClick={handleSave}
+              disabled={saving}
+            >
+              {saving ? "Saving..." : "Save Configuration"}
+            </Button>
+            {enabled && (
+              <Button
+                kind="secondary"
+                onClick={fetchConfig}
+                disabled={saving}
+              >
+                Reset
+              </Button>
+            )}
+          </div>
+        </Stack>
+      </Form>
+    </div>
+  );
+};
+
+export default MaintenanceConfig;
+
diff --git a/web/src/components/MaintenanceManager.jsx b/web/src/components/MaintenanceManager.jsx
new file mode 100644
index 00000000..1ae10885
--- /dev/null
+++ b/web/src/components/MaintenanceManager.jsx
@@ -0,0 +1,484 @@
+import React, { useState, useEffect } from "react";
+import {
+  Button,
+  DataTable,
+  TableContainer,
+  Table,
+  TableHead,
+  TableRow,
+  TableHeader,
+  TableBody,
+  TableCell,
+  Modal,
+  TextInput,
+  TextArea,
+  Toggle,
+  InlineNotification,
+  TableToolbar,
+  TableToolbarContent,
+  TableToolbarSearch,
+  OverflowMenu,
+  OverflowMenuItem,
+  Pagination,
+} from "@carbon/react";
+import { Add } from "@carbon/icons-react";
+import {
+  getAllMaintenanceWindows,
+  createMaintenanceWindow,
+  updateMaintenanceWindow,
+  deleteMaintenanceWindow,
+} from "../services/request";
+import "../styles/maintenance-manager.scss";
+
+const MaintenanceManager = () => {
+  const [windows, setWindows] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [editingWindow, setEditingWindow] = useState(null);
+  const [notification, setNotification] = useState(null);
+  const [modalError, setModalError] = useState(null);
+  const [searchValue, setSearchValue] = useState("");
+  
+  // Pagination state
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [totalItems, setTotalItems] = useState(0);
+
+  // Form state
+  const [formData, setFormData] = useState({
+    enabled: true,
+    start_time: "",
+    end_time: "",
+    message: "",
+  });
+
+  // Fetch all maintenance windows (admin view with ?all=true and pagination)
+  const fetchWindows = async (currentPage = page, currentPageSize = pageSize) => {
+    setLoading(true);
+    try {
+      // Pass true to get all windows with pagination
+      const response = await getAllMaintenanceWindows(true, currentPage, currentPageSize);
+      if (response.type === "GET_ALL_MAINTENANCE_WINDOWS" && response.payload) {
+        const maintenances = response.payload.maintenances || [];
+        setWindows(maintenances);
+        setTotalItems(response.payload.total_items || 0);
+      }
+    } catch (error) {
+      console.error("Error fetching maintenance windows:", error);
+      showNotification("error", "Failed to load maintenance windows");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchWindows();
+  }, [page, pageSize]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Handle pagination change
+  const handlePaginationChange = ({ page: newPage, pageSize: newPageSize }) => {
+    setPage(newPage);
+    setPageSize(newPageSize);
+  };
+
+  // Show notification
+  const showNotification = (kind, message) => {
+    setNotification({ kind, message });
+    setTimeout(() => setNotification(null), 5000);
+  };
+
+  // Convert local datetime to UTC ISO string
+  const convertToUTC = (localDatetime) => {
+    if (!localDatetime) return null;
+    const date = new Date(localDatetime);
+    return date.toISOString();
+  };
+
+  // Convert UTC ISO string to local datetime-local format
+  const convertToLocal = (utcString) => {
+    if (!utcString) return "";
+    const date = new Date(utcString);
+    const offset = date.getTimezoneOffset() * 60000;
+    const localDate = new Date(date.getTime() - offset);
+    return localDate.toISOString().slice(0, 16);
+  };
+
+  // Format date for display in local timezone
+  const formatDate = (dateString) => {
+    if (!dateString) return "N/A";
+    const date = new Date(dateString);
+    return date.toLocaleString(undefined, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: true
+    });
+  };
+
+  // Open modal for creating new window
+  const handleCreate = () => {
+    setEditingWindow(null);
+    setModalError(null);
+    setFormData({
+      enabled: true,
+      start_time: "",
+      end_time: "",
+      message: "",
+    });
+    setIsModalOpen(true);
+  };
+
+  // Open modal for editing existing window
+  const handleEdit = (window) => {
+    setEditingWindow(window);
+    setModalError(null);
+    setFormData({
+      enabled: window.enabled,
+      start_time: convertToLocal(window.start_time),
+      end_time: convertToLocal(window.end_time),
+      message: window.message,
+    });
+    setIsModalOpen(true);
+  };
+
+  // Handle toggle enable/disable
+  const handleToggleEnabled = async (window) => {
+    try {
+      const payload = {
+        enabled: !window.enabled,
+        start_time: window.start_time,
+        end_time: window.end_time,
+        message: window.message,
+      };
+
+      const response = await updateMaintenanceWindow(window.id, payload);
+      if (response.type === "UPDATE_MAINTENANCE_WINDOW") {
+        showNotification(
+          "success",
+          `Maintenance window ${payload.enabled ? "enabled" : "disabled"} successfully`
+        );
+        fetchWindows();
+      } else if (response.type === "API_ERROR") {
+        const errorMsg = response.payload?.response?.data?.error || "Operation failed";
+        showNotification("error", errorMsg);
+      }
+    } catch (error) {
+      console.error("Error toggling maintenance window:", error);
+      showNotification("error", "Failed to toggle maintenance window");
+    }
+  };
+
+  // Handle form submission
+  const handleSubmit = async () => {
+    try {
+      // Clear previous modal errors
+      setModalError(null);
+
+      // Validation
+      if (!formData.start_time || !formData.end_time) {
+        setModalError("Start time and end time are required");
+        return;
+      }
+
+      if (!formData.message.trim()) {
+        setModalError("Message is required");
+        return;
+      }
+
+      const now = new Date();
+      const startTime = new Date(formData.start_time);
+      const endTime = new Date(formData.end_time);
+
+      // Validate start time is not in the past (only for new windows or when changing start time)
+      if (!editingWindow) {
+        // Creating new window - start time must be in future
+        if (startTime < now) {
+          setModalError("Start time cannot be in the past");
+          return;
+        }
+      } else {
+        // Updating existing window - only validate if start time is being changed
+        const existingStartTime = new Date(editingWindow.start_time);
+        if (startTime.getTime() !== existingStartTime.getTime() && startTime < now) {
+          setModalError("Start time cannot be in the past");
+          return;
+        }
+      }
+
+      // Validate end time is after start time
+      if (endTime <= startTime) {
+        setModalError("End time must be after start time");
+        return;
+      }
+
+      const payload = {
+        enabled: formData.enabled,
+        start_time: convertToUTC(formData.start_time),
+        end_time: convertToUTC(formData.end_time),
+        message: formData.message.trim(),
+      };
+
+      let response;
+      if (editingWindow) {
+        // Update existing window
+        response = await updateMaintenanceWindow(editingWindow.id, payload);
+        if (response.type === "UPDATE_MAINTENANCE_WINDOW") {
+          showNotification("success", "Maintenance window updated successfully");
+        }
+      } else {
+        // Create new window
+        response = await createMaintenanceWindow(payload);
+        if (response.type === "CREATE_MAINTENANCE_WINDOW") {
+          showNotification("success", "Maintenance window created successfully");
+        }
+      }
+
+      if (response.type === "API_ERROR") {
+        const errorMsg = response.payload?.response?.data?.error || "Operation failed";
+        setModalError(errorMsg);
+        return;
+      }
+
+      setIsModalOpen(false);
+      setModalError(null);
+      fetchWindows();
+    } catch (error) {
+      console.error("Error saving maintenance window:", error);
+      setModalError("Failed to save maintenance window");
+    }
+  };
+
+  // Handle delete
+  const handleDelete = async (windowId) => {
+    if (!window.confirm("Are you sure you want to delete this maintenance window?")) {
+      return;
+    }
+
+    try {
+      const response = await deleteMaintenanceWindow(windowId);
+      if (response.type === "DELETE_MAINTENANCE_WINDOW") {
+        showNotification("success", "Maintenance window deleted successfully");
+        fetchWindows();
+      } else if (response.type === "API_ERROR") {
+        const errorMsg = response.payload?.response?.data?.error || "Delete failed";
+        showNotification("error", errorMsg);
+      }
+    } catch (error) {
+      console.error("Error deleting maintenance window:", error);
+      showNotification("error", "Failed to delete maintenance window");
+    }
+  };
+
+  // Filter windows based on search
+  const filteredWindows = windows.filter((w) =>
+    w.message.toLowerCase().includes(searchValue.toLowerCase())
+  );
+
+  const headers = [
+    { key: "enabled", header: "Status", isSortable: true },
+    { key: "start_time", header: "Start Time", isSortable: true },
+    { key: "end_time", header: "End Time", isSortable: true },
+    { key: "message", header: "Message", isSortable: true },
+    { key: "actions", header: "Actions" },
+  ];
+
+  const rows = filteredWindows.map((window) => ({
+    id: window.id,
+    enabled: window.enabled ? "Enabled" : "Disabled",
+    start_time: formatDate(window.start_time),
+    end_time: formatDate(window.end_time),
+    message: window.message,
+    actions: window,
+  }));
+
+  return (
+    <div className="maintenance-manager">
+      <div className="maintenance-manager__header">
+        <h2>Maintenance Windows</h2>
+        <p>Manage scheduled maintenance notifications for users</p>
+      </div>
+
+      {notification && (
+        <InlineNotification
+          kind={notification.kind}
+          title={notification.kind === "success" ? "Success" : "Error"}
+          subtitle={notification.message}
+          onCloseButtonClick={() => setNotification(null)}
+          lowContrast
+        />
+      )}
+
+      <DataTable rows={rows} headers={headers}>
+        {({
+          rows,
+          headers,
+          getHeaderProps,
+          getRowProps,
+          getTableProps,
+          getTableContainerProps,
+        }) => (
+          <TableContainer
+            title=""
+            description=""
+            {...getTableContainerProps()}
+          >
+            <TableToolbar>
+              <TableToolbarContent>
+                <TableToolbarSearch
+                  persistent={true}
+                  tabIndex={0}
+                  onChange={(e) => setSearchValue(e.target.value)}
+                  placeholder="Search"
+                />
+                <Button
+                  renderIcon={Add}
+                  onClick={handleCreate}
+                  size="sm"
+                >
+                  Add Maintenance Window
+                </Button>
+              </TableToolbarContent>
+            </TableToolbar>
+            <Table {...getTableProps()}>
+              <TableHead>
+                <TableRow>
+                  {headers.map((header) => (
+                    <TableHeader key={header.key} {...getHeaderProps({ header })}>
+                      {header.header}
+                    </TableHeader>
+                  ))}
+                </TableRow>
+              </TableHead>
+              <TableBody>
+                {loading ? (
+                  <TableRow>
+                    <TableCell colSpan={headers.length}>Loading...</TableCell>
+                  </TableRow>
+                ) : rows.length === 0 ? (
+                  <TableRow>
+                    <TableCell colSpan={headers.length}>
+                      No maintenance windows found
+                    </TableCell>
+                  </TableRow>
+                ) : (
+                  rows.map((row) => (
+                    <TableRow key={row.id} {...getRowProps({ row })}>
+                      {row.cells.map((cell) => {
+                        if (cell.info.header === "actions") {
+                          const window = cell.value;
+                          return (
+                            <TableCell key={cell.id}>
+                              <OverflowMenu flipped>
+                                <OverflowMenuItem
+                                  itemText={window.enabled ? "Disable" : "Enable"}
+                                  onClick={() => handleToggleEnabled(window)}
+                                />
+                                <OverflowMenuItem
+                                  itemText="Edit"
+                                  onClick={() => handleEdit(window)}
+                                />
+                                <OverflowMenuItem
+                                  itemText="Delete"
+                                  isDelete
+                                  onClick={() => handleDelete(window.id)}
+                                />
+                              </OverflowMenu>
+                            </TableCell>
+                          );
+                        }
+                        return <TableCell key={cell.id}>{cell.value}</TableCell>;
+                      })}
+                    </TableRow>
+                  ))
+                )}
+              </TableBody>
+            </Table>
+          </TableContainer>
+        )}
+      </DataTable>
+
+      {!loading && totalItems > 0 && (
+        <Pagination
+          backwardText="Previous page"
+          forwardText="Next page"
+          itemsPerPageText="Items per page:"
+          page={page}
+          pageSize={pageSize}
+          pageSizes={[10, 20, 30, 40, 50]}
+          totalItems={totalItems}
+          onChange={handlePaginationChange}
+        />
+      )}
+
+      <Modal
+        open={isModalOpen}
+        onRequestClose={() => {
+          setIsModalOpen(false);
+          setModalError(null);
+        }}
+        onRequestSubmit={handleSubmit}
+        modalHeading={editingWindow ? "Edit Maintenance Window" : "Create Maintenance Window"}
+        primaryButtonText={editingWindow ? "Update" : "Create"}
+        secondaryButtonText="Cancel"
+        size="md"
+      >
+        <div className="maintenance-form">
+          {modalError && (
+            <InlineNotification
+              kind="error"
+              title="Error"
+              subtitle={modalError}
+              onCloseButtonClick={() => setModalError(null)}
+              lowContrast
+              style={{ marginBottom: "1rem" }}
+            />
+          )}
+
+          <Toggle
+            id="enabled-toggle"
+            labelText="Enable this maintenance window"
+            toggled={formData.enabled}
+            onToggle={(checked) => setFormData({ ...formData, enabled: checked })}
+          />
+
+          <TextInput
+            id="start-time"
+            type="datetime-local"
+            labelText="Start Time"
+            value={formData.start_time}
+            onChange={(e) => setFormData({ ...formData, start_time: e.target.value })}
+            min={new Date().toISOString().slice(0, 16)}
+            step="60"
+            className="datetime-input"
+            helperText="Select maintenance start date and time"
+          />
+
+          <TextInput
+            id="end-time"
+            type="datetime-local"
+            labelText="End Time"
+            value={formData.end_time}
+            onChange={(e) => setFormData({ ...formData, end_time: e.target.value })}
+            min={formData.start_time || new Date().toISOString().slice(0, 16)}
+            step="60"
+            className="datetime-input"
+            helperText="Select maintenance end date and time"
+          />
+
+          <TextArea
+            id="message"
+            labelText="Notification Message"
+            placeholder="Enter the maintenance notification message"
+            value={formData.message}
+            onChange={(e) => setFormData({ ...formData, message: e.target.value })}
+            rows={4}
+          />
+        </div>
+      </Modal>
+    </div>
+  );
+};
+
+export default MaintenanceManager;
diff --git a/web/src/components/MaintenanceNotification.jsx b/web/src/components/MaintenanceNotification.jsx
new file mode 100644
index 00000000..cae5510b
--- /dev/null
+++ b/web/src/components/MaintenanceNotification.jsx
@@ -0,0 +1,107 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { InlineNotification } from "@carbon/react";
+import { getAllMaintenanceWindows } from "../services/request";
+import "../styles/maintenance-notification.scss";
+
+// Constants
+const CHECK_INTERVAL_MS = 600000; // 10 minutes
+const CACHE_DURATION_MS = 600000; // 10 minutes cache
+const DEFAULT_MESSAGE = "Scheduled maintenance in progress. Some services may be temporarily unavailable.";
+
+// Cache for API response
+let cachedWindows = null;
+let cacheTimestamp = null;
+
+const MaintenanceNotification = () => {
+  const [activeWindow, setActiveWindow] = useState(null);
+  const [loading, setLoading] = useState(true);
+
+  // Fetch active maintenance window from API
+  // Backend now returns only the earliest active window
+  const fetchMaintenanceWindow = useCallback(async () => {
+    try {
+      // Check cache first
+      const now = Date.now();
+      if (cachedWindows && cacheTimestamp && (now - cacheTimestamp) < CACHE_DURATION_MS) {
+        return cachedWindows;
+      }
+
+      // Fetch from API (backend returns only active window)
+      const response = await getAllMaintenanceWindows();
+      
+      if (response.type === "GET_ALL_MAINTENANCE_WINDOWS" && response.payload) {
+        cachedWindows = response.payload.maintenances || [];
+        cacheTimestamp = now;
+        return cachedWindows;
+      }
+      
+      // Return empty array if API fails
+      return [];
+    } catch (error) {
+      return [];
+    }
+  }, []);
+
+  // Check for active maintenance window
+  const checkMaintenanceWindow = useCallback(async () => {
+    setLoading(true);
+    
+    try {
+      const windows = await fetchMaintenanceWindow();
+      
+      // Backend returns only 1 active window (or empty array)
+      if (windows && windows.length > 0) {
+        const window = windows[0];
+        setActiveWindow({
+          id: window.id,
+          message: window.message || DEFAULT_MESSAGE,
+        });
+      } else {
+        setActiveWindow(null);
+      }
+      
+      setLoading(false);
+    } catch (error) {
+      setActiveWindow(null);
+      setLoading(false);
+    }
+  }, [fetchMaintenanceWindow]);
+
+  useEffect(() => {
+    // Check immediately on mount
+    checkMaintenanceWindow();
+
+    // Set up interval to check periodically
+    const interval = setInterval(checkMaintenanceWindow, CHECK_INTERVAL_MS);
+
+    // Cleanup interval on unmount
+    return () => clearInterval(interval);
+  }, [checkMaintenanceWindow]);
+
+  // Handle closing notification
+  const handleClose = () => {
+    setActiveWindow(null);
+  };
+
+  // Don't render if no active window or still loading
+  if (loading || !activeWindow) {
+    return null;
+  }
+
+  return (
+    <div className="maintenance-notification-container">
+      <InlineNotification
+        kind="warning"
+        title="Maintenance Notice"
+        subtitle={activeWindow.message}
+        hideCloseButton={false}
+        onCloseButtonClick={handleClose}
+        lowContrast
+        aria-live="polite"
+        role="alert"
+      />
+    </div>
+  );
+};
+
+export default MaintenanceNotification;
diff --git a/web/src/services/request.js b/web/src/services/request.js
index 6139521e..d053f5d3 100644
--- a/web/src/services/request.js
+++ b/web/src/services/request.js
@@ -421,3 +421,79 @@ export const getFeedbacks = async (page, per_page) => {
   }
   return result;
 };
+
+// Maintenance Windows API
+
+export const getAllMaintenanceWindows = async (includeAll = false, page = 1, perPage = 10) => {
+  let url = includeAll
+    ? `/pac-go-server/maintenance?all=true&page=${page}&per_page=${perPage}`
+    : "/pac-go-server/maintenance";
+  let result = {};
+  try {
+    const response = await _axios.get(url);
+    result = {
+      type: "GET_ALL_MAINTENANCE_WINDOWS",
+      payload: response.data,
+    };
+  } catch (error) {
+    result = {
+      type: "API_ERROR",
+      payload: error,
+    };
+  }
+  return result;
+};
+
+export const createMaintenanceWindow = async (payload) => {
+  const url = "/pac-go-server/maintenance";
+  let result = {};
+  try {
+    const response = await _axios.post(url, payload);
+    result = {
+      type: "CREATE_MAINTENANCE_WINDOW",
+      payload: response.data,
+    };
+  } catch (error) {
+    result = {
+      type: "API_ERROR",
+      payload: error,
+    };
+  }
+  return result;
+};
+
+export const updateMaintenanceWindow = async (id, payload) => {
+  const url = `/pac-go-server/maintenance/${id}`;
+  let result = {};
+  try {
+    const response = await _axios.put(url, payload);
+    result = {
+      type: "UPDATE_MAINTENANCE_WINDOW",
+      payload: response.data,
+    };
+  } catch (error) {
+    result = {
+      type: "API_ERROR",
+      payload: error,
+    };
+  }
+  return result;
+};
+
+export const deleteMaintenanceWindow = async (id) => {
+  const url = `/pac-go-server/maintenance/${id}`;
+  let result = {};
+  try {
+    const response = await _axios.delete(url);
+    result = {
+      type: "DELETE_MAINTENANCE_WINDOW",
+      payload: response.data,
+    };
+  } catch (error) {
+    result = {
+      type: "API_ERROR",
+      payload: error,
+    };
+  }
+  return result;
+};
diff --git a/web/src/styles/maintenance-config.scss b/web/src/styles/maintenance-config.scss
new file mode 100644
index 00000000..c7d07038
--- /dev/null
+++ b/web/src/styles/maintenance-config.scss
@@ -0,0 +1,97 @@
+.maintenance-config-container {
+  padding: 2rem;
+  max-width: 800px;
+  margin: 0 auto;
+
+  h2 {
+    margin-bottom: 1rem;
+    font-size: 1.75rem;
+    font-weight: 600;
+  }
+
+  .maintenance-config-description {
+    margin-bottom: 2rem;
+    color: #525252;
+    line-height: 1.5;
+  }
+
+  .maintenance-config-form {
+    background: #ffffff;
+    padding: 2rem;
+    border-radius: 4px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    margin-bottom: 2rem;
+
+    .date-picker-group {
+      margin-bottom: 1rem;
+
+      .datetime-input {
+        cursor: text;
+        
+        &:hover {
+          cursor: text;
+        }
+        
+        &:focus {
+          cursor: text;
+        }
+      }
+    }
+
+    .button-group {
+      display: flex;
+      gap: 1rem;
+      margin-top: 2rem;
+    }
+  }
+
+  .maintenance-config-info {
+    background: #f4f4f4;
+    padding: 1.5rem;
+    border-radius: 4px;
+    border-left: 4px solid #0f62fe;
+
+    h4 {
+      margin-top: 0;
+      margin-bottom: 1rem;
+      font-size: 1rem;
+      font-weight: 600;
+    }
+
+    ul {
+      margin: 0;
+      padding-left: 1.5rem;
+
+      li {
+        margin-bottom: 0.5rem;
+        line-height: 1.5;
+      }
+    }
+  }
+
+  .maintenance-config-loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 400px;
+  }
+}
+
+// Dark theme support
+[data-carbon-theme="g100"],
+[data-carbon-theme="g90"] {
+  .maintenance-config-container {
+    .maintenance-config-description {
+      color: #c6c6c6;
+    }
+
+    .maintenance-config-form {
+      background: #262626;
+    }
+
+    .maintenance-config-info {
+      background: #393939;
+      border-left-color: #78a9ff;
+    }
+  }
+}
diff --git a/web/src/styles/maintenance-manager.scss b/web/src/styles/maintenance-manager.scss
new file mode 100644
index 00000000..2ff83d42
--- /dev/null
+++ b/web/src/styles/maintenance-manager.scss
@@ -0,0 +1,68 @@
+.maintenance-manager {
+  padding: 2rem;
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+
+  &__header {
+    margin-bottom: 2rem;
+
+    h2 {
+      font-size: 1.75rem;
+      font-weight: 600;
+      margin-bottom: 0.5rem;
+    }
+
+    p {
+      color: #525252;
+      font-size: 0.875rem;
+    }
+  }
+
+  .cds--inline-notification {
+    margin-bottom: 1rem;
+  }
+
+  .cds--data-table-container {
+    margin-top: 1rem;
+  }
+
+  .maintenance-form {
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    padding: 1rem 0;
+
+    .cds--toggle {
+      margin-bottom: 0.5rem;
+    }
+
+    .datetime-input {
+      cursor: text;
+
+      &:hover {
+        cursor: text;
+      }
+
+      &:focus {
+        cursor: text;
+      }
+    }
+
+    .cds--text-input__field-wrapper {
+      input[type="datetime-local"] {
+        cursor: text;
+      }
+    }
+
+    .cds--text-area {
+      min-height: 100px;
+    }
+  }
+
+  .cds--overflow-menu {
+    .cds--overflow-menu__icon {
+      fill: #161616;
+    }
+  }
+}
diff --git a/web/src/styles/maintenance-notification.scss b/web/src/styles/maintenance-notification.scss
new file mode 100644
index 00000000..be87bcac
--- /dev/null
+++ b/web/src/styles/maintenance-notification.scss
@@ -0,0 +1,16 @@
+.maintenance-notification-container {
+  position: sticky;
+  top: 48px;
+  left: 0;
+  right: 0;
+  z-index: 100; 
+  width: 100%;
+  margin-bottom: 1rem;
+  
+  .cds--inline-notification {
+    max-width: 100%;
+    margin: 0;
+    border-radius: 0;
+  }
+}
+