From 975fb65c3d16265d950667e1e0dca9738cd3735b Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Tue, 20 May 2025 15:15:11 +0800
Subject: [PATCH 01/16] Updated to clone a specific branch:develop for Local
 Developement

---
 CONTRIBUTING.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 5f7c278..ca2d9bc 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -46,7 +46,7 @@ Click "Fork" on [GitHub](https://github.com/operacle/checkcle) to create your ow
 
 ### 2. Clone Your Fork
 ```bash
-git clone https://github.com/operacle/checkcle.git
+git clone --branch develop https://github.com/operacle/checkcle.git
 cd checkcle
 ```
 

From 34e78e5c46d925a2963ddbbf54f03c4bb686712d Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Tue, 20 May 2025 16:45:06 +0800
Subject: [PATCH 02/16] Removed DockerFile

---
 docker/Dockerfile | 40 ----------------------------------------
 1 file changed, 40 deletions(-)
 delete mode 100644 docker/Dockerfile

diff --git a/docker/Dockerfile b/docker/Dockerfile
deleted file mode 100644
index eba5abc..0000000
--- a/docker/Dockerfile
+++ /dev/null
@@ -1,40 +0,0 @@
-# Stage 1: Build the frontend
-FROM node:18-alpine AS frontend-builder
-WORKDIR /app
-COPY application/package*.json ./
-RUN npm install
-COPY application/ ./
-RUN npm run build
-
-# Stage 2: Download PocketBase binary
-FROM alpine:3.17 AS pb-builder
-WORKDIR /pb
-ARG PB_VERSION=0.27.2
-RUN apk add --no-cache wget unzip \
-    && wget https://github.com/pocketbase/pocketbase/releases/download/v${PB_VERSION}/pocketbase_${PB_VERSION}_linux_amd64.zip \
-    && unzip pocketbase_${PB_VERSION}_linux_amd64.zip \
-    && chmod +x /pb/pocketbase
-
-# Stage 3: Final runtime image
-FROM alpine:3.17
-WORKDIR /app
-
-# Copy PocketBase binary
-COPY --from=pb-builder /pb/pocketbase /app/pocketbase
-
-# Copy frontend build to PocketBase public directory
-COPY --from=frontend-builder /app/dist /app/pb_public
-
-# Copy backend files
-COPY server/pb_migrations /app/pb_migrations
-COPY server/pb_hooks /app/pb_hooks
-COPY server/pb_data /app/pb_data  
-
-# Mark pb_data as a volume for runtime persistence
-VOLUME /app/pb_data
-
-# Expose default PocketBase port
-EXPOSE 8090
-
-# Launch PocketBase and bind to 0.0.0.0 for external access
-CMD ["/app/pocketbase", "serve", "--http=0.0.0.0:8090", "--dir", "/app/pb_data"]

From e4b5ba96c11343cb017351887e008440332bcd9d Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Tue, 20 May 2025 16:45:31 +0800
Subject: [PATCH 03/16] Updated Pocket API Connection for production

---
 application/src/lib/pocketbase.ts | 30 ++++++++++++------------------
 1 file changed, 12 insertions(+), 18 deletions(-)

diff --git a/application/src/lib/pocketbase.ts b/application/src/lib/pocketbase.ts
index 4ad1dfb..8baea56 100644
--- a/application/src/lib/pocketbase.ts
+++ b/application/src/lib/pocketbase.ts
@@ -1,17 +1,16 @@
 import PocketBase from 'pocketbase';
 
-// Dynamically detect API base URL from current host (for use in browser)
+// Auto-detect base URL from browser location
 const dynamicBaseUrl =
   typeof window !== 'undefined'
-    ? `${window.location.protocol}//${window.location.hostname}:8090`
+    ? window.location.origin
     : 'http://localhost:8090';
 
-// Define available API endpoints
+// Define API endpoints
 export const API_ENDPOINTS = {
   REMOTE: dynamicBaseUrl
 };
 
-// Get the current endpoint from localStorage or use remote as default
 export const getCurrentEndpoint = (): string => {
   if (typeof window !== 'undefined') {
     const savedEndpoint = localStorage.getItem('pocketbase_endpoint');
@@ -20,26 +19,19 @@ export const getCurrentEndpoint = (): string => {
   return API_ENDPOINTS.REMOTE;
 };
 
-// Set the API endpoint and reinitialize PocketBase
 export const setApiEndpoint = (endpoint: string): void => {
   if (typeof window !== 'undefined') {
     localStorage.setItem('pocketbase_endpoint', endpoint);
-    window.location.reload(); // Reload to reinitialize PocketBase with new endpoint
+    window.location.reload();
   }
 };
 
-// Initialize the PocketBase client with the current API URL
 export const pb = new PocketBase(getCurrentEndpoint());
 
-// Helper to check if user is authenticated
-export const isAuthenticated = () => {
-  return pb.authStore.isValid;
-};
+export const isAuthenticated = () => pb.authStore.isValid;
 
-// Export the auth store for use in components
 export const authStore = pb.authStore;
 
-// Configure PocketBase to persist authentication between page reloads
 if (typeof window !== 'undefined') {
   const storedAuthData = localStorage.getItem('pocketbase_auth');
   if (storedAuthData) {
@@ -52,13 +44,15 @@ if (typeof window !== 'undefined') {
     }
   }
 
-  // Subscribe to authStore changes to persist authentication
   pb.authStore.onChange(() => {
     if (pb.authStore.isValid) {
-      localStorage.setItem('pocketbase_auth', JSON.stringify({
-        token: pb.authStore.token,
-        model: pb.authStore.model
-      }));
+      localStorage.setItem(
+        'pocketbase_auth',
+        JSON.stringify({
+          token: pb.authStore.token,
+          model: pb.authStore.model
+        })
+      );
     } else {
       localStorage.removeItem('pocketbase_auth');
     }

From 1f13d5c6be42cf3ff61c5cb041ff76a989aac227 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Thu, 22 May 2025 23:10:46 +0800
Subject: [PATCH 04/16] Updated: About System Page

---
 .../src/components/settings/about-system/AboutSystem.tsx | 9 ++-------
 1 file changed, 2 insertions(+), 7 deletions(-)

diff --git a/application/src/components/settings/about-system/AboutSystem.tsx b/application/src/components/settings/about-system/AboutSystem.tsx
index fdd5736..9509d2e 100644
--- a/application/src/components/settings/about-system/AboutSystem.tsx
+++ b/application/src/components/settings/about-system/AboutSystem.tsx
@@ -32,18 +32,13 @@ export const AboutSystem: React.FC = () => {
               <ServerIcon className={`h-5 w-5 ${theme === 'dark' ? 'text-sky-400' : 'text-sky-600'}`} />
               <span className="font-thin text-xl">{t('systemDescription')}</span>
             </CardTitle>
-            <CardDescription className="font-medium text-base">{systemName || 'ReamStack'}</CardDescription>
           </CardHeader>
           <CardContent className="space-y-6 pt-6">
             <div className="flex flex-col space-y-4">
-              <p className="text-base leading-relaxed">
-                {t('systemVersion')} <span className="font-semibold">1.0.0</span> {t('isAModern')} {t('serverMonitoring')} {t('solution')} {t('designedFor')} {t('enterpriseUse')}. {t('providesRealtime')} {t('uptimeTracking')}, {t('performanceAnalytics')}, {t('andAlertNotifications')}.
-              </p>
-              
               <div className="flex flex-col space-y-3 pt-2">
                 <div className="flex justify-between items-center">
                   <span className="text-muted-foreground">{t('systemVersion')}</span>
-                  <span className="text-foreground font-medium">{t('version')} 1.0.0</span>
+                  <span className="text-foreground font-medium">{t('version')} 1.1.0</span>
                 </div>
                 <Separator className="my-1" />
                 <div className="flex justify-between items-center">
@@ -53,7 +48,7 @@ export const AboutSystem: React.FC = () => {
                 <Separator className="my-1" />
                 <div className="flex justify-between items-center">
                   <span className="text-muted-foreground">{t('releasedOn')}</span>
-                  <span className="text-foreground font-medium">January 15, 2025</span>
+                  <span className="text-foreground font-medium">May 16, 2025</span>
                 </div>
               </div>
             </div>

From 705acfbe1dd4a012c89fb52c536435986f81c0eb Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Fri, 23 May 2025 18:48:03 +0800
Subject: [PATCH 05/16] Add Schedule & Incident menu sidebar

---
 application/src/App.tsx | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/application/src/App.tsx b/application/src/App.tsx
index f0907e3..9c79abf 100644
--- a/application/src/App.tsx
+++ b/application/src/App.tsx
@@ -16,6 +16,7 @@ import Settings from "./pages/Settings";
 import Profile from "./pages/Profile";
 import NotFound from "./pages/NotFound";
 import SslDomain from "./pages/SslDomain";
+import ScheduleIncident from "./pages/ScheduleIncident";
 
 // Create a Protected route component
 const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
@@ -102,6 +103,14 @@ const App = () => {
                     </ProtectedRoute>
                   } 
                 />
+                <Route 
+                  path="/schedule-incident" 
+                  element={
+                    <ProtectedRoute>
+                      <ScheduleIncident />
+                    </ProtectedRoute>
+                  } 
+                />
                 {/* ADD ALL CUSTOM ROUTES ABOVE THE CATCH-ALL "*" ROUTE */}
                 <Route path="*" element={<NotFound />} />
               </Routes>

From 686634f0acfa2e015f17abb59c2c15b629e8be6a Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Fri, 23 May 2025 20:16:53 +0800
Subject: [PATCH 06/16] Update the word German to Deutsch

---
 application/src/components/dashboard/Header.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/application/src/components/dashboard/Header.tsx b/application/src/components/dashboard/Header.tsx
index 89fa488..bc98045 100644
--- a/application/src/components/dashboard/Header.tsx
+++ b/application/src/components/dashboard/Header.tsx
@@ -127,7 +127,7 @@ export const Header = ({
               {t("khmer")}
             </DropdownMenuItem>
             <DropdownMenuItem onClick={() => setLanguage("de")} className={language === "de" ? "bg-accent" : ""}>
-              {t("German")}
+              {t("Deutsch")}
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>

From 839fcc87711d4d15cceae95715c4576e9e1bf709 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Fri, 23 May 2025 20:20:06 +0800
Subject: [PATCH 07/16] Add necessary dependencies for jspdf & jspdf-autotable
 for PDF Print

---
 application/package.json | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/application/package.json b/application/package.json
index df825c9..e047fff 100644
--- a/application/package.json
+++ b/application/package.json
@@ -30,7 +30,7 @@
     "@radix-ui/react-radio-group": "^1.2.0",
     "@radix-ui/react-scroll-area": "^1.1.0",
     "@radix-ui/react-select": "^2.1.1",
-    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-separator": "^1.1.6",
     "@radix-ui/react-slider": "^1.2.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-switch": "^1.1.0",
@@ -46,6 +46,8 @@
     "date-fns": "^3.6.0",
     "embla-carousel-react": "^8.3.0",
     "input-otp": "^1.2.4",
+    "jspdf": "^3.0.1",
+    "jspdf-autotable": "^5.0.2",
     "lucide-react": "^0.462.0",
     "next-themes": "^0.3.0",
     "pocketbase": "^0.19.0",
@@ -80,4 +82,4 @@
     "typescript-eslint": "^8.0.1",
     "vite": "^5.4.1"
   }
-}
+}
\ No newline at end of file

From 0692a78576f4aaf52da9d8529940a81be4000e97 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Fri, 23 May 2025 20:21:40 +0800
Subject: [PATCH 08/16] Added Schedule & Incident Menu Sidebar

---
 application/src/components/dashboard/Sidebar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/application/src/components/dashboard/Sidebar.tsx b/application/src/components/dashboard/Sidebar.tsx
index 8d3e4dc..6fe582c 100644
--- a/application/src/components/dashboard/Sidebar.tsx
+++ b/application/src/components/dashboard/Sidebar.tsx
@@ -67,10 +67,10 @@ export const Sidebar = ({
           <Radar className={`${mainIconSize} text-cyan-400`} />
           {!collapsed && <span className="ml-2.5 font-medium text-foreground tracking-wide text-[15px]">{t("sslDomain")}</span>}
         </Link>
-        <div className={`${collapsed ? 'p-3' : 'p-2 pl-3'} mb-1 rounded-lg hover:${theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent'} flex items-center ${collapsed ? 'justify-center' : ''} transition-colors duration-200`}>
+        <Link to="/schedule-incident" className={`${collapsed ? 'p-3' : 'p-2 pl-3'} mb-1 rounded-lg ${location.pathname === '/schedule-incident' ? theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent' : `hover:${theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent'}`} flex items-center ${collapsed ? 'justify-center' : ''} transition-colors duration-200`}>
           <Calendar className={`${mainIconSize} text-emerald-400`} />
           {!collapsed && <span className="ml-2.5 font-medium text-foreground tracking-wide text-[15px]">{t("scheduleIncident")}</span>}
-        </div>
+        </Link>
         <div className={`${collapsed ? 'p-3' : 'p-2 pl-3'} mb-1 rounded-lg hover:${theme === 'dark' ? 'bg-gray-800' : 'bg-sidebar-accent'} flex items-center ${collapsed ? 'justify-center' : ''} transition-colors duration-200`}>
           <BarChart2 className={`${mainIconSize} text-amber-400`} />
           {!collapsed && <span className="ml-2.5 font-medium text-foreground tracking-wide text-[15px]">{t("operationalPage")}</span>}

From 4c2f65b432e82b34702a5af3cc2c28dc3d0694e7 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Fri, 23 May 2025 20:34:18 +0800
Subject: [PATCH 09/16] feat: Implement Schedule Maintenance Management and Tab
 Dashboard

---
 .../maintenance/CreateMaintenanceDialog.tsx   |  94 ++++++++
 .../maintenance/EmptyMaintenanceState.tsx     |  18 ++
 .../maintenance/MaintenanceActionsMenu.tsx    | 170 +++++++++++++++
 .../maintenance/MaintenanceStatusBadge.tsx    |  71 +++++++
 .../maintenance/MaintenanceStatusChecker.tsx  |  92 ++++++++
 .../maintenance/MaintenanceStatusDropdown.tsx |  82 +++++++
 .../maintenance/MaintenanceTable.tsx          | 152 +++++++++++++
 .../MaintenanceDetailContent.tsx              | 176 +++++++++++++++
 .../detail-dialog/MaintenanceDetailDialog.tsx |  37 ++++
 .../detail-dialog/MaintenanceDetailFooter.tsx |  27 +++
 .../detail-dialog/MaintenanceDetailHeader.tsx |  82 +++++++
 .../MaintenanceDetailSections.tsx             | 198 +++++++++++++++++
 .../detail-dialog/components/CloseButton.tsx  |  18 ++
 .../components/DownloadPdfButton.tsx          |  31 +++
 .../detail-dialog/components/PrintButton.tsx  |  27 +++
 .../detail-dialog/components/index.ts         |   4 +
 .../maintenance/detail-dialog/hooks/index.ts  |   3 +
 .../hooks/useDownloadMaintenancePdf.ts        |  47 ++++
 .../hooks/usePrintMaintenance.ts              | 173 +++++++++++++++
 .../maintenance/detail-dialog/index.ts        |   8 +
 .../edit-dialog/EditMaintenanceDialog.tsx     |  97 +++++++++
 .../maintenance/edit-dialog/index.ts          |   2 +
 .../form/MaintenanceAffectedFields.tsx        |  35 +++
 .../form/MaintenanceBasicFields.tsx           |  55 +++++
 .../form/MaintenanceConfigFields.tsx          |  32 +++
 .../MaintenanceNotificationSettingsField.tsx  | 170 +++++++++++++++
 .../form/MaintenanceTimeFields.tsx            | 195 +++++++++++++++++
 .../form/config/AssignedUsersField.tsx        | 185 ++++++++++++++++
 .../form/config/ImpactLevelField.tsx          |  56 +++++
 .../maintenance/form/config/PriorityField.tsx |  56 +++++
 .../maintenance/form/config/StatusField.tsx   |  56 +++++
 .../maintenance/form/config/index.ts          |   5 +
 .../maintenance/form/index.ts                 |   7 +
 .../hooks/useMaintenanceEditForm.ts           | 201 ++++++++++++++++++
 .../maintenance/hooks/useMaintenanceForm.ts   | 133 ++++++++++++
 .../schedule-incident/maintenance/index.ts    |  11 +
 .../src/services/maintenance/api/index.ts     |  10 +
 .../maintenance/api/maintenanceCache.ts       |  46 ++++
 .../maintenance/api/maintenanceFetch.ts       |  59 +++++
 .../maintenance/api/maintenanceOperations.ts  |  85 ++++++++
 .../maintenance/api/maintenanceValidation.ts  |  68 ++++++
 application/src/services/maintenance/index.ts |  15 ++
 .../maintenanceNotificationService.ts         | 199 +++++++++++++++++
 .../maintenance/maintenanceService.ts         |  92 ++++++++
 .../services/maintenance/maintenanceUtils.ts  | 125 +++++++++++
 .../src/services/maintenance/pdf/generator.ts |  91 ++++++++
 .../services/maintenance/pdf/headerFooter.ts  |  90 ++++++++
 .../src/services/maintenance/pdf/index.ts     |  16 ++
 .../src/services/maintenance/pdf/sections.ts  | 164 ++++++++++++++
 .../src/services/maintenance/pdf/utils.ts     |  50 +++++
 .../src/services/types/maintenance.types.ts   |  46 ++++
 51 files changed, 3962 insertions(+)
 create mode 100644 application/src/components/schedule-incident/maintenance/CreateMaintenanceDialog.tsx
 create mode 100644 application/src/components/schedule-incident/maintenance/EmptyMaintenanceState.tsx
 create mode 100644 application/src/components/schedule-incident/maintenance/MaintenanceActionsMenu.tsx
 create mode 100644 application/src/components/schedule-incident/maintenance/MaintenanceStatusBadge.tsx
 create mode 100644 application/src/components/schedule-incident/maintenance/MaintenanceStatusChecker.tsx
 create mode 100644 application/src/components/schedule-incident/maintenance/MaintenanceStatusDropdown.tsx
 create mode 100644 application/src/components/schedule-incident/maintenance/MaintenanceTable.tsx
 create mode 100644 application/src/components/schedule-incident/maintenance/detail-dialog/MaintenanceDetailContent.tsx
 create mode 100644 application/src/components/schedule-incident/maintenance/detail-dialog/MaintenanceDetailDialog.tsx
 create mode 100644 application/src/components/schedule-incident/maintenance/detail-dialog/MaintenanceDetailFooter.tsx
 create mode 100644 application/src/components/schedule-incident/maintenance/detail-dialog/MaintenanceDetailHeader.tsx
 create mode 100644 application/src/components/schedule-incident/maintenance/detail-dialog/MaintenanceDetailSections.tsx
 create mode 100644 application/src/components/schedule-incident/maintenance/detail-dialog/components/CloseButton.tsx
 create mode 100644 application/src/components/schedule-incident/maintenance/detail-dialog/components/DownloadPdfButton.tsx
 create mode 100644 application/src/components/schedule-incident/maintenance/detail-dialog/components/PrintButton.tsx
 create mode 100644 application/src/components/schedule-incident/maintenance/detail-dialog/components/index.ts
 create mode 100644 application/src/components/schedule-incident/maintenance/detail-dialog/hooks/index.ts
 create mode 100644 application/src/components/schedule-incident/maintenance/detail-dialog/hooks/useDownloadMaintenancePdf.ts
 create mode 100644 application/src/components/schedule-incident/maintenance/detail-dialog/hooks/usePrintMaintenance.ts
 create mode 100644 application/src/components/schedule-incident/maintenance/detail-dialog/index.ts
 create mode 100644 application/src/components/schedule-incident/maintenance/edit-dialog/EditMaintenanceDialog.tsx
 create mode 100644 application/src/components/schedule-incident/maintenance/edit-dialog/index.ts
 create mode 100644 application/src/components/schedule-incident/maintenance/form/MaintenanceAffectedFields.tsx
 create mode 100644 application/src/components/schedule-incident/maintenance/form/MaintenanceBasicFields.tsx
 create mode 100644 application/src/components/schedule-incident/maintenance/form/MaintenanceConfigFields.tsx
 create mode 100644 application/src/components/schedule-incident/maintenance/form/MaintenanceNotificationSettingsField.tsx
 create mode 100644 application/src/components/schedule-incident/maintenance/form/MaintenanceTimeFields.tsx
 create mode 100644 application/src/components/schedule-incident/maintenance/form/config/AssignedUsersField.tsx
 create mode 100644 application/src/components/schedule-incident/maintenance/form/config/ImpactLevelField.tsx
 create mode 100644 application/src/components/schedule-incident/maintenance/form/config/PriorityField.tsx
 create mode 100644 application/src/components/schedule-incident/maintenance/form/config/StatusField.tsx
 create mode 100644 application/src/components/schedule-incident/maintenance/form/config/index.ts
 create mode 100644 application/src/components/schedule-incident/maintenance/form/index.ts
 create mode 100644 application/src/components/schedule-incident/maintenance/hooks/useMaintenanceEditForm.ts
 create mode 100644 application/src/components/schedule-incident/maintenance/hooks/useMaintenanceForm.ts
 create mode 100644 application/src/components/schedule-incident/maintenance/index.ts
 create mode 100644 application/src/services/maintenance/api/index.ts
 create mode 100644 application/src/services/maintenance/api/maintenanceCache.ts
 create mode 100644 application/src/services/maintenance/api/maintenanceFetch.ts
 create mode 100644 application/src/services/maintenance/api/maintenanceOperations.ts
 create mode 100644 application/src/services/maintenance/api/maintenanceValidation.ts
 create mode 100644 application/src/services/maintenance/index.ts
 create mode 100644 application/src/services/maintenance/maintenanceNotificationService.ts
 create mode 100644 application/src/services/maintenance/maintenanceService.ts
 create mode 100644 application/src/services/maintenance/maintenanceUtils.ts
 create mode 100644 application/src/services/maintenance/pdf/generator.ts
 create mode 100644 application/src/services/maintenance/pdf/headerFooter.ts
 create mode 100644 application/src/services/maintenance/pdf/index.ts
 create mode 100644 application/src/services/maintenance/pdf/sections.ts
 create mode 100644 application/src/services/maintenance/pdf/utils.ts
 create mode 100644 application/src/services/types/maintenance.types.ts

diff --git a/application/src/components/schedule-incident/maintenance/CreateMaintenanceDialog.tsx b/application/src/components/schedule-incident/maintenance/CreateMaintenanceDialog.tsx
new file mode 100644
index 0000000..2ddc398
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/CreateMaintenanceDialog.tsx
@@ -0,0 +1,94 @@
+
+import React from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { 
+  Dialog, 
+  DialogContent, 
+  DialogHeader, 
+  DialogTitle, 
+  DialogDescription,
+  DialogFooter
+} from '@/components/ui/dialog';
+import { Form } from '@/components/ui/form';
+import { Button } from '@/components/ui/button';
+import { useMaintenanceForm } from './hooks/useMaintenanceForm';
+import {
+  MaintenanceBasicFields,
+  MaintenanceTimeFields,
+  MaintenanceAffectedFields,
+  MaintenanceConfigFields,
+  MaintenanceNotificationSettingsField
+} from './form';
+
+interface CreateMaintenanceDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onMaintenanceCreated: () => void;
+}
+
+export const CreateMaintenanceDialog = ({ 
+  open, 
+  onOpenChange,
+  onMaintenanceCreated 
+}: CreateMaintenanceDialogProps) => {
+  const { t } = useLanguage();
+  
+  const handleSuccess = () => {
+    console.log("CreateMaintenanceDialog: maintenance created successfully");
+    onMaintenanceCreated();
+  };
+  
+  const handleClose = () => {
+    console.log("CreateMaintenanceDialog: closing dialog");
+    onOpenChange(false);
+  };
+  
+  const { form, onSubmit } = useMaintenanceForm(handleSuccess, handleClose);
+
+  // Log the form state for debugging
+  React.useEffect(() => {
+    const subscription = form.watch((value) => {
+      console.log("Form values changed:", value);
+    });
+    return () => subscription.unsubscribe();
+  }, [form]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{t('createMaintenanceWindow')}</DialogTitle>
+          <DialogDescription>
+            {t('createMaintenanceDesc')}
+          </DialogDescription>
+        </DialogHeader>
+        
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <MaintenanceBasicFields />
+            <MaintenanceTimeFields />
+            <MaintenanceAffectedFields />
+            <MaintenanceConfigFields />
+            <MaintenanceNotificationSettingsField />
+            
+            <DialogFooter className="pt-4">
+              <Button 
+                type="button" 
+                variant="outline" 
+                onClick={() => onOpenChange(false)}
+              >
+                {t('cancel')}
+              </Button>
+              <Button 
+                type="submit"
+                disabled={form.formState.isSubmitting}
+              >
+                {form.formState.isSubmitting ? t('creating') : t('createMaintenance')}
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/application/src/components/schedule-incident/maintenance/EmptyMaintenanceState.tsx b/application/src/components/schedule-incident/maintenance/EmptyMaintenanceState.tsx
new file mode 100644
index 0000000..60ce11d
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/EmptyMaintenanceState.tsx
@@ -0,0 +1,18 @@
+
+import React from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { CalendarClock } from 'lucide-react';
+
+export const EmptyMaintenanceState = () => {
+  const { t } = useLanguage();
+  
+  return (
+    <div className="flex flex-col items-center justify-center py-12 text-gray-500">
+      <CalendarClock className="w-12 h-12 mb-4" />
+      <h3 className="text-lg font-medium mb-2">{t('noScheduledMaintenance')}</h3>
+      <p className="text-sm text-center max-w-md">
+        {t('noMaintenanceWindows')}
+      </p>
+    </div>
+  );
+};
diff --git a/application/src/components/schedule-incident/maintenance/MaintenanceActionsMenu.tsx b/application/src/components/schedule-incident/maintenance/MaintenanceActionsMenu.tsx
new file mode 100644
index 0000000..9828100
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/MaintenanceActionsMenu.tsx
@@ -0,0 +1,170 @@
+
+import React, { useState } from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { MoreHorizontal, Eye, Edit, Trash, Play, CheckCircle, X } from 'lucide-react';
+import { useToast } from '@/hooks/use-toast';
+import { 
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+import { MaintenanceItem } from '@/services/types/maintenance.types';
+import { maintenanceService } from '@/services/maintenance';
+import { MaintenanceDetailDialog } from './detail-dialog/MaintenanceDetailDialog';
+import { EditMaintenanceDialog } from './edit-dialog/EditMaintenanceDialog';
+
+interface MaintenanceActionsMenuProps {
+  item: MaintenanceItem;
+  onMaintenanceUpdated: () => void;
+}
+
+export const MaintenanceActionsMenu = ({ item, onMaintenanceUpdated }: MaintenanceActionsMenuProps) => {
+  const { t } = useLanguage();
+  const { toast } = useToast();
+  const [detailDialogOpen, setDetailDialogOpen] = useState(false);
+  const [editDialogOpen, setEditDialogOpen] = useState(false);
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+
+  const handleStatusChange = async (newStatus: string) => {
+    try {
+      await maintenanceService.updateMaintenanceStatus(item.id, newStatus);
+      toast({
+        title: t('statusUpdated'),
+        description: t('maintenanceStatusUpdated'),
+      });
+      onMaintenanceUpdated();
+    } catch (error) {
+      console.error('Error updating maintenance status:', error);
+      toast({
+        title: t('error'),
+        description: t('errorUpdatingMaintenanceStatus'),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleDelete = async () => {
+    try {
+      await maintenanceService.deleteMaintenance(item.id);
+      toast({
+        title: t('maintenanceDeleted'),
+        description: t('maintenanceDeletedDesc'),
+      });
+      onMaintenanceUpdated();
+    } catch (error) {
+      console.error('Error deleting maintenance:', error);
+      toast({
+        title: t('error'),
+        description: t('errorDeletingMaintenance'),
+        variant: 'destructive',
+      });
+    } finally {
+      setDeleteDialogOpen(false);
+    }
+  };
+
+  // Convert status to lowercase for consistent comparison
+  const status = item.status.toLowerCase();
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="ghost" className="h-8 w-8 p-0">
+            <span className="sr-only">{t('actions')}</span>
+            <MoreHorizontal className="h-4 w-4" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuLabel>{t('actions')}</DropdownMenuLabel>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem onClick={() => setDetailDialogOpen(true)}>
+            <Eye className="mr-2 h-4 w-4" />
+            {t('view')}
+          </DropdownMenuItem>
+          
+          <DropdownMenuItem onClick={() => setEditDialogOpen(true)}>
+            <Edit className="mr-2 h-4 w-4" />
+            {t('edit')}
+          </DropdownMenuItem>
+          
+          {status === 'scheduled' && (
+            <DropdownMenuItem onClick={() => handleStatusChange('in_progress')}>
+              <Play className="mr-2 h-4 w-4" />
+              {t('markAsInProgress')}
+            </DropdownMenuItem>
+          )}
+          
+          {(status === 'scheduled' || status === 'in_progress') && (
+            <DropdownMenuItem onClick={() => handleStatusChange('completed')}>
+              <CheckCircle className="mr-2 h-4 w-4" />
+              {t('markAsCompleted')}
+            </DropdownMenuItem>
+          )}
+          
+          {status !== 'cancelled' && (
+            <DropdownMenuItem onClick={() => handleStatusChange('cancelled')}>
+              <X className="mr-2 h-4 w-4" />
+              {t('markAsCancelled')}
+            </DropdownMenuItem>
+          )}
+          
+          <DropdownMenuSeparator />
+          <DropdownMenuItem
+            onClick={() => setDeleteDialogOpen(true)}
+            className="text-red-600 focus:text-red-600"
+          >
+            <Trash className="mr-2 h-4 w-4" />
+            {t('delete')}
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      
+      <MaintenanceDetailDialog
+        open={detailDialogOpen}
+        onOpenChange={setDetailDialogOpen}
+        maintenance={item}
+      />
+      
+      <EditMaintenanceDialog
+        open={editDialogOpen}
+        onOpenChange={setEditDialogOpen}
+        maintenance={item}
+        onMaintenanceUpdated={onMaintenanceUpdated}
+      />
+      
+      <AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('confirmDelete')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('deleteMaintenanceConfirmation')}
+              <span className="font-semibold"> {item.title}</span>?
+              {t('thisActionCannotBeUndone')}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t('cancel')}</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDelete} className="bg-red-600 hover:bg-red-700">
+              {t('delete')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  );
+};
diff --git a/application/src/components/schedule-incident/maintenance/MaintenanceStatusBadge.tsx b/application/src/components/schedule-incident/maintenance/MaintenanceStatusBadge.tsx
new file mode 100644
index 0000000..0df3a5b
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/MaintenanceStatusBadge.tsx
@@ -0,0 +1,71 @@
+
+import React from 'react';
+import { Badge } from '@/components/ui/badge';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { CalendarClock, Clock, CheckCircle, X } from 'lucide-react';
+
+interface MaintenanceStatusBadgeProps {
+  status: string;
+}
+
+export const MaintenanceStatusBadge = ({ status }: MaintenanceStatusBadgeProps) => {
+  const { t } = useLanguage();
+
+  // Ensure we have a string and normalize it
+  const normalizedStatus = typeof status === 'string' ? status.toLowerCase() : '';
+
+  const getStatusColor = () => {
+    switch (normalizedStatus) {
+      case 'scheduled':
+        return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300';
+      case 'in progress':
+      case 'in_progress':
+        return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300';
+      case 'completed':
+        return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300';
+      case 'cancelled':
+        return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300';
+      default:
+        return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300';
+    }
+  };
+
+  const getStatusIcon = () => {
+    switch (normalizedStatus) {
+      case 'scheduled':
+        return <CalendarClock className="h-3 w-3" />;
+      case 'in progress':
+      case 'in_progress':
+        return <Clock className="h-3 w-3" />;
+      case 'completed':
+        return <CheckCircle className="h-3 w-3" />;
+      case 'cancelled':
+        return <X className="h-3 w-3" />;
+      default:
+        return <CalendarClock className="h-3 w-3" />;
+    }
+  };
+
+  const getDisplayStatus = () => {
+    switch (normalizedStatus) {
+      case 'scheduled':
+        return t('scheduled');
+      case 'in progress':
+      case 'in_progress':
+        return t('inProgress');
+      case 'completed':
+        return t('completed');
+      case 'cancelled':
+        return t('cancelled');
+      default:
+        return status || '';
+    }
+  };
+
+  return (
+    <Badge className={`${getStatusColor()} flex items-center gap-1 font-medium`} variant="outline">
+      {getStatusIcon()}
+      {getDisplayStatus()}
+    </Badge>
+  );
+};
diff --git a/application/src/components/schedule-incident/maintenance/MaintenanceStatusChecker.tsx b/application/src/components/schedule-incident/maintenance/MaintenanceStatusChecker.tsx
new file mode 100644
index 0000000..01e20f6
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/MaintenanceStatusChecker.tsx
@@ -0,0 +1,92 @@
+
+import { useEffect, useRef } from 'react';
+import { maintenanceService } from '@/services/maintenance';
+import { useToast } from '@/hooks/use-toast';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { MaintenanceItem } from '@/services/types/maintenance.types';
+import { maintenanceNotificationService } from '@/services/maintenance/maintenanceNotificationService';
+
+interface MaintenanceStatusCheckerProps {
+  maintenanceData: MaintenanceItem[];
+  onStatusUpdated: () => void;
+}
+
+export const MaintenanceStatusChecker = ({ 
+  maintenanceData, 
+  onStatusUpdated 
+}: MaintenanceStatusCheckerProps) => {
+  const { t } = useLanguage();
+  const { toast } = useToast();
+  const checkedItemsRef = useRef<Set<string>>(new Set());
+  const notificationSentRef = useRef<Set<string>>(new Set());
+
+  useEffect(() => {
+    if (!maintenanceData || maintenanceData.length === 0) return;
+
+    // Check for maintenance items that need status update
+    const now = new Date();
+    const checkAndUpdateStatus = async () => {
+      for (const item of maintenanceData) {
+        if (item.status.toLowerCase() !== 'scheduled') continue;
+        
+        // Skip if we've already checked this item in this session
+        if (checkedItemsRef.current.has(item.id)) continue;
+        
+        try {
+          const startTime = new Date(item.start_time);
+          const endTime = new Date(item.end_time);
+          
+          // If current time is past start time but before end time, update to in_progress
+          if (startTime <= now && now <= endTime) {
+            console.log(`Auto-updating maintenance ${item.title} to in_progress status`);
+            
+            // Update status to in_progress
+            await maintenanceService.updateMaintenanceStatus(item.id, 'in_progress');
+            
+            // Only send notification if not sent before
+            if (!notificationSentRef.current.has(item.id)) {
+              console.log(`Sending start notification for maintenance ${item.title}`);
+              
+              // Send notification for maintenance start
+              await maintenanceNotificationService.sendMaintenanceNotification({
+                maintenance: item,
+                notificationType: 'start'
+              });
+              
+              // Mark as notified
+              notificationSentRef.current.add(item.id);
+            }
+            
+            toast({
+              title: t('maintenanceInProgress'),
+              description: `${item.title} ${t('isNowInProgress')}`,
+            });
+            
+            onStatusUpdated();
+          }
+          
+          // Mark as checked regardless of outcome
+          checkedItemsRef.current.add(item.id);
+        } catch (error) {
+          console.error(`Error auto-updating maintenance status for ${item.id}:`, error);
+          
+          // Add a small delay before trying again to prevent rapid retry cycles
+          setTimeout(() => {
+            checkedItemsRef.current.delete(item.id); // Allow retry on next check
+          }, 300000); // 5 minutes before retry
+        }
+      }
+    };
+
+    // Run the check immediately
+    checkAndUpdateStatus();
+    
+    // Set up interval to check every minute
+    const intervalId = setInterval(checkAndUpdateStatus, 60000);
+    
+    return () => clearInterval(intervalId);
+  }, [maintenanceData, onStatusUpdated, t, toast]);
+
+  // This is a utility component with no UI render
+  return null;
+};
diff --git a/application/src/components/schedule-incident/maintenance/MaintenanceStatusDropdown.tsx b/application/src/components/schedule-incident/maintenance/MaintenanceStatusDropdown.tsx
new file mode 100644
index 0000000..9963728
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/MaintenanceStatusDropdown.tsx
@@ -0,0 +1,82 @@
+
+import React from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { CalendarClock, Clock, CheckCircle, X } from 'lucide-react';
+import { useToast } from '@/hooks/use-toast';
+import { maintenanceService } from '@/services/maintenance';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { MaintenanceStatusBadge } from './MaintenanceStatusBadge';
+
+interface MaintenanceStatusDropdownProps {
+  status: string;
+  id: string;
+  onStatusUpdated: () => void;
+  disabled?: boolean;
+}
+
+export const MaintenanceStatusDropdown = ({
+  status,
+  id,
+  onStatusUpdated,
+  disabled = false
+}: MaintenanceStatusDropdownProps) => {
+  const { t } = useLanguage();
+  const { toast } = useToast();
+
+  const statusOptions = [
+    { value: 'scheduled', label: t('scheduled'), icon: <CalendarClock className="h-4 w-4 mr-2" /> },
+    { value: 'in_progress', label: t('inProgress'), icon: <Clock className="h-4 w-4 mr-2" /> },
+    { value: 'completed', label: t('completed'), icon: <CheckCircle className="h-4 w-4 mr-2" /> },
+    { value: 'cancelled', label: t('cancelled'), icon: <X className="h-4 w-4 mr-2" /> },
+  ];
+
+  const handleStatusChange = async (newStatus: string) => {
+    // Don't update if the status is the same
+    if (status.toLowerCase() === newStatus) return;
+    
+    try {
+      await maintenanceService.updateMaintenanceStatus(id, newStatus);
+      
+      toast({
+        title: t('statusUpdated'),
+        description: t('maintenanceStatusUpdated'),
+      });
+      
+      onStatusUpdated();
+    } catch (error) {
+      console.error('Error updating maintenance status:', error);
+      
+      toast({
+        title: t('error'),
+        description: t('failedToUpdateStatus'),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger disabled={disabled} className="w-full cursor-pointer">
+        <MaintenanceStatusBadge status={status} />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="bg-popover border border-border shadow-md">
+        {statusOptions.map((option) => (
+          <DropdownMenuItem
+            key={option.value}
+            className="flex items-center cursor-pointer"
+            onClick={() => handleStatusChange(option.value)}
+          >
+            {option.icon}
+            {option.label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
diff --git a/application/src/components/schedule-incident/maintenance/MaintenanceTable.tsx b/application/src/components/schedule-incident/maintenance/MaintenanceTable.tsx
new file mode 100644
index 0000000..62295f6
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/MaintenanceTable.tsx
@@ -0,0 +1,152 @@
+
+import React, { useState, useMemo } from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { Table, TableHeader, TableBody, TableRow, TableHead, TableCell } from '@/components/ui/table';
+import { Badge } from '@/components/ui/badge';
+import { format } from 'date-fns';
+import { MaintenanceStatusDropdown } from './MaintenanceStatusDropdown';
+import { MaintenanceActionsMenu } from './MaintenanceActionsMenu';
+import { MaintenanceDetailDialog } from './detail-dialog/MaintenanceDetailDialog';
+import { MaintenanceItem } from '@/services/types/maintenance.types';
+import { Skeleton } from '@/components/ui/skeleton';
+import { EmptyMaintenanceState } from './EmptyMaintenanceState';
+
+interface MaintenanceTableProps {
+  data: MaintenanceItem[];
+  isLoading?: boolean;
+  onMaintenanceUpdated: () => void;
+}
+
+export const MaintenanceTable = ({ data, isLoading = false, onMaintenanceUpdated }: MaintenanceTableProps) => {
+  const { t } = useLanguage();
+  const [selectedMaintenance, setSelectedMaintenance] = useState<MaintenanceItem | null>(null);
+  const [detailDialogOpen, setDetailDialogOpen] = useState(false);
+
+  // Memoize the formatted date function to avoid recreating it on each render
+  const formatDate = useMemo(() => (dateString: string) => {
+    if (!dateString) return '-';
+    
+    try {
+      return format(new Date(dateString), 'MMM d, yyyy HH:mm');
+    } catch (error) {
+      return dateString || '-';
+    }
+  }, []);
+
+  const handleViewMaintenance = (maintenance: MaintenanceItem) => {
+    setSelectedMaintenance(maintenance);
+    setDetailDialogOpen(true);
+  };
+
+  if (isLoading) {
+    // Render skeleton loading state with table structure for smoother transitions
+    return (
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>{t('title')}</TableHead>
+            <TableHead>{t('status')}</TableHead>
+            <TableHead>{t('scheduledStart')}</TableHead>
+            <TableHead>{t('scheduledEnd')}</TableHead>
+            <TableHead>{t('affectedServices')}</TableHead>
+            <TableHead>{t('impact')}</TableHead>
+            <TableHead className="w-[80px]">{t('actions')}</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {[1, 2, 3].map(i => (
+            <TableRow key={`skeleton-${i}`}>
+              <TableCell><Skeleton className="h-6 w-28" /></TableCell>
+              <TableCell><Skeleton className="h-6 w-20" /></TableCell>
+              <TableCell><Skeleton className="h-6 w-32" /></TableCell>
+              <TableCell><Skeleton className="h-6 w-32" /></TableCell>
+              <TableCell><Skeleton className="h-6 w-24" /></TableCell>
+              <TableCell><Skeleton className="h-6 w-16" /></TableCell>
+              <TableCell><Skeleton className="h-6 w-8" /></TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    );
+  }
+
+  if (!data || data.length === 0) {
+    return <EmptyMaintenanceState />;
+  }
+
+  // Memoize the impact badge variant calculation
+  const getImpactBadgeVariant = (field: string | undefined) => {
+    const fieldLower = field?.toLowerCase() || '';
+    if (fieldLower === 'critical') return 'destructive';
+    if (fieldLower === 'major') return 'default';
+    if (fieldLower === 'minor') return 'secondary';
+    return 'outline';
+  };
+
+  return (
+    <>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>{t('title')}</TableHead>
+            <TableHead>{t('status')}</TableHead>
+            <TableHead>{t('scheduledStart')}</TableHead>
+            <TableHead>{t('scheduledEnd')}</TableHead>
+            <TableHead>{t('affectedServices')}</TableHead>
+            <TableHead>{t('impact')}</TableHead>
+            <TableHead className="w-[80px]">{t('actions')}</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {data.map((item) => (
+            <TableRow key={item.id} className="cursor-pointer hover:bg-muted/40">
+              <TableCell className="font-medium" onClick={() => handleViewMaintenance(item)}>
+                {item.title || '-'}
+              </TableCell>
+              <TableCell onClick={(e) => e.stopPropagation()}>
+                <MaintenanceStatusDropdown 
+                  status={item.status} 
+                  id={item.id} 
+                  onStatusUpdated={onMaintenanceUpdated} 
+                />
+              </TableCell>
+              <TableCell onClick={() => handleViewMaintenance(item)}>
+                {formatDate(item.start_time)}
+              </TableCell>
+              <TableCell onClick={() => handleViewMaintenance(item)}>
+                {formatDate(item.end_time)}
+              </TableCell>
+              <TableCell onClick={() => handleViewMaintenance(item)}>
+                <div className="flex flex-wrap gap-1">
+                  {item.affected ? item.affected.split(',').slice(0, 2).map((service, index) => (
+                    <Badge key={index} variant="outline">{service.trim()}</Badge>
+                  )) : '-'}
+                  {item.affected && item.affected.split(',').length > 2 && (
+                    <Badge variant="outline">+{item.affected.split(',').length - 2}</Badge>
+                  )}
+                </div>
+              </TableCell>
+              <TableCell onClick={() => handleViewMaintenance(item)}>
+                <Badge variant={getImpactBadgeVariant(item.field)}>
+                  {item.field ? t(item.field.toLowerCase()) : '-'}
+                </Badge>
+              </TableCell>
+              <TableCell onClick={(e) => e.stopPropagation()}>
+                <MaintenanceActionsMenu 
+                  item={item} 
+                  onMaintenanceUpdated={onMaintenanceUpdated} 
+                />
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+      
+      <MaintenanceDetailDialog
+        open={detailDialogOpen}
+        onOpenChange={setDetailDialogOpen}
+        maintenance={selectedMaintenance}
+      />
+    </>
+  );
+};
diff --git a/application/src/components/schedule-incident/maintenance/detail-dialog/MaintenanceDetailContent.tsx b/application/src/components/schedule-incident/maintenance/detail-dialog/MaintenanceDetailContent.tsx
new file mode 100644
index 0000000..778c8f5
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/detail-dialog/MaintenanceDetailContent.tsx
@@ -0,0 +1,176 @@
+
+import React, { useEffect, useState } from 'react';
+import { userService, User } from '@/services/userService';
+import { useQuery } from '@tanstack/react-query';
+import { MaintenanceItem } from '@/services/types/maintenance.types';
+import { MaintenanceDetailHeader } from './MaintenanceDetailHeader';
+import { MaintenanceDetailSections } from './MaintenanceDetailSections';
+import { MaintenanceDetailFooter } from './MaintenanceDetailFooter';
+import { alertConfigService } from '@/services/alertConfigService';
+
+interface MaintenanceDetailContentProps {
+  maintenance: MaintenanceItem;
+  onClose: () => void;
+}
+
+export const MaintenanceDetailContent = ({ 
+  maintenance,
+  onClose
+}: MaintenanceDetailContentProps) => {
+  const [assignedUsers, setAssignedUsers] = useState<User[]>([]);
+  const [maintenanceWithDetails, setMaintenanceWithDetails] = useState<MaintenanceItem>(maintenance);
+  
+  // Fetch all users to resolve the assigned users and creator
+  const { data: users = [] } = useQuery({
+    queryKey: ['users'],
+    queryFn: async () => {
+      const usersList = await userService.getUsers();
+      console.log("Fetched users for maintenance detail:", usersList);
+      return usersList || [];
+    },
+    enabled: true
+  });
+
+  // Fetch notification channels for notification channel display
+  const { data: notificationChannels = [] } = useQuery({
+    queryKey: ['notificationChannels'],
+    queryFn: async () => {
+      const channels = await alertConfigService.getAlertConfigurations();
+      console.log("Fetched notification channels:", channels);
+      return channels || [];
+    },
+    enabled: true
+  });
+  
+  // Process user information when users data is available
+  useEffect(() => {
+    if (users.length > 0 && maintenance) {
+      console.log("Processing maintenance data with users:", maintenance);
+      console.log("Maintenance assigned_users:", maintenance.assigned_users);
+      
+      // Create a copy of the maintenance object for modifications
+      const enhancedMaintenance = { ...maintenance };
+      
+      // Process assigned users
+      if (maintenance.assigned_users) {
+        let userIds: string[] = [];
+        
+        // Step 1: Extract user IDs from various formats
+        if (Array.isArray(maintenance.assigned_users)) {
+          userIds = maintenance.assigned_users;
+          console.log("Assigned users is an array:", userIds);
+        } else if (typeof maintenance.assigned_users === 'string') {
+          // Try parsing the string to extract user IDs
+          try {
+            // Try parsing as JSON first
+            const parsedData = JSON.parse(maintenance.assigned_users);
+            if (Array.isArray(parsedData)) {
+              // Direct array format
+              userIds = parsedData;
+              console.log("Parsed assigned_users from JSON array:", userIds);
+            } else if (typeof parsedData === 'string') {
+              // Nested JSON string
+              try {
+                const nestedData = JSON.parse(parsedData);
+                if (Array.isArray(nestedData)) {
+                  userIds = nestedData;
+                  console.log("Parsed assigned_users from nested JSON:", userIds);
+                }
+              } catch (e) {
+                // If nested parsing fails, treat as single ID
+                userIds = [parsedData];
+                console.log("Using parsed string as single ID:", userIds);
+              }
+            } else {
+              // Unknown format, use as is
+              userIds = [String(parsedData)];
+              console.log("Using parsed data as single ID:", userIds);
+            }
+          } catch (e) {
+            // If JSON parsing fails, try comma splitting
+            if (maintenance.assigned_users.includes(',')) {
+              userIds = maintenance.assigned_users.split(',').map(id => id.trim()).filter(Boolean);
+              console.log("Split assigned_users by comma:", userIds);
+            } else {
+              // Single ID
+              userIds = [maintenance.assigned_users];
+              console.log("Using string as single ID:", userIds);
+            }
+          }
+        }
+        
+        // Step 2: Clean up extracted IDs (remove quotes, brackets, etc.)
+        userIds = userIds.map(id => {
+          // Remove surrounding quotes if present
+          let cleanId = id.replace(/^["']|["']$/g, '');
+          // Remove any remaining JSON artifacts
+          cleanId = cleanId.replace(/[\[\]"'\\]/g, '');
+          return cleanId;
+        }).filter(Boolean);
+        
+        console.log("Cleaned user IDs:", userIds);
+          
+        // Step 3: Find matching users from the users array
+        if (userIds.length > 0) {
+          const matchedUsers = users.filter(user => userIds.includes(user.id));
+          console.log("Matched assigned users:", matchedUsers);
+          setAssignedUsers(matchedUsers);
+        } else {
+          console.log("No user IDs found in assigned_users");
+          setAssignedUsers([]);
+        }
+      } else {
+        console.log("No assigned users found in maintenance data");
+        setAssignedUsers([]);
+      }
+      
+      // Process created_by field - replace ID with full name if available
+      if (maintenance?.created_by) {
+        const creator = users.find(user => user.id === maintenance.created_by);
+        if (creator) {
+          enhancedMaintenance.created_by = creator.full_name || creator.username || maintenance.created_by;
+        }
+      }
+      
+      // Process notification channel if needed
+      if (maintenance.notify_subscribers === 'yes') {
+        // Try notification_channel_id first, fall back to notification_id if needed
+        const channelId = maintenance.notification_channel_id || maintenance.notification_id;
+        
+        if (channelId && notificationChannels.length > 0) {
+          console.log("Looking for notification channel with ID:", channelId);
+          console.log("Available notification channels:", notificationChannels.map(c => ({ id: c.id, name: c.notify_name })));
+          
+          const channel = notificationChannels.find(ch => ch.id === channelId);
+          if (channel) {
+            console.log("Found notification channel:", channel);
+            enhancedMaintenance.notification_channel_name = `${channel.notify_name} (${channel.notification_type})`;
+          } else {
+            console.log("No matching notification channel found for ID:", channelId);
+            enhancedMaintenance.notification_channel_name = `Channel ID: ${channelId}`;
+          }
+        } else {
+          console.log("No channel ID available or no notification channels loaded");
+        }
+      }
+      
+      console.log("Enhanced maintenance with details:", enhancedMaintenance);
+      console.log("Assigned users for display:", assignedUsers);
+      setMaintenanceWithDetails(enhancedMaintenance);
+    }
+  }, [maintenance, users, notificationChannels]);
+
+  return (
+    <>
+      <MaintenanceDetailHeader maintenance={maintenanceWithDetails} />
+      <MaintenanceDetailSections 
+        maintenance={maintenanceWithDetails}
+        assignedUsers={assignedUsers}
+      />
+      <MaintenanceDetailFooter 
+        maintenance={maintenanceWithDetails}
+        onClose={onClose}
+      />
+    </>
+  );
+};
diff --git a/application/src/components/schedule-incident/maintenance/detail-dialog/MaintenanceDetailDialog.tsx b/application/src/components/schedule-incident/maintenance/detail-dialog/MaintenanceDetailDialog.tsx
new file mode 100644
index 0000000..5940e34
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/detail-dialog/MaintenanceDetailDialog.tsx
@@ -0,0 +1,37 @@
+
+import React from 'react';
+import { 
+  Dialog, 
+  DialogContent
+} from '@/components/ui/dialog';
+import { MaintenanceItem } from '@/services/types/maintenance.types';
+import { MaintenanceDetailContent } from './MaintenanceDetailContent';
+
+interface MaintenanceDetailDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  maintenance: MaintenanceItem | null;
+}
+
+export const MaintenanceDetailDialog = ({
+  open,
+  onOpenChange,
+  maintenance
+}: MaintenanceDetailDialogProps) => {
+  if (!maintenance) {
+    return null;
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent 
+        className="dialog-content sm:max-w-[700px] max-h-[90vh] overflow-y-auto 
+                  print:max-w-none print:max-h-none print:overflow-visible 
+                  print:shadow-none print:m-0 print:p-0 print:border-none
+                  print:absolute print:left-0 print:top-0 print:w-full print:h-auto"
+      >
+        <MaintenanceDetailContent maintenance={maintenance} onClose={() => onOpenChange(false)} />
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/application/src/components/schedule-incident/maintenance/detail-dialog/MaintenanceDetailFooter.tsx b/application/src/components/schedule-incident/maintenance/detail-dialog/MaintenanceDetailFooter.tsx
new file mode 100644
index 0000000..a59a8cc
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/detail-dialog/MaintenanceDetailFooter.tsx
@@ -0,0 +1,27 @@
+
+import React from 'react';
+import { DialogFooter } from '@/components/ui/dialog';
+import { MaintenanceItem } from '@/services/types/maintenance.types';
+import { 
+  PrintButton,
+  DownloadPdfButton,
+  CloseButton
+} from './components';
+
+interface MaintenanceDetailFooterProps {
+  maintenance: MaintenanceItem;
+  onClose: () => void;
+}
+
+export const MaintenanceDetailFooter = ({ 
+  maintenance,
+  onClose
+}: MaintenanceDetailFooterProps) => {
+  return (
+    <DialogFooter className="gap-2 sm:gap-2 mt-6 pt-4 border-t print:hidden">
+      <PrintButton maintenance={maintenance} />
+      <DownloadPdfButton maintenance={maintenance} />
+      <CloseButton onClose={onClose} />
+    </DialogFooter>
+  );
+};
diff --git a/application/src/components/schedule-incident/maintenance/detail-dialog/MaintenanceDetailHeader.tsx b/application/src/components/schedule-incident/maintenance/detail-dialog/MaintenanceDetailHeader.tsx
new file mode 100644
index 0000000..0b70c76
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/detail-dialog/MaintenanceDetailHeader.tsx
@@ -0,0 +1,82 @@
+
+import React from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { CalendarClock } from 'lucide-react';
+import { 
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog';
+import { Badge } from '@/components/ui/badge';
+import { MaintenanceItem } from '@/services/types/maintenance.types';
+
+interface MaintenanceDetailHeaderProps {
+  maintenance: MaintenanceItem;
+}
+
+export const MaintenanceDetailHeader = ({ maintenance }: MaintenanceDetailHeaderProps) => {
+  const { t } = useLanguage();
+
+  const getStatusColor = (status: string) => {
+    switch (status.toLowerCase()) {
+      case 'scheduled':
+        return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300';
+      case 'in_progress':
+      case 'in progress':
+        return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300';
+      case 'completed':
+        return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300';
+      case 'cancelled':
+        return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300';
+      default:
+        return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300';
+    }
+  };
+  
+  const getImpactColor = (impact: string) => {
+    switch (impact.toLowerCase()) {
+      case 'critical':
+        return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300';
+      case 'major':
+        return 'bg-orange-100 text-orange-800 dark:bg-orange-900 dark:text-orange-300';
+      case 'minor':
+        return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300';
+      case 'none':
+        return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300';
+      default:
+        return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300';
+    }
+  };
+  
+  const getPriorityColor = (priority: string) => {
+    switch (priority.toLowerCase()) {
+      case 'high':
+        return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300';
+      case 'medium':
+        return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300';
+      case 'low':
+        return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300';
+      default:
+        return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300';
+    }
+  };
+
+  return (
+    <DialogHeader className="print:mb-6">
+      <div className="flex items-center gap-2 mb-1">
+        <CalendarClock className="h-5 w-5 text-blue-500 print:hidden" />
+        <DialogTitle className="text-xl">{maintenance.title}</DialogTitle>
+      </div>
+      <div className="flex flex-wrap gap-2 mt-2">
+        <Badge className={getStatusColor(maintenance.status)}>
+          {maintenance.status}
+        </Badge>
+        <Badge className={getImpactColor(maintenance.field)}>
+          {maintenance.field} {t('impact')}
+        </Badge>
+        <Badge className={getPriorityColor(maintenance.priority)}>
+          {maintenance.priority} {t('priority')}
+        </Badge>
+      </div>
+    </DialogHeader>
+  );
+};
diff --git a/application/src/components/schedule-incident/maintenance/detail-dialog/MaintenanceDetailSections.tsx b/application/src/components/schedule-incident/maintenance/detail-dialog/MaintenanceDetailSections.tsx
new file mode 100644
index 0000000..d3abf71
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/detail-dialog/MaintenanceDetailSections.tsx
@@ -0,0 +1,198 @@
+
+import React from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { format } from 'date-fns';
+import { Separator } from '@/components/ui/separator';
+import { Badge } from '@/components/ui/badge';
+import { MaintenanceItem } from '@/services/types/maintenance.types';
+import { User } from '@/services/userService';
+
+interface MaintenanceDetailSectionsProps {
+  maintenance: MaintenanceItem;
+  assignedUsers: User[];
+}
+
+export const MaintenanceDetailSections = ({ 
+  maintenance, 
+  assignedUsers 
+}: MaintenanceDetailSectionsProps) => {
+  const { t } = useLanguage();
+
+  const formatDateTime = (dateString: string) => {
+    try {
+      return format(new Date(dateString), 'PPP p');
+    } catch (error) {
+      return dateString;
+    }
+  };
+
+  const calculateDuration = (start: string, end: string): string => {
+    try {
+      const startTime = new Date(start);
+      const endTime = new Date(end);
+      const durationMs = endTime.getTime() - startTime.getTime();
+      
+      // Convert to hours and minutes
+      const hours = Math.floor(durationMs / (1000 * 60 * 60));
+      const minutes = Math.floor((durationMs % (1000 * 60 * 60)) / (1000 * 60));
+      
+      if (hours === 0) {
+        return `${minutes}m`;
+      } else if (minutes === 0) {
+        return `${hours}h`;
+      } else {
+        return `${hours}h ${minutes}m`;
+      }
+    } catch (error) {
+      return "N/A";
+    }
+  };
+  
+  const affectedServices = typeof maintenance.affected === 'string' 
+    ? maintenance.affected.split(',').map(item => item.trim())
+    : [];
+
+  return (
+    <div className="space-y-4 print:space-y-1 print-compact-spacing">
+      {/* Print Header - Only visible when printing */}
+      <div className="hidden print:block print-section">
+        <div className="header-print bg-blue-800 text-white p-4 rounded-t-md">
+          <div className="flex justify-between">
+            <div>
+              <h1 className="text-xl font-bold">Scheduled Maintenance Report</h1>
+              <p className="text-blue-100 mt-1 print-compact-text">{maintenance.title}</p>
+            </div>
+            <div className="text-right">
+              <p className="text-xs text-blue-100">Reference ID: {maintenance.id}</p>
+              <p className="text-xs text-blue-100">Generated on {format(new Date(), 'PPP')}</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      {/* Reference ID - Only visible in UI */}
+      <div className="flex items-center justify-between text-sm print:hidden">
+        <span className="text-muted-foreground">{t('referenceID')}</span>
+        <span className="font-mono bg-muted px-2 py-1 rounded">{maintenance.id}</span>
+      </div>
+      
+      {/* Description Section */}
+      <div className="print:mt-0 print-section">
+        <h4 className="text-sm font-medium text-muted-foreground mb-2 print:text-xs print:font-bold print:text-blue-800">{t('description')}</h4>
+        <div className="bg-muted/50 p-3 rounded-md text-sm whitespace-pre-wrap print:bg-transparent print:border print:border-gray-200 print:p-1 print:rounded print:text-xs print:text-black print-description">
+          {maintenance.description || t('noDescriptionProvided')}
+        </div>
+      </div>
+      
+      <Separator className="print:hidden" />
+      
+      {/* Time Information */}
+      <div className="print-section">
+        <h4 className="text-sm font-medium text-muted-foreground mb-2 print:text-xs print:font-bold print:text-blue-800">{t('timeInformation')}</h4>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4 print:grid-cols-2 print:gap-1 print:bg-gray-50 print:border print:border-gray-200 print:p-1 print:rounded print-compact-text">
+          <div>
+            <h4 className="text-sm font-medium text-muted-foreground mb-1 print:text-xs print:text-blue-700 print:mb-0">{t('scheduledStart')}</h4>
+            <p className="text-sm print:text-xs print:text-black print-smaller-font">{formatDateTime(maintenance.start_time)}</p>
+          </div>
+          <div>
+            <h4 className="text-sm font-medium text-muted-foreground mb-1 print:text-xs print:text-blue-700 print:mb-0">{t('scheduledEnd')}</h4>
+            <p className="text-sm print:text-xs print:text-black print-smaller-font">{formatDateTime(maintenance.end_time)}</p>
+          </div>
+          <div>
+            <h4 className="text-sm font-medium text-muted-foreground mb-1 print:text-xs print:text-blue-700 print:mb-0">{t('duration')}</h4>
+            <p className="text-sm print:text-xs print:text-black print-smaller-font">{calculateDuration(maintenance.start_time, maintenance.end_time)}</p>
+          </div>
+          <div>
+            <h4 className="text-sm font-medium text-muted-foreground mb-1 print:text-xs print:text-blue-700 print:mb-0">{t('maintenanceType')}</h4>
+            <p className="text-sm print:text-xs print:text-black print-smaller-font capitalize">{maintenance.field}</p>
+          </div>
+        </div>
+      </div>
+      
+      <Separator className="print:hidden" />
+      
+      {/* Affected Services */}
+      <div className="print-section">
+        <h4 className="text-sm font-medium text-muted-foreground mb-2 print:text-xs print:font-bold print:text-blue-800">{t('affectedServices')}</h4>
+        <div className="print:border print:border-gray-200 print:p-1 print:rounded">
+          {affectedServices.length > 0 ? (
+            <div className="flex flex-wrap gap-2 print:gap-1">
+              {affectedServices.map((service, index) => (
+                <Badge key={index} variant="outline" className="badge-print print:bg-blue-50 print:text-blue-800 print:border print:border-blue-200">
+                  {service}
+                </Badge>
+              ))}
+            </div>
+          ) : (
+            <span className="text-sm text-muted-foreground print:text-xs print:text-black">{t('noAffectedServices')}</span>
+          )}
+        </div>
+      </div>
+      
+      {/* Assigned Users - Simplified for print */}
+      <div className="print-section">
+        <h4 className="text-sm font-medium text-muted-foreground mb-2 print:text-xs print:font-bold print:text-blue-800">{t('assignedPersonnel')}</h4>
+        <div className="border border-border rounded-md p-3 print:border print:border-gray-200 print:p-1 print:rounded print:bg-gray-50">
+          {assignedUsers && assignedUsers.length > 0 ? (
+            <div className="print:grid print:grid-cols-2 print:gap-1">
+              {assignedUsers.map((user) => (
+                <div key={user.id} className="flex items-center gap-2 p-2 bg-muted/30 rounded-md print:bg-transparent print:p-0 print:text-xs">
+                  <div className="w-5 h-5 rounded-full bg-primary/10 flex items-center justify-center text-xs font-medium print:bg-blue-100 print:text-blue-800 print:w-4 print:h-4">
+                    {user && (user.full_name?.[0] || user.username?.[0] || 'U').toUpperCase()}
+                  </div>
+                  <span className="print:text-xs print:font-medium print:text-black print-smaller-font">{user.full_name || user.username}</span>
+                </div>
+              ))}
+            </div>
+          ) : (
+            <span className="text-sm text-muted-foreground print:text-xs print:text-black">{t('noAssignedUsers')}</span>
+          )}
+        </div>
+      </div>
+      
+      <Separator className="print:hidden" />
+      
+      {/* Metadata - Condensed for print */}
+      <div className="print-section">
+        <h4 className="text-sm font-medium text-muted-foreground mb-2 print:text-xs print:font-bold print:text-blue-800">{t('additionalInformation')}</h4>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-2 text-sm print:grid-cols-2 print:gap-1 print:bg-gray-50 print:border print:border-gray-200 print:p-1 print:rounded print-compact-text">
+          <div>
+            <h4 className="font-medium text-muted-foreground mb-0 print:text-xs print:text-blue-700">{t('createdBy')}</h4>
+            <p className="print:text-xs print:text-black print-smaller-font">{maintenance.created_by || t('notSpecified')}</p>
+          </div>
+          <div>
+            <h4 className="font-medium text-muted-foreground mb-0 print:text-xs print:text-blue-700">{t('notificationChannel')}</h4>
+            <p className="print:text-xs print:text-black print-smaller-font">{maintenance.notification_channel_name || t('notSpecified')}</p>
+          </div>
+          <div>
+            <h4 className="font-medium text-muted-foreground mb-0 print:text-xs print:text-blue-700">{t('created')}</h4>
+            <p className="print:text-xs print:text-black print-smaller-font">{formatDateTime(maintenance.created)}</p>
+          </div>
+          <div>
+            <h4 className="font-medium text-muted-foreground mb-0 print:text-xs print:text-blue-700">{t('lastUpdated')}</h4>
+            <p className="print:text-xs print:text-black print-smaller-font">{formatDateTime(maintenance.updated)}</p>
+          </div>
+        </div>
+      </div>
+      
+      {/* Notification Settings - Simplified for print */}
+      <div className="text-sm bg-muted/50 p-3 rounded-md print:bg-blue-50 print:border print:border-blue-200 print:p-1 print:rounded print-section print-compact-text">
+        <h4 className="font-medium mb-1 print:text-xs print:font-bold print:text-blue-800 print:mb-0">{t('notificationSettings')}</h4>
+        <p className="print:text-xs print:text-black print-smaller-font">
+          {maintenance.notify_subscribers === 'yes' 
+            ? t('subscribersWillBeNotified') 
+            : t('noNotifications')}
+        </p>
+      </div>
+      
+      {/* Print Footer - Only visible when printing */}
+      <div className="hidden print:block footer-print border-t border-gray-200 text-xs text-gray-500">
+        <div className="flex justify-between">
+          <span>Maintenance ID: {maintenance.id}</span>
+          <span>Printed on {format(new Date(), 'PPP')}</span>
+        </div>
+        <p className="mt-1 text-center">This document is confidential and intended for internal use only.</p>
+      </div>
+    </div>
+  );
+};
diff --git a/application/src/components/schedule-incident/maintenance/detail-dialog/components/CloseButton.tsx b/application/src/components/schedule-incident/maintenance/detail-dialog/components/CloseButton.tsx
new file mode 100644
index 0000000..14df70b
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/detail-dialog/components/CloseButton.tsx
@@ -0,0 +1,18 @@
+
+import React from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { Button } from '@/components/ui/button';
+
+interface CloseButtonProps {
+  onClose: () => void;
+}
+
+export const CloseButton: React.FC<CloseButtonProps> = ({ onClose }) => {
+  const { t } = useLanguage();
+  
+  return (
+    <Button variant="secondary" onClick={onClose}>
+      {t('close')}
+    </Button>
+  );
+};
diff --git a/application/src/components/schedule-incident/maintenance/detail-dialog/components/DownloadPdfButton.tsx b/application/src/components/schedule-incident/maintenance/detail-dialog/components/DownloadPdfButton.tsx
new file mode 100644
index 0000000..dd2aa57
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/detail-dialog/components/DownloadPdfButton.tsx
@@ -0,0 +1,31 @@
+
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { Download } from 'lucide-react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { useDownloadMaintenancePdf } from '../hooks';
+import { MaintenanceItem } from '@/services/maintenance';
+
+interface DownloadPdfButtonProps {
+  maintenance: MaintenanceItem;
+  className?: string;
+}
+
+export const DownloadPdfButton: React.FC<DownloadPdfButtonProps> = ({ 
+  maintenance, 
+  className 
+}) => {
+  const { t } = useLanguage();
+  const { handleDownloadPDF } = useDownloadMaintenancePdf();
+  
+  return (
+    <Button
+      className={`flex items-center gap-2 ${className || ''}`}
+      onClick={() => handleDownloadPDF(maintenance)}
+      variant="outline"
+    >
+      <Download className="h-4 w-4" />
+      {t('downloadPdf')}
+    </Button>
+  );
+};
diff --git a/application/src/components/schedule-incident/maintenance/detail-dialog/components/PrintButton.tsx b/application/src/components/schedule-incident/maintenance/detail-dialog/components/PrintButton.tsx
new file mode 100644
index 0000000..4480daf
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/detail-dialog/components/PrintButton.tsx
@@ -0,0 +1,27 @@
+
+import React from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { Printer } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { usePrintMaintenance } from '../hooks/usePrintMaintenance';
+import { MaintenanceItem } from '@/services/types/maintenance.types';
+
+interface PrintButtonProps {
+  maintenance: MaintenanceItem;
+}
+
+export const PrintButton: React.FC<PrintButtonProps> = ({ maintenance }) => {
+  const { t } = useLanguage();
+  const { handlePrint } = usePrintMaintenance();
+  
+  return (
+    <Button
+      className="flex items-center gap-2"
+      onClick={() => handlePrint(maintenance)}
+      variant="default"
+    >
+      <Printer className="h-4 w-4" />
+      {t('print')}
+    </Button>
+  );
+};
diff --git a/application/src/components/schedule-incident/maintenance/detail-dialog/components/index.ts b/application/src/components/schedule-incident/maintenance/detail-dialog/components/index.ts
new file mode 100644
index 0000000..d0f807c
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/detail-dialog/components/index.ts
@@ -0,0 +1,4 @@
+
+export * from './DownloadPdfButton';
+export * from './PrintButton';
+export * from './CloseButton';
diff --git a/application/src/components/schedule-incident/maintenance/detail-dialog/hooks/index.ts b/application/src/components/schedule-incident/maintenance/detail-dialog/hooks/index.ts
new file mode 100644
index 0000000..4150016
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/detail-dialog/hooks/index.ts
@@ -0,0 +1,3 @@
+
+export * from './useDownloadMaintenancePdf';
+export * from './usePrintMaintenance';
diff --git a/application/src/components/schedule-incident/maintenance/detail-dialog/hooks/useDownloadMaintenancePdf.ts b/application/src/components/schedule-incident/maintenance/detail-dialog/hooks/useDownloadMaintenancePdf.ts
new file mode 100644
index 0000000..a605437
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/detail-dialog/hooks/useDownloadMaintenancePdf.ts
@@ -0,0 +1,47 @@
+
+import { useToast } from '@/hooks/use-toast';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { MaintenanceItem, generateMaintenancePDF } from '@/services/maintenance';
+
+export const useDownloadMaintenancePdf = () => {
+  const { toast } = useToast();
+  const { t } = useLanguage();
+  
+  const handleDownloadPDF = async (maintenance: MaintenanceItem) => {
+    try {
+      // Show loading toast
+      toast({
+        title: t('generating'),
+        description: t('preparingPdf'),
+      });
+      
+      // Generate and download the PDF
+      const filename = await generateMaintenancePDF(maintenance);
+      
+      // Show success toast after successful generation
+      toast({
+        title: t('success'),
+        description: t('pdfDownloaded'),
+      });
+      
+      return filename;
+    } catch (error) {
+      console.error("Error generating PDF:", error);
+      
+      // Provide more detailed error message if available
+      const errorMessage = error instanceof Error 
+        ? error.message 
+        : t('pdfGenerationFailed');
+      
+      toast({
+        title: t('error'),
+        description: errorMessage,
+        variant: 'destructive',
+      });
+      
+      throw error;
+    }
+  };
+  
+  return { handleDownloadPDF };
+};
diff --git a/application/src/components/schedule-incident/maintenance/detail-dialog/hooks/usePrintMaintenance.ts b/application/src/components/schedule-incident/maintenance/detail-dialog/hooks/usePrintMaintenance.ts
new file mode 100644
index 0000000..363308f
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/detail-dialog/hooks/usePrintMaintenance.ts
@@ -0,0 +1,173 @@
+
+import { useLanguage } from '@/contexts/LanguageContext';
+import { useToast } from '@/hooks/use-toast';
+import { MaintenanceItem } from '@/services/types/maintenance.types';
+
+export const usePrintMaintenance = () => {
+  const { t } = useLanguage();
+  const { toast } = useToast();
+  
+  const handlePrint = (maintenance: MaintenanceItem) => {
+    try {
+      // Add print-specific stylesheet temporarily
+      const style = document.createElement('style');
+      style.id = 'print-style';
+      style.textContent = `
+        @page {
+          size: A4;
+          margin: 10mm;
+        }
+        @media print {
+          body * {
+            visibility: hidden;
+          }
+          
+          .dialog-content, .dialog-content * {
+            visibility: visible;
+          }
+          
+          .dialog-content {
+            position: absolute !important;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: auto;
+            padding: 15mm !important;
+            margin: 0 !important;
+            background-color: white !important;
+            box-shadow: none;
+            overflow: visible !important;
+            display: block !important;
+            transform: none !important;
+          }
+          
+          /* Remove any black backgrounds */
+          html, body {
+            background-color: white !important;
+            color: black !important;
+          }
+          
+          /* Optimize spacing for single page */
+          .print-section {
+            margin-bottom: 2mm !important;
+            page-break-inside: avoid !important;
+          }
+          
+          /* Reduce vertical spacing */
+          h4 {
+            margin-bottom: 1mm !important;
+            margin-top: 1mm !important;
+            color: #1e40af !important; /* blue-800 */
+            font-weight: bold !important;
+          }
+          
+          .print-compact-text {
+            font-size: 9pt !important;
+            line-height: 1.2 !important;
+          }
+          
+          .print-compact-spacing > * {
+            margin-top: 1mm !important;
+            margin-bottom: 1mm !important;
+          }
+          
+          .print-grid {
+            display: grid !important;
+            grid-template-columns: 1fr 1fr !important;
+            gap: 1mm !important;
+          }
+          
+          .badge-print {
+            background-color: #dbeafe !important; /* blue-100 */
+            color: #1e40af !important; /* blue-800 */
+            border: 1px solid #93c5fd !important; /* blue-300 */
+            padding: 0.5mm 1mm !important;
+            margin: 0.5mm !important;
+            display: inline-block !important;
+            font-size: 8pt !important;
+          }
+          
+          /* More compact spacing */
+          .print-compact-margin {
+            margin: 1mm 0 !important;
+          }
+          
+          .print-smaller-font {
+            font-size: 8pt !important;
+          }
+          
+          .header-print {
+            background-color: #1e40af !important; /* blue-800 */
+            color: #ffffff !important;
+            padding: 2mm 3mm !important;
+            margin-bottom: 2mm !important;
+          }
+          
+          /* More compact header */
+          .header-print h1 {
+            font-size: 12pt !important;
+            margin-bottom: 0 !important;
+          }
+          
+          .header-print p {
+            font-size: 9pt !important;
+            margin-top: 1mm !important;
+          }
+          
+          /* Footer stays at bottom */
+          .footer-print {
+            font-size: 7pt !important;
+            color: #6b7280 !important; /* gray-500 */
+            border-top: 1px solid #e5e7eb !important; /* gray-200 */
+            position: fixed !important;
+            bottom: 10mm !important;
+            left: 15mm !important;
+            right: 15mm !important;
+            padding-top: 2mm !important;
+            background-color: white !important;
+          }
+          
+          /* Hide any unnecessary elements */
+          .print-hide {
+            display: none !important;
+          }
+          
+          /* Optimize description text */
+          .print-description {
+            max-height: 100px !important;
+            overflow: hidden !important;
+            text-overflow: ellipsis !important;
+          }
+        }
+      `;
+      document.head.appendChild(style);
+
+      // Wait a bit to ensure styles are applied
+      setTimeout(() => {
+        window.print();
+        
+        // Remove the style after printing dialog closes
+        setTimeout(() => {
+          const printStyle = document.getElementById('print-style');
+          if (printStyle) {
+            printStyle.remove();
+          }
+        }, 1000);
+      }, 100);
+
+      toast({
+        title: t('success'),
+        description: t('printJobStarted'),
+      });
+    } catch (error) {
+      console.error("Error printing:", error);
+      toast({
+        title: t('error'),
+        description: t('printingFailed'),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return { handlePrint };
+};
diff --git a/application/src/components/schedule-incident/maintenance/detail-dialog/index.ts b/application/src/components/schedule-incident/maintenance/detail-dialog/index.ts
new file mode 100644
index 0000000..a559f25
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/detail-dialog/index.ts
@@ -0,0 +1,8 @@
+
+export * from './MaintenanceDetailDialog';
+export * from './MaintenanceDetailContent';
+export * from './MaintenanceDetailHeader';
+export * from './MaintenanceDetailSections';
+export * from './MaintenanceDetailFooter';
+export * from './components';
+export * from './hooks';
diff --git a/application/src/components/schedule-incident/maintenance/edit-dialog/EditMaintenanceDialog.tsx b/application/src/components/schedule-incident/maintenance/edit-dialog/EditMaintenanceDialog.tsx
new file mode 100644
index 0000000..d51184e
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/edit-dialog/EditMaintenanceDialog.tsx
@@ -0,0 +1,97 @@
+
+import React from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { 
+  Dialog, 
+  DialogContent, 
+  DialogHeader, 
+  DialogTitle, 
+  DialogDescription,
+  DialogFooter
+} from '@/components/ui/dialog';
+import { Form } from '@/components/ui/form';
+import { Button } from '@/components/ui/button';
+import { MaintenanceItem } from '@/services/types/maintenance.types';
+import { useMaintenanceEditForm } from '../hooks/useMaintenanceEditForm';
+import {
+  MaintenanceBasicFields,
+  MaintenanceTimeFields,
+  MaintenanceAffectedFields,
+  MaintenanceConfigFields,
+  MaintenanceNotificationSettingsField
+} from '../form';
+
+interface EditMaintenanceDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  maintenance: MaintenanceItem;
+  onMaintenanceUpdated: () => void;
+}
+
+export const EditMaintenanceDialog = ({ 
+  open, 
+  onOpenChange,
+  maintenance,
+  onMaintenanceUpdated
+}: EditMaintenanceDialogProps) => {
+  const { t } = useLanguage();
+  
+  const handleSuccess = () => {
+    console.log("EditMaintenanceDialog: maintenance updated successfully");
+    onMaintenanceUpdated();
+  };
+  
+  const handleClose = () => {
+    console.log("EditMaintenanceDialog: closing dialog");
+    onOpenChange(false);
+  };
+  
+  const { form, onSubmit } = useMaintenanceEditForm(maintenance, handleSuccess, handleClose);
+
+  // Log the form state for debugging
+  React.useEffect(() => {
+    const subscription = form.watch((value) => {
+      console.log("Form values in edit dialog:", value);
+    });
+    return () => subscription.unsubscribe();
+  }, [form]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[600px] max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{t('editMaintenanceWindow')}</DialogTitle>
+          <DialogDescription>
+            {t('editMaintenanceDesc')}
+          </DialogDescription>
+        </DialogHeader>
+        
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
+            <MaintenanceBasicFields />
+            <MaintenanceTimeFields />
+            <MaintenanceAffectedFields />
+            <MaintenanceConfigFields />
+            <MaintenanceNotificationSettingsField />
+            
+            <DialogFooter className="pt-4">
+              <Button 
+                type="button" 
+                variant="outline" 
+                onClick={() => onOpenChange(false)}
+              >
+                {t('cancel')}
+              </Button>
+              <Button 
+                type="submit"
+                disabled={form.formState.isSubmitting}
+              >
+                {form.formState.isSubmitting ? t('updating') : t('updateMaintenance')}
+              </Button>
+            </DialogFooter>
+          </form>
+        </Form>
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/application/src/components/schedule-incident/maintenance/edit-dialog/index.ts b/application/src/components/schedule-incident/maintenance/edit-dialog/index.ts
new file mode 100644
index 0000000..e4f699c
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/edit-dialog/index.ts
@@ -0,0 +1,2 @@
+
+export * from './EditMaintenanceDialog';
diff --git a/application/src/components/schedule-incident/maintenance/form/MaintenanceAffectedFields.tsx b/application/src/components/schedule-incident/maintenance/form/MaintenanceAffectedFields.tsx
new file mode 100644
index 0000000..2f933dd
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/form/MaintenanceAffectedFields.tsx
@@ -0,0 +1,35 @@
+
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { MaintenanceFormValues } from '../hooks/useMaintenanceForm';
+import {
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+
+export const MaintenanceAffectedFields: React.FC = () => {
+  const { t } = useLanguage();
+  const { control } = useFormContext<MaintenanceFormValues>();
+
+  return (
+    <FormField
+      control={control}
+      name="affected"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{t('affectedServices')}</FormLabel>
+          <FormControl>
+            <Input placeholder={t('enterAffectedServices')} {...field} />
+          </FormControl>
+          <FormMessage />
+          <p className="text-sm text-muted-foreground">{t('separateServicesWithComma')}</p>
+        </FormItem>
+      )}
+    />
+  );
+};
diff --git a/application/src/components/schedule-incident/maintenance/form/MaintenanceBasicFields.tsx b/application/src/components/schedule-incident/maintenance/form/MaintenanceBasicFields.tsx
new file mode 100644
index 0000000..0ec8a9f
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/form/MaintenanceBasicFields.tsx
@@ -0,0 +1,55 @@
+
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { MaintenanceFormValues } from '../hooks/useMaintenanceForm';
+import {
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+
+export const MaintenanceBasicFields: React.FC = () => {
+  const { t } = useLanguage();
+  const { control } = useFormContext<MaintenanceFormValues>();
+
+  return (
+    <>
+      <FormField
+        control={control}
+        name="title"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('title')}</FormLabel>
+            <FormControl>
+              <Input placeholder={t('enterTitle')} {...field} />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      
+      <FormField
+        control={control}
+        name="description"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('description')}</FormLabel>
+            <FormControl>
+              <Textarea
+                placeholder={t('enterDescription')}
+                className="resize-none"
+                {...field}
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </>
+  );
+};
diff --git a/application/src/components/schedule-incident/maintenance/form/MaintenanceConfigFields.tsx b/application/src/components/schedule-incident/maintenance/form/MaintenanceConfigFields.tsx
new file mode 100644
index 0000000..3d581a2
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/form/MaintenanceConfigFields.tsx
@@ -0,0 +1,32 @@
+
+import React from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { 
+  PriorityField,
+  StatusField,
+  ImpactLevelField,
+  AssignedUsersField
+} from './config';
+
+export const MaintenanceConfigFields = () => {
+  const { t } = useLanguage();
+  
+  return (
+    <div className="space-y-6">
+      <div className="text-sm font-medium">{t('configurationSettings')}</div>
+      
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <PriorityField />
+        <StatusField />
+      </div>
+
+      <div className="grid grid-cols-1 gap-4">
+        <ImpactLevelField />
+      </div>
+      
+      <div className="grid grid-cols-1 gap-6 mt-4">
+        <AssignedUsersField />
+      </div>
+    </div>
+  );
+};
diff --git a/application/src/components/schedule-incident/maintenance/form/MaintenanceNotificationSettingsField.tsx b/application/src/components/schedule-incident/maintenance/form/MaintenanceNotificationSettingsField.tsx
new file mode 100644
index 0000000..65174a6
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/form/MaintenanceNotificationSettingsField.tsx
@@ -0,0 +1,170 @@
+
+import React, { useEffect, useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { alertConfigService, AlertConfiguration } from '@/services/alertConfigService';
+import { MaintenanceFormValues } from '../hooks/useMaintenanceForm';
+import { FormField, FormItem, FormLabel, FormControl, FormDescription } from '@/components/ui/form';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
+import { Switch } from '@/components/ui/switch';
+import { useToast } from '@/hooks/use-toast';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Bell, BellOff } from 'lucide-react';
+
+export const MaintenanceNotificationSettingsField = () => {
+  const { t } = useLanguage();
+  const { toast } = useToast();
+  const [notificationChannels, setNotificationChannels] = useState<AlertConfiguration[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const { control, watch, setValue, getValues } = useFormContext<MaintenanceFormValues>();
+  
+  // Watch the notification toggle state
+  const notifySubscribers = watch('notify_subscribers');
+  const notificationChannelId = watch('notification_channel_id');
+  
+  useEffect(() => {
+    const fetchNotificationChannels = async () => {
+      try {
+        setIsLoading(true);
+        const channels = await alertConfigService.getAlertConfigurations();
+        console.log("Fetched notification channels for form:", channels);
+        
+        // Only show enabled channels
+        const enabledChannels = channels.filter(channel => channel.enabled);
+        setNotificationChannels(enabledChannels);
+        
+        // If we have notification channels and notification is enabled but no channel is selected,
+        // select the first one by default
+        const currentChannel = getValues('notification_channel_id');
+        const shouldNotify = getValues('notify_subscribers');
+        
+        console.log("Current notification values:", {
+          currentChannel,
+          shouldNotify,
+          availableChannels: enabledChannels.length
+        });
+        
+        if (shouldNotify && (!currentChannel || currentChannel === 'none') && enabledChannels.length > 0) {
+          console.log("Setting default notification channel:", enabledChannels[0].id);
+          setValue('notification_channel_id', enabledChannels[0].id);
+        }
+      } catch (error) {
+        console.error('Error fetching notification channels:', error);
+        toast({
+          title: t('error'),
+          description: t('errorFetchingNotificationChannels'),
+          variant: 'destructive',
+        });
+      } finally {
+        setIsLoading(false);
+      }
+    };
+    
+    fetchNotificationChannels();
+  }, [t, toast, setValue, getValues]);
+  
+  // Log value changes for debugging
+  useEffect(() => {
+    console.log("Current notification settings:", {
+      channel_id: getValues('notification_channel_id'),
+      notify: notifySubscribers
+    });
+  }, [notifySubscribers, notificationChannelId, getValues]);
+  
+  return (
+    <div className="space-y-6">
+      <h3 className="font-medium text-lg">{t('notificationSettings')}</h3>
+      
+      <FormField
+        control={control}
+        name="notify_subscribers"
+        render={({ field }) => (
+          <FormItem className="flex flex-row items-center justify-between rounded-lg border p-4">
+            <div className="space-y-0.5">
+              <div className="flex items-center gap-2">
+                {field.value ? <Bell className="w-4 h-4" /> : <BellOff className="w-4 h-4" />}
+                <FormLabel className="text-base mb-0">
+                  {field.value ? t('notifySubscribers') : t('mutedNotifications')}
+                </FormLabel>
+              </div>
+              <FormDescription>
+                {field.value 
+                  ? t('notifySubscribersDesc') 
+                  : t('notificationsAreMuted')}
+              </FormDescription>
+            </div>
+            <FormControl>
+              <Switch
+                checked={field.value}
+                onCheckedChange={(checked) => {
+                  field.onChange(checked);
+                  console.log("Notification toggle changed to:", checked);
+                  // If notifications are disabled, also clear the notification channel
+                  if (!checked) {
+                    setValue('notification_channel_id', '');
+                  } else if (notificationChannels.length > 0) {
+                    // If enabled and channels available, select the first one by default
+                    setValue('notification_channel_id', notificationChannels[0].id);
+                  }
+                }}
+              />
+            </FormControl>
+          </FormItem>
+        )}
+      />
+      
+      <FormField
+        control={control}
+        name="notification_channel_id"
+        render={({ field }) => {
+          // Make sure to handle both empty string and "none" as special cases
+          const displayValue = field.value || "";
+          
+          console.log("Rendering notification channel field with value:", {
+            fieldValue: field.value, 
+            displayValue
+          });
+          
+          return (
+            <FormItem>
+              <FormLabel>{t('notificationChannel')}</FormLabel>
+              <FormControl>
+                {isLoading ? (
+                  <Skeleton className="h-10 w-full" />
+                ) : (
+                  <Select 
+                    value={displayValue} 
+                    onValueChange={(value) => {
+                      console.log("Setting notification channel to:", value);
+                      field.onChange(value === "none" ? "" : value);
+                    }}
+                    disabled={!notifySubscribers}
+                  >
+                    <SelectTrigger className={!notifySubscribers ? 'opacity-50' : ''}>
+                      <SelectValue placeholder={t('selectNotificationChannel')} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="none">
+                        {t('none')}
+                      </SelectItem>
+                      {notificationChannels.map((channel) => (
+                        <SelectItem key={channel.id} value={channel.id}>
+                          {channel.notify_name} ({channel.notification_type})
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                )}
+              </FormControl>
+              <FormDescription>
+                {notifySubscribers
+                  ? t('selectChannelForNotifications')
+                  : t('enableNotificationsFirst')}
+              </FormDescription>
+            </FormItem>
+          );
+        }}
+      />
+    </div>
+  );
+};
diff --git a/application/src/components/schedule-incident/maintenance/form/MaintenanceTimeFields.tsx b/application/src/components/schedule-incident/maintenance/form/MaintenanceTimeFields.tsx
new file mode 100644
index 0000000..dde680b
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/form/MaintenanceTimeFields.tsx
@@ -0,0 +1,195 @@
+
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+import { format } from 'date-fns';
+import { CalendarIcon } from 'lucide-react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { MaintenanceFormValues } from '../hooks/useMaintenanceForm';
+import { cn } from '@/lib/utils';
+import {
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from '@/components/ui/form';
+import { Button } from '@/components/ui/button';
+import { Calendar } from '@/components/ui/calendar';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/components/ui/popover';
+import { Input } from '@/components/ui/input';
+
+export const MaintenanceTimeFields: React.FC = () => {
+  const { t } = useLanguage();
+  const { control } = useFormContext<MaintenanceFormValues>();
+
+  // Helper function to safely format dates
+  const safeFormat = (date: Date | null | undefined, formatStr: string): string => {
+    if (!date || !(date instanceof Date) || isNaN(date.getTime())) {
+      return '';
+    }
+    return format(date, formatStr);
+  };
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+      <FormField
+        control={control}
+        name="start_time"
+        render={({ field }) => (
+          <FormItem className="flex flex-col">
+            <FormLabel>{t('startTime')}</FormLabel>
+            <Popover>
+              <PopoverTrigger asChild>
+                <FormControl>
+                  <Button
+                    variant="outline"
+                    className={cn(
+                      "w-full pl-3 text-left font-normal",
+                      !field.value && "text-muted-foreground"
+                    )}
+                  >
+                    {field.value && field.value instanceof Date && !isNaN(field.value.getTime()) ? (
+                      safeFormat(field.value, "PPP HH:mm")
+                    ) : (
+                      <span>{t('selectDate')}</span>
+                    )}
+                    <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                  </Button>
+                </FormControl>
+              </PopoverTrigger>
+              <PopoverContent className="w-auto p-0" align="start">
+                <Calendar
+                  mode="single"
+                  selected={field.value instanceof Date && !isNaN(field.value.getTime()) ? field.value : undefined}
+                  onSelect={(date) => {
+                    if (date) {
+                      // If existing value is a valid date, preserve the time part
+                      if (field.value instanceof Date && !isNaN(field.value.getTime())) {
+                        const newDate = new Date(date);
+                        newDate.setHours(field.value.getHours(), field.value.getMinutes());
+                        field.onChange(newDate);
+                      } else {
+                        // Set default time to current time if no valid time exists
+                        const now = new Date();
+                        date.setHours(now.getHours(), now.getMinutes());
+                        field.onChange(date);
+                      }
+                    } else {
+                      field.onChange(undefined);
+                    }
+                  }}
+                  initialFocus
+                  className={cn("p-3 pointer-events-auto")}
+                />
+                <div className="p-3 border-t border-border">
+                  <Input
+                    type="time"
+                    onChange={(e) => {
+                      const timeValue = e.target.value;
+                      if (!timeValue) return;
+                      
+                      const [hours, minutes] = timeValue.split(':').map(Number);
+                      const date = new Date(field.value || new Date());
+                      
+                      // Ensure we have a valid date before setting hours/minutes
+                      if (!isNaN(date.getTime())) {
+                        date.setHours(hours, minutes);
+                        field.onChange(date);
+                      }
+                    }}
+                    value={field.value instanceof Date && !isNaN(field.value.getTime()) 
+                      ? safeFormat(field.value, "HH:mm") 
+                      : ""}
+                  />
+                </div>
+              </PopoverContent>
+            </Popover>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      
+      <FormField
+        control={control}
+        name="end_time"
+        render={({ field }) => (
+          <FormItem className="flex flex-col">
+            <FormLabel>{t('endTime')}</FormLabel>
+            <Popover>
+              <PopoverTrigger asChild>
+                <FormControl>
+                  <Button
+                    variant="outline"
+                    className={cn(
+                      "w-full pl-3 text-left font-normal",
+                      !field.value && "text-muted-foreground"
+                    )}
+                  >
+                    {field.value && field.value instanceof Date && !isNaN(field.value.getTime()) ? (
+                      safeFormat(field.value, "PPP HH:mm")
+                    ) : (
+                      <span>{t('selectDate')}</span>
+                    )}
+                    <CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+                  </Button>
+                </FormControl>
+              </PopoverTrigger>
+              <PopoverContent className="w-auto p-0" align="start">
+                <Calendar
+                  mode="single"
+                  selected={field.value instanceof Date && !isNaN(field.value.getTime()) ? field.value : undefined}
+                  onSelect={(date) => {
+                    if (date) {
+                      // If existing value is a valid date, preserve the time part
+                      if (field.value instanceof Date && !isNaN(field.value.getTime())) {
+                        const newDate = new Date(date);
+                        newDate.setHours(field.value.getHours(), field.value.getMinutes());
+                        field.onChange(newDate);
+                      } else {
+                        // Set default time to current time if no valid time exists
+                        const now = new Date();
+                        // Default to current time + 1 hour for end time
+                        date.setHours(now.getHours() + 1, now.getMinutes());
+                        field.onChange(date);
+                      }
+                    } else {
+                      field.onChange(undefined);
+                    }
+                  }}
+                  initialFocus
+                  className={cn("p-3 pointer-events-auto")}
+                />
+                <div className="p-3 border-t border-border">
+                  <Input
+                    type="time"
+                    onChange={(e) => {
+                      const timeValue = e.target.value;
+                      if (!timeValue) return;
+                      
+                      const [hours, minutes] = timeValue.split(':').map(Number);
+                      const date = new Date(field.value || new Date());
+                      
+                      // Ensure we have a valid date before setting hours/minutes
+                      if (!isNaN(date.getTime())) {
+                        date.setHours(hours, minutes);
+                        field.onChange(date);
+                      }
+                    }}
+                    value={field.value instanceof Date && !isNaN(field.value.getTime()) 
+                      ? safeFormat(field.value, "HH:mm")
+                      : ""}
+                  />
+                </div>
+              </PopoverContent>
+            </Popover>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+};
diff --git a/application/src/components/schedule-incident/maintenance/form/config/AssignedUsersField.tsx b/application/src/components/schedule-incident/maintenance/form/config/AssignedUsersField.tsx
new file mode 100644
index 0000000..056abe1
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/form/config/AssignedUsersField.tsx
@@ -0,0 +1,185 @@
+
+import React, { useEffect } from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { useFormContext } from 'react-hook-form';
+import { 
+  FormField, 
+  FormItem, 
+  FormLabel, 
+  FormControl, 
+  FormMessage,
+  FormDescription 
+} from '@/components/ui/form';
+import { 
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useQuery } from '@tanstack/react-query';
+import { userService } from '@/services/userService';
+import { Badge } from '@/components/ui/badge';
+import { X, Users } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+
+export const AssignedUsersField = () => {
+  const { t } = useLanguage();
+  const form = useFormContext();
+
+  // Ensure assigned_users is initialized as an array
+  useEffect(() => {
+    const currentValue = form.getValues('assigned_users');
+    console.log("Initial assigned_users value:", currentValue);
+    
+    // Initialize as empty array if no value or invalid value
+    if (!currentValue || !Array.isArray(currentValue)) {
+      console.log("Initializing assigned_users as empty array");
+      form.setValue('assigned_users', [], { shouldValidate: false, shouldDirty: true });
+    }
+  }, [form]);
+
+  console.log("Current form values:", form.getValues());
+  console.log("Current assigned_users:", form.getValues('assigned_users'));
+
+  // Fetch users for the assignment dropdown
+  const { data: users = [], isLoading } = useQuery({
+    queryKey: ['users'],
+    queryFn: async () => {
+      try {
+        const usersList = await userService.getUsers();
+        console.log("Fetched users for assignment:", usersList);
+        return Array.isArray(usersList) ? usersList : [];
+      } catch (error) {
+        console.error("Failed to fetch users:", error);
+        return [];
+      }
+    },
+    staleTime: 300000 // Cache for 5 minutes to reduce API calls
+  });
+
+  // Get the currently selected assigned users from the form
+  const selectedUserIds = Array.isArray(form.watch('assigned_users')) 
+    ? form.watch('assigned_users') 
+    : [];
+  
+  console.log("Selected user IDs:", selectedUserIds);
+
+  // Function to add a user
+  const addUser = (userId: string) => {
+    const currentValues = Array.isArray(form.getValues('assigned_users')) 
+      ? [...form.getValues('assigned_users')] 
+      : [];
+      
+    if (!currentValues.includes(userId)) {
+      console.log("Adding user:", userId);
+      form.setValue('assigned_users', [...currentValues, userId], { shouldValidate: true, shouldDirty: true });
+    }
+  };
+
+  // Function to remove a user
+  const removeUser = (userId: string) => {
+    const currentValues = Array.isArray(form.getValues('assigned_users')) 
+      ? [...form.getValues('assigned_users')] 
+      : [];
+      
+    console.log("Removing user:", userId);
+    form.setValue(
+      'assigned_users', 
+      currentValues.filter(id => id !== userId), 
+      { shouldValidate: true, shouldDirty: true }
+    );
+  };
+
+  // Get selected users data
+  const selectedUsers = users.filter(user => selectedUserIds.includes(user.id));
+  console.log("Matched selected users:", selectedUsers);
+  
+  // Function to get user initials from name
+  const getUserInitials = (user: any): string => {
+    if (user.full_name) {
+      const nameParts = user.full_name.split(' ');
+      if (nameParts.length > 1) {
+        return `${nameParts[0][0]}${nameParts[1][0]}`.toUpperCase();
+      }
+      return user.full_name.substring(0, 2).toUpperCase();
+    }
+    return user.username.substring(0, 2).toUpperCase();
+  };
+  
+  return (
+    <FormField
+      control={form.control}
+      name="assigned_users"
+      render={({ field }) => (
+        <FormItem className="flex flex-col">
+          <FormLabel className="flex items-center gap-1">
+            <Users className="h-4 w-4" /> {t('assignedPersonnel')}
+          </FormLabel>
+          <div className="space-y-3">
+            <Select onValueChange={addUser}>
+              <FormControl>
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder={t('selectAssignedUsers')} />
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent>
+                {isLoading ? (
+                  <div className="py-2 px-2 text-sm">{t('loading')}</div>
+                ) : users.length === 0 ? (
+                  <div className="py-2 px-2 text-sm">{t('noUsersFound')}</div>
+                ) : (
+                  users.map((user) => (
+                    <SelectItem 
+                      key={user.id} 
+                      value={user.id}
+                      disabled={selectedUserIds.includes(user.id)}
+                    >
+                      {user.full_name || user.username}
+                    </SelectItem>
+                  ))
+                )}
+              </SelectContent>
+            </Select>
+
+            {selectedUsers.length > 0 ? (
+              <div className="flex flex-wrap gap-2 mt-2 border p-2 rounded-md bg-muted/50">
+                {selectedUsers.map((user) => (
+                  <Badge key={user.id} variant="secondary" className="flex items-center gap-1 py-1 px-2">
+                    <Avatar className="h-5 w-5 mr-1">
+                      <AvatarImage src={user.avatar} alt={user.full_name || user.username} />
+                      <AvatarFallback className="text-[10px]">
+                        {getUserInitials(user)}
+                      </AvatarFallback>
+                    </Avatar>
+                    <span>{user.full_name || user.username}</span>
+                    <Button 
+                      variant="ghost" 
+                      size="icon" 
+                      className="h-4 w-4 p-0 ml-1 hover:bg-transparent hover:opacity-70"
+                      onClick={() => removeUser(user.id)}
+                      type="button"
+                    >
+                      <X className="h-3 w-3" />
+                      <span className="sr-only">{t('remove')}</span>
+                    </Button>
+                  </Badge>
+                ))}
+              </div>
+            ) : (
+              <div className="text-sm text-muted-foreground italic p-2">
+                {t('noAssignedUsers')}
+              </div>
+            )}
+          </div>
+
+          <FormDescription>
+            {t('assignedPersonnelDescription')}
+          </FormDescription>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};
diff --git a/application/src/components/schedule-incident/maintenance/form/config/ImpactLevelField.tsx b/application/src/components/schedule-incident/maintenance/form/config/ImpactLevelField.tsx
new file mode 100644
index 0000000..16f6ae5
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/form/config/ImpactLevelField.tsx
@@ -0,0 +1,56 @@
+
+import React from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { useFormContext } from 'react-hook-form';
+import { 
+  FormField, 
+  FormItem, 
+  FormLabel, 
+  FormControl, 
+  FormMessage,
+  FormDescription 
+} from '@/components/ui/form';
+import { 
+  Select, 
+  SelectContent, 
+  SelectItem, 
+  SelectTrigger, 
+  SelectValue 
+} from '@/components/ui/select';
+
+export const ImpactLevelField = () => {
+  const { t } = useLanguage();
+  const form = useFormContext();
+  
+  return (
+    <FormField
+      control={form.control}
+      name="field"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{t('impactLevel')}</FormLabel>
+          <Select 
+            onValueChange={field.onChange} 
+            defaultValue={field.value}
+          >
+            <FormControl>
+              <SelectTrigger>
+                <SelectValue placeholder={t('selectImpactLevel')} />
+              </SelectTrigger>
+            </FormControl>
+            <SelectContent>
+              <SelectItem value="none">{t('none')}</SelectItem>
+              <SelectItem value="minor">{t('minor')}</SelectItem>
+              <SelectItem value="major">{t('major')}</SelectItem>
+              <SelectItem value="critical">{t('critical')}</SelectItem>
+            </SelectContent>
+          </Select>
+          <FormDescription>
+            {t('impactLevelDescription')}
+          </FormDescription>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};
diff --git a/application/src/components/schedule-incident/maintenance/form/config/PriorityField.tsx b/application/src/components/schedule-incident/maintenance/form/config/PriorityField.tsx
new file mode 100644
index 0000000..4b64dd0
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/form/config/PriorityField.tsx
@@ -0,0 +1,56 @@
+
+import React from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { useFormContext } from 'react-hook-form';
+import { 
+  FormField, 
+  FormItem, 
+  FormLabel, 
+  FormControl, 
+  FormMessage,
+  FormDescription 
+} from '@/components/ui/form';
+import { 
+  Select, 
+  SelectContent, 
+  SelectItem, 
+  SelectTrigger, 
+  SelectValue 
+} from '@/components/ui/select';
+
+export const PriorityField = () => {
+  const { t } = useLanguage();
+  const form = useFormContext();
+  
+  return (
+    <FormField
+      control={form.control}
+      name="priority"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{t('priority')}</FormLabel>
+          <Select 
+            onValueChange={field.onChange} 
+            defaultValue={field.value}
+          >
+            <FormControl>
+              <SelectTrigger>
+                <SelectValue placeholder={t('selectPriority')} />
+              </SelectTrigger>
+            </FormControl>
+            <SelectContent>
+              <SelectItem value="low">{t('low')}</SelectItem>
+              <SelectItem value="medium">{t('medium')}</SelectItem>
+              <SelectItem value="high">{t('high')}</SelectItem>
+              <SelectItem value="critical">{t('critical')}</SelectItem>
+            </SelectContent>
+          </Select>
+          <FormDescription>
+            {t('priorityDescription')}
+          </FormDescription>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};
diff --git a/application/src/components/schedule-incident/maintenance/form/config/StatusField.tsx b/application/src/components/schedule-incident/maintenance/form/config/StatusField.tsx
new file mode 100644
index 0000000..4b65785
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/form/config/StatusField.tsx
@@ -0,0 +1,56 @@
+
+import React from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { useFormContext } from 'react-hook-form';
+import { 
+  FormField, 
+  FormItem, 
+  FormLabel, 
+  FormControl, 
+  FormMessage,
+  FormDescription 
+} from '@/components/ui/form';
+import { 
+  Select, 
+  SelectContent, 
+  SelectItem, 
+  SelectTrigger, 
+  SelectValue 
+} from '@/components/ui/select';
+
+export const StatusField = () => {
+  const { t } = useLanguage();
+  const form = useFormContext();
+  
+  return (
+    <FormField
+      control={form.control}
+      name="status"
+      render={({ field }) => (
+        <FormItem>
+          <FormLabel>{t('status')}</FormLabel>
+          <Select 
+            onValueChange={field.onChange} 
+            defaultValue={field.value}
+          >
+            <FormControl>
+              <SelectTrigger>
+                <SelectValue placeholder={t('selectStatus')} />
+              </SelectTrigger>
+            </FormControl>
+            <SelectContent>
+              <SelectItem value="scheduled">{t('scheduled')}</SelectItem>
+              <SelectItem value="in_progress">{t('inProgress')}</SelectItem>
+              <SelectItem value="completed">{t('completed')}</SelectItem>
+              <SelectItem value="cancelled">{t('cancelled')}</SelectItem>
+            </SelectContent>
+          </Select>
+          <FormDescription>
+            {t('statusDescription')}
+          </FormDescription>
+          <FormMessage />
+        </FormItem>
+      )}
+    />
+  );
+};
diff --git a/application/src/components/schedule-incident/maintenance/form/config/index.ts b/application/src/components/schedule-incident/maintenance/form/config/index.ts
new file mode 100644
index 0000000..527ba25
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/form/config/index.ts
@@ -0,0 +1,5 @@
+
+export * from './PriorityField';
+export * from './StatusField';
+export * from './ImpactLevelField';
+export * from './AssignedUsersField';
diff --git a/application/src/components/schedule-incident/maintenance/form/index.ts b/application/src/components/schedule-incident/maintenance/form/index.ts
new file mode 100644
index 0000000..8d57b58
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/form/index.ts
@@ -0,0 +1,7 @@
+
+export * from './MaintenanceBasicFields';
+export * from './MaintenanceTimeFields';
+export * from './MaintenanceAffectedFields';
+export * from './MaintenanceConfigFields';
+export * from './MaintenanceNotificationSettingsField';
+export * from './config';
diff --git a/application/src/components/schedule-incident/maintenance/hooks/useMaintenanceEditForm.ts b/application/src/components/schedule-incident/maintenance/hooks/useMaintenanceEditForm.ts
new file mode 100644
index 0000000..3f42faa
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/hooks/useMaintenanceEditForm.ts
@@ -0,0 +1,201 @@
+
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useToast } from '@/hooks/use-toast';
+import { maintenanceService, MaintenanceItem } from '@/services/maintenance';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { maintenanceFormSchema, MaintenanceFormValues } from './useMaintenanceForm';
+
+export const useMaintenanceEditForm = (
+  maintenance: MaintenanceItem,
+  onSuccess: () => void,
+  onClose: () => void
+) => {
+  const { t } = useLanguage();
+  const { toast } = useToast();
+
+  // Parse assigned_users to ensure it's an array
+  const getAssignedUsers = (): string[] => {
+    console.log("Original assigned_users:", maintenance.assigned_users);
+    
+    if (!maintenance.assigned_users) {
+      console.log("No assigned users, returning empty array");
+      return [];
+    }
+    
+    if (Array.isArray(maintenance.assigned_users)) {
+      console.log("Assigned users is already an array:", maintenance.assigned_users);
+      return maintenance.assigned_users;
+    }
+    
+    if (typeof maintenance.assigned_users === 'string') {
+      // Try to parse as JSON first (for array stored as string)
+      try {
+        const parsedData = JSON.parse(maintenance.assigned_users);
+        if (Array.isArray(parsedData)) {
+          console.log("Parsed assigned_users from JSON string:", parsedData);
+          return parsedData;
+        } else if (typeof parsedData === 'string') {
+          // Handle nested JSON strings
+          try {
+            const nestedData = JSON.parse(parsedData);
+            if (Array.isArray(nestedData)) {
+              console.log("Parsed assigned_users from nested JSON string:", nestedData);
+              return nestedData;
+            }
+          } catch (e) {
+            // Not a nested JSON string, continue
+          }
+          
+          // Single ID in a JSON string
+          console.log("Using parsed string as single ID:", [parsedData]);
+          return [parsedData];
+        } else {
+          // Some other type, convert to string and use as single ID
+          return [String(parsedData)];
+        }
+      } catch (e) {
+        // Not JSON, try comma splitting
+        if (maintenance.assigned_users.includes(',')) {
+          const userArray = maintenance.assigned_users.split(',').map(id => id.trim()).filter(Boolean);
+          console.log("Converted comma-separated string to array:", userArray);
+          return userArray;
+        } else {
+          // Single ID as string
+          console.log("Using string as single ID:", [maintenance.assigned_users]);
+          return [maintenance.assigned_users];
+        }
+      }
+    }
+    
+    console.warn("Unable to parse assigned_users, returning empty array");
+    return [];
+  };
+
+  // Clean up user IDs by removing quotes, brackets, etc.
+  const cleanUserIds = (userIds: string[]): string[] => {
+    return userIds.map(id => {
+      // Remove surrounding quotes if present
+      let cleanId = id.replace(/^["']|["']$/g, '');
+      // Remove any remaining JSON artifacts
+      cleanId = cleanId.replace(/[\[\]"'\\]/g, '');
+      return cleanId;
+    }).filter(Boolean);
+  };
+
+  // Get notification channel ID (from either notification_channel_id or notification_id)
+  const getNotificationChannelId = (): string => {
+    console.log("Getting notification channel ID from:", {
+      notification_channel_id: maintenance.notification_channel_id,
+      notification_id: maintenance.notification_id,
+      notify_subscribers: maintenance.notify_subscribers
+    });
+    
+    // Try notification_channel_id first
+    if (maintenance.notification_channel_id) {
+      console.log("Using notification_channel_id:", maintenance.notification_channel_id);
+      return maintenance.notification_channel_id;
+    } 
+    // Fall back to notification_id if notifications are enabled
+    else if (maintenance.notification_id && maintenance.notify_subscribers === 'yes') {
+      console.log("Using notification_id:", maintenance.notification_id);
+      return maintenance.notification_id;
+    }
+    
+    console.log("No notification channel ID found");
+    return '';
+  };
+
+  // Initialize form with existing maintenance data
+  const form = useForm<MaintenanceFormValues>({
+    resolver: zodResolver(maintenanceFormSchema),
+    defaultValues: {
+      title: maintenance.title || '',
+      description: maintenance.description || '',
+      start_time: maintenance.start_time ? new Date(maintenance.start_time) : new Date(),
+      end_time: maintenance.end_time ? new Date(maintenance.end_time) : new Date(),
+      affected: maintenance.affected || '',
+      priority: (maintenance.priority?.toLowerCase() || 'medium') as any,
+      status: (maintenance.status?.toLowerCase() || 'scheduled') as any,
+      field: (maintenance.field?.toLowerCase() || 'minor') as any,
+      assigned_users: cleanUserIds(getAssignedUsers()),
+      notify_subscribers: maintenance.notify_subscribers === 'yes',
+      notification_channel_id: getNotificationChannelId(),
+    },
+  });
+
+  const onSubmit = async (data: MaintenanceFormValues) => {
+    try {
+      console.log("Form data before submission:", data);
+      console.log("Assigned users to be submitted:", data.assigned_users);
+      console.log("Notification channel to be submitted:", data.notification_channel_id);
+      
+      // Verify dates are valid
+      if (!data.start_time || isNaN(data.start_time.getTime())) {
+        throw new Error("Invalid start time");
+      }
+      
+      if (!data.end_time || isNaN(data.end_time.getTime())) {
+        throw new Error("Invalid end time");
+      }
+      
+      // Format the update payload
+      const updateData = {
+        title: data.title,
+        description: data.description,
+        start_time: data.start_time.toISOString(),
+        end_time: data.end_time.toISOString(),
+        affected: data.affected,
+        priority: data.priority,
+        status: data.status,
+        field: data.field,
+        assigned_users: data.assigned_users || [], // Send as array
+        notify_subscribers: data.notify_subscribers ? 'yes' : 'no',
+        notification_channel_id: data.notify_subscribers && data.notification_channel_id && data.notification_channel_id !== 'none' 
+          ? data.notification_channel_id 
+          : '',
+        // Set notification_id to match notification_channel_id when notifications are enabled
+        notification_id: data.notify_subscribers && data.notification_channel_id && data.notification_channel_id !== 'none'
+          ? data.notification_channel_id
+          : '',
+      };
+      
+      console.log("Updating maintenance with data:", updateData);
+      console.log("Assigned users being sent for update:", updateData.assigned_users);
+      console.log("Notification channel being sent for update:", updateData.notification_channel_id);
+      console.log("Notification ID being sent for update:", updateData.notification_id);
+
+      // Update the maintenance record using our service function
+      await maintenanceService.updateMaintenance(maintenance.id, updateData);
+      
+      toast({
+        title: t('maintenanceUpdated'),
+        description: t('maintenanceUpdatedDesc'),
+      });
+      
+      onClose();
+      onSuccess();
+    } catch (error) {
+      console.error('Error updating maintenance:', error);
+      
+      if (error instanceof Error) {
+        toast({
+          title: t('error'),
+          description: `${t('errorUpdatingMaintenance')}: ${error.message}`,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: t('error'),
+          description: t('errorUpdatingMaintenance'),
+          variant: 'destructive',
+        });
+      }
+    }
+  };
+
+  return {
+    form,
+    onSubmit,
+  };
+};
diff --git a/application/src/components/schedule-incident/maintenance/hooks/useMaintenanceForm.ts b/application/src/components/schedule-incident/maintenance/hooks/useMaintenanceForm.ts
new file mode 100644
index 0000000..d72b148
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/hooks/useMaintenanceForm.ts
@@ -0,0 +1,133 @@
+
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { z } from 'zod';
+import { useToast } from '@/hooks/use-toast';
+import { maintenanceService } from '@/services/maintenance';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { authService } from '@/services/authService';
+
+// Define form schema with Zod
+export const maintenanceFormSchema = z.object({
+  title: z.string().min(3, { message: "Title must be at least 3 characters" }),
+  description: z.string().min(10, { message: "Description must be at least 10 characters" }),
+  start_time: z.date(),
+  end_time: z.date(),
+  affected: z.string().min(3, { message: "Affected services must be specified" }),
+  priority: z.enum(['low', 'medium', 'high']),
+  status: z.enum(['scheduled', 'in_progress', 'completed', 'cancelled']),
+  field: z.enum(['minor', 'moderate', 'major']),
+  assigned_users: z.array(z.string()).default([]),
+  notify_subscribers: z.boolean().default(false),
+  notification_channel_id: z.string().optional(),
+});
+
+// Infer TypeScript type from schema
+export type MaintenanceFormValues = z.infer<typeof maintenanceFormSchema>;
+
+export const useMaintenanceForm = (
+  onSuccess: () => void,
+  onClose: () => void
+) => {
+  const { t } = useLanguage();
+  const { toast } = useToast();
+  
+  // Get current user
+  const currentUser = authService.getCurrentUser();
+
+  // Initialize form with default values
+  const form = useForm<MaintenanceFormValues>({
+    resolver: zodResolver(maintenanceFormSchema),
+    defaultValues: {
+      title: '',
+      description: '',
+      start_time: new Date(),
+      end_time: new Date(Date.now() + 3600000), // 1 hour from now
+      affected: '',
+      priority: 'medium',
+      status: 'scheduled',
+      field: 'minor',
+      assigned_users: [],
+      notify_subscribers: false,
+      notification_channel_id: '',
+    },
+  });
+
+  const onSubmit = async (data: MaintenanceFormValues) => {
+    try {
+      console.log("Form data before submission:", data);
+      console.log("Assigned users before submission:", data.assigned_users);
+      console.log("Notification channel before submission:", data.notification_channel_id);
+      
+      // Verify dates are valid
+      if (!data.start_time || isNaN(data.start_time.getTime())) {
+        throw new Error("Invalid start time");
+      }
+      
+      if (!data.end_time || isNaN(data.end_time.getTime())) {
+        throw new Error("Invalid end time");
+      }
+      
+      // Format the submission payload
+      const formattedData = {
+        title: data.title,
+        description: data.description,
+        start_time: data.start_time.toISOString(),
+        end_time: data.end_time.toISOString(),
+        affected: data.affected,
+        priority: data.priority,
+        status: data.status,
+        field: data.field,
+        created_by: currentUser?.id || '',
+        // Ensure assigned_users is properly formatted as an array
+        assigned_users: Array.isArray(data.assigned_users) ? data.assigned_users : [],
+        notify_subscribers: data.notify_subscribers ? 'yes' : 'no',
+        // Set notification_channel_id correctly - avoid "none" value
+        notification_channel_id: data.notify_subscribers && data.notification_channel_id && data.notification_channel_id !== 'none' 
+          ? data.notification_channel_id 
+          : '',
+        // Set notification_id to match notification_channel_id for consistency
+        notification_id: data.notify_subscribers && data.notification_channel_id && data.notification_channel_id !== 'none'
+          ? data.notification_channel_id
+          : '',
+      };
+      
+      console.log("Submitting maintenance with data:", formattedData);
+      console.log("Assigned users being sent:", formattedData.assigned_users);
+      console.log("Notification channel being sent:", formattedData.notification_channel_id);
+      console.log("Notification ID being sent:", formattedData.notification_id);
+
+      // Create the maintenance record
+      await maintenanceService.createMaintenance(formattedData);
+      
+      toast({
+        title: t('maintenanceCreated'),
+        description: t('maintenanceCreatedDesc'),
+      });
+      
+      onClose();
+      onSuccess();
+    } catch (error) {
+      console.error('Error creating maintenance:', error);
+      
+      if (error instanceof Error) {
+        toast({
+          title: t('error'),
+          description: `${t('errorCreatingMaintenance')}: ${error.message}`,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: t('error'),
+          description: t('errorCreatingMaintenance'),
+          variant: 'destructive',
+        });
+      }
+    }
+  };
+
+  return {
+    form,
+    onSubmit,
+  };
+};
diff --git a/application/src/components/schedule-incident/maintenance/index.ts b/application/src/components/schedule-incident/maintenance/index.ts
new file mode 100644
index 0000000..a8fd930
--- /dev/null
+++ b/application/src/components/schedule-incident/maintenance/index.ts
@@ -0,0 +1,11 @@
+
+// Export all maintenance components
+export * from './MaintenanceTable';
+export * from './MaintenanceStatusBadge';
+export * from './MaintenanceActionsMenu';
+export * from './EmptyMaintenanceState';
+export * from './CreateMaintenanceDialog';
+export * from './MaintenanceStatusDropdown';
+export * from './MaintenanceStatusChecker';
+export * from './detail-dialog';
+
diff --git a/application/src/services/maintenance/api/index.ts b/application/src/services/maintenance/api/index.ts
new file mode 100644
index 0000000..0997d32
--- /dev/null
+++ b/application/src/services/maintenance/api/index.ts
@@ -0,0 +1,10 @@
+
+// Re-export all maintenance API functions from their respective modules
+export { clearCache as clearMaintenanceCache } from './maintenanceCache';
+export { fetchAllMaintenanceRecords } from './maintenanceFetch';
+export { 
+  updateMaintenanceStatus,
+  updateMaintenance,
+  deleteMaintenance,
+  createMaintenance
+} from './maintenanceOperations';
diff --git a/application/src/services/maintenance/api/maintenanceCache.ts b/application/src/services/maintenance/api/maintenanceCache.ts
new file mode 100644
index 0000000..bfbe0a6
--- /dev/null
+++ b/application/src/services/maintenance/api/maintenanceCache.ts
@@ -0,0 +1,46 @@
+
+import { MaintenanceItem } from '../../types/maintenance.types';
+
+// Cache management for maintenance records
+
+// Cache for maintenance records
+let cachedMaintenanceRecords: MaintenanceItem[] | null = null;
+let lastFetchTimestamp = 0;
+const CACHE_EXPIRY_MS = 60000; // 1 minute cache expiry
+
+/**
+ * Check if cache is valid and can be used
+ */
+export const isCacheValid = (): boolean => {
+  const now = Date.now();
+  return !!(cachedMaintenanceRecords && now - lastFetchTimestamp < CACHE_EXPIRY_MS);
+};
+
+/**
+ * Get cached maintenance records if available
+ */
+export const getCachedRecords = () => {
+  if (cachedMaintenanceRecords) {
+    console.log("Using cached maintenance records", cachedMaintenanceRecords.length);
+    return [...cachedMaintenanceRecords]; // Return a copy to prevent mutation
+  }
+  return null;
+};
+
+/**
+ * Update cache with new data
+ */
+export const updateCache = (data: MaintenanceItem[], timestamp?: number): void => {
+  cachedMaintenanceRecords = data;
+  lastFetchTimestamp = timestamp || Date.now();
+  console.log("Maintenance cache updated with", data.length, "records");
+};
+
+/**
+ * Clear cache to force refresh
+ */
+export const clearCache = (): void => {
+  cachedMaintenanceRecords = null;
+  lastFetchTimestamp = 0;
+  console.log("Maintenance cache cleared");
+};
diff --git a/application/src/services/maintenance/api/maintenanceFetch.ts b/application/src/services/maintenance/api/maintenanceFetch.ts
new file mode 100644
index 0000000..cd20a22
--- /dev/null
+++ b/application/src/services/maintenance/api/maintenanceFetch.ts
@@ -0,0 +1,59 @@
+
+import { pb } from '@/lib/pocketbase';
+import { MaintenanceItem } from '../../types/maintenance.types';
+import { normalizeMaintenanceItem } from '../maintenanceUtils';
+import { isCacheValid, getCachedRecords, updateCache } from './maintenanceCache';
+
+/**
+ * Get all maintenance records from the API with optimized caching
+ */
+export const fetchAllMaintenanceRecords = async (forceRefresh = false): Promise<MaintenanceItem[]> => {
+  try {
+    const now = Date.now();
+    
+    // Return cached data if available and not forced refresh
+    if (!forceRefresh && isCacheValid()) {
+      return getCachedRecords() as MaintenanceItem[];
+    }
+    
+    // Use a unique requestKey to prevent caching issues
+    const timestamp = now;
+    
+    // Increase items per page and use fields parameter to fetch only needed data
+    // Also expand the assigned_users relation to get user details
+    const result = await pb.collection('maintenance').getList(1, 200, {
+      sort: '-created',
+      requestKey: `maintenance-${timestamp}`,
+      $cancelKey: `maintenance-fetch-${timestamp}`,
+      expand: 'assigned_users', // Expand the relation to get user details
+    });
+    
+    if (!result || !result.items || result.items.length === 0) {
+      const emptyData: MaintenanceItem[] = [];
+      updateCache(emptyData, now);
+      return emptyData;
+    }
+    
+    // Process and normalize data
+    const normalizedData = result.items.map(item => {
+      console.log("Processing maintenance item:", item.id);
+      console.log("Item assigned_users:", item.assigned_users);
+      console.log("Notification channel:", item.notification_channel_id);
+      return normalizeMaintenanceItem(item);
+    });
+    
+    // Update cache
+    updateCache(normalizedData, now);
+    
+    return normalizedData;
+  } catch (error) {
+    // Handle abort errors gracefully without console errors
+    if ((error as any)?.isAbort) {
+      console.log("Request aborted:", error);
+      return getCachedRecords() || [];
+    }
+    
+    console.error('Error fetching maintenance records:', error);
+    return getCachedRecords() || [];
+  }
+};
diff --git a/application/src/services/maintenance/api/maintenanceOperations.ts b/application/src/services/maintenance/api/maintenanceOperations.ts
new file mode 100644
index 0000000..3ec0287
--- /dev/null
+++ b/application/src/services/maintenance/api/maintenanceOperations.ts
@@ -0,0 +1,85 @@
+
+import { pb } from '@/lib/pocketbase';
+import { MaintenanceItem, CreateMaintenanceInput } from '../../types/maintenance.types';
+import { clearCache } from './maintenanceCache';
+
+/**
+ * Update the status of a maintenance record
+ */
+export const updateMaintenanceStatus = async (id: string, status: string): Promise<void> => {
+  try {
+    await pb.collection('maintenance').update(id, { status });
+    clearCache();
+  } catch (error) {
+    console.error('Error updating maintenance status:', error);
+    throw error;
+  }
+};
+
+/**
+ * Update a maintenance record with partial data
+ */
+export const updateMaintenance = async (id: string, data: Partial<MaintenanceItem>): Promise<void> => {
+  try {
+    // Format assigned_users for storage
+    const formattedData = { ...data };
+    
+    // Ensure assigned_users is stored in a consistent format (JSON string)
+    if (formattedData.assigned_users) {
+      if (Array.isArray(formattedData.assigned_users)) {
+        formattedData.assigned_users = JSON.stringify(formattedData.assigned_users);
+      }
+    }
+    
+    console.log("Updating maintenance record with formatted data:", formattedData);
+    
+    await pb.collection('maintenance').update(id, formattedData);
+    clearCache();
+  } catch (error) {
+    console.error('Error updating maintenance:', error);
+    throw error;
+  }
+};
+
+/**
+ * Delete a maintenance record
+ */
+export const deleteMaintenance = async (id: string): Promise<void> => {
+  try {
+    await pb.collection('maintenance').delete(id);
+    clearCache();
+  } catch (error) {
+    console.error('Error deleting maintenance:', error);
+    throw error;
+  }
+};
+
+/**
+ * Create a new maintenance record
+ */
+export const createMaintenance = async (data: CreateMaintenanceInput): Promise<void> => {
+  try {
+    // Format data for submission
+    const formattedData = { ...data };
+    
+    // Ensure assigned_users is stored in a consistent format (JSON string)
+    if (formattedData.assigned_users) {
+      if (Array.isArray(formattedData.assigned_users)) {
+        formattedData.assigned_users = JSON.stringify(formattedData.assigned_users);
+      }
+    }
+    
+    // Ensure notification_id is set from notification_channel_id if not already present
+    if (formattedData.notification_channel_id && !formattedData.notification_id) {
+      formattedData.notification_id = formattedData.notification_channel_id;
+    }
+    
+    console.log("Creating maintenance record with formatted data:", formattedData);
+    
+    await pb.collection('maintenance').create(formattedData);
+    clearCache();
+  } catch (error) {
+    console.error('Error creating maintenance:', error);
+    throw error;
+  }
+};
diff --git a/application/src/services/maintenance/api/maintenanceValidation.ts b/application/src/services/maintenance/api/maintenanceValidation.ts
new file mode 100644
index 0000000..57f8e0e
--- /dev/null
+++ b/application/src/services/maintenance/api/maintenanceValidation.ts
@@ -0,0 +1,68 @@
+
+/**
+ * Validation utilities for maintenance data
+ */
+
+/**
+ * Validate status value to ensure it's one of the acceptable values
+ */
+export const validateStatus = (status: string): string => {
+  // Convert to lowercase and replace spaces with underscore for consistency
+  const formattedStatus = status.toLowerCase().replace(' ', '_');
+  
+  // Check if the status is one of the allowed values
+  const allowedStatuses = ['scheduled', 'in_progress', 'completed', 'cancelled'];
+  
+  if (!allowedStatuses.includes(formattedStatus)) {
+    console.warn(`Invalid status value: ${formattedStatus}. Using 'scheduled' as fallback.`);
+    return 'scheduled';
+  }
+  
+  return formattedStatus;
+};
+
+/**
+ * Ensure assigned_users is properly formatted
+ */
+export const formatAssignedUsers = (assignedUsers: unknown): string => {
+  // If it's already a JSON string, return it
+  if (typeof assignedUsers === 'string' && (assignedUsers.startsWith('[') || assignedUsers === '')) {
+    return assignedUsers;
+  }
+  
+  // If it's an array, stringify it
+  if (Array.isArray(assignedUsers)) {
+    return JSON.stringify(assignedUsers);
+  }
+  
+  // If it's a string but not JSON, convert it to array then stringify
+  if (typeof assignedUsers === 'string') {
+    const userArray = assignedUsers.trim() !== '' 
+      ? assignedUsers.split(',').map(id => id.trim())
+      : [];
+    return JSON.stringify(userArray);
+  }
+  
+  // Default to empty array
+  return '[]';
+};
+
+/**
+ * Process notification settings consistently
+ */
+export const processNotificationSettings = (
+  notifySubscribers: string, 
+  channelId?: string
+): { notification_channel_id: string, notification_id: string } => {
+  if (notifySubscribers !== 'yes' || !channelId) {
+    return {
+      notification_channel_id: '',
+      notification_id: ''
+    };
+  }
+  
+  return {
+    notification_channel_id: channelId,
+    notification_id: channelId  // Set notification_id to match notification_channel_id
+  };
+};
diff --git a/application/src/services/maintenance/index.ts b/application/src/services/maintenance/index.ts
new file mode 100644
index 0000000..3448f16
--- /dev/null
+++ b/application/src/services/maintenance/index.ts
@@ -0,0 +1,15 @@
+
+export * from './maintenanceService';
+// Export maintenance API functions from the new structure
+export { 
+  fetchAllMaintenanceRecords, 
+  updateMaintenanceStatus, 
+  updateMaintenance, 
+  deleteMaintenance, 
+  createMaintenance, 
+  clearMaintenanceCache 
+} from './api';
+// Export everything from maintenanceUtils
+export * from './maintenanceUtils';
+export * from './pdf';
+export * from '../types/maintenance.types';
diff --git a/application/src/services/maintenance/maintenanceNotificationService.ts b/application/src/services/maintenance/maintenanceNotificationService.ts
new file mode 100644
index 0000000..75e77cc
--- /dev/null
+++ b/application/src/services/maintenance/maintenanceNotificationService.ts
@@ -0,0 +1,199 @@
+
+import { MaintenanceItem } from '../types/maintenance.types';
+import { alertConfigService, AlertConfiguration } from '../alertConfigService';
+import { sendTelegramNotification } from '../notification/telegramService';
+import { pb } from '@/lib/pocketbase';
+import { formatDistanceToNow } from 'date-fns';
+
+interface NotificationParams {
+  maintenance: MaintenanceItem;
+  notificationType: 'start' | 'end' | 'update';
+}
+
+export const maintenanceNotificationService = {
+  /**
+   * Send notification for maintenance events
+   */
+  async sendMaintenanceNotification({ maintenance, notificationType }: NotificationParams): Promise<boolean> {
+    try {
+      console.log(`Preparing to send ${notificationType} notification for maintenance: ${maintenance.title}`);
+      
+      // Get notification channel ID - try both fields
+      let notificationChannelId = maintenance.notification_channel_id;
+      
+      // If notification_channel_id is empty, try to use notification_id
+      if (!notificationChannelId && maintenance.notification_id) {
+        console.log(`No notification_channel_id found, using notification_id: ${maintenance.notification_id}`);
+        notificationChannelId = maintenance.notification_id;
+      }
+      
+      // Check if maintenance has notification channel configured
+      if (!notificationChannelId) {
+        console.log("No notification channel configured for this maintenance");
+        return false;
+      }
+      
+      console.log(`Using notification channel ID: ${notificationChannelId}`);
+      
+      // Get notification channel configuration
+      let notificationConfig: AlertConfiguration;
+      try {
+        const config = await pb.collection('alert_configurations').getOne(notificationChannelId);
+        notificationConfig = config as unknown as AlertConfiguration;
+      } catch (error) {
+        console.error("Failed to fetch notification configuration:", error);
+        return false;
+      }
+      
+      if (!notificationConfig.enabled) {
+        console.log("Notification channel is disabled");
+        return false;
+      }
+      
+      // Create notification message based on type
+      const message = this.generateMaintenanceMessage(maintenance, notificationType);
+      
+      console.log(`Sending ${notificationConfig.notification_type} notification with message: ${message}`);
+      
+      // Send notification based on channel type
+      if (notificationConfig.notification_type === 'telegram') {
+        return await sendTelegramNotification(notificationConfig, message);
+      }
+      
+      // Add more notification types here as needed
+      
+      console.log(`Unsupported notification type: ${notificationConfig.notification_type}`);
+      return false;
+    } catch (error) {
+      console.error("Error sending maintenance notification:", error);
+      return false;
+    }
+  },
+  
+  /**
+   * Generate message for maintenance notification
+   */
+  generateMaintenanceMessage(maintenance: MaintenanceItem, type: 'start' | 'end' | 'update'): string {
+    const startDate = new Date(maintenance.start_time);
+    const endDate = new Date(maintenance.end_time);
+    const duration = formatDistanceToNow(endDate, { addSuffix: false });
+    const affectedServices = maintenance.affected.split(',').map(s => s.trim()).join(', ');
+    
+    let emoji = '🔧';
+    let statusText = '';
+    let timeText = '';
+    
+    switch (type) {
+      case 'start':
+        emoji = '⚠️';
+        statusText = 'has started';
+        timeText = `Estimated duration: ${duration}`;
+        break;
+      case 'end':
+        emoji = '✅';
+        statusText = 'has completed';
+        timeText = 'All systems are back to normal operation';
+        break;
+      case 'update':
+        emoji = '🔄';
+        statusText = 'has been updated';
+        timeText = `Scheduled for ${startDate.toLocaleString()} to ${endDate.toLocaleString()}`;
+        break;
+    }
+    
+    return `${emoji} <b>Maintenance ${statusText}</b>
+
+<b>Title:</b> ${maintenance.title}
+<b>Description:</b> ${maintenance.description}
+<b>Affected Services:</b> ${affectedServices}
+<b>${timeText}</b>
+
+<b>Priority:</b> ${maintenance.priority.toUpperCase()}
+<b>Impact:</b> ${maintenance.field.toUpperCase()}`;
+  }
+};
+
+// Set up scheduled maintenance notifications
+export const setupMaintenanceNotificationsScheduler = () => {
+  console.log("Setting up maintenance notifications scheduler");
+  
+  // Check every minute for maintenance that needs notifications
+  const checkInterval = setInterval(async () => {
+    try {
+      console.log("Checking for maintenance notifications to send...");
+      const now = new Date();
+      
+      // Fetch upcoming and ongoing maintenance
+      const records = await pb.collection('maintenance').getList(1, 100, {
+        filter: `status = 'scheduled' || status = 'in_progress'`,
+      });
+      
+      if (!records || !records.items || records.items.length === 0) {
+        return;
+      }
+      
+      // Check each maintenance record
+      for (const record of records.items) {
+        const maintenance = record as unknown as MaintenanceItem;
+        const startTime = new Date(maintenance.start_time);
+        const endTime = new Date(maintenance.end_time);
+        
+        // If maintenance is scheduled to start within the next minute or has just started
+        if (maintenance.status === 'scheduled' && 
+            startTime <= new Date(now.getTime() + 60000) && 
+            startTime > new Date(now.getTime() - 60000)) {
+          
+          console.log(`Maintenance ${maintenance.title} is starting now, sending notification`);
+          await maintenanceNotificationService.sendMaintenanceNotification({
+            maintenance,
+            notificationType: 'start'
+          });
+          
+          // Update status to in_progress
+          await pb.collection('maintenance').update(maintenance.id, {
+            status: 'in_progress'
+          });
+        }
+        
+        // If maintenance is in progress and scheduled to end within the next minute or has just ended
+        if (maintenance.status === 'in_progress' && 
+            endTime <= new Date(now.getTime() + 60000) && 
+            endTime > new Date(now.getTime() - 60000)) {
+          
+          console.log(`Maintenance ${maintenance.title} is ending now, sending notification`);
+          await maintenanceNotificationService.sendMaintenanceNotification({
+            maintenance,
+            notificationType: 'end'
+          });
+          
+          // Update status to completed
+          await pb.collection('maintenance').update(maintenance.id, {
+            status: 'completed'
+          });
+        }
+      }
+    } catch (error) {
+      console.error("Error checking maintenance notifications:", error);
+    }
+  }, 60000); // Check every minute
+  
+  return checkInterval;
+};
+
+// Initialize the notification scheduler
+let notificationScheduler: NodeJS.Timeout | null = null;
+
+export const initMaintenanceNotifications = () => {
+  if (notificationScheduler === null) {
+    notificationScheduler = setupMaintenanceNotificationsScheduler();
+    console.log("Maintenance notifications scheduler initialized");
+  }
+};
+
+export const stopMaintenanceNotifications = () => {
+  if (notificationScheduler !== null) {
+    clearInterval(notificationScheduler);
+    notificationScheduler = null;
+    console.log("Maintenance notifications scheduler stopped");
+  }
+};
diff --git a/application/src/services/maintenance/maintenanceService.ts b/application/src/services/maintenance/maintenanceService.ts
new file mode 100644
index 0000000..5a8ffe3
--- /dev/null
+++ b/application/src/services/maintenance/maintenanceService.ts
@@ -0,0 +1,92 @@
+
+import { getCurrentEndpoint } from '@/lib/pocketbase';
+import { MaintenanceItem, CreateMaintenanceInput } from '../types/maintenance.types';
+import { categorizeMaintenance } from './maintenanceUtils';
+import { 
+  fetchAllMaintenanceRecords, 
+  updateMaintenanceStatus,
+  updateMaintenance,
+  deleteMaintenance,
+  createMaintenance as createMaintenanceRecord,
+  clearMaintenanceCache
+} from './api';
+
+// Helper function to get the API URL
+const getApiUrl = (): string => {
+  return getCurrentEndpoint();
+};
+
+// Get all maintenance records with performance optimizations
+const getMaintenanceRecords = async (): Promise<MaintenanceItem[]> => {
+  return await fetchAllMaintenanceRecords();
+};
+
+// Get upcoming maintenance with caching
+const getUpcomingMaintenance = async (): Promise<MaintenanceItem[]> => {
+  try {
+    const allRecords = await getMaintenanceRecords();
+    const { upcoming } = categorizeMaintenance(allRecords);
+    return upcoming;
+  } catch (error) {
+    console.error('Error fetching upcoming maintenance:', error);
+    return [];
+  }
+};
+
+// Get ongoing maintenance with caching
+const getOngoingMaintenance = async (): Promise<MaintenanceItem[]> => {
+  try {
+    const allRecords = await getMaintenanceRecords();
+    const { ongoing } = categorizeMaintenance(allRecords);
+    return ongoing;
+  } catch (error) {
+    console.error('Error fetching ongoing maintenance:', error);
+    return [];
+  }
+};
+
+// Get completed maintenance with caching
+const getCompletedMaintenance = async (): Promise<MaintenanceItem[]> => {
+  try {
+    const allRecords = await getMaintenanceRecords();
+    const { completed } = categorizeMaintenance(allRecords);
+    return completed;
+  } catch (error) {
+    console.error('Error fetching completed maintenance:', error);
+    return [];
+  }
+};
+
+// Create a new maintenance record
+const createMaintenance = async (data: CreateMaintenanceInput): Promise<void> => {
+  await createMaintenanceRecord(data);
+  clearMaintenanceCache(); // Force cache refresh after creation
+};
+
+// Update an existing maintenance record
+const updateMaintenanceRecord = async (id: string, data: Partial<MaintenanceItem>): Promise<void> => {
+  await updateMaintenance(id, data);
+  clearMaintenanceCache(); // Force cache refresh after update
+};
+
+// Refresh cache manually
+const refreshMaintenanceData = (): void => {
+  clearMaintenanceCache();
+};
+
+// Export all functions as the maintenanceService object
+export const maintenanceService = {
+  getApiUrl,
+  getMaintenanceRecords,
+  getUpcomingMaintenance,
+  getOngoingMaintenance,
+  getCompletedMaintenance,
+  updateMaintenanceStatus,
+  updateMaintenance: updateMaintenanceRecord,
+  deleteMaintenance,
+  createMaintenance,
+  refreshMaintenanceData
+};
+
+// Re-export types for convenience
+export type { MaintenanceItem, CreateMaintenanceInput };
diff --git a/application/src/services/maintenance/maintenanceUtils.ts b/application/src/services/maintenance/maintenanceUtils.ts
new file mode 100644
index 0000000..18969e7
--- /dev/null
+++ b/application/src/services/maintenance/maintenanceUtils.ts
@@ -0,0 +1,125 @@
+
+import { MaintenanceItem } from '../types/maintenance.types';
+
+// Normalize maintenance item data from PocketBase to our expected format
+export const normalizeMaintenanceItem = (item: any): MaintenanceItem => {
+  // Log the item to help debug
+  console.log(`Normalizing maintenance item ${item.id}, assigned_users:`, item.assigned_users);
+  
+  // Handle assigned_users, ensuring it's always an array
+  let assignedUsers: string[] = [];
+  
+  if (item.assigned_users) {
+    if (Array.isArray(item.assigned_users)) {
+      // If it's already an array, use it
+      assignedUsers = item.assigned_users;
+      console.log(`Maintenance ${item.id} assigned_users is an array:`, assignedUsers);
+    } else if (typeof item.assigned_users === 'string' && item.assigned_users.trim() !== '') {
+      // If it's a string, split it by comma
+      assignedUsers = item.assigned_users.split(',').filter((id: string) => id.trim() !== '').map((id: string) => id.trim());
+      console.log(`Maintenance ${item.id} converted assigned_users string to array:`, assignedUsers);
+    }
+  }
+  
+  // Include expand data if available
+  const expandData = item.expand ? {
+    expand: {
+      ...item.expand
+    }
+  } : {};
+
+  return {
+    id: item.id,
+    title: item.title || '',
+    description: item.description || '',
+    start_time: item.start_time || '',
+    end_time: item.end_time || '',
+    affected: item.affected || '',
+    priority: item.priority || 'medium',
+    status: item.status || 'scheduled',
+    field: item.field || 'minor',
+    created_by: item.created_by || '',
+    assigned_users: assignedUsers,
+    notify_subscribers: item.notify_subscribers || 'no',
+    notification_channel_id: item.notification_channel_id || '',
+    notification_id: item.notification_id || '',
+    operational_status_id: item.operational_status_id || '',
+    created: item.created || '',
+    updated: item.updated || '',
+    ...expandData
+  };
+};
+
+// Utility function to convert maintenance status to display format
+export const formatMaintenanceStatus = (status: string): string => {
+  if (!status) return 'Unknown';
+  
+  // Convert to lowercase and replace underscores with spaces
+  const formattedStatus = status.toLowerCase().replace('_', ' ');
+  
+  // Capitalize first letter
+  return formattedStatus.charAt(0).toUpperCase() + formattedStatus.slice(1);
+};
+
+// Get appropriate color class based on status
+export const getStatusColorClass = (status: string): string => {
+  const statusLower = status?.toLowerCase() || '';
+  
+  switch (statusLower) {
+    case 'scheduled':
+      return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300';
+    case 'in_progress':
+    case 'in progress':
+      return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300';
+    case 'completed':
+      return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300';
+    case 'cancelled':
+      return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300';
+    default:
+      return 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300';
+  }
+};
+
+// Get appropriate badge variant based on priority
+export const getPriorityVariant = (priority: string): 'default' | 'destructive' | 'outline' | 'secondary' => {
+  const priorityLower = priority?.toLowerCase() || '';
+  
+  switch (priorityLower) {
+    case 'high':
+      return 'destructive';
+    case 'medium':
+      return 'default';
+    case 'low':
+      return 'secondary';
+    default:
+      return 'outline';
+  }
+};
+
+// Categorize maintenance records into upcoming, ongoing, and completed
+export const categorizeMaintenance = (maintenanceRecords: MaintenanceItem[]) => {
+  const currentDate = new Date();
+  const upcoming: MaintenanceItem[] = [];
+  const ongoing: MaintenanceItem[] = [];
+  const completed: MaintenanceItem[] = [];
+  
+  maintenanceRecords.forEach(item => {
+    const status = item.status?.toLowerCase() || '';
+    const startTime = new Date(item.start_time);
+    const endTime = new Date(item.end_time);
+    
+    if (status === 'completed' || status === 'cancelled') {
+      completed.push(item);
+    } else if (status === 'in_progress' || 
+              (status === 'scheduled' && startTime <= currentDate && endTime >= currentDate)) {
+      ongoing.push(item);
+    } else if (status === 'scheduled' && startTime > currentDate) {
+      upcoming.push(item);
+    } else {
+      // Default case: treat as upcoming if we can't determine
+      upcoming.push(item);
+    }
+  });
+  
+  return { upcoming, ongoing, completed };
+};
diff --git a/application/src/services/maintenance/pdf/generator.ts b/application/src/services/maintenance/pdf/generator.ts
new file mode 100644
index 0000000..6ef4fef
--- /dev/null
+++ b/application/src/services/maintenance/pdf/generator.ts
@@ -0,0 +1,91 @@
+
+import jsPDF from 'jspdf';
+import 'jspdf-autotable'; 
+import { format } from 'date-fns';
+import { MaintenanceItem } from '../../types/maintenance.types';
+import { addHeader, addFooter } from './headerFooter';
+import { 
+  addDescriptionSection, 
+  addScheduleSection, 
+  addAffectedServicesSection, 
+  addPersonnelSection 
+} from './sections';
+
+// Function to generate a professional PDF from maintenance record
+export const generatePdf = async (maintenance: MaintenanceItem): Promise<string> => {
+  try {
+    // Validate maintenance data
+    if (!maintenance?.id) {
+      console.error('Invalid maintenance data for PDF generation');
+      throw new Error('Invalid maintenance data');
+    }
+    
+    // Create a new PDF document
+    const doc = new jsPDF({
+      orientation: 'portrait',
+      unit: 'mm',
+      format: 'a4'
+    });
+    
+    // Add header with title and metadata
+    addHeader(doc, maintenance);
+    
+    // Start rendering content from this position
+    let yPos = 55;
+    
+    // Add description section
+    yPos = addDescriptionSection(doc, maintenance, yPos);
+    
+    // Check if we need to add a new page
+    if (yPos > 250) {
+      doc.addPage();
+      yPos = 20;
+    }
+    
+    // Add schedule information
+    yPos = addScheduleSection(doc, maintenance, yPos);
+    
+    // Check if we need to add a new page
+    if (yPos > 250) {
+      doc.addPage();
+      yPos = 20;
+    }
+    
+    // Add affected services section
+    yPos = addAffectedServicesSection(doc, maintenance, yPos);
+    
+    // Check if we need to add a new page
+    if (yPos > 250) {
+      doc.addPage();
+      yPos = 20;
+    }
+    
+    // Add personnel information section
+    addPersonnelSection(doc, maintenance, yPos);
+    
+    // Add footer to all pages
+    addFooter(doc);
+    
+    // Generate filename
+    const fileName = `maintenance-${maintenance.id}-${format(new Date(), 'yyyy-MM-dd')}.pdf`;
+    
+    // Create blob and URL for download
+    const pdfOutput = doc.output('blob');
+    const blobUrl = URL.createObjectURL(new Blob([pdfOutput], { type: 'application/pdf' }));
+    
+    // Trigger download using a technique that works in most browsers
+    const downloadLink = document.createElement('a');
+    downloadLink.href = blobUrl;
+    downloadLink.download = fileName;
+    downloadLink.style.display = 'none';
+    document.body.appendChild(downloadLink);
+    downloadLink.click();
+    document.body.removeChild(downloadLink);
+    
+    console.log('PDF generated successfully:', fileName);
+    return fileName;
+  } catch (error) {
+    console.error('Error generating maintenance PDF:', error);
+    throw new Error(`Failed to generate PDF: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+};
diff --git a/application/src/services/maintenance/pdf/headerFooter.ts b/application/src/services/maintenance/pdf/headerFooter.ts
new file mode 100644
index 0000000..a72f0a0
--- /dev/null
+++ b/application/src/services/maintenance/pdf/headerFooter.ts
@@ -0,0 +1,90 @@
+
+import jsPDF from 'jspdf';
+import { MaintenanceItem } from '../../types/maintenance.types';
+import { format } from 'date-fns';
+
+/**
+ * Add header with title and branding to the maintenance PDF
+ */
+export const addHeader = (doc: jsPDF, maintenance: MaintenanceItem): void => {
+  // Add colored header background
+  doc.setFillColor(30, 64, 175); // Blue-800 color
+  doc.rect(0, 0, 210, 35, 'F');
+  
+  // Add title
+  doc.setFontSize(22);
+  doc.setTextColor(255, 255, 255); // White text
+  doc.text('Scheduled Maintenance Report', 15, 15);
+  
+  // Add maintenance title
+  doc.setFontSize(12);
+  doc.text(maintenance.title || 'Maintenance Report', 15, 22);
+  
+  // Add reference ID
+  doc.setFontSize(9);
+  doc.setTextColor(219, 234, 254); // Blue-100 text
+  doc.text(`Reference ID: ${maintenance.id}`, 15, 28);
+  
+  // Add current date
+  doc.text(`Generated on: ${format(new Date(), 'PPP')}`, 140, 28, {
+    align: 'right'
+  });
+  
+  // Add status badge area below the header
+  doc.setFillColor(249, 250, 251); // Gray-50
+  doc.rect(0, 35, 210, 12, 'F');
+  
+  // Add status info
+  doc.setFontSize(10);
+  doc.setTextColor(0, 0, 0);
+  const statusText = `Status: ${maintenance.status || 'N/A'} | Priority: ${maintenance.priority || 'N/A'} | Impact: ${maintenance.field || 'N/A'}`;
+  doc.text(statusText, 105, 43, { align: 'center' });
+};
+
+/**
+ * Add footer to all pages of the PDF
+ */
+export const addFooter = (doc: jsPDF): void => {
+  // Add footer with blue background
+  doc.setFillColor(30, 64, 175); // Blue-800 for footer background
+  doc.rect(0, 277, 210, 20, 'F');
+  
+  // Get total page count
+  const totalPages = doc.getNumberOfPages();
+  
+  // Add footer to each page
+  for (let i = 1; i <= totalPages; i++) {
+    doc.setPage(i);
+    
+    // Add page number
+    doc.setFontSize(8);
+    doc.setTextColor(255, 255, 255); // White text for page numbers
+    doc.text(
+      `Page ${i} of ${totalPages}`,
+      195,
+      10,
+      { align: 'right' }
+    );
+    
+    // Add footer text with white color
+    doc.setFontSize(8);
+    doc.setTextColor(255, 255, 255); // White text for footer
+    doc.text(
+      `Maintenance ID: ${i === 1 ? doc.getTextWidth('Maintenance ID: ') : ''}`,
+      15,
+      283
+    );
+    doc.text(
+      `Generated on ${format(new Date(), 'PPP')}`,
+      195,
+      283,
+      { align: 'right' }
+    );
+    doc.text(
+      'This document is confidential and intended for internal use only.',
+      105,
+      290,
+      { align: 'center' }
+    );
+  }
+};
diff --git a/application/src/services/maintenance/pdf/index.ts b/application/src/services/maintenance/pdf/index.ts
new file mode 100644
index 0000000..3c4a621
--- /dev/null
+++ b/application/src/services/maintenance/pdf/index.ts
@@ -0,0 +1,16 @@
+
+import { generatePdf } from './generator';
+import { MaintenanceItem } from '../../types/maintenance.types';
+
+/**
+ * Generate and download PDF for maintenance report
+ */
+export const generateMaintenancePDF = async (maintenance: MaintenanceItem): Promise<string> => {
+  try {
+    const filename = await generatePdf(maintenance);
+    return filename;
+  } catch (error) {
+    console.error("Error in generateMaintenancePDF:", error);
+    throw error;
+  }
+};
diff --git a/application/src/services/maintenance/pdf/sections.ts b/application/src/services/maintenance/pdf/sections.ts
new file mode 100644
index 0000000..97884a6
--- /dev/null
+++ b/application/src/services/maintenance/pdf/sections.ts
@@ -0,0 +1,164 @@
+
+import jsPDF from 'jspdf';
+import autoTable from 'jspdf-autotable';
+import { MaintenanceItem } from '../../types/maintenance.types';
+import { formatDate, calculateDuration } from './utils';
+
+/**
+ * Add description section to the PDF
+ */
+export const addDescriptionSection = (doc: jsPDF, maintenance: MaintenanceItem, yPos: number): number => {
+  // Add section title
+  doc.setFontSize(14);
+  doc.setTextColor(30, 64, 175); // Blue-800 color for headings
+  doc.text('Description', 15, yPos);
+  
+  // Draw a line under the heading
+  doc.setDrawColor(30, 64, 175); // Blue-800
+  doc.setLineWidth(0.5);
+  doc.line(15, yPos + 2, 195, yPos + 2);
+  
+  // Handle multi-line description with word wrapping
+  const description = maintenance.description || 'No description provided';
+  const splitDescription = doc.splitTextToSize(description, 180);
+  
+  // Add description text
+  doc.setFontSize(10);
+  doc.setTextColor(0, 0, 0); // Reset text color
+  doc.text(splitDescription, 15, yPos + 10);
+  
+  // Return new Y position after the description text
+  return yPos + 15 + (splitDescription.length * 5);
+};
+
+/**
+ * Add schedule information section to the PDF
+ */
+export const addScheduleSection = (doc: jsPDF, maintenance: MaintenanceItem, yPos: number): number => {
+  // Add section title
+  doc.setFontSize(14);
+  doc.setTextColor(30, 64, 175); // Blue-800
+  doc.text('Schedule Information', 15, yPos);
+  
+  // Draw a line under the heading
+  doc.setDrawColor(30, 64, 175); // Blue-800
+  doc.setLineWidth(0.5);
+  doc.line(15, yPos + 2, 195, yPos + 2);
+  
+  // Create schedule data table
+  autoTable(doc, {
+    startY: yPos + 10,
+    head: [['Start Time', 'End Time', 'Duration']],
+    body: [
+      [
+        formatDate(maintenance.start_time),
+        formatDate(maintenance.end_time),
+        calculateDuration(maintenance.start_time, maintenance.end_time)
+      ]
+    ],
+    theme: 'striped',
+    headStyles: {
+      fillColor: [30, 64, 175], // Blue-800
+      textColor: 255,
+      fontStyle: 'bold'
+    },
+    margin: { left: 15, right: 15 }
+  });
+  
+  // Return next Y position
+  return (doc as any).lastAutoTable.finalY + 15;
+};
+
+/**
+ * Add affected services section to the PDF
+ */
+export const addAffectedServicesSection = (doc: jsPDF, maintenance: MaintenanceItem, yPos: number): number => {
+  // Add section title
+  doc.setFontSize(14);
+  doc.setTextColor(30, 64, 175); // Blue-800
+  doc.text('Affected Services', 15, yPos);
+  
+  // Draw a line under the heading
+  doc.setDrawColor(30, 64, 175); // Blue-800
+  doc.setLineWidth(0.5);
+  doc.line(15, yPos + 2, 195, yPos + 2);
+  
+  // Safely handle affected services string
+  const affectedServices = typeof maintenance.affected === 'string' && maintenance.affected.trim() !== ''
+    ? maintenance.affected.split(',').map(item => [item.trim()])
+    : [];
+  
+  if (affectedServices.length > 0) {
+    autoTable(doc, {
+      startY: yPos + 10,
+      head: [['Service Name']],
+      body: affectedServices,
+      theme: 'striped',
+      headStyles: {
+        fillColor: [30, 64, 175], // Blue-800
+        textColor: 255,
+        fontStyle: 'bold'
+      },
+      margin: { left: 15, right: 15 }
+    });
+    return (doc as any).lastAutoTable.finalY + 15;
+  } else {
+    doc.setFontSize(10);
+    doc.setTextColor(0, 0, 0);
+    doc.text('No affected services specified', 15, yPos + 10);
+    return yPos + 25;
+  }
+};
+
+/**
+ * Add personnel information section to the PDF
+ */
+export const addPersonnelSection = (doc: jsPDF, maintenance: MaintenanceItem, yPos: number): number => {
+  // Add section title
+  doc.setFontSize(14);
+  doc.setTextColor(30, 64, 175); // Blue-800
+  doc.text('Personnel Information', 15, yPos);
+  
+  // Draw a line under the heading
+  doc.setDrawColor(30, 64, 175); // Blue-800
+  doc.setLineWidth(0.5);
+  doc.line(15, yPos + 2, 195, yPos + 2);
+  
+  // Process assigned users for the table safely
+  let assignedUsersText = 'None';
+  if (maintenance.assigned_users) {
+    // Handle both string and array formats for assigned_users
+    const assignedUsersList = Array.isArray(maintenance.assigned_users)
+      ? maintenance.assigned_users
+      : (typeof maintenance.assigned_users === 'string' 
+          ? maintenance.assigned_users.split(',').map(item => item.trim())
+          : []);
+    
+    assignedUsersText = assignedUsersList.length > 0 
+      ? assignedUsersList.join(', ') 
+      : 'None';
+  }
+  
+  // Create personnel data table
+  autoTable(doc, {
+    startY: yPos + 10,
+    head: [['Created By', 'Assigned Personnel', 'Notifications']],
+    body: [
+      [
+        maintenance.created_by || 'Not specified',
+        assignedUsersText,
+        maintenance.notify_subscribers === 'yes' ? 'Enabled' : 'Disabled'
+      ]
+    ],
+    theme: 'striped',
+    headStyles: {
+      fillColor: [30, 64, 175], // Blue-800
+      textColor: 255,
+      fontStyle: 'bold'
+    },
+    margin: { left: 15, right: 15 }
+  });
+  
+  // Return next Y position
+  return (doc as any).lastAutoTable.finalY + 15;
+};
diff --git a/application/src/services/maintenance/pdf/utils.ts b/application/src/services/maintenance/pdf/utils.ts
new file mode 100644
index 0000000..7bd5720
--- /dev/null
+++ b/application/src/services/maintenance/pdf/utils.ts
@@ -0,0 +1,50 @@
+
+import { format } from 'date-fns';
+
+// Font configuration for the PDF
+export const fonts = {
+  normal: 'Helvetica',
+  bold: 'Helvetica-Bold',
+  italic: 'Helvetica-Oblique',
+};
+
+// Helper function to format dates
+export const formatDate = (dateString: string | undefined): string => {
+  if (!dateString) return 'N/A';
+  try {
+    return format(new Date(dateString), 'PPp');
+  } catch (e) {
+    return dateString || 'N/A';
+  }
+};
+
+// Helper function to calculate duration between two dates
+export const calculateDuration = (start: string, end: string): string => {
+  try {
+    if (!start || !end) return 'N/A';
+    
+    const startTime = new Date(start);
+    const endTime = new Date(end);
+    
+    // Validate dates
+    if (isNaN(startTime.getTime()) || isNaN(endTime.getTime())) {
+      return 'N/A';
+    }
+    
+    const durationMs = endTime.getTime() - startTime.getTime();
+    
+    // Check for negative duration
+    if (durationMs < 0) {
+      return 'Invalid date range';
+    }
+    
+    // Convert to hours and minutes
+    const hours = Math.floor(durationMs / (1000 * 60 * 60));
+    const minutes = Math.floor((durationMs % (1000 * 60 * 60)) / (1000 * 60));
+    
+    return `${hours}h ${minutes}m`;
+  } catch (error) {
+    console.error('Error calculating duration:', error);
+    return "N/A";
+  }
+};
diff --git a/application/src/services/types/maintenance.types.ts b/application/src/services/types/maintenance.types.ts
new file mode 100644
index 0000000..8358bca
--- /dev/null
+++ b/application/src/services/types/maintenance.types.ts
@@ -0,0 +1,46 @@
+
+export interface MaintenanceItem {
+  id: string;
+  title: string;
+  description: string;
+  start_time: string;
+  end_time: string;
+  affected: string;
+  priority: string;
+  status: string;
+  field: string;
+  created_by: string;
+  assigned_users: string[] | string; // Can be array of user IDs or string (JSON or comma-separated)
+  notify_subscribers: string;
+  notification_channel_id?: string;
+  notification_id?: string;
+  operational_status_id?: string;
+  created: string;
+  updated: string;
+  notification_channel_name?: string; // Add this optional property for UI display purposes
+  expand?: {
+    assigned_users?: any[]; // For expanded user data
+  };
+}
+
+export interface CreateMaintenanceInput {
+  title: string;
+  description: string;
+  start_time: string;
+  end_time: string;
+  affected: string;
+  priority: string;
+  status: string;
+  field: string;
+  created_by: string;
+  assigned_users: string[] | string; // Can be array of user IDs or string representation
+  notify_subscribers: string;
+  notification_channel_id?: string;
+  notification_id?: string; // Added to ensure it's included in create operations
+}
+
+export interface MaintenanceFilter {
+  status?: string;
+  priority?: string;
+  field?: string;
+}
\ No newline at end of file

From a3727b5dfd9e5cdc9a3180031f7b6e74552fc433 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Fri, 23 May 2025 20:37:00 +0800
Subject: [PATCH 10/16] feat: Implement  Incident Management and Tab Dashboard

---
 .../IncidentManagementTab.tsx                 |  13 ++
 .../ScheduleIncidentContent.tsx               | 126 +++++++++++
 .../ScheduledMaintenanceTab.tsx               | 160 ++++++++++++++
 .../schedule-incident/common/OverviewCard.tsx | 112 ++++++++++
 .../schedule-incident/hooks/index.ts          |   3 +
 .../hooks/useIncidentData.ts                  | 200 +++++++++++++++++
 .../hooks/useMaintenanceData.ts               | 173 +++++++++++++++
 .../incident-management/ErrorState.tsx        |  37 ++++
 .../incident-management/HeaderActions.tsx     |  37 ++++
 .../IncidentManagementContainer.tsx           | 171 +++++++++++++++
 .../incident-management/OverviewCards.tsx     |  67 ++++++
 .../incident-management/TabContent.tsx        |  47 ++++
 .../incident-management/index.ts              |   6 +
 .../incident/CreateIncidentDialog.tsx         |  96 +++++++++
 .../incident/EditIncidentDialog.tsx           | 105 +++++++++
 .../incident/EmptyIncidentState.tsx           |  18 ++
 .../incident/IncidentActionsMenu.tsx          | 114 ++++++++++
 .../incident/IncidentStatusBadge.tsx          | 105 +++++++++
 .../incident/IncidentStatusDropdown.tsx       | 105 +++++++++
 .../incident/IncidentTable.tsx                |   3 +
 .../detail-dialog/IncidentDetailContent.tsx   |  76 +++++++
 .../detail-dialog/IncidentDetailDialog.tsx    |  54 +++++
 .../detail-dialog/IncidentDetailFooter.tsx    |  31 +++
 .../detail-dialog/IncidentDetailHeader.tsx    |  19 ++
 .../detail-dialog/IncidentDetailSections.tsx  |  55 +++++
 .../detail-dialog/components/CloseButton.tsx  |  26 +++
 .../components/DownloadPdfButton.tsx          |  31 +++
 .../detail-dialog/components/PrintButton.tsx  |  26 +++
 .../detail-dialog/components/index.ts         |   4 +
 .../incident/detail-dialog/hooks/index.ts     |   3 +
 .../hooks/useDownloadIncidentPdf.ts           |  29 +++
 .../detail-dialog/hooks/usePrintIncident.ts   | 173 +++++++++++++++
 .../incident/detail-dialog/index.ts           |   6 +
 .../sections/AffectedSystemsSection.tsx       |  66 ++++++
 .../sections/AssignmentSection.tsx            |  44 ++++
 .../sections/BasicInfoSection.tsx             |  69 ++++++
 .../sections/ImpactAnalysisSection.tsx        |  51 +++++
 .../sections/ResolutionSection.tsx            |  39 ++++
 .../sections/TimelineSection.tsx              |  45 ++++
 .../incident/detail-dialog/sections/index.ts  |   7 +
 .../incident/detail-dialog/sections/utils.ts  |  32 +++
 .../incident/form/IncidentAffectedFields.tsx  |  56 +++++
 .../incident/form/IncidentBasicFields.tsx     | 201 ++++++++++++++++++
 .../incident/form/IncidentConfigFields.tsx    | 119 +++++++++++
 .../incident/form/IncidentDetailsFields.tsx   |  59 +++++
 .../schedule-incident/incident/form/index.ts  |   5 +
 .../incident/hooks/useIncidentEditForm.ts     |  84 ++++++++
 .../incident/hooks/useIncidentForm.ts         | 105 +++++++++
 .../schedule-incident/incident/index.ts       |   9 +
 .../incident/table/IncidentTable.tsx          | 150 +++++++++++++
 .../incident/table/IncidentTableRow.tsx       | 119 +++++++++++
 .../incident/table/IncidentTableSkeleton.tsx  |  27 +++
 .../incident/table/IncidentTableUtils.tsx     |  57 +++++
 .../schedule-incident/incident/table/index.ts |   5 +
 .../src/components/schedule-incident/index.ts |  18 ++
 application/src/pages/ScheduleIncident.tsx    |  59 +++++
 .../src/services/incident/incidentCache.ts    |  14 ++
 .../src/services/incident/incidentFetch.ts    | 147 +++++++++++++
 .../services/incident/incidentOperations.ts   | 109 ++++++++++
 .../services/incident/incidentPdfService.ts   |   5 +
 .../src/services/incident/incidentService.ts  |  22 ++
 .../src/services/incident/incidentUtils.ts    |  29 +++
 application/src/services/incident/index.ts    |  12 ++
 .../src/services/incident/pdf/generator.ts    | 112 ++++++++++
 .../src/services/incident/pdf/headerFooter.ts |  63 ++++++
 .../src/services/incident/pdf/index.ts        |  12 ++
 .../src/services/incident/pdf/sections.ts     | 192 +++++++++++++++++
 .../src/services/incident/pdf/utils.ts        |  26 +++
 application/src/services/incident/types.ts    |  57 +++++
 69 files changed, 4457 insertions(+)
 create mode 100644 application/src/components/schedule-incident/IncidentManagementTab.tsx
 create mode 100644 application/src/components/schedule-incident/ScheduleIncidentContent.tsx
 create mode 100644 application/src/components/schedule-incident/ScheduledMaintenanceTab.tsx
 create mode 100644 application/src/components/schedule-incident/common/OverviewCard.tsx
 create mode 100644 application/src/components/schedule-incident/hooks/index.ts
 create mode 100644 application/src/components/schedule-incident/hooks/useIncidentData.ts
 create mode 100644 application/src/components/schedule-incident/hooks/useMaintenanceData.ts
 create mode 100644 application/src/components/schedule-incident/incident-management/ErrorState.tsx
 create mode 100644 application/src/components/schedule-incident/incident-management/HeaderActions.tsx
 create mode 100644 application/src/components/schedule-incident/incident-management/IncidentManagementContainer.tsx
 create mode 100644 application/src/components/schedule-incident/incident-management/OverviewCards.tsx
 create mode 100644 application/src/components/schedule-incident/incident-management/TabContent.tsx
 create mode 100644 application/src/components/schedule-incident/incident-management/index.ts
 create mode 100644 application/src/components/schedule-incident/incident/CreateIncidentDialog.tsx
 create mode 100644 application/src/components/schedule-incident/incident/EditIncidentDialog.tsx
 create mode 100644 application/src/components/schedule-incident/incident/EmptyIncidentState.tsx
 create mode 100644 application/src/components/schedule-incident/incident/IncidentActionsMenu.tsx
 create mode 100644 application/src/components/schedule-incident/incident/IncidentStatusBadge.tsx
 create mode 100644 application/src/components/schedule-incident/incident/IncidentStatusDropdown.tsx
 create mode 100644 application/src/components/schedule-incident/incident/IncidentTable.tsx
 create mode 100644 application/src/components/schedule-incident/incident/detail-dialog/IncidentDetailContent.tsx
 create mode 100644 application/src/components/schedule-incident/incident/detail-dialog/IncidentDetailDialog.tsx
 create mode 100644 application/src/components/schedule-incident/incident/detail-dialog/IncidentDetailFooter.tsx
 create mode 100644 application/src/components/schedule-incident/incident/detail-dialog/IncidentDetailHeader.tsx
 create mode 100644 application/src/components/schedule-incident/incident/detail-dialog/IncidentDetailSections.tsx
 create mode 100644 application/src/components/schedule-incident/incident/detail-dialog/components/CloseButton.tsx
 create mode 100644 application/src/components/schedule-incident/incident/detail-dialog/components/DownloadPdfButton.tsx
 create mode 100644 application/src/components/schedule-incident/incident/detail-dialog/components/PrintButton.tsx
 create mode 100644 application/src/components/schedule-incident/incident/detail-dialog/components/index.ts
 create mode 100644 application/src/components/schedule-incident/incident/detail-dialog/hooks/index.ts
 create mode 100644 application/src/components/schedule-incident/incident/detail-dialog/hooks/useDownloadIncidentPdf.ts
 create mode 100644 application/src/components/schedule-incident/incident/detail-dialog/hooks/usePrintIncident.ts
 create mode 100644 application/src/components/schedule-incident/incident/detail-dialog/index.ts
 create mode 100644 application/src/components/schedule-incident/incident/detail-dialog/sections/AffectedSystemsSection.tsx
 create mode 100644 application/src/components/schedule-incident/incident/detail-dialog/sections/AssignmentSection.tsx
 create mode 100644 application/src/components/schedule-incident/incident/detail-dialog/sections/BasicInfoSection.tsx
 create mode 100644 application/src/components/schedule-incident/incident/detail-dialog/sections/ImpactAnalysisSection.tsx
 create mode 100644 application/src/components/schedule-incident/incident/detail-dialog/sections/ResolutionSection.tsx
 create mode 100644 application/src/components/schedule-incident/incident/detail-dialog/sections/TimelineSection.tsx
 create mode 100644 application/src/components/schedule-incident/incident/detail-dialog/sections/index.ts
 create mode 100644 application/src/components/schedule-incident/incident/detail-dialog/sections/utils.ts
 create mode 100644 application/src/components/schedule-incident/incident/form/IncidentAffectedFields.tsx
 create mode 100644 application/src/components/schedule-incident/incident/form/IncidentBasicFields.tsx
 create mode 100644 application/src/components/schedule-incident/incident/form/IncidentConfigFields.tsx
 create mode 100644 application/src/components/schedule-incident/incident/form/IncidentDetailsFields.tsx
 create mode 100644 application/src/components/schedule-incident/incident/form/index.ts
 create mode 100644 application/src/components/schedule-incident/incident/hooks/useIncidentEditForm.ts
 create mode 100644 application/src/components/schedule-incident/incident/hooks/useIncidentForm.ts
 create mode 100644 application/src/components/schedule-incident/incident/index.ts
 create mode 100644 application/src/components/schedule-incident/incident/table/IncidentTable.tsx
 create mode 100644 application/src/components/schedule-incident/incident/table/IncidentTableRow.tsx
 create mode 100644 application/src/components/schedule-incident/incident/table/IncidentTableSkeleton.tsx
 create mode 100644 application/src/components/schedule-incident/incident/table/IncidentTableUtils.tsx
 create mode 100644 application/src/components/schedule-incident/incident/table/index.ts
 create mode 100644 application/src/components/schedule-incident/index.ts
 create mode 100644 application/src/pages/ScheduleIncident.tsx
 create mode 100644 application/src/services/incident/incidentCache.ts
 create mode 100644 application/src/services/incident/incidentFetch.ts
 create mode 100644 application/src/services/incident/incidentOperations.ts
 create mode 100644 application/src/services/incident/incidentPdfService.ts
 create mode 100644 application/src/services/incident/incidentService.ts
 create mode 100644 application/src/services/incident/incidentUtils.ts
 create mode 100644 application/src/services/incident/index.ts
 create mode 100644 application/src/services/incident/pdf/generator.ts
 create mode 100644 application/src/services/incident/pdf/headerFooter.ts
 create mode 100644 application/src/services/incident/pdf/index.ts
 create mode 100644 application/src/services/incident/pdf/sections.ts
 create mode 100644 application/src/services/incident/pdf/utils.ts
 create mode 100644 application/src/services/incident/types.ts

diff --git a/application/src/components/schedule-incident/IncidentManagementTab.tsx b/application/src/components/schedule-incident/IncidentManagementTab.tsx
new file mode 100644
index 0000000..59bed3d
--- /dev/null
+++ b/application/src/components/schedule-incident/IncidentManagementTab.tsx
@@ -0,0 +1,13 @@
+
+import React from 'react';
+import { IncidentManagementContainer } from './incident-management';
+
+interface IncidentManagementTabProps {
+  refreshTrigger?: number;
+}
+
+export const IncidentManagementTab = React.memo(({ refreshTrigger = 0 }: IncidentManagementTabProps) => {
+  return <IncidentManagementContainer refreshTrigger={refreshTrigger} />;
+});
+
+IncidentManagementTab.displayName = 'IncidentManagementTab';
diff --git a/application/src/components/schedule-incident/ScheduleIncidentContent.tsx b/application/src/components/schedule-incident/ScheduleIncidentContent.tsx
new file mode 100644
index 0000000..a3b8422
--- /dev/null
+++ b/application/src/components/schedule-incident/ScheduleIncidentContent.tsx
@@ -0,0 +1,126 @@
+
+import React, { useState, useEffect } from 'react';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+import { Button } from "@/components/ui/button";
+import { Plus, CalendarClock, AlertCircle } from "lucide-react";
+import { useLanguage } from "@/contexts/LanguageContext";
+import { ScheduledMaintenanceTab } from "./ScheduledMaintenanceTab";
+import { IncidentManagementTab } from "./IncidentManagementTab";
+import { CreateMaintenanceDialog } from './maintenance/CreateMaintenanceDialog';
+import { CreateIncidentDialog } from './incident/CreateIncidentDialog';
+import { useToast } from '@/hooks/use-toast';
+import { initMaintenanceNotifications, stopMaintenanceNotifications } from '@/services/maintenance/maintenanceNotificationService';
+
+export const ScheduleIncidentContent = () => {
+  const { t } = useLanguage();
+  const { toast } = useToast();
+  const [activeTab, setActiveTab] = useState("maintenance");
+  const [createMaintenanceDialogOpen, setCreateMaintenanceDialogOpen] = useState(false);
+  const [createIncidentDialogOpen, setCreateIncidentDialogOpen] = useState(false);
+  const [refreshTrigger, setRefreshTrigger] = useState(0);
+  const [incidentRefreshTrigger, setIncidentRefreshTrigger] = useState(0);
+
+  // Initialize maintenance notifications when the component mounts
+  useEffect(() => {
+    console.log("Initializing maintenance notifications");
+    initMaintenanceNotifications();
+    
+    // Clean up when the component unmounts
+    return () => {
+      console.log("Cleaning up maintenance notifications");
+      stopMaintenanceNotifications();
+    };
+  }, []);
+
+  const handleCreateButtonClick = () => {
+    if (activeTab === "maintenance") {
+      setCreateMaintenanceDialogOpen(true);
+    } else {
+      setCreateIncidentDialogOpen(true);
+    }
+  };
+
+  const handleMaintenanceCreated = () => {
+    // Refresh data by incrementing the refresh trigger
+    const newTriggerValue = refreshTrigger + 1;
+    console.log("Maintenance created, refreshing data with new trigger value:", newTriggerValue);
+    setRefreshTrigger(newTriggerValue);
+    
+    // Show success toast
+    toast({
+      title: t('success'),
+      description: t('maintenanceCreatedSuccess'),
+    });
+  };
+
+  const handleIncidentCreated = () => {
+    // Refresh data by incrementing the refresh trigger
+    const newTriggerValue = incidentRefreshTrigger + 1;
+    console.log("Incident created, refreshing data with new trigger value:", newTriggerValue);
+    setIncidentRefreshTrigger(newTriggerValue);
+    
+    // Show success toast
+    toast({
+      title: t('success'),
+      description: t('incidentCreatedSuccess'),
+    });
+  };
+
+  return (
+    <main className="flex-1 flex flex-col overflow-auto bg-background p-6">
+      <div className="flex flex-col gap-6">
+        <div className="flex justify-between items-center">
+          <h2 className="text-2xl font-bold text-foreground">
+            {t('scheduleIncidentManagement')}
+          </h2>
+          <Button 
+            className="text-primary-foreground"
+            onClick={handleCreateButtonClick}
+          >
+            <Plus className="w-4 h-4 mr-2" /> 
+            {activeTab === "maintenance" ? t('createMaintenanceWindow') : t('createIncident')}
+          </Button>
+        </div>
+        
+        <Tabs 
+          defaultValue="maintenance" 
+          className="w-full"
+          onValueChange={(value) => setActiveTab(value)}
+        >
+          <TabsList className="grid w-full grid-cols-2 mb-4">
+            <TabsTrigger value="maintenance">
+              <CalendarClock className="w-4 h-4 mr-2" />
+              {t('scheduledMaintenance')}
+            </TabsTrigger>
+            <TabsTrigger value="incidents">
+              <AlertCircle className="w-4 h-4 mr-2" />
+              {t('incidentManagement')}
+            </TabsTrigger>
+          </TabsList>
+          
+          <TabsContent value="maintenance" className="space-y-4">
+            <ScheduledMaintenanceTab refreshTrigger={refreshTrigger} />
+          </TabsContent>
+          
+          <TabsContent value="incidents" className="space-y-4">
+            <IncidentManagementTab refreshTrigger={incidentRefreshTrigger} />
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {/* Maintenance creation dialog */}
+      <CreateMaintenanceDialog 
+        open={createMaintenanceDialogOpen}
+        onOpenChange={setCreateMaintenanceDialogOpen}
+        onMaintenanceCreated={handleMaintenanceCreated}
+      />
+
+      {/* Incident creation dialog */}
+      <CreateIncidentDialog 
+        open={createIncidentDialogOpen}
+        onOpenChange={setCreateIncidentDialogOpen}
+        onIncidentCreated={handleIncidentCreated}
+      />
+    </main>
+  );
+};
diff --git a/application/src/components/schedule-incident/ScheduledMaintenanceTab.tsx b/application/src/components/schedule-incident/ScheduledMaintenanceTab.tsx
new file mode 100644
index 0000000..da82c1a
--- /dev/null
+++ b/application/src/components/schedule-incident/ScheduledMaintenanceTab.tsx
@@ -0,0 +1,160 @@
+
+import React, { useEffect } from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import { MaintenanceTable, MaintenanceStatusChecker } from './maintenance';
+import { EmptyMaintenanceState } from './maintenance/EmptyMaintenanceState';
+import { OverviewCard } from './common/OverviewCard';
+import { Calendar, Clock, CheckCircle } from 'lucide-react';
+import { useMaintenanceData } from './hooks/useMaintenanceData';
+import { Skeleton } from '@/components/ui/skeleton';
+import { useToast } from '@/hooks/use-toast';
+import { LoadingState } from '@/components/services/LoadingState';
+
+interface ScheduledMaintenanceTabProps {
+  refreshTrigger?: number;
+}
+
+export const ScheduledMaintenanceTab = ({ refreshTrigger = 0 }: ScheduledMaintenanceTabProps) => {
+  const { t } = useLanguage();
+  const { toast } = useToast();
+  const [manualRefresh, setManualRefresh] = React.useState(0);
+  
+  // Combine the external refresh trigger with our internal one
+  const combinedRefreshTrigger = refreshTrigger + manualRefresh;
+  
+  const { 
+    loading, 
+    filter, 
+    setFilter, 
+    maintenanceData, 
+    overviewStats, 
+    fetchMaintenanceData,
+    isEmpty,
+    error,
+    initialized
+  } = useMaintenanceData({ refreshTrigger: combinedRefreshTrigger });
+
+  // Display toast when error occurs
+  useEffect(() => {
+    if (error) {
+      toast({
+        title: t('error'),
+        description: error,
+        variant: 'destructive',
+      });
+    }
+  }, [error, toast, t]);
+
+  // Force fetch data on initial load
+  useEffect(() => {
+    console.log("ScheduledMaintenanceTab is mounted, fetching data");
+    fetchMaintenanceData(true);
+  }, [fetchMaintenanceData]);
+
+  // Handle maintenance updates
+  const handleMaintenanceUpdated = () => {
+    console.log("Maintenance updated, refreshing data");
+    setManualRefresh(prev => prev + 1);
+  };
+
+  // Handle tab changes
+  const handleTabChange = (value: string) => {
+    setFilter(value);
+  };
+
+  // Show full-page loading state during initial load
+  if (loading && !initialized) {
+    return <LoadingState />;
+  }
+
+  return (
+    <>
+      {/* Status checker for automatic updates */}
+      <MaintenanceStatusChecker 
+        maintenanceData={maintenanceData}
+        onStatusUpdated={handleMaintenanceUpdated}
+      />
+
+      {/* Overview Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
+        <OverviewCard
+          title={t('upcomingMaintenance')}
+          value={loading ? '...' : overviewStats.upcoming}
+          icon={<Calendar className="h-5 w-5 text-white" />}
+          isLoading={loading}
+          color="blue"
+        />
+        <OverviewCard
+          title={t('ongoingMaintenance')}
+          value={loading ? '...' : overviewStats.ongoing}
+          icon={<Clock className="h-5 w-5 text-white" />}
+          isLoading={loading}
+          color="amber"
+        />
+        <OverviewCard
+          title={t('completedMaintenance')}
+          value={loading ? '...' : overviewStats.completed}
+          icon={<CheckCircle className="h-5 w-5 text-white" />}
+          isLoading={loading}
+          color="green"
+        />
+        <OverviewCard
+          title={t('totalScheduledHours')}
+          value={loading ? '...' : `${overviewStats.totalDuration}h`}
+          icon={<Clock className="h-5 w-5 text-white" />}
+          isLoading={loading}
+          color="purple"
+        />
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>{t('scheduledMaintenance')}</CardTitle>
+          <CardDescription>
+            {t('scheduledMaintenanceDesc')}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Tabs 
+            defaultValue="upcoming" 
+            value={filter} 
+            className="w-full" 
+            onValueChange={handleTabChange}
+          >
+            <TabsList className="mb-6">
+              <TabsTrigger value="upcoming">{t('upcomingMaintenance')}</TabsTrigger>
+              <TabsTrigger value="ongoing">{t('ongoingMaintenance')}</TabsTrigger>
+              <TabsTrigger value="completed">{t('completedMaintenance')}</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="upcoming" className="space-y-4">
+              <MaintenanceTable 
+                data={maintenanceData}
+                isLoading={loading && initialized}
+                onMaintenanceUpdated={handleMaintenanceUpdated}
+              />
+            </TabsContent>
+            
+            <TabsContent value="ongoing" className="space-y-4">
+              <MaintenanceTable 
+                data={maintenanceData}
+                isLoading={loading && initialized}
+                onMaintenanceUpdated={handleMaintenanceUpdated}
+              />
+            </TabsContent>
+            
+            <TabsContent value="completed" className="space-y-4">
+              <MaintenanceTable 
+                data={maintenanceData}
+                isLoading={loading && initialized}
+                onMaintenanceUpdated={handleMaintenanceUpdated}
+              />
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+    </>
+  );
+};
diff --git a/application/src/components/schedule-incident/common/OverviewCard.tsx b/application/src/components/schedule-incident/common/OverviewCard.tsx
new file mode 100644
index 0000000..6c96010
--- /dev/null
+++ b/application/src/components/schedule-incident/common/OverviewCard.tsx
@@ -0,0 +1,112 @@
+
+import React, { ReactNode } from 'react';
+import { Card, CardContent } from "@/components/ui/card";
+import { cn } from "@/lib/utils";
+import { Skeleton } from "@/components/ui/skeleton";
+import { useTheme } from "@/contexts/ThemeContext";
+
+interface OverviewCardProps {
+  title: string;
+  value: string | number;
+  description?: string;
+  icon: ReactNode;
+  trend?: {
+    value: number;
+    isPositive: boolean;
+  };
+  className?: string;
+  valueClassName?: string;
+  isLoading?: boolean;
+  color?: string;
+}
+
+export const OverviewCard = ({
+  title,
+  value,
+  description,
+  icon,
+  trend,
+  className,
+  valueClassName,
+  isLoading = false,
+  color = "blue",
+}: OverviewCardProps) => {
+  const { theme } = useTheme();
+  
+  // Map color prop to gradient colors
+  const getGradientBackground = () => {
+    const colors = {
+      blue: theme === 'dark'
+        ? "linear-gradient(135deg, rgba(25, 118, 210, 0.8) 0%, rgba(66, 165, 245, 0.6) 100%)"
+        : "linear-gradient(135deg, #1976d2 0%, #42a5f5 100%)",
+      green: theme === 'dark'
+        ? "linear-gradient(135deg, rgba(67, 160, 71, 0.8) 0%, rgba(102, 187, 106, 0.6) 100%)"
+        : "linear-gradient(135deg, #43a047 0%, #66bb6a 100%)",
+      amber: theme === 'dark'
+        ? "linear-gradient(135deg, rgba(255, 152, 0, 0.8) 0%, rgba(255, 183, 77, 0.6) 100%)"
+        : "linear-gradient(135deg, #ff9800 0%, #ffb74d 100%)",
+      red: theme === 'dark'
+        ? "linear-gradient(135deg, rgba(229, 57, 53, 0.8) 0%, rgba(239, 83, 80, 0.6) 100%)"
+        : "linear-gradient(135deg, #e53935 0%, #ef5350 100%)",
+      purple: theme === 'dark'
+        ? "linear-gradient(135deg, rgba(123, 31, 162, 0.8) 0%, rgba(156, 39, 176, 0.6) 100%)"
+        : "linear-gradient(135deg, #7b1fa2 0%, #9c27b0 100%)",
+      orange: theme === 'dark'
+        ? "linear-gradient(135deg, rgba(230, 81, 0, 0.8) 0%, rgba(255, 109, 0, 0.6) 100%)"
+        : "linear-gradient(135deg, #e65100 0%, #ff6d00 100%)",
+    };
+    
+    return colors[color as keyof typeof colors] || colors.blue;
+  };
+
+  return (
+    <Card 
+      className={cn(
+        "border-none rounded-xl shadow-lg overflow-hidden transition-all duration-300 hover:shadow-xl transform hover:-translate-y-1 relative z-10", 
+        className
+      )}
+      style={{
+        background: getGradientBackground()
+      }}
+    >
+      {/* Grid Pattern Overlay */}
+      <div className="absolute inset-0 z-0 opacity-10">
+        <div className="w-full h-full" 
+          style={{ 
+            backgroundImage: `linear-gradient(#fff 1px, transparent 1px), 
+                              linear-gradient(90deg, #fff 1px, transparent 1px)`,
+            backgroundSize: '20px 20px'
+          }}
+        ></div>
+      </div>
+      
+      <CardContent className="p-6 relative z-10">
+        <div className="flex items-center justify-between">
+          <div>
+            <p className="text-sm font-medium text-white/90 mb-1">{title}</p>
+            {isLoading ? (
+              <Skeleton className="h-8 w-16 bg-white/20" />
+            ) : (
+              <h3 className={cn("text-3xl font-bold text-white", valueClassName)}>{value}</h3>
+            )}
+            {description && (
+              <p className="text-sm text-white/80 mt-1">{description}</p>
+            )}
+            {trend && (
+              <div className={`flex items-center mt-2 text-sm ${trend.isPositive ? 'text-green-100' : 'text-red-100'}`}>
+                <span className="mr-1">
+                  {trend.isPositive ? '↑' : '↓'}
+                </span>
+                <span>{Math.abs(trend.value)}%</span>
+                <span className="ml-1 text-white/70">vs last month</span>
+              </div>
+            )}
+          </div>
+          <div className="rounded-full p-3 bg-white/25 backdrop-blur-sm">
+            {icon}
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  );
+};
diff --git a/application/src/components/schedule-incident/hooks/index.ts b/application/src/components/schedule-incident/hooks/index.ts
new file mode 100644
index 0000000..eb66169
--- /dev/null
+++ b/application/src/components/schedule-incident/hooks/index.ts
@@ -0,0 +1,3 @@
+
+export * from './useMaintenanceData';
+export * from './useIncidentData';
diff --git a/application/src/components/schedule-incident/hooks/useIncidentData.ts b/application/src/components/schedule-incident/hooks/useIncidentData.ts
new file mode 100644
index 0000000..d6b32cb
--- /dev/null
+++ b/application/src/components/schedule-incident/hooks/useIncidentData.ts
@@ -0,0 +1,200 @@
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { incidentService, IncidentItem } from '@/services/incident';
+
+interface UseIncidentDataProps {
+  refreshTrigger?: number;
+}
+
+export const useIncidentData = ({ refreshTrigger = 0 }: UseIncidentDataProps) => {
+  const [incidents, setIncidents] = useState<IncidentItem[]>([]);
+  const [filter, setFilter] = useState("unresolved");
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [initialized, setInitialized] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  
+  // Use a ref to prevent multiple simultaneous fetch requests
+  const isFetchingRef = useRef(false);
+  // Use a ref to track the refresh trigger
+  const lastRefreshTriggerRef = useRef(refreshTrigger);
+  
+  // Simplified fetch function with improved controls to prevent duplicate calls
+  const fetchIncidentData = useCallback(async (force = false) => {
+    // Skip if already fetching
+    if (isFetchingRef.current) {
+      console.log('Already fetching data, skipping additional request');
+      return;
+    }
+    
+    // Skip if not forced and already initialized
+    if (initialized && !force) {
+      console.log('Data already initialized and no force refresh, skipping fetch');
+      return;
+    }
+    
+    // Set fetching flags
+    isFetchingRef.current = true;
+    
+    if (!initialized || force) {
+      setLoading(true);
+    }
+    
+    if (force) {
+      setIsRefreshing(true);
+    }
+    
+    setError(null);
+    
+    try {
+      console.log(`Fetching incident data (force=${force})`);
+      const allIncidents = await incidentService.getAllIncidents(force);
+      
+      if (Array.isArray(allIncidents)) {
+        setIncidents(allIncidents);
+        console.log(`Successfully set ${allIncidents.length} incidents to state`);
+      } else {
+        setIncidents([]);
+        console.warn('No incidents returned from service');
+      }
+      
+      setInitialized(true);
+      setLoading(false);
+      setIsRefreshing(false);
+    } catch (error) {
+      console.error('Error fetching incident data:', error);
+      setError('Failed to load incident data. Please try again later.');
+      setIncidents([]);
+      setInitialized(true);
+      setLoading(false);
+      setIsRefreshing(false);
+    } finally {
+      // Reset fetching flag after a slight delay to prevent rapid consecutive calls
+      setTimeout(() => {
+        isFetchingRef.current = false;
+      }, 500);
+    }
+  }, [initialized]);
+
+  // Only fetch when component mounts or refreshTrigger changes
+  useEffect(() => {
+    // Skip if the refresh trigger hasn't changed (prevents duplicate effect calls)
+    if (refreshTrigger === lastRefreshTriggerRef.current && initialized) {
+      console.log('Refresh trigger unchanged, skipping fetch');
+      return;
+    }
+    
+    // Update last refresh trigger ref
+    lastRefreshTriggerRef.current = refreshTrigger;
+    
+    // Create an abort controller for cleanup
+    const abortController = new AbortController();
+    let isMounted = true;
+    
+    console.log(`useIncidentData effect running, refreshTrigger: ${refreshTrigger}`);
+    
+    // Use a longer delay to ensure we don't trigger too many API calls
+    const fetchTimer = setTimeout(() => {
+      if (isMounted) {
+        fetchIncidentData(refreshTrigger > 0);
+      }
+    }, 500); // Use a longer delay
+    
+    // Cleanup function to abort any in-flight requests and clear timers
+    return () => {
+      console.log('Cleaning up incident data fetch effect');
+      isMounted = false;
+      clearTimeout(fetchTimer);
+      abortController.abort();
+    };
+  }, [fetchIncidentData, refreshTrigger, initialized]);
+
+  // Filter the data based on the current filter
+  const incidentData = useMemo(() => {
+    if (!initialized || incidents.length === 0) return [];
+    
+    console.log(`Filtering incidents by: ${filter}`);
+    
+    if (filter === "unresolved") {
+      return incidents.filter(item => {
+        const status = (item.status || item.impact_status || '').toLowerCase();
+        return status !== 'resolved';
+      });
+    } else if (filter === "resolved") {
+      return incidents.filter(item => {
+        const status = (item.status || item.impact_status || '').toLowerCase();
+        return status === 'resolved';
+      });
+    }
+    
+    return [];
+  }, [filter, incidents, initialized]);
+
+  // Calculate stats for overview cards
+  const overviewStats = useMemo(() => {
+    if (!initialized || incidents.length === 0) {
+      return {
+        unresolved: 0,
+        resolved: 0,
+        critical: 0,
+        highPriority: 0,
+        avgResolutionTime: "0h"
+      };
+    }
+    
+    const unresolvedIncidents = incidents.filter(item => {
+      const status = (item.status || item.impact_status || '').toLowerCase();
+      return status !== 'resolved';
+    });
+    
+    const resolvedIncidents = incidents.filter(item => {
+      const status = (item.status || item.impact_status || '').toLowerCase();
+      return status === 'resolved';
+    });
+    
+    const criticalCount = unresolvedIncidents.filter(item => 
+      (item.priority?.toLowerCase() === 'critical') || 
+      (item.impact?.toLowerCase() === 'critical')
+    ).length;
+    
+    const highPriorityCount = unresolvedIncidents.filter(item => 
+      (item.priority?.toLowerCase() === 'high')
+    ).length;
+    
+    let avgResolutionTime = "0h";
+    if (resolvedIncidents.length > 0) {
+      const totalHours = resolvedIncidents.reduce((total, item) => {
+        if (!item.created || !item.resolution_time) return total;
+        
+        const createdAt = new Date(item.created).getTime();
+        const resolvedAt = new Date(item.resolution_time).getTime();
+        const durationHours = (resolvedAt - createdAt) / (1000 * 60 * 60);
+        return isNaN(durationHours) ? total : total + durationHours;
+      }, 0);
+      
+      avgResolutionTime = `${(totalHours / resolvedIncidents.length).toFixed(1)}h`;
+    }
+    
+    return {
+      unresolved: unresolvedIncidents.length,
+      resolved: resolvedIncidents.length,
+      critical: criticalCount,
+      highPriority: highPriorityCount,
+      avgResolutionTime
+    };
+  }, [incidents, initialized]);
+
+  const isEmpty = !incidentData.length && initialized && !loading;
+
+  return {
+    filter,
+    setFilter,
+    incidentData,
+    overviewStats,
+    fetchIncidentData,
+    isEmpty,
+    error,
+    loading,
+    initialized,
+    isRefreshing
+  };
+};
diff --git a/application/src/components/schedule-incident/hooks/useMaintenanceData.ts b/application/src/components/schedule-incident/hooks/useMaintenanceData.ts
new file mode 100644
index 0000000..3af4626
--- /dev/null
+++ b/application/src/components/schedule-incident/hooks/useMaintenanceData.ts
@@ -0,0 +1,173 @@
+
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { maintenanceService, MaintenanceItem } from '@/services/maintenance';
+import { useToast } from '@/hooks/use-toast';
+import { useLanguage } from '@/contexts/LanguageContext';
+
+interface UseMaintenanceDataProps {
+  refreshTrigger?: number;
+}
+
+export const useMaintenanceData = ({ refreshTrigger = 0 }: UseMaintenanceDataProps) => {
+  const { t } = useLanguage();
+  const { toast } = useToast();
+  const [loading, setLoading] = useState(true);
+  const [allMaintenanceData, setAllMaintenanceData] = useState<MaintenanceItem[]>([]);
+  const [filter, setFilter] = useState("upcoming");
+  const [error, setError] = useState<string | null>(null);
+  const [initialized, setInitialized] = useState(false);
+  const [lastFetchTime, setLastFetchTime] = useState(0);
+
+  // Memoize categorized data to prevent unnecessary recalculations
+  const categorizedData = useMemo(() => {
+    if (!allMaintenanceData.length) return { upcoming: [], ongoing: [], completed: [] };
+    
+    const currentDate = new Date();
+    const upcoming: MaintenanceItem[] = [];
+    const ongoing: MaintenanceItem[] = [];
+    const completed: MaintenanceItem[] = [];
+    
+    allMaintenanceData.forEach(item => {
+      const status = item.status?.toLowerCase() || '';
+      const startTime = new Date(item.start_time);
+      const endTime = new Date(item.end_time);
+      
+      if (status === 'completed' || status === 'cancelled') {
+        completed.push(item);
+      } else if (status === 'in_progress' || 
+                (status === 'scheduled' && startTime <= currentDate && endTime >= currentDate)) {
+        ongoing.push(item);
+      } else if (status === 'scheduled' && startTime > currentDate) {
+        upcoming.push(item);
+      } else {
+        // Default case: treat as upcoming if we can't determine
+        upcoming.push(item);
+      }
+    });
+    
+    return { upcoming, ongoing, completed };
+  }, [allMaintenanceData]);
+
+  // Optimized fetch function with improved debouncing
+  const fetchMaintenanceData = useCallback(async (force = false) => {
+    // Prevent excessive fetching with improved debounce logic
+    const now = Date.now();
+    if (!force && now - lastFetchTime < 10000 && lastFetchTime > 0 && initialized) {
+      console.log("Skipping fetch - recently fetched (within 10s)");
+      return;
+    }
+    
+    // Only show loading state for initial load, not refreshes
+    if (!initialized) {
+      setLoading(true);
+    }
+    
+    setError(null);
+    setLastFetchTime(now);
+    
+    try {
+      console.log("Fetching maintenance data from service...");
+      const data = await maintenanceService.getMaintenanceRecords();
+      console.log("Fetched maintenance data, count:", data.length);
+      
+      // Log a sample of the first item's assigned_users for debugging
+      if (data.length > 0) {
+        console.log("Sample maintenance item assigned_users:", data[0].id, data[0].assigned_users);
+      }
+      
+      // Update state with fetched data
+      setAllMaintenanceData(data);
+      setInitialized(true);
+    } catch (error) {
+      console.error('Error fetching maintenance data:', error);
+      setError('Failed to load maintenance data');
+      toast({
+        title: t('error'),
+        description: t('errorFetchingMaintenanceData'),
+        variant: 'destructive',
+      });
+    } finally {
+      setLoading(false);
+    }
+  }, [t, toast, lastFetchTime, initialized]);
+
+  // Initial fetch on mount with proper cleanup
+  useEffect(() => {
+    console.log("useMaintenanceData hook mounted, fetching data");
+    let isMounted = true;
+    
+    const fetchData = async () => {
+      try {
+        await fetchMaintenanceData(true);
+      } catch (err) {
+        console.error("Error in initial fetch:", err);
+      }
+    };
+    
+    fetchData();
+    
+    // Set up polling with longer interval (5 minutes instead of 3)
+    const intervalId = setInterval(() => {
+      if (isMounted) fetchMaintenanceData(false);
+    }, 300000); // 5 minutes
+    
+    return () => {
+      isMounted = false;
+      clearInterval(intervalId);
+    };
+  }, [fetchMaintenanceData]);
+
+  // Handle refresh trigger changes
+  useEffect(() => {
+    if (refreshTrigger > 0) {
+      console.log("Refresh trigger changed, forcing data fetch");
+      fetchMaintenanceData(true);
+    }
+  }, [refreshTrigger, fetchMaintenanceData]);
+
+  // Get filtered data based on current tab
+  const maintenanceData = useMemo(() => {
+    if (!initialized) return [];
+    return categorizedData[filter as keyof typeof categorizedData] || [];
+  }, [filter, categorizedData, initialized]);
+
+  // Calculate overview stats with memoization
+  const overviewStats = useMemo(() => {
+    const { upcoming, ongoing, completed } = categorizedData;
+    
+    // Calculate total hours more efficiently
+    const calculateTotalHours = (items: MaintenanceItem[]) => {
+      return items.reduce((total, item) => {
+        try {
+          const start = new Date(item.start_time).getTime();
+          const end = new Date(item.end_time).getTime();
+          const durationHours = (end - start) / (1000 * 60 * 60);
+          return total + (isNaN(durationHours) ? 0 : durationHours);
+        } catch (e) {
+          return total;
+        }
+      }, 0).toFixed(1);
+    };
+    
+    return {
+      upcoming: upcoming.length,
+      ongoing: ongoing.length,
+      completed: completed.length,
+      totalDuration: calculateTotalHours([...upcoming, ...ongoing]),
+    };
+  }, [categorizedData]);
+
+  const isEmpty = !loading && maintenanceData.length === 0 && initialized;
+
+  return {
+    loading,
+    filter,
+    setFilter,
+    maintenanceData,
+    overviewStats,
+    fetchMaintenanceData,
+    isEmpty,
+    error,
+    initialized,
+  };
+};
diff --git a/application/src/components/schedule-incident/incident-management/ErrorState.tsx b/application/src/components/schedule-incident/incident-management/ErrorState.tsx
new file mode 100644
index 0000000..0292164
--- /dev/null
+++ b/application/src/components/schedule-incident/incident-management/ErrorState.tsx
@@ -0,0 +1,37 @@
+
+import React from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { Button } from '@/components/ui/button';
+import { RefreshCw } from 'lucide-react';
+
+interface ErrorStateProps {
+  error: string | null;
+  onRefresh: () => void;
+  isRefreshing: boolean;
+}
+
+export const ErrorState: React.FC<ErrorStateProps> = ({ 
+  error,
+  onRefresh,
+  isRefreshing
+}) => {
+  const { t } = useLanguage();
+
+  if (!error) return null;
+
+  return (
+    <div className="text-center py-8">
+      <p className="text-muted-foreground mb-4">{error}</p>
+      <Button 
+        variant="outline" 
+        size="sm" 
+        onClick={onRefresh}
+        className="flex items-center gap-2"
+        disabled={isRefreshing}
+      >
+        <RefreshCw className={`h-4 w-4 ${isRefreshing ? 'animate-spin' : ''}`} />
+        {t('tryAgain')}
+      </Button>
+    </div>
+  );
+};
diff --git a/application/src/components/schedule-incident/incident-management/HeaderActions.tsx b/application/src/components/schedule-incident/incident-management/HeaderActions.tsx
new file mode 100644
index 0000000..fa1e9df
--- /dev/null
+++ b/application/src/components/schedule-incident/incident-management/HeaderActions.tsx
@@ -0,0 +1,37 @@
+
+import React from 'react';
+import { CardDescription, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { RefreshCw } from 'lucide-react';
+import { useLanguage } from '@/contexts/LanguageContext';
+
+interface HeaderActionsProps {
+  onRefresh: () => void;
+  isRefreshing: boolean;
+}
+
+export const HeaderActions: React.FC<HeaderActionsProps> = ({ onRefresh, isRefreshing }) => {
+  const { t } = useLanguage();
+  
+  return (
+    <div className="flex flex-row items-center justify-between">
+      <div>
+        <CardTitle>{t('incidentManagement')}</CardTitle>
+        <CardDescription>
+          {t('incidentsManagementDesc')}
+        </CardDescription>
+      </div>
+      <Button 
+        variant="outline" 
+        size="icon" 
+        onClick={onRefresh} 
+        className="ml-auto"
+        title={t('refreshData')}
+        disabled={isRefreshing}
+      >
+        <RefreshCw className={`h-4 w-4 ${isRefreshing ? 'animate-spin' : ''}`} />
+        <span className="sr-only">{t('refresh')}</span>
+      </Button>
+    </div>
+  );
+};
diff --git a/application/src/components/schedule-incident/incident-management/IncidentManagementContainer.tsx b/application/src/components/schedule-incident/incident-management/IncidentManagementContainer.tsx
new file mode 100644
index 0000000..bca2878
--- /dev/null
+++ b/application/src/components/schedule-incident/incident-management/IncidentManagementContainer.tsx
@@ -0,0 +1,171 @@
+
+import React, { useState, useCallback, useRef } from 'react';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs';
+import { Card, CardContent, CardHeader } from '@/components/ui/card';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { useIncidentData } from '../hooks/useIncidentData';
+import { IncidentItem } from '@/services/incident';
+import { useToast } from '@/hooks/use-toast';
+import { OverviewCards } from './OverviewCards';
+import { HeaderActions } from './HeaderActions';
+import { TabContent } from './TabContent';
+import { LoadingState } from '@/components/services/LoadingState';
+import { IncidentDetailDialog } from '../incident/detail-dialog/IncidentDetailDialog';
+
+interface IncidentManagementContainerProps {
+  refreshTrigger?: number;
+}
+
+export const IncidentManagementContainer: React.FC<IncidentManagementContainerProps> = ({ 
+  refreshTrigger = 0 
+}) => {
+  const { t } = useLanguage();
+  const { toast } = useToast();
+  const [selectedIncident, setSelectedIncident] = useState<IncidentItem | null>(null);
+  const [detailDialogOpen, setDetailDialogOpen] = useState(false);
+  const [manualRefresh, setManualRefresh] = useState(0);
+  
+  // Use a ref to debounce multiple refresh requests
+  const refreshTimerRef = useRef<number | null>(null);
+  
+  // Combine the external refresh trigger with our internal one
+  const combinedRefreshTrigger = refreshTrigger + manualRefresh;
+  
+  const { 
+    filter, 
+    setFilter, 
+    incidentData, 
+    overviewStats, 
+    isEmpty,
+    loading,
+    error,
+    initialized,
+    isRefreshing
+  } = useIncidentData({ refreshTrigger: combinedRefreshTrigger });
+
+  // Handle incident updates with debouncing
+  const handleIncidentUpdated = useCallback(() => {
+    console.log('Incident updated, triggering refresh');
+    
+    // Clear any existing timer
+    if (refreshTimerRef.current !== null) {
+      window.clearTimeout(refreshTimerRef.current);
+    }
+    
+    // Set a new timer to debounce multiple quick updates
+    refreshTimerRef.current = window.setTimeout(() => {
+      setManualRefresh(prev => prev + 1);
+      refreshTimerRef.current = null;
+      
+      toast({
+        title: t('incidentUpdated'),
+        description: t('incidentUpdateSuccess'),
+      });
+    }, 300);
+    
+  }, [t, toast]);
+
+  // Handle tab changes
+  const handleTabChange = useCallback((value: string) => {
+    console.log(`Tab changed to: ${value}`);
+    setFilter(value);
+  }, [setFilter]);
+
+  // Handle view incident details
+  const handleViewIncidentDetails = useCallback((incident: IncidentItem) => {
+    setSelectedIncident(incident);
+    setDetailDialogOpen(true);
+  }, []);
+
+  // Handle manual refresh
+  const handleManualRefresh = useCallback(() => {
+    console.log('Manual refresh triggered by user');
+    setManualRefresh(prev => prev + 1);
+  }, []);
+
+  // Handle detail dialog close with refresh
+  const handleDetailDialogClose = useCallback((open: boolean) => {
+    setDetailDialogOpen(open);
+    if (!open) {
+      // When dialog closes, refresh data
+      handleManualRefresh();
+    }
+  }, [handleManualRefresh]);
+
+  // Clean up timer on unmount
+  React.useEffect(() => {
+    return () => {
+      if (refreshTimerRef.current !== null) {
+        window.clearTimeout(refreshTimerRef.current);
+      }
+    };
+  }, []);
+
+  // Show full-page loading state during initial load
+  if (loading && !initialized) {
+    return <LoadingState />;
+  }
+
+  return (
+    <>
+      {/* Overview Cards */}
+      <OverviewCards 
+        overviewStats={overviewStats} 
+        loading={loading} 
+        initialized={initialized} 
+      />
+
+      <Card>
+        <CardHeader>
+          <HeaderActions 
+            onRefresh={handleManualRefresh} 
+            isRefreshing={isRefreshing} 
+          />
+        </CardHeader>
+        <CardContent>
+          <Tabs value={filter} className="w-full" onValueChange={handleTabChange}>
+            <TabsList className="mb-6">
+              <TabsTrigger value="unresolved">{t('unresolvedIncidents')}</TabsTrigger>
+              <TabsTrigger value="resolved">{t('resolvedIncidents')}</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="unresolved" className="space-y-4">
+              <TabContent 
+                error={error}
+                isEmpty={isEmpty}
+                data={incidentData}
+                loading={loading}
+                initialized={initialized}
+                isRefreshing={isRefreshing}
+                onIncidentUpdated={handleIncidentUpdated}
+                onViewDetails={handleViewIncidentDetails}
+                onRefresh={handleManualRefresh}
+              />
+            </TabsContent>
+            
+            <TabsContent value="resolved" className="space-y-4">
+              <TabContent 
+                error={error}
+                isEmpty={isEmpty}
+                data={incidentData}
+                loading={loading}
+                initialized={initialized}
+                isRefreshing={isRefreshing}
+                onIncidentUpdated={handleIncidentUpdated}
+                onViewDetails={handleViewIncidentDetails}
+                onRefresh={handleManualRefresh}
+              />
+            </TabsContent>
+          </Tabs>
+        </CardContent>
+      </Card>
+
+      {/* Incident Detail Dialog */}
+      <IncidentDetailDialog 
+        open={detailDialogOpen}
+        onOpenChange={handleDetailDialogClose}
+        incident={selectedIncident}
+      />
+    </>
+  );
+};
diff --git a/application/src/components/schedule-incident/incident-management/OverviewCards.tsx b/application/src/components/schedule-incident/incident-management/OverviewCards.tsx
new file mode 100644
index 0000000..454c21d
--- /dev/null
+++ b/application/src/components/schedule-incident/incident-management/OverviewCards.tsx
@@ -0,0 +1,67 @@
+
+import React from 'react';
+import { AlertCircle, CheckCircle, Clock, AlertTriangle, Flag } from 'lucide-react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { OverviewCard } from '../common/OverviewCard';
+
+interface OverviewStatsProps {
+  unresolved: number;
+  resolved: number;
+  critical: number;
+  highPriority: number;
+  avgResolutionTime: string;
+}
+
+interface OverviewCardsProps {
+  overviewStats: OverviewStatsProps;
+  loading: boolean;
+  initialized: boolean;
+}
+
+export const OverviewCards: React.FC<OverviewCardsProps> = ({ 
+  overviewStats, 
+  loading, 
+  initialized 
+}) => {
+  const { t } = useLanguage();
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-5 gap-4 mb-6">
+      <OverviewCard
+        title={t('activeIncidents')}
+        value={overviewStats.unresolved.toString()}
+        icon={<AlertCircle className="h-5 w-5 text-white" />}
+        isLoading={loading && initialized}
+        color="red"
+      />
+      <OverviewCard
+        title={t('criticalIssues')}
+        value={overviewStats.critical.toString()}
+        icon={<AlertTriangle className="h-5 w-5 text-white" />}
+        isLoading={loading && initialized}
+        color="amber"
+      />
+      <OverviewCard
+        title={t('highPriority')}
+        value={overviewStats.highPriority.toString()}
+        icon={<Flag className="h-5 w-5 text-white" />}
+        isLoading={loading && initialized}
+        color="orange" 
+      />
+      <OverviewCard
+        title={t('resolvedIncidents')}
+        value={overviewStats.resolved.toString()}
+        icon={<CheckCircle className="h-5 w-5 text-white" />}
+        isLoading={loading && initialized}
+        color="green"
+      />
+      <OverviewCard
+        title={t('avgResolutionTime')}
+        value={overviewStats.avgResolutionTime}
+        icon={<Clock className="h-5 w-5 text-white" />}
+        isLoading={loading && initialized}
+        color="blue"
+      />
+    </div>
+  );
+};
diff --git a/application/src/components/schedule-incident/incident-management/TabContent.tsx b/application/src/components/schedule-incident/incident-management/TabContent.tsx
new file mode 100644
index 0000000..a457694
--- /dev/null
+++ b/application/src/components/schedule-incident/incident-management/TabContent.tsx
@@ -0,0 +1,47 @@
+
+import React from 'react';
+import { IncidentTable } from '../incident/table/IncidentTable';
+import { EmptyIncidentState } from '../incident/EmptyIncidentState';
+import { ErrorState } from './ErrorState';
+import { IncidentItem } from '@/services/incident';
+
+interface TabContentProps {
+  error: string | null;
+  isEmpty: boolean;
+  data: IncidentItem[];
+  loading: boolean;
+  initialized: boolean;
+  isRefreshing: boolean;
+  onIncidentUpdated: () => void;
+  onViewDetails: (incident: IncidentItem) => void;
+  onRefresh: () => void;
+}
+
+export const TabContent: React.FC<TabContentProps> = ({
+  error,
+  isEmpty,
+  data,
+  loading,
+  initialized,
+  isRefreshing,
+  onIncidentUpdated,
+  onViewDetails,
+  onRefresh
+}) => {
+  if (error) {
+    return <ErrorState error={error} onRefresh={onRefresh} isRefreshing={isRefreshing} />;
+  }
+  
+  if (isEmpty) {
+    return <EmptyIncidentState />;
+  }
+  
+  return (
+    <IncidentTable 
+      data={data}
+      onIncidentUpdated={onIncidentUpdated}
+      onViewDetails={onViewDetails}
+      isLoading={loading && initialized}
+    />
+  );
+};
diff --git a/application/src/components/schedule-incident/incident-management/index.ts b/application/src/components/schedule-incident/incident-management/index.ts
new file mode 100644
index 0000000..4ad0804
--- /dev/null
+++ b/application/src/components/schedule-incident/incident-management/index.ts
@@ -0,0 +1,6 @@
+
+export * from './IncidentManagementContainer';
+export * from './OverviewCards';
+export * from './TabContent';
+export * from './ErrorState';
+export * from './HeaderActions';
diff --git a/application/src/components/schedule-incident/incident/CreateIncidentDialog.tsx b/application/src/components/schedule-incident/incident/CreateIncidentDialog.tsx
new file mode 100644
index 0000000..08dbf1c
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/CreateIncidentDialog.tsx
@@ -0,0 +1,96 @@
+
+import React from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Form } from '@/components/ui/form';
+import { useIncidentForm } from './hooks/useIncidentForm';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import {
+  IncidentBasicFields,
+  IncidentAffectedFields,
+  IncidentConfigFields,
+  IncidentDetailsFields,
+} from './form';
+
+interface CreateIncidentDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onIncidentCreated: () => void;
+}
+
+export const CreateIncidentDialog: React.FC<CreateIncidentDialogProps> = ({
+  open,
+  onOpenChange,
+  onIncidentCreated,
+}) => {
+  const { t } = useLanguage();
+  const { form, onSubmit } = useIncidentForm(
+    onIncidentCreated,
+    () => onOpenChange(false)
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[700px] max-h-[90vh]">
+        <ScrollArea className="h-[80vh]">
+          <div className="px-1 py-2">
+            <DialogHeader className="mb-4">
+              <DialogTitle className="text-xl">{t('createIncident')}</DialogTitle>
+              <DialogDescription>
+                {t('createIncidentDesc')}
+              </DialogDescription>
+            </DialogHeader>
+            
+            <Form {...form}>
+              <form onSubmit={onSubmit} className="space-y-6">
+                <div className="space-y-8 pb-4">
+                  <div className="space-y-4">
+                    <h3 className="text-sm font-medium border-b pb-2">{t('basicInfo')}</h3>
+                    <IncidentBasicFields />
+                  </div>
+                  
+                  <div className="space-y-4">
+                    <h3 className="text-sm font-medium border-b pb-2">{t('affectedSystems')}</h3>
+                    <IncidentAffectedFields />
+                  </div>
+                  
+                  <div className="space-y-4">
+                    <h3 className="text-sm font-medium border-b pb-2">{t('configuration')}</h3>
+                    <IncidentConfigFields />
+                  </div>
+                  
+                  <div className="space-y-4">
+                    <h3 className="text-sm font-medium border-b pb-2">{t('resolutionDetails')}</h3>
+                    <IncidentDetailsFields />
+                  </div>
+                  
+                  <DialogFooter className="pt-4 mt-4 border-t">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={() => onOpenChange(false)}
+                    >
+                      {t('cancel')}
+                    </Button>
+                    <Button type="submit">
+                      {form.formState.isSubmitting ? t('creating') : t('create')}
+                    </Button>
+                  </DialogFooter>
+                </div>
+              </form>
+            </Form>
+          </div>
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
diff --git a/application/src/components/schedule-incident/incident/EditIncidentDialog.tsx b/application/src/components/schedule-incident/incident/EditIncidentDialog.tsx
new file mode 100644
index 0000000..4ea6a4a
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/EditIncidentDialog.tsx
@@ -0,0 +1,105 @@
+
+import React from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Form } from '@/components/ui/form';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { useIncidentEditForm } from './hooks/useIncidentEditForm';
+import {
+  IncidentBasicFields,
+  IncidentAffectedFields,
+  IncidentConfigFields,
+  IncidentDetailsFields,
+} from './form';
+import { IncidentItem } from '@/services/incident/types';
+
+interface EditIncidentDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  incident: IncidentItem;
+  onIncidentUpdated: () => void;
+}
+
+export const EditIncidentDialog: React.FC<EditIncidentDialogProps> = ({
+  open,
+  onOpenChange,
+  incident,
+  onIncidentUpdated,
+}) => {
+  const { t } = useLanguage();
+  
+  const handleClose = () => {
+    onOpenChange(false);
+  };
+  
+  const { form, onSubmit } = useIncidentEditForm(
+    incident,
+    onIncidentUpdated,
+    handleClose
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[700px] max-h-[90vh]">
+        <ScrollArea className="h-[80vh]">
+          <div className="px-1 py-2">
+            <DialogHeader className="mb-4">
+              <DialogTitle className="text-xl">{t('editIncident')}</DialogTitle>
+              <DialogDescription>
+                {t('editIncidentDesc')}
+              </DialogDescription>
+            </DialogHeader>
+            
+            <Form {...form}>
+              <form onSubmit={onSubmit} className="space-y-6">
+                <div className="space-y-8 pb-4">
+                  <div className="space-y-4">
+                    <h3 className="text-sm font-medium border-b pb-2">{t('basicInfo')}</h3>
+                    <IncidentBasicFields />
+                  </div>
+                  
+                  <div className="space-y-4">
+                    <h3 className="text-sm font-medium border-b pb-2">{t('affectedSystems')}</h3>
+                    <IncidentAffectedFields />
+                  </div>
+                  
+                  <div className="space-y-4">
+                    <h3 className="text-sm font-medium border-b pb-2">{t('configuration')}</h3>
+                    <IncidentConfigFields />
+                  </div>
+                  
+                  <div className="space-y-4">
+                    <h3 className="text-sm font-medium border-b pb-2">{t('resolutionDetails')}</h3>
+                    <IncidentDetailsFields />
+                  </div>
+                  
+                  <DialogFooter className="pt-4 mt-4 border-t">
+                    <Button
+                      type="button"
+                      variant="outline"
+                      onClick={handleClose}
+                    >
+                      {t('cancel')}
+                    </Button>
+                    <Button type="submit">
+                      {form.formState.isSubmitting ? t('updating') : t('update')}
+                    </Button>
+                  </DialogFooter>
+                </div>
+              </form>
+            </Form>
+          </div>
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
diff --git a/application/src/components/schedule-incident/incident/EmptyIncidentState.tsx b/application/src/components/schedule-incident/incident/EmptyIncidentState.tsx
new file mode 100644
index 0000000..25aefa0
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/EmptyIncidentState.tsx
@@ -0,0 +1,18 @@
+
+import React from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { AlertCircle } from 'lucide-react';
+
+export const EmptyIncidentState = () => {
+  const { t } = useLanguage();
+  
+  return (
+    <div className="flex flex-col items-center justify-center py-12 text-gray-500">
+      <AlertCircle className="w-12 h-12 mb-4" />
+      <h3 className="text-lg font-medium mb-2">{t('noIncidents')}</h3>
+      <p className="text-sm text-center max-w-md">
+        {t('noServices')}
+      </p>
+    </div>
+  );
+};
diff --git a/application/src/components/schedule-incident/incident/IncidentActionsMenu.tsx b/application/src/components/schedule-incident/incident/IncidentActionsMenu.tsx
new file mode 100644
index 0000000..37b6615
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/IncidentActionsMenu.tsx
@@ -0,0 +1,114 @@
+
+import React from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { Button } from '@/components/ui/button';
+import { MoreHorizontal, Eye, Edit, Trash, Check } from 'lucide-react';
+import { useToast } from '@/hooks/use-toast';
+import { updateIncidentStatus, deleteIncident } from '@/services/incident/incidentOperations';
+import { IncidentItem } from '@/services/incident/types';
+
+interface IncidentActionsMenuProps {
+  item: IncidentItem;
+  onIncidentUpdated: () => void;
+  onViewDetails?: (incident: IncidentItem) => void;
+  onEditIncident?: (incident: IncidentItem) => void;
+}
+
+export const IncidentActionsMenu = ({ 
+  item, 
+  onIncidentUpdated,
+  onViewDetails,
+  onEditIncident
+}: IncidentActionsMenuProps) => {
+  const { t } = useLanguage();
+  const { toast } = useToast();
+
+  const handleResolveIncident = async () => {
+    try {
+      await updateIncidentStatus(item.id, 'resolved');
+      toast({
+        title: t('success'),
+        description: t('incidentResolved'),
+      });
+      onIncidentUpdated();
+    } catch (error) {
+      console.error('Error resolving incident:', error);
+      toast({
+        title: t('error'),
+        description: t('errorResolvingIncident'),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleDeleteIncident = async () => {
+    try {
+      await deleteIncident(item.id);
+      toast({
+        title: t('success'),
+        description: t('incidentDeleted'),
+      });
+      onIncidentUpdated();
+    } catch (error) {
+      console.error('Error deleting incident:', error);
+      toast({
+        title: t('error'),
+        description: t('errorDeletingIncident'),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  const handleEditClick = () => {
+    if (onEditIncident) {
+      onEditIncident(item);
+    } else {
+      console.log(`Edit incident ${item.id}`);
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" className="h-8 w-8 p-0">
+          <span className="sr-only">{t('actions')}</span>
+          <MoreHorizontal className="h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="bg-background">
+        <DropdownMenuLabel>{t('actions')}</DropdownMenuLabel>
+        <DropdownMenuSeparator />
+        {onViewDetails && (
+          <DropdownMenuItem onClick={() => onViewDetails(item)}>
+            <Eye className="mr-2 h-4 w-4" />
+            {t('view')}
+          </DropdownMenuItem>
+        )}
+        <DropdownMenuItem onClick={handleEditClick}>
+          <Edit className="mr-2 h-4 w-4" />
+          {t('edit')}
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={handleResolveIncident}>
+          <Check className="mr-2 h-4 w-4" />
+          {t('resolve')}
+        </DropdownMenuItem>
+        <DropdownMenuSeparator />
+        <DropdownMenuItem
+          onClick={handleDeleteIncident}
+          className="text-red-600 focus:text-red-600"
+        >
+          <Trash className="mr-2 h-4 w-4" />
+          {t('delete')}
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
diff --git a/application/src/components/schedule-incident/incident/IncidentStatusBadge.tsx b/application/src/components/schedule-incident/incident/IncidentStatusBadge.tsx
new file mode 100644
index 0000000..3e76f66
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/IncidentStatusBadge.tsx
@@ -0,0 +1,105 @@
+
+import React from 'react';
+import { Badge } from '@/components/ui/badge';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { 
+  AlertCircle, 
+  CheckCircle, 
+  Gauge, 
+  Search, 
+  Wrench,
+  LucideIcon
+} from 'lucide-react';
+
+interface IncidentStatusBadgeProps {
+  status: string;
+}
+
+type StatusConfig = {
+  label: string;
+  variant: 'outline' | 'default' | 'secondary' | 'destructive';
+  icon: LucideIcon;
+  className?: string;
+}
+
+export const IncidentStatusBadge = ({ status }: IncidentStatusBadgeProps) => {
+  const { t } = useLanguage();
+  
+  // Normalize the status string
+  const normalizedStatus = (status || '').toLowerCase();
+  
+  // Status configuration map
+  const statusConfigs: Record<string, StatusConfig> = {
+    'investigating': {
+      label: t('investigating'),
+      variant: 'destructive',
+      icon: Search,
+      className: 'bg-red-100 border-red-200 text-red-700 hover:bg-red-100',
+    },
+    'identified': {
+      label: t('identified'),
+      variant: 'secondary',
+      icon: AlertCircle,
+      className: 'bg-amber-100 border-amber-200 text-amber-700 hover:bg-amber-100',
+    },
+    'found_root_cause': {
+      label: t('rootCauseFound'),
+      variant: 'secondary',
+      icon: AlertCircle,
+      className: 'bg-amber-100 border-amber-200 text-amber-700 hover:bg-amber-100',
+    },
+    'completed': {
+      label: t('completed'),
+      variant: 'default',
+      icon: CheckCircle,
+      className: 'bg-green-100 border-green-200 text-green-700 hover:bg-green-100',
+    },
+    'in_progress': {
+      label: t('inProgress'),
+      variant: 'default',
+      icon: Wrench,
+      className: 'bg-blue-100 border-blue-200 text-blue-700 hover:bg-blue-100',
+    },
+    'inprogress': {
+      label: t('inProgress'),
+      variant: 'default',
+      icon: Wrench,
+      className: 'bg-blue-100 border-blue-200 text-blue-700 hover:bg-blue-100',
+    },
+    'monitoring': {
+      label: t('monitoring'),
+      variant: 'outline',
+      icon: Gauge,
+      className: 'bg-purple-100 border-purple-200 text-purple-700 hover:bg-purple-100',
+    },
+    'resolved': {
+      label: t('resolved'),
+      variant: 'default',
+      icon: CheckCircle,
+      className: 'bg-green-100 border-green-200 text-green-700 hover:bg-green-100',
+    }
+  };
+  
+  // Find the appropriate config, defaulting to investigating if not found
+  const getStatusConfig = (): StatusConfig => {
+    for (const [key, config] of Object.entries(statusConfigs)) {
+      if (normalizedStatus.includes(key)) {
+        return config;
+      }
+    }
+    return statusConfigs['investigating'];
+  };
+  
+  const config = getStatusConfig();
+  const Icon = config.icon;
+  
+  return (
+    <Badge 
+      variant={config.variant} 
+      className={`flex items-center gap-1 ${config.className}`}
+    >
+      <Icon className="h-3 w-3" />
+      <span>{config.label}</span>
+    </Badge>
+  );
+};
diff --git a/application/src/components/schedule-incident/incident/IncidentStatusDropdown.tsx b/application/src/components/schedule-incident/incident/IncidentStatusDropdown.tsx
new file mode 100644
index 0000000..661e23a
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/IncidentStatusDropdown.tsx
@@ -0,0 +1,105 @@
+
+import React from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { AlertCircle, CheckCircle, Gauge, Search, Wrench } from 'lucide-react';
+import { useToast } from '@/hooks/use-toast';
+import { updateIncidentStatus } from '@/services/incident/incidentOperations';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { IncidentStatusBadge } from './IncidentStatusBadge';
+
+interface IncidentStatusDropdownProps {
+  status: string;
+  id: string;
+  onStatusUpdated: () => void;
+  disabled?: boolean;
+}
+
+export const IncidentStatusDropdown = ({
+  status,
+  id,
+  onStatusUpdated,
+  disabled = false
+}: IncidentStatusDropdownProps) => {
+  const { t } = useLanguage();
+  const { toast } = useToast();
+  const [localStatus, setLocalStatus] = React.useState(status);
+
+  // Update local status when prop changes
+  React.useEffect(() => {
+    setLocalStatus(status);
+  }, [status]);
+
+  const statusOptions = [
+    { value: 'investigating', label: t('investigating'), icon: <Search className="h-4 w-4 mr-2" /> },
+    { value: 'identified', label: t('identified'), icon: <AlertCircle className="h-4 w-4 mr-2" /> },
+    { value: 'found_root_cause', label: t('foundRootCause'), icon: <AlertCircle className="h-4 w-4 mr-2" /> },
+    { value: 'in_progress', label: t('inProgress'), icon: <Wrench className="h-4 w-4 mr-2" /> },
+    { value: 'monitoring', label: t('monitoring'), icon: <Gauge className="h-4 w-4 mr-2" /> },
+    { value: 'resolved', label: t('resolved'), icon: <CheckCircle className="h-4 w-4 mr-2" /> },
+  ];
+
+  const handleStatusChange = async (newStatus: string) => {
+    try {
+      // Don't update if the status is the same
+      if (localStatus === newStatus) {
+        return;
+      }
+      
+      console.log(`Changing incident status from ${localStatus} to ${newStatus}`);
+      
+      // Optimistically update the UI immediately
+      setLocalStatus(newStatus);
+      
+      // Make the API call in the background
+      await updateIncidentStatus(id, newStatus);
+      
+      toast({
+        title: t('statusUpdated'),
+        description: t('incidentStatusUpdated'),
+      });
+      
+      // Notify parent components about the status change
+      onStatusUpdated();
+      console.log('Status update complete, UI refresh triggered');
+    } catch (error) {
+      console.error('Error updating incident status:', error);
+      
+      // Revert to the original status on error
+      setLocalStatus(status);
+      
+      toast({
+        title: t('error'),
+        description: t('failedToUpdateStatus'),
+        variant: 'destructive',
+      });
+    }
+  };
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger disabled={disabled} className="w-full cursor-pointer">
+        <IncidentStatusBadge status={localStatus} />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="bg-background border border-border shadow-md z-50">
+        {statusOptions.map((option) => (
+          <DropdownMenuItem
+            key={option.value}
+            className="flex items-center cursor-pointer"
+            onClick={(e) => {
+              e.stopPropagation(); // Prevent event from bubbling to table row click
+              handleStatusChange(option.value);
+            }}
+          >
+            {option.icon}
+            {option.label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
diff --git a/application/src/components/schedule-incident/incident/IncidentTable.tsx b/application/src/components/schedule-incident/incident/IncidentTable.tsx
new file mode 100644
index 0000000..5512abc
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/IncidentTable.tsx
@@ -0,0 +1,3 @@
+
+// Re-export the refactored IncidentTable component
+export { IncidentTable } from './table/IncidentTable';
diff --git a/application/src/components/schedule-incident/incident/detail-dialog/IncidentDetailContent.tsx b/application/src/components/schedule-incident/incident/detail-dialog/IncidentDetailContent.tsx
new file mode 100644
index 0000000..7fe8737
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/detail-dialog/IncidentDetailContent.tsx
@@ -0,0 +1,76 @@
+
+import React from 'react';
+import { IncidentItem } from '@/services/incident/types';
+import { ScrollArea } from '@/components/ui/scroll-area';
+import { IncidentDetailHeader } from './IncidentDetailHeader';
+import { Separator } from '@/components/ui/separator';
+import { 
+  BasicInfoSection, 
+  TimelineSection, 
+  AffectedSystemsSection,
+  ResolutionSection
+} from './sections';
+import { IncidentDetailFooter } from './IncidentDetailFooter';
+import { useQuery } from '@tanstack/react-query';
+import { userService } from '@/services/userService';
+
+interface IncidentDetailContentProps {
+  incident: IncidentItem;
+  onClose: () => void;
+  assignedUser: any | null;
+}
+
+export const IncidentDetailContent = ({ 
+  incident, 
+  onClose, 
+  assignedUser 
+}: IncidentDetailContentProps) => {
+  // Fetch assigned user details if one wasn't provided and there's an assigned_to field
+  const { data: fetchedUser } = useQuery({
+    queryKey: ['user', incident?.assigned_to],
+    queryFn: async () => {
+      if (!incident?.assigned_to) return null;
+      try {
+        return await userService.getUser(incident.assigned_to);
+      } catch (error) {
+        console.error("Failed to fetch assigned user:", error);
+        return null;
+      }
+    },
+    enabled: !!incident?.assigned_to && !assignedUser,
+    staleTime: 300000 // Cache for 5 minutes
+  });
+
+  // Use the provided assignedUser or the one we fetched
+  const userToDisplay = assignedUser || fetchedUser;
+
+  return (
+    <ScrollArea className="h-[80vh] print:h-auto print:overflow-visible">
+      <div className="px-6 py-6">
+        <div className="print-section header-print">
+          <IncidentDetailHeader incident={incident} />
+        </div>
+
+        <div className="space-y-8 print-compact-spacing">
+          <div className="print-section">
+            <BasicInfoSection incident={incident} assignedUser={userToDisplay} />
+          </div>
+          <Separator className="print:border-blue-200" />
+          <div className="print-section">
+            <TimelineSection incident={incident} assignedUser={userToDisplay} />
+          </div>
+          <Separator className="print:border-blue-200" />
+          <div className="print-section">
+            <AffectedSystemsSection incident={incident} assignedUser={userToDisplay} />
+          </div>
+          <Separator className="print:border-blue-200" />
+          <div className="print-section">
+            <ResolutionSection incident={incident} assignedUser={userToDisplay} />
+          </div>
+
+          <IncidentDetailFooter onClose={onClose} incident={incident} />
+        </div>
+      </div>
+    </ScrollArea>
+  );
+};
diff --git a/application/src/components/schedule-incident/incident/detail-dialog/IncidentDetailDialog.tsx b/application/src/components/schedule-incident/incident/detail-dialog/IncidentDetailDialog.tsx
new file mode 100644
index 0000000..e0d26bf
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/detail-dialog/IncidentDetailDialog.tsx
@@ -0,0 +1,54 @@
+
+import React from 'react';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { IncidentItem } from '@/services/incident/types';
+import { useQuery } from '@tanstack/react-query';
+import { userService } from '@/services/userService';
+import { IncidentDetailContent } from './IncidentDetailContent';
+
+interface IncidentDetailDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  incident: IncidentItem | null;
+}
+
+export const IncidentDetailDialog = ({ 
+  open, 
+  onOpenChange, 
+  incident 
+}: IncidentDetailDialogProps) => {
+  // Fetch user data for assigned_to field
+  const { data: users = [] } = useQuery({
+    queryKey: ['users'],
+    queryFn: async () => {
+      const usersList = await userService.getUsers();
+      return Array.isArray(usersList) ? usersList : [];
+    },
+    staleTime: 300000, // Cache for 5 minutes
+    enabled: !!incident?.assigned_to && open // Only run query if there's an assigned_to value and dialog is open
+  });
+
+  // Find the assigned user
+  const assignedUser = incident?.assigned_to 
+    ? users.find(user => user.id === incident.assigned_to) 
+    : null;
+  
+  if (!incident) return null;
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent 
+        className="dialog-content sm:max-w-[700px] max-h-[90vh] p-0
+                  print:max-w-none print:max-h-none print:overflow-visible 
+                  print:shadow-none print:m-0 print:p-0 print:border-none
+                  print:absolute print:left-0 print:top-0 print:w-full print:h-auto"
+      >
+        <IncidentDetailContent 
+          incident={incident}
+          onClose={() => onOpenChange(false)}
+          assignedUser={assignedUser}
+        />
+      </DialogContent>
+    </Dialog>
+  );
+};
diff --git a/application/src/components/schedule-incident/incident/detail-dialog/IncidentDetailFooter.tsx b/application/src/components/schedule-incident/incident/detail-dialog/IncidentDetailFooter.tsx
new file mode 100644
index 0000000..e2bbcce
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/detail-dialog/IncidentDetailFooter.tsx
@@ -0,0 +1,31 @@
+
+import React from 'react';
+import { IncidentItem } from '@/services/incident';
+import { Separator } from '@/components/ui/separator';
+import { CloseButton, DownloadPdfButton, PrintButton } from './components';
+import { useLanguage } from '@/contexts/LanguageContext';
+
+interface IncidentDetailFooterProps {
+  onClose: () => void;
+  incident: IncidentItem;
+}
+
+export const IncidentDetailFooter: React.FC<IncidentDetailFooterProps> = ({
+  onClose,
+  incident,
+}) => {
+  const { t } = useLanguage();
+
+  return (
+    <div className="print:hidden">
+      <Separator className="my-6" />
+      <div className="flex justify-between items-center">
+        <CloseButton onClose={onClose} />
+        <div className="flex gap-2">
+          <DownloadPdfButton incident={incident} />
+          <PrintButton />
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/application/src/components/schedule-incident/incident/detail-dialog/IncidentDetailHeader.tsx b/application/src/components/schedule-incident/incident/detail-dialog/IncidentDetailHeader.tsx
new file mode 100644
index 0000000..ee34373
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/detail-dialog/IncidentDetailHeader.tsx
@@ -0,0 +1,19 @@
+
+import React from 'react';
+import { DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { IncidentItem } from '@/services/incident/types';
+
+interface IncidentDetailHeaderProps {
+  incident: IncidentItem;
+}
+
+export const IncidentDetailHeader = ({ incident }: IncidentDetailHeaderProps) => {
+  return (
+    <DialogHeader className="mb-4">
+      <div className="flex items-center gap-2">
+        <DialogTitle className="text-xl">{incident.title || 'Incident Details'}</DialogTitle>
+        <span className="text-sm text-muted-foreground">#{incident.id}</span>
+      </div>
+    </DialogHeader>
+  );
+};
diff --git a/application/src/components/schedule-incident/incident/detail-dialog/IncidentDetailSections.tsx b/application/src/components/schedule-incident/incident/detail-dialog/IncidentDetailSections.tsx
new file mode 100644
index 0000000..b33f15e
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/detail-dialog/IncidentDetailSections.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { IncidentItem } from '@/services/incident';
+import { Separator } from '@/components/ui/separator';
+import { useQuery } from '@tanstack/react-query';
+import { userService } from '@/services/userService';
+
+// Import all section components from the new location
+import {
+  BasicInfoSection,
+  TimelineSection,
+  AffectedSystemsSection,
+  ResolutionSection
+} from './sections';
+
+// Re-export all section components for compatibility with existing imports
+export {
+  BasicInfoSection,
+  TimelineSection,
+  AffectedSystemsSection,
+  ResolutionSection
+};
+
+// Legacy component - keeping this for backward compatibility with other imports
+export const IncidentDetailSections = ({ incident }: { incident: IncidentItem | null }) => {
+  // Fetch assigned user details if there's an assigned_to field
+  const { data: assignedUser } = useQuery({
+    queryKey: ['user', incident?.assigned_to],
+    queryFn: async () => {
+      if (!incident?.assigned_to) return null;
+      try {
+        return await userService.getUser(incident.assigned_to);
+      } catch (error) {
+        console.error("Failed to fetch assigned user:", error);
+        return null;
+      }
+    },
+    enabled: !!incident?.assigned_to,
+    staleTime: 300000 // Cache for 5 minutes
+  });
+
+  if (!incident) return null;
+
+  return (
+    <div className="space-y-6">
+      <BasicInfoSection incident={incident} assignedUser={assignedUser} />
+      <Separator />
+      <TimelineSection incident={incident} assignedUser={assignedUser} />
+      <Separator />
+      <AffectedSystemsSection incident={incident} assignedUser={assignedUser} />
+      <Separator />
+      <ResolutionSection incident={incident} assignedUser={assignedUser} />
+    </div>
+  );
+};
diff --git a/application/src/components/schedule-incident/incident/detail-dialog/components/CloseButton.tsx b/application/src/components/schedule-incident/incident/detail-dialog/components/CloseButton.tsx
new file mode 100644
index 0000000..bec23d4
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/detail-dialog/components/CloseButton.tsx
@@ -0,0 +1,26 @@
+
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { useLanguage } from '@/contexts/LanguageContext';
+
+interface CloseButtonProps {
+  onClose: () => void;
+  className?: string;
+}
+
+export const CloseButton: React.FC<CloseButtonProps> = ({ 
+  onClose,
+  className 
+}) => {
+  const { t } = useLanguage();
+  
+  return (
+    <Button 
+      variant="secondary" 
+      onClick={onClose} 
+      className={className}
+    >
+      {t('close', 'common')}
+    </Button>
+  );
+};
diff --git a/application/src/components/schedule-incident/incident/detail-dialog/components/DownloadPdfButton.tsx b/application/src/components/schedule-incident/incident/detail-dialog/components/DownloadPdfButton.tsx
new file mode 100644
index 0000000..d3b3ebe
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/detail-dialog/components/DownloadPdfButton.tsx
@@ -0,0 +1,31 @@
+
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { Download } from 'lucide-react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { useDownloadIncidentPdf } from '../hooks';
+import { IncidentItem } from '@/services/incident';
+
+interface DownloadPdfButtonProps {
+  incident: IncidentItem;
+  className?: string;
+}
+
+export const DownloadPdfButton: React.FC<DownloadPdfButtonProps> = ({ 
+  incident, 
+  className 
+}) => {
+  const { t } = useLanguage();
+  const { handleDownloadPDF } = useDownloadIncidentPdf();
+  
+  return (
+    <Button
+      className={`flex items-center gap-2 ${className || ''}`}
+      onClick={() => handleDownloadPDF(incident)}
+      variant="outline"
+    >
+      <Download className="h-4 w-4" />
+      {t('downloadPdf', 'incident')}
+    </Button>
+  );
+};
diff --git a/application/src/components/schedule-incident/incident/detail-dialog/components/PrintButton.tsx b/application/src/components/schedule-incident/incident/detail-dialog/components/PrintButton.tsx
new file mode 100644
index 0000000..27aa1b4
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/detail-dialog/components/PrintButton.tsx
@@ -0,0 +1,26 @@
+
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { Printer } from 'lucide-react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { usePrintIncident } from '../hooks';
+
+interface PrintButtonProps {
+  className?: string;
+}
+
+export const PrintButton: React.FC<PrintButtonProps> = ({ className }) => {
+  const { t } = useLanguage();
+  const { handlePrint } = usePrintIncident();
+  
+  return (
+    <Button
+      className={`flex items-center gap-2 ${className || ''}`}
+      onClick={handlePrint}
+      variant="default"
+    >
+      <Printer className="h-4 w-4" />
+      {t('print', 'incident')}
+    </Button>
+  );
+};
diff --git a/application/src/components/schedule-incident/incident/detail-dialog/components/index.ts b/application/src/components/schedule-incident/incident/detail-dialog/components/index.ts
new file mode 100644
index 0000000..b66885a
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/detail-dialog/components/index.ts
@@ -0,0 +1,4 @@
+
+export * from './PrintButton';
+export * from './DownloadPdfButton';
+export * from './CloseButton';
diff --git a/application/src/components/schedule-incident/incident/detail-dialog/hooks/index.ts b/application/src/components/schedule-incident/incident/detail-dialog/hooks/index.ts
new file mode 100644
index 0000000..2862893
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/detail-dialog/hooks/index.ts
@@ -0,0 +1,3 @@
+
+export * from './usePrintIncident';
+export * from './useDownloadIncidentPdf';
diff --git a/application/src/components/schedule-incident/incident/detail-dialog/hooks/useDownloadIncidentPdf.ts b/application/src/components/schedule-incident/incident/detail-dialog/hooks/useDownloadIncidentPdf.ts
new file mode 100644
index 0000000..8762384
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/detail-dialog/hooks/useDownloadIncidentPdf.ts
@@ -0,0 +1,29 @@
+
+import { useToast } from '@/hooks/use-toast';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { IncidentItem, incidentService } from '@/services/incident';
+
+export const useDownloadIncidentPdf = () => {
+  const { toast } = useToast();
+  const { t } = useLanguage();
+  
+  const handleDownloadPDF = async (incident: IncidentItem) => {
+    try {
+      await incidentService.generateIncidentPDF(incident);
+      
+      toast({
+        title: t('success'),
+        description: t('pdfDownloaded'),
+      });
+    } catch (error) {
+      console.error("Error generating PDF:", error);
+      toast({
+        title: t('error'),
+        description: t('pdfGenerationFailed'),
+        variant: 'destructive',
+      });
+    }
+  };
+  
+  return { handleDownloadPDF };
+};
diff --git a/application/src/components/schedule-incident/incident/detail-dialog/hooks/usePrintIncident.ts b/application/src/components/schedule-incident/incident/detail-dialog/hooks/usePrintIncident.ts
new file mode 100644
index 0000000..f9554dd
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/detail-dialog/hooks/usePrintIncident.ts
@@ -0,0 +1,173 @@
+
+import React from 'react';
+import { useToast } from '@/hooks/use-toast';
+import { useLanguage } from '@/contexts/LanguageContext';
+
+export const usePrintIncident = () => {
+  const { toast } = useToast();
+  const { t } = useLanguage();
+  
+  const handlePrint = React.useCallback(() => {
+    try {
+      // Add print-specific stylesheet temporarily
+      const style = document.createElement('style');
+      style.id = 'print-style';
+      style.textContent = `
+        @page {
+          size: A4;
+          margin: 10mm;
+        }
+        @media print {
+          body * {
+            visibility: hidden;
+          }
+          
+          .dialog-content, .dialog-content * {
+            visibility: visible;
+          }
+          
+          .dialog-content {
+            position: absolute !important;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: auto;
+            padding: 15mm !important;
+            margin: 0 !important;
+            background-color: white !important;
+            box-shadow: none;
+            overflow: visible !important;
+            display: block !important;
+            transform: none !important;
+          }
+          
+          /* Remove any black backgrounds */
+          html, body {
+            background-color: white !important;
+            color: black !important;
+          }
+          
+          /* Optimize spacing for single page */
+          .print-section {
+            margin-bottom: 2mm !important;
+            page-break-inside: avoid !important;
+          }
+          
+          /* Reduce vertical spacing */
+          h4 {
+            margin-bottom: 1mm !important;
+            margin-top: 1mm !important;
+            color: #1e40af !important; /* blue-800 */
+            font-weight: bold !important;
+          }
+          
+          .print-compact-text {
+            font-size: 9pt !important;
+            line-height: 1.2 !important;
+          }
+          
+          .print-compact-spacing > * {
+            margin-top: 1mm !important;
+            margin-bottom: 1mm !important;
+          }
+          
+          .print-grid {
+            display: grid !important;
+            grid-template-columns: 1fr 1fr !important;
+            gap: 1mm !important;
+          }
+          
+          .badge-print {
+            background-color: #dbeafe !important; /* blue-100 */
+            color: #1e40af !important; /* blue-800 */
+            border: 1px solid #93c5fd !important; /* blue-300 */
+            padding: 0.5mm 1mm !important;
+            margin: 0.5mm !important;
+            display: inline-block !important;
+            font-size: 8pt !important;
+          }
+          
+          /* More compact spacing */
+          .print-compact-margin {
+            margin: 1mm 0 !important;
+          }
+          
+          .print-smaller-font {
+            font-size: 8pt !important;
+          }
+          
+          .header-print {
+            background-color: #1e40af !important; /* blue-800 */
+            color: #ffffff !important;
+            padding: 2mm 3mm !important;
+            margin-bottom: 2mm !important;
+          }
+          
+          /* More compact header */
+          .header-print h1 {
+            font-size: 12pt !important;
+            margin-bottom: 0 !important;
+          }
+          
+          .header-print p {
+            font-size: 9pt !important;
+            margin-top: 1mm !important;
+          }
+          
+          /* Footer stays at bottom */
+          .footer-print {
+            font-size: 7pt !important;
+            color: #6b7280 !important; /* gray-500 */
+            border-top: 1px solid #e5e7eb !important; /* gray-200 */
+            position: fixed !important;
+            bottom: 10mm !important;
+            left: 15mm !important;
+            right: 15mm !important;
+            padding-top: 2mm !important;
+            background-color: white !important;
+          }
+          
+          /* Hide any unnecessary elements */
+          .print-hide {
+            display: none !important;
+          }
+          
+          /* Optimize description text */
+          .print-description {
+            max-height: 100px !important;
+            overflow: hidden !important;
+            text-overflow: ellipsis !important;
+          }
+        }
+      `;
+      document.head.appendChild(style);
+
+      // Wait a bit to ensure styles are applied
+      setTimeout(() => {
+        window.print();
+        
+        // Remove the style after printing dialog closes
+        setTimeout(() => {
+          const printStyle = document.getElementById('print-style');
+          if (printStyle) {
+            printStyle.remove();
+          }
+        }, 1000);
+      }, 100);
+
+      toast({
+        title: t('success'),
+        description: t('printJobStarted'),
+      });
+    } catch (error) {
+      console.error("Error printing:", error);
+      toast({
+        title: t('error'),
+        description: t('printingFailed'),
+        variant: 'destructive',
+      });
+    }
+  }, [t, toast]);
+  
+  return { handlePrint };
+};
diff --git a/application/src/components/schedule-incident/incident/detail-dialog/index.ts b/application/src/components/schedule-incident/incident/detail-dialog/index.ts
new file mode 100644
index 0000000..6d33ea6
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/detail-dialog/index.ts
@@ -0,0 +1,6 @@
+
+export * from './IncidentDetailDialog';
+export * from './IncidentDetailHeader';
+export * from './IncidentDetailContent';
+export * from './IncidentDetailSections';
+export * from './IncidentDetailFooter';
diff --git a/application/src/components/schedule-incident/incident/detail-dialog/sections/AffectedSystemsSection.tsx b/application/src/components/schedule-incident/incident/detail-dialog/sections/AffectedSystemsSection.tsx
new file mode 100644
index 0000000..a029b94
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/detail-dialog/sections/AffectedSystemsSection.tsx
@@ -0,0 +1,66 @@
+
+import React from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { IncidentItem } from '@/services/incident';
+import { Badge } from '@/components/ui/badge';
+import { getAffectedSystemsArray } from './utils';
+
+interface AffectedSystemsSectionProps {
+  incident: IncidentItem | null;
+  assignedUser?: any | null;
+}
+
+export const AffectedSystemsSection: React.FC<AffectedSystemsSectionProps> = ({ incident }) => {
+  const { t } = useLanguage();
+  
+  if (!incident) return null;
+  
+  return (
+    <div className="space-y-2">
+      <h3 className="font-semibold text-lg">{t('affectedSystems')}</h3>
+      
+      <div className="space-y-4">
+        <div>
+          <h4 className="text-sm font-medium text-muted-foreground">{t('systems')}</h4>
+          <div className="mt-1 flex flex-wrap gap-1">
+            {getAffectedSystemsArray(incident.affected_systems).map((system, idx) => (
+              <Badge key={idx} variant="outline">{system}</Badge>
+            ))}
+            {getAffectedSystemsArray(incident.affected_systems).length === 0 && 
+              <span className="text-muted-foreground italic">{t('noSystems')}</span>
+            }
+          </div>
+        </div>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <h4 className="text-sm font-medium text-muted-foreground">{t('impact')}</h4>
+            <div className="mt-1">
+              <Badge variant={
+                incident.impact?.toLowerCase() === 'critical' ? 'destructive' :
+                incident.impact?.toLowerCase() === 'high' ? 'default' :
+                incident.impact?.toLowerCase() === 'medium' ? 'secondary' : 'outline'
+              }>
+                {t(incident.impact?.toLowerCase() || 'low')}
+              </Badge>
+            </div>
+          </div>
+          
+          <div>
+            <h4 className="text-sm font-medium text-muted-foreground">{t('priority')}</h4>
+            <div className="mt-1">
+              <Badge variant={
+                incident.priority?.toLowerCase() === 'critical' ? 'destructive' :
+                incident.priority?.toLowerCase() === 'high' ? 'default' :
+                incident.priority?.toLowerCase() === 'medium' ? 'secondary' : 'outline'
+              }>
+                {t(incident.priority?.toLowerCase() || 'low')}
+              </Badge>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
diff --git a/application/src/components/schedule-incident/incident/detail-dialog/sections/AssignmentSection.tsx b/application/src/components/schedule-incident/incident/detail-dialog/sections/AssignmentSection.tsx
new file mode 100644
index 0000000..2b41230
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/detail-dialog/sections/AssignmentSection.tsx
@@ -0,0 +1,44 @@
+
+import React from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { IncidentItem } from '@/services/incident';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { User } from '@/services/userService';
+import { getUserInitials } from './utils';
+
+interface AssignmentSectionProps {
+  incident: IncidentItem | null;
+  assignedUser?: User | null;
+}
+
+export const AssignmentSection: React.FC<AssignmentSectionProps> = ({ incident, assignedUser }) => {
+  const { t } = useLanguage();
+  
+  if (!incident) return null;
+  
+  return (
+    <div className="space-y-2">
+      <h3 className="font-semibold text-lg">{t('assignment')}</h3>
+      
+      <div>
+        <h4 className="text-sm font-medium text-muted-foreground">{t('assignedTo')}</h4>
+        <div className="mt-1">
+          {assignedUser ? (
+            <div className="flex items-center gap-2">
+              <Avatar className="h-6 w-6">
+                <AvatarImage src={assignedUser.avatar} alt={assignedUser.full_name || assignedUser.username} />
+                <AvatarFallback>{getUserInitials(assignedUser)}</AvatarFallback>
+              </Avatar>
+              <span>{assignedUser.full_name || assignedUser.username}</span>
+            </div>
+          ) : incident.assigned_to ? (
+            <span>{incident.assigned_to}</span>
+          ) : (
+            <span className="text-muted-foreground italic">{t('unassigned')}</span>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
diff --git a/application/src/components/schedule-incident/incident/detail-dialog/sections/BasicInfoSection.tsx b/application/src/components/schedule-incident/incident/detail-dialog/sections/BasicInfoSection.tsx
new file mode 100644
index 0000000..e343a2d
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/detail-dialog/sections/BasicInfoSection.tsx
@@ -0,0 +1,69 @@
+
+import React from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { IncidentItem } from '@/services/incident';
+import { User } from '@/services/userService';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { IncidentStatusBadge } from '../../IncidentStatusBadge';
+import { getUserInitials } from './utils';
+
+interface BasicInfoSectionProps {
+  incident: IncidentItem | null;
+  assignedUser?: User | null;
+}
+
+export const BasicInfoSection: React.FC<BasicInfoSectionProps> = ({ incident, assignedUser }) => {
+  const { t } = useLanguage();
+  
+  if (!incident) return null;
+  
+  return (
+    <div className="space-y-2 print-compact-text">
+      <h3 className="font-semibold text-lg">{t('basicInfo')}</h3>
+      
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4 print-grid">
+        <div>
+          <h4 className="text-sm font-medium text-muted-foreground">{t('title')}</h4>
+          <p className="mt-1">{incident.title || '-'}</p>
+        </div>
+        
+        <div>
+          <h4 className="text-sm font-medium text-muted-foreground">{t('status')}</h4>
+          <div className="mt-1">
+            <IncidentStatusBadge status={incident.status || incident.impact_status || 'investigating'} />
+          </div>
+        </div>
+        
+        <div>
+          <h4 className="text-sm font-medium text-muted-foreground">{t('serviceId')}</h4>
+          <p className="mt-1">{incident.service_id || '-'}</p>
+        </div>
+        
+        <div>
+          <h4 className="text-sm font-medium text-muted-foreground">{t('assignedTo')}</h4>
+          <div className="mt-1">
+            {assignedUser ? (
+              <div className="flex items-center gap-2">
+                <Avatar className="h-6 w-6">
+                  <AvatarImage src={assignedUser.avatar} alt={assignedUser.full_name || assignedUser.username} />
+                  <AvatarFallback>{getUserInitials(assignedUser)}</AvatarFallback>
+                </Avatar>
+                <span>{assignedUser.full_name || assignedUser.username}</span>
+              </div>
+            ) : incident.assigned_to ? (
+              <span>{incident.assigned_to}</span>
+            ) : (
+              <span className="text-muted-foreground italic">{t('unassigned')}</span>
+            )}
+          </div>
+        </div>
+      </div>
+        
+      <div className="mt-2">
+        <h4 className="text-sm font-medium text-muted-foreground">{t('description')}</h4>
+        <p className="mt-1 whitespace-pre-line print-description">{incident.description || '-'}</p>
+      </div>
+    </div>
+  );
+};
+
diff --git a/application/src/components/schedule-incident/incident/detail-dialog/sections/ImpactAnalysisSection.tsx b/application/src/components/schedule-incident/incident/detail-dialog/sections/ImpactAnalysisSection.tsx
new file mode 100644
index 0000000..2e9fe90
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/detail-dialog/sections/ImpactAnalysisSection.tsx
@@ -0,0 +1,51 @@
+
+import React from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { IncidentItem } from '@/services/incident';
+import { Badge } from '@/components/ui/badge';
+
+interface ImpactAnalysisSectionProps {
+  incident: IncidentItem | null;
+  assignedUser?: any | null;
+}
+
+export const ImpactAnalysisSection: React.FC<ImpactAnalysisSectionProps> = ({ incident }) => {
+  const { t } = useLanguage();
+  
+  if (!incident) return null;
+  
+  return (
+    <div className="space-y-2">
+      <h3 className="font-semibold text-lg">{t('impactAnalysis')}</h3>
+      
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <h4 className="text-sm font-medium text-muted-foreground">{t('impact')}</h4>
+          <div className="mt-1">
+            <Badge variant={
+              incident.impact?.toLowerCase() === 'critical' ? 'destructive' :
+              incident.impact?.toLowerCase() === 'high' ? 'default' :
+              incident.impact?.toLowerCase() === 'medium' ? 'secondary' : 'outline'
+            }>
+              {t(incident.impact?.toLowerCase() || 'low')}
+            </Badge>
+          </div>
+        </div>
+        
+        <div>
+          <h4 className="text-sm font-medium text-muted-foreground">{t('priority')}</h4>
+          <div className="mt-1">
+            <Badge variant={
+              incident.priority?.toLowerCase() === 'critical' ? 'destructive' :
+              incident.priority?.toLowerCase() === 'high' ? 'default' :
+              incident.priority?.toLowerCase() === 'medium' ? 'secondary' : 'outline'
+            }>
+              {t(incident.priority?.toLowerCase() || 'low')}
+            </Badge>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
diff --git a/application/src/components/schedule-incident/incident/detail-dialog/sections/ResolutionSection.tsx b/application/src/components/schedule-incident/incident/detail-dialog/sections/ResolutionSection.tsx
new file mode 100644
index 0000000..7f94059
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/detail-dialog/sections/ResolutionSection.tsx
@@ -0,0 +1,39 @@
+
+import React from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { IncidentItem } from '@/services/incident';
+
+interface ResolutionSectionProps {
+  incident: IncidentItem | null;
+  assignedUser?: any | null;
+}
+
+export const ResolutionSection: React.FC<ResolutionSectionProps> = ({ incident }) => {
+  const { t } = useLanguage();
+  
+  if (!incident) return null;
+  
+  return (
+    <div className="space-y-2">
+      <h3 className="font-semibold text-lg">{t('resolutionDetails')}</h3>
+      
+      <div className="space-y-4">
+        <div>
+          <h4 className="text-sm font-medium text-muted-foreground">{t('rootCause')}</h4>
+          <p className="mt-1 whitespace-pre-line">{incident.root_cause || '-'}</p>
+        </div>
+        
+        <div>
+          <h4 className="text-sm font-medium text-muted-foreground">{t('resolutionSteps')}</h4>
+          <p className="mt-1 whitespace-pre-line">{incident.resolution_steps || '-'}</p>
+        </div>
+        
+        <div>
+          <h4 className="text-sm font-medium text-muted-foreground">{t('lessonsLearned')}</h4>
+          <p className="mt-1 whitespace-pre-line">{incident.lessons_learned || '-'}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
diff --git a/application/src/components/schedule-incident/incident/detail-dialog/sections/TimelineSection.tsx b/application/src/components/schedule-incident/incident/detail-dialog/sections/TimelineSection.tsx
new file mode 100644
index 0000000..2f2b203
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/detail-dialog/sections/TimelineSection.tsx
@@ -0,0 +1,45 @@
+
+import React from 'react';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { IncidentItem } from '@/services/incident';
+import { formatDate } from './utils';
+
+interface TimelineSectionProps {
+  incident: IncidentItem | null;
+  assignedUser?: any | null;
+}
+
+export const TimelineSection: React.FC<TimelineSectionProps> = ({ incident }) => {
+  const { t } = useLanguage();
+  
+  if (!incident) return null;
+  
+  return (
+    <div className="space-y-2">
+      <h3 className="font-semibold text-lg">{t('timeline')}</h3>
+      
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <div>
+          <h4 className="text-sm font-medium text-muted-foreground">{t('created')}</h4>
+          <p className="mt-1">{formatDate(incident.created)}</p>
+        </div>
+        
+        <div>
+          <h4 className="text-sm font-medium text-muted-foreground">{t('lastUpdated')}</h4>
+          <p className="mt-1">{formatDate(incident.updated)}</p>
+        </div>
+        
+        <div>
+          <h4 className="text-sm font-medium text-muted-foreground">{t('incidentTime')}</h4>
+          <p className="mt-1">{formatDate(incident.timestamp)}</p>
+        </div>
+        
+        <div>
+          <h4 className="text-sm font-medium text-muted-foreground">{t('resolutionTime')}</h4>
+          <p className="mt-1">{formatDate(incident.resolution_time)}</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
diff --git a/application/src/components/schedule-incident/incident/detail-dialog/sections/index.ts b/application/src/components/schedule-incident/incident/detail-dialog/sections/index.ts
new file mode 100644
index 0000000..a3245ff
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/detail-dialog/sections/index.ts
@@ -0,0 +1,7 @@
+
+// Export all section components
+export * from './BasicInfoSection';
+export * from './TimelineSection';
+export * from './AffectedSystemsSection';
+export * from './ResolutionSection';
+export * from './utils';
diff --git a/application/src/components/schedule-incident/incident/detail-dialog/sections/utils.ts b/application/src/components/schedule-incident/incident/detail-dialog/sections/utils.ts
new file mode 100644
index 0000000..b4409e1
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/detail-dialog/sections/utils.ts
@@ -0,0 +1,32 @@
+
+import { User } from '@/services/userService';
+import { format } from 'date-fns';
+
+// Helper function to get user initials
+export const getUserInitials = (user: User): string => {
+  if (user.full_name) {
+    const nameParts = user.full_name.split(' ');
+    if (nameParts.length > 1) {
+      return `${nameParts[0][0]}${nameParts[1][0]}`.toUpperCase();
+    }
+    return user.full_name.substring(0, 2).toUpperCase();
+  }
+  return user.username.substring(0, 2).toUpperCase();
+};
+
+// Format date helper
+export const formatDate = (dateStr?: string) => {
+  if (!dateStr) return '-';
+  try {
+    return format(new Date(dateStr), 'PPp');
+  } catch (error) {
+    console.error('Error formatting date:', dateStr, error);
+    return dateStr;
+  }
+};
+
+// Get affected systems helper
+export const getAffectedSystemsArray = (systems?: string) => {
+  if (!systems) return [];
+  return systems.split(',').map(system => system.trim()).filter(Boolean);
+};
diff --git a/application/src/components/schedule-incident/incident/form/IncidentAffectedFields.tsx b/application/src/components/schedule-incident/incident/form/IncidentAffectedFields.tsx
new file mode 100644
index 0000000..8213bc2
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/form/IncidentAffectedFields.tsx
@@ -0,0 +1,56 @@
+
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { IncidentFormValues } from '../hooks/useIncidentForm';
+import {
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+
+export const IncidentAffectedFields: React.FC = () => {
+  const { t } = useLanguage();
+  const { control } = useFormContext<IncidentFormValues>();
+
+  return (
+    <div className="space-y-4">
+      <FormField
+        control={control}
+        name="affected_systems"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('affectedSystems')}</FormLabel>
+            <FormControl>
+              <Input placeholder={t('enterAffectedSystems')} {...field} />
+            </FormControl>
+            <FormMessage />
+            <p className="text-sm text-muted-foreground">{t('separateSystemsWithComma')}</p>
+          </FormItem>
+        )}
+      />
+      
+      <FormField
+        control={control}
+        name="root_cause"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('rootCause')}</FormLabel>
+            <FormControl>
+              <Textarea 
+                placeholder={t('enterRootCause')}
+                className="min-h-[80px]"
+                {...field} 
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+};
diff --git a/application/src/components/schedule-incident/incident/form/IncidentBasicFields.tsx b/application/src/components/schedule-incident/incident/form/IncidentBasicFields.tsx
new file mode 100644
index 0000000..33b35d5
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/form/IncidentBasicFields.tsx
@@ -0,0 +1,201 @@
+
+import React, { useEffect } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { IncidentFormValues } from '../hooks/useIncidentForm';
+import {
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { useQuery } from '@tanstack/react-query';
+import { userService } from '@/services/userService';
+import { Badge } from '@/components/ui/badge';
+import { X, Users } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+
+export const IncidentBasicFields: React.FC = () => {
+  const { t } = useLanguage();
+  const form = useFormContext<IncidentFormValues>();
+  const currentAssignedUserId = form.watch('assigned_to');
+
+  // For assigned users functionality
+  const [selectedUserIds, setSelectedUserIds] = React.useState<string[]>([]);
+
+  // Update selectedUserIds when form value changes (for edit mode)
+  useEffect(() => {
+    if (currentAssignedUserId) {
+      setSelectedUserIds([currentAssignedUserId]);
+    }
+  }, [currentAssignedUserId]);
+
+  // Fetch users for assignment
+  const { data: users = [], isLoading } = useQuery({
+    queryKey: ['users'],
+    queryFn: async () => {
+      try {
+        const usersList = await userService.getUsers();
+        console.log("Fetched users for incident assignment:", usersList);
+        return Array.isArray(usersList) ? usersList : [];
+      } catch (error) {
+        console.error("Failed to fetch users:", error);
+        return [];
+      }
+    },
+    staleTime: 300000 // Cache for 5 minutes
+  });
+
+  // Add user to assigned_to
+  const addUser = (userId: string) => {
+    // For now, we're using a single user assignment
+    console.log("Setting user ID in form:", userId);
+    form.setValue('assigned_to', userId, { shouldValidate: true, shouldDirty: true });
+    setSelectedUserIds([userId]);
+  };
+
+  // Remove assigned user
+  const removeUser = () => {
+    form.setValue('assigned_to', '', { shouldValidate: true, shouldDirty: true });
+    setSelectedUserIds([]);
+  };
+
+  // Get selected user data
+  const selectedUser = users.find(user => user.id === form.getValues('assigned_to'));
+
+  // Function to get user initials from name
+  const getUserInitials = (user: any): string => {
+    if (user.full_name) {
+      const nameParts = user.full_name.split(' ');
+      if (nameParts.length > 1) {
+        return `${nameParts[0][0]}${nameParts[1][0]}`.toUpperCase();
+      }
+      return user.full_name.substring(0, 2).toUpperCase();
+    }
+    return user.username.substring(0, 2).toUpperCase();
+  };
+
+  return (
+    <div className="space-y-4">
+      <FormField
+        control={form.control}
+        name="title"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('title')}</FormLabel>
+            <FormControl>
+              <Input placeholder={t('enterIncidentTitle')} {...field} />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      
+      <FormField
+        control={form.control}
+        name="description"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('description')}</FormLabel>
+            <FormControl>
+              <Textarea 
+                placeholder={t('enterIncidentDescription')}
+                className="min-h-[100px]"
+                {...field} 
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      
+      <FormField
+        control={form.control}
+        name="service_id"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('serviceId')}</FormLabel>
+            <FormControl>
+              <Input placeholder={t('enterServiceId')} {...field} />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      
+      <FormField
+        control={form.control}
+        name="assigned_to"
+        render={({ field }) => (
+          <FormItem className="flex flex-col">
+            <FormLabel className="flex items-center gap-1">
+              <Users className="h-4 w-4" /> {t('assignedTo')}
+            </FormLabel>
+            <div className="space-y-3">
+              <FormControl>
+                <select
+                  id="assigned-user-select"
+                  className="w-full h-10 rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                  value={field.value || ""}
+                  onChange={(e) => {
+                    const selectedValue = e.target.value;
+                    console.log("Selected user ID:", selectedValue);
+                    if (selectedValue) {
+                      addUser(selectedValue);
+                    }
+                  }}
+                  onBlur={field.onBlur}
+                  disabled={field.disabled}
+                  name={field.name}
+                >
+                  <option value="">{t('selectAssignedUser')}</option>
+                  {users.map(user => (
+                    <option 
+                      key={user.id} 
+                      value={user.id}
+                    >
+                      {user.full_name || user.username}
+                    </option>
+                  ))}
+                </select>
+              </FormControl>
+
+              {selectedUser ? (
+                <div className="flex flex-wrap gap-2 mt-2 border p-2 rounded-md bg-muted/50">
+                  <Badge key={selectedUser.id} variant="secondary" className="flex items-center gap-1 py-1 px-2">
+                    <Avatar className="h-5 w-5 mr-1">
+                      <AvatarImage src={selectedUser.avatar} alt={selectedUser.full_name || selectedUser.username} />
+                      <AvatarFallback className="text-[10px]">
+                        {getUserInitials(selectedUser)}
+                      </AvatarFallback>
+                    </Avatar>
+                    <span>{selectedUser.full_name || selectedUser.username}</span>
+                    <Button 
+                      variant="ghost" 
+                      size="icon" 
+                      className="h-4 w-4 p-0 ml-1 hover:bg-transparent hover:opacity-70"
+                      onClick={removeUser}
+                      type="button"
+                    >
+                      <X className="h-3 w-3" />
+                      <span className="sr-only">{t('remove')}</span>
+                    </Button>
+                  </Badge>
+                </div>
+              ) : (
+                <div className="text-sm text-muted-foreground italic p-2">
+                  {t('noAssignedUser')}
+                </div>
+              )}
+            </div>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+};
diff --git a/application/src/components/schedule-incident/incident/form/IncidentConfigFields.tsx b/application/src/components/schedule-incident/incident/form/IncidentConfigFields.tsx
new file mode 100644
index 0000000..56b86ed
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/form/IncidentConfigFields.tsx
@@ -0,0 +1,119 @@
+
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { IncidentFormValues } from '../hooks/useIncidentForm';
+import {
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from '@/components/ui/form';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
+import { Label } from '@/components/ui/label';
+
+export const IncidentConfigFields: React.FC = () => {
+  const { t } = useLanguage();
+  const { control } = useFormContext<IncidentFormValues>();
+
+  return (
+    <div className="grid grid-cols-1 gap-4">
+      <FormField
+        control={control}
+        name="status"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('status')}</FormLabel>
+            <Select onValueChange={field.onChange} defaultValue={field.value}>
+              <FormControl>
+                <SelectTrigger>
+                  <SelectValue placeholder={t('selectIncidentStatus')} />
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent>
+                <SelectItem value="investigating">{t('investigating')}</SelectItem>
+                <SelectItem value="identified">{t('identified')}</SelectItem>
+                <SelectItem value="found_root_cause">{t('foundRootCause')}</SelectItem>
+                <SelectItem value="in_progress">{t('inProgress')}</SelectItem>
+                <SelectItem value="monitoring">{t('monitoring')}</SelectItem>
+                <SelectItem value="resolved">{t('resolved')}</SelectItem>
+              </SelectContent>
+            </Select>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      
+      <FormField
+        control={control}
+        name="impact"
+        render={({ field }) => (
+          <FormItem className="space-y-2">
+            <FormLabel>{t('impact')}</FormLabel>
+            <FormControl>
+              <RadioGroup
+                onValueChange={field.onChange}
+                defaultValue={field.value}
+                className="flex space-x-1"
+              >
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="minor" id="minor" />
+                  <Label htmlFor="minor">{t('minor')}</Label>
+                </div>
+                <span>•</span>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="major" id="major" />
+                  <Label htmlFor="major">{t('major')}</Label>
+                </div>
+                <span>•</span>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="critical" id="critical" />
+                  <Label htmlFor="critical">{t('critical')}</Label>
+                </div>
+                <span>•</span>
+                <div className="flex items-center space-x-2">
+                  <RadioGroupItem value="none" id="none" />
+                  <Label htmlFor="none">{t('none')}</Label>
+                </div>
+              </RadioGroup>
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      
+      <FormField
+        control={control}
+        name="priority"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('priority')}</FormLabel>
+            <Select onValueChange={field.onChange} defaultValue={field.value}>
+              <FormControl>
+                <SelectTrigger>
+                  <SelectValue placeholder={t('selectPriorityLevel')} />
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent>
+                <SelectItem value="low">{t('low')}</SelectItem>
+                <SelectItem value="medium">{t('medium')}</SelectItem>
+                <SelectItem value="high">{t('high')}</SelectItem>
+                <SelectItem value="critical">{t('critical')}</SelectItem>
+              </SelectContent>
+            </Select>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+};
diff --git a/application/src/components/schedule-incident/incident/form/IncidentDetailsFields.tsx b/application/src/components/schedule-incident/incident/form/IncidentDetailsFields.tsx
new file mode 100644
index 0000000..0134a8d
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/form/IncidentDetailsFields.tsx
@@ -0,0 +1,59 @@
+
+import React from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { IncidentFormValues } from '../hooks/useIncidentForm';
+import {
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+} from '@/components/ui/form';
+import { Textarea } from '@/components/ui/textarea';
+
+export const IncidentDetailsFields: React.FC = () => {
+  const { t } = useLanguage();
+  const { control } = useFormContext<IncidentFormValues>();
+
+  return (
+    <div className="space-y-4">
+      <FormField
+        control={control}
+        name="resolution_steps"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('resolutionSteps')}</FormLabel>
+            <FormControl>
+              <Textarea 
+                placeholder={t('enterResolutionSteps')}
+                className="min-h-[80px]"
+                {...field} 
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+      
+      <FormField
+        control={control}
+        name="lessons_learned"
+        render={({ field }) => (
+          <FormItem>
+            <FormLabel>{t('lessonsLearned')}</FormLabel>
+            <FormControl>
+              <Textarea 
+                placeholder={t('enterLessonsLearned')}
+                className="min-h-[80px]"
+                {...field} 
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        )}
+      />
+    </div>
+  );
+};
+
diff --git a/application/src/components/schedule-incident/incident/form/index.ts b/application/src/components/schedule-incident/incident/form/index.ts
new file mode 100644
index 0000000..9b06576
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/form/index.ts
@@ -0,0 +1,5 @@
+
+export * from './IncidentBasicFields';
+export * from './IncidentAffectedFields';
+export * from './IncidentConfigFields';
+export * from './IncidentDetailsFields';
diff --git a/application/src/components/schedule-incident/incident/hooks/useIncidentEditForm.ts b/application/src/components/schedule-incident/incident/hooks/useIncidentEditForm.ts
new file mode 100644
index 0000000..24ae314
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/hooks/useIncidentEditForm.ts
@@ -0,0 +1,84 @@
+
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useToast } from '@/hooks/use-toast';
+import { incidentService, IncidentItem } from '@/services/incident';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { incidentFormSchema, IncidentFormValues } from './useIncidentForm';
+
+export const useIncidentEditForm = (
+  incident: IncidentItem,
+  onSuccess: () => void,
+  onClose: () => void
+) => {
+  const { t } = useLanguage();
+  const { toast } = useToast();
+  
+  // Initialize form with existing incident data
+  const form = useForm<IncidentFormValues>({
+    resolver: zodResolver(incidentFormSchema),
+    defaultValues: {
+      title: incident.title || '',
+      description: incident.description || '',
+      affected_systems: incident.affected_systems || '',
+      status: (incident.status?.toLowerCase() || incident.impact_status?.toLowerCase() || 'investigating') as any,
+      impact: (incident.impact?.toLowerCase() || 'minor') as any,
+      priority: (incident.priority?.toLowerCase() || 'medium') as any,
+      service_id: incident.service_id || '',
+      assigned_to: incident.assigned_to || '',
+      root_cause: incident.root_cause || '',
+      resolution_steps: incident.resolution_steps || '',
+      lessons_learned: incident.lessons_learned || '',
+    },
+  });
+
+  const onSubmit = async (data: IncidentFormValues) => {
+    try {
+      console.log("Form data for update:", data);
+      console.log("Assigned user ID for update:", data.assigned_to);
+      
+      await incidentService.updateIncident(incident.id, {
+        title: data.title,
+        description: data.description,
+        status: data.status,
+        affected_systems: data.affected_systems,
+        impact: data.impact,
+        priority: data.priority,
+        service_id: data.service_id,
+        assigned_to: data.assigned_to, // This is the user ID from the form
+        root_cause: data.root_cause,
+        resolution_steps: data.resolution_steps,
+        lessons_learned: data.lessons_learned,
+      });
+      
+      toast({
+        title: t('incidentUpdated'),
+        description: t('incidentUpdatedDesc'),
+      });
+      
+      onClose();
+      onSuccess();
+    } catch (error) {
+      console.error('Error updating incident:', error);
+      
+      if (error instanceof Error) {
+        toast({
+          title: t('error'),
+          description: `${t('errorUpdatingIncident')}: ${error.message}`,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: t('error'),
+          description: t('errorUpdatingIncident'),
+          variant: 'destructive',
+        });
+      }
+    }
+  };
+
+  return {
+    form,
+    onSubmit: form.handleSubmit(onSubmit),
+  };
+};
diff --git a/application/src/components/schedule-incident/incident/hooks/useIncidentForm.ts b/application/src/components/schedule-incident/incident/hooks/useIncidentForm.ts
new file mode 100644
index 0000000..13ca86f
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/hooks/useIncidentForm.ts
@@ -0,0 +1,105 @@
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import * as z from 'zod';
+import { pb } from '@/lib/pocketbase';
+import { useToast } from '@/hooks/use-toast';
+import { incidentService, CreateIncidentInput } from '@/services/incident';
+import { useLanguage } from '@/contexts/LanguageContext';
+
+// Define the schema for our incident form
+export const incidentFormSchema = z.object({
+  title: z.string().min(1, { message: 'Title is required' }),
+  description: z.string().min(1, { message: 'Description is required' }),
+  affected_systems: z.string().min(1, { message: 'Affected systems are required' }),
+  status: z.enum(['investigating', 'found_root_cause', 'in_progress', 'monitoring', 'resolved']),
+  impact: z.enum(['none', 'minor', 'major', 'critical']),
+  priority: z.enum(['low', 'medium', 'high', 'critical']),
+  service_id: z.string().optional(),
+  assigned_to: z.string().optional(),
+  root_cause: z.string().optional(),
+  resolution_steps: z.string().optional(),
+  lessons_learned: z.string().optional(),
+});
+
+export type IncidentFormValues = z.infer<typeof incidentFormSchema>;
+
+export const useIncidentForm = (onSuccess: () => void, onClose: () => void) => {
+  const { t } = useLanguage();
+  const { toast } = useToast();
+  
+  const form = useForm<IncidentFormValues>({
+    resolver: zodResolver(incidentFormSchema),
+    defaultValues: {
+      title: '',
+      description: '',
+      affected_systems: '',
+      status: 'investigating',
+      impact: 'minor',
+      priority: 'medium',
+      service_id: '',
+      assigned_to: '',
+      root_cause: '',
+      resolution_steps: '',
+      lessons_learned: '',
+    },
+  });
+
+  const onSubmit = async (data: IncidentFormValues) => {
+    try {
+      console.log("Form data before submission:", data);
+      
+      const formattedData: CreateIncidentInput = {
+        title: data.title,
+        description: data.description,
+        status: data.status,
+        affected_systems: data.affected_systems,
+        impact: data.impact,
+        priority: data.priority,
+        service_id: data.service_id,
+        assigned_to: data.assigned_to,
+        root_cause: data.root_cause,
+        resolution_steps: data.resolution_steps,
+        lessons_learned: data.lessons_learned,
+        timestamp: new Date().toISOString(),
+        created_by: pb.authStore.model?.id || '',
+      };
+      
+      console.log("Formatted data for API:", formattedData);
+
+      await incidentService.createIncident(formattedData);
+      
+      toast({
+        title: t('incidentCreated'),
+        description: t('incidentCreatedDesc'),
+      });
+      
+      console.log("Incident created successfully, about to call onSuccess and onClose");
+      
+      form.reset();
+      onClose();
+      onSuccess();
+    } catch (error) {
+      console.error('Error creating incident:', error);
+      
+      if (error instanceof Error) {
+        console.error('Error details:', error.message);
+        toast({
+          title: t('error'),
+          description: `${t('errorCreatingIncident')}: ${error.message}`,
+          variant: 'destructive',
+        });
+      } else {
+        toast({
+          title: t('error'),
+          description: t('errorCreatingIncident'),
+          variant: 'destructive',
+        });
+      }
+    }
+  };
+
+  return {
+    form,
+    onSubmit: form.handleSubmit(onSubmit),
+  };
+};
diff --git a/application/src/components/schedule-incident/incident/index.ts b/application/src/components/schedule-incident/incident/index.ts
new file mode 100644
index 0000000..2421b33
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/index.ts
@@ -0,0 +1,9 @@
+
+export * from './IncidentTable';
+export * from './IncidentActionsMenu';
+export * from './IncidentStatusBadge';
+export * from './IncidentStatusDropdown';
+export * from './CreateIncidentDialog';
+export * from './EditIncidentDialog';
+export * from './EmptyIncidentState';
+export * from './detail-dialog';
diff --git a/application/src/components/schedule-incident/incident/table/IncidentTable.tsx b/application/src/components/schedule-incident/incident/table/IncidentTable.tsx
new file mode 100644
index 0000000..a163694
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/table/IncidentTable.tsx
@@ -0,0 +1,150 @@
+
+import React, { useState, useCallback } from 'react';
+import {
+  Table,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import { format } from 'date-fns';
+import { IncidentItem } from '@/services/incident/types';
+import { IncidentTableRow } from './IncidentTableRow';
+import { IncidentDetailDialog } from '../detail-dialog/IncidentDetailDialog';
+import { EditIncidentDialog } from '../EditIncidentDialog';
+import { useLanguage } from '@/contexts/LanguageContext';
+import { IncidentTableSkeleton } from './IncidentTableSkeleton';
+
+interface IncidentTableProps {
+  data: IncidentItem[]; 
+  isLoading: boolean;
+  onIncidentUpdated: () => void;
+  onViewDetails?: (incident: IncidentItem) => void;
+  onEditIncident?: (incident: IncidentItem) => void;
+}
+
+export const IncidentTable = ({ 
+  data, 
+  isLoading,
+  onIncidentUpdated,
+  onViewDetails,
+  onEditIncident 
+}: IncidentTableProps) => {
+  const { t } = useLanguage();
+  const [selectedIncident, setSelectedIncident] = useState<IncidentItem | null>(null);
+  const [isDetailOpen, setIsDetailOpen] = useState(false);
+  const [isEditOpen, setIsEditOpen] = useState(false);
+
+  const formatDate = useCallback((dateString: string | undefined) => {
+    if (!dateString) return '-';
+    try {
+      return format(new Date(dateString), 'PPp');
+    } catch (error) {
+      console.error('Error formatting date:', dateString, error);
+      return dateString;
+    }
+  }, []);
+
+  const getAffectedSystemsArray = useCallback((affectedSystems: string | undefined): string[] => {
+    if (!affectedSystems) return [];
+    return affectedSystems.split(',').map(system => system.trim()).filter(Boolean);
+  }, []);
+
+  const handleViewDetails = useCallback((incident: IncidentItem) => {
+    setSelectedIncident(incident);
+    setIsDetailOpen(true);
+  }, []);
+  
+  const handleEditIncident = useCallback((incident: IncidentItem) => {
+    setSelectedIncident(incident);
+    setIsEditOpen(true);
+  }, []);
+
+  // Handle status updates efficiently
+  const handleIncidentUpdated = useCallback(() => {
+    console.log("Incident updated in IncidentTable, propagating event");
+    onIncidentUpdated();
+  }, [onIncidentUpdated]);
+
+  // Handle dialog closing
+  const handleDetailDialogClose = useCallback((open: boolean) => {
+    setIsDetailOpen(open);
+    if (!open) {
+      onIncidentUpdated();
+    }
+  }, [onIncidentUpdated]);
+
+  // Handle edit dialog closing
+  const handleEditDialogClose = useCallback((open: boolean) => {
+    setIsEditOpen(open);
+    if (!open) {
+      onIncidentUpdated();
+    }
+  }, [onIncidentUpdated]);
+
+  if (isLoading) {
+    return <IncidentTableSkeleton />;
+  }
+
+  // Add a safety check to prevent map of undefined error
+  if (!data || !Array.isArray(data)) {
+    console.error('Data is not an array:', data);
+    return (
+      <div className="p-4 text-center">
+        <p>No incident data available</p>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>{t('title')}</TableHead>
+              <TableHead>{t('status')}</TableHead>
+              <TableHead>{t('priority')}</TableHead>
+              <TableHead>{t('time')}</TableHead>
+              <TableHead>{t('affected')}</TableHead>
+              <TableHead>{t('impact')}</TableHead>
+              <TableHead>{t('assignedTo')}</TableHead>
+              <TableHead className="text-right">{t('actions')}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {data.map((item) => (
+              <IncidentTableRow
+                key={item.id}
+                item={item}
+                formatDate={formatDate}
+                getAffectedSystemsArray={getAffectedSystemsArray}
+                onViewDetails={onViewDetails || handleViewDetails}
+                onEditIncident={onEditIncident || handleEditIncident}
+                onIncidentUpdated={handleIncidentUpdated}
+                t={t}
+              />
+            ))}
+          </TableBody>
+        </Table>
+      </div>
+
+      {/* Incident detail dialog */}
+      <IncidentDetailDialog
+        open={isDetailOpen}
+        onOpenChange={handleDetailDialogClose}
+        incident={selectedIncident}
+      />
+      
+      {/* Edit incident dialog */}
+      {selectedIncident && (
+        <EditIncidentDialog
+          open={isEditOpen}
+          onOpenChange={handleEditDialogClose}
+          incident={selectedIncident}
+          onIncidentUpdated={onIncidentUpdated}
+        />
+      )}
+    </>
+  );
+};
diff --git a/application/src/components/schedule-incident/incident/table/IncidentTableRow.tsx b/application/src/components/schedule-incident/incident/table/IncidentTableRow.tsx
new file mode 100644
index 0000000..8f068ff
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/table/IncidentTableRow.tsx
@@ -0,0 +1,119 @@
+
+import React, { memo, useState } from 'react';
+import { TableRow, TableCell } from '@/components/ui/table';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Eye } from 'lucide-react';
+import { IncidentStatusDropdown } from '../IncidentStatusDropdown';
+import { IncidentActionsMenu } from '../IncidentActionsMenu';
+import { IncidentItem } from '@/services/incident';
+import { AssignedUserCell } from './IncidentTableUtils';
+
+interface IncidentTableRowProps {
+  item: IncidentItem;
+  formatDate: (date: string | undefined) => string;
+  getAffectedSystemsArray: (systems: string | undefined) => string[];
+  onViewDetails?: (incident: IncidentItem) => void;
+  onEditIncident?: (incident: IncidentItem) => void;
+  onIncidentUpdated: () => void;
+  t: (key: string) => string;
+}
+
+export const IncidentTableRow = memo(({ 
+  item, 
+  formatDate, 
+  getAffectedSystemsArray, 
+  onViewDetails, 
+  onEditIncident,
+  onIncidentUpdated, 
+  t
+}: IncidentTableRowProps) => {
+  // Use local state for optimistic UI updates
+  const [localItem, setLocalItem] = useState(item);
+  
+  // Update local state when props change
+  React.useEffect(() => {
+    setLocalItem(item);
+  }, [item]);
+  
+  // Handle status updates locally
+  const handleStatusUpdated = () => {
+    console.log("Status updated in TableRow, calling onIncidentUpdated");
+    onIncidentUpdated();
+  };
+  
+  return (
+    <TableRow 
+      key={localItem.id} 
+      className="hover:bg-muted/40 cursor-pointer"
+      onClick={() => onViewDetails && onViewDetails(localItem)}
+    >
+      <TableCell className="font-medium max-w-[200px] truncate">
+        {localItem.title || localItem.description || '-'}
+      </TableCell>
+      <TableCell onClick={(e) => e.stopPropagation()}>
+        <IncidentStatusDropdown
+          status={localItem.impact_status || localItem.status || 'investigating'}
+          id={localItem.id}
+          onStatusUpdated={handleStatusUpdated}
+        />
+      </TableCell>
+      <TableCell>
+        <Badge variant={
+          localItem.priority?.toLowerCase() === 'critical' ? 'destructive' :
+          localItem.priority?.toLowerCase() === 'high' ? 'default' :
+          localItem.priority?.toLowerCase() === 'medium' ? 'secondary' : 'outline'
+        }>
+          {t(localItem.priority?.toLowerCase() || 'low')}
+        </Badge>
+      </TableCell>
+      <TableCell>{formatDate(localItem.created)}</TableCell>
+      <TableCell>
+        <div className="flex flex-wrap gap-1">
+          {getAffectedSystemsArray(localItem.affected_systems).map((system, idx) => (
+            <Badge key={`${localItem.id}-system-${idx}`} variant="outline">{system}</Badge>
+          ))}
+          {getAffectedSystemsArray(localItem.affected_systems).length === 0 && '-'}
+        </div>
+      </TableCell>
+      <TableCell>
+        <Badge variant={
+          localItem.impact?.toLowerCase() === 'critical' ? 'destructive' :
+          localItem.impact?.toLowerCase() === 'high' ? 'default' :
+          localItem.impact?.toLowerCase() === 'medium' ? 'secondary' : 'outline'
+        }>
+          {t(localItem.impact?.toLowerCase() || 'low')}
+        </Badge>
+      </TableCell>
+      <TableCell>
+        <AssignedUserCell userId={localItem.assigned_to} />
+      </TableCell>
+      <TableCell className="text-right" onClick={(e) => e.stopPropagation()}>
+        <div className="flex justify-end items-center space-x-2">
+          {onViewDetails && (
+            <Button 
+              variant="ghost" 
+              size="sm" 
+              onClick={(e) => {
+                e.stopPropagation();
+                onViewDetails(localItem);
+              }}
+              className="h-8 w-8 p-0"
+            >
+              <Eye className="h-4 w-4" />
+              <span className="sr-only">{t('view')}</span>
+            </Button>
+          )}
+          <IncidentActionsMenu 
+            item={localItem} 
+            onIncidentUpdated={onIncidentUpdated}
+            onViewDetails={onViewDetails}
+            onEditIncident={onEditIncident}
+          />
+        </div>
+      </TableCell>
+    </TableRow>
+  );
+});
+
+IncidentTableRow.displayName = 'IncidentTableRow';
diff --git a/application/src/components/schedule-incident/incident/table/IncidentTableSkeleton.tsx b/application/src/components/schedule-incident/incident/table/IncidentTableSkeleton.tsx
new file mode 100644
index 0000000..1ae40df
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/table/IncidentTableSkeleton.tsx
@@ -0,0 +1,27 @@
+
+import React from 'react';
+import { TableRow, TableCell } from '@/components/ui/table';
+import { Skeleton } from '@/components/ui/skeleton';
+
+export const IncidentTableRowSkeleton = () => (
+  <TableRow>
+    <TableCell><Skeleton className="h-5 w-[180px]" /></TableCell>
+    <TableCell><Skeleton className="h-5 w-[100px]" /></TableCell>
+    <TableCell><Skeleton className="h-5 w-[80px]" /></TableCell>
+    <TableCell><Skeleton className="h-5 w-[120px]" /></TableCell>
+    <TableCell><Skeleton className="h-5 w-[150px]" /></TableCell>
+    <TableCell><Skeleton className="h-5 w-[80px]" /></TableCell>
+    <TableCell><Skeleton className="h-5 w-[100px]" /></TableCell>
+    <TableCell><Skeleton className="h-5 w-[60px]" /></TableCell>
+  </TableRow>
+);
+
+export const IncidentTableSkeleton = () => (
+  <div className="overflow-x-auto">
+    <TableRow>
+      {Array(3).fill(0).map((_, index) => (
+        <IncidentTableRowSkeleton key={`skeleton-${index}`} />
+      ))}
+    </TableRow>
+  </div>
+);
diff --git a/application/src/components/schedule-incident/incident/table/IncidentTableUtils.tsx b/application/src/components/schedule-incident/incident/table/IncidentTableUtils.tsx
new file mode 100644
index 0000000..2dd14d5
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/table/IncidentTableUtils.tsx
@@ -0,0 +1,57 @@
+
+import React from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { userService, User } from '@/services/userService';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Skeleton } from '@/components/ui/skeleton';
+
+// Helper function to get user initials
+export const getUserInitials = (user: User): string => {
+  if (user.full_name) {
+    const nameParts = user.full_name.split(' ');
+    if (nameParts.length > 1) {
+      return `${nameParts[0][0]}${nameParts[1][0]}`.toUpperCase();
+    }
+    return user.full_name.substring(0, 2).toUpperCase();
+  }
+  return user.username.substring(0, 2).toUpperCase();
+};
+
+interface AssignedUserCellProps {
+  userId?: string;
+}
+
+export const AssignedUserCell: React.FC<AssignedUserCellProps> = ({ userId }) => {
+  const { data: user, isLoading } = useQuery({
+    queryKey: ['user', userId],
+    queryFn: async () => {
+      if (!userId) return null;
+      try {
+        return await userService.getUser(userId);
+      } catch (error) {
+        console.error("Failed to fetch assigned user:", error);
+        return null;
+      }
+    },
+    enabled: !!userId,
+    staleTime: 300000 // Cache for 5 minutes
+  });
+
+  if (isLoading) {
+    return <Skeleton className="h-6 w-20" />;
+  }
+
+  if (!user || !userId) {
+    return <span>-</span>;
+  }
+
+  return (
+    <div className="flex items-center gap-2">
+      <Avatar className="h-6 w-6">
+        <AvatarImage src={user.avatar} alt={user.full_name || user.username} />
+        <AvatarFallback>{getUserInitials(user)}</AvatarFallback>
+      </Avatar>
+      <span className="truncate max-w-[100px]">{user.full_name || user.username}</span>
+    </div>
+  );
+};
diff --git a/application/src/components/schedule-incident/incident/table/index.ts b/application/src/components/schedule-incident/incident/table/index.ts
new file mode 100644
index 0000000..2d98564
--- /dev/null
+++ b/application/src/components/schedule-incident/incident/table/index.ts
@@ -0,0 +1,5 @@
+
+export * from './IncidentTable';
+export * from './IncidentTableRow';
+export * from './IncidentTableSkeleton';
+export * from './IncidentTableUtils';
diff --git a/application/src/components/schedule-incident/index.ts b/application/src/components/schedule-incident/index.ts
new file mode 100644
index 0000000..73f2997
--- /dev/null
+++ b/application/src/components/schedule-incident/index.ts
@@ -0,0 +1,18 @@
+
+// Export all components for easier imports
+export * from './ScheduleIncidentContent';
+export * from './ScheduledMaintenanceTab';
+export * from './IncidentManagementTab';
+export * from './maintenance/MaintenanceTable';
+export * from './maintenance/MaintenanceStatusBadge';
+export * from './maintenance/MaintenanceActionsMenu';
+export * from './maintenance/EmptyMaintenanceState';
+export * from './maintenance/CreateMaintenanceDialog';
+export * from './incident/IncidentTable';
+export * from './incident/IncidentStatusBadge';
+export * from './incident/IncidentActionsMenu';
+export * from './incident/EmptyIncidentState';
+export * from './incident/CreateIncidentDialog';
+export * from './incident-management';
+export * from './hooks';
+
diff --git a/application/src/pages/ScheduleIncident.tsx b/application/src/pages/ScheduleIncident.tsx
new file mode 100644
index 0000000..6adef1f
--- /dev/null
+++ b/application/src/pages/ScheduleIncident.tsx
@@ -0,0 +1,59 @@
+
+import React, { useState, useEffect } from 'react';
+import { Header } from "@/components/dashboard/Header";
+import { Sidebar } from "@/components/dashboard/Sidebar";
+import { useTheme } from "@/contexts/ThemeContext";
+import { useLanguage } from "@/contexts/LanguageContext";
+import { ScheduleIncidentContent } from "@/components/schedule-incident/ScheduleIncidentContent";
+import { authService } from "@/services/authService";
+import { useNavigate } from "react-router-dom";
+import { initMaintenanceNotifications, stopMaintenanceNotifications } from "@/services/maintenance/maintenanceNotificationService";
+
+const ScheduleIncident = () => {
+  // State for sidebar collapse functionality
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
+  const toggleSidebar = () => setSidebarCollapsed(prev => !prev);
+  
+  // Get current theme and language
+  const { theme } = useTheme();
+  const { t } = useLanguage();
+  
+  // Get current user
+  const currentUser = authService.getCurrentUser();
+  const navigate = useNavigate();
+  
+  // Initialize maintenance notifications
+  useEffect(() => {
+    console.log("Initializing maintenance notifications");
+    initMaintenanceNotifications();
+    
+    // Clean up on unmount
+    return () => {
+      console.log("Stopping maintenance notifications");
+      stopMaintenanceNotifications();
+    };
+  }, []);
+  
+  // Handle logout
+  const handleLogout = () => {
+    authService.logout();
+    navigate("/login");
+  };
+
+  return (
+    <div className="flex h-screen overflow-hidden bg-background text-foreground">
+      <Sidebar collapsed={sidebarCollapsed} />
+      <div className="flex flex-col flex-1">
+        <Header 
+          currentUser={currentUser} 
+          onLogout={handleLogout} 
+          sidebarCollapsed={sidebarCollapsed} 
+          toggleSidebar={toggleSidebar} 
+        />
+        <ScheduleIncidentContent />
+      </div>
+    </div>
+  );
+};
+
+export default ScheduleIncident;
\ No newline at end of file
diff --git a/application/src/services/incident/incidentCache.ts b/application/src/services/incident/incidentCache.ts
new file mode 100644
index 0000000..e34651b
--- /dev/null
+++ b/application/src/services/incident/incidentCache.ts
@@ -0,0 +1,14 @@
+
+import { IncidentItem } from './types';
+
+// Export functions to update and invalidate the cache
+export const updateCache = (data: IncidentItem[]) => {
+  console.log(`Updating cache with ${data.length} incidents`);
+  // The actual cache is now maintained in incidentFetch.ts
+};
+
+// Reset cache and request state
+export const invalidateCache = () => {
+  console.log('Invalidating incidents cache');
+  // The invalidation is handled in incidentFetch.ts implementation
+};
diff --git a/application/src/services/incident/incidentFetch.ts b/application/src/services/incident/incidentFetch.ts
new file mode 100644
index 0000000..ca1ea9b
--- /dev/null
+++ b/application/src/services/incident/incidentFetch.ts
@@ -0,0 +1,147 @@
+
+import { pb } from '@/lib/pocketbase';
+import { IncidentItem } from './types';
+import { normalizeFetchedItem } from './incidentUtils';
+import { updateCache, invalidateCache } from './incidentCache';
+
+// Internal state variables instead of importing them
+let incidentsCache: {
+  data: IncidentItem[];
+  timestamp: number;
+} | null = null;
+let pendingRequest: Promise<any> | null = null;
+let isRequestInProgress = false;
+
+// Cache duration in milliseconds (30 minutes)
+const CACHE_DURATION = 30 * 60 * 1000;
+
+// Check if cache is valid
+export const isCacheValid = (): boolean => {
+  const now = Date.now();
+  return !!(incidentsCache && (now - incidentsCache.timestamp < CACHE_DURATION));
+};
+
+// Get all incidents with caching and error handling
+export const getAllIncidents = async (forceRefresh = false): Promise<IncidentItem[]> => {
+  // If a request is in progress, wait for it to complete rather than making a new one
+  if (isRequestInProgress) {
+    console.log('Request already in progress, waiting for completion');
+    try {
+      if (pendingRequest) {
+        await pendingRequest;
+      }
+      return incidentsCache?.data || [];
+    } catch (error) {
+      console.error('Error in existing incidents request:', error);
+      return incidentsCache?.data || [];
+    }
+  }
+  
+  // Use cache if available, not expired, and not forced refresh
+  if (!forceRefresh && isCacheValid()) {
+    console.log('Using cached incidents data from', new Date(incidentsCache!.timestamp).toLocaleTimeString());
+    return incidentsCache!.data;
+  }
+  
+  try {
+    console.log('Fetching all incidents from API...');
+    isRequestInProgress = true;
+    
+    // Implement timeout for the request
+    const timeoutPromise = new Promise<never>((_, reject) => {
+      setTimeout(() => reject(new Error('Request timeout')), 20000); // Longer timeout (20s)
+    });
+    
+    // Create the fetch promise with a unique request key to prevent conflicts
+    const now = Date.now();
+    const requestKey = `incidents-${now}`;
+    const fetchPromise = pb.collection('incidents').getList(1, 100, {
+      sort: '-created',
+      requestKey,
+      $cancelKey: requestKey,
+    });
+    
+    // Store the pending request
+    pendingRequest = Promise.race([fetchPromise, timeoutPromise]);
+    
+    // Race between fetch and timeout
+    const result = await pendingRequest;
+    
+    // Clear request flags
+    pendingRequest = null;
+    isRequestInProgress = false;
+    
+    if (!result || !result.items) {
+      console.warn('No incidents found in API response');
+      return [];
+    }
+    
+    const normalizedItems = result.items.map(normalizeFetchedItem);
+    
+    // Update cache
+    updateCache(normalizedItems);
+    
+    console.log(`Fetched ${normalizedItems.length} incidents at ${new Date().toLocaleTimeString()}`);
+    return normalizedItems;
+  } catch (error) {
+    if ((error as any)?.isAbort) {
+      console.log("Request aborted:", error);
+      return incidentsCache?.data || [];
+    }
+    
+    console.error('Error fetching incidents:', error);
+    
+    // Clear states to allow retry
+    pendingRequest = null;
+    isRequestInProgress = false;
+    
+    // Improve error message
+    if (error instanceof Error) {
+      throw new Error(`Failed to fetch incidents: ${error.message}`);
+    }
+    
+    // Still return cached data even on error
+    if (incidentsCache) {
+      console.log('Returning stale cached data after error');
+      return incidentsCache.data;
+    }
+    
+    return [];
+  }
+};
+
+// Get incident by id
+export const getIncidentById = async (id: string): Promise<IncidentItem | null> => {
+  try {
+    console.log(`Fetching incident with ID: ${id}`);
+    
+    // First check if the incident exists in the cache
+    if (isCacheValid() && incidentsCache) {
+      const cachedIncident = incidentsCache.data.find(incident => incident.id === id);
+      if (cachedIncident) {
+        console.log('Incident found in cache');
+        return cachedIncident;
+      }
+    }
+    
+    // If not in cache, fetch from API
+    const result = await pb.collection('incidents').getOne(id);
+    
+    if (!result) {
+      console.warn(`No incident found with ID: ${id}`);
+      return null;
+    }
+    
+    const normalizedIncident = normalizeFetchedItem(result);
+    return normalizedIncident;
+    
+  } catch (error) {
+    console.error(`Error fetching incident with ID ${id}:`, error);
+    
+    if (error instanceof Error) {
+      throw new Error(`Failed to fetch incident: ${error.message}`);
+    }
+    
+    return null;
+  }
+};
diff --git a/application/src/services/incident/incidentOperations.ts b/application/src/services/incident/incidentOperations.ts
new file mode 100644
index 0000000..c19905a
--- /dev/null
+++ b/application/src/services/incident/incidentOperations.ts
@@ -0,0 +1,109 @@
+
+import { pb } from '@/lib/pocketbase';
+import { CreateIncidentInput, IncidentItem } from './types';
+import { formatStatus } from './incidentUtils';
+import { invalidateCache } from './incidentCache';
+
+// Update incident status
+export const updateIncidentStatus = async (id: string, status: string): Promise<void> => {
+  try {
+    const formattedStatus = formatStatus(status);
+    console.log(`Updating incident ${id} status to ${status} (formatted: ${formattedStatus})`);
+    
+    // Update both status and impact_status fields
+    await pb.collection('incidents').update(id, { 
+      status: formattedStatus,
+      impact_status: status.toLowerCase(), // Set impact_status to the lowercase status value
+      ...(status.toLowerCase() === 'resolved' ? { resolution_time: new Date().toISOString() } : {})
+    });
+    
+    // Invalidate cache after update
+    invalidateCache();
+    
+    console.log(`Incident ${id} status updated successfully to ${status}`);
+  } catch (error) {
+    console.error('Error updating incident status:', error);
+    throw error;
+  }
+};
+
+// Delete incident
+export const deleteIncident = async (id: string): Promise<void> => {
+  try {
+    await pb.collection('incidents').delete(id);
+    
+    // Invalidate cache after deletion
+    invalidateCache();
+    
+    console.log(`Incident ${id} deleted successfully`);
+  } catch (error) {
+    console.error('Error deleting incident:', error);
+    throw error;
+  }
+};
+
+// Create incident
+export const createIncident = async (data: CreateIncidentInput): Promise<void> => {
+  try {
+    // Format the payload according to API requirements
+    const payload = {
+      title: data.title,
+      description: data.description,
+      status: formatStatus(data.status),
+      impact_status: data.status.toLowerCase(),
+      // Use lowercase for impact and priority to match API expectations
+      impact: data.impact.toLowerCase(),
+      affected_systems: data.affected_systems,
+      priority: data.priority.toLowerCase(),
+      service_id: data.service_id || '',
+      assigned_to: data.assigned_to || '', // Direct user ID assignment
+      root_cause: data.root_cause || '',
+      resolution_steps: data.resolution_steps || '',
+      lessons_learned: data.lessons_learned || '',
+      timestamp: data.timestamp || new Date().toISOString(),
+      created_by: data.created_by,
+      resolution_time: data.status.toLowerCase() === 'resolved' ? new Date().toISOString() : null,
+    };
+    
+    console.log('Creating new incident with payload:', payload);
+    await pb.collection('incidents').create(payload);
+    
+    // Invalidate cache after create
+    invalidateCache();
+    
+    console.log('Incident created successfully');
+  } catch (error) {
+    console.error('Error creating incident:', error);
+    throw error;
+  }
+};
+
+// Update incident
+export const updateIncident = async (id: string, data: Partial<IncidentItem>): Promise<void> => {
+  try {
+    console.log(`Updating incident ${id} with:`, data);
+    
+    // Make sure impact and priority are lowercase
+    const payload = {
+      ...data,
+      impact: data.impact?.toLowerCase(),
+      priority: data.priority?.toLowerCase(),
+      status: data.status ? formatStatus(data.status) : undefined,
+      impact_status: data.status ? data.status.toLowerCase() : undefined,
+      ...(data.status?.toLowerCase() === 'resolved' && !data.resolution_time 
+        ? { resolution_time: new Date().toISOString() } 
+        : {})
+    };
+    
+    console.log("Final payload for update:", payload);
+    await pb.collection('incidents').update(id, payload);
+    
+    // Invalidate cache after update
+    invalidateCache();
+    
+    console.log(`Incident ${id} updated successfully`);
+  } catch (error) {
+    console.error('Error updating incident:', error);
+    throw error;
+  }
+};
diff --git a/application/src/services/incident/incidentPdfService.ts b/application/src/services/incident/incidentPdfService.ts
new file mode 100644
index 0000000..872a73c
--- /dev/null
+++ b/application/src/services/incident/incidentPdfService.ts
@@ -0,0 +1,5 @@
+
+import { generateIncidentPDF } from './pdf';
+
+export { generateIncidentPDF };
+
diff --git a/application/src/services/incident/incidentService.ts b/application/src/services/incident/incidentService.ts
new file mode 100644
index 0000000..6a73826
--- /dev/null
+++ b/application/src/services/incident/incidentService.ts
@@ -0,0 +1,22 @@
+
+import { CreateIncidentInput, IncidentItem, UpdateIncidentInput } from './types';
+import { createIncident, updateIncident, updateIncidentStatus, deleteIncident } from './incidentOperations';
+import { getAllIncidents, getIncidentById } from './incidentFetch';
+import { generateIncidentPDF } from './incidentPdfService';
+
+export const incidentService = {
+  // Fetch operations
+  getAllIncidents,
+  getIncidentById,
+  
+  // CRUD operations
+  createIncident,
+  updateIncident,
+  updateIncidentStatus,
+  deleteIncident,
+  
+  // PDF operations
+  generateIncidentPDF,
+};
+
+export default incidentService;
diff --git a/application/src/services/incident/incidentUtils.ts b/application/src/services/incident/incidentUtils.ts
new file mode 100644
index 0000000..c1e703b
--- /dev/null
+++ b/application/src/services/incident/incidentUtils.ts
@@ -0,0 +1,29 @@
+
+import { pb } from '@/lib/pocketbase';
+import { IncidentItem } from './types';
+
+// Helper function to get the API URL
+export const getApiUrl = (): string => {
+  try {
+    return pb.baseUrl;
+  } catch (error) {
+    console.error('Error getting API URL:', error);
+    return '';
+  }
+};
+
+// Normalize fetched items to ensure consistent data structure
+export const normalizeFetchedItem = (item: any): IncidentItem => {
+  return {
+    ...item,
+    affected_systems: item.affected_systems || '',
+    status: item.impact_status || item.status || 'Investigating',
+    impact: item.impact || 'Low',
+    priority: item.priority || 'Low',
+  } as IncidentItem;
+};
+
+// Format status with first letter capitalized
+export const formatStatus = (status: string): string => {
+  return status.charAt(0).toUpperCase() + status.slice(1);
+};
diff --git a/application/src/services/incident/index.ts b/application/src/services/incident/index.ts
new file mode 100644
index 0000000..51d5447
--- /dev/null
+++ b/application/src/services/incident/index.ts
@@ -0,0 +1,12 @@
+
+export * from './types';
+export * from './incidentFetch';
+export * from './incidentOperations';
+export * from './incidentCache';
+export * from './incidentUtils';
+export * from './incidentPdfService';
+export * from './incidentService';
+
+// Export the incidentService as the default export
+export { incidentService } from './incidentService';
+
diff --git a/application/src/services/incident/pdf/generator.ts b/application/src/services/incident/pdf/generator.ts
new file mode 100644
index 0000000..6337757
--- /dev/null
+++ b/application/src/services/incident/pdf/generator.ts
@@ -0,0 +1,112 @@
+
+import jsPDF from 'jspdf';
+import { IncidentItem } from '../types';
+import {
+  addBasicInfoSection,
+  addDescriptionSection,
+  addAffectedSystemsSection,
+  addRootCauseSection,
+  addResolutionSection,
+  addAssignmentSection,
+  addLessonsLearnedSection
+} from './sections';
+import { addHeader, addFooter } from './headerFooter';
+
+/**
+ * Generate a PDF for an incident report
+ */
+export const generatePdf = async (incident: IncidentItem): Promise<string> => {
+  // Validate incident data
+  if (!incident?.id) {
+    console.error('Invalid incident data for PDF generation');
+    throw new Error('Invalid incident data');
+  }
+  
+  try {
+    // Create new PDF document with portrait orientation
+    const doc = new jsPDF({
+      orientation: 'portrait',
+      unit: 'mm',
+      format: 'a4',
+    });
+    
+    // Set title and filename
+    const title = incident.title || `Incident Report #${incident.id}`;
+    const filename = `incident-report-${incident.id}.pdf`;
+    
+    // Add metadata
+    doc.setProperties({
+      title: title,
+      subject: 'Incident Report',
+      author: 'ReamStack System',
+      creator: 'ReamStack',
+    });
+    
+    // Add header section
+    let yPos = addHeader(doc, incident);
+    
+    // Add basic information section
+    yPos = addBasicInfoSection(doc, incident, yPos);
+    
+    // Add description section
+    yPos = addDescriptionSection(doc, incident, yPos);
+    
+    // Check if we need to add a new page
+    if (yPos > 250) {
+      doc.addPage();
+      yPos = 20;
+    }
+    
+    // Add affected systems section
+    yPos = addAffectedSystemsSection(doc, incident, yPos);
+    
+    // Check if we need to add a new page
+    if (yPos > 250) {
+      doc.addPage();
+      yPos = 20;
+    }
+    
+    // Add root cause section
+    yPos = addRootCauseSection(doc, incident, yPos);
+    
+    // Check if we need to add a new page
+    if (yPos > 250) {
+      doc.addPage();
+      yPos = 20;
+    }
+    
+    // Add resolution steps section
+    yPos = addResolutionSection(doc, incident, yPos);
+    
+    // Check if we need to add a new page
+    if (yPos > 250) {
+      doc.addPage();
+      yPos = 20;
+    }
+    
+    // Add assignment section
+    yPos = addAssignmentSection(doc, incident, yPos);
+    
+    // Check if we need to add a new page
+    if (yPos > 250) {
+      doc.addPage();
+      yPos = 20;
+    }
+    
+    // Add lessons learned section if available
+    addLessonsLearnedSection(doc, incident, yPos);
+    
+    // Add footer to all pages
+    addFooter(doc);
+    
+    // Save the PDF
+    doc.save(filename);
+    
+    console.log('PDF generated successfully:', filename);
+    return filename;
+  } catch (error) {
+    console.error('Error generating incident PDF:', error);
+    throw new Error(`Failed to generate PDF: ${error instanceof Error ? error.message : 'Unknown error'}`);
+  }
+};
+
diff --git a/application/src/services/incident/pdf/headerFooter.ts b/application/src/services/incident/pdf/headerFooter.ts
new file mode 100644
index 0000000..9b3ff51
--- /dev/null
+++ b/application/src/services/incident/pdf/headerFooter.ts
@@ -0,0 +1,63 @@
+
+import jsPDF from 'jspdf';
+import { IncidentItem } from '../types';
+import { fonts } from './utils';
+
+/**
+ * Add the PDF header with title and metadata
+ */
+export const addHeader = (doc: jsPDF, incident: IncidentItem): number => {
+  // Set initial y position
+  let yPos = 15;
+  
+  // Add header with title
+  doc.setFont(fonts.bold);
+  doc.setFontSize(18);
+  doc.setTextColor(0, 0, 0);
+  doc.text('INCIDENT REPORT', 105, yPos, { align: 'center' });
+  
+  // Add incident title
+  yPos += 8;
+  doc.setFontSize(14);
+  const title = incident.title || `Incident Report #${incident.id}`;
+  doc.text(title, 105, yPos, { align: 'center' });
+  
+  // Add current date
+  yPos += 8;
+  doc.setFont(fonts.normal);
+  doc.setFontSize(10);
+  doc.text(`Generated on: ${new Date().toLocaleDateString()}`, 105, yPos, { align: 'center' });
+  
+  // Add ReamStack logo or text
+  yPos += 8;
+  doc.setFontSize(12);
+  doc.setFont(fonts.italic);
+  doc.text('ReamStack Incident Management', 105, yPos, { align: 'center' });
+  
+  // Add horizontal line
+  yPos += 5;
+  doc.setLineWidth(0.5);
+  doc.line(15, yPos, 195, yPos);
+  
+  // Return next Y position with some padding
+  return yPos + 10;
+};
+
+/**
+ * Add footer to all pages
+ */
+export const addFooter = (doc: jsPDF): void => {
+  const pageCount = doc.getNumberOfPages();
+  for (let i = 1; i <= pageCount; i++) {
+    doc.setPage(i);
+    doc.setFontSize(8);
+    doc.setTextColor(100, 100, 100);
+    doc.text(
+      `Page ${i} of ${pageCount} | Generated by ReamStack Incident Management System`,
+      105,
+      285,
+      { align: 'center' }
+    );
+  }
+};
+
diff --git a/application/src/services/incident/pdf/index.ts b/application/src/services/incident/pdf/index.ts
new file mode 100644
index 0000000..6ba7099
--- /dev/null
+++ b/application/src/services/incident/pdf/index.ts
@@ -0,0 +1,12 @@
+
+import { generatePdf } from './generator';
+import { IncidentItem } from '../types';
+
+/**
+ * Generate and download PDF for incident report
+ */
+export const generateIncidentPDF = async (incident: IncidentItem): Promise<void> => {
+  await generatePdf(incident);
+  return Promise.resolve();
+};
+
diff --git a/application/src/services/incident/pdf/sections.ts b/application/src/services/incident/pdf/sections.ts
new file mode 100644
index 0000000..a3ee403
--- /dev/null
+++ b/application/src/services/incident/pdf/sections.ts
@@ -0,0 +1,192 @@
+
+import jsPDF from 'jspdf';
+import { IncidentItem } from '../types';
+import { fonts, formatDate, capitalize } from './utils';
+import autoTable from 'jspdf-autotable';
+
+/**
+ * Add the incident overview section to the PDF
+ */
+export const addBasicInfoSection = (doc: jsPDF, incident: IncidentItem, yPos: number): number => {
+  doc.setFont(fonts.bold);
+  doc.setFontSize(14);
+  doc.setTextColor(30, 64, 175); // Blue-800
+  doc.text('Incident Overview', 15, yPos);
+  
+  // Draw a line under the heading
+  doc.line(15, yPos + 2, 195, yPos + 2);
+  yPos += 10;
+  
+  // Basic information table
+  autoTable(doc, {
+    startY: yPos,
+    head: [['Field', 'Information']],
+    body: [
+      ['ID', incident.id],
+      ['Status', capitalize(incident.status || 'Unknown')],
+      ['Priority', capitalize(incident.priority || 'Unknown')],
+      ['Impact', capitalize(incident.impact || 'Unknown')],
+      ['Created', formatDate(incident.created)],
+      ['Last Updated', formatDate(incident.updated)],
+    ],
+    headStyles: {
+      fillColor: [30, 64, 175], // Blue-800
+      textColor: [255, 255, 255],
+      fontStyle: 'bold',
+    },
+    alternateRowStyles: {
+      fillColor: [241, 245, 249], // Slate-100
+    },
+    margin: { left: 15, right: 15 },
+  });
+  
+  // Return the new Y position after the table
+  return (doc as any).lastAutoTable.finalY + 10;
+};
+
+/**
+ * Add the description section to the PDF
+ */
+export const addDescriptionSection = (doc: jsPDF, incident: IncidentItem, yPos: number): number => {
+  doc.setFont(fonts.bold);
+  doc.setFontSize(14);
+  doc.setTextColor(30, 64, 175); // Blue-800
+  doc.text('Description', 15, yPos);
+  
+  // Draw a line under the heading
+  doc.line(15, yPos + 2, 195, yPos + 2);
+  
+  // Add incident description
+  doc.setFont(fonts.normal);
+  doc.setFontSize(10);
+  doc.setTextColor(0, 0, 0);
+  const description = incident.description || 'No description provided';
+  const splitDescription = doc.splitTextToSize(description, 180);
+  doc.text(splitDescription, 15, yPos + 10);
+  
+  // Update y position after the description
+  return yPos + 15 + (splitDescription.length * 5);
+};
+
+/**
+ * Add the affected systems section to the PDF
+ */
+export const addAffectedSystemsSection = (doc: jsPDF, incident: IncidentItem, yPos: number): number => {
+  doc.setFont(fonts.bold);
+  doc.setFontSize(14);
+  doc.setTextColor(30, 64, 175); // Blue-800
+  doc.text('Affected Systems', 15, yPos);
+  
+  // Draw a line under the heading
+  doc.line(15, yPos + 2, 195, yPos + 2);
+  
+  // Add affected systems
+  doc.setFont(fonts.normal);
+  doc.setFontSize(10);
+  doc.setTextColor(0, 0, 0);
+  const affectedSystems = incident.affected_systems || 'None specified';
+  const systemsList = affectedSystems.split(',').map(system => system.trim());
+  
+  let currentY = yPos + 10;
+  systemsList.forEach((system) => {
+    doc.text(`• ${system}`, 15, currentY);
+    currentY += 5;
+  });
+  
+  return currentY + 5; // Return updated Y position with some padding
+};
+
+/**
+ * Add the root cause section to the PDF
+ */
+export const addRootCauseSection = (doc: jsPDF, incident: IncidentItem, yPos: number): number => {
+  doc.setFont(fonts.bold);
+  doc.setFontSize(14);
+  doc.setTextColor(30, 64, 175); // Blue-800
+  doc.text('Root Cause', 15, yPos);
+  
+  // Draw a line under the heading
+  doc.line(15, yPos + 2, 195, yPos + 2);
+  
+  // Add root cause
+  doc.setFont(fonts.normal);
+  doc.setFontSize(10);
+  doc.setTextColor(0, 0, 0);
+  const rootCause = incident.root_cause || 'Root cause not identified yet';
+  const splitRootCause = doc.splitTextToSize(rootCause, 180);
+  doc.text(splitRootCause, 15, yPos + 10);
+  
+  // Update y position after the root cause
+  return yPos + 15 + (splitRootCause.length * 5);
+};
+
+/**
+ * Add the resolution steps section to the PDF
+ */
+export const addResolutionSection = (doc: jsPDF, incident: IncidentItem, yPos: number): number => {
+  doc.setFont(fonts.bold);
+  doc.setFontSize(14);
+  doc.setTextColor(30, 64, 175); // Blue-800
+  doc.text('Resolution Steps', 15, yPos);
+  
+  // Draw a line under the heading
+  doc.line(15, yPos + 2, 195, yPos + 2);
+  
+  // Create resolution data table - Using resolution_steps
+  const resolutionSteps = incident.resolution_steps || 'No resolution steps provided';
+  const splitResolutionSteps = doc.splitTextToSize(resolutionSteps, 180);
+  
+  doc.setFontSize(10);
+  doc.setTextColor(0, 0, 0);
+  doc.text(splitResolutionSteps, 15, yPos + 10);
+  
+  return yPos + 20 + (splitResolutionSteps.length * 5);
+};
+
+/**
+ * Add the assignment information section to the PDF
+ */
+export const addAssignmentSection = (doc: jsPDF, incident: IncidentItem, yPos: number): number => {
+  doc.setFontSize(14);
+  doc.setTextColor(30, 64, 175); // Blue-800
+  doc.text('Assignment Information', 15, yPos);
+  
+  // Draw a line under the heading
+  doc.line(15, yPos + 2, 195, yPos + 2);
+  
+  // Add assigned user info
+  yPos += 10;
+  doc.setFontSize(10);
+  doc.setTextColor(0, 0, 0);
+  const assignedTo = incident.assigned_to || 'Not assigned';
+  doc.text(`Assigned to: ${assignedTo}`, 15, yPos);
+  
+  return yPos + 10;
+};
+
+/**
+ * Add the lessons learned section to the PDF if available
+ */
+export const addLessonsLearnedSection = (doc: jsPDF, incident: IncidentItem, yPos: number): number => {
+  if (!incident.lessons_learned) {
+    return yPos; // No lessons learned, return current position
+  }
+  
+  doc.setFontSize(14);
+  doc.setTextColor(30, 64, 175); // Blue-800
+  doc.text('Lessons Learned', 15, yPos);
+  
+  // Draw a line under the heading
+  doc.line(15, yPos + 2, 195, yPos + 2);
+  
+  // Add lessons learned
+  const lessonsLearned = incident.lessons_learned;
+  const splitLessonsLearned = doc.splitTextToSize(lessonsLearned, 180);
+  
+  doc.setFontSize(10);
+  doc.setTextColor(0, 0, 0);
+  doc.text(splitLessonsLearned, 15, yPos + 10);
+  
+  return yPos + 15 + (splitLessonsLearned.length * 5);
+};
+
diff --git a/application/src/services/incident/pdf/utils.ts b/application/src/services/incident/pdf/utils.ts
new file mode 100644
index 0000000..65a6c48
--- /dev/null
+++ b/application/src/services/incident/pdf/utils.ts
@@ -0,0 +1,26 @@
+
+import { format } from 'date-fns';
+
+// Font configuration for the PDF
+export const fonts = {
+  normal: 'Helvetica',
+  bold: 'Helvetica-Bold',
+  italic: 'Helvetica-Oblique',
+};
+
+// Helper function to format dates
+export const formatDate = (dateString: string | undefined): string => {
+  if (!dateString) return 'N/A';
+  try {
+    return format(new Date(dateString), 'PPp');
+  } catch (e) {
+    return dateString || 'N/A';
+  }
+};
+
+// Helper function to capitalize first letter
+export const capitalize = (str: string): string => {
+  if (!str) return '';
+  return str.charAt(0).toUpperCase() + str.slice(1);
+};
+
diff --git a/application/src/services/incident/types.ts b/application/src/services/incident/types.ts
new file mode 100644
index 0000000..0297356
--- /dev/null
+++ b/application/src/services/incident/types.ts
@@ -0,0 +1,57 @@
+
+// Define the type for incident item
+export type IncidentItem = {
+  id: string;
+  service_id?: string;
+  timestamp?: string;
+  description: string;
+  assigned_to?: string;
+  resolution_time?: string;
+  impact: string;
+  affected_systems: string;
+  root_cause?: string;
+  resolution_steps?: string;
+  lessons_learned?: string;
+  operational_status_id?: string;
+  server_id?: string;
+  priority: string;
+  status: string;
+  impact_status?: string;
+  created: string;
+  updated: string;
+  category?: string;
+  title: string; 
+};
+
+// Define the input type for creating an incident
+export type CreateIncidentInput = {
+  title: string;
+  description: string;
+  status: string;
+  impact: string;
+  affected_systems: string;
+  priority: string;
+  service_id?: string;
+  assigned_to?: string;
+  root_cause?: string;
+  resolution_steps?: string;
+  lessons_learned?: string;
+  timestamp?: string;
+  created_by: string;
+};
+
+// Define the input type for updating an incident
+export type UpdateIncidentInput = {
+  id: string;
+  title?: string;
+  description?: string;
+  status?: string;
+  impact?: string;
+  affected_systems?: string;
+  priority?: string;
+  service_id?: string;
+  assigned_to?: string;
+  root_cause?: string;
+  resolution_steps?: string;
+  lessons_learned?: string;
+};

From 1e8962cb112271aa7f7aebb70dce68cde58cc081 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Fri, 23 May 2025 20:37:36 +0800
Subject: [PATCH 11/16] Build Incident and maintenance service

---
 application/src/services/incidentService.ts   |   4 +
 .../src/services/maintenanceService.ts        | 182 ++++++++++++++++++
 2 files changed, 186 insertions(+)
 create mode 100644 application/src/services/incidentService.ts
 create mode 100644 application/src/services/maintenanceService.ts

diff --git a/application/src/services/incidentService.ts b/application/src/services/incidentService.ts
new file mode 100644
index 0000000..d8e3f46
--- /dev/null
+++ b/application/src/services/incidentService.ts
@@ -0,0 +1,4 @@
+
+// Re-export incident service from the new modular structure
+export * from './incident';
+export { incidentService as default } from './incident';
diff --git a/application/src/services/maintenanceService.ts b/application/src/services/maintenanceService.ts
new file mode 100644
index 0000000..feccc2a
--- /dev/null
+++ b/application/src/services/maintenanceService.ts
@@ -0,0 +1,182 @@
+
+import { pb, getCurrentEndpoint } from '@/lib/pocketbase';
+import { MaintenanceItem, CreateMaintenanceInput } from './types/maintenance.types';
+
+// Helper function to get the API URL
+const getApiUrl = (): string => {
+  return getCurrentEndpoint();
+};
+
+// Helper function to normalize maintenance items
+const normalizeMaintenanceItem = (item: any): MaintenanceItem => {
+  return {
+    ...item,
+    id: item.id || '',
+    title: item.title || '',
+    description: item.description || '',
+    status: item.status || 'Scheduled',
+    affected: item.affected || '',
+    priority: item.priority || 'Medium',
+    field: item.field || 'Minor',
+  } as MaintenanceItem;
+};
+
+const getMaintenanceRecords = async (): Promise<MaintenanceItem[]> => {
+  try {
+    // Use a unique requestKey to prevent caching issues
+    const timestamp = new Date().getTime();
+    
+    console.log("Fetching maintenance records from API...");
+    
+    // Increase items per page to ensure we get all records
+    const result = await pb.collection('maintenance').getList(1, 200, {
+      sort: '-created',
+      requestKey: `maintenance-${timestamp}`,
+    });
+    
+    console.log("Maintenance API response:", result);
+    
+    if (!result || !result.items || result.items.length === 0) {
+      console.log("No maintenance records found");
+      return [];
+    }
+    
+    return result.items.map(normalizeMaintenanceItem);
+  } catch (error) {
+    // Handle abort errors gracefully without console errors
+    if ((error as any)?.isAbort) {
+      console.log("Request aborted:", error);
+      return [];
+    }
+    
+    console.error('Error fetching maintenance records:', error);
+    // Return empty array instead of throwing to prevent UI crashes
+    return [];
+  }
+};
+
+const getUpcomingMaintenance = async (): Promise<MaintenanceItem[]> => {
+  try {
+    const allRecords = await getMaintenanceRecords();
+    const currentDate = new Date();
+    
+    // Filter for upcoming maintenance
+    const upcomingItems = allRecords.filter(item => {
+      const status = item.status?.toLowerCase() || '';
+      const startTime = new Date(item.start_time);
+      
+      return (status === 'scheduled' && startTime > currentDate);
+    });
+    
+    return upcomingItems;
+  } catch (error) {
+    console.error('Error fetching upcoming maintenance:', error);
+    return [];
+  }
+};
+
+const getOngoingMaintenance = async (): Promise<MaintenanceItem[]> => {
+  try {
+    const allRecords = await getMaintenanceRecords();
+    const currentDate = new Date();
+    
+    // Filter for ongoing maintenance
+    const ongoingItems = allRecords.filter(item => {
+      const status = item.status?.toLowerCase() || '';
+      const startTime = new Date(item.start_time);
+      const endTime = new Date(item.end_time);
+      
+      return status === 'in_progress' || 
+             (status === 'scheduled' && startTime <= currentDate && endTime >= currentDate);
+    });
+    
+    return ongoingItems;
+  } catch (error) {
+    console.error('Error fetching ongoing maintenance:', error);
+    return [];
+  }
+};
+
+const getCompletedMaintenance = async (): Promise<MaintenanceItem[]> => {
+  try {
+    const allRecords = await getMaintenanceRecords();
+    
+    // Filter for completed maintenance
+    const completedItems = allRecords.filter(item => {
+      const status = item.status?.toLowerCase() || '';
+      return status === 'completed' || status === 'cancelled';
+    });
+    
+    return completedItems;
+  } catch (error) {
+    console.error('Error fetching completed maintenance:', error);
+    return [];
+  }
+};
+
+const updateMaintenanceStatus = async (id: string, status: string): Promise<void> => {
+  try {
+    // Ensure proper case for the status value
+    const formattedStatus = status.charAt(0).toUpperCase() + status.slice(1);
+    await pb.collection('maintenance').update(id, { status: formattedStatus });
+  } catch (error) {
+    console.error('Error updating maintenance status:', error);
+    throw error;
+  }
+};
+
+const deleteMaintenance = async (id: string): Promise<void> => {
+  try {
+    await pb.collection('maintenance').delete(id);
+  } catch (error) {
+    console.error('Error deleting maintenance:', error);
+    throw error;
+  }
+};
+
+const createMaintenance = async (data: CreateMaintenanceInput): Promise<void> => {
+  try {
+    // Validate that all required fields are present
+    if (!data.title || !data.description || !data.start_time || !data.end_time || 
+        !data.affected || !data.priority || !data.status || !data.field) {
+      throw new Error("Missing required fields for maintenance creation");
+    }
+    
+    // Format the payload according to API requirements
+    const payload = {
+      title: data.title,
+      description: data.description,
+      start_time: data.start_time,
+      end_time: data.end_time,
+      affected: data.affected,
+      priority: data.priority.charAt(0).toUpperCase() + data.priority.slice(1),
+      status: data.status.charAt(0).toUpperCase() + data.status.slice(1),
+      field: data.field.charAt(0).toUpperCase() + data.field.slice(1),
+      created_by: data.created_by,
+      notify_subscribers: data.notify_subscribers,
+      assigned_users: data.assigned_users || "",
+      notification_channel_id: data.notification_channel_id || "",
+    };
+    
+    await pb.collection('maintenance').create(payload);
+  } catch (error) {
+    console.error('Error creating maintenance:', error);
+    if (error instanceof Error) {
+      console.error('Error details:', error.message);
+    }
+    throw error;
+  }
+};
+
+export const maintenanceService = {
+  getApiUrl,
+  getMaintenanceRecords,
+  getUpcomingMaintenance,
+  getOngoingMaintenance,
+  getCompletedMaintenance,
+  updateMaintenanceStatus,
+  deleteMaintenance,
+  createMaintenance,
+};
+
+// No need to re-export types here as they are now imported from maintenance.types.ts

From 09ce22b4fb76b3497cf34c3c997de964406a48dd Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Fri, 23 May 2025 20:37:59 +0800
Subject: [PATCH 12/16] Updated UI Component

---
 application/src/components/ui/popover.tsx   | 3 ++-
 application/src/components/ui/separator.tsx | 3 ++-
 application/src/components/ui/textarea.tsx  | 5 +++--
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/application/src/components/ui/popover.tsx b/application/src/components/ui/popover.tsx
index bbba7e0..aaba3ea 100644
--- a/application/src/components/ui/popover.tsx
+++ b/application/src/components/ui/popover.tsx
@@ -1,3 +1,4 @@
+
 import * as React from "react"
 import * as PopoverPrimitive from "@radix-ui/react-popover"
 
@@ -26,4 +27,4 @@ const PopoverContent = React.forwardRef<
 ))
 PopoverContent.displayName = PopoverPrimitive.Content.displayName
 
-export { Popover, PopoverTrigger, PopoverContent }
+export { Popover, PopoverTrigger, PopoverContent }
\ No newline at end of file
diff --git a/application/src/components/ui/separator.tsx b/application/src/components/ui/separator.tsx
index 6d7f122..4116649 100644
--- a/application/src/components/ui/separator.tsx
+++ b/application/src/components/ui/separator.tsx
@@ -1,3 +1,4 @@
+
 import * as React from "react"
 import * as SeparatorPrimitive from "@radix-ui/react-separator"
 
@@ -26,4 +27,4 @@ const Separator = React.forwardRef<
 )
 Separator.displayName = SeparatorPrimitive.Root.displayName
 
-export { Separator }
+export { Separator }
\ No newline at end of file
diff --git a/application/src/components/ui/textarea.tsx b/application/src/components/ui/textarea.tsx
index 9f9a6dc..f2fd249 100644
--- a/application/src/components/ui/textarea.tsx
+++ b/application/src/components/ui/textarea.tsx
@@ -1,3 +1,4 @@
+
 import * as React from "react"
 
 import { cn } from "@/lib/utils"
@@ -10,7 +11,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          "flex min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
           className
         )}
         ref={ref}
@@ -21,4 +22,4 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 )
 Textarea.displayName = "Textarea"
 
-export { Textarea }
+export { Textarea }
\ No newline at end of file

From 280c5dcc8638a4a5b909ced565844e08900ca612 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Fri, 23 May 2025 20:39:25 +0800
Subject: [PATCH 13/16] Refactor the Translations language to seperate their
 own directory, for easy to maintenable and scalable language

---
 application/src/translations/de.ts            | 204 -----------------
 application/src/translations/de/about.ts      |  20 ++
 application/src/translations/de/common.ts     |  29 +++
 application/src/translations/de/incident.ts   |  55 +++++
 application/src/translations/de/index.ts      |  23 ++
 application/src/translations/de/login.ts      |  24 ++
 .../src/translations/de/maintenance.ts        |  68 ++++++
 application/src/translations/de/menu.ts       |  23 ++
 application/src/translations/de/services.ts   |  13 ++
 application/src/translations/de/ssl.ts        | 107 +++++++++
 application/src/translations/en.ts            | 205 ------------------
 application/src/translations/en/about.ts      |  18 ++
 application/src/translations/en/common.ts     |  29 +++
 application/src/translations/en/incident.ts   |  55 +++++
 application/src/translations/en/index.ts      |  23 ++
 application/src/translations/en/login.ts      |  23 ++
 .../src/translations/en/maintenance.ts        |  68 ++++++
 application/src/translations/en/menu.ts       |  21 ++
 application/src/translations/en/services.ts   |  12 +
 application/src/translations/en/ssl.ts        | 107 +++++++++
 application/src/translations/index.ts         |  11 +-
 application/src/translations/km.ts            | 204 -----------------
 application/src/translations/km/about.ts      |  18 ++
 application/src/translations/km/common.ts     |  29 +++
 application/src/translations/km/incident.ts   |  55 +++++
 application/src/translations/km/index.ts      |  23 ++
 application/src/translations/km/login.ts      |  23 ++
 .../src/translations/km/maintenance.ts        |  68 ++++++
 application/src/translations/km/menu.ts       |  21 ++
 application/src/translations/km/services.ts   |  12 +
 application/src/translations/km/ssl.ts        | 107 +++++++++
 application/src/translations/types/about.ts   |  16 ++
 application/src/translations/types/common.ts  |  26 +++
 .../src/translations/types/incident.ts        |  53 +++++
 application/src/translations/types/index.ts   |  20 ++
 application/src/translations/types/login.ts   |  21 ++
 .../src/translations/types/maintenance.ts     |  66 ++++++
 application/src/translations/types/menu.ts    |  19 ++
 .../src/translations/types/services.ts        |  10 +
 application/src/translations/types/ssl.ts     | 105 +++++++++
 40 files changed, 1416 insertions(+), 618 deletions(-)
 delete mode 100644 application/src/translations/de.ts
 create mode 100644 application/src/translations/de/about.ts
 create mode 100644 application/src/translations/de/common.ts
 create mode 100644 application/src/translations/de/incident.ts
 create mode 100644 application/src/translations/de/index.ts
 create mode 100644 application/src/translations/de/login.ts
 create mode 100644 application/src/translations/de/maintenance.ts
 create mode 100644 application/src/translations/de/menu.ts
 create mode 100644 application/src/translations/de/services.ts
 create mode 100644 application/src/translations/de/ssl.ts
 delete mode 100644 application/src/translations/en.ts
 create mode 100644 application/src/translations/en/about.ts
 create mode 100644 application/src/translations/en/common.ts
 create mode 100644 application/src/translations/en/incident.ts
 create mode 100644 application/src/translations/en/index.ts
 create mode 100644 application/src/translations/en/login.ts
 create mode 100644 application/src/translations/en/maintenance.ts
 create mode 100644 application/src/translations/en/menu.ts
 create mode 100644 application/src/translations/en/services.ts
 create mode 100644 application/src/translations/en/ssl.ts
 delete mode 100644 application/src/translations/km.ts
 create mode 100644 application/src/translations/km/about.ts
 create mode 100644 application/src/translations/km/common.ts
 create mode 100644 application/src/translations/km/incident.ts
 create mode 100644 application/src/translations/km/index.ts
 create mode 100644 application/src/translations/km/login.ts
 create mode 100644 application/src/translations/km/maintenance.ts
 create mode 100644 application/src/translations/km/menu.ts
 create mode 100644 application/src/translations/km/services.ts
 create mode 100644 application/src/translations/km/ssl.ts
 create mode 100644 application/src/translations/types/about.ts
 create mode 100644 application/src/translations/types/common.ts
 create mode 100644 application/src/translations/types/incident.ts
 create mode 100644 application/src/translations/types/index.ts
 create mode 100644 application/src/translations/types/login.ts
 create mode 100644 application/src/translations/types/maintenance.ts
 create mode 100644 application/src/translations/types/menu.ts
 create mode 100644 application/src/translations/types/services.ts
 create mode 100644 application/src/translations/types/ssl.ts

diff --git a/application/src/translations/de.ts b/application/src/translations/de.ts
deleted file mode 100644
index 7451ea6..0000000
--- a/application/src/translations/de.ts
+++ /dev/null
@@ -1,204 +0,0 @@
-export const deTranslations = {
-  welcome: "Willkommen",
-  logout: "Abmelden",
-  language: "Sprache",
-  english: "Englisch",
-  khmer: "Khmer",
-  german: "Deutsch",
-  goodMorning: "Guten Morgen",
-  goodAfternoon: "Guten Nachmittag",
-  goodEvening: "Guten Abend",
-  // Hauptmenü-Übersetzungen
-  uptimeMonitoring: "Betriebszeitüberwachung",
-  instanceMonitoring: "Instanzüberwachung",
-  sslDomain: "SSL & Domain",
-  scheduleIncident: "Zeitplan & Vorfall",
-  operationalPage: "Betriebsstatus-Seite",
-  reports: "Berichte",
-  apiDocumentation: "API-Dokumentation",
-  // Einstellungen-Panel
-  settingPanel: "Einstellungsbereich",
-  generalSettings: "Allgemeine Einstellungen",
-  userManagement: "Benutzerverwaltung",
-  notificationSettings: "Benachrichtigungseinstellungen",
-  alertsTemplates: "Alarmvorlagen",
-  rolesManagement: "Rollenverwaltung",
-  dataRetention: "Datenspeicherung",
-  backupSettings: "Backup-Einstellungen",
-  aboutSystem: "Über das System",
-  // Dienst-Tabelle
-  serviceName: "Dienstname",
-  serviceType: "Diensttyp",
-  serviceStatus: "Dienststatus",
-  responseTime: "Antwortzeit",
-  uptime: "Betriebszeit",
-  lastChecked: "Zuletzt überprüft",
-  // Vorfall-Tabelle
-  time: "Zeit",
-  status: "Status",
-  // Allgemeine UI-Elemente
-  profile: "Profil",
-  settings: "Einstellungen",
-  documentation: "Dokumentation",
-  notifications: "Benachrichtigungen",
-  noServices: "Keine Dienste entsprechen den Filterkriterien.",
-  // Login-Seite
-  signInToYourAccount: "Melden Sie sich bei Ihrem Konto an",
-  dontHaveAccount: "Sie haben kein Konto?",
-  createOne: "Erstellen Sie eines",
-  signInWithGoogle: "Mit Google anmelden",
-  orContinueWith: "ODER",
-  email: "E-Mail",
-  password: "Passwort",
-  forgot: "Vergessen?",
-  signIn: "Anmelden",
-  signingIn: "Anmeldung läuft...",
-  loginSuccessful: "Anmeldung erfolgreich",
-  loginSuccessMessage: "Sie wurden erfolgreich angemeldet.",
-  loginFailed: "Anmeldung fehlgeschlagen",
-  authenticationFailed: "Authentifizierung fehlgeschlagen",
-  bySigningIn: "Durch die Anmeldung stimmen Sie unseren",
-  termsAndConditions: "Allgemeinen Geschäftsbedingungen",
-  and: "und",
-  privacyPolicy: "Datenschutzrichtlinie",
-  // Über das System
-  aboutCheckcle: "Über Checkcle",
-  systemDescription: "Checkcle ist ein Open-Source-Überwachungs-Stack, der Echtzeit-Einblicke in Server- und Dienstzustände, Vorfallmanagement und operative Transparenz bietet. Veröffentlicht unter der MIT-Lizenz.",
-  systemVersion: "Systemversion",
-  license: "Lizenz",
-  mitLicense: "MIT-Lizenz",
-  links: "Links",
-  viewOnGithub: "Auf GitHub ansehen",
-  viewDocumentation: "Dokumentation ansehen",
-  followOnX: "Auf X folgen",
-  joinDiscord: "Discord beitreten",
-  // Schnellaktionen
-  quickActions: "Schnellaktionen",
-  quickActionsDescription: "Greifen Sie schnell auf häufige Überwachungsvorgänge und Funktionen zu. Wählen Sie unten eine Aktion aus, um zu beginnen.",
-  close: "Schließen",
-  quickTips: "Schnelle Tipps",
-  // Website-Überwachung
-  monitorWebsite: "Website-Überwachung",
-  monitorWebsiteDesc: "Überwachen Sie die Verfügbarkeit und Leistung von Websites mit detaillierten Metriken und Warnungen.",
-  monitorMultipleEndpoints: "Mehrere Endpunkte überwachen",
-  trackResponseTimes: "Antwortzeiten verfolgen",
-  setCustomAlerts: "Benutzerdefinierte Warnungen festlegen",
-  // Serverüberwachung
-  monitorServer: "Serverüberwachung",
-  monitorServerDesc: "Verfolgen Sie Servergesundheitsmetriken wie CPU, Speicher, Festplattennutzung und Netzwerkverkehr.",
-  monitorCPURam: "CPU- & RAM-Nutzung überwachen",
-  trackNetworkMetrics: "Netzwerkmetriken verfolgen",
-  viewProcesses: "Aktive Prozesse anzeigen",
-  // SSL-Zertifikate
-  sslCertificate: "SSL-Zertifikat",
-  sslCertificateDesc: "Überwachen Sie die Gültigkeit von SSL-Zertifikaten und erhalten Sie Warnungen vor Ablaufdaten.",
-  trackSSLExpiration: "Ablaufdaten von SSL-Zertifikaten verfolgen",
-  getEarlyRenewal: "Frühzeitige Erneuerungshinweise erhalten",
-  monitorMultipleDomains: "Mehrere Domains überwachen",
-  // Vorfallsmanagement
-  incidentsManagement: "Vorfallsmanagement",
-  incidentsManagementDesc: "Erstellen, verfolgen und verwalten Sie Vorfälle einschließlich Zuweisungs- und Lösungsabläufe.",
-  createTrackIncidents: "Vorfälle erstellen & verfolgen",
-  assignIncidents: "Vorfälle einem Team zuweisen",
-  monitorResolution: "Lösungsfortschritt überwachen",
-  // Betriebsstatus
-  operationalStatus: "Betriebsstatus",
-  operationalStatusDesc: "Erstellen und verwalten Sie öffentliche Statusseiten, um Benutzern den Systemzustand mitzuteilen.",
-  createCustomStatus: "Benutzerdefinierte Statusseiten erstellen",
-  displayRealTime: "Echtzeitmetriken anzeigen",
-  shareIncidentUpdates: "Vorfallaktualisierungen teilen",
-  // Berichte & Analysen
-  reportsAnalytics: "Berichte & Analysen",
-  reportsAnalyticsDesc: "Berichte zur Systemleistung, Betriebszeit-Historie und Vorfallmetriken erstellen.",
-  generateUptimeReports: "Berichte zur Betriebszeit erstellen",
-  analyzePerformance: "Leistungstrends analysieren",
-  exportMonitoringData: "Überwachungsdaten exportieren",
-  // SSL Domain Management Seite
-  sslDomainManagement: "SSL- & Domainverwaltung",
-  monitorSSLCertificates: "SSL-Zertifikate und deren Ablaufdaten überwachen",
-  validCertificates: "Gültige Zertifikate",
-  expiringSoon: "Läuft bald ab",
-  expired: "Abgelaufen",
-  refreshAll: "Alle aktualisieren",
-  addDomain: "Domain hinzufügen",
-  domain: "Domain",
-  issuer: "Aussteller",
-  expirationDate: "Ablaufdatum",
-  daysLeft: "Verbleibende Tage",
-  lastNotified: "Zuletzt benachrichtigt",
-  actions: "Aktionen",
-  view: "Ansehen",
-  check: "Prüfen",
-  edit: "Bearbeiten",
-  delete: "Löschen",
-  never: "Nie",
-  unknown: "Unbekannt",
-  checkingSSLCertificate: "SSL-Zertifikat wird überprüft...",
-  noSSLCertificates: "Keine SSL-Zertifikate gefunden",
-  // SSL-Zertifikat hinzufügen
-  addSSLCertificate: "SSL-Zertifikat hinzufügen",
-  warningThreshold: "Warnschwelle (Tage)",
-  expiryThreshold: "Ablaufschwelle (Tage)",
-  notificationChannel: "Benachrichtigungskanal",
-  cancel: "Abbrechen",
-  addCertificate: "Zertifikat hinzufügen",
-  getNotifiedExpiration: "Benachrichtigung erhalten, wenn Zertifikate bald ablaufen",
-  getNotifiedCritical: "Benachrichtigung erhalten, wenn Zertifikate kritisch kurz vor Ablauf stehen",
-  chooseChannel: "Wählen Sie, wo Sie Benachrichtigungen erhalten möchten",
-  loadingChannels: "Kanäle werden geladen...",
-  noChannelsFound: "Keine Benachrichtigungskanäle gefunden",
-  // SSL-Zertifikat bearbeiten
-  editSSLCertificate: "SSL-Zertifikat bearbeiten",
-  domainName: "Domainname",
-  domainCannotChange: "Domainname kann nicht geändert werden. Um eine andere Domain zu überwachen, fügen Sie ein neues Zertifikat hinzu.",
-  warningThresholdDays: "Warnschwelle (Tage)",
-  expiryThresholdDays: "Ablaufschwelle (Tage)",
-  daysBeforeExpiration: "Tage vor Ablauf zur Warnung",
-  daysBeforeCritical: "Tage vor Ablauf zur kritischen Warnung",
-  whereToSend: "Wohin die Benachrichtigungen gesendet werden sollen",
-  saveChanges: "Änderungen speichern",
-  updating: "Aktualisiere...",
-  // SSL-Zertifikat Details
-  sslCertificateDetails: "SSL-Zertifikatdetails",
-  detailedInfo: "Detaillierte Informationen zum SSL-Zertifikat für",
-  basicInformation: "Basisinformationen",
-  validity: "Gültigkeit",
-  validFrom: "Gültig ab",
-  validUntil: "Gültig bis",
-  validityDays: "Gültigkeitstage",
-  issuerInfo: "Aussteller",
-  organization: "Organisation",
-  commonName: "Allgemeiner Name",
-  technicalDetails: "Technische Details",
-  serialNumber: "Seriennummer",
-  algorithm: "Algorithmus",
-  subjectAltNames: "Alternative Namen (SANs)",
-  none: "Keine",
-  monitoringConfig: "Überwachungskonfiguration",
-  recordInfo: "Informationen zum Eintrag",
-  created: "Erstellt",
-  lastUpdated: "Zuletzt aktualisiert",
-  lastNotification: "Letzte Benachrichtigung",
-  collectionId: "Sammlungs-ID",
-  // Löschen bestätigen
-  deleteSSLCertificate: "SSL-Zertifikat löschen",
-  deleteConfirmation: "Möchten Sie das SSL-Zertifikat für wirklich löschen?",
-  deleteWarning: "Diese Aktion kann nicht rückgängig gemacht werden.",
-  // Status-Badges
-  valid: "Gültig",
-  pending: "Ausstehend",
-  // Erfolg- und Fehlermeldungen
-  sslCertificateAdded: "SSL-Zertifikat erfolgreich hinzugefügt",
-  sslCertificateUpdated: "SSL-Zertifikat erfolgreich aktualisiert",
-  sslCertificateDeleted: "SSL-Zertifikat erfolgreich gelöscht",
-  sslCertificateRefreshed: "SSL-Zertifikat für {domain} erfolgreich aktualisiert",
-  allCertificatesRefreshed: "Alle {count} Zertifikate erfolgreich aktualisiert",
-  someCertificatesFailed: "{success} Zertifikate aktualisiert, {failed} fehlgeschlagen",
-  failedToLoadCertificates: "SSL-Zertifikate konnten nicht geladen werden",
-  failedToAddCertificate: "SSL-Zertifikat konnte nicht hinzugefügt werden",
-  failedToUpdateCertificate: "SSL-Zertifikat konnte nicht aktualisiert werden",
-  failedToDeleteCertificate: "SSL-Zertifikat konnte nicht gelöscht werden",
-  failedToCheckCertificate: "SSL-Zertifikat konnte nicht überprüft werden",
-  noCertificatesToRefresh: "Keine Zertifikate zum Aktualisieren",
-  startingRefreshAll: "Beginne Aktualisierung aller {count} Zertifikate..."
-};
diff --git a/application/src/translations/de/about.ts b/application/src/translations/de/about.ts
new file mode 100644
index 0000000..218c972
--- /dev/null
+++ b/application/src/translations/de/about.ts
@@ -0,0 +1,20 @@
+// Über das System
+import { AboutTranslations } from '../types/about';
+
+export const aboutTranslations: AboutTranslations = {
+  aboutCheckcle: "Über Checkcle",
+  systemDescription: "Checkcle ist ein Open-Source-Überwachungs-Stack, der Echtzeit-Einblicke in Server- und Dienstzustände, Vorfallmanagement und operative Transparenz bietet. Veröffentlicht unter der MIT-Lizenz.",
+  systemVersion: "Systemversion",
+  license: "Lizenz",
+  mitLicense: "MIT-Lizenz",
+  links: "Links",
+  viewOnGithub: "Auf GitHub ansehen",
+  viewDocumentation: "Dokumentation ansehen",
+  followOnX: "Auf X folgen",
+  joinDiscord: "Discord beitreten",
+  quickActions: "Quick Actions",
+  quickActionsDescription: "Access common monitoring operations and features quickly. Select an action below to get started.",
+  quickTips: "Quick Tips",
+};
+
+
diff --git a/application/src/translations/de/common.ts b/application/src/translations/de/common.ts
new file mode 100644
index 0000000..a104def
--- /dev/null
+++ b/application/src/translations/de/common.ts
@@ -0,0 +1,29 @@
+
+import { CommonTranslations } from '../types/common';
+
+export const commonTranslations: CommonTranslations = {
+  welcome: "Willkommen",
+  logout: "Abmelden",
+  language: "Sprache",
+  english: "Englisch",
+  khmer: "Khmer",
+  german: "Deutsch",
+  goodMorning: "Guten Morgen",
+  goodAfternoon: "Guten Nachmittag",
+  goodEvening: "Guten Abend",
+  profile: "Profile",
+  settings: "Settings",
+  documentation: "Documentation",
+  notifications: "Notifications",
+  close: "Close",
+  cancel: "Cancel",
+  view: "View",
+  edit: "Edit",
+  delete: "Delete",
+  status: "Status",
+  time: "Time",
+  title: "Title",
+  description: "Description",
+  success: "Success",
+  error: "Error",
+};
diff --git a/application/src/translations/de/incident.ts b/application/src/translations/de/incident.ts
new file mode 100644
index 0000000..461babd
--- /dev/null
+++ b/application/src/translations/de/incident.ts
@@ -0,0 +1,55 @@
+
+import { IncidentTranslations } from '../types/incident';
+
+export const incidentTranslations: IncidentTranslations = {
+  incidentManagement: 'Incident Management',
+  incidentsManagementDesc: 'Track and manage service incidents and their resolutions',
+  unresolvedIncidents: 'Unresolved',
+  resolvedIncidents: 'Resolved',
+  activeIncidents: 'Active Incidents',
+  criticalIssues: 'Critical Issues',
+  avgResolutionTime: 'Avg. Resolution Time',
+  noIncidents: 'No Active Incidents',
+  createIncident: 'Create Incident',
+  investigating: 'Investigating',
+  identified: 'Identified',
+  monitoring: 'Monitoring',
+  resolved: 'Resolved',
+  scheduleIncidentManagement: 'Schedule & Incident Management',
+  incidentName: 'Incident Name',
+  incidentStatus: 'Incident Status',
+  highPriority: 'High Priority',
+  configurationSettings: 'Configuration Settings',
+  incidentCreatedSuccess: 'Incident created successfully',
+  basicInfo: 'Basic Information',
+  serviceId: 'Service ID',
+  assignedTo: 'Assigned To',
+  unassigned: 'Unassigned',
+  timeline: 'Timeline',
+  incidentTime: 'Incident Time',
+  resolutionTime: 'Resolution Time',
+  systems: 'Systems',
+  noSystems: 'No systems affected',
+  impactAnalysis: 'Impact Analysis',
+  rootCause: 'Root Cause',
+  resolutionSteps: 'Resolution Steps',
+  lessonsLearned: 'Lessons Learned',
+  resolutionDetails: 'Resolution Details',
+  assignment: 'Assignment',
+  download: 'Download',
+  downloadPdf: 'Download PDF',
+  print: 'Print',
+  confidentialNote: 'This document is confidential and intended for internal use only.',
+  generatedOn: 'Generated on',
+  enterResolutionSteps: 'Enter steps taken to resolve the incident',
+  enterLessonsLearned: 'Enter lessons learned from this incident',
+  editIncident: 'Edit Incident',
+  editIncidentDesc: 'Update details for this incident',
+  updating: 'Updating...',
+  update: 'Update',
+  create: 'Create',
+  creating: 'Creating...',
+  configuration: 'Configuration',
+  failedToUpdateStatus: 'Failed to update status',
+  inProgress: 'In Progress',
+};
diff --git a/application/src/translations/de/index.ts b/application/src/translations/de/index.ts
new file mode 100644
index 0000000..a1794be
--- /dev/null
+++ b/application/src/translations/de/index.ts
@@ -0,0 +1,23 @@
+
+import { Translations } from '../types';
+import { commonTranslations } from './common';
+import { menuTranslations } from './menu';
+import { loginTranslations } from './login';
+import { aboutTranslations } from './about';
+import { servicesTranslations } from './services';
+import { maintenanceTranslations } from './maintenance';
+import { incidentTranslations } from './incident';
+import { sslTranslations } from './ssl';
+
+const enTranslations: Translations = {
+  common: commonTranslations,
+  menu: menuTranslations,
+  login: loginTranslations,
+  about: aboutTranslations,
+  services: servicesTranslations,
+  maintenance: maintenanceTranslations,
+  incident: incidentTranslations,
+  ssl: sslTranslations
+};
+
+export default enTranslations;
diff --git a/application/src/translations/de/login.ts b/application/src/translations/de/login.ts
new file mode 100644
index 0000000..214549e
--- /dev/null
+++ b/application/src/translations/de/login.ts
@@ -0,0 +1,24 @@
+
+import { LoginTranslations } from '../types/login';
+
+export const loginTranslations: LoginTranslations = {
+  // Login-Seite
+  signInToYourAccount: "Melden Sie sich bei Ihrem Konto an",
+  dontHaveAccount: "Sie haben kein Konto?",
+  createOne: "Erstellen Sie eines",
+  signInWithGoogle: "Mit Google anmelden",
+  orContinueWith: "ODER",
+  email: "E-Mail",
+  password: "Passwort",
+  forgot: "Vergessen?",
+  signIn: "Anmelden",
+  signingIn: "Anmeldung läuft...",
+  loginSuccessful: "Anmeldung erfolgreich",
+  loginSuccessMessage: "Sie wurden erfolgreich angemeldet.",
+  loginFailed: "Anmeldung fehlgeschlagen",
+  authenticationFailed: "Authentifizierung fehlgeschlagen",
+  bySigningIn: "Durch die Anmeldung stimmen Sie unseren",
+  termsAndConditions: "Allgemeinen Geschäftsbedingungen",
+  and: "und",
+  privacyPolicy: "Datenschutzrichtlinie",
+  };
diff --git a/application/src/translations/de/maintenance.ts b/application/src/translations/de/maintenance.ts
new file mode 100644
index 0000000..c056eea
--- /dev/null
+++ b/application/src/translations/de/maintenance.ts
@@ -0,0 +1,68 @@
+
+import { MaintenanceTranslations } from '../types/maintenance';
+
+export const maintenanceTranslations: MaintenanceTranslations = {
+  scheduledMaintenance: 'Scheduled Maintenance',
+  scheduledMaintenanceDesc: 'View and manage planned maintenance windows for your systems and services',
+  upcomingMaintenance: 'Upcoming',
+  ongoingMaintenance: 'Ongoing',
+  completedMaintenance: 'Completed',
+  createMaintenanceWindow: 'Create Maintenance',
+  totalScheduledHours: 'Total Scheduled Hours',
+  maintenanceName: 'Maintenance Name',
+  maintenanceStatus: 'Status',
+  scheduledStart: 'Scheduled Start',
+  scheduledEnd: 'Scheduled End',
+  affectedServices: 'Affected Services',
+  impact: 'Impact',
+  minor: 'Minor',
+  major: 'Major',
+  critical: 'Critical',
+  none: 'None',
+  actions: 'Actions',
+  scheduled: 'Scheduled',
+  inprogress: 'In Progress',
+  completed: 'Completed',
+  cancelled: 'Cancelled',
+  markAsInProgress: 'Mark as In Progress',
+  markAsCompleted: 'Mark as Completed',
+  markAsCancelled: 'Mark as Cancelled',
+  confirmDelete: 'Confirm Delete',
+  deleteMaintenanceConfirmation: 'Are you sure you want to delete this maintenance window?',
+  thisActionCannotBeUndone: 'This action cannot be undone.',
+  maintenanceDeleted: 'Maintenance Deleted',
+  maintenanceDeletedDesc: 'The maintenance window has been deleted successfully.',
+  errorDeletingMaintenance: 'There was an error deleting the maintenance window.',
+  statusUpdated: 'Status Updated',
+  maintenanceStatusUpdated: 'Maintenance status has been updated successfully.',
+  errorUpdatingMaintenanceStatus: 'There was an error updating the maintenance status.',
+  createMaintenance: 'Create Maintenance',
+  createMaintenanceDesc: 'Schedule a new maintenance window for your services',
+  enterTitle: 'Enter maintenance title',
+  enterDescription: 'Enter detailed description of the maintenance',
+  startTime: 'Start Time',
+  endTime: 'End Time',
+  selectDate: 'Select a date',
+  enterAffectedServices: 'Enter affected services',
+  separateServicesWithComma: 'Separate multiple services with commas',
+  priority: 'Priority',
+  selectPriority: 'Select priority',
+  selectStatus: 'Select status',
+  selectImpact: 'Select impact',
+  notifySubscribers: 'Notify Subscribers',
+  notifySubscribersDesc: 'Send notifications to all subscribers when this maintenance starts',
+  maintenanceCreated: 'Maintenance Created',
+  maintenanceCreatedDesc: 'The maintenance window has been scheduled successfully.',
+  errorCreatingMaintenance: 'There was an error creating the maintenance window.',
+  errorFetchingMaintenanceData: 'There was an error fetching maintenance data.',
+  low: 'Low',
+  medium: 'Medium',
+  high: 'High',
+  created: 'Created',
+  lastUpdated: 'Last Updated',
+  subscribersWillBeNotified: 'Subscribers will be notified when maintenance begins',
+  noNotifications: 'No notifications will be sent',
+  noScheduledMaintenance: 'No Scheduled Maintenance',
+  noMaintenanceWindows: 'There are no maintenance windows for this period. Create one by clicking the "Create Maintenance" button.',
+  maintenanceCreatedSuccess: 'Maintenance window created successfully',
+};
diff --git a/application/src/translations/de/menu.ts b/application/src/translations/de/menu.ts
new file mode 100644
index 0000000..89b22a6
--- /dev/null
+++ b/application/src/translations/de/menu.ts
@@ -0,0 +1,23 @@
+
+import { MenuTranslations } from '../types/menu';
+
+export const menuTranslations: MenuTranslations = {
+  // Hauptmenü-Übersetzungen
+  uptimeMonitoring: "Betriebszeitüberwachung",
+  instanceMonitoring: "Instanzüberwachung",
+  sslDomain: "SSL & Domain",
+  scheduleIncident: "Zeitplan & Vorfall",
+  operationalPage: "Betriebsstatus-Seite",
+  reports: "Berichte",
+  apiDocumentation: "API-Dokumentation",
+  // Einstellungen-Panel
+  settingPanel: "Einstellungsbereich",
+  generalSettings: "Allgemeine Einstellungen",
+  userManagement: "Benutzerverwaltung",
+  notificationSettings: "Benachrichtigungseinstellungen",
+  alertsTemplates: "Alarmvorlagen",
+  rolesManagement: "Rollenverwaltung",
+  dataRetention: "Datenspeicherung",
+  backupSettings: "Backup-Einstellungen",
+  aboutSystem: "Über das System",
+};
diff --git a/application/src/translations/de/services.ts b/application/src/translations/de/services.ts
new file mode 100644
index 0000000..917de48
--- /dev/null
+++ b/application/src/translations/de/services.ts
@@ -0,0 +1,13 @@
+
+import { ServicesTranslations } from '../types/services';
+
+export const servicesTranslations: ServicesTranslations = {
+// Dienst-Tabelle
+  serviceName: "Dienstname",
+  serviceType: "Diensttyp",
+  serviceStatus: "Dienststatus",
+  responseTime: "Antwortzeit",
+  uptime: "Betriebszeit",
+  lastChecked: "Zuletzt überprüft",
+  noServices: "No services match your filter criteria.",
+};
diff --git a/application/src/translations/de/ssl.ts b/application/src/translations/de/ssl.ts
new file mode 100644
index 0000000..d2715b4
--- /dev/null
+++ b/application/src/translations/de/ssl.ts
@@ -0,0 +1,107 @@
+
+import { SSLTranslations } from '../types/ssl';
+
+export const sslTranslations: SSLTranslations = {
+  // Page and section titles
+  sslDomainManagement: "SSL- & Domainverwaltung",
+  monitorSSLCertificates: "SSL-Zertifikate und deren Ablaufdaten überwachen",
+  addSSLCertificate: "SSL-Zertifikat hinzufügen",
+  editSSLCertificate: "SSL-Zertifikat bearbeiten",
+  deleteSSLCertificate: "Delete SSL Certificate",
+  sslCertificateDetails: "SSL-Zertifikatdetails",
+  detailedInfo: "Detaillierte Informationen zum SSL-Zertifikat für",
+
+  // Status related
+  valid: "Gültig",
+  expiringSoon: "Läuft bald ab",
+  expired: "Abgelaufen",
+  pending: "Ausstehend",
+
+  // Statistics and cards
+  validCertificates: "Gültige Zertifikate",
+  expiringSoonCertificates: "Läuft bald ab",
+  expiredCertificates: "Abgelaufen",
+
+  // Form fields
+  domain: "Domain",
+  domainName: "Domainname",
+  domainCannotChange: "Domainname kann nicht geändert werden. Um eine andere Domain zu überwachen, fügen Sie ein neues Zertifikat hinzu.",
+  warningThreshold: "Warnschwelle (Tage)",
+  warningThresholdDays: "Warnschwelle (Tage)",
+  expiryThreshold: "Ablaufschwelle (Tage)",
+  expiryThresholdDays: "Ablaufschwelle (Tage)",
+  notificationChannel: "Benachrichtigungskanal",
+  chooseChannel: "Wählen Sie, wo Sie Benachrichtigungen erhalten möchten",
+  whereToSend: "Wohin die Benachrichtigungen gesendet werden sollen",
+  daysBeforeExpiration: "Tage vor Ablauf zur Warnung",
+  daysBeforeCritical: "Tage vor Ablauf zur kritischen Warnung",
+  getNotifiedExpiration: "Benachrichtigung erhalten, wenn Zertifikate bald ablaufen",
+  getNotifiedCritical: "Benachrichtigung erhalten, wenn Zertifikate kritisch kurz vor Ablauf stehen",
+
+  // Table headers and fields
+  issuer: "Aussteller",
+  expirationDate: "Ablaufdatum",
+  daysLeft: "Verbleibende Tage",
+  status: "Status",
+  lastNotified: "Last Notified",
+  actions: "Actions",
+  validFrom: "Valid From",
+  validUntil: "Valid Until",
+  validityDays: "Validity Days",
+  organization: "Organization",
+  commonName: "Common Name",
+  serialNumber: "Serial Number",
+  algorithm: "Algorithm",
+  subjectAltNames: "Subject Alternative Names",
+  
+  // Buttons and actions
+  addDomain: "Add Domain",
+  refreshAll: "Refresh All",
+  cancel: "Cancel",
+  addCertificate: "Add Certificate",
+  check: "Check",
+  view: "View",
+  edit: "Edit",
+  delete: "Delete",
+  close: "Close",
+  saveChanges: "Save Changes",
+  updating: "Updating",
+  
+  // Sections in detail view
+  basicInformation: "Basic Information",
+  validity: "Validity",
+  issuerInfo: "Issuer Information",
+  technicalDetails: "Technical Details",
+  monitoringConfig: "Monitoring Configuration",
+  recordInfo: "Record Information",
+  
+  // Notifications and messages
+  sslCertificateAdded: "SSL Certificate added successfully",
+  sslCertificateUpdated: "SSL Certificate updated successfully",
+  sslCertificateDeleted: "SSL Certificate deleted successfully",
+  sslCertificateRefreshed: "SSL Certificate for {domain} refreshed successfully",
+  allCertificatesRefreshed: "All {count} certificates refreshed successfully",
+  someCertificatesFailed: "{success} certificates refreshed, {failed} failed",
+  failedToAddCertificate: "Failed to add SSL certificate",
+  failedToLoadCertificates: "Failed to load SSL certificates",
+  failedToUpdateCertificate: "Failed to update SSL certificate",
+  failedToDeleteCertificate: "Failed to delete SSL certificate",
+  failedToCheckCertificate: "Failed to check SSL certificate",
+  noCertificatesToRefresh: "No certificates to refresh",
+  startingRefreshAll: "Starting refresh of {count} certificates",
+  checkingSSLCertificate: "Checking SSL certificate...",
+  deleteConfirmation: "Are you sure you want to delete the certificate for",
+  deleteWarning: "This action cannot be undone. This will permanently delete the certificate.",
+  
+  // Misc
+  unknown: "Unknown",
+  never: "Never",
+  none: "None",
+  loadingChannels: "Loading channels...",
+  noChannelsFound: "No notification channels found",
+  noSSLCertificates: "No SSL certificates found",
+  created: "Created",
+  lastUpdated: "Last Updated",
+  lastNotification: "Last Notification",
+  collectionId: "Collection ID"
+};
diff --git a/application/src/translations/en.ts b/application/src/translations/en.ts
deleted file mode 100644
index cb353cf..0000000
--- a/application/src/translations/en.ts
+++ /dev/null
@@ -1,205 +0,0 @@
-
-export const enTranslations = {
-  welcome: "Welcome",
-  logout: "Logout",
-  language: "Language",
-  english: "English",
-  khmer: "Khmer",
-  german: "German",
-  goodMorning: "Good morning",
-  goodAfternoon: "Good afternoon",
-  goodEvening: "Good evening",
-  // Main menu translations
-  uptimeMonitoring: "Uptime Monitoring",
-  instanceMonitoring: "Instance Monitoring",
-  sslDomain: "SSL & Domain",
-  scheduleIncident: "Schedule & Incident",
-  operationalPage: "Operational Page",
-  reports: "Reports",
-  apiDocumentation: "API Documentation",
-  // Settings panel translations
-  settingPanel: "Setting Panel",
-  generalSettings: "General Settings",
-  userManagement: "User Management",
-  notificationSettings: "Notification Settings",
-  alertsTemplates: "Alerts Templates",
-  rolesManagement: "Roles Management",
-  dataRetention: "Data Retention",
-  backupSettings: "Backup Settings",
-  aboutSystem: "About System",
-  // Service table headers
-  serviceName: "Service Name",
-  serviceType: "Service Type",
-  serviceStatus: "Service Status",
-  responseTime: "Response Time",
-  uptime: "Uptime",
-  lastChecked: "Last Checked",
-  // Incident table
-  time: "Time",
-  status: "Status",
-  // Common UI elements
-  profile: "Profile",
-  settings: "Settings",
-  documentation: "Documentation",
-  notifications: "Notifications",
-  noServices: "No services match your filter criteria.",
-  // Login page
-  signInToYourAccount: "Sign in to your account",
-  dontHaveAccount: "Don't have an account?",
-  createOne: "Create one",
-  signInWithGoogle: "Sign in with Google",
-  orContinueWith: "OR",
-  email: "Email",
-  password: "Password",
-  forgot: "Forgot?",
-  signIn: "Sign In",
-  signingIn: "Signing in...",
-  loginSuccessful: "Login successful",
-  loginSuccessMessage: "You have been logged in successfully.",
-  loginFailed: "Login failed",
-  authenticationFailed: "Authentication failed",
-  bySigningIn: "By signing in, you agree to our",
-  termsAndConditions: "Terms & Conditions",
-  and: "and",
-  privacyPolicy: "Privacy Policy",
-  // About System page
-  aboutCheckcle: "About Checkcle",
-  systemDescription: "Checkcle is an open-source monitoring stack offering real-time insights into server and service health, incident management, and operational transparency. Released as MIT License.",
-  systemVersion: "System Version",
-  license: "License",
-  mitLicense: "MIT License",
-  links: "Links",
-  viewOnGithub: "View on GitHub",
-  viewDocumentation: "View Documentation",
-  followOnX: "Follow on X",
-  joinDiscord: "Join Discord",
-  // Quick Actions Dialog translations
-  quickActions: "Quick Actions",
-  quickActionsDescription: "Access common monitoring operations and features quickly. Select an action below to get started.",
-  close: "Close",
-  quickTips: "Quick Tips",
-  // Website Monitoring Card
-  monitorWebsite: "Website Monitoring",
-  monitorWebsiteDesc: "Monitor website availability and performance with detailed metrics and alerts.",
-  monitorMultipleEndpoints: "Monitor multiple endpoints",
-  trackResponseTimes: "Track response times",
-  setCustomAlerts: "Set custom alerts",
-  // Server Monitoring Card
-  monitorServer: "Server Monitoring",
-  monitorServerDesc: "Track server health metrics including CPU, memory, disk usage, and network traffic.",
-  monitorCPURam: "Monitor CPU & RAM usage",
-  trackNetworkMetrics: "Track network metrics",
-  viewProcesses: "View active processes",
-  // SSL Certificate Card
-  sslCertificate: "SSL Certificate",
-  sslCertificateDesc: "Monitor SSL certificate validity and receive alerts before expiration dates.",
-  trackSSLExpiration: "Track SSL expiration dates",
-  getEarlyRenewal: "Get early renewal notices",
-  monitorMultipleDomains: "Monitor multiple domains",
-  // Incidents Management Card
-  incidentsManagement: "Incidents Management",
-  incidentsManagementDesc: "Create, track, and manage incidents including assignment and resolution workflows.",
-  createTrackIncidents: "Create & track incidents",
-  assignIncidents: "Assign incidents to team",
-  monitorResolution: "Monitor resolution progress",
-  // Operational Status Card
-  operationalStatus: "Operational Status",
-  operationalStatusDesc: "Create and manage public status pages to communicate system health to users.",
-  createCustomStatus: "Create custom status pages",
-  displayRealTime: "Display real-time metrics",
-  shareIncidentUpdates: "Share incident updates",
-  // Reports & Analytics Card
-  reportsAnalytics: "Reports & Analytics",
-  reportsAnalyticsDesc: "Generate reports on system performance, uptime history, and incident metrics.",
-  generateUptimeReports: "Generate uptime reports",
-  analyzePerformance: "Analyze performance trends",
-  exportMonitoringData: "Export monitoring data",
-  // SSL Domain page translations
-  sslDomainManagement: "SSL & Domain Management",
-  monitorSSLCertificates: "Monitor SSL certificates and their expiration dates",
-  validCertificates: "Valid Certificates",
-  expiringSoon: "Expiring Soon",
-  expired: "Expired",
-  refreshAll: "Refresh All",
-  addDomain: "Add Domain",
-  domain: "Domain",
-  issuer: "Issuer",
-  expirationDate: "Expiration Date",
-  daysLeft: "Days Left",
-  lastNotified: "Last Notified",
-  actions: "Actions",
-  view: "View",
-  check: "Check",
-  edit: "Edit",
-  delete: "Delete",
-  never: "Never",
-  unknown: "Unknown",
-  checkingSSLCertificate: "Checking SSL certificate...",
-  noSSLCertificates: "No SSL certificates found",
-  // Add SSL Certificate dialog
-  addSSLCertificate: "Add SSL Certificate",
-  warningThreshold: "Warning Threshold (days)",
-  expiryThreshold: "Expiry Threshold (days)",
-  notificationChannel: "Notification Channel",
-  cancel: "Cancel",
-  addCertificate: "Add Certificate",
-  getNotifiedExpiration: "Get notified when certificates are about to expire",
-  getNotifiedCritical: "Get notified when certificates are critically close to expiring",
-  chooseChannel: "Choose where to receive SSL certificate alerts",
-  loadingChannels: "Loading channels...",
-  noChannelsFound: "No notification channels found",
-  // Edit SSL Certificate dialog
-  editSSLCertificate: "Edit SSL Certificate",
-  domainName: "Domain name",
-  domainCannotChange: "Domain name cannot be changed. To monitor a different domain, add a new certificate.",
-  warningThresholdDays: "Warning Threshold (Days)",
-  expiryThresholdDays: "Expiry Threshold (Days)",
-  daysBeforeExpiration: "Days before expiration to send warning",
-  daysBeforeCritical: "Days before expiration to send critical alert",
-  whereToSend: "Where to send notifications about this certificate",
-  saveChanges: "Save Changes",
-  updating: "Updating...",
-  // SSL Certificate details dialog
-  sslCertificateDetails: "SSL Certificate Details",
-  detailedInfo: "Detailed information about the SSL certificate for",
-  basicInformation: "Basic Information",
-  validity: "Validity",
-  validFrom: "Valid From",
-  validUntil: "Valid Until",
-  validityDays: "Validity Days",
-  issuerInfo: "Issuer",
-  organization: "Organization",
-  commonName: "Common Name",
-  technicalDetails: "Technical Details",
-  serialNumber: "Serial Number",
-  algorithm: "Algorithm",
-  subjectAltNames: "Subject Alternative Names (SANs)",
-  none: "None",
-  monitoringConfig: "Monitoring Configuration",
-  recordInfo: "Record Information",
-  created: "Created",
-  lastUpdated: "Last Updated",
-  lastNotification: "Last Notification",
-  collectionId: "Collection ID",
-  // Delete confirmation dialog
-  deleteSSLCertificate: "Delete SSL Certificate",
-  deleteConfirmation: "Are you sure you want to delete the SSL certificate for",
-  deleteWarning: "This action cannot be undone.",
-  // Status badges
-  valid: "Valid",
-  pending: "Pending",
-  // Success and error messages
-  sslCertificateAdded: "SSL certificate added successfully",
-  sslCertificateUpdated: "SSL certificate updated successfully",
-  sslCertificateDeleted: "SSL certificate deleted successfully",
-  sslCertificateRefreshed: "SSL certificate for {domain} updated successfully",
-  allCertificatesRefreshed: "Successfully refreshed all {count} certificates",
-  someCertificatesFailed: "Refreshed {success} certificates, {failed} failed",
-  failedToLoadCertificates: "Failed to load SSL certificates",
-  failedToAddCertificate: "Failed to add SSL certificate",
-  failedToUpdateCertificate: "Failed to update SSL certificate",
-  failedToDeleteCertificate: "Failed to delete SSL certificate",
-  failedToCheckCertificate: "Failed to check SSL certificate",
-  noCertificatesToRefresh: "No certificates to refresh",
-  startingRefreshAll: "Starting refresh of all {count} certificates..."
-};
\ No newline at end of file
diff --git a/application/src/translations/en/about.ts b/application/src/translations/en/about.ts
new file mode 100644
index 0000000..83e4071
--- /dev/null
+++ b/application/src/translations/en/about.ts
@@ -0,0 +1,18 @@
+
+import { AboutTranslations } from '../types/about';
+
+export const aboutTranslations: AboutTranslations = {
+  aboutCheckcle: "About Checkcle",
+  systemDescription: "Checkcle is an open-source monitoring stack offering real-time insights into server and service health, incident management, and operational transparency. Released as MIT License.",
+  systemVersion: "System Version",
+  license: "License",
+  mitLicense: "MIT License",
+  links: "Links",
+  viewOnGithub: "View on GitHub",
+  viewDocumentation: "View Documentation",
+  followOnX: "Follow on X",
+  joinDiscord: "Join Discord",
+  quickActions: "Quick Actions",
+  quickActionsDescription: "Access common monitoring operations and features quickly. Select an action below to get started.",
+  quickTips: "Quick Tips",
+};
diff --git a/application/src/translations/en/common.ts b/application/src/translations/en/common.ts
new file mode 100644
index 0000000..3bdbb1a
--- /dev/null
+++ b/application/src/translations/en/common.ts
@@ -0,0 +1,29 @@
+
+import { CommonTranslations } from '../types/common';
+
+export const commonTranslations: CommonTranslations = {
+  welcome: "Welcome",
+  logout: "Logout",
+  language: "Language",
+  english: "English",
+  khmer: "Khmer",
+  german: "Deutsch",
+  goodMorning: "Good morning",
+  goodAfternoon: "Good afternoon",
+  goodEvening: "Good evening",
+  profile: "Profile",
+  settings: "Settings",
+  documentation: "Documentation",
+  notifications: "Notifications",
+  close: "Close",
+  cancel: "Cancel",
+  view: "View",
+  edit: "Edit",
+  delete: "Delete",
+  status: "Status",
+  time: "Time",
+  title: "Title",
+  description: "Description",
+  success: "Success",
+  error: "Error",
+};
diff --git a/application/src/translations/en/incident.ts b/application/src/translations/en/incident.ts
new file mode 100644
index 0000000..461babd
--- /dev/null
+++ b/application/src/translations/en/incident.ts
@@ -0,0 +1,55 @@
+
+import { IncidentTranslations } from '../types/incident';
+
+export const incidentTranslations: IncidentTranslations = {
+  incidentManagement: 'Incident Management',
+  incidentsManagementDesc: 'Track and manage service incidents and their resolutions',
+  unresolvedIncidents: 'Unresolved',
+  resolvedIncidents: 'Resolved',
+  activeIncidents: 'Active Incidents',
+  criticalIssues: 'Critical Issues',
+  avgResolutionTime: 'Avg. Resolution Time',
+  noIncidents: 'No Active Incidents',
+  createIncident: 'Create Incident',
+  investigating: 'Investigating',
+  identified: 'Identified',
+  monitoring: 'Monitoring',
+  resolved: 'Resolved',
+  scheduleIncidentManagement: 'Schedule & Incident Management',
+  incidentName: 'Incident Name',
+  incidentStatus: 'Incident Status',
+  highPriority: 'High Priority',
+  configurationSettings: 'Configuration Settings',
+  incidentCreatedSuccess: 'Incident created successfully',
+  basicInfo: 'Basic Information',
+  serviceId: 'Service ID',
+  assignedTo: 'Assigned To',
+  unassigned: 'Unassigned',
+  timeline: 'Timeline',
+  incidentTime: 'Incident Time',
+  resolutionTime: 'Resolution Time',
+  systems: 'Systems',
+  noSystems: 'No systems affected',
+  impactAnalysis: 'Impact Analysis',
+  rootCause: 'Root Cause',
+  resolutionSteps: 'Resolution Steps',
+  lessonsLearned: 'Lessons Learned',
+  resolutionDetails: 'Resolution Details',
+  assignment: 'Assignment',
+  download: 'Download',
+  downloadPdf: 'Download PDF',
+  print: 'Print',
+  confidentialNote: 'This document is confidential and intended for internal use only.',
+  generatedOn: 'Generated on',
+  enterResolutionSteps: 'Enter steps taken to resolve the incident',
+  enterLessonsLearned: 'Enter lessons learned from this incident',
+  editIncident: 'Edit Incident',
+  editIncidentDesc: 'Update details for this incident',
+  updating: 'Updating...',
+  update: 'Update',
+  create: 'Create',
+  creating: 'Creating...',
+  configuration: 'Configuration',
+  failedToUpdateStatus: 'Failed to update status',
+  inProgress: 'In Progress',
+};
diff --git a/application/src/translations/en/index.ts b/application/src/translations/en/index.ts
new file mode 100644
index 0000000..a1794be
--- /dev/null
+++ b/application/src/translations/en/index.ts
@@ -0,0 +1,23 @@
+
+import { Translations } from '../types';
+import { commonTranslations } from './common';
+import { menuTranslations } from './menu';
+import { loginTranslations } from './login';
+import { aboutTranslations } from './about';
+import { servicesTranslations } from './services';
+import { maintenanceTranslations } from './maintenance';
+import { incidentTranslations } from './incident';
+import { sslTranslations } from './ssl';
+
+const enTranslations: Translations = {
+  common: commonTranslations,
+  menu: menuTranslations,
+  login: loginTranslations,
+  about: aboutTranslations,
+  services: servicesTranslations,
+  maintenance: maintenanceTranslations,
+  incident: incidentTranslations,
+  ssl: sslTranslations
+};
+
+export default enTranslations;
diff --git a/application/src/translations/en/login.ts b/application/src/translations/en/login.ts
new file mode 100644
index 0000000..72eeaa8
--- /dev/null
+++ b/application/src/translations/en/login.ts
@@ -0,0 +1,23 @@
+
+import { LoginTranslations } from '../types/login';
+
+export const loginTranslations: LoginTranslations = {
+  signInToYourAccount: "Sign in to your account",
+  dontHaveAccount: "Don't have an account?",
+  createOne: "Create one",
+  signInWithGoogle: "Sign in with Google",
+  orContinueWith: "OR",
+  email: "Email",
+  password: "Password",
+  forgot: "Forgot?",
+  signIn: "Sign In",
+  signingIn: "Signing in...",
+  loginSuccessful: "Login successful",
+  loginSuccessMessage: "You have been logged in successfully.",
+  loginFailed: "Login failed",
+  authenticationFailed: "Authentication failed",
+  bySigningIn: "By signing in, you agree to our",
+  termsAndConditions: "Terms & Conditions",
+  and: "and",
+  privacyPolicy: "Privacy Policy",
+};
diff --git a/application/src/translations/en/maintenance.ts b/application/src/translations/en/maintenance.ts
new file mode 100644
index 0000000..c056eea
--- /dev/null
+++ b/application/src/translations/en/maintenance.ts
@@ -0,0 +1,68 @@
+
+import { MaintenanceTranslations } from '../types/maintenance';
+
+export const maintenanceTranslations: MaintenanceTranslations = {
+  scheduledMaintenance: 'Scheduled Maintenance',
+  scheduledMaintenanceDesc: 'View and manage planned maintenance windows for your systems and services',
+  upcomingMaintenance: 'Upcoming',
+  ongoingMaintenance: 'Ongoing',
+  completedMaintenance: 'Completed',
+  createMaintenanceWindow: 'Create Maintenance',
+  totalScheduledHours: 'Total Scheduled Hours',
+  maintenanceName: 'Maintenance Name',
+  maintenanceStatus: 'Status',
+  scheduledStart: 'Scheduled Start',
+  scheduledEnd: 'Scheduled End',
+  affectedServices: 'Affected Services',
+  impact: 'Impact',
+  minor: 'Minor',
+  major: 'Major',
+  critical: 'Critical',
+  none: 'None',
+  actions: 'Actions',
+  scheduled: 'Scheduled',
+  inprogress: 'In Progress',
+  completed: 'Completed',
+  cancelled: 'Cancelled',
+  markAsInProgress: 'Mark as In Progress',
+  markAsCompleted: 'Mark as Completed',
+  markAsCancelled: 'Mark as Cancelled',
+  confirmDelete: 'Confirm Delete',
+  deleteMaintenanceConfirmation: 'Are you sure you want to delete this maintenance window?',
+  thisActionCannotBeUndone: 'This action cannot be undone.',
+  maintenanceDeleted: 'Maintenance Deleted',
+  maintenanceDeletedDesc: 'The maintenance window has been deleted successfully.',
+  errorDeletingMaintenance: 'There was an error deleting the maintenance window.',
+  statusUpdated: 'Status Updated',
+  maintenanceStatusUpdated: 'Maintenance status has been updated successfully.',
+  errorUpdatingMaintenanceStatus: 'There was an error updating the maintenance status.',
+  createMaintenance: 'Create Maintenance',
+  createMaintenanceDesc: 'Schedule a new maintenance window for your services',
+  enterTitle: 'Enter maintenance title',
+  enterDescription: 'Enter detailed description of the maintenance',
+  startTime: 'Start Time',
+  endTime: 'End Time',
+  selectDate: 'Select a date',
+  enterAffectedServices: 'Enter affected services',
+  separateServicesWithComma: 'Separate multiple services with commas',
+  priority: 'Priority',
+  selectPriority: 'Select priority',
+  selectStatus: 'Select status',
+  selectImpact: 'Select impact',
+  notifySubscribers: 'Notify Subscribers',
+  notifySubscribersDesc: 'Send notifications to all subscribers when this maintenance starts',
+  maintenanceCreated: 'Maintenance Created',
+  maintenanceCreatedDesc: 'The maintenance window has been scheduled successfully.',
+  errorCreatingMaintenance: 'There was an error creating the maintenance window.',
+  errorFetchingMaintenanceData: 'There was an error fetching maintenance data.',
+  low: 'Low',
+  medium: 'Medium',
+  high: 'High',
+  created: 'Created',
+  lastUpdated: 'Last Updated',
+  subscribersWillBeNotified: 'Subscribers will be notified when maintenance begins',
+  noNotifications: 'No notifications will be sent',
+  noScheduledMaintenance: 'No Scheduled Maintenance',
+  noMaintenanceWindows: 'There are no maintenance windows for this period. Create one by clicking the "Create Maintenance" button.',
+  maintenanceCreatedSuccess: 'Maintenance window created successfully',
+};
diff --git a/application/src/translations/en/menu.ts b/application/src/translations/en/menu.ts
new file mode 100644
index 0000000..18604a4
--- /dev/null
+++ b/application/src/translations/en/menu.ts
@@ -0,0 +1,21 @@
+
+import { MenuTranslations } from '../types/menu';
+
+export const menuTranslations: MenuTranslations = {
+  uptimeMonitoring: "Uptime Monitoring",
+  instanceMonitoring: "Instance Monitoring",
+  sslDomain: "SSL & Domain",
+  scheduleIncident: "Schedule & Incident",
+  operationalPage: "Operational Page",
+  reports: "Reports",
+  apiDocumentation: "API Documentation",
+  settingPanel: "Setting Panel",
+  generalSettings: "General Settings",
+  userManagement: "User Management",
+  notificationSettings: "Notification Settings",
+  alertsTemplates: "Alerts Templates",
+  rolesManagement: "Roles Management",
+  dataRetention: "Data Retention",
+  backupSettings: "Backup Settings",
+  aboutSystem: "About System",
+};
diff --git a/application/src/translations/en/services.ts b/application/src/translations/en/services.ts
new file mode 100644
index 0000000..5501bd1
--- /dev/null
+++ b/application/src/translations/en/services.ts
@@ -0,0 +1,12 @@
+
+import { ServicesTranslations } from '../types/services';
+
+export const servicesTranslations: ServicesTranslations = {
+  serviceName: "Service Name",
+  serviceType: "Service Type",
+  serviceStatus: "Service Status",
+  responseTime: "Response Time",
+  uptime: "Uptime",
+  lastChecked: "Last Checked",
+  noServices: "No services match your filter criteria.",
+};
diff --git a/application/src/translations/en/ssl.ts b/application/src/translations/en/ssl.ts
new file mode 100644
index 0000000..94f524f
--- /dev/null
+++ b/application/src/translations/en/ssl.ts
@@ -0,0 +1,107 @@
+
+import { SSLTranslations } from '../types/ssl';
+
+export const sslTranslations: SSLTranslations = {
+  // Page and section titles
+  sslDomainManagement: "SSL & Domain Management",
+  monitorSSLCertificates: "Monitor and manage SSL certificates for your domains",
+  addSSLCertificate: "Add SSL Certificate",
+  editSSLCertificate: "Edit SSL Certificate",
+  deleteSSLCertificate: "Delete SSL Certificate",
+  sslCertificateDetails: "SSL Certificate Details",
+  detailedInfo: "Detailed information for",
+
+  // Status related
+  valid: "Valid",
+  expiringSoon: "Expiring Soon",
+  expired: "Expired",
+  pending: "Pending",
+
+  // Statistics and cards
+  validCertificates: "Valid Certificates",
+  expiringSoonCertificates: "Expiring Soon",
+  expiredCertificates: "Expired Certificates",
+
+  // Form fields
+  domain: "Domain",
+  domainName: "Domain Name",
+  domainCannotChange: "Domain cannot be changed after creation",
+  warningThreshold: "Warning Threshold",
+  warningThresholdDays: "Warning Threshold (Days)",
+  expiryThreshold: "Expiry Threshold",
+  expiryThresholdDays: "Expiry Threshold (Days)",
+  notificationChannel: "Notification Channel",
+  chooseChannel: "Choose a notification channel",
+  whereToSend: "Where to send notifications",
+  daysBeforeExpiration: "Days before expiration to receive warnings",
+  daysBeforeCritical: "Days before expiration to receive critical alerts",
+  getNotifiedExpiration: "Get notified when certificate is about to expire",
+  getNotifiedCritical: "Get notified when certificate is critically close to expiration",
+
+  // Table headers and fields
+  issuer: "Issuer",
+  expirationDate: "Expiration Date",
+  daysLeft: "Days Left",
+  status: "Status",
+  lastNotified: "Last Notified",
+  actions: "Actions",
+  validFrom: "Valid From",
+  validUntil: "Valid Until",
+  validityDays: "Validity Days",
+  organization: "Organization",
+  commonName: "Common Name",
+  serialNumber: "Serial Number",
+  algorithm: "Algorithm",
+  subjectAltNames: "Subject Alternative Names",
+  
+  // Buttons and actions
+  addDomain: "Add Domain",
+  refreshAll: "Refresh All",
+  cancel: "Cancel",
+  addCertificate: "Add Certificate",
+  check: "Check",
+  view: "View",
+  edit: "Edit",
+  delete: "Delete",
+  close: "Close",
+  saveChanges: "Save Changes",
+  updating: "Updating",
+  
+  // Sections in detail view
+  basicInformation: "Basic Information",
+  validity: "Validity",
+  issuerInfo: "Issuer Information",
+  technicalDetails: "Technical Details",
+  monitoringConfig: "Monitoring Configuration",
+  recordInfo: "Record Information",
+  
+  // Notifications and messages
+  sslCertificateAdded: "SSL Certificate added successfully",
+  sslCertificateUpdated: "SSL Certificate updated successfully",
+  sslCertificateDeleted: "SSL Certificate deleted successfully",
+  sslCertificateRefreshed: "SSL Certificate for {domain} refreshed successfully",
+  allCertificatesRefreshed: "All {count} certificates refreshed successfully",
+  someCertificatesFailed: "{success} certificates refreshed, {failed} failed",
+  failedToAddCertificate: "Failed to add SSL certificate",
+  failedToLoadCertificates: "Failed to load SSL certificates",
+  failedToUpdateCertificate: "Failed to update SSL certificate",
+  failedToDeleteCertificate: "Failed to delete SSL certificate",
+  failedToCheckCertificate: "Failed to check SSL certificate",
+  noCertificatesToRefresh: "No certificates to refresh",
+  startingRefreshAll: "Starting refresh of {count} certificates",
+  checkingSSLCertificate: "Checking SSL certificate...",
+  deleteConfirmation: "Are you sure you want to delete the certificate for",
+  deleteWarning: "This action cannot be undone. This will permanently delete the certificate.",
+  
+  // Misc
+  unknown: "Unknown",
+  never: "Never",
+  none: "None",
+  loadingChannels: "Loading channels...",
+  noChannelsFound: "No notification channels found",
+  noSSLCertificates: "No SSL certificates found",
+  created: "Created",
+  lastUpdated: "Last Updated",
+  lastNotification: "Last Notification",
+  collectionId: "Collection ID"
+};
diff --git a/application/src/translations/index.ts b/application/src/translations/index.ts
index 36134d7..e087b36 100644
--- a/application/src/translations/index.ts
+++ b/application/src/translations/index.ts
@@ -1,7 +1,6 @@
-
-import { enTranslations } from './en';
-import { kmTranslations } from './km';
-import { deTranslations } from './de';
+import enTranslations from './en';
+import kmTranslations from './km';
+import deTranslations from './de';
 
 export type Language = "en" | "km" | "de";
 
@@ -11,4 +10,6 @@ export const translations = {
   de: deTranslations,
 };
 
-export type TranslationKey = keyof typeof enTranslations;
+// Type for accessing translations by module and key
+export type TranslationModule = keyof typeof enTranslations;
+export type TranslationKey<M extends TranslationModule> = keyof typeof enTranslations[M];
diff --git a/application/src/translations/km.ts b/application/src/translations/km.ts
deleted file mode 100644
index bc6dceb..0000000
--- a/application/src/translations/km.ts
+++ /dev/null
@@ -1,204 +0,0 @@
-export const kmTranslations = {
-  welcome: "សូមស្វាគមន៍",
-  logout: "ចាកចេញ",
-  language: "ភាសា",
-  english: "អង់គ្លេស",
-  khmer: "ខ្មែរ",
-  german: "អាឡឺម៉ង់",
-  goodMorning: "អរុណសួស្តី",
-  goodAfternoon: "ទិវាសួស្តី",
-  goodEvening: "សាយណ្ហសួស្តី",
-  // Main menu translations
-  uptimeMonitoring: "ការត្រួតពិនិត្យ Uptime",
-  instanceMonitoring: "ការត្រួតពិនិត្យឧបករណ៍",
-  sslDomain: "SSL និងដមែន",
-  scheduleIncident: "កាលវិភាគនិងឧបទ្ទវហេតុ",
-  operationalPage: "ទំព័រប្រតិបត្តិការ",
-  reports: "របាយការណ៍",
-  apiDocumentation: "ឯកសារ API",
-  // Settings panel translations
-  settingPanel: "ផ្ទាំងការកំណត់",
-  generalSettings: "ការកំណត់ទូទៅ",
-  userManagement: "ការគ្រប់គ្រងអ្នកប្រើប្រាស់",
-  notificationSettings: "ការកំណត់ការជូនដំណឹង",
-  alertsTemplates: "គំរូការជូនដំណឹង",
-  rolesManagement: "ការគ្រប់គ្រងតួនាទី",
-  dataRetention: "ការរក្សាទុកទិន្នន័យ",
-  backupSettings: "ការកំណត់បម្រុងទុក",
-  aboutSystem: "អំពីប្រព័ន្ធ",
-  // Service table headers
-  serviceName: "ឈ្មោះសេវាកម្ម",
-  serviceType: "ប្រភេទសេវាកម្ម",
-  serviceStatus: "ស្ថានភាពសេវាកម្ម",
-  responseTime: "ពេលវេលាឆ្លើយតប",
-  uptime: "ពេលវេលាដំណើរការ",
-  lastChecked: "ពិនិត្យចុងក្រោយ",
-  // Incident table
-  time: "ពេលវេលា",
-  status: "ស្ថានភាព",
-  // Common UI elements
-  profile: "ប្រវត្តិរូប",
-  settings: "ការកំណត់",
-  documentation: "ឯកសារ",
-  notifications: "ការជូនដំណឹង",
-  noServices: "មិនមានសេវាកម្មដែលត្រូវនឹងលក្ខណៈវិនិច្ឆ័យរបស់អ្នក។",
-  // Login page
-  signInToYourAccount: "ចូលគណនីរបស់អ្នក",
-  dontHaveAccount: "មិនមានគណនីមែនទេ?",
-  createOne: "បង្កើតមួយ",
-  signInWithGoogle: "ចូលជាមួយ Google",
-  orContinueWith: "ឬ",
-  email: "អ៊ីមែល",
-  password: "ពាក្យសម្ងាត់",
-  forgot: "ភ្លេច?",
-  signIn: "ចូល",
-  signingIn: "កំពុងចូល...",
-  loginSuccessful: "ការចូលបានជោគជ័យ",
-  loginSuccessMessage: "អ្នកបានចូលប្រើដោយជោគជ័យ។",
-  loginFailed: "ការចូលបានបរាជ័យ",
-  authenticationFailed: "ការផ្ទៀងផ្ទាត់បានបរាជ័យ",
-  bySigningIn: "ដោយការចូល អ្នកយល់ព្រមនឹង",
-  termsAndConditions: "លក្ខខណ្ឌ",
-  and: "និង",
-  privacyPolicy: "គោលនយោបាយឯកជនភាព",
-  // About System page
-  aboutCheckcle: "អំពី Checkcle",
-  systemDescription: "Checkcle គឺជាស្តាកការត្រួតពិនិត្យប្រភពបើកទូលាយដែលផ្តល់នូវការយល់ដឹងជាក់ស្តែងអំពីសុខភាពម៉ាស៊ីនមេ និងសេវាកម្ម, ការគ្រប់គ្រងឧបទ្ទវហេតុ, និងតម្លាភាពនៃប្រតិបត្តិការ។ ចេញផ្សាយជាអាជ្ញាបណ្ណ MIT។",
-  systemVersion: "កំណែប្រព័ន្ធ",
-  license: "អាជ្ញាបណ្ណ",
-  mitLicense: "អាជ្ញាបណ្ណ MIT",
-  links: "តំណភ្ជាប់",
-  viewOnGithub: "មើលលើ GitHub",
-  viewDocumentation: "មើលឯកសារ",
-  followOnX: "តាមដានលើ X",
-  joinDiscord: "ចូលរួមក្នុង Discord",
-  // Quick Actions Dialog translations
-  quickActions: "សកម្មភាពរហ័ស",
-  quickActionsDescription: "ចូលប្រើប្រតិបត្តិការត្រួតពិនិត្យ និងមុខងារទូទៅយ៉ាងរហ័ស។ ជ្រើសរើសសកម្មភាពខាងក្រោមដើម្បីចាប់ផ្តើម។",
-  close: "បិទ",
-  quickTips: "គន្លឹះរហ័ស",
-  // Website Monitoring Card
-  monitorWebsite: "ការត្រួតពិនិត្យគេហទំព័រ",
-  monitorWebsiteDesc: "ត្រួតពិនិត្យការអាចប្រើបាននៃគេហទំព័រ និងដំណើរការដោយមានព័ត៌មានលម្អិត និងការជូនដំណឹង។",
-  monitorMultipleEndpoints: "ត្រួតពិនិត្យចំណុចចប់ច្រើន",
-  trackResponseTimes: "តាមដានពេលវេលាឆ្លើយតប",
-  setCustomAlerts: "កំណត់ការជូនដំណឹងផ្ទាល់ខ្លួន",
-  // Server Monitoring Card
-  monitorServer: "ការត្រួតពិនិត្យម៉ាស៊ីនមេ",
-  monitorServerDesc: "តាមដានសុខភាពម៉ាស៊ីនមេរួមទាំងការប្រើប្រាស់ CPU, អង្គចងចាំ, ថាស, និងចរាចរណ៍បណ្តាញ។",
-  monitorCPURam: "ត្រួតពិនិត្យការប្រើប្រាស់ CPU និង RAM",
-  trackNetworkMetrics: "តាមដានចរាចរណ៍បណ្តាញ",
-  viewProcesses: "មើលដំណើរការសកម្ម",
-  // SSL Certificate Card
-  sslCertificate: "វិញ្ញាបនបត្រ SSL",
-  sslCertificateDesc: "ត្រួតពិនិត្យសុពលភាពវិញ្ញាបនបត្រ SSL និងទទួលបានការជូនដំណឹងមុនថ្ងៃផុតកំណត់។",
-  trackSSLExpiration: "តាមដានកាលបរិច្ឆេទផុតកំណត់ SSL",
-  getEarlyRenewal: "ទទួលបានការជូនដំណឹងបន្តមុនពេល",
-  monitorMultipleDomains: "ត្រួតពិនិត្យដែនជាច្រើន",
-  // Incidents Management Card
-  incidentsManagement: "ការគ្រប់គ្រងឧប្បត្តិហេតុ",
-  incidentsManagementDesc: "បង្កើត, តាមដាន និងគ្រប់គ្រងឧប្បត្តិហេតុរួមទាំងការចាត់តាំង និងដំណើរការដោះស្រាយ។",
-  createTrackIncidents: "បង្កើត និងតាមដានឧប្បត្តិហេតុ",
-  assignIncidents: "ចាត់តាំងឧប្បត្តិហេតុទៅក្រុម",
-  monitorResolution: "តាមដានដំណើរការដោះស្រាយ",
-  // Operational Status Card
-  operationalStatus: "ស្ថានភាពប្រតិបត្តិការ",
-  operationalStatusDesc: "បង្កើត និងគ្រប់គ្រងទំព័រស្ថានភាពសាធារណៈដើម្បីទំនាក់ទំនងសុខភាពប្រព័ន្ធទៅកាន់អ្នកប្រើប្រាស់។",
-  createCustomStatus: "បង្កើតទំព័រស្ថានភាពតាមបំណង",
-  displayRealTime: "បង្ហាញទិន្នន័យជាក់ស្តែង",
-  shareIncidentUpdates: "ចែករំលែកព័ត៌មានថ្មីៗអំពីឧប្បត្តិហេតុ",
-  // Reports & Analytics Card
-  reportsAnalytics: "របាយការណ៍និងការវិភាគ",
-  reportsAnalyticsDesc: "បង្កើតរបាយការណ៍អំពីដំណើរការប្រព័ន្ធ, ប្រវត្តិនៃពេលវេលាដំណើរការ, និងទិន្នន័យឧប្បត្តិហេតុ។",
-  generateUptimeReports: "បង្កើតរបាយការណ៍ពេលវេលាដំណើរការ",
-  analyzePerformance: "វិភាគនិន្នាការដំណើរការ",
-  exportMonitoringData: "នាំចេញទិន្នន័យត្រួតពិនិត្យ",
-  // SSL Domain page translations
-  sslDomainManagement: "ការគ្រប់គ្រង SSL និងដមែន",
-  monitorSSLCertificates: "តាមដានវិញ្ញាបនបត្រ SSL និងកាលបរិច្ឆេទផុតកំណត់",
-  validCertificates: "វិញ្ញាបនបត្រមានសុពលភាព",
-  expiringSoon: "ជិតផុតកំណត់",
-  expired: "ផុតកំណត់",
-  refreshAll: "រីហ្រ្វេសទាំងអស់",
-  addDomain: "បន្ថែមដមែន",
-  domain: "ដមែន",
-  issuer: "អ្នកចេញ",
-  expirationDate: "កាលបរិច្ឆេទផុតកំណត់",
-  daysLeft: "ថ្ងៃនៅសល់",
-  lastNotified: "ជូនដំណឹងចុងក្រោយ",
-  actions: "សកម្មភាព",
-  view: "មើល",
-  check: "ពិនិត្យ",
-  edit: "កែប្រែ",
-  delete: "លុប",
-  never: "មិនដែល",
-  unknown: "មិនស្គាល់",
-  checkingSSLCertificate: "កំពុងពិនិត្យវិញ្ញាបនបត្រ SSL...",
-  noSSLCertificates: "មិនមានវិញ្ញាបនបត្រ SSL ឃើញទេ",
-  // Add SSL Certificate dialog
-  addSSLCertificate: "បន្ថែមវិញ្ញាបនបត្រ SSL",
-  warningThreshold: "ទិន្នផលព្រមាន (ថ្ងៃ)",
-  expiryThreshold: "ទិន្នផលផុតកំណត់ (ថ្ងៃ)",
-  notificationChannel: "បណ្តាញជូនដំណឹង",
-  cancel: "បោះបង់",
-  addCertificate: "បន្ថែមវិញ្ញាបនបត្រ",
-  getNotifiedExpiration: "ទទួលបានការជូនដំណឹងនៅពេលវិញ្ញាបនបត្រជិតផុតកំណត់",
-  getNotifiedCritical: "ទទួលបានការជូនដំណឹងនៅពេលវិញ្ញាបនបត្រជិតផុតកំណត់ខ្លាំង",
-  chooseChannel: "ជ្រើសរើសបណ្តាញដើម្បីទទួលបានការជូនដំណឹងអំពីវិញ្ញាបនបត្រ SSL",
-  loadingChannels: "កំពុងផ្ទុកបណ្តាញ...",
-  noChannelsFound: "រកមិនឃើញបណ្តាញជូនដំណឹងទេ",
-  // Edit SSL Certificate dialog
-  editSSLCertificate: "កែសម្រួលវិញ្ញាបនបត្រ SSL",
-  domainName: "ឈ្មោះដមែន",
-  domainCannotChange: "ឈ្មោះដមែនមិនអាចផ្លាស់ប្តូរបានទេ។ ដើម្បីត្រួតពិនិត្យដមែនផ្សេង សូមបន្ថែមវិញ្ញាបនបត្រថ្មី។",
-  warningThresholdDays: "ទិន្នផលព្រមាន (ថ្ងៃ)",
-  expiryThresholdDays: "ទិន្នផលផុតកំណត់ (ថ្ងៃ)",
-  daysBeforeExpiration: "ថ្ងៃមុនពេលផុតកំណត់ដើម្បីផ្ញើការព្រមាន",
-  daysBeforeCritical: "ថ្ងៃមុនពេលផុតកំណត់ដើម្បីផ្ញើការជូនដំណឹងសំខាន់",
-  whereToSend: "កន្លែងដែលត្រូវផ្ញើការជូនដំណឹងអំពីវិញ្ញាបនបត្រនេះ",
-  saveChanges: "រក្សាទុកការផ្លាស់ប្តូរ",
-  updating: "កំពុងធ្វើបច្ចុប្បន្នភាព...",
-  // SSL Certificate details dialog
-  sslCertificateDetails: "ព័ត៌មានលម្អិតអំពីវិញ្ញាបនបត្រ SSL",
-  detailedInfo: "ព័ត៌មានលម្អិតអំពីវិញ្ញាបនបត្រ SSL សម្រាប់",
-  basicInformation: "ព័ត៌មានមូលដ្ឋាន",
-  validity: "សុពលភាព",
-  validFrom: "មានសុពលភាពពី",
-  validUntil: "មានសុពលភាពរហូតដល់",
-  validityDays: "ថ្ងៃសុពលភាព",
-  issuerInfo: "ព័ត៌មានអ្នកចេញ",
-  organization: "អង្គភាព",
-  commonName: "ឈ្មោះទូទៅ",
-  technicalDetails: "ព័ត៌មានបច្ចេកទេស",
-  serialNumber: "លេខស៊េរី",
-  algorithm: "អាល់ហ្គោរីតឹម",
-  subjectAltNames: "ឈ្មោះជំនួសកម្មវត្ថុ (SANs)",
-  none: "គ្មាន",
-  monitoringConfig: "ការកំណត់ការត្រួតពិនិត្យ",
-  recordInfo: "ព័ត៌មានកំណត់ត្រា",
-  created: "បានបង្កើត",
-  lastUpdated: "បានធ្វើបច្ចុប្បន្នភាពចុងក្រោយ",
-  lastNotification: "ការជូនដំណឹងចុងក្រោយ",
-  collectionId: "លេខសម្គាល់ការប្រមូល",
-  // Delete confirmation dialog
-  deleteSSLCertificate: "លុបវិញ្ញាបនបត្រ SSL",
-  deleteConfirmation: "តើអ្នកប្រាកដថាចង់លុបវិញ្ញាបនបត្រ SSL សម្រាប់",
-  deleteWarning: "សកម្មភាពនេះមិនអាចត្រឡប់ក្រោយវិញបានទេ។",
-  // Status badges
-  valid: "មានសុពលភាព",
-  pending: "កំពុងរង់ចាំ",
-  // Success and error messages
-  sslCertificateAdded: "បានបន្ថែមវិញ្ញាបនបត្រ SSL ដោយជោគជ័យ",
-  sslCertificateUpdated: "បានធ្វើបច្ចុប្បន្នភាពវិញ្ញាបនបត្រ SSL ដោយជោគជ័យ",
-  sslCertificateDeleted: "បានលុបវិញ្ញាបនបត្រ SSL ដោយជោគជ័យ",
-  sslCertificateRefreshed: "បានបន្តុះវិញ្ញាបនបត្រ SSL ដោយជោគជ័យសម្រាប់",
-  allCertificatesRefreshed: "បានបន្តុះវិញ្ញាបនបត្រទាំងអស់ដោយជោគជ័យ",
-  someCertificatesFailed: "បន្តុះវិញ្ញាបនបត្រ៖ ជោគជ័យ, បរាជ័យ",
-  failedToLoadCertificates: "បរាជ័យក្នុងការផ្ទុកវិញ្ញាបនបត្រ SSL",
-  failedToAddCertificate: "បរាជ័យក្នុងការបន្ថែមវិញ្ញាបនបត្រ SSL",
-  failedToUpdateCertificate: "បរាជ័យក្នុងការធ្វើបច្ចុប្បន្នភាពវិញ្ញាបនបត្រ SSL",
-  failedToDeleteCertificate: "បរាជ័យក្នុងការលុបវិញ្ញាបនបត្រ SSL",
-  failedToCheckCertificate: "បរាជ័យក្នុងការពិនិត្យវិញ្ញាបនបត្រ SSL",
-  noCertificatesToRefresh: "គ្មានវិញ្ញាបនបត្រដើម្បីធ្វើឱ្យស្រស់",
-  startingRefreshAll: "កំពុងចាប់ផ្តើមធ្វើឱ្យស្រស់នៃវិញ្ញាបនបត្រទាំងអស់..."
-};
\ No newline at end of file
diff --git a/application/src/translations/km/about.ts b/application/src/translations/km/about.ts
new file mode 100644
index 0000000..dd44555
--- /dev/null
+++ b/application/src/translations/km/about.ts
@@ -0,0 +1,18 @@
+
+import { AboutTranslations } from '../types/about';
+
+export const aboutTranslations: AboutTranslations = {
+  aboutCheckcle: "អំពី Checkcle",
+  systemDescription: "Checkcle គឺជាស្តាកការត្រួតពិនិត្យប្រភពបើកទូលាយដែលផ្តល់នូវការយល់ដឹងជាក់ស្តែងអំពីសុខភាពម៉ាស៊ីនមេ និងសេវាកម្ម, ការគ្រប់គ្រងឧបទ្ទវហេតុ, និងតម្លាភាពនៃប្រតិបត្តិការ។ ចេញផ្សាយជាអាជ្ញាបណ្ណ MIT។",
+  systemVersion: "កំណែប្រព័ន្ធ",
+  license: "អាជ្ញាបណ្ណ",
+  mitLicense: "អាជ្ញាបណ្ណ MIT",
+  links: "តំណភ្ជាប់",
+  viewOnGithub: "មើលលើ GitHub",
+  viewDocumentation: "មើលឯកសារ",
+  followOnX: "តាមដានលើ X",
+  joinDiscord: "ចូលរួមក្នុង Discord",
+  quickActions: "សកម្មភាពរហ័ស",
+  quickActionsDescription: "ចូលប្រើប្រតិបត្តិការត្រួតពិនិត្យ និងមុខងារទូទៅយ៉ាងរហ័ស។ ជ្រើសរើសសកម្មភាពខាងក្រោមដើម្បីចាប់ផ្តើម។",
+  quickTips: "គន្លឹះរហ័ស",
+};
\ No newline at end of file
diff --git a/application/src/translations/km/common.ts b/application/src/translations/km/common.ts
new file mode 100644
index 0000000..84ed44c
--- /dev/null
+++ b/application/src/translations/km/common.ts
@@ -0,0 +1,29 @@
+
+import { CommonTranslations } from '../types/common';
+
+export const commonTranslations: CommonTranslations = {
+  welcome: "សូមស្វាគមន៍",
+  logout: "ចាកចេញ",
+  language: "ភាសា",
+  english: "អង់គ្លេស",
+  khmer: "ខ្មែរ",
+  german: "Deutsch",
+  goodMorning: "អរុណសួស្តី",
+  goodAfternoon: "ទិវាសួស្តី",
+  goodEvening: "សាយណ្ហសួស្តី",
+  profile: "ប្រវត្តិរូប",
+  settings: "ការកំណត់",
+  documentation: "ឯកសារ",
+  notifications: "ការជូនដំណឹង",
+  close: "បិទ",
+  cancel: "បោះបង់",
+  view: "មើល",
+  edit: "កែសម្រួល",
+  delete: "លុប",
+  status: "ស្ថានភាព",
+  time: "ពេលវេលា",
+  title: "ចំណងជើង",
+  description: "ការពិពណ៌នា",
+  success: "ជោគជ័យ",
+  error: "កំហុស",
+};
diff --git a/application/src/translations/km/incident.ts b/application/src/translations/km/incident.ts
new file mode 100644
index 0000000..c33191f
--- /dev/null
+++ b/application/src/translations/km/incident.ts
@@ -0,0 +1,55 @@
+
+import { IncidentTranslations } from '../types/incident';
+
+export const incidentTranslations: IncidentTranslations = {
+  incidentManagement: "ការគ្រប់គ្រងឧប្បត្តិហេតុ",
+  incidentsManagementDesc: "តាមដាន និងគ្រប់គ្រងឧប្បត្តិហេតុសេវាកម្ម និងការដោះស្រាយរបស់ពួកវា",
+  unresolvedIncidents: "មិនទាន់ដោះស្រាយ",
+  resolvedIncidents: "បានដោះស្រាយ",
+  activeIncidents: "ឧប្បត្តិហេតុសកម្ម",
+  criticalIssues: "បញ្ហាសំខាន់ៗ",
+  avgResolutionTime: "ពេលវេលាដោះស្រាយជាមធ្យម",
+  noIncidents: "គ្មានឧប្បត្តិហេតុសកម្មទេ",
+  createIncident: "បង្កើតឧប្បត្តិហេតុ",
+  investigating: "កំពុងស៊ើបអង្កេត",
+  identified: "បានរកឃើញ",
+  monitoring: "កំពុងតាមដាន",
+  resolved: "បានដោះស្រាយ",
+  scheduleIncidentManagement: "ការគ្រប់គ្រងកាលវិភាគ និងឧប្បត្តិហេតុ",
+  incidentName: "ឈ្មោះឧប្បត្តិហេតុ",
+  incidentStatus: "ស្ថានភាពឧប្បត្តិហេតុ",
+  highPriority: "អាទិភាពខ្ពស់",
+  configurationSettings: "ការកំណត់រចនាសម្ព័ន្ធ",
+  incidentCreatedSuccess: "ឧប្បត្តិហេតុត្រូវបានបង្កើតដោយជោគជ័យ",
+  basicInfo: "ព័ត៌មានមូលដ្ឋាន",
+  serviceId: "លេខសម្គាល់សេវាកម្ម",
+  assignedTo: "ចាត់តាំងទៅឱ្យ",
+  unassigned: "មិនបានចាត់តាំង",
+  timeline: "កាលវិភាគ",
+  incidentTime: "ពេលមានឧប្បត្តិហេតុ",
+  resolutionTime: "ពេលវេលាដោះស្រាយ",
+  systems: "ប្រព័ន្ធ",
+  noSystems: "គ្មានប្រព័ន្ធរងផលប៉ះពាល់",
+  impactAnalysis: "ការវិភាគផលប៉ះពាល់",
+  rootCause: "មូលហេតុចម្បង",
+  resolutionSteps: "ជំហានដោះស្រាយ",
+  lessonsLearned: "មេរៀនដែលបានរៀន",
+  resolutionDetails: "ព័ត៌មានលម្អិតនៃដំណោះស្រាយ",
+  assignment: "ការចាត់តាំង",
+  download: "ទាញយក",
+  downloadPdf: "ទាញយកជា PDF",
+  print: "បោះពុម្ព",
+  confidentialNote: "ឯកសារនេះជាការសម្ងាត់និងសម្រាប់ការប្រើប្រាស់ផ្ទៃក្នុងតែប៉ុណ្ណោះ។",
+  generatedOn: "បង្កើតនៅថ្ងៃទី",
+  enterResolutionSteps: "បញ្ចូលជំហានដែលបានធ្វើដើម្បីដោះស្រាយឧប្បត្តិហេតុ",
+  enterLessonsLearned: "បញ្ចូលមេរៀនដែលបានរៀនពីឧប្បត្តិហេតុនេះ",
+  editIncident: "កែសម្រួលឧប្បត្តិហេតុ",
+  editIncidentDesc: "ធ្វើបច្ចុប្បន្នភាពព័ត៌មានលម្អិតសម្រាប់ឧប្បត្តិហេតុនេះ",
+  updating: "កំពុងធ្វើបច្ចុប្បន្នភាព...",
+  update: "ធ្វើបច្ចុប្បន្នភាព",
+  create: "បង្កើត",
+  creating: "កំពុងបង្កើត...",
+  configuration: "ការកំណត់រចនាសម្ព័ន្ធ",
+  failedToUpdateStatus: "បរាជ័យក្នុងការធ្វើបច្ចុប្បន្នភាពស្ថានភាព",
+  inProgress: "កំពុងដំណើរការ",
+};
diff --git a/application/src/translations/km/index.ts b/application/src/translations/km/index.ts
new file mode 100644
index 0000000..f1ac6a7
--- /dev/null
+++ b/application/src/translations/km/index.ts
@@ -0,0 +1,23 @@
+
+import { Translations } from '../types';
+import { commonTranslations } from './common';
+import { menuTranslations } from './menu';
+import { loginTranslations } from './login';
+import { aboutTranslations } from './about';
+import { servicesTranslations } from './services';
+import { maintenanceTranslations } from './maintenance';
+import { incidentTranslations } from './incident';
+import { sslTranslations } from './ssl';
+
+const kmTranslations: Translations = {
+  common: commonTranslations,
+  menu: menuTranslations,
+  login: loginTranslations,
+  about: aboutTranslations,
+  services: servicesTranslations,
+  maintenance: maintenanceTranslations,
+  incident: incidentTranslations,
+  ssl: sslTranslations
+};
+
+export default kmTranslations;
diff --git a/application/src/translations/km/login.ts b/application/src/translations/km/login.ts
new file mode 100644
index 0000000..cdeeb68
--- /dev/null
+++ b/application/src/translations/km/login.ts
@@ -0,0 +1,23 @@
+
+import { LoginTranslations } from '../types/login';
+
+export const loginTranslations: LoginTranslations = {
+  signInToYourAccount: "ចូលគណនីរបស់អ្នក",
+  dontHaveAccount: "មិនមានគណនីមែនទេ?",
+  createOne: "បង្កើតមួយ",
+  signInWithGoogle: "ចូលជាមួយ Google",
+  orContinueWith: "ឬ",
+  email: "អ៊ីមែល",
+  password: "ពាក្យសម្ងាត់",
+  forgot: "ភ្លេច?",
+  signIn: "ចូល",
+  signingIn: "កំពុងចូល...",
+  loginSuccessful: "ការចូលបានជោគជ័យ",
+  loginSuccessMessage: "អ្នកបានចូលប្រើដោយជោគជ័យ។",
+  loginFailed: "ការចូលបានបរាជ័យ",
+  authenticationFailed: "ការផ្ទៀងផ្ទាត់បានបរាជ័យ",
+  bySigningIn: "ដោយការចូល អ្នកយល់ព្រមនឹង",
+  termsAndConditions: "លក្ខខណ្ឌ",
+  and: "និង",
+  privacyPolicy: "គោលនយោបាយឯកជនភាព",
+};
diff --git a/application/src/translations/km/maintenance.ts b/application/src/translations/km/maintenance.ts
new file mode 100644
index 0000000..273a1eb
--- /dev/null
+++ b/application/src/translations/km/maintenance.ts
@@ -0,0 +1,68 @@
+
+import { MaintenanceTranslations } from '../types/maintenance';
+
+export const maintenanceTranslations: MaintenanceTranslations = {
+  scheduledMaintenance: "ការថែទាំដែលបានកំណត់ពេល",
+  scheduledMaintenanceDesc: "មើល និងគ្រប់គ្រងកាលវិភាគថែទាំសម្រាប់ប្រព័ន្ធនិងសេវាកម្មរបស់អ្នក",
+  upcomingMaintenance: "ជិតមកដល់",
+  ongoingMaintenance: "កំពុងដំណើរការ",
+  completedMaintenance: "បានបញ្ចប់",
+  createMaintenanceWindow: "បង្កើតកាលវិភាគថែទាំ",
+  totalScheduledHours: "ចំនួនម៉ោងកំណត់សរុប",
+  maintenanceName: "ឈ្មោះកាលវិភាគថែទាំ",
+  maintenanceStatus: "ស្ថានភាព",
+  scheduledStart: "ពេលចាប់ផ្តើមដែលបានកំណត់",
+  scheduledEnd: "ពេលបញ្ចប់ដែលបានកំណត់",
+  affectedServices: "សេវាកម្មរងផលប៉ះពាល់",
+  impact: "ផលប៉ះពាល់",
+  minor: "តិចតួច",
+  major: "សំខាន់",
+  critical: "សំខាន់ខ្លាំង",
+  none: "គ្មាន",
+  actions: "សកម្មភាព",
+  scheduled: "បានកំណត់ពេល",
+  inprogress: "កំពុងដំណើរការ",
+  completed: "បានបញ្ចប់",
+  cancelled: "បានបោះបង់",
+  markAsInProgress: "សម្គាល់ថាកំពុងដំណើរការ",
+  markAsCompleted: "សម្គាល់ថាបានបញ្ចប់",
+  markAsCancelled: "សម្គាល់ថាបានបោះបង់",
+  confirmDelete: "បញ្ជាក់ការលុប",
+  deleteMaintenanceConfirmation: "តើអ្នកប្រាកដថាចង់លុបកាលវិភាគថែទាំនេះមែនទេ?",
+  thisActionCannotBeUndone: "សកម្មភាពនេះមិនអាចត្រឡប់ក្រោយវិញបានទេ។",
+  maintenanceDeleted: "លុបកាលវិភាគថែទាំ",
+  maintenanceDeletedDesc: "កាលវិភាគថែទាំត្រូវបានលុបដោយជោគជ័យ។",
+  errorDeletingMaintenance: "មានបញ្ហាក្នុងការលុបកាលវិភាគថែទាំ។",
+  statusUpdated: "បានធ្វើបច្ចុប្បន្នភាពស្ថានភាព",
+  maintenanceStatusUpdated: "ស្ថានភាពការថែទាំត្រូវបានធ្វើបច្ចុប្បន្នភាពដោយជោគជ័យ។",
+  errorUpdatingMaintenanceStatus: "មានកំហុសក្នុងការធ្វើបច្ចុប្បន្នភាពស្ថានភាពការថែទាំ។",
+  createMaintenance: "បង្កើតកាលវិភាគថែទាំ",
+  createMaintenanceDesc: "កំណត់ពេលវេលាថែទាំថ្មីសម្រាប់សេវាកម្មរបស់អ្នក",
+  enterTitle: "បញ្ចូលចំណងជើងកាលវិភាគថែទាំ",
+  enterDescription: "បញ្ចូលការពិពណ៌នាលម្អិតអំពីការថែទាំ",
+  startTime: "ពេលចាប់ផ្តើម",
+  endTime: "ពេលបញ្ចប់",
+  selectDate: "ជ្រើសរើសកាលបរិច្ឆេទ",
+  enterAffectedServices: "បញ្ចូលសេវាកម្មរងផលប៉ះពាល់",
+  separateServicesWithComma: "បំបែកសេវាកម្មច្រើនដោយសញ្ញាក្បៀស",
+  priority: "អាទិភាព",
+  selectPriority: "ជ្រើសរើសអាទិភាព",
+  selectStatus: "ជ្រើសរើសស្ថានភាព",
+  selectImpact: "ជ្រើសរើសផលប៉ះពាល់",
+  notifySubscribers: "ជូនដំណឹងដល់អ្នកជាវ",
+  notifySubscribersDesc: "ផ្ញើការជូនដំណឹងទៅអ្នកជាវទាំងអស់នៅពេលការថែទាំនេះចាប់ផ្តើម",
+  maintenanceCreated: "បានបង្កើតកាលវិភាគថែទាំ",
+  maintenanceCreatedDesc: "កាលវិភាគថែទាំត្រូវបានកំណត់ពេលដោយជោគជ័យ។",
+  errorCreatingMaintenance: "មានបញ្ហាក្នុងការបង្កើតកាលវិភាគថែទាំ។",
+  errorFetchingMaintenanceData: "មានបញ្ហាក្នុងការទាញយកទិន្នន័យកាលវិភាគថែទាំ។",
+  low: "ទាប",
+  medium: "មធ្យម",
+  high: "ខ្ពស់",
+  created: "បានបង្កើត",
+  lastUpdated: "ធ្វើបច្ចុប្បន្នភាពចុងក្រោយ",
+  subscribersWillBeNotified: "អ្នកជាវនឹងត្រូវបានជូនដំណឹងនៅពេលការថែទាំចាប់ផ្តើម",
+  noNotifications: "នឹងមិនមានការផ្ញើការជូនដំណឹងទេ",
+  noScheduledMaintenance: "មិនមានកាលវិភាគថែទាំទេ",
+  noMaintenanceWindows: "មិនមានកាលវិភាគថែទាំសម្រាប់រយៈពេលនេះទេ។ បង្កើតមួយដោយចុចប៊ូតុង \"បង្កើតកាលវិភាគថែទាំ\"។",
+  maintenanceCreatedSuccess: "កាលវិភាគថែទាំត្រូវបានបង្កើតដោយជោគជ័យ",
+};
diff --git a/application/src/translations/km/menu.ts b/application/src/translations/km/menu.ts
new file mode 100644
index 0000000..228321f
--- /dev/null
+++ b/application/src/translations/km/menu.ts
@@ -0,0 +1,21 @@
+
+import { MenuTranslations } from '../types/menu';
+
+export const menuTranslations: MenuTranslations = {
+  uptimeMonitoring: "ការត្រួតពិនិត្យ Uptime",
+  instanceMonitoring: "ការត្រួតពិនិត្យឧបករណ៍",
+  sslDomain: "SSL និងដមែន",
+  scheduleIncident: "កាលវិភាគនិងឧបទ្ទវហេតុ",
+  operationalPage: "ទំព័រប្រតិបត្តិការ",
+  reports: "របាយការណ៍",
+  apiDocumentation: "ឯកសារ API",
+  settingPanel: "ផ្ទាំងការកំណត់",
+  generalSettings: "ការកំណត់ទូទៅ",
+  userManagement: "ការគ្រប់គ្រងអ្នកប្រើប្រាស់",
+  notificationSettings: "ការកំណត់ការជូនដំណឹង",
+  alertsTemplates: "គំរូការជូនដំណឹង",
+  rolesManagement: "ការគ្រប់គ្រងតួនាទី",
+  dataRetention: "ការរក្សាទុកទិន្នន័យ",
+  backupSettings: "ការកំណត់បម្រុងទុក",
+  aboutSystem: "អំពីប្រព័ន្ធ",
+};
diff --git a/application/src/translations/km/services.ts b/application/src/translations/km/services.ts
new file mode 100644
index 0000000..658ac75
--- /dev/null
+++ b/application/src/translations/km/services.ts
@@ -0,0 +1,12 @@
+
+import { ServicesTranslations } from '../types/services';
+
+export const servicesTranslations: ServicesTranslations = {
+  serviceName: "ឈ្មោះសេវាកម្ម",
+  serviceType: "ប្រភេទសេវាកម្ម",
+  serviceStatus: "ស្ថានភាពសេវាកម្ម",
+  responseTime: "ពេលវេលាឆ្លើយតប",
+  uptime: "ពេលវេលាដំណើរការ",
+  lastChecked: "ពិនិត្យចុងក្រោយ",
+  noServices: "មិនមានសេវាកម្មដែលត្រូវនឹងលក្ខណៈវិនិច្ឆ័យរបស់អ្នក។",
+};
diff --git a/application/src/translations/km/ssl.ts b/application/src/translations/km/ssl.ts
new file mode 100644
index 0000000..b2a00df
--- /dev/null
+++ b/application/src/translations/km/ssl.ts
@@ -0,0 +1,107 @@
+
+import { SSLTranslations } from '../types/ssl';
+
+export const sslTranslations: SSLTranslations = {
+  // Page and section titles
+  sslDomainManagement: "ការគ្រប់គ្រង SSL និង ដូមេន",
+  monitorSSLCertificates: "តាមដាន និង គ្រប់គ្រងវិញ្ញាបនបត្រ SSL សម្រាប់ដូមេនរបស់អ្នក",
+  addSSLCertificate: "បន្ថែមវិញ្ញាបនបត្រ SSL",
+  editSSLCertificate: "កែសម្រួលវិញ្ញាបនបត្រ SSL",
+  deleteSSLCertificate: "លុបវិញ្ញាបនបត្រ SSL",
+  sslCertificateDetails: "ព័ត៌មានលម្អិតនៃវិញ្ញាបនបត្រ SSL",
+  detailedInfo: "ព័ត៌មានលម្អិតសម្រាប់",
+
+  // Status related
+  valid: "មានសុពលភាព",
+  expiringSoon: "ជិតផុតកំណត់",
+  expired: "ផុតកំណត់",
+  pending: "កំពុងរង់ចាំ",
+
+  // Statistics and cards
+  validCertificates: "វិញ្ញាបនបត្រមានសុពលភាព",
+  expiringSoonCertificates: "ជិតផុតកំណត់",
+  expiredCertificates: "វិញ្ញាបនបត្រផុតកំណត់",
+
+  // Form fields
+  domain: "ដូមេន",
+  domainName: "ឈ្មោះដូមេន",
+  domainCannotChange: "ដូមេនមិនអាចផ្លាស់ប្តូរបានបន្ទាប់ពីការបង្កើត",
+  warningThreshold: "កម្រិតព្រមាន",
+  warningThresholdDays: "កម្រិតព្រមាន (ថ្ងៃ)",
+  expiryThreshold: "កម្រិតផុតកំណត់",
+  expiryThresholdDays: "កម្រិតផុតកំណត់ (ថ្ងៃ)",
+  notificationChannel: "ឆានែលជូនដំណឹង",
+  chooseChannel: "ជ្រើសរើសឆានែលជូនដំណឹង",
+  whereToSend: "ទីកន្លែងដែលត្រូវផ្ញើការជូនដំណឹង",
+  daysBeforeExpiration: "ថ្ងៃមុនពេលផុតកំណត់ដើម្បីទទួលបានការព្រមាន",
+  daysBeforeCritical: "ថ្ងៃមុនពេលផុតកំណត់ដើម្បីទទួលបានការជូនដំណឹងសំខាន់ៗ",
+  getNotifiedExpiration: "ទទួលការជូនដំណឹងនៅពេលវិញ្ញាបនបត្រជិតផុតកំណត់",
+  getNotifiedCritical: "ទទួលការជូនដំណឹងនៅពេលវិញ្ញាបនបត្រជិតដល់ពេលផុតកំណត់ខ្លាំង",
+
+  // Table headers and fields
+  issuer: "អ្នកចេញផ្សាយ",
+  expirationDate: "កាលបរិច្ឆេទផុតកំណត់",
+  daysLeft: "ថ្ងៃនៅសល់",
+  status: "ស្ថានភាព",
+  lastNotified: "ជូនដំណឹងចុងក្រោយ",
+  actions: "សកម្មភាព",
+  validFrom: "មានសុពលភាពចាប់ពី",
+  validUntil: "មានសុពលភាពរហូតដល់",
+  validityDays: "ថ្ងៃសុពលភាព",
+  organization: "អង្គការ",
+  commonName: "ឈ្មោះទូទៅ",
+  serialNumber: "លេខសៀរៀល",
+  algorithm: "អាល់ហ្គោរីត",
+  subjectAltNames: "ឈ្មោះផ្សេងៗដែលអាចប្រើបាន",
+  
+  // Buttons and actions
+  addDomain: "បន្ថែមដូមេន",
+  refreshAll: "ធ្វើបច្ចុប្បន្នភាពទាំងអស់",
+  cancel: "បោះបង់",
+  addCertificate: "បន្ថែមវិញ្ញាបនប័ត្រ",
+  check: "ពិនិត្យ",
+  view: "មើល",
+  edit: "កែសម្រួល",
+  delete: "លុប",
+  close: "បិទ",
+  saveChanges: "រក្សាទុកការផ្លាស់ប្តូរ",
+  updating: "កំពុងធ្វើបច្ចុប្បន្នភាព",
+  
+  // Sections in detail view
+  basicInformation: "ព័ត៌មានមូលដ្ឋាន",
+  validity: "សុពលភាព",
+  issuerInfo: "ព័ត៌មានអ្នកចេញផ្សាយ",
+  technicalDetails: "ព័ត៌មានបច្ចេកទេស",
+  monitoringConfig: "ការកំណត់រចនាសម្ព័ន្ធការតាមដាន",
+  recordInfo: "ព័ត៌មានកំណត់ត្រា",
+  
+  // Notifications and messages
+  sslCertificateAdded: "វិញ្ញាបនបត្រ SSL បានបន្ថែមដោយជោគជ័យ",
+  sslCertificateUpdated: "វិញ្ញាបនបត្រ SSL បានធ្វើបច្ចុប្បន្នភាពដោយជោគជ័យ",
+  sslCertificateDeleted: "វិញ្ញាបនបត្រ SSL ត្រូវបានលុបដោយជោគជ័យ",
+  sslCertificateRefreshed: "វិញ្ញាបនបត្រ SSL សម្រាប់ {domain} បានធ្វើបច្ចុប្បន្នភាពដោយជោគជ័យ",
+  allCertificatesRefreshed: "វិញ្ញាបនបត្រទាំងអស់ {count} បានធ្វើបច្ចុប្បន្នភាពដោយជោគជ័យ",
+  someCertificatesFailed: "វិញ្ញាបនប័ត្រ {success} បានធ្វើបច្ចុប្បន្នភាព, {failed} បានបរាជ័យ",
+  failedToAddCertificate: "បរាជ័យក្នុងការបន្ថែមវិញ្ញាបនបត្រ SSL",
+  failedToLoadCertificates: "បរាជ័យក្នុងការផ្ទុកវិញ្ញាបនបត្រ SSL",
+  failedToUpdateCertificate: "បរាជ័យក្នុងការធ្វើបច្ចុប្បន្នភាពវិញ្ញាបនបត្រ SSL",
+  failedToDeleteCertificate: "បរាជ័យក្នុងការលុបវិញ្ញាបនបត្រ SSL",
+  failedToCheckCertificate: "បរាជ័យក្នុងការពិនិត្យមើលវិញ្ញាបនបត្រ SSL",
+  noCertificatesToRefresh: "មិនមានវិញ្ញាបនបត្រដើម្បីធ្វើបច្ចុប្បន្នភាពទេ",
+  startingRefreshAll: "ចាប់ផ្តើមធ្វើបច្ចុប្បន្នភាពវិញ្ញាបនបត្រចំនួន {count}",
+  checkingSSLCertificate: "កំពុងពិនិត្យមើលវិញ្ញាបនបត្រ SSL...",
+  deleteConfirmation: "តើអ្នកពិតជាចង់លុបវិញ្ញាបនបត្រសម្រាប់",
+  deleteWarning: "សកម្មភាពនេះមិនអាចត្រឡប់វិញបានទេ។ វានឹងលុបវិញ្ញាបនបត្រជាអចិន្ត្រៃយ៍។",
+  
+  // Misc
+  unknown: "មិនស្គាល់",
+  never: "មិនដែល",
+  none: "គ្មាន",
+  loadingChannels: "កំពុងផ្ទុកឆានែល...",
+  noChannelsFound: "រកមិនឃើញឆានែលជូនដំណឹងទេ",
+  noSSLCertificates: "រកមិនឃើញវិញ្ញាបនបត្រ SSL ទេ",
+  created: "បានបង្កើត",
+  lastUpdated: "បានធ្វើបច្ចុប្បន្នភាពចុងក្រោយ",
+  lastNotification: "ការជូនដំណឹងចុងក្រោយ",
+  collectionId: "លេខសម្គាល់ប្រមូលផ្តុំ"
+};
diff --git a/application/src/translations/types/about.ts b/application/src/translations/types/about.ts
new file mode 100644
index 0000000..244ec53
--- /dev/null
+++ b/application/src/translations/types/about.ts
@@ -0,0 +1,16 @@
+
+export interface AboutTranslations {
+  aboutReamStack: string;
+  systemDescription: string;
+  systemVersion: string;
+  license: string;
+  mitLicense: string;
+  links: string;
+  viewOnGithub: string;
+  viewDocumentation: string;
+  followOnX: string;
+  joinDiscord: string;
+  quickActions: string;
+  quickActionsDescription: string;
+  quickTips: string;
+}
diff --git a/application/src/translations/types/common.ts b/application/src/translations/types/common.ts
new file mode 100644
index 0000000..fc16c53
--- /dev/null
+++ b/application/src/translations/types/common.ts
@@ -0,0 +1,26 @@
+
+export interface CommonTranslations {
+  welcome: string;
+  logout: string;
+  language: string;
+  english: string;
+  khmer: string;
+  goodMorning: string;
+  goodAfternoon: string;
+  goodEvening: string;
+  profile: string;
+  settings: string;
+  documentation: string;
+  notifications: string;
+  close: string;
+  cancel: string;
+  view: string;
+  edit: string;
+  delete: string;
+  status: string;
+  time: string;
+  title: string;
+  description: string;
+  success: string;
+  error: string;
+}
diff --git a/application/src/translations/types/incident.ts b/application/src/translations/types/incident.ts
new file mode 100644
index 0000000..83d2014
--- /dev/null
+++ b/application/src/translations/types/incident.ts
@@ -0,0 +1,53 @@
+
+export interface IncidentTranslations {
+  incidentManagement: string;
+  incidentsManagementDesc: string;
+  unresolvedIncidents: string;
+  resolvedIncidents: string;
+  activeIncidents: string;
+  criticalIssues: string;
+  avgResolutionTime: string;
+  noIncidents: string;
+  createIncident: string;
+  investigating: string;
+  identified: string;
+  monitoring: string;
+  resolved: string;
+  scheduleIncidentManagement: string;
+  incidentName: string;
+  incidentStatus: string;
+  highPriority: string;
+  configurationSettings: string;
+  incidentCreatedSuccess: string;
+  basicInfo: string;
+  serviceId: string;
+  assignedTo: string;
+  unassigned: string;
+  timeline: string;
+  incidentTime: string;
+  resolutionTime: string;
+  systems: string;
+  noSystems: string;
+  impactAnalysis: string;
+  rootCause: string;
+  resolutionSteps: string;
+  lessonsLearned: string;
+  resolutionDetails: string;
+  assignment: string;
+  download: string;
+  downloadPdf: string;
+  print: string;
+  confidentialNote: string;
+  generatedOn: string;
+  enterResolutionSteps: string;
+  enterLessonsLearned: string;
+  editIncident: string;
+  editIncidentDesc: string;
+  updating: string;
+  update: string;
+  create: string;
+  creating: string;
+  configuration: string;
+  failedToUpdateStatus: string;
+  inProgress: string;
+}
diff --git a/application/src/translations/types/index.ts b/application/src/translations/types/index.ts
new file mode 100644
index 0000000..f14aa50
--- /dev/null
+++ b/application/src/translations/types/index.ts
@@ -0,0 +1,20 @@
+
+import { CommonTranslations } from './common';
+import { MenuTranslations } from './menu';
+import { LoginTranslations } from './login';
+import { AboutTranslations } from './about';
+import { ServicesTranslations } from './services';
+import { MaintenanceTranslations } from './maintenance';
+import { IncidentTranslations } from './incident';
+import { SSLTranslations } from './ssl';
+
+export interface Translations {
+  common: CommonTranslations;
+  menu: MenuTranslations;
+  login: LoginTranslations;
+  about: AboutTranslations;
+  services: ServicesTranslations;
+  maintenance: MaintenanceTranslations;
+  incident: IncidentTranslations;
+  ssl: SSLTranslations;
+}
diff --git a/application/src/translations/types/login.ts b/application/src/translations/types/login.ts
new file mode 100644
index 0000000..05c7626
--- /dev/null
+++ b/application/src/translations/types/login.ts
@@ -0,0 +1,21 @@
+
+export interface LoginTranslations {
+  signInToYourAccount: string;
+  dontHaveAccount: string;
+  createOne: string;
+  signInWithGoogle: string;
+  orContinueWith: string;
+  email: string;
+  password: string;
+  forgot: string;
+  signIn: string;
+  signingIn: string;
+  loginSuccessful: string;
+  loginSuccessMessage: string;
+  loginFailed: string;
+  authenticationFailed: string;
+  bySigningIn: string;
+  termsAndConditions: string;
+  and: string;
+  privacyPolicy: string;
+}
diff --git a/application/src/translations/types/maintenance.ts b/application/src/translations/types/maintenance.ts
new file mode 100644
index 0000000..7170349
--- /dev/null
+++ b/application/src/translations/types/maintenance.ts
@@ -0,0 +1,66 @@
+
+export interface MaintenanceTranslations {
+  scheduledMaintenance: string;
+  scheduledMaintenanceDesc: string;
+  upcomingMaintenance: string;
+  ongoingMaintenance: string;
+  completedMaintenance: string;
+  createMaintenanceWindow: string;
+  totalScheduledHours: string;
+  maintenanceName: string;
+  maintenanceStatus: string;
+  scheduledStart: string;
+  scheduledEnd: string;
+  affectedServices: string;
+  impact: string;
+  minor: string;
+  major: string;
+  critical: string;
+  none: string;
+  actions: string;
+  scheduled: string;
+  inprogress: string;
+  completed: string;
+  cancelled: string;
+  markAsInProgress: string;
+  markAsCompleted: string;
+  markAsCancelled: string;
+  confirmDelete: string;
+  deleteMaintenanceConfirmation: string;
+  thisActionCannotBeUndone: string;
+  maintenanceDeleted: string;
+  maintenanceDeletedDesc: string;
+  errorDeletingMaintenance: string;
+  statusUpdated: string;
+  maintenanceStatusUpdated: string;
+  errorUpdatingMaintenanceStatus: string;
+  createMaintenance: string;
+  createMaintenanceDesc: string;
+  enterTitle: string;
+  enterDescription: string;
+  startTime: string;
+  endTime: string;
+  selectDate: string;
+  enterAffectedServices: string;
+  separateServicesWithComma: string;
+  priority: string;
+  selectPriority: string;
+  selectStatus: string;
+  selectImpact: string;
+  notifySubscribers: string;
+  notifySubscribersDesc: string;
+  maintenanceCreated: string;
+  maintenanceCreatedDesc: string;
+  errorCreatingMaintenance: string;
+  errorFetchingMaintenanceData: string;
+  low: string;
+  medium: string;
+  high: string;
+  created: string;
+  lastUpdated: string;
+  subscribersWillBeNotified: string;
+  noNotifications: string;
+  noScheduledMaintenance: string;
+  noMaintenanceWindows: string;
+  maintenanceCreatedSuccess: string;
+}
diff --git a/application/src/translations/types/menu.ts b/application/src/translations/types/menu.ts
new file mode 100644
index 0000000..a70923c
--- /dev/null
+++ b/application/src/translations/types/menu.ts
@@ -0,0 +1,19 @@
+
+export interface MenuTranslations {
+  uptimeMonitoring: string;
+  instanceMonitoring: string;
+  sslDomain: string;
+  scheduleIncident: string;
+  operationalPage: string;
+  reports: string;
+  apiDocumentation: string;
+  settingPanel: string;
+  generalSettings: string;
+  userManagement: string;
+  notificationSettings: string;
+  alertsTemplates: string;
+  rolesManagement: string;
+  dataRetention: string;
+  backupSettings: string;
+  aboutSystem: string;
+}
diff --git a/application/src/translations/types/services.ts b/application/src/translations/types/services.ts
new file mode 100644
index 0000000..5d93087
--- /dev/null
+++ b/application/src/translations/types/services.ts
@@ -0,0 +1,10 @@
+
+export interface ServicesTranslations {
+  serviceName: string;
+  serviceType: string;
+  serviceStatus: string;
+  responseTime: string;
+  uptime: string;
+  lastChecked: string;
+  noServices: string;
+}
diff --git a/application/src/translations/types/ssl.ts b/application/src/translations/types/ssl.ts
new file mode 100644
index 0000000..119a204
--- /dev/null
+++ b/application/src/translations/types/ssl.ts
@@ -0,0 +1,105 @@
+
+export interface SSLTranslations {
+  // Page and section titles
+  sslDomainManagement: string;
+  monitorSSLCertificates: string;
+  addSSLCertificate: string;
+  editSSLCertificate: string;
+  deleteSSLCertificate: string;
+  sslCertificateDetails: string;
+  detailedInfo: string;
+
+  // Status related
+  valid: string;
+  expiringSoon: string;
+  expired: string;
+  pending: string;
+
+  // Statistics and cards
+  validCertificates: string;
+  expiringSoonCertificates: string;
+  expiredCertificates: string;
+
+  // Form fields
+  domain: string;
+  domainName: string;
+  domainCannotChange: string;
+  warningThreshold: string;
+  warningThresholdDays: string;
+  expiryThreshold: string;
+  expiryThresholdDays: string;
+  notificationChannel: string;
+  chooseChannel: string;
+  whereToSend: string;
+  daysBeforeExpiration: string;
+  daysBeforeCritical: string;
+  getNotifiedExpiration: string;
+  getNotifiedCritical: string;
+
+  // Table headers and fields
+  issuer: string;
+  expirationDate: string;
+  daysLeft: string;
+  status: string;
+  lastNotified: string;
+  actions: string;
+  validFrom: string;
+  validUntil: string;
+  validityDays: string;
+  organization: string;
+  commonName: string;
+  serialNumber: string;
+  algorithm: string;
+  subjectAltNames: string;
+  
+  // Buttons and actions
+  addDomain: string;
+  refreshAll: string;
+  cancel: string;
+  addCertificate: string;
+  check: string;
+  view: string;
+  edit: string;
+  delete: string;
+  close: string;
+  saveChanges: string;
+  updating: string;
+  
+  // Sections in detail view
+  basicInformation: string;
+  validity: string;
+  issuerInfo: string;
+  technicalDetails: string;
+  monitoringConfig: string;
+  recordInfo: string;
+  
+  // Notifications and messages
+  sslCertificateAdded: string;
+  sslCertificateUpdated: string;
+  sslCertificateDeleted: string;
+  sslCertificateRefreshed: string;
+  allCertificatesRefreshed: string;
+  someCertificatesFailed: string;
+  failedToAddCertificate: string;
+  failedToLoadCertificates: string;
+  failedToUpdateCertificate: string;
+  failedToDeleteCertificate: string;
+  failedToCheckCertificate: string;
+  noCertificatesToRefresh: string;
+  startingRefreshAll: string;
+  checkingSSLCertificate: string;
+  deleteConfirmation: string;
+  deleteWarning: string;
+  
+  // Misc
+  unknown: string;
+  never: string;
+  none: string;
+  loadingChannels: string;
+  noChannelsFound: string;
+  noSSLCertificates: string;
+  created: string;
+  lastUpdated: string;
+  lastNotification: string;
+  collectionId: string;
+}

From 0d8b88d9a151805b4fc42247265e7bf1b9f8f370 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Fri, 23 May 2025 20:39:43 +0800
Subject: [PATCH 14/16] Updated Service Notification

---
 .../services/add-service/ServiceNotificationFields.tsx    | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/application/src/components/services/add-service/ServiceNotificationFields.tsx b/application/src/components/services/add-service/ServiceNotificationFields.tsx
index 7e3d719..0972b3a 100644
--- a/application/src/components/services/add-service/ServiceNotificationFields.tsx
+++ b/application/src/components/services/add-service/ServiceNotificationFields.tsx
@@ -39,10 +39,12 @@ export function ServiceNotificationFields({ form }: ServiceNotificationFieldsPro
   // Update alert configs when data is loaded
   useEffect(() => {
     if (alertConfigsData) {
-      setAlertConfigs(alertConfigsData);
+      // Only show enabled channels
+      const enabledChannels = alertConfigsData.filter(config => config.enabled);
+      setAlertConfigs(enabledChannels);
       
       // Debug log to check what alert configs are loaded
-      console.log("Loaded alert configurations:", alertConfigsData);
+      console.log("Loaded alert configurations:", enabledChannels);
     }
   }, [alertConfigsData]);
 
@@ -136,4 +138,4 @@ export function ServiceNotificationFields({ form }: ServiceNotificationFieldsPro
       />
     </>
   );
-}
+}
\ No newline at end of file

From 1ee63ec74a4f6c01b26cc7eacaa94e489451bccf Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Fri, 23 May 2025 20:40:14 +0800
Subject: [PATCH 15/16] Added PDF Print Function

---
 application/src/types/jspdf-autotable.d.ts | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 application/src/types/jspdf-autotable.d.ts

diff --git a/application/src/types/jspdf-autotable.d.ts b/application/src/types/jspdf-autotable.d.ts
new file mode 100644
index 0000000..44a756d
--- /dev/null
+++ b/application/src/types/jspdf-autotable.d.ts
@@ -0,0 +1,9 @@
+import 'jspdf';
+
+declare module 'jspdf' {
+  interface jsPDF {
+    lastAutoTable: {
+      finalY: number;
+    };
+  }
+}
\ No newline at end of file

From 641e98c00158dcfbebaa60532249052e4c7a6aa1 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Fri, 23 May 2025 20:40:29 +0800
Subject: [PATCH 16/16] Updated Language Context

---
 application/src/contexts/LanguageContext.tsx | 26 ++++++++++++++++----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/application/src/contexts/LanguageContext.tsx b/application/src/contexts/LanguageContext.tsx
index 3bbebd0..a8b13bb 100644
--- a/application/src/contexts/LanguageContext.tsx
+++ b/application/src/contexts/LanguageContext.tsx
@@ -1,11 +1,11 @@
 
 import React, { createContext, useContext, useState, ReactNode } from "react";
-import { translations, Language, TranslationKey } from "@/translations";
+import { translations, Language, TranslationModule, TranslationKey } from "@/translations";
 
 type LanguageContextType = {
   language: Language;
   setLanguage: (language: Language) => void;
-  t: (key: string) => string;
+  t: <M extends TranslationModule>(key: string, module?: M) => string;
 };
 
 const LanguageContext = createContext<LanguageContextType>({
@@ -19,8 +19,24 @@ export const useLanguage = () => useContext(LanguageContext);
 export const LanguageProvider = ({ children }: { children: ReactNode }) => {
   const [language, setLanguage] = useState<Language>("en");
 
-  const t = (key: string) => {
-    return translations[language][key as TranslationKey] || key;
+  const t = <M extends TranslationModule>(key: string, module?: M): string => {
+    // If module is provided, look up in that specific module
+    if (module) {
+      const translatedValue = translations[language][module][key as TranslationKey<M>];
+      return typeof translatedValue === 'string' ? translatedValue : key;
+    }
+
+    // If no module is provided, search through all modules
+    for (const mod in translations[language]) {
+      const moduleKey = mod as TranslationModule;
+      const translatedValue = translations[language][moduleKey][key as any];
+      if (translatedValue && typeof translatedValue === 'string') {
+        return translatedValue;
+      }
+    }
+
+    // If no translation found, return the key
+    return key;
   };
 
   return (
@@ -28,4 +44,4 @@ export const LanguageProvider = ({ children }: { children: ReactNode }) => {
       {children}
     </LanguageContext.Provider>
   );
-};
+};
\ No newline at end of file