[feat] Enhance Event Status Handling with Planned and Cancelled States; Refactor UI Components for Consistent Status Display (#162)

Author: Aloento

package.json

@@ -11,7 +11,7 @@
     "test": "vitest"
   },
   "dependencies": {
-    "@fluentui/react-components": "^9.63.0",
+    "@fluentui/react-components": "^9.64.0",
     "@telekom/scale-components": "3.0.0-beta.155",
     "@telekom/scale-components-react": "3.0.0-beta.155",
     "ahooks": "^3.8.4",
@@ -31,12 +31,12 @@
     "@farmfe/core": "^1.7.5",
     "@farmfe/js-plugin-postcss": "^1.12.0",
     "@farmfe/plugin-react": "^1.2.6",
-    "@tailwindcss/postcss": "^4.1.6",
+    "@tailwindcss/postcss": "^4.1.7",
     "@testing-library/react": "^16.3.0",
     "@types/lodash": "^4.17.16",
-    "@types/node": "^22.15.17",
-    "@types/react": "^19.1.3",
-    "@types/react-dom": "^19.1.3",
+    "@types/node": "^22.15.18",
+    "@types/react": "^19.1.4",
+    "@types/react-dom": "^19.1.5",
     "@types/react-helmet": "^6.1.11",
     "autoprefixer": "^10.4.21",
     "core-js": "^3.42.0",
@@ -46,7 +46,7 @@
     "react-refresh": "^0.17.0",
     "tailwindcss": "3.4.17",
     "tailwindcss-scoped-preflight": "^3.4.12",
-    "typescript-eslint": "^8.32.0"
+    "typescript-eslint": "^8.32.1"
   },
-  "packageManager": "pnpm@10.10.0"
+  "packageManager": "pnpm@10.11.0"
 }

pnpm-lock.yaml

@@ -60,9 +60,11 @@ export enum EventStatus {
   Observing = "Observing",
   Resolved = "Resolved",
 
+  Planned = "Planned",
   Modified = "Modified",
   InProgress = "InProgress",
   Completed = "Completed",
+  Cancelled = "Cancelled",
 
   Reopened = "Reopened",
   Changed = "Changed",
@@ -74,7 +76,7 @@ export enum EventStatus {
  * @version 0.1.0
  */
 export function IsOpenStatus(status: EventStatus): boolean {
-  return ![EventStatus.Completed, EventStatus.Resolved].includes(status);
+  return ![EventStatus.Completed, EventStatus.Resolved, EventStatus.Cancelled].includes(status);
 }
 
 /**
@@ -102,5 +104,9 @@ export function GetStatusString(status: EventStatus): string {
       return StatusEnum.Reopened;
     case EventStatus.Changed:
       return StatusEnum.Changed;
+    case EventStatus.Planned:
+      return StatusEnum.Planned;
+    case EventStatus.Cancelled:
+      return StatusEnum.Cancelled;
   }
 }

src/Components/Event/Enums.ts

@@ -47,10 +47,9 @@ export function EventCard({ Event }: { Event: Models.IEvent }) {
             Impact Type:
           </label>
 
-          {Event.Type !== EventType.Maintenance &&
-            <label className="text-xl font-medium text-slate-600 whitespace-nowrap">
-              Current Status:
-            </label>}
+          <label className="text-xl font-medium text-slate-600 whitespace-nowrap">
+            Current Status:
+          </label>
 
           <label className="text-xl font-medium text-slate-600">
             Start At:
@@ -73,10 +72,9 @@ export function EventCard({ Event }: { Event: Models.IEvent }) {
             {Event.Type}
           </label>
 
-          {Event.Type !== EventType.Maintenance &&
-            <label className="text-xl font-medium text-slate-700">
-              {Event.Status}
-            </label>}
+          <label className="text-xl font-medium text-slate-700">
+            {Event.Status}
+          </label>
 
           <label className="text-xl font-medium text-slate-700">
             {dayjs(Event.Start).tz(Dic.TZ).format(Dic.TimeTZ)}

src/Components/Event/EventCard.tsx

@@ -81,7 +81,7 @@ export function EventEditor({ Event }: { Event: Models.IEvent }) {
           {Object.values(EventStatus)
             .slice(
               State.type === EventType.Maintenance ? 4 : 0,
-              State.type === EventType.Maintenance ? 7 : 4
+              State.type === EventType.Maintenance ? 9 : 4
             ).map((status, i) =>
               <ScaleDropdownSelectItem value={status} key={i}>
                 {status}

src/Components/Event/EventEditor.tsx

@@ -63,4 +63,6 @@ export const enum StatusEnum {
   Resolved = "resolved",
   Scheduled = "scheduled",
   System = "SYSTEM",
+  Planned = "planned",
+  Cancelled = "cancelled",
 }

src/Services/Status.Entities.ts

@@ -133,7 +133,7 @@ export function TransformerV2({ Components, Events }: { Components: StatusEntity
       Title: event.title,
       Start: dayjs(event.start_date).toDate(),
       Type: type,
-      Status: type === EventType.Maintenance ? EventStatus.Modified : EventStatus.Analysing,
+      Status: type === EventType.Maintenance ? EventStatus.Planned : EventStatus.Analysing,
       Histories: new Set(),
       RegionServices: new Set(),
     };
@@ -186,12 +186,16 @@ export function TransformerV2({ Components, Events }: { Components: StatusEntity
               break;
 
             case StatusEnum.Scheduled:
+            case StatusEnum.Planned:
+              return EventStatus.Planned;
             case StatusEnum.Modified:
               return EventStatus.Modified;
             case StatusEnum.InProgress:
               return EventStatus.InProgress;
             case StatusEnum.Completed:
               return EventStatus.Completed;
+            case StatusEnum.Cancelled:
+              return EventStatus.Cancelled;
 
             case StatusEnum.Changed:
             case StatusEnum.ImpactChanged: