added logs list

2025-05-02 17:14:36 +05:30
parent 66d8196537
commit 4b7a868d1a
15 changed files with 604 additions and 51 deletions
--- a/app/src/components/ui/log/LogList.tsx
+++ 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 <LogInfoIcon />;
+      case "error":
+        return <ErrorIcon />;
+      case "warning":
+        return <WarningIcon />;
+      case "log":
+      default:
+        return <LogInfoIcon />;
+    }
+  };
+
+  const formatTimestamp = (date: Date) => new Date(date).toLocaleTimeString();
+
+  const filteredLogs =
+    selectedTab === "all"
+      ? [...logs].reverse()
+      : [...logs].filter((log) => log.type === selectedTab).reverse();
+
+  return (
+    <div className="log-list-container">
+      <div className="log-list-wrapper">
+        <div className="log-header">
+          <div className="log-header-wrapper">
+            <div className="icon">
+              <LogListIcon />
+            </div>
+            <div className="head">Log List</div>
+          </div>
+          <div className="close" onClick={() => setIsLogListVisible(false)}>
+            X
+          </div>
+        </div>
+
+        {/* Tabs */}
+        <div className="log-nav-wrapper">
+          {["all", "info", "warning", "error"].map((type) => (
+            <div
+              key={type}
+              className={`log-nav ${selectedTab === type ? "active" : ""}`}
+              onClick={() => setSelectedTab(type as any)}
+            >
+              {`${type.charAt(0).toUpperCase() + type.slice(1)} Logs`}
+            </div>
+          ))}
+        </div>
+
+        {/* Log Entries */}
+        <div className="log-entry-wrapper">
+          {filteredLogs.map((log) => (
+            <div key={log.id} className={`log-entry ${log.type}`}>
+              <div className="tick">
+                <TickIcon />
+              </div>
+              <div className="log-icon">{getLogIcon(log.type)}</div>
+              <div className="log-entry-message">
+                [{formatTimestamp(log.timestamp)}] [{log.type.toUpperCase()}]{" "}
+                {log.message}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LogList;