{/* Dynamically create progress bars based on shiftUtilization array */}
- {shiftUtilization.map((shift) => (
+ {shiftUtilization.map((shift, index) => (
))}
@@ -156,11 +157,11 @@ const ThroughputSummary = () => {
{/* Dynamically create shift indicators with random colors */}
- {shiftUtilization.map((shift) => (
+ {shiftUtilization.map((shift, index) => (
diff --git a/app/src/components/ui/footer/Footer.tsx b/app/src/components/ui/footer/Footer.tsx
new file mode 100644
index 0000000..93da68c
--- /dev/null
+++ b/app/src/components/ui/footer/Footer.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+import { HelpIcon } from "../../icons/DashboardIcon";
+import { useLogger } from "../log/LoggerContext";
+
+const Footer = () => {
+ const { logs, setIsLogListVisible } = useLogger();
+
+ const lastLog = logs.length > 0 ? logs[logs.length - 1] : null;
+
+ return (
+
+
+
+
+
setIsLogListVisible(true)}>
+ {lastLog
+ ? `[${lastLog.type.toUpperCase()}] ${lastLog.message}`
+ : "No logs yet."}
+
+
+
+
+ );
+};
+
+export default Footer;
diff --git a/app/src/components/ui/log/LogList.tsx b/app/src/components/ui/log/LogList.tsx
new file mode 100644
index 0000000..4a43933
--- /dev/null
+++ b/app/src/components/ui/log/LogList.tsx
@@ -0,0 +1,87 @@
+// LogList.tsx
+import React, { useState } from "react";
+import {
+ LogListIcon,
+ TickIcon,
+ LogInfoIcon,
+ WarningIcon,
+ ErrorIcon,
+} from "../../icons/ExportCommonIcons"; // Adjust path as needed
+import { useLogger } from "./LoggerContext";
+
+const LogList: React.FC = () => {
+ const { logs, clear, setIsLogListVisible } = useLogger();
+ const [selectedTab, setSelectedTab] = useState<
+ "all" | "info" | "warning" | "error" | "log"
+ >("all");
+
+ const getLogIcon = (type: string) => {
+ switch (type) {
+ case "info":
+ return
;
+ case "error":
+ return
;
+ case "warning":
+ return
;
+ case "log":
+ default:
+ return
;
+ }
+ };
+
+ const formatTimestamp = (date: Date) => new Date(date).toLocaleTimeString();
+
+ const filteredLogs =
+ selectedTab === "all"
+ ? [...logs].reverse()
+ : [...logs].filter((log) => log.type === selectedTab).reverse();
+
+ return (
+
+
+
+
+
setIsLogListVisible(false)}>
+ X
+
+
+
+ {/* Tabs */}
+
+ {["all", "info", "warning", "error"].map((type) => (
+
setSelectedTab(type as any)}
+ >
+ {`${type.charAt(0).toUpperCase() + type.slice(1)} Logs`}
+
+ ))}
+
+
+ {/* Log Entries */}
+
+ {filteredLogs.map((log) => (
+
+
+
+
+
{getLogIcon(log.type)}
+
+ [{formatTimestamp(log.timestamp)}] [{log.type.toUpperCase()}]{" "}
+ {log.message}
+
+
+ ))}
+
+
+
+ );
+};
+
+export default LogList;
diff --git a/app/src/components/ui/log/LoggerContext.tsx b/app/src/components/ui/log/LoggerContext.tsx
new file mode 100644
index 0000000..f323b93
--- /dev/null
+++ b/app/src/components/ui/log/LoggerContext.tsx
@@ -0,0 +1,77 @@
+import React, { createContext, useContext, useState, useCallback } from "react";
+
+export type LogType = "log" | "info" | "warning" | "error";
+
+export interface LogEntry {
+ id: string;
+ type: LogType;
+ message: string;
+ timestamp: Date;
+}
+
+interface LoggerContextValue {
+ logs: LogEntry[];
+ setLogs: React.Dispatch
>;
+ isLogListVisible: boolean;
+ setIsLogListVisible: React.Dispatch>;
+ log: (message: string) => void;
+ info: (message: string) => void;
+ warn: (message: string) => void;
+ error: (message: string) => void;
+ clear: () => void;
+}
+
+const LoggerContext = createContext(undefined);
+
+export const LoggerProvider: React.FC<{ children: React.ReactNode }> = ({
+ children,
+}) => {
+ const [logs, setLogs] = useState([]);
+ const [isLogListVisible, setIsLogListVisible] = useState(false);
+
+ const generateId = useCallback(
+ () => Math.random().toString(36).substring(2, 9),
+ []
+ );
+
+ const addLog = useCallback(
+ (type: LogType, message: string) => {
+ const newLog: LogEntry = {
+ id: generateId(),
+ type,
+ message,
+ timestamp: new Date(),
+ };
+ setLogs((prevLogs) => [...prevLogs, newLog]);
+ },
+ [generateId]
+ );
+
+ const loggerMethods: LoggerContextValue = {
+ logs,
+ setLogs,
+ isLogListVisible,
+ setIsLogListVisible,
+ log: (message: string) => addLog("log", message),
+ info: (message: string) => addLog("info", message),
+ warn: (message: string) => addLog("warning", message),
+ error: (message: string) => addLog("error", message),
+ clear: () => {
+ setLogs([]);
+ },
+ };
+
+ return (
+
+ {children}
+
+ );
+};
+
+export const useLogger = () => {
+ const context = useContext(LoggerContext);
+ if (!context) {
+ throw new Error("useLogger must be used within a LoggerProvider");
+ }
+ return context;
+};
diff --git a/app/src/components/ui/log/logger.ts b/app/src/components/ui/log/logger.ts
new file mode 100644
index 0000000..1781e26
--- /dev/null
+++ b/app/src/components/ui/log/logger.ts
@@ -0,0 +1,71 @@
+type LogType = 'log' | 'info' | 'warning' | 'error';
+
+interface LogEntry {
+ type: LogType;
+ message: string;
+ timestamp: Date;
+ context?: string;
+}
+
+class Logger {
+ private static instance: Logger;
+ private logs: LogEntry[] = [];
+ private subscribers: Array<(log: LogEntry) => void> = [];
+
+ private constructor() {}
+
+ public static getInstance(): Logger {
+ if (!Logger.instance) {
+ Logger.instance = new Logger();
+ }
+ return Logger.instance;
+ }
+
+ private notifySubscribers(log: LogEntry) {
+ this.subscribers.forEach(callback => callback(log));
+ }
+
+ private addLog(type: LogType, message: string, context?: string) {
+ const log: LogEntry = { type, message, timestamp: new Date(), context };
+ this.logs.push(log);
+ this.notifySubscribers(log);
+
+ if (process.env.NODE_ENV === 'development') {
+ const logMessage = context ? `[${context}] ${message}` : message;
+ console[type === 'warning' ? 'warn' : type](logMessage);
+ }
+ }
+
+ public log(message: string, context?: string) {
+ this.addLog('log', message, context);
+ }
+
+ public info(message: string, context?: string) {
+ this.addLog('info', message, context);
+ }
+
+ public warning(message: string, context?: string) {
+ this.addLog('warning', message, context);
+ }
+
+ public error(message: string, context?: string) {
+ this.addLog('error', message, context);
+ }
+
+ public getLogs(): LogEntry[] {
+ return [...this.logs];
+ }
+
+ public clear() {
+ this.logs = [];
+ }
+
+ public subscribe(callback: (log: LogEntry) => void) {
+ this.subscribers.push(callback);
+ return () => {
+ this.subscribers = this.subscribers.filter(sub => sub !== callback);
+ };
+ }
+}
+
+export const logger = Logger.getInstance();
diff --git a/app/src/components/ui/simulation/simulationPlayer.tsx b/app/src/components/ui/simulation/simulationPlayer.tsx
index 86c5372..6ab6738 100644
--- a/app/src/components/ui/simulation/simulationPlayer.tsx
+++ b/app/src/components/ui/simulation/simulationPlayer.tsx
@@ -16,6 +16,7 @@ import {
SpeedIcon,
StartIcon,
} from "../../icons/ExportCommonIcons";
+import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
const SimulationPlayer: React.FC = () => {
const { speed, setSpeed } = useAnimationPlaySpeed();
@@ -110,15 +111,6 @@ const SimulationPlayer: React.FC = () => {
return color;
};
- // Store colors for each process item
- const [processColors, setProcessColors] = useState([]);
-
- // Generate colors on mount or when process changes
- useEffect(() => {
- const generatedColors = process.map(() => getRandomColor());
- setProcessColors(generatedColors);
- }, []);
-
const intervals = [10, 20, 30, 40, 50, 60]; // in minutes
const totalSegments = intervals.length;
const progress = 20; // percent (example)
@@ -328,6 +320,8 @@ const SimulationPlayer: React.FC = () => {