From 9a7e791a55b1ad9a8537cc64fcfda74ca73859f3 Mon Sep 17 00:00:00 2001
From: psankhe28 <sankhepratiksha3@gmail.com>
Date: Tue, 29 Aug 2023 22:48:54 +0530
Subject: [PATCH] Logs and Monitoring sevrices code

---
 .../broadcast-transformer/index.tsx           | 318 ++++++++++++++++
 .../broadcast-transformer/style.css           |  25 ++
 src/pages/monitoring/dummy.json               |  33 --
 src/pages/monitoring/inbound/index.tsx        | 321 ++++++++++++++++
 src/pages/monitoring/inbound/style.css        |  25 ++
 src/pages/monitoring/kafka/index.tsx          |  21 -
 .../logs/broadcast-transformer/index.tsx      | 359 ++++++++++++++++++
 .../logs/broadcast-transformer/style.css      |  53 +++
 src/pages/monitoring/logs/inbound/index.tsx   | 359 ++++++++++++++++++
 src/pages/monitoring/logs/inbound/style.css   |  53 +++
 .../monitoring/logs/orchestrator/index.tsx    | 358 +++++++++++++++++
 .../monitoring/logs/orchestrator/style.css    |  53 +++
 src/pages/monitoring/logs/outbound/index.tsx  | 358 +++++++++++++++++
 src/pages/monitoring/logs/outbound/style.css  |  53 +++
 .../monitoring/logs/transformer/index.tsx     | 358 +++++++++++++++++
 .../monitoring/logs/transformer/style.css     |  53 +++
 src/pages/monitoring/logs/uci-api/index.tsx   | 356 +++++++++++++++++
 src/pages/monitoring/logs/uci-api/style.css   |  53 +++
 src/pages/monitoring/orchestrator/index.tsx   | 318 ++++++++++++++++
 src/pages/monitoring/orchestrator/style.css   |  26 ++
 src/pages/monitoring/outbound/index.tsx       | 315 +++++++++++++++
 src/pages/monitoring/outbound/style.css       |  25 ++
 src/pages/monitoring/overview/card.tsx        |  40 ++
 src/pages/monitoring/overview/index.tsx       | 245 ++++++++----
 src/pages/monitoring/overview/style.css       |   4 +
 src/pages/monitoring/transformer/index.tsx    | 316 +++++++++++++++
 src/pages/monitoring/transformer/style.css    |  25 ++
 src/pages/monitoring/uci-api/index.tsx        | 318 ++++++++++++++++
 src/pages/monitoring/uci-api/style.css        |  25 ++
 29 files changed, 4732 insertions(+), 134 deletions(-)
 create mode 100644 src/pages/monitoring/broadcast-transformer/index.tsx
 create mode 100644 src/pages/monitoring/broadcast-transformer/style.css
 delete mode 100644 src/pages/monitoring/dummy.json
 create mode 100644 src/pages/monitoring/inbound/index.tsx
 create mode 100644 src/pages/monitoring/inbound/style.css
 delete mode 100644 src/pages/monitoring/kafka/index.tsx
 create mode 100644 src/pages/monitoring/logs/broadcast-transformer/index.tsx
 create mode 100644 src/pages/monitoring/logs/broadcast-transformer/style.css
 create mode 100644 src/pages/monitoring/logs/inbound/index.tsx
 create mode 100644 src/pages/monitoring/logs/inbound/style.css
 create mode 100644 src/pages/monitoring/logs/orchestrator/index.tsx
 create mode 100644 src/pages/monitoring/logs/orchestrator/style.css
 create mode 100644 src/pages/monitoring/logs/outbound/index.tsx
 create mode 100644 src/pages/monitoring/logs/outbound/style.css
 create mode 100644 src/pages/monitoring/logs/transformer/index.tsx
 create mode 100644 src/pages/monitoring/logs/transformer/style.css
 create mode 100644 src/pages/monitoring/logs/uci-api/index.tsx
 create mode 100644 src/pages/monitoring/logs/uci-api/style.css
 create mode 100644 src/pages/monitoring/orchestrator/index.tsx
 create mode 100644 src/pages/monitoring/orchestrator/style.css
 create mode 100644 src/pages/monitoring/outbound/index.tsx
 create mode 100644 src/pages/monitoring/outbound/style.css
 create mode 100644 src/pages/monitoring/overview/card.tsx
 create mode 100644 src/pages/monitoring/transformer/index.tsx
 create mode 100644 src/pages/monitoring/transformer/style.css
 create mode 100644 src/pages/monitoring/uci-api/index.tsx
 create mode 100644 src/pages/monitoring/uci-api/style.css

diff --git a/src/pages/monitoring/broadcast-transformer/index.tsx b/src/pages/monitoring/broadcast-transformer/index.tsx
new file mode 100644
index 0000000..925c2e4
--- /dev/null
+++ b/src/pages/monitoring/broadcast-transformer/index.tsx
@@ -0,0 +1,318 @@
+import {
+  MDBBtn,
+  MDBCol,
+  MDBDropdown,
+  MDBDropdownItem,
+  MDBDropdownMenu,
+  MDBDropdownToggle,
+  MDBRow,
+} from "mdb-react-ui-kit";
+import BarChart from "../../../components/visualisation/bar";
+import React, { useEffect, useState } from "react";
+import { useStore } from "../../../store";
+import { getBots } from "../../../api/getBots";
+import { toast } from "react-hot-toast";
+import "./style.css";
+import PieChart from "../../../components/visualisation/pie";
+import LineChart from "../../../components/visualisation/line";
+// import { formatDate, reverseFormatDate } from "../../../utils/functions";
+import { fetchRealtime } from "../../../api/fetchRealtimeData";
+import { getFilesData } from "../../../api/getFiles";
+import { convertToShortDate, formatDate, reverseFormatDate } from "../../../utils/functions";
+
+interface AutocompleteItem {
+  value: string;
+}
+
+interface BroadcastTransformerProps extends React.HTMLAttributes<HTMLDivElement> {
+  theme: string;
+}
+
+export const BroadcastTransformer: React.FC<BroadcastTransformerProps> = ({ theme }) => {
+  const [selectedChart, setSelectedChart] = useState("barchart");
+  const [dropdownLabel, setDropdownLabel] = useState("Select Chart");
+  const [searchText, setSearchText] = useState("");
+  // const [autocompleteSuggestions, setAutocompleteSuggestions] = useState<
+  //   AutocompleteItem[]
+  // >([]);
+  const [autocompleteSuggestionsFile, setAutocompleteSuggestionsFile] =
+    useState<AutocompleteItem[]>([]);
+  const [botList, setBotList] = useState([]);
+  const store: any = useStore();
+
+  const [selected, setSelected] = useState("");
+  const [dropdown, setDropdown] = useState(true);
+
+  const [BroadcastTransformerData, setBroadcastTransformerData] = useState([]);
+
+  const [final, setFinal] = useState("");
+
+  const func = async () => {
+    if (localStorage.getItem("file")) {
+      const file = localStorage.getItem("file");
+      const apiEndpoint = fetchRealtime(file);
+      try {
+        const response = await apiEndpoint;
+        const res = JSON.parse(response.data.result);
+        setBroadcastTransformerData(res["Broadcast Transformer".trim()] || {}); 
+      } catch (error) {
+        console.error("Error toggling:", error);
+      }
+    } else if (final !== "") {
+      const file = reverseFormatDate(final);
+      localStorage.setItem("file", file);
+
+      const shortDate = convertToShortDate(selected);
+      localStorage.setItem("shortDate", shortDate);
+      localStorage.setItem("data_time", selected);
+
+      const apiEndpoint = fetchRealtime(file);
+      try {
+        const response = await apiEndpoint;
+        const res = JSON.parse(response.data.result);
+        setBroadcastTransformerData(res["Broadcast Transformer".trim()] || {}); 
+      } catch (error) {
+        console.error("Error toggling:", error);
+      }
+    }
+    fetchBotData();
+  };
+
+  useEffect(() => {
+    func();
+    // fetchBotData();
+  }, [final]);
+
+  const dataBar = {
+    labels: Object.keys(BroadcastTransformerData),
+    datasets: [
+      {
+        label: "Broadcast Transformer",
+        data: Object.values(BroadcastTransformerData).map(Number),
+        backgroundColor: "rgba(75, 192, 192, 0.6)",
+      },
+    ],
+  };
+
+  const dataPie = {
+    labels: Object.keys(BroadcastTransformerData),
+    datasets: [
+      {
+        label: "Broadcast Transformer",
+        data: Object.values(BroadcastTransformerData).map(Number),
+      },
+    ],
+  };
+
+  const dataLine = {
+    labels: Object.keys(BroadcastTransformerData),
+    datasets: [
+      {
+        label: "Broadcast Transformer",
+        data: Object.values(BroadcastTransformerData).map(Number),
+        backgroundColor: "rgba(75, 192, 192, 0.6)",
+      },
+    ],
+  };
+
+  const handleChartChange = (value, label) => {
+    setSelectedChart(value);
+    setDropdownLabel(label);
+  };
+
+  let chartComponent;
+  if (selectedChart === "barchart") {
+    chartComponent = <BarChart data={dataBar}/>;
+  } else if (selectedChart === "piechart") {
+    // chartComponent = <PieChart data={dataPie} />;
+    chartComponent = <PieChart data={dataPie} />;
+  } else if (selectedChart === "linechart") {
+    chartComponent = <LineChart data={dataLine} />;
+  }
+
+  const fetchBotData = async () => {
+    store?.startLoading();
+    const data = searchText.length > 0 ? { name: searchText } : {};
+    try {
+      const res = await getBots(data);
+      store?.stopLoading();
+      setBotList(res?.data?.result?.data.map((bot) => bot.name));
+    } catch (err) {
+      store?.stopLoading();
+      toast.error(err.message);
+    }
+  };
+
+  // const handleSearchInputChange = (
+  //   event: React.ChangeEvent<HTMLInputElement>
+  // ) => {
+  //   const { value } = event.target;
+  //   setSearchText(value);
+
+  //   const lowercasedValue = value.toLowerCase();
+  //   const suggestions: AutocompleteItem[] = botList.map((name) => ({
+  //     value: name,
+  //   }));
+
+  //   setAutocompleteSuggestions(
+  //     suggestions.filter((item) =>
+  //       item.value.toLowerCase().includes(lowercasedValue)
+  //     )
+  //   );
+  // };
+
+  // const handleSearchSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+  //   event.preventDefault();
+  // };
+
+  const handleSearchSubmitFile = async (
+    event: React.FormEvent<HTMLFormElement>
+  ) => {
+    event.preventDefault();
+    setDropdown(false);
+    setFinal(selected);
+
+    const shortDate = convertToShortDate(selected);
+    localStorage.setItem("shortDate", shortDate);
+    localStorage.setItem("data_time", selected);
+
+    const file = reverseFormatDate(selected);
+    localStorage.setItem("file", file);
+
+    func();
+  };
+
+  const handleSearchInputChangeFile = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { value } = event.target;
+    setSelected(value);
+
+    const lowercasedValue = value.toLowerCase();
+    const apiEndpoint = getFilesData();
+    let data = [];
+
+    try {
+      const response = await apiEndpoint;
+      data = response.data.result;
+    } catch (error) {
+      console.error("Error toggling:", error);
+    }
+
+    const suggestions: AutocompleteItem[] = data.map((name) => ({
+      value: formatDate(name),
+    }));
+
+    setAutocompleteSuggestionsFile(
+      suggestions.filter((item) =>
+        item.value.toLowerCase().includes(lowercasedValue)
+      )
+    );
+  };
+
+  const handleAutocompleteItemClick = (value) => {
+    setSelected(value);
+    setDropdown(false);
+  };
+
+  return (
+    <div>
+      <MDBRow className="my-3">
+        <MDBCol>
+          <MDBDropdown>
+            <MDBDropdownToggle
+              caret="true"
+              color="primary"
+              style={{ cursor: "pointer" }}
+            >
+              {dropdownLabel}
+            </MDBDropdownToggle>
+            <MDBDropdownMenu style={{ width: "inherit" }}>
+              <MDBDropdownItem
+                className="p-2"
+                onClick={() => handleChartChange("barchart", "Bar Chart")}
+                style={{ cursor: "pointer" }}
+              >
+                Bar Chart
+              </MDBDropdownItem>
+              <MDBDropdownItem
+                className="p-2"
+                onClick={() => handleChartChange("piechart", "Pie Chart")}
+                style={{ cursor: "pointer" }}
+              >
+                Pie Chart
+              </MDBDropdownItem>
+              <MDBDropdownItem
+                className="p-2"
+                onClick={() => handleChartChange("linechart", "Line Chart")}
+                style={{ cursor: "pointer" }}
+              >
+                Line Chart
+              </MDBDropdownItem>
+            </MDBDropdownMenu>
+          </MDBDropdown>
+        </MDBCol>
+        {/* <MDBCol className="mx-3">
+          <form
+            className="d-flex input-group w-auto"
+            onSubmit={handleSearchSubmit}
+          >
+            <input
+              type="search"
+              className="form-control"
+              placeholder="Search Bot Name"
+              aria-label="Search"
+              value={searchText}
+              onChange={handleSearchInputChange}
+            />
+            <MDBBtn color="primary" type="submit">
+              Search
+            </MDBBtn>
+          </form>
+          {autocompleteSuggestions.length > 0 && (
+            <ul className={`autocomplete-dropdown ${theme}-dropdown`}>
+              {autocompleteSuggestions.map((item) => (
+                <li key={item.value} onClick={() => setSearchText(item.value)}>
+                  {item.value}
+                </li>
+              ))}
+            </ul>
+          )}
+        </MDBCol> */}
+        <MDBCol className="mx-3">
+          <form
+            className="d-flex input-group w-auto"
+            onSubmit={handleSearchSubmitFile}
+          >
+            <input
+              type="search"
+              className="form-control"
+              placeholder="Search Date"
+              aria-label="Search"
+              value={selected}
+              onChange={handleSearchInputChangeFile}
+            />
+            <MDBBtn color="primary" type="submit">
+              Search
+            </MDBBtn>
+          </form>
+          {dropdown && autocompleteSuggestionsFile.length > 0 && (
+            <ul className={`autocomplete-dropdown ${theme}-dropdown`}>
+              {autocompleteSuggestionsFile.map((item) => (
+                <li
+                  key={item.value}
+                  onClick={() => handleAutocompleteItemClick(item.value)}
+                >
+                  {item.value}
+                </li>
+              ))}
+            </ul>
+          )}
+        </MDBCol>
+      </MDBRow>
+      {chartComponent}
+    </div>
+  );
+};
+
+export default BroadcastTransformer;
diff --git a/src/pages/monitoring/broadcast-transformer/style.css b/src/pages/monitoring/broadcast-transformer/style.css
new file mode 100644
index 0000000..dc6b6c1
--- /dev/null
+++ b/src/pages/monitoring/broadcast-transformer/style.css
@@ -0,0 +1,25 @@
+/* Add a higher z-index to the autocomplete dropdown */
+.autocomplete-dropdown {
+  position: absolute;
+  z-index: 100;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  padding: 5px;
+  list-style: none;
+  max-height: 150px;
+  max-width: inherit;
+  overflow-y: auto;
+}
+
+.autocomplete-dropdown li {
+  cursor: pointer;
+  padding: 8px;
+}
+
+.autocomplete-dropdown li:hover {
+  background-color: #f0f0f0;
+}
+
+.dark-dropdown {
+  color: black ; 
+}
\ No newline at end of file
diff --git a/src/pages/monitoring/dummy.json b/src/pages/monitoring/dummy.json
deleted file mode 100644
index 9b4ad95..0000000
--- a/src/pages/monitoring/dummy.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-    "Kafka Topics": {
-      "broadcast-transformer": "7",
-      "com.odk.transformer": "17",
-      "generic-transformer": "0",
-      "notification-outbound": "35",
-      "outbound": "17",
-      "inbound-processed": "24",
-      "process-outbound": "52",
-      "telemetry": "14",
-      "outbound-processed": "0"
-    },
-    "UCI API": {
-      "ResolveUser": 1
-    },
-    "Inbound": {
-      "Data inserted in Cassandra": 1,
-      "Kafka topic push": 1
-    },
-    "Orchestrator": {
-      "Topic consumed from Kafka": 5,
-      "Notification pushed to Kafka": 5
-    },
-    "Broadcast Transformer": {
-      "Broadcast Processed": 5,
-      "Kafka Push to outbound": 5
-    },
-    "Outbound": {
-      "Saved data in cache": 5,
-      "Notification inserted in Cassandra": 5
-    }
-  }
-  
\ No newline at end of file
diff --git a/src/pages/monitoring/inbound/index.tsx b/src/pages/monitoring/inbound/index.tsx
new file mode 100644
index 0000000..6b7a6c4
--- /dev/null
+++ b/src/pages/monitoring/inbound/index.tsx
@@ -0,0 +1,321 @@
+import {
+  MDBBtn,
+  MDBCol,
+  MDBDropdown,
+  MDBDropdownItem,
+  MDBDropdownMenu,
+  MDBDropdownToggle,
+  MDBRow,
+} from "mdb-react-ui-kit";
+import BarChart from "../../../components/visualisation/bar";
+import React, { useEffect, useState } from "react";
+import { useStore } from "../../../store";
+import { getBots } from "../../../api/getBots";
+import { toast } from "react-hot-toast";
+import "./style.css";
+import PieChart from "../../../components/visualisation/pie";
+import LineChart from "../../../components/visualisation/line";
+// import { formatDate, reverseFormatDate } from "../../../utils/functions";
+import { fetchRealtime } from "../../../api/fetchRealtimeData";
+import { getFilesData } from "../../../api/getFiles";
+import { convertToShortDate, formatDate, reverseFormatDate } from "../../../utils/functions";
+
+interface AutocompleteItem {
+  value: string;
+}
+
+interface InboundProps extends React.HTMLAttributes<HTMLDivElement> {
+  theme: string;
+}
+
+export const Inbound: React.FC<InboundProps> = ({ theme }) => {
+  const [selectedChart, setSelectedChart] = useState("barchart");
+  const [dropdownLabel, setDropdownLabel] = useState("Select Chart");
+  const [searchText, setSearchText] = useState("");
+  // const [autocompleteSuggestions, setAutocompleteSuggestions] = useState<
+  //   AutocompleteItem[]
+  // >([]);
+  const [autocompleteSuggestionsFile, setAutocompleteSuggestionsFile] =
+    useState<AutocompleteItem[]>([]);
+  const [botList, setBotList] = useState([]);
+  const store: any = useStore();
+
+  const [selected, setSelected] = useState("");
+  const [dropdown, setDropdown] = useState(true);
+
+  const [InboundData, setInboundData] = useState([]);
+
+  const [final, setFinal] = useState("");
+
+  const func = async () => {
+    if (localStorage.getItem("file")) {
+      const file = localStorage.getItem("file");
+      console.log(file)
+      const apiEndpoint = fetchRealtime(file);
+      try {
+        const response = await apiEndpoint;
+        const res = JSON.parse(response.data.result);
+        setInboundData(res["Inbound".trim()] || {}); 
+        console.log(res)
+      } catch (error) {
+        console.error("Error toggling:", error);
+      }
+    } else if (final !== "") {
+      console.log(final)
+
+      const file = reverseFormatDate(final);
+      localStorage.setItem("file", file);
+
+      const shortDate = convertToShortDate(selected);
+      localStorage.setItem("shortDate", shortDate);
+      localStorage.setItem("data_time", selected);
+
+      const apiEndpoint = fetchRealtime(file);
+      try {
+        const response = await apiEndpoint;
+        const res = JSON.parse(response.data.result);
+        setInboundData(res["Inbound".trim()] || {}); 
+      } catch (error) {
+        console.error("Error toggling:", error);
+      }
+    }
+    fetchBotData();
+  };
+
+  useEffect(() => {
+    func();
+    // fetchBotData();
+  }, [final]);
+
+  const dataBar = {
+    labels: Object.keys(InboundData),
+    datasets: [
+      {
+        label: "Inbound",
+        data: Object.values(InboundData).map(Number),
+        backgroundColor: "rgba(75, 192, 192, 0.6)",
+      },
+    ],
+  };
+
+  const dataPie = {
+    labels: Object.keys(InboundData),
+    datasets: [
+      {
+        label: "Inbound",
+        data: Object.values(InboundData).map(Number),
+      },
+    ],
+  };
+
+  const dataLine = {
+    labels: Object.keys(InboundData),
+    datasets: [
+      {
+        label: "Inbound",
+        data: Object.values(InboundData).map(Number),
+        backgroundColor: "rgba(75, 192, 192, 0.6)",
+      },
+    ],
+  };
+
+  const handleChartChange = (value, label) => {
+    setSelectedChart(value);
+    setDropdownLabel(label);
+  };
+
+  let chartComponent;
+  if (selectedChart === "barchart") {
+    chartComponent = <BarChart data={dataBar}/>;
+  } else if (selectedChart === "piechart") {
+    // chartComponent = <PieChart data={dataPie} />;
+    chartComponent = <PieChart data={dataPie} />;
+  } else if (selectedChart === "linechart") {
+    chartComponent = <LineChart data={dataLine} />;
+  }
+
+  const fetchBotData = async () => {
+    store?.startLoading();
+    const data = searchText.length > 0 ? { name: searchText } : {};
+    try {
+      const res = await getBots(data);
+      store?.stopLoading();
+      setBotList(res?.data?.result?.data.map((bot) => bot.name));
+    } catch (err) {
+      store?.stopLoading();
+      toast.error(err.message);
+    }
+  };
+
+  // const handleSearchInputChange = (
+  //   event: React.ChangeEvent<HTMLInputElement>
+  // ) => {
+  //   const { value } = event.target;
+  //   setSearchText(value);
+
+  //   const lowercasedValue = value.toLowerCase();
+  //   const suggestions: AutocompleteItem[] = botList.map((name) => ({
+  //     value: name,
+  //   }));
+
+  //   setAutocompleteSuggestions(
+  //     suggestions.filter((item) =>
+  //       item.value.toLowerCase().includes(lowercasedValue)
+  //     )
+  //   );
+  // };
+
+  // const handleSearchSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+  //   event.preventDefault();
+  // };
+
+  const handleSearchSubmitFile = async (
+    event: React.FormEvent<HTMLFormElement>
+  ) => {
+    event.preventDefault();
+    setFinal(selected);
+
+    const shortDate = convertToShortDate(selected);
+    localStorage.setItem("shortDate", shortDate);
+    localStorage.setItem("data_time", selected);
+
+    const file = reverseFormatDate(selected);
+    localStorage.setItem("file", file);
+
+    func();
+  };
+
+  const handleSearchInputChangeFile = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { value } = event.target;
+    setSelected(value);
+
+    const lowercasedValue = value.toLowerCase();
+    const apiEndpoint = getFilesData();
+    let data = [];
+
+    try {
+      const response = await apiEndpoint;
+      data = response.data.result;
+    } catch (error) {
+      console.error("Error toggling:", error);
+    }
+
+    const suggestions: AutocompleteItem[] = data.map((name) => ({
+      value: formatDate(name),
+    }));
+
+    setAutocompleteSuggestionsFile(
+      suggestions.filter((item) =>
+        item.value.toLowerCase().includes(lowercasedValue)
+      )
+    );
+  };
+
+  const handleAutocompleteItemClick = (value) => {
+    setSelected(value);
+    setDropdown(false);
+  };
+
+  return (
+    <div>
+      <MDBRow className="my-3">
+        <MDBCol>
+          <MDBDropdown>
+            <MDBDropdownToggle
+              caret="true"
+              color="primary"
+              style={{ cursor: "pointer" }}
+            >
+              {dropdownLabel}
+            </MDBDropdownToggle>
+            <MDBDropdownMenu style={{ width: "inherit" }}>
+              <MDBDropdownItem
+                className="p-2"
+                onClick={() => handleChartChange("barchart", "Bar Chart")}
+                style={{ cursor: "pointer" }}
+              >
+                Bar Chart
+              </MDBDropdownItem>
+              <MDBDropdownItem
+                className="p-2"
+                onClick={() => handleChartChange("piechart", "Pie Chart")}
+                style={{ cursor: "pointer" }}
+              >
+                Pie Chart
+              </MDBDropdownItem>
+              <MDBDropdownItem
+                className="p-2"
+                onClick={() => handleChartChange("linechart", "Line Chart")}
+                style={{ cursor: "pointer" }}
+              >
+                Line Chart
+              </MDBDropdownItem>
+            </MDBDropdownMenu>
+          </MDBDropdown>
+        </MDBCol>
+        {/* <MDBCol className="mx-3">
+          <form
+            className="d-flex input-group w-auto"
+            onSubmit={handleSearchSubmit}
+          >
+            <input
+              type="search"
+              className="form-control"
+              placeholder="Search Bot Name"
+              aria-label="Search"
+              value={searchText}
+              onChange={handleSearchInputChange}
+            />
+            <MDBBtn color="primary" type="submit">
+              Search
+            </MDBBtn>
+          </form>
+          {autocompleteSuggestions.length > 0 && (
+            <ul className={`autocomplete-dropdown ${theme}-dropdown`}>
+              {autocompleteSuggestions.map((item) => (
+                <li key={item.value} onClick={() => setSearchText(item.value)}>
+                  {item.value}
+                </li>
+              ))}
+            </ul>
+          )}
+        </MDBCol> */}
+        <MDBCol className="mx-3">
+          <form
+            className="d-flex input-group w-auto"
+            onSubmit={handleSearchSubmitFile}
+          >
+            <input
+              type="search"
+              className="form-control"
+              placeholder="Search Date"
+              aria-label="Search"
+              value={selected}
+              onChange={handleSearchInputChangeFile}
+            />
+            <MDBBtn color="primary" type="submit">
+              Search
+            </MDBBtn>
+          </form>
+          {dropdown && autocompleteSuggestionsFile.length > 0 && (
+            <ul className={`autocomplete-dropdown ${theme}-dropdown`}>
+              {autocompleteSuggestionsFile.map((item) => (
+                <li
+                  key={item.value}
+                  onClick={() => handleAutocompleteItemClick(item.value)}
+                >
+                  {item.value}
+                </li>
+              ))}
+            </ul>
+          )}
+        </MDBCol>
+      </MDBRow>
+      {chartComponent}
+    </div>
+  );
+};
+
+export default Inbound;
diff --git a/src/pages/monitoring/inbound/style.css b/src/pages/monitoring/inbound/style.css
new file mode 100644
index 0000000..dc6b6c1
--- /dev/null
+++ b/src/pages/monitoring/inbound/style.css
@@ -0,0 +1,25 @@
+/* Add a higher z-index to the autocomplete dropdown */
+.autocomplete-dropdown {
+  position: absolute;
+  z-index: 100;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  padding: 5px;
+  list-style: none;
+  max-height: 150px;
+  max-width: inherit;
+  overflow-y: auto;
+}
+
+.autocomplete-dropdown li {
+  cursor: pointer;
+  padding: 8px;
+}
+
+.autocomplete-dropdown li:hover {
+  background-color: #f0f0f0;
+}
+
+.dark-dropdown {
+  color: black ; 
+}
\ No newline at end of file
diff --git a/src/pages/monitoring/kafka/index.tsx b/src/pages/monitoring/kafka/index.tsx
deleted file mode 100644
index 557c9e7..0000000
--- a/src/pages/monitoring/kafka/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import {BarChart} from "../../../components";
-import jsonData from '../dummy.json';
-
-const kafkaTopicsData = jsonData["Kafka Topics"];
-
-const data = {
-    labels: Object.keys(kafkaTopicsData),
-    datasets: [
-      {
-        label: "Kafka Topics",
-        data: Object.values(kafkaTopicsData).map(Number),
-        backgroundColor: "rgba(75, 192, 192, 0.6)",
-      },
-    ],
-};
-
-const Kafka = () => {
-  return <BarChart data={data} />;
-};
-
-export default Kafka;
\ No newline at end of file
diff --git a/src/pages/monitoring/logs/broadcast-transformer/index.tsx b/src/pages/monitoring/logs/broadcast-transformer/index.tsx
new file mode 100644
index 0000000..fdfd673
--- /dev/null
+++ b/src/pages/monitoring/logs/broadcast-transformer/index.tsx
@@ -0,0 +1,359 @@
+import React, { useEffect, useState } from "react";
+import {
+  MDBBtn,
+  MDBBtnGroup,
+  MDBCol,
+  MDBContainer,
+  MDBRow,
+} from "mdb-react-ui-kit";
+import "./style.css";
+import Ansi from "ansi-to-react";
+import { useStore } from "../../../../store";
+import toast from "react-hot-toast";
+import { getFilesData } from "../../../../api/getFiles";
+import { downloadLogData } from "../../../../api/downloadLog";
+import { downloadErrLogData } from "../../../../api/downloadErrLog";
+import { fetchServiceData } from "../../../../api/fetchService";
+import DatePicker from "react-datepicker";
+import { MDBIcon } from "mdb-react-ui-kit";
+
+interface DropdownItem {
+  value: number;
+}
+
+interface BroadcastTransformerLogsProps extends React.HTMLAttributes<HTMLDivElement> {
+  theme: string;
+}
+
+export const BroadcastTransformerLogs: React.FC<BroadcastTransformerLogsProps> = ({ theme }) => {
+  const store: any = useStore();
+  const [searchText, setSearchText] = useState<number>(0);
+  const [filterText, setFilterText] = useState<string>("");
+  const [filter, setFilter] = useState<boolean>(false);
+  const [autocompleteSuggestions, setAutocompleteSuggestions] = useState<
+    DropdownItem[]
+  >([]);
+  const [showDropdown, setShowDropdown] = useState<boolean>(false);
+  const [messageLines, setMessageLines] = useState<string[]>([]);
+  const [searchPerformed, setSearchPerformed] = useState<boolean>(false);
+  const [activeButton, setActiveButton] = useState<string>("normal");
+  const [flag, setFlag] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const maxLines = process.env.REACT_APP_MAX_LINES
+    ? parseInt(process.env.REACT_APP_MAX_LINES)
+    : 5000;
+
+  const [logdate, setLogDate] = useState<Date | null>(new Date());
+  const [date, setDate] = useState<string>();
+
+  function formatDateTo_dd_mm_yyyy(inputDate) {
+    const date = new Date(inputDate);
+
+    const day = String(date.getDate()).padStart(2, "0");
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const year = date.getFullYear();
+
+    return `${day}_${month}_${year}`;
+  }
+
+  const handleDateChange = (date: Date | null) => {
+    setLogDate(date);
+    let d = formatDateTo_dd_mm_yyyy(date);
+    setDate(d);
+  };
+
+  const fetchMessageData = async () => {
+    setFlag(false);
+    setIsLoading(true);
+    try {
+      let logData = "";
+      let responseType = activeButton === "normal" ? "logs" : "error"; 
+      const response = await fetchServiceData("broadcast-transformer", searchText, date);
+      logData = response.data.result[responseType]; 
+      const lines = logData.split("\n");
+      setMessageLines(lines);
+      setFlag(true);
+    } catch (error) {
+      console.error("Error reading the file:", error);
+    }
+    setIsLoading(false);
+  };
+  
+
+  const handleSearchInputChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { value } = event.target;
+    setSearchText(Number(value));
+
+    const data = [10, 100, 1000, 5000]; 
+    const uniqueData = Array.from(new Set(data)); 
+
+    const suggestions: DropdownItem[] = uniqueData.map((val) => ({
+      value: val,
+    }));
+
+    setAutocompleteSuggestions(suggestions.filter((item) => item.value));
+    setShowDropdown(true); 
+  };
+
+  const handleFilterInputChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { value } = event.target;
+    setFilterText(value);
+    setFilter(true);
+  };
+
+  const handleSearchSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setSearchPerformed(true);
+    setShowDropdown(false);
+    fetchMessageData();
+  };
+
+  const handleFilterSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    fetchMessageData();
+  };
+
+  const handleDropdownItemClick = (value: number) => {
+    setSearchText(value);
+    setShowDropdown(false);
+  };
+
+  const handleClick = (buttonName) => {
+    setActiveButton(buttonName);
+    fetchMessageData();
+  };
+
+  const handleDownload = async (activeButton,date) => {
+    let response;
+    if (activeButton === "normal") {
+      response = await downloadLogData("broadcast-transformer", date);
+    } else {
+      response = await downloadErrLogData("broadcast-transformer", date);
+    }
+    const responseData = response.data;
+    console.log(responseData);
+
+    const blob = new Blob([responseData], { type: "text/plain" });
+
+    const url = URL.createObjectURL(blob);
+
+    const tempAnchor = document.createElement("a");
+    tempAnchor.href = url;
+    const serviceName = "broadcast_transformer";
+    const filename = `${serviceName}_${date}.txt`;
+    tempAnchor.download = filename;
+    document.body.appendChild(tempAnchor);
+    tempAnchor.click();
+
+    document.body.removeChild(tempAnchor);
+
+    URL.revokeObjectURL(url);
+  };
+
+  useEffect(() => {
+    store?.startLoading();
+    getFilesData()
+      .then((res) => {
+        store?.stopLoading();
+      })
+      .catch((err) => {
+        store?.stopLoading();
+        toast.error(err.message);
+      });
+    
+    if (activeButton) {
+      fetchMessageData();
+    }
+
+    if (maxLines <= searchText) {
+      handleDownload(activeButton, date);
+    }
+  }, [activeButton, date,maxLines,searchText]); 
+  
+
+  return (
+    <MDBContainer className="mt-5 px-5">
+      <MDBRow className="my-3">
+        <MDBCol className="date-picker-container">
+          <MDBIcon icon="calendar-alt" className={`${theme}-icon`} />
+          <DatePicker
+            selected={logdate}
+            onChange={handleDateChange}
+            dateFormat="dd-MM-yyyy"
+            value={logdate.toLocaleDateString("en-GB")}
+            className="date-picker"
+          />
+        </MDBCol>
+        <MDBCol className="mx-3">
+          <form
+            className="d-flex input-group w-auto"
+            onSubmit={handleSearchSubmit}
+          >
+            <input
+              type="search"
+              className="form-control"
+              placeholder="Enter No. of lines"
+              aria-label="Search"
+              value={searchText === 0 ? "" : searchText}
+              onChange={handleSearchInputChange}
+            />
+            <MDBBtn color="primary" type="submit">
+              Search
+            </MDBBtn>
+          </form>
+          {showDropdown && autocompleteSuggestions.length > 0 && (
+            <ul className={`autocomplete-dropdown ${theme}-dropdown`}>
+              {autocompleteSuggestions.map((item) => (
+                <li
+                  key={item.value}
+                  onClick={() => handleDropdownItemClick(item.value)}
+                >
+                  {item.value}
+                </li>
+              ))}
+            </ul>
+          )}
+        </MDBCol>
+        <MDBCol className="d-flex justify-content-end">
+          <form
+            className="d-flex input-group w-auto"
+            onSubmit={handleFilterSubmit}
+          >
+            <input
+              type="search"
+              className="form-control"
+              placeholder="Filter"
+              aria-label="Filter"
+              value={filterText}
+              onChange={handleFilterInputChange}
+              disabled={messageLines.length === 0}
+            />
+            <MDBBtn color="primary" type="submit">
+              Filter
+            </MDBBtn>
+          </form>
+        </MDBCol>
+      </MDBRow>
+      {flag && searchPerformed && (
+        <MDBBtnGroup
+          style={{
+            width: "1000px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            margin: "auto",
+          }}
+        >
+          <MDBBtn
+            active={activeButton === "normal"}
+            onClick={() => handleClick("normal")}
+            style={{
+              backgroundColor:
+                activeButton === "normal" ? "#007BFF" : "#B0C4DE",
+              borderColor: "#007BFF",
+            }}
+          >
+            Normal Logs
+          </MDBBtn>
+          <MDBBtn
+            active={activeButton === "err"}
+            onClick={() => handleClick("err")}
+            style={{
+              backgroundColor: activeButton === "err" ? "#007BFF" : "#B0C4DE",
+              borderColor: "#007BFF",
+            }}
+          >
+            Error
+          </MDBBtn>
+        </MDBBtnGroup>
+      )}
+    {flag && searchPerformed && !isLoading && messageLines.length === 0 && (
+      <p style={{ textAlign: "center" }}>
+        No data available for selected date
+      </p>
+    )}
+
+      {!searchPerformed && (
+        <p style={{ textAlign: "center" }}>Please select a date</p>
+      )}
+      {searchPerformed && (
+        <MDBCol className="d-flex justify-content-center mt-2">
+          <MDBBtn
+            onClick={() => handleDownload(activeButton,date)}
+            style={{
+              backgroundColor: "#007BFF",
+              borderColor: "#007BFF",
+            }}
+          >
+            Download
+          </MDBBtn>
+        </MDBCol>
+      )}
+      {searchPerformed && maxLines > searchText && (
+        <div
+          style={{ maxHeight: "800px", overflowY: "scroll", padding: "15px" }}
+        >
+          {searchPerformed && (
+            <div
+              className="white-box"
+              style={{
+                background: "white",
+                color: "black",
+                padding: "15px",
+              }}
+            >
+              {!filter &&
+                activeButton === "normal" &&
+                messageLines.slice(0, searchText).map((line, index) => (
+                  <p key={index}>
+                    <Ansi>{line}</Ansi>
+                  </p>
+                ))}
+              {filter &&
+                activeButton === "normal" &&
+                messageLines
+                  .slice(0, searchText)
+                  .filter((line) => line.includes(filterText))
+                  .map((line, index) => (
+                    <p key={index}>
+                      <Ansi>{line}</Ansi>
+                    </p>
+                  ))}
+              {!filter &&
+                activeButton === "err" &&
+                messageLines.slice(0, searchText).map((line, index) => (
+                  <p key={index}>
+                    <Ansi>{line}</Ansi>
+                  </p>
+                ))}
+              {filter &&
+                activeButton === "err" &&
+                messageLines
+                  .slice(0, searchText)
+                  .filter((line) => line.includes(filterText))
+                  .map((line, index) => (
+                    <p key={index}>
+                      <Ansi>{line}</Ansi>
+                    </p>
+                  ))}
+            </div>
+          )}
+        </div>
+      )}
+      {searchPerformed && maxLines <= searchText && (
+        <div>
+          <p className="d-flex justify-content-center mt-2">
+            Too large to display!
+          </p>
+        </div>
+      )}
+    </MDBContainer>
+  );
+};
+
+export default BroadcastTransformerLogs;
diff --git a/src/pages/monitoring/logs/broadcast-transformer/style.css b/src/pages/monitoring/logs/broadcast-transformer/style.css
new file mode 100644
index 0000000..e730bd9
--- /dev/null
+++ b/src/pages/monitoring/logs/broadcast-transformer/style.css
@@ -0,0 +1,53 @@
+.autocomplete-dropdown {
+  position: absolute;
+  z-index: 100;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  padding: 5px;
+  list-style: none;
+  max-height: 150px;
+  min-width: 10%;
+  overflow-y: auto;
+}
+
+.autocomplete-dropdown li {
+  cursor: pointer;
+  padding: 8px;
+}
+
+.autocomplete-dropdown li:hover {
+  background-color: #f0f0f0;
+}
+
+.highlight {
+  background-color: yellow;
+}
+
+.date-picker-container {
+  z-index: 9999 !important;
+  position: relative;
+}
+
+.date-picker {
+  padding: 5px;
+  width: 120px;
+  cursor: pointer;
+}
+
+.light-icon {
+  position: absolute;
+  top: 50%;
+  left:-20px;
+  transform: translateY(-50%);
+  font-size: 18px;
+  color: #333;
+}
+
+.dark-icon {
+  position: absolute;
+  top: 50%;
+  left:-20px;
+  transform: translateY(-50%);
+  font-size: 18px;
+  color: white;
+}
diff --git a/src/pages/monitoring/logs/inbound/index.tsx b/src/pages/monitoring/logs/inbound/index.tsx
new file mode 100644
index 0000000..e0b77e6
--- /dev/null
+++ b/src/pages/monitoring/logs/inbound/index.tsx
@@ -0,0 +1,359 @@
+import React, { useEffect, useState } from "react";
+import {
+  MDBBtn,
+  MDBBtnGroup,
+  MDBCol,
+  MDBContainer,
+  MDBRow,
+} from "mdb-react-ui-kit";
+import "./style.css";
+import Ansi from "ansi-to-react";
+import { useStore } from "../../../../store";
+import toast from "react-hot-toast";
+import { getFilesData } from "../../../../api/getFiles";
+import { downloadLogData } from "../../../../api/downloadLog";
+import { downloadErrLogData } from "../../../../api/downloadErrLog";
+import { fetchServiceData } from "../../../../api/fetchService";
+import DatePicker from "react-datepicker";
+import { MDBIcon } from "mdb-react-ui-kit";
+
+interface DropdownItem {
+  value: number;
+}
+
+interface InboundLogsProps extends React.HTMLAttributes<HTMLDivElement> {
+  theme: string;
+}
+
+export const InboundLogs: React.FC<InboundLogsProps> = ({ theme }) => {
+  const store: any = useStore();
+  const [searchText, setSearchText] = useState<number>(0);
+  const [filterText, setFilterText] = useState<string>("");
+  const [filter, setFilter] = useState<boolean>(false);
+  const [autocompleteSuggestions, setAutocompleteSuggestions] = useState<
+    DropdownItem[]
+  >([]);
+  const [showDropdown, setShowDropdown] = useState<boolean>(false);
+  const [messageLines, setMessageLines] = useState<string[]>([]);
+  const [searchPerformed, setSearchPerformed] = useState<boolean>(false);
+  const [activeButton, setActiveButton] = useState<string>("normal");
+  const [flag, setFlag] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const maxLines = process.env.REACT_APP_MAX_LINES
+    ? parseInt(process.env.REACT_APP_MAX_LINES)
+    : 5000;
+
+  const [logdate, setLogDate] = useState<Date | null>(new Date());
+  const [date, setDate] = useState<string>();
+
+  function formatDateTo_dd_mm_yyyy(inputDate) {
+    const date = new Date(inputDate);
+
+    const day = String(date.getDate()).padStart(2, "0");
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const year = date.getFullYear();
+
+    return `${day}_${month}_${year}`;
+  }
+
+  const handleDateChange = (date: Date | null) => {
+    setLogDate(date);
+    let d = formatDateTo_dd_mm_yyyy(date);
+    setDate(d);
+  };
+
+  const fetchMessageData = async () => {
+    setFlag(false);
+    setIsLoading(true);
+    try {
+      let logData = "";
+      let responseType = activeButton === "normal" ? "logs" : "error"; 
+      const response = await fetchServiceData("inbound", searchText, date);
+      logData = response.data.result[responseType]; 
+      const lines = logData.split("\n");
+      setMessageLines(lines);
+      setFlag(true);
+    } catch (error) {
+      console.error("Error reading the file:", error);
+    }
+    setIsLoading(false);
+  };
+  
+
+  const handleSearchInputChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { value } = event.target;
+    setSearchText(Number(value));
+
+    const data = [10, 100, 1000, 5000]; 
+    const uniqueData = Array.from(new Set(data)); 
+
+    const suggestions: DropdownItem[] = uniqueData.map((val) => ({
+      value: val,
+    }));
+
+    setAutocompleteSuggestions(suggestions.filter((item) => item.value));
+    setShowDropdown(true); 
+  };
+
+  const handleFilterInputChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { value } = event.target;
+    setFilterText(value);
+    setFilter(true);
+  };
+
+  const handleSearchSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setSearchPerformed(true);
+    setShowDropdown(false);
+    fetchMessageData();
+  };
+
+  const handleFilterSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    fetchMessageData();
+  };
+
+  const handleDropdownItemClick = (value: number) => {
+    setSearchText(value);
+    setShowDropdown(false);
+  };
+
+  const handleClick = (buttonName) => {
+    setActiveButton(buttonName);
+    fetchMessageData();
+  };
+
+  const handleDownload = async (activeButton,date) => {
+    let response;
+    if (activeButton === "normal") {
+      response = await downloadLogData("inbound", date);
+    } else {
+      response = await downloadErrLogData("inbound", date);
+    }
+    const responseData = response.data;
+    console.log(responseData);
+
+    const blob = new Blob([responseData], { type: "text/plain" });
+
+    const url = URL.createObjectURL(blob);
+
+    const tempAnchor = document.createElement("a");
+    tempAnchor.href = url;
+    const serviceName = "inbound";
+    const filename = `${serviceName}_${date}.txt`;
+    tempAnchor.download = filename;
+    document.body.appendChild(tempAnchor);
+    tempAnchor.click();
+
+    document.body.removeChild(tempAnchor);
+
+    URL.revokeObjectURL(url);
+  };
+
+  useEffect(() => {
+    store?.startLoading();
+    getFilesData()
+      .then((res) => {
+        store?.stopLoading();
+      })
+      .catch((err) => {
+        store?.stopLoading();
+        toast.error(err.message);
+      });
+    
+    if (activeButton) {
+      fetchMessageData();
+    }
+
+    if (maxLines <= searchText) {
+      handleDownload(activeButton, date);
+    }
+  }, [activeButton, date,maxLines,searchText]); 
+  
+
+  return (
+    <MDBContainer className="mt-5 px-5">
+      <MDBRow className="my-3">
+        <MDBCol className="date-picker-container">
+          <MDBIcon icon="calendar-alt" className={`${theme}-icon`} />
+          <DatePicker
+            selected={logdate}
+            onChange={handleDateChange}
+            dateFormat="dd-MM-yyyy"
+            value={logdate.toLocaleDateString("en-GB")}
+            className="date-picker"
+          />
+        </MDBCol>
+        <MDBCol className="mx-3">
+          <form
+            className="d-flex input-group w-auto"
+            onSubmit={handleSearchSubmit}
+          >
+            <input
+              type="search"
+              className="form-control"
+              placeholder="Enter No. of lines"
+              aria-label="Search"
+              value={searchText === 0 ? "" : searchText}
+              onChange={handleSearchInputChange}
+            />
+            <MDBBtn color="primary" type="submit">
+              Search
+            </MDBBtn>
+          </form>
+          {showDropdown && autocompleteSuggestions.length > 0 && (
+            <ul className={`autocomplete-dropdown ${theme}-dropdown`}>
+              {autocompleteSuggestions.map((item) => (
+                <li
+                  key={item.value}
+                  onClick={() => handleDropdownItemClick(item.value)}
+                >
+                  {item.value}
+                </li>
+              ))}
+            </ul>
+          )}
+        </MDBCol>
+        <MDBCol className="d-flex justify-content-end">
+          <form
+            className="d-flex input-group w-auto"
+            onSubmit={handleFilterSubmit}
+          >
+            <input
+              type="search"
+              className="form-control"
+              placeholder="Filter"
+              aria-label="Filter"
+              value={filterText}
+              onChange={handleFilterInputChange}
+              disabled={messageLines.length === 0}
+            />
+            <MDBBtn color="primary" type="submit">
+              Filter
+            </MDBBtn>
+          </form>
+        </MDBCol>
+      </MDBRow>
+      {flag && searchPerformed && (
+        <MDBBtnGroup
+          style={{
+            width: "1000px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            margin: "auto",
+          }}
+        >
+          <MDBBtn
+            active={activeButton === "normal"}
+            onClick={() => handleClick("normal")}
+            style={{
+              backgroundColor:
+                activeButton === "normal" ? "#007BFF" : "#B0C4DE",
+              borderColor: "#007BFF",
+            }}
+          >
+            Normal Logs
+          </MDBBtn>
+          <MDBBtn
+            active={activeButton === "err"}
+            onClick={() => handleClick("err")}
+            style={{
+              backgroundColor: activeButton === "err" ? "#007BFF" : "#B0C4DE",
+              borderColor: "#007BFF",
+            }}
+          >
+            Error
+          </MDBBtn>
+        </MDBBtnGroup>
+      )}
+    {flag && searchPerformed && !isLoading && messageLines.length === 0 && (
+      <p style={{ textAlign: "center" }}>
+        No data available for selected date
+      </p>
+    )}
+
+      {!searchPerformed && (
+        <p style={{ textAlign: "center" }}>Please select a date</p>
+      )}
+      {searchPerformed && (
+        <MDBCol className="d-flex justify-content-center mt-2">
+          <MDBBtn
+            onClick={() => handleDownload(activeButton,date)}
+            style={{
+              backgroundColor: "#007BFF",
+              borderColor: "#007BFF",
+            }}
+          >
+            Download
+          </MDBBtn>
+        </MDBCol>
+      )}
+      {searchPerformed && maxLines > searchText && (
+        <div
+          style={{ maxHeight: "800px", overflowY: "scroll", padding: "15px" }}
+        >
+          {searchPerformed && (
+            <div
+              className="white-box"
+              style={{
+                background: "white",
+                color: "black",
+                padding: "15px",
+              }}
+            >
+              {!filter &&
+                activeButton === "normal" &&
+                messageLines.slice(0, searchText).map((line, index) => (
+                  <p key={index}>
+                    <Ansi>{line}</Ansi>
+                  </p>
+                ))}
+              {filter &&
+                activeButton === "normal" &&
+                messageLines
+                  .slice(0, searchText)
+                  .filter((line) => line.includes(filterText))
+                  .map((line, index) => (
+                    <p key={index}>
+                      <Ansi>{line}</Ansi>
+                    </p>
+                  ))}
+              {!filter &&
+                activeButton === "err" &&
+                messageLines.slice(0, searchText).map((line, index) => (
+                  <p key={index}>
+                    <Ansi>{line}</Ansi>
+                  </p>
+                ))}
+              {filter &&
+                activeButton === "err" &&
+                messageLines
+                  .slice(0, searchText)
+                  .filter((line) => line.includes(filterText))
+                  .map((line, index) => (
+                    <p key={index}>
+                      <Ansi>{line}</Ansi>
+                    </p>
+                  ))}
+            </div>
+          )}
+        </div>
+      )}
+      {searchPerformed && maxLines <= searchText && (
+        <div>
+          <p className="d-flex justify-content-center mt-2">
+            Too large to display!
+          </p>
+        </div>
+      )}
+    </MDBContainer>
+  );
+};
+
+export default InboundLogs;
diff --git a/src/pages/monitoring/logs/inbound/style.css b/src/pages/monitoring/logs/inbound/style.css
new file mode 100644
index 0000000..e730bd9
--- /dev/null
+++ b/src/pages/monitoring/logs/inbound/style.css
@@ -0,0 +1,53 @@
+.autocomplete-dropdown {
+  position: absolute;
+  z-index: 100;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  padding: 5px;
+  list-style: none;
+  max-height: 150px;
+  min-width: 10%;
+  overflow-y: auto;
+}
+
+.autocomplete-dropdown li {
+  cursor: pointer;
+  padding: 8px;
+}
+
+.autocomplete-dropdown li:hover {
+  background-color: #f0f0f0;
+}
+
+.highlight {
+  background-color: yellow;
+}
+
+.date-picker-container {
+  z-index: 9999 !important;
+  position: relative;
+}
+
+.date-picker {
+  padding: 5px;
+  width: 120px;
+  cursor: pointer;
+}
+
+.light-icon {
+  position: absolute;
+  top: 50%;
+  left:-20px;
+  transform: translateY(-50%);
+  font-size: 18px;
+  color: #333;
+}
+
+.dark-icon {
+  position: absolute;
+  top: 50%;
+  left:-20px;
+  transform: translateY(-50%);
+  font-size: 18px;
+  color: white;
+}
diff --git a/src/pages/monitoring/logs/orchestrator/index.tsx b/src/pages/monitoring/logs/orchestrator/index.tsx
new file mode 100644
index 0000000..d99bc33
--- /dev/null
+++ b/src/pages/monitoring/logs/orchestrator/index.tsx
@@ -0,0 +1,358 @@
+import React, { useEffect, useState } from "react";
+import {
+  MDBBtn,
+  MDBBtnGroup,
+  MDBCol,
+  MDBContainer,
+  MDBRow,
+} from "mdb-react-ui-kit";
+import "./style.css";
+import Ansi from "ansi-to-react";
+import { useStore } from "../../../../store";
+import toast from "react-hot-toast";
+import { getFilesData } from "../../../../api/getFiles";
+import { downloadLogData } from "../../../../api/downloadLog";
+import { downloadErrLogData } from "../../../../api/downloadErrLog";
+import { fetchServiceData } from "../../../../api/fetchService";
+import DatePicker from "react-datepicker";
+import { MDBIcon } from "mdb-react-ui-kit";
+
+interface DropdownItem {
+  value: number;
+}
+
+interface OrchestratorLogsProps extends React.HTMLAttributes<HTMLDivElement> {
+  theme: string;
+}
+
+export const OrchestratorLogs: React.FC<OrchestratorLogsProps> = ({ theme }) => {
+  const store: any = useStore();
+  const [searchText, setSearchText] = useState<number>(0);
+  const [filterText, setFilterText] = useState<string>("");
+  const [filter, setFilter] = useState<boolean>(false);
+  const [autocompleteSuggestions, setAutocompleteSuggestions] = useState<
+    DropdownItem[]
+  >([]);
+  const [showDropdown, setShowDropdown] = useState<boolean>(false);
+  const [messageLines, setMessageLines] = useState<string[]>([]);
+  const [searchPerformed, setSearchPerformed] = useState<boolean>(false);
+  const [activeButton, setActiveButton] = useState<string>("normal");
+  const [flag, setFlag] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const maxLines = process.env.REACT_APP_MAX_LINES
+    ? parseInt(process.env.REACT_APP_MAX_LINES)
+    : 5000;
+
+  const [logdate, setLogDate] = useState<Date | null>(new Date());
+  const [date, setDate] = useState<string>();
+
+  function formatDateTo_dd_mm_yyyy(inputDate) {
+    const date = new Date(inputDate);
+
+    const day = String(date.getDate()).padStart(2, "0");
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const year = date.getFullYear();
+
+    return `${day}_${month}_${year}`;
+  }
+
+  const handleDateChange = (date: Date | null) => {
+    setLogDate(date);
+    let d = formatDateTo_dd_mm_yyyy(date);
+    setDate(d);
+  };
+
+  const fetchMessageData = async () => {
+    setFlag(false);
+    setIsLoading(true);
+    try {
+      let logData = "";
+      let responseType = activeButton === "normal" ? "logs" : "error"; 
+      const response = await fetchServiceData("orchestrator", searchText, date);
+      logData = response.data.result[responseType]; 
+      const lines = logData.split("\n");
+      setMessageLines(lines);
+      setFlag(true);
+    } catch (error) {
+      console.error("Error reading the file:", error);
+    }
+    setIsLoading(false);
+  };
+  
+
+  const handleSearchInputChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { value } = event.target;
+    setSearchText(Number(value));
+
+    const data = [10, 100, 1000, 5000]; 
+    const uniqueData = Array.from(new Set(data)); 
+
+    const suggestions: DropdownItem[] = uniqueData.map((val) => ({
+      value: val,
+    }));
+
+    setAutocompleteSuggestions(suggestions.filter((item) => item.value));
+    setShowDropdown(true); 
+  };
+
+  const handleFilterInputChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { value } = event.target;
+    setFilterText(value);
+    setFilter(true);
+  };
+
+  const handleSearchSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setSearchPerformed(true);
+    setShowDropdown(false);
+    fetchMessageData();
+  };
+
+  const handleFilterSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    fetchMessageData();
+  };
+
+  const handleDropdownItemClick = (value: number) => {
+    setSearchText(value);
+    setShowDropdown(false);
+  };
+
+  const handleClick = (buttonName) => {
+    setActiveButton(buttonName);
+    fetchMessageData();
+  };
+
+  const handleDownload = async (activeButton,date) => {
+    let response;
+    if (activeButton === "normal") {
+      response = await downloadLogData("orchestrator", date);
+    } else {
+      response = await downloadErrLogData("orchestrator", date);
+    }
+    const responseData = response.data;
+    console.log(responseData);
+
+    const blob = new Blob([responseData], { type: "text/plain" });
+
+    const url = URL.createObjectURL(blob);
+
+    const tempAnchor = document.createElement("a");
+    tempAnchor.href = url;
+    const serviceName = "orchestrator";
+    const filename = `${serviceName}_${date}.txt`;
+    tempAnchor.download = filename;
+    document.body.appendChild(tempAnchor);
+    tempAnchor.click();
+
+    document.body.removeChild(tempAnchor);
+
+    URL.revokeObjectURL(url);
+  };
+
+  useEffect(() => {
+    store?.startLoading();
+    getFilesData()
+      .then((res) => {
+        store?.stopLoading();
+      })
+      .catch((err) => {
+        store?.stopLoading();
+        toast.error(err.message);
+      });
+    
+    if (activeButton) {
+      fetchMessageData();
+    }
+
+    if (maxLines <= searchText) {
+      handleDownload(activeButton, date);
+    }
+  }, [activeButton, date,maxLines,searchText]); 
+
+  return (
+    <MDBContainer className="mt-5 px-5">
+      <MDBRow className="my-3">
+        <MDBCol className="date-picker-container">
+          <MDBIcon icon="calendar-alt" className={`${theme}-icon`} />
+          <DatePicker
+            selected={logdate}
+            onChange={handleDateChange}
+            dateFormat="dd-MM-yyyy"
+            value={logdate.toLocaleDateString("en-GB")}
+            className="date-picker"
+          />
+        </MDBCol>
+        <MDBCol className="mx-3">
+          <form
+            className="d-flex input-group w-auto"
+            onSubmit={handleSearchSubmit}
+          >
+            <input
+              type="search"
+              className="form-control"
+              placeholder="Enter No. of lines"
+              aria-label="Search"
+              value={searchText === 0 ? "" : searchText}
+              onChange={handleSearchInputChange}
+            />
+            <MDBBtn color="primary" type="submit">
+              Search
+            </MDBBtn>
+          </form>
+          {showDropdown && autocompleteSuggestions.length > 0 && (
+            <ul className={`autocomplete-dropdown ${theme}-dropdown`}>
+              {autocompleteSuggestions.map((item) => (
+                <li
+                  key={item.value}
+                  onClick={() => handleDropdownItemClick(item.value)}
+                >
+                  {item.value}
+                </li>
+              ))}
+            </ul>
+          )}
+        </MDBCol>
+        <MDBCol className="d-flex justify-content-end">
+          <form
+            className="d-flex input-group w-auto"
+            onSubmit={handleFilterSubmit}
+          >
+            <input
+              type="search"
+              className="form-control"
+              placeholder="Filter"
+              aria-label="Filter"
+              value={filterText}
+              onChange={handleFilterInputChange}
+              disabled={messageLines.length === 0}
+            />
+            <MDBBtn color="primary" type="submit">
+              Filter
+            </MDBBtn>
+          </form>
+        </MDBCol>
+      </MDBRow>
+      {flag && searchPerformed && (
+        <MDBBtnGroup
+          style={{
+            width: "1000px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            margin: "auto",
+          }}
+        >
+          <MDBBtn
+            active={activeButton === "normal"}
+            onClick={() => handleClick("normal")}
+            style={{
+              backgroundColor:
+                activeButton === "normal" ? "#007BFF" : "#B0C4DE",
+              borderColor: "#007BFF",
+            }}
+          >
+            Normal Logs
+          </MDBBtn>
+          <MDBBtn
+            active={activeButton === "err"}
+            onClick={() => handleClick("err")}
+            style={{
+              backgroundColor: activeButton === "err" ? "#007BFF" : "#B0C4DE",
+              borderColor: "#007BFF",
+            }}
+          >
+            Error
+          </MDBBtn>
+        </MDBBtnGroup>
+      )}
+    {flag && searchPerformed && !isLoading && messageLines.length === 0 && (
+      <p style={{ textAlign: "center" }}>
+        No data available for selected date
+      </p>
+    )}
+
+      {!searchPerformed && (
+        <p style={{ textAlign: "center" }}>Please select a date</p>
+      )}
+      {searchPerformed && (
+        <MDBCol className="d-flex justify-content-center mt-2">
+          <MDBBtn
+            onClick={() => handleDownload(activeButton,date)}
+            style={{
+              backgroundColor: "#007BFF",
+              borderColor: "#007BFF",
+            }}
+          >
+            Download
+          </MDBBtn>
+        </MDBCol>
+      )}
+      {searchPerformed && maxLines > searchText && (
+        <div
+          style={{ maxHeight: "800px", overflowY: "scroll", padding: "15px" }}
+        >
+          {searchPerformed && (
+            <div
+              className="white-box"
+              style={{
+                background: "white",
+                color: "black",
+                padding: "15px",
+              }}
+            >
+              {!filter &&
+                activeButton === "normal" &&
+                messageLines.slice(0, searchText).map((line, index) => (
+                  <p key={index}>
+                    <Ansi>{line}</Ansi>
+                  </p>
+                ))}
+              {filter &&
+                activeButton === "normal" &&
+                messageLines
+                  .slice(0, searchText)
+                  .filter((line) => line.includes(filterText))
+                  .map((line, index) => (
+                    <p key={index}>
+                      <Ansi>{line}</Ansi>
+                    </p>
+                  ))}
+              {!filter &&
+                activeButton === "err" &&
+                messageLines.slice(0, searchText).map((line, index) => (
+                  <p key={index}>
+                    <Ansi>{line}</Ansi>
+                  </p>
+                ))}
+              {filter &&
+                activeButton === "err" &&
+                messageLines
+                  .slice(0, searchText)
+                  .filter((line) => line.includes(filterText))
+                  .map((line, index) => (
+                    <p key={index}>
+                      <Ansi>{line}</Ansi>
+                    </p>
+                  ))}
+            </div>
+          )}
+        </div>
+      )}
+      {searchPerformed && maxLines <= searchText && (
+        <div>
+          <p className="d-flex justify-content-center mt-2">
+            Too large to display!
+          </p>
+        </div>
+      )}
+    </MDBContainer>
+  );
+};
+
+export default OrchestratorLogs;
diff --git a/src/pages/monitoring/logs/orchestrator/style.css b/src/pages/monitoring/logs/orchestrator/style.css
new file mode 100644
index 0000000..e730bd9
--- /dev/null
+++ b/src/pages/monitoring/logs/orchestrator/style.css
@@ -0,0 +1,53 @@
+.autocomplete-dropdown {
+  position: absolute;
+  z-index: 100;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  padding: 5px;
+  list-style: none;
+  max-height: 150px;
+  min-width: 10%;
+  overflow-y: auto;
+}
+
+.autocomplete-dropdown li {
+  cursor: pointer;
+  padding: 8px;
+}
+
+.autocomplete-dropdown li:hover {
+  background-color: #f0f0f0;
+}
+
+.highlight {
+  background-color: yellow;
+}
+
+.date-picker-container {
+  z-index: 9999 !important;
+  position: relative;
+}
+
+.date-picker {
+  padding: 5px;
+  width: 120px;
+  cursor: pointer;
+}
+
+.light-icon {
+  position: absolute;
+  top: 50%;
+  left:-20px;
+  transform: translateY(-50%);
+  font-size: 18px;
+  color: #333;
+}
+
+.dark-icon {
+  position: absolute;
+  top: 50%;
+  left:-20px;
+  transform: translateY(-50%);
+  font-size: 18px;
+  color: white;
+}
diff --git a/src/pages/monitoring/logs/outbound/index.tsx b/src/pages/monitoring/logs/outbound/index.tsx
new file mode 100644
index 0000000..b094424
--- /dev/null
+++ b/src/pages/monitoring/logs/outbound/index.tsx
@@ -0,0 +1,358 @@
+import React, { useEffect, useState } from "react";
+import {
+  MDBBtn,
+  MDBBtnGroup,
+  MDBCol,
+  MDBContainer,
+  MDBRow,
+} from "mdb-react-ui-kit";
+import "./style.css";
+import Ansi from "ansi-to-react";
+import { useStore } from "../../../../store";
+import toast from "react-hot-toast";
+import { getFilesData } from "../../../../api/getFiles";
+import { downloadLogData } from "../../../../api/downloadLog";
+import { downloadErrLogData } from "../../../../api/downloadErrLog";
+import { fetchServiceData } from "../../../../api/fetchService";
+import DatePicker from "react-datepicker";
+import { MDBIcon } from "mdb-react-ui-kit";
+
+interface DropdownItem {
+  value: number;
+}
+
+interface OutboundLogsProps extends React.HTMLAttributes<HTMLDivElement> {
+  theme: string;
+}
+
+export const OutboundLogs: React.FC<OutboundLogsProps> = ({ theme }) => {
+  const store: any = useStore();
+  const [searchText, setSearchText] = useState<number>(0);
+  const [filterText, setFilterText] = useState<string>("");
+  const [filter, setFilter] = useState<boolean>(false);
+  const [autocompleteSuggestions, setAutocompleteSuggestions] = useState<
+    DropdownItem[]
+  >([]);
+  const [showDropdown, setShowDropdown] = useState<boolean>(false);
+  const [messageLines, setMessageLines] = useState<string[]>([]);
+  const [searchPerformed, setSearchPerformed] = useState<boolean>(false);
+  const [activeButton, setActiveButton] = useState<string>("normal");
+  const [flag, setFlag] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const maxLines = process.env.REACT_APP_MAX_LINES
+    ? parseInt(process.env.REACT_APP_MAX_LINES)
+    : 5000;
+
+  const [logdate, setLogDate] = useState<Date | null>(new Date());
+  const [date, setDate] = useState<string>();
+
+  function formatDateTo_dd_mm_yyyy(inputDate) {
+    const date = new Date(inputDate);
+
+    const day = String(date.getDate()).padStart(2, "0");
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const year = date.getFullYear();
+
+    return `${day}_${month}_${year}`;
+  }
+
+  const handleDateChange = (date: Date | null) => {
+    setLogDate(date);
+    let d = formatDateTo_dd_mm_yyyy(date);
+    setDate(d);
+  };
+
+  const fetchMessageData = async () => {
+    setFlag(false);
+    setIsLoading(true);
+    try {
+      let logData = "";
+      let responseType = activeButton === "normal" ? "logs" : "error"; 
+      const response = await fetchServiceData("outbound", searchText, date);
+      logData = response.data.result[responseType]; 
+      const lines = logData.split("\n");
+      setMessageLines(lines);
+      setFlag(true);
+    } catch (error) {
+      console.error("Error reading the file:", error);
+    }
+    setIsLoading(false);
+  };
+  
+
+  const handleSearchInputChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { value } = event.target;
+    setSearchText(Number(value));
+
+    const data = [10, 100, 1000, 5000]; 
+    const uniqueData = Array.from(new Set(data)); 
+
+    const suggestions: DropdownItem[] = uniqueData.map((val) => ({
+      value: val,
+    }));
+
+    setAutocompleteSuggestions(suggestions.filter((item) => item.value));
+    setShowDropdown(true); 
+  };
+
+  const handleFilterInputChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { value } = event.target;
+    setFilterText(value);
+    setFilter(true);
+  };
+
+  const handleSearchSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setSearchPerformed(true);
+    setShowDropdown(false);
+    fetchMessageData();
+  };
+
+  const handleFilterSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    fetchMessageData();
+  };
+
+  const handleDropdownItemClick = (value: number) => {
+    setSearchText(value);
+    setShowDropdown(false);
+  };
+
+  const handleClick = (buttonName) => {
+    setActiveButton(buttonName);
+    fetchMessageData();
+  };
+
+  const handleDownload = async (activeButton,date) => {
+    let response;
+    if (activeButton === "normal") {
+      response = await downloadLogData("outbound", date);
+    } else {
+      response = await downloadErrLogData("outbound", date);
+    }
+    const responseData = response.data;
+    console.log(responseData);
+
+    const blob = new Blob([responseData], { type: "text/plain" });
+
+    const url = URL.createObjectURL(blob);
+
+    const tempAnchor = document.createElement("a");
+    tempAnchor.href = url;
+    const serviceName = "outbound";
+    const filename = `${serviceName}_${date}.txt`;
+    tempAnchor.download = filename;
+    document.body.appendChild(tempAnchor);
+    tempAnchor.click();
+
+    document.body.removeChild(tempAnchor);
+
+    URL.revokeObjectURL(url);
+  };
+
+  useEffect(() => {
+    store?.startLoading();
+    getFilesData()
+      .then((res) => {
+        store?.stopLoading();
+      })
+      .catch((err) => {
+        store?.stopLoading();
+        toast.error(err.message);
+      });
+    
+    if (activeButton) {
+      fetchMessageData();
+    }
+
+    if (maxLines <= searchText) {
+      handleDownload(activeButton, date);
+    }
+  }, [activeButton, date,maxLines,searchText]); 
+
+  return (
+    <MDBContainer className="mt-5 px-5">
+      <MDBRow className="my-3">
+        <MDBCol className="date-picker-container">
+          <MDBIcon icon="calendar-alt" className={`${theme}-icon`} />
+          <DatePicker
+            selected={logdate}
+            onChange={handleDateChange}
+            dateFormat="dd-MM-yyyy"
+            value={logdate.toLocaleDateString("en-GB")}
+            className="date-picker"
+          />
+        </MDBCol>
+        <MDBCol className="mx-3">
+          <form
+            className="d-flex input-group w-auto"
+            onSubmit={handleSearchSubmit}
+          >
+            <input
+              type="search"
+              className="form-control"
+              placeholder="Enter No. of lines"
+              aria-label="Search"
+              value={searchText === 0 ? "" : searchText}
+              onChange={handleSearchInputChange}
+            />
+            <MDBBtn color="primary" type="submit">
+              Search
+            </MDBBtn>
+          </form>
+          {showDropdown && autocompleteSuggestions.length > 0 && (
+            <ul className={`autocomplete-dropdown ${theme}-dropdown`}>
+              {autocompleteSuggestions.map((item) => (
+                <li
+                  key={item.value}
+                  onClick={() => handleDropdownItemClick(item.value)}
+                >
+                  {item.value}
+                </li>
+              ))}
+            </ul>
+          )}
+        </MDBCol>
+        <MDBCol className="d-flex justify-content-end">
+          <form
+            className="d-flex input-group w-auto"
+            onSubmit={handleFilterSubmit}
+          >
+            <input
+              type="search"
+              className="form-control"
+              placeholder="Filter"
+              aria-label="Filter"
+              value={filterText}
+              onChange={handleFilterInputChange}
+              disabled={messageLines.length === 0}
+            />
+            <MDBBtn color="primary" type="submit">
+              Filter
+            </MDBBtn>
+          </form>
+        </MDBCol>
+      </MDBRow>
+      {flag && searchPerformed && (
+        <MDBBtnGroup
+          style={{
+            width: "1000px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            margin: "auto",
+          }}
+        >
+          <MDBBtn
+            active={activeButton === "normal"}
+            onClick={() => handleClick("normal")}
+            style={{
+              backgroundColor:
+                activeButton === "normal" ? "#007BFF" : "#B0C4DE",
+              borderColor: "#007BFF",
+            }}
+          >
+            Normal Logs
+          </MDBBtn>
+          <MDBBtn
+            active={activeButton === "err"}
+            onClick={() => handleClick("err")}
+            style={{
+              backgroundColor: activeButton === "err" ? "#007BFF" : "#B0C4DE",
+              borderColor: "#007BFF",
+            }}
+          >
+            Error
+          </MDBBtn>
+        </MDBBtnGroup>
+      )}
+    {flag && searchPerformed && !isLoading && messageLines.length === 0 && (
+      <p style={{ textAlign: "center" }}>
+        No data available for selected date
+      </p>
+    )}
+
+      {!searchPerformed && (
+        <p style={{ textAlign: "center" }}>Please select a date</p>
+      )}
+      {searchPerformed && (
+        <MDBCol className="d-flex justify-content-center mt-2">
+          <MDBBtn
+            onClick={() => handleDownload(activeButton,date)}
+            style={{
+              backgroundColor: "#007BFF",
+              borderColor: "#007BFF",
+            }}
+          >
+            Download
+          </MDBBtn>
+        </MDBCol>
+      )}
+      {searchPerformed && maxLines > searchText && (
+        <div
+          style={{ maxHeight: "800px", overflowY: "scroll", padding: "15px" }}
+        >
+          {searchPerformed && (
+            <div
+              className="white-box"
+              style={{
+                background: "white",
+                color: "black",
+                padding: "15px",
+              }}
+            >
+              {!filter &&
+                activeButton === "normal" &&
+                messageLines.slice(0, searchText).map((line, index) => (
+                  <p key={index}>
+                    <Ansi>{line}</Ansi>
+                  </p>
+                ))}
+              {filter &&
+                activeButton === "normal" &&
+                messageLines
+                  .slice(0, searchText)
+                  .filter((line) => line.includes(filterText))
+                  .map((line, index) => (
+                    <p key={index}>
+                      <Ansi>{line}</Ansi>
+                    </p>
+                  ))}
+              {!filter &&
+                activeButton === "err" &&
+                messageLines.slice(0, searchText).map((line, index) => (
+                  <p key={index}>
+                    <Ansi>{line}</Ansi>
+                  </p>
+                ))}
+              {filter &&
+                activeButton === "err" &&
+                messageLines
+                  .slice(0, searchText)
+                  .filter((line) => line.includes(filterText))
+                  .map((line, index) => (
+                    <p key={index}>
+                      <Ansi>{line}</Ansi>
+                    </p>
+                  ))}
+            </div>
+          )}
+        </div>
+      )}
+      {searchPerformed && maxLines <= searchText && (
+        <div>
+          <p className="d-flex justify-content-center mt-2">
+            Too large to display!
+          </p>
+        </div>
+      )}
+    </MDBContainer>
+  );
+};
+
+export default OutboundLogs;
diff --git a/src/pages/monitoring/logs/outbound/style.css b/src/pages/monitoring/logs/outbound/style.css
new file mode 100644
index 0000000..e730bd9
--- /dev/null
+++ b/src/pages/monitoring/logs/outbound/style.css
@@ -0,0 +1,53 @@
+.autocomplete-dropdown {
+  position: absolute;
+  z-index: 100;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  padding: 5px;
+  list-style: none;
+  max-height: 150px;
+  min-width: 10%;
+  overflow-y: auto;
+}
+
+.autocomplete-dropdown li {
+  cursor: pointer;
+  padding: 8px;
+}
+
+.autocomplete-dropdown li:hover {
+  background-color: #f0f0f0;
+}
+
+.highlight {
+  background-color: yellow;
+}
+
+.date-picker-container {
+  z-index: 9999 !important;
+  position: relative;
+}
+
+.date-picker {
+  padding: 5px;
+  width: 120px;
+  cursor: pointer;
+}
+
+.light-icon {
+  position: absolute;
+  top: 50%;
+  left:-20px;
+  transform: translateY(-50%);
+  font-size: 18px;
+  color: #333;
+}
+
+.dark-icon {
+  position: absolute;
+  top: 50%;
+  left:-20px;
+  transform: translateY(-50%);
+  font-size: 18px;
+  color: white;
+}
diff --git a/src/pages/monitoring/logs/transformer/index.tsx b/src/pages/monitoring/logs/transformer/index.tsx
new file mode 100644
index 0000000..532e1b0
--- /dev/null
+++ b/src/pages/monitoring/logs/transformer/index.tsx
@@ -0,0 +1,358 @@
+import React, { useEffect, useState } from "react";
+import {
+  MDBBtn,
+  MDBBtnGroup,
+  MDBCol,
+  MDBContainer,
+  MDBRow,
+} from "mdb-react-ui-kit";
+import "./style.css";
+import Ansi from "ansi-to-react";
+import { useStore } from "../../../../store";
+import toast from "react-hot-toast";
+import { getFilesData } from "../../../../api/getFiles";
+import { downloadLogData } from "../../../../api/downloadLog";
+import { downloadErrLogData } from "../../../../api/downloadErrLog";
+import { fetchServiceData } from "../../../../api/fetchService";
+import DatePicker from "react-datepicker";
+import { MDBIcon } from "mdb-react-ui-kit";
+
+interface DropdownItem {
+  value: number;
+}
+
+interface TransformerLogsProps extends React.HTMLAttributes<HTMLDivElement> {
+  theme: string;
+}
+
+export const TransformerLogs: React.FC<TransformerLogsProps> = ({ theme }) => {
+  const store: any = useStore();
+  const [searchText, setSearchText] = useState<number>(0);
+  const [filterText, setFilterText] = useState<string>("");
+  const [filter, setFilter] = useState<boolean>(false);
+  const [autocompleteSuggestions, setAutocompleteSuggestions] = useState<
+    DropdownItem[]
+  >([]);
+  const [showDropdown, setShowDropdown] = useState<boolean>(false);
+  const [messageLines, setMessageLines] = useState<string[]>([]);
+  const [searchPerformed, setSearchPerformed] = useState<boolean>(false);
+  const [activeButton, setActiveButton] = useState<string>("normal");
+  const [flag, setFlag] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const maxLines = process.env.REACT_APP_MAX_LINES
+    ? parseInt(process.env.REACT_APP_MAX_LINES)
+    : 5000;
+
+  const [logdate, setLogDate] = useState<Date | null>(new Date());
+  const [date, setDate] = useState<string>();
+
+  function formatDateTo_dd_mm_yyyy(inputDate) {
+    const date = new Date(inputDate);
+
+    const day = String(date.getDate()).padStart(2, "0");
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const year = date.getFullYear();
+
+    return `${day}_${month}_${year}`;
+  }
+
+  const handleDateChange = (date: Date | null) => {
+    setLogDate(date);
+    let d = formatDateTo_dd_mm_yyyy(date);
+    setDate(d);
+  };
+
+  const fetchMessageData = async () => {
+    setFlag(false);
+    setIsLoading(true);
+    try {
+      let logData = "";
+      let responseType = activeButton === "normal" ? "logs" : "error"; 
+      const response = await fetchServiceData("transformer", searchText, date);
+      logData = response.data.result[responseType]; 
+      const lines = logData.split("\n");
+      setMessageLines(lines);
+      setFlag(true);
+    } catch (error) {
+      console.error("Error reading the file:", error);
+    }
+    setIsLoading(false);
+  };
+  
+
+  const handleSearchInputChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { value } = event.target;
+    setSearchText(Number(value));
+
+    const data = [10, 100, 1000, 5000]; 
+    const uniqueData = Array.from(new Set(data)); 
+
+    const suggestions: DropdownItem[] = uniqueData.map((val) => ({
+      value: val,
+    }));
+
+    setAutocompleteSuggestions(suggestions.filter((item) => item.value));
+    setShowDropdown(true); 
+  };
+
+  const handleFilterInputChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { value } = event.target;
+    setFilterText(value);
+    setFilter(true);
+  };
+
+  const handleSearchSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setSearchPerformed(true);
+    setShowDropdown(false);
+    fetchMessageData();
+  };
+
+  const handleFilterSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    fetchMessageData();
+  };
+
+  const handleDropdownItemClick = (value: number) => {
+    setSearchText(value);
+    setShowDropdown(false);
+  };
+
+  const handleClick = (buttonName) => {
+    setActiveButton(buttonName);
+    fetchMessageData();
+  };
+
+  const handleDownload = async (activeButton,date) => {
+    let response;
+    if (activeButton === "normal") {
+      response = await downloadLogData("transformer", date);
+    } else {
+      response = await downloadErrLogData("transformer", date);
+    }
+    const responseData = response.data;
+    console.log(responseData);
+
+    const blob = new Blob([responseData], { type: "text/plain" });
+
+    const url = URL.createObjectURL(blob);
+
+    const tempAnchor = document.createElement("a");
+    tempAnchor.href = url;
+    const serviceName = "transformer";
+    const filename = `${serviceName}_${date}.txt`;
+    tempAnchor.download = filename;
+    document.body.appendChild(tempAnchor);
+    tempAnchor.click();
+
+    document.body.removeChild(tempAnchor);
+
+    URL.revokeObjectURL(url);
+  };
+
+  useEffect(() => {
+    store?.startLoading();
+    getFilesData()
+      .then((res) => {
+        store?.stopLoading();
+      })
+      .catch((err) => {
+        store?.stopLoading();
+        toast.error(err.message);
+      });
+    
+    if (activeButton) {
+      fetchMessageData();
+    }
+
+    if (maxLines <= searchText) {
+      handleDownload(activeButton, date);
+    }
+  }, [activeButton, date,maxLines,searchText]); 
+
+  return (
+    <MDBContainer className="mt-5 px-5">
+      <MDBRow className="my-3">
+        <MDBCol className="date-picker-container">
+          <MDBIcon icon="calendar-alt" className={`${theme}-icon`} />
+          <DatePicker
+            selected={logdate}
+            onChange={handleDateChange}
+            dateFormat="dd-MM-yyyy"
+            value={logdate.toLocaleDateString("en-GB")}
+            className="date-picker"
+          />
+        </MDBCol>
+        <MDBCol className="mx-3">
+          <form
+            className="d-flex input-group w-auto"
+            onSubmit={handleSearchSubmit}
+          >
+            <input
+              type="search"
+              className="form-control"
+              placeholder="Enter No. of lines"
+              aria-label="Search"
+              value={searchText === 0 ? "" : searchText}
+              onChange={handleSearchInputChange}
+            />
+            <MDBBtn color="primary" type="submit">
+              Search
+            </MDBBtn>
+          </form>
+          {showDropdown && autocompleteSuggestions.length > 0 && (
+            <ul className={`autocomplete-dropdown ${theme}-dropdown`}>
+              {autocompleteSuggestions.map((item) => (
+                <li
+                  key={item.value}
+                  onClick={() => handleDropdownItemClick(item.value)}
+                >
+                  {item.value}
+                </li>
+              ))}
+            </ul>
+          )}
+        </MDBCol>
+        <MDBCol className="d-flex justify-content-end">
+          <form
+            className="d-flex input-group w-auto"
+            onSubmit={handleFilterSubmit}
+          >
+            <input
+              type="search"
+              className="form-control"
+              placeholder="Filter"
+              aria-label="Filter"
+              value={filterText}
+              onChange={handleFilterInputChange}
+              disabled={messageLines.length === 0}
+            />
+            <MDBBtn color="primary" type="submit">
+              Filter
+            </MDBBtn>
+          </form>
+        </MDBCol>
+      </MDBRow>
+      {flag && searchPerformed && (
+        <MDBBtnGroup
+          style={{
+            width: "1000px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            margin: "auto",
+          }}
+        >
+          <MDBBtn
+            active={activeButton === "normal"}
+            onClick={() => handleClick("normal")}
+            style={{
+              backgroundColor:
+                activeButton === "normal" ? "#007BFF" : "#B0C4DE",
+              borderColor: "#007BFF",
+            }}
+          >
+            Normal Logs
+          </MDBBtn>
+          <MDBBtn
+            active={activeButton === "err"}
+            onClick={() => handleClick("err")}
+            style={{
+              backgroundColor: activeButton === "err" ? "#007BFF" : "#B0C4DE",
+              borderColor: "#007BFF",
+            }}
+          >
+            Error
+          </MDBBtn>
+        </MDBBtnGroup>
+      )}
+    {flag && searchPerformed && !isLoading && messageLines.length === 0 && (
+      <p style={{ textAlign: "center" }}>
+        No data available for selected date
+      </p>
+    )}
+
+      {!searchPerformed && (
+        <p style={{ textAlign: "center" }}>Please select a date</p>
+      )}
+      {searchPerformed && (
+        <MDBCol className="d-flex justify-content-center mt-2">
+          <MDBBtn
+            onClick={() => handleDownload(activeButton,date)}
+            style={{
+              backgroundColor: "#007BFF",
+              borderColor: "#007BFF",
+            }}
+          >
+            Download
+          </MDBBtn>
+        </MDBCol>
+      )}
+      {searchPerformed && maxLines > searchText && (
+        <div
+          style={{ maxHeight: "800px", overflowY: "scroll", padding: "15px" }}
+        >
+          {searchPerformed && (
+            <div
+              className="white-box"
+              style={{
+                background: "white",
+                color: "black",
+                padding: "15px",
+              }}
+            >
+              {!filter &&
+                activeButton === "normal" &&
+                messageLines.slice(0, searchText).map((line, index) => (
+                  <p key={index}>
+                    <Ansi>{line}</Ansi>
+                  </p>
+                ))}
+              {filter &&
+                activeButton === "normal" &&
+                messageLines
+                  .slice(0, searchText)
+                  .filter((line) => line.includes(filterText))
+                  .map((line, index) => (
+                    <p key={index}>
+                      <Ansi>{line}</Ansi>
+                    </p>
+                  ))}
+              {!filter &&
+                activeButton === "err" &&
+                messageLines.slice(0, searchText).map((line, index) => (
+                  <p key={index}>
+                    <Ansi>{line}</Ansi>
+                  </p>
+                ))}
+              {filter &&
+                activeButton === "err" &&
+                messageLines
+                  .slice(0, searchText)
+                  .filter((line) => line.includes(filterText))
+                  .map((line, index) => (
+                    <p key={index}>
+                      <Ansi>{line}</Ansi>
+                    </p>
+                  ))}
+            </div>
+          )}
+        </div>
+      )}
+      {searchPerformed && maxLines <= searchText && (
+        <div>
+          <p className="d-flex justify-content-center mt-2">
+            Too large to display!
+          </p>
+        </div>
+      )}
+    </MDBContainer>
+  );
+};
+
+export default TransformerLogs;
diff --git a/src/pages/monitoring/logs/transformer/style.css b/src/pages/monitoring/logs/transformer/style.css
new file mode 100644
index 0000000..e730bd9
--- /dev/null
+++ b/src/pages/monitoring/logs/transformer/style.css
@@ -0,0 +1,53 @@
+.autocomplete-dropdown {
+  position: absolute;
+  z-index: 100;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  padding: 5px;
+  list-style: none;
+  max-height: 150px;
+  min-width: 10%;
+  overflow-y: auto;
+}
+
+.autocomplete-dropdown li {
+  cursor: pointer;
+  padding: 8px;
+}
+
+.autocomplete-dropdown li:hover {
+  background-color: #f0f0f0;
+}
+
+.highlight {
+  background-color: yellow;
+}
+
+.date-picker-container {
+  z-index: 9999 !important;
+  position: relative;
+}
+
+.date-picker {
+  padding: 5px;
+  width: 120px;
+  cursor: pointer;
+}
+
+.light-icon {
+  position: absolute;
+  top: 50%;
+  left:-20px;
+  transform: translateY(-50%);
+  font-size: 18px;
+  color: #333;
+}
+
+.dark-icon {
+  position: absolute;
+  top: 50%;
+  left:-20px;
+  transform: translateY(-50%);
+  font-size: 18px;
+  color: white;
+}
diff --git a/src/pages/monitoring/logs/uci-api/index.tsx b/src/pages/monitoring/logs/uci-api/index.tsx
new file mode 100644
index 0000000..03cc1dd
--- /dev/null
+++ b/src/pages/monitoring/logs/uci-api/index.tsx
@@ -0,0 +1,356 @@
+import React, { useEffect, useState } from "react";
+import {
+  MDBBtn,
+  MDBBtnGroup,
+  MDBCol,
+  MDBContainer,
+  MDBRow,
+} from "mdb-react-ui-kit";
+import "./style.css";
+import Ansi from "ansi-to-react";
+import { useStore } from "../../../../store";
+import toast from "react-hot-toast";
+import { getFilesData } from "../../../../api/getFiles";
+import { downloadLogData } from "../../../../api/downloadLog";
+import { downloadErrLogData } from "../../../../api/downloadErrLog";
+import { fetchServiceData } from "../../../../api/fetchService";
+import DatePicker from "react-datepicker";
+import { MDBIcon } from "mdb-react-ui-kit";
+
+interface DropdownItem {
+  value: number;
+}
+
+interface UCIAPIlogsProps extends React.HTMLAttributes<HTMLDivElement> {
+  theme: string;
+}
+
+export const UCIAPIlogs: React.FC<UCIAPIlogsProps> = ({ theme }) => {
+  const store: any = useStore();
+  const [searchText, setSearchText] = useState<number>(0);
+  const [filterText, setFilterText] = useState<string>("");
+  const [filter, setFilter] = useState<boolean>(false);
+  const [autocompleteSuggestions, setAutocompleteSuggestions] = useState<
+    DropdownItem[]
+  >([]);
+  const [showDropdown, setShowDropdown] = useState<boolean>(false);
+  const [messageLines, setMessageLines] = useState<string[]>([]);
+  const [searchPerformed, setSearchPerformed] = useState<boolean>(false);
+  const [activeButton, setActiveButton] = useState<string>("normal");
+  const [flag, setFlag] = useState<boolean>(false);
+  const [isLoading, setIsLoading] = useState<boolean>(false);
+
+  const maxLines = process.env.REACT_APP_MAX_LINES
+    ? parseInt(process.env.REACT_APP_MAX_LINES)
+    : 5000;
+
+  const [logdate, setLogDate] = useState<Date | null>(new Date());
+  const [date, setDate] = useState<string>();
+
+  function formatDateTo_dd_mm_yyyy(inputDate) {
+    const date = new Date(inputDate);
+
+    const day = String(date.getDate()).padStart(2, "0");
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const year = date.getFullYear();
+
+    return `${day}_${month}_${year}`;
+  }
+
+  const handleDateChange = (date: Date | null) => {
+    setLogDate(date);
+    let d = formatDateTo_dd_mm_yyyy(date);
+    setDate(d);
+  };
+
+  const fetchMessageData = async () => {
+    setFlag(false);
+    setIsLoading(true);
+    try {
+      let logData = "";
+      let responseType = activeButton === "normal" ? "logs" : "error";
+      const response = await fetchServiceData("uci-apis", searchText, date);
+      logData = response.data.result[responseType];
+      const lines = logData.split("\n");
+      setMessageLines(lines);
+      setFlag(true);
+    } catch (error) {
+      console.error("Error reading the file:", error);
+    }
+    setIsLoading(false);
+  };
+
+  const handleSearchInputChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { value } = event.target;
+    setSearchText(Number(value));
+
+    const data = [10, 100, 1000, 5000];
+    const uniqueData = Array.from(new Set(data));
+
+    const suggestions: DropdownItem[] = uniqueData.map((val) => ({
+      value: val,
+    }));
+
+    setAutocompleteSuggestions(suggestions.filter((item) => item.value));
+    setShowDropdown(true);
+  };
+
+  const handleFilterInputChange = (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { value } = event.target;
+    setFilterText(value);
+    setFilter(true);
+  };
+
+  const handleSearchSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setSearchPerformed(true);
+    setShowDropdown(false);
+    fetchMessageData();
+  };
+
+  const handleFilterSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    fetchMessageData();
+  };
+
+  const handleDropdownItemClick = (value: number) => {
+    setSearchText(value);
+    setShowDropdown(false);
+  };
+
+  const handleClick = (buttonName) => {
+    setActiveButton(buttonName);
+    fetchMessageData();
+  };
+
+  const handleDownload = async (activeButton, date) => {
+    let response;
+    if (activeButton === "normal") {
+      response = await downloadLogData("uci-apis", date);
+    } else {
+      response = await downloadErrLogData("uci-apis", date);
+    }
+    const responseData = response.data;
+    console.log(responseData);
+
+    const blob = new Blob([responseData], { type: "text/plain" });
+
+    const url = URL.createObjectURL(blob);
+
+    const tempAnchor = document.createElement("a");
+    tempAnchor.href = url;
+    const serviceName = "uci_api";
+    const filename = `${serviceName}_${date}.txt`;
+    tempAnchor.download = filename;
+    document.body.appendChild(tempAnchor);
+    tempAnchor.click();
+
+    document.body.removeChild(tempAnchor);
+
+    URL.revokeObjectURL(url);
+  };
+
+  useEffect(() => {
+    store?.startLoading();
+    getFilesData()
+      .then((res) => {
+        store?.stopLoading();
+      })
+      .catch((err) => {
+        store?.stopLoading();
+        toast.error(err.message);
+      });
+
+    if (activeButton) {
+      fetchMessageData();
+    }
+
+    if (maxLines <= searchText) {
+      handleDownload(activeButton, date);
+    }
+  }, [activeButton, date, maxLines, searchText]);
+  return (
+    <MDBContainer className="mt-5 px-5">
+      <MDBRow className="my-3">
+        <MDBCol className="date-picker-container">
+          <MDBIcon icon="calendar-alt" className={`${theme}-icon`} />
+          <DatePicker
+            selected={logdate}
+            onChange={handleDateChange}
+            dateFormat="dd-MM-yyyy"
+            value={logdate.toLocaleDateString("en-GB")}
+            className="date-picker"
+          />
+        </MDBCol>
+        <MDBCol className="mx-3">
+          <form
+            className="d-flex input-group w-auto"
+            onSubmit={handleSearchSubmit}
+          >
+            <input
+              type="search"
+              className="form-control"
+              placeholder="Enter No. of lines"
+              aria-label="Search"
+              value={searchText === 0 ? "" : searchText}
+              onChange={handleSearchInputChange}
+            />
+            <MDBBtn color="primary" type="submit">
+              Search
+            </MDBBtn>
+          </form>
+          {showDropdown && autocompleteSuggestions.length > 0 && (
+            <ul className={`autocomplete-dropdown ${theme}-dropdown`}>
+              {autocompleteSuggestions.map((item) => (
+                <li
+                  key={item.value}
+                  onClick={() => handleDropdownItemClick(item.value)}
+                >
+                  {item.value}
+                </li>
+              ))}
+            </ul>
+          )}
+        </MDBCol>
+        <MDBCol className="d-flex justify-content-end">
+          <form
+            className="d-flex input-group w-auto"
+            onSubmit={handleFilterSubmit}
+          >
+            <input
+              type="search"
+              className="form-control"
+              placeholder="Filter"
+              aria-label="Filter"
+              value={filterText}
+              onChange={handleFilterInputChange}
+              disabled={messageLines.length === 0}
+            />
+            <MDBBtn color="primary" type="submit">
+              Filter
+            </MDBBtn>
+          </form>
+        </MDBCol>
+      </MDBRow>
+      {flag && searchPerformed && (
+        <MDBBtnGroup
+          style={{
+            width: "1000px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            margin: "auto",
+          }}
+        >
+          <MDBBtn
+            active={activeButton === "normal"}
+            onClick={() => handleClick("normal")}
+            style={{
+              backgroundColor:
+                activeButton === "normal" ? "#007BFF" : "#B0C4DE",
+              borderColor: "#007BFF",
+            }}
+          >
+            Normal Logs
+          </MDBBtn>
+          <MDBBtn
+            active={activeButton === "err"}
+            onClick={() => handleClick("err")}
+            style={{
+              backgroundColor: activeButton === "err" ? "#007BFF" : "#B0C4DE",
+              borderColor: "#007BFF",
+            }}
+          >
+            Error
+          </MDBBtn>
+        </MDBBtnGroup>
+      )}
+      {flag && searchPerformed && !isLoading && messageLines.length === 0 && (
+        <p style={{ textAlign: "center" }}>
+          No data available for selected date
+        </p>
+      )}
+
+      {!searchPerformed && (
+        <p style={{ textAlign: "center" }}>Please select a date</p>
+      )}
+      {searchPerformed && (
+        <MDBCol className="d-flex justify-content-center mt-2">
+          <MDBBtn
+            onClick={() => handleDownload(activeButton, date)}
+            style={{
+              backgroundColor: "#007BFF",
+              borderColor: "#007BFF",
+            }}
+          >
+            Download
+          </MDBBtn>
+        </MDBCol>
+      )}
+      {searchPerformed && maxLines > searchText && (
+        <div
+          style={{ maxHeight: "800px", overflowY: "scroll", padding: "15px" }}
+        >
+          {searchPerformed && (
+            <div
+              className="white-box"
+              style={{
+                background: "white",
+                color: "black",
+                padding: "15px",
+              }}
+            >
+              {!filter &&
+                activeButton === "normal" &&
+                messageLines.slice(0, searchText).map((line, index) => (
+                  <p key={index}>
+                    <Ansi>{line}</Ansi>
+                  </p>
+                ))}
+              {filter &&
+                activeButton === "normal" &&
+                messageLines
+                  .slice(0, searchText)
+                  .filter((line) => line.includes(filterText))
+                  .map((line, index) => (
+                    <p key={index}>
+                      <Ansi>{line}</Ansi>
+                    </p>
+                  ))}
+              {!filter &&
+                activeButton === "err" &&
+                messageLines.slice(0, searchText).map((line, index) => (
+                  <p key={index}>
+                    <Ansi>{line}</Ansi>
+                  </p>
+                ))}
+              {filter &&
+                activeButton === "err" &&
+                messageLines
+                  .slice(0, searchText)
+                  .filter((line) => line.includes(filterText))
+                  .map((line, index) => (
+                    <p key={index}>
+                      <Ansi>{line}</Ansi>
+                    </p>
+                  ))}
+            </div>
+          )}
+        </div>
+      )}
+      {searchPerformed && maxLines <= searchText && (
+        <div>
+          <p className="d-flex justify-content-center mt-2">
+            Too large to display!
+          </p>
+        </div>
+      )}
+    </MDBContainer>
+  );
+};
+
+export default UCIAPIlogs;
diff --git a/src/pages/monitoring/logs/uci-api/style.css b/src/pages/monitoring/logs/uci-api/style.css
new file mode 100644
index 0000000..e730bd9
--- /dev/null
+++ b/src/pages/monitoring/logs/uci-api/style.css
@@ -0,0 +1,53 @@
+.autocomplete-dropdown {
+  position: absolute;
+  z-index: 100;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  padding: 5px;
+  list-style: none;
+  max-height: 150px;
+  min-width: 10%;
+  overflow-y: auto;
+}
+
+.autocomplete-dropdown li {
+  cursor: pointer;
+  padding: 8px;
+}
+
+.autocomplete-dropdown li:hover {
+  background-color: #f0f0f0;
+}
+
+.highlight {
+  background-color: yellow;
+}
+
+.date-picker-container {
+  z-index: 9999 !important;
+  position: relative;
+}
+
+.date-picker {
+  padding: 5px;
+  width: 120px;
+  cursor: pointer;
+}
+
+.light-icon {
+  position: absolute;
+  top: 50%;
+  left:-20px;
+  transform: translateY(-50%);
+  font-size: 18px;
+  color: #333;
+}
+
+.dark-icon {
+  position: absolute;
+  top: 50%;
+  left:-20px;
+  transform: translateY(-50%);
+  font-size: 18px;
+  color: white;
+}
diff --git a/src/pages/monitoring/orchestrator/index.tsx b/src/pages/monitoring/orchestrator/index.tsx
new file mode 100644
index 0000000..cea6e02
--- /dev/null
+++ b/src/pages/monitoring/orchestrator/index.tsx
@@ -0,0 +1,318 @@
+import {
+  MDBBtn,
+  MDBCol,
+  MDBDropdown,
+  MDBDropdownItem,
+  MDBDropdownMenu,
+  MDBDropdownToggle,
+  MDBRow,
+} from "mdb-react-ui-kit";
+import BarChart from "../../../components/visualisation/bar";
+import React, { useEffect, useState } from "react";
+import { useStore } from "../../../store";
+import { getBots } from "../../../api/getBots";
+import { toast } from "react-hot-toast";
+import "./style.css";
+import PieChart from "../../../components/visualisation/pie";
+import LineChart from "../../../components/visualisation/line";
+// import { formatDate, reverseFormatDate } from "../../../utils/functions";
+import { fetchRealtime } from "../../../api/fetchRealtimeData";
+import { getFilesData } from "../../../api/getFiles";
+import { convertToShortDate, formatDate, reverseFormatDate } from "../../../utils/functions";
+
+interface AutocompleteItem {
+  value: string;
+}
+
+interface OrchestratorProps extends React.HTMLAttributes<HTMLDivElement> {
+  theme: string;
+}
+
+export const Orchestrator: React.FC<OrchestratorProps> = ({ theme }) => {
+  const [selectedChart, setSelectedChart] = useState("barchart");
+  const [dropdownLabel, setDropdownLabel] = useState("Select Chart");
+  const [searchText, setSearchText] = useState("");
+  // const [autocompleteSuggestions, setAutocompleteSuggestions] = useState<
+  //   AutocompleteItem[]
+  // >([]);
+  const [autocompleteSuggestionsFile, setAutocompleteSuggestionsFile] =
+    useState<AutocompleteItem[]>([]);
+  const [botList, setBotList] = useState([]);
+  const store: any = useStore();
+
+  const [selected, setSelected] = useState("");
+  const [dropdown, setDropdown] = useState(true);
+
+  const [OrchestratorData, setOrchestratorData] = useState([]);
+
+  const [final, setFinal] = useState("");
+
+  const func = async () => {
+    if (localStorage.getItem("file")) {
+      const file = localStorage.getItem("file");
+      const apiEndpoint = fetchRealtime(file);
+      try {
+        const response = await apiEndpoint;
+        const res = JSON.parse(response.data.result);
+        setOrchestratorData(res["Orchestrator".trim()] || {}); 
+      } catch (error) {
+        console.error("Error toggling:", error);
+      }
+    } else if (final !== "") {
+      const file = reverseFormatDate(final);
+      localStorage.setItem("file", file);
+
+      const shortDate = convertToShortDate(selected);
+      localStorage.setItem("shortDate", shortDate);
+      localStorage.setItem("data_time", selected);
+
+      const apiEndpoint = fetchRealtime(file);
+      try {
+        const response = await apiEndpoint;
+        const res = JSON.parse(response.data.result);
+        setOrchestratorData(res["Orchestrator".trim()] || {}); 
+      } catch (error) {
+        console.error("Error toggling:", error);
+      }
+    }
+    fetchBotData();
+  };
+
+  useEffect(() => {
+    func();
+    // fetchBotData();
+  }, [final]);
+
+  const dataBar = {
+    labels: Object.keys(OrchestratorData),
+    datasets: [
+      {
+        label: "Orchestrator",
+        data: Object.values(OrchestratorData).map(Number),
+        backgroundColor: "rgba(75, 192, 192, 0.6)",
+      },
+    ],
+  };
+
+  const dataPie = {
+    labels: Object.keys(OrchestratorData),
+    datasets: [
+      {
+        label: "Orchestrator",
+        data: Object.values(OrchestratorData).map(Number),
+      },
+    ],
+  };
+
+  const dataLine = {
+    labels: Object.keys(OrchestratorData),
+    datasets: [
+      {
+        label: "Orchestrator",
+        data: Object.values(OrchestratorData).map(Number),
+        backgroundColor: "rgba(75, 192, 192, 0.6)",
+      },
+    ],
+  };
+
+  const handleChartChange = (value, label) => {
+    setSelectedChart(value);
+    setDropdownLabel(label);
+  };
+
+  let chartComponent;
+  if (selectedChart === "barchart") {
+    chartComponent = <BarChart data={dataBar} />;
+  } else if (selectedChart === "piechart") {
+    // chartComponent = <PieChart data={dataPie} />;
+    chartComponent = <PieChart data={dataPie} />;
+  } else if (selectedChart === "linechart") {
+    chartComponent = <LineChart data={dataLine} />;
+  }
+
+  const fetchBotData = async () => {
+    store?.startLoading();
+    const data = searchText.length > 0 ? { name: searchText } : {};
+    try {
+      const res = await getBots(data);
+      store?.stopLoading();
+      setBotList(res?.data?.result?.data.map((bot) => bot.name));
+    } catch (err) {
+      store?.stopLoading();
+      toast.error(err.message);
+    }
+  };
+
+  // const handleSearchInputChange = (
+  //   event: React.ChangeEvent<HTMLInputElement>
+  // ) => {
+  //   const { value } = event.target;
+  //   setSearchText(value);
+
+  //   const lowercasedValue = value.toLowerCase();
+  //   const suggestions: AutocompleteItem[] = botList.map((name) => ({
+  //     value: name,
+  //   }));
+
+  //   setAutocompleteSuggestions(
+  //     suggestions.filter((item) =>
+  //       item.value.toLowerCase().includes(lowercasedValue)
+  //     )
+  //   );
+  // };
+
+  // const handleSearchSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+  //   event.preventDefault();
+  // };
+
+  const handleSearchSubmitFile = async (
+    event: React.FormEvent<HTMLFormElement>
+  ) => {
+    event.preventDefault();
+    setDropdown(false);
+    setFinal(selected);
+
+    const shortDate = convertToShortDate(selected);
+    localStorage.setItem("shortDate", shortDate);
+    localStorage.setItem("data_time", selected);
+
+    const file = reverseFormatDate(selected);
+    localStorage.setItem("file", file);
+
+    func();
+  };
+
+  const handleSearchInputChangeFile = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { value } = event.target;
+    setSelected(value);
+
+    const lowercasedValue = value.toLowerCase();
+    const apiEndpoint = getFilesData();
+    let data = [];
+
+    try {
+      const response = await apiEndpoint;
+      data = response.data.result;
+    } catch (error) {
+      console.error("Error toggling:", error);
+    }
+
+    const suggestions: AutocompleteItem[] = data.map((name) => ({
+      value: formatDate(name),
+    }));
+
+    setAutocompleteSuggestionsFile(
+      suggestions.filter((item) =>
+        item.value.toLowerCase().includes(lowercasedValue)
+      )
+    );
+  };
+
+  const handleAutocompleteItemClick = (value) => {
+    setSelected(value);
+    setDropdown(false);
+  };
+
+  return (
+    <div>
+      <MDBRow className="my-3">
+        <MDBCol>
+          <MDBDropdown>
+            <MDBDropdownToggle
+              caret="true"
+              color="primary"
+              style={{ cursor: "pointer" }}
+            >
+              {dropdownLabel}
+            </MDBDropdownToggle>
+            <MDBDropdownMenu style={{ width: "inherit" }}>
+              <MDBDropdownItem
+                className="p-2"
+                onClick={() => handleChartChange("barchart", "Bar Chart")}
+                style={{ cursor: "pointer" }}
+              >
+                Bar Chart
+              </MDBDropdownItem>
+              <MDBDropdownItem
+                className="p-2"
+                onClick={() => handleChartChange("piechart", "Pie Chart")}
+                style={{ cursor: "pointer" }}
+              >
+                Pie Chart
+              </MDBDropdownItem>
+              <MDBDropdownItem
+                className="p-2"
+                onClick={() => handleChartChange("linechart", "Line Chart")}
+                style={{ cursor: "pointer" }}
+              >
+                Line Chart
+              </MDBDropdownItem>
+            </MDBDropdownMenu>
+          </MDBDropdown>
+        </MDBCol>
+        {/* <MDBCol className="mx-3">
+          <form
+            className="d-flex input-group w-auto"
+            onSubmit={handleSearchSubmit}
+          >
+            <input
+              type="search"
+              className="form-control"
+              placeholder="Search Bot Name"
+              aria-label="Search"
+              value={searchText}
+              onChange={handleSearchInputChange}
+            />
+            <MDBBtn color="primary" type="submit">
+              Search
+            </MDBBtn>
+          </form>
+          {autocompleteSuggestions.length > 0 && (
+            <ul className={`autocomplete-dropdown ${theme}-dropdown`}>
+              {autocompleteSuggestions.map((item) => (
+                <li key={item.value} onClick={() => setSearchText(item.value)}>
+                  {item.value}
+                </li>
+              ))}
+            </ul>
+          )}
+        </MDBCol> */}
+        <MDBCol className="mx-3">
+          <form
+            className="d-flex input-group w-auto"
+            onSubmit={handleSearchSubmitFile}
+          >
+            <input
+              type="search"
+              className="form-control"
+              placeholder="Search Date"
+              aria-label="Search"
+              value={selected}
+              onChange={handleSearchInputChangeFile}
+            />
+            <MDBBtn color="primary" type="submit">
+              Search
+            </MDBBtn>
+          </form>
+          {dropdown && autocompleteSuggestionsFile.length > 0 && (
+            <ul className={`autocomplete-dropdown ${theme}-dropdown`}>
+              {autocompleteSuggestionsFile.map((item) => (
+                <li
+                  key={item.value}
+                  onClick={() => handleAutocompleteItemClick(item.value)}
+                >
+                  {item.value}
+                </li>
+              ))}
+            </ul>
+          )}
+        </MDBCol>
+      </MDBRow>
+      {chartComponent}
+    </div>
+  );
+};
+
+export default Orchestrator;
diff --git a/src/pages/monitoring/orchestrator/style.css b/src/pages/monitoring/orchestrator/style.css
new file mode 100644
index 0000000..7b4f6f8
--- /dev/null
+++ b/src/pages/monitoring/orchestrator/style.css
@@ -0,0 +1,26 @@
+/* Add a higher z-index to the autocomplete dropdown */
+.autocomplete-dropdown {
+  position: absolute;
+  z-index: 100;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  padding: 5px;
+  list-style: none;
+  max-height: 150px;
+  max-width: inherit;
+  overflow-y: auto;
+}
+
+.autocomplete-dropdown li {
+  cursor: pointer;
+  padding: 8px;
+}
+
+.autocomplete-dropdown li:hover {
+  background-color: #f0f0f0;
+}
+
+.dark-dropdown {
+  color: black ; 
+}
+
diff --git a/src/pages/monitoring/outbound/index.tsx b/src/pages/monitoring/outbound/index.tsx
new file mode 100644
index 0000000..158a038
--- /dev/null
+++ b/src/pages/monitoring/outbound/index.tsx
@@ -0,0 +1,315 @@
+import {
+  MDBBtn,
+  MDBCol,
+  MDBDropdown,
+  MDBDropdownItem,
+  MDBDropdownMenu,
+  MDBDropdownToggle,
+  MDBRow,
+} from "mdb-react-ui-kit";
+import BarChart from "../../../components/visualisation/bar";
+import React, { useEffect, useState } from "react";
+import { useStore } from "../../../store";
+import { getBots } from "../../../api/getBots";
+import { toast } from "react-hot-toast";
+import "./style.css";
+import PieChart from "../../../components/visualisation/pie";
+import LineChart from "../../../components/visualisation/line";
+import { fetchRealtime } from "../../../api/fetchRealtimeData";
+import { getFilesData } from "../../../api/getFiles";
+import { convertToShortDate, formatDate, reverseFormatDate } from "../../../utils/functions";
+
+interface AutocompleteItem {
+  value: string;
+}
+
+interface OutboundProps extends React.HTMLAttributes<HTMLDivElement> {
+  theme: string;
+}
+
+export const Outbound: React.FC<OutboundProps> = ({ theme }) => {
+  const [selectedChart, setSelectedChart] = useState("barchart");
+  const [dropdownLabel, setDropdownLabel] = useState("Select Chart");
+  const [searchText, setSearchText] = useState("");
+  // const [autocompleteSuggestions, setAutocompleteSuggestions] = useState<
+  //   AutocompleteItem[]
+  // >([]);
+  const [autocompleteSuggestionsFile, setAutocompleteSuggestionsFile] =
+    useState<AutocompleteItem[]>([]);
+  const [botList, setBotList] = useState([]);
+  const store: any = useStore();
+
+  const [selected, setSelected] = useState("");
+  const [dropdown, setDropdown] = useState(true);
+
+  const [OutboundData, setOutboundData] = useState([]);
+
+  const [final, setFinal] = useState("");
+
+  const func = async () => {
+    if (localStorage.getItem("file")) {
+      const file = localStorage.getItem("file");
+      const apiEndpoint = fetchRealtime(file);
+      try {
+        const response = await apiEndpoint;
+        const res = JSON.parse(response.data.result);
+        setOutboundData(res["Outbound".trim()] || {}); 
+      } catch (error) {
+        console.error("Error toggling:", error);
+      }
+    } else if (final !== "") {
+      const file = reverseFormatDate(final);
+      localStorage.setItem("file", file);
+
+      const shortDate = convertToShortDate(selected);
+      localStorage.setItem("shortDate", shortDate);
+      localStorage.setItem("data_time", selected);
+
+      const apiEndpoint = fetchRealtime(file);
+      try {
+        const response = await apiEndpoint;
+        const res = JSON.parse(response.data.result);
+        setOutboundData(res["Outbound".trim()] || {}); 
+      } catch (error) {
+        console.error("Error toggling:", error);
+      }
+    }
+    fetchBotData();
+  };
+
+  useEffect(() => {
+    func();
+    // fetchBotData();
+  }, [final]);
+
+  const dataBar = {
+    labels: Object.keys(OutboundData),
+    datasets: [
+      {
+        label: "Outbound",
+        data: Object.values(OutboundData).map(Number),
+        backgroundColor: "rgba(75, 192, 192, 0.6)",
+      },
+    ],
+  };
+
+  const dataPie = {
+    labels: Object.keys(OutboundData),
+    datasets: [
+      {
+        label: "Outbound",
+        data: Object.values(OutboundData).map(Number),
+      },
+    ],
+  };
+
+  const dataLine = {
+    labels: Object.keys(OutboundData),
+    datasets: [
+      {
+        label: "Outbound",
+        data: Object.values(OutboundData).map(Number),
+        backgroundColor: "rgba(75, 192, 192, 0.6)",
+      },
+    ],
+  };
+
+  const handleChartChange = (value, label) => {
+    setSelectedChart(value);
+    setDropdownLabel(label);
+  };
+
+  let chartComponent;
+  if (selectedChart === "barchart") {
+    chartComponent = <BarChart data={dataBar}/>;
+  } else if (selectedChart === "piechart") {
+    // chartComponent = <PieChart data={dataPie} />;
+    chartComponent = <PieChart data={dataPie} />;
+  } else if (selectedChart === "linechart") {
+    chartComponent = <LineChart data={dataLine} />;
+  }
+
+  const fetchBotData = async () => {
+    store?.startLoading();
+    const data = searchText.length > 0 ? { name: searchText } : {};
+    try {
+      const res = await getBots(data);
+      store?.stopLoading();
+      setBotList(res?.data?.result?.data.map((bot) => bot.name));
+    } catch (err) {
+      store?.stopLoading();
+      toast.error(err.message);
+    }
+  };
+
+  // const handleSearchInputChange = (
+  //   event: React.ChangeEvent<HTMLInputElement>
+  // ) => {
+  //   const { value } = event.target;
+  //   setSearchText(value);
+
+  //   const lowercasedValue = value.toLowerCase();
+  //   const suggestions: AutocompleteItem[] = botList.map((name) => ({
+  //     value: name,
+  //   }));
+
+  //   setAutocompleteSuggestions(
+  //     suggestions.filter((item) =>
+  //       item.value.toLowerCase().includes(lowercasedValue)
+  //     )
+  //   );
+  // };
+
+  // const handleSearchSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+  //   event.preventDefault();
+  // };
+  const handleSearchSubmitFile = async (
+    event: React.FormEvent<HTMLFormElement>
+  ) => {
+    event.preventDefault();
+    setFinal(selected);
+
+    const shortDate = convertToShortDate(selected);
+    localStorage.setItem("shortDate", shortDate);
+    localStorage.setItem("data_time", selected);
+
+    const file = reverseFormatDate(selected);
+    localStorage.setItem("file", file);
+
+    func();
+  };
+
+  const handleSearchInputChangeFile = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { value } = event.target;
+    setSelected(value);
+
+    const lowercasedValue = value.toLowerCase();
+    const apiEndpoint = getFilesData();
+    let data = [];
+
+    try {
+      const response = await apiEndpoint;
+      data = response.data.result;
+    } catch (error) {
+      console.error("Error toggling:", error);
+    }
+
+    const suggestions: AutocompleteItem[] = data.map((name) => ({
+      value: formatDate(name),
+    }));
+
+    setAutocompleteSuggestionsFile(
+      suggestions.filter((item) =>
+        item.value.toLowerCase().includes(lowercasedValue)
+      )
+    );
+  };
+
+  const handleAutocompleteItemClick = (value) => {
+    setSelected(value);
+    setDropdown(false);
+  };
+
+  return (
+    <div>
+      <MDBRow className="my-3">
+        <MDBCol>
+          <MDBDropdown>
+            <MDBDropdownToggle
+              caret="true"
+              color="primary"
+              style={{ cursor: "pointer" }}
+            >
+              {dropdownLabel}
+            </MDBDropdownToggle>
+            <MDBDropdownMenu style={{ width: "inherit" }}>
+              <MDBDropdownItem
+                className="p-2"
+                onClick={() => handleChartChange("barchart", "Bar Chart")}
+                style={{ cursor: "pointer" }}
+              >
+                Bar Chart
+              </MDBDropdownItem>
+              <MDBDropdownItem
+                className="p-2"
+                onClick={() => handleChartChange("piechart", "Pie Chart")}
+                style={{ cursor: "pointer" }}
+              >
+                Pie Chart
+              </MDBDropdownItem>
+              <MDBDropdownItem
+                className="p-2"
+                onClick={() => handleChartChange("linechart", "Line Chart")}
+                style={{ cursor: "pointer" }}
+              >
+                Line Chart
+              </MDBDropdownItem>
+            </MDBDropdownMenu>
+          </MDBDropdown>
+        </MDBCol>
+        {/* <MDBCol className="mx-3">
+          <form
+            className="d-flex input-group w-auto"
+            onSubmit={handleSearchSubmit}
+          >
+            <input
+              type="search"
+              className="form-control"
+              placeholder="Search Bot Name"
+              aria-label="Search"
+              value={searchText}
+              onChange={handleSearchInputChange}
+            />
+            <MDBBtn color="primary" type="submit">
+              Search
+            </MDBBtn>
+          </form>
+          {autocompleteSuggestions.length > 0 && (
+            <ul className={`autocomplete-dropdown ${theme}-dropdown`}>
+              {autocompleteSuggestions.map((item) => (
+                <li key={item.value} onClick={() => setSearchText(item.value)}>
+                  {item.value}
+                </li>
+              ))}
+            </ul>
+          )}
+        </MDBCol> */}
+        <MDBCol className="mx-3">
+          <form
+            className="d-flex input-group w-auto"
+            onSubmit={handleSearchSubmitFile}
+          >
+            <input
+              type="search"
+              className="form-control"
+              placeholder="Search Date"
+              aria-label="Search"
+              value={selected}
+              onChange={handleSearchInputChangeFile}
+            />
+            <MDBBtn color="primary" type="submit">
+              Search
+            </MDBBtn>
+          </form>
+          {dropdown && autocompleteSuggestionsFile.length > 0 && (
+            <ul className={`autocomplete-dropdown ${theme}-dropdown`}>
+              {autocompleteSuggestionsFile.map((item) => (
+                <li
+                  key={item.value}
+                  onClick={() => handleAutocompleteItemClick(item.value)}
+                >
+                  {item.value}
+                </li>
+              ))}
+            </ul>
+          )}
+        </MDBCol>
+      </MDBRow>
+      {chartComponent}
+    </div>
+  );
+};
+
+export default Outbound;
diff --git a/src/pages/monitoring/outbound/style.css b/src/pages/monitoring/outbound/style.css
new file mode 100644
index 0000000..dc6b6c1
--- /dev/null
+++ b/src/pages/monitoring/outbound/style.css
@@ -0,0 +1,25 @@
+/* Add a higher z-index to the autocomplete dropdown */
+.autocomplete-dropdown {
+  position: absolute;
+  z-index: 100;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  padding: 5px;
+  list-style: none;
+  max-height: 150px;
+  max-width: inherit;
+  overflow-y: auto;
+}
+
+.autocomplete-dropdown li {
+  cursor: pointer;
+  padding: 8px;
+}
+
+.autocomplete-dropdown li:hover {
+  background-color: #f0f0f0;
+}
+
+.dark-dropdown {
+  color: black ; 
+}
\ No newline at end of file
diff --git a/src/pages/monitoring/overview/card.tsx b/src/pages/monitoring/overview/card.tsx
new file mode 100644
index 0000000..954e857
--- /dev/null
+++ b/src/pages/monitoring/overview/card.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import {
+  MDBCard,
+  MDBCardBody,
+  MDBCol,
+  MDBRow,
+} from "mdb-react-ui-kit";
+import { formatNumberWithCommas } from "../../../utils/functions";
+
+const OverviewComponent = ({ theme, jsonData }) => {
+  const data = jsonData;
+
+  const renderDataCards = (data: { [key: string]: number }) => {
+    return Object.entries(data).map(([key, value]) => (
+      <MDBCol className="col-sm-12 col-md-4 mb-3" key={key}>
+        <MDBCard className={`${theme}-card`}>
+          <MDBCardBody>
+            <h5 className="card-title">{formatNumberWithCommas(value)}</h5>
+            <p className="card-text">{key}</p>
+          </MDBCardBody>
+        </MDBCard>
+      </MDBCol>
+    ));
+  };
+
+  return (
+    <div>
+      <MDBRow className="row mx-4">
+        {Object.entries(data).map(([category, categoryData]) => (
+          <React.Fragment key={category}>
+            {categoryData &&
+              renderDataCards(categoryData as { [key: string]: number })}
+          </React.Fragment>
+        ))}
+      </MDBRow>
+    </div>
+  );
+};
+
+export default OverviewComponent;
diff --git a/src/pages/monitoring/overview/index.tsx b/src/pages/monitoring/overview/index.tsx
index 8496b6b..6e8a3ba 100644
--- a/src/pages/monitoring/overview/index.tsx
+++ b/src/pages/monitoring/overview/index.tsx
@@ -1,103 +1,188 @@
-import { MDBCard, MDBCardBody, MDBCol, MDBRow, MDBBtn } from "mdb-react-ui-kit";
+import {
+  MDBCard,
+  MDBCardBody,
+  MDBCol,
+  MDBRow,
+  MDBBtn,
+  MDBSwitch,
+} from "mdb-react-ui-kit";
 import "./style.css";
+import { useEffect, useState } from "react";
+import { triggerRealtimeDataRes } from "../../../api/triggerRealtime";
+import { stopRealtime } from "../../../api/stopRealtimeData";
+import { getFilesData } from "../../../api/getFiles";
+import { fetchOverviewData } from "../../../api/fetchOverview";
+import {
+  convertToShortDate,
+  formatDate,
+  reverseFormatDate,
+} from "../../../utils/functions";
+import OverviewComponent from "./card";
 
 interface OverviewHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
-  children?: React.ReactNode;
   theme: string;
 }
-export const Overview: React.FC<OverviewHeaderProps> = ({
-  children,
-  theme,
-  ...rest
-}) => {
-  const handleFilterInputChange = (
+
+interface AutocompleteItem {
+  value: string;
+}
+
+export const Overview: React.FC<OverviewHeaderProps> = ({ theme }) => {
+  const [isRealtimeEnabled, setIsRealtimeEnabled] = useState(false);
+  const [autocompleteSuggestions, setAutocompleteSuggestions] = useState<
+    AutocompleteItem[]
+  >([]);
+  const [selected, setSelected] = useState("");
+  const [dropdown, setDropdown] = useState(true);
+  const [flag, setFlag] = useState(false);
+  const [OverviewData, setOverviewData] = useState({});
+
+  const handleSearchInputChange = async (
     event: React.ChangeEvent<HTMLInputElement>
   ) => {
     const { value } = event.target;
+    setSelected(value);
+    setFlag(false);
+
+    const lowercasedValue = value.toLowerCase();
+    const apiEndpoint = getFilesData();
+    let data = [];
+
+    try {
+      const response = await apiEndpoint;
+      data = response.data.result;
+    } catch (error) {
+      console.error("Error toggling:", error);
+    }
+
+    const suggestions: AutocompleteItem[] = data.map((name) => ({
+      value: formatDate(name),
+    }));
+
+    setAutocompleteSuggestions(
+      suggestions.filter((item) =>
+        item.value.toLowerCase().includes(lowercasedValue)
+      )
+    );
   };
 
-  const handleFilterSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+  const handleSearchSubmit = async (
+    event: React.FormEvent<HTMLFormElement>
+  ) => {
     event.preventDefault();
+    setDropdown(false);
+    setFlag(true);
+    const shortDate = convertToShortDate(selected);
+    localStorage.setItem("shortDate", shortDate);
+    localStorage.setItem("data_time", selected);
+
+    const file = reverseFormatDate(selected);
+    localStorage.setItem("file", file);
+
+    const apiEndpoint = fetchOverviewData(file);
+    let res;
+
+    try {
+      const response = await apiEndpoint;
+      res = response.data.result;
+
+      const parsedData = JSON.parse(res);
+
+      setOverviewData(parsedData);
+    } catch (error) {
+      console.error("Error toggling:", error);
+    }
+  };
+
+  const handleAutocompleteItemClick = (value) => {
+    setSelected(value);
+    setDropdown(false);
+  };
+
+  const handleToggleChange = async () => {
+    setIsRealtimeEnabled(!isRealtimeEnabled);
+    const apiEndpoint = isRealtimeEnabled
+      ? triggerRealtimeDataRes()
+      : stopRealtime();
+
+    try {
+      const response = await apiEndpoint;
+      console.log("Toggle API Response:", response);
+    } catch (error) {
+      console.error("Error toggling:", error);
+    }
   };
 
+  async function fetchData() {
+    if (localStorage.getItem("file")) {
+      const file = localStorage.getItem("file");
+      const apiEndpoint = fetchOverviewData(file);
+      let res;
+      const response = await apiEndpoint;
+      res = response.data.result;
+
+      const parsedData = JSON.parse(res);
+
+      setOverviewData(parsedData);
+    }
+  }
+
+  useEffect(() => {
+    fetchData();
+    console.log(!selected || localStorage.getItem("file") == null)
+  }, []);
+
   return (
     <div className="container my-3 text-center align-items-center">
       <MDBRow className="mx-4 my-4">
         <MDBCol className="d-flex justify-content-start">
-          <form
-            className="d-flex input-group w-auto"
-            onSubmit={handleFilterSubmit}
-          >
-            <input
-              type="search"
-              className="form-control"
-              placeholder="Filter"
-              aria-label="Filter"
-              // value={filterText}
-              onChange={handleFilterInputChange}
-            />
-            <MDBBtn color="primary" type="submit">
-              Filter
-            </MDBBtn>
-          </form>
-        </MDBCol>
-      </MDBRow>
-      <MDBRow className="mx-4">
-        <MDBCol className="col-sm-12 col-md-4 mb-3">
-          <MDBCard className={`${theme}-card`}>
-            <MDBCardBody>
-              <h5 className="card-title">80</h5>
-              <p className="card-text">No. of Notifications sent</p>
-            </MDBCardBody>
-          </MDBCard>
-        </MDBCol>
-        <MDBCol className="col-sm-12 col-md-4 mb-3">
-          <MDBCard className={`${theme}-card`}>
-            <MDBCardBody>
-              <h5 className="card-title">65</h5>
-              <p className="card-text">
-                No. of Notifications received by users
-              </p>
-            </MDBCardBody>
-          </MDBCard>
-        </MDBCol>
-        <MDBCol className="col-sm-12 col-md-4 mb-3">
-          <MDBCard className={`${theme}-card`}>
-            <MDBCardBody>
-              <h5 className="card-title">50</h5>
-              <p className="card-text">No. of Notifications opened by users</p>
-            </MDBCardBody>
-          </MDBCard>
-        </MDBCol>
-      </MDBRow>
-      <MDBRow className="row mx-4">
-        <MDBCol className="col-sm-12 col-md-4 mb-3">
-          <MDBCard className={`${theme}-card`}>
-            <MDBCardBody>
-              <h5 className="card-title">80</h5>
-              <p className="card-text">No. of Notifications sent</p>
-            </MDBCardBody>
-          </MDBCard>
-        </MDBCol>
-        <MDBCol className="col-sm-12 col-md-4 mb-3">
-          <MDBCard className={`${theme}-card`}>
-            <MDBCardBody>
-              <h5 className="card-title">65</h5>
-              <p className="card-text">
-                No. of Notifications received by users
-              </p>
-            </MDBCardBody>
-          </MDBCard>
+          <MDBCol className="mx-3">
+            <form
+              className="d-flex input-group w-auto"
+              onSubmit={handleSearchSubmit}
+            >
+              <input
+                type="search"
+                className="form-control"
+                placeholder="Enter Date"
+                aria-label="Search"
+                value={selected}
+                onChange={handleSearchInputChange}
+              />
+              <MDBBtn color="primary" type="submit">
+                Submit
+              </MDBBtn>
+            </form>
+            {dropdown && autocompleteSuggestions.length > 0 && (
+              <ul className="autocomplete-dropdown">
+                {autocompleteSuggestions.map((item) => (
+                  <li
+                    key={item.value}
+                    onClick={() => handleAutocompleteItemClick(item.value)}
+                    className={`${theme}-dropdown`}
+                  >
+                    {item.value}
+                  </li>
+                ))}
+              </ul>
+            )}
+          </MDBCol>
         </MDBCol>
-        <MDBCol className="col-sm-12 col-md-4 mb-3">
-          <MDBCard className={`${theme}-card`}>
-            <MDBCardBody>
-              <h5 className="card-title">50</h5>
-              <p className="card-text">No. of Notifications opened by users</p>
-            </MDBCardBody>
-          </MDBCard>
+        <MDBCol className="d-flex justify-content-end">
+          Toggle Realtime &nbsp;
+          <MDBSwitch
+            className="ml-2"
+            checked={isRealtimeEnabled}
+            onChange={handleToggleChange}
+          />
         </MDBCol>
       </MDBRow>
+      {(selected || localStorage.getItem("file") != null || flag) && (
+        <OverviewComponent theme={theme} jsonData={OverviewData} />
+      )}
+      {(!selected && localStorage.getItem("file") == null) && (
+        <p>Please enter a date</p>
+      )}
     </div>
   );
 };
diff --git a/src/pages/monitoring/overview/style.css b/src/pages/monitoring/overview/style.css
index 9d5f368..d269be9 100644
--- a/src/pages/monitoring/overview/style.css
+++ b/src/pages/monitoring/overview/style.css
@@ -12,3 +12,7 @@
   background-color: black;
   color: black;
 }
+
+.dark-dropdown {
+  color: black ; 
+}
\ No newline at end of file
diff --git a/src/pages/monitoring/transformer/index.tsx b/src/pages/monitoring/transformer/index.tsx
new file mode 100644
index 0000000..96a5035
--- /dev/null
+++ b/src/pages/monitoring/transformer/index.tsx
@@ -0,0 +1,316 @@
+import {
+  MDBBtn,
+  MDBCol,
+  MDBDropdown,
+  MDBDropdownItem,
+  MDBDropdownMenu,
+  MDBDropdownToggle,
+  MDBRow,
+} from "mdb-react-ui-kit";
+import BarChart from "../../../components/visualisation/bar";
+import React, { useEffect, useState } from "react";
+import { useStore } from "../../../store";
+import { getBots } from "../../../api/getBots";
+import { toast } from "react-hot-toast";
+import "./style.css";
+import PieChart from "../../../components/visualisation/pie";
+import LineChart from "../../../components/visualisation/line";
+// import { formatDate, reverseFormatDate } from "../../../utils/functions";
+import { fetchRealtime } from "../../../api/fetchRealtimeData";
+import { getFilesData } from "../../../api/getFiles";
+import { convertToShortDate, formatDate, reverseFormatDate } from "../../../utils/functions";
+
+interface AutocompleteItem {
+  value: string;
+}
+
+interface TransformerProps extends React.HTMLAttributes<HTMLDivElement> {
+  theme: string;
+}
+
+export const Transformer: React.FC<TransformerProps> = ({ theme }) => {
+  const [selectedChart, setSelectedChart] = useState("barchart");
+  const [dropdownLabel, setDropdownLabel] = useState("Select Chart");
+  const [searchText, setSearchText] = useState("");
+  // const [autocompleteSuggestions, setAutocompleteSuggestions] = useState<
+  //   AutocompleteItem[]
+  // >([]);
+  const [autocompleteSuggestionsFile, setAutocompleteSuggestionsFile] =
+    useState<AutocompleteItem[]>([]);
+  const [botList, setBotList] = useState([]);
+  const store: any = useStore();
+
+  const [selected, setSelected] = useState("");
+  const [dropdown, setDropdown] = useState(true);
+
+  const [TransformerData, setTransformerData] = useState([]);
+
+  const [final, setFinal] = useState("");
+
+  const func = async () => {
+    if (localStorage.getItem("file")) {
+      const file = localStorage.getItem("file");
+      const apiEndpoint = fetchRealtime(file);
+      try {
+        const response = await apiEndpoint;
+        const res = JSON.parse(response.data.result);
+        setTransformerData(res["Transformer".trim()] || {}); 
+      } catch (error) {
+        console.error("Error toggling:", error);
+      }
+    } else if (final !== "") {
+      const file = reverseFormatDate(final);
+      localStorage.setItem("file", file);
+
+      const shortDate = convertToShortDate(selected);
+      localStorage.setItem("shortDate", shortDate);
+      localStorage.setItem("data_time", selected);
+
+      const apiEndpoint = fetchRealtime(file);
+      try {
+        const response = await apiEndpoint;
+        const res = JSON.parse(response.data.result);
+        setTransformerData(res["Transformer".trim()] || {}); 
+      } catch (error) {
+        console.error("Error toggling:", error);
+      }
+    }
+    fetchBotData();
+  };
+
+  useEffect(() => {
+    func();
+    // fetchBotData();
+  }, [final]);
+
+  const dataBar = {
+    labels: Object.keys(TransformerData),
+    datasets: [
+      {
+        label: "Transformer",
+        data: Object.values(TransformerData).map(Number),
+        backgroundColor: "rgba(75, 192, 192, 0.6)",
+      },
+    ],
+  };
+
+  const dataPie = {
+    labels: Object.keys(TransformerData),
+    datasets: [
+      {
+        label: "Transformer",
+        data: Object.values(TransformerData).map(Number),
+      },
+    ],
+  };
+
+  const dataLine = {
+    labels: Object.keys(TransformerData),
+    datasets: [
+      {
+        label: "Transformer",
+        data: Object.values(TransformerData).map(Number),
+        backgroundColor: "rgba(75, 192, 192, 0.6)",
+      },
+    ],
+  };
+
+  const handleChartChange = (value, label) => {
+    setSelectedChart(value);
+    setDropdownLabel(label);
+  };
+
+  let chartComponent;
+  if (selectedChart === "barchart") {
+    chartComponent = <BarChart data={dataBar}/>;
+  } else if (selectedChart === "piechart") {
+    // chartComponent = <PieChart data={dataPie} />;
+    chartComponent = <PieChart data={dataPie} />;
+  } else if (selectedChart === "linechart") {
+    chartComponent = <LineChart data={dataLine} />;
+  }
+
+  const fetchBotData = async () => {
+    store?.startLoading();
+    const data = searchText.length > 0 ? { name: searchText } : {};
+    try {
+      const res = await getBots(data);
+      store?.stopLoading();
+      setBotList(res?.data?.result?.data.map((bot) => bot.name));
+    } catch (err) {
+      store?.stopLoading();
+      toast.error(err.message);
+    }
+  };
+
+  // const handleSearchInputChange = (
+  //   event: React.ChangeEvent<HTMLInputElement>
+  // ) => {
+  //   const { value } = event.target;
+  //   setSearchText(value);
+
+  //   const lowercasedValue = value.toLowerCase();
+  //   const suggestions: AutocompleteItem[] = botList.map((name) => ({
+  //     value: name,
+  //   }));
+
+  //   setAutocompleteSuggestions(
+  //     suggestions.filter((item) =>
+  //       item.value.toLowerCase().includes(lowercasedValue)
+  //     )
+  //   );
+  // };
+
+  // const handleSearchSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+  //   event.preventDefault();
+  // };
+
+  const handleSearchSubmitFile = async (
+    event: React.FormEvent<HTMLFormElement>
+  ) => {
+    event.preventDefault();
+    setFinal(selected);
+
+    const shortDate = convertToShortDate(selected);
+    localStorage.setItem("shortDate", shortDate);
+    localStorage.setItem("data_time", selected);
+
+    const file = reverseFormatDate(selected);
+    localStorage.setItem("file", file);
+
+    func();
+  };
+
+  const handleSearchInputChangeFile = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { value } = event.target;
+    setSelected(value);
+
+    const lowercasedValue = value.toLowerCase();
+    const apiEndpoint = getFilesData();
+    let data = [];
+
+    try {
+      const response = await apiEndpoint;
+      data = response.data.result;
+    } catch (error) {
+      console.error("Error toggling:", error);
+    }
+
+    const suggestions: AutocompleteItem[] = data.map((name) => ({
+      value: formatDate(name),
+    }));
+
+    setAutocompleteSuggestionsFile(
+      suggestions.filter((item) =>
+        item.value.toLowerCase().includes(lowercasedValue)
+      )
+    );
+  };
+
+  const handleAutocompleteItemClick = (value) => {
+    setSelected(value);
+    setDropdown(false);
+  };
+  return (
+    <div>
+      <MDBRow className="my-3">
+        <MDBCol>
+          <MDBDropdown>
+            <MDBDropdownToggle
+              caret="true"
+              color="primary"
+              style={{ cursor: "pointer" }}
+            >
+              {dropdownLabel}
+            </MDBDropdownToggle>
+            <MDBDropdownMenu style={{ width: "inherit" }}>
+              <MDBDropdownItem
+                className="p-2"
+                onClick={() => handleChartChange("barchart", "Bar Chart")}
+                style={{ cursor: "pointer" }}
+              >
+                Bar Chart
+              </MDBDropdownItem>
+              <MDBDropdownItem
+                className="p-2"
+                onClick={() => handleChartChange("piechart", "Pie Chart")}
+                style={{ cursor: "pointer" }}
+              >
+                Pie Chart
+              </MDBDropdownItem>
+              <MDBDropdownItem
+                className="p-2"
+                onClick={() => handleChartChange("linechart", "Line Chart")}
+                style={{ cursor: "pointer" }}
+              >
+                Line Chart
+              </MDBDropdownItem>
+            </MDBDropdownMenu>
+          </MDBDropdown>
+        </MDBCol>
+        {/* <MDBCol className="mx-3">
+          <form
+            className="d-flex input-group w-auto"
+            onSubmit={handleSearchSubmit}
+          >
+            <input
+              type="search"
+              className="form-control"
+              placeholder="Search Bot Name"
+              aria-label="Search"
+              value={searchText}
+              onChange={handleSearchInputChange}
+            />
+            <MDBBtn color="primary" type="submit">
+              Search
+            </MDBBtn>
+          </form>
+          {autocompleteSuggestions.length > 0 && (
+            <ul className={`autocomplete-dropdown ${theme}-dropdown`}>
+              {autocompleteSuggestions.map((item) => (
+                <li key={item.value} onClick={() => setSearchText(item.value)}>
+                  {item.value}
+                </li>
+              ))}
+            </ul>
+          )}
+        </MDBCol> */}
+        <MDBCol className="mx-3">
+          <form
+            className="d-flex input-group w-auto"
+            onSubmit={handleSearchSubmitFile}
+          >
+            <input
+              type="search"
+              className="form-control"
+              placeholder="Search Date"
+              aria-label="Search"
+              value={selected}
+              onChange={handleSearchInputChangeFile}
+            />
+            <MDBBtn color="primary" type="submit">
+              Search
+            </MDBBtn>
+          </form>
+          {dropdown && autocompleteSuggestionsFile.length > 0 && (
+            <ul className={`autocomplete-dropdown ${theme}-dropdown`}>
+              {autocompleteSuggestionsFile.map((item) => (
+                <li
+                  key={item.value}
+                  onClick={() => handleAutocompleteItemClick(item.value)}
+                >
+                  {item.value}
+                </li>
+              ))}
+            </ul>
+          )}
+        </MDBCol>
+      </MDBRow>
+      {chartComponent}
+    </div>
+  );
+};
+
+export default Transformer;
diff --git a/src/pages/monitoring/transformer/style.css b/src/pages/monitoring/transformer/style.css
new file mode 100644
index 0000000..5859a92
--- /dev/null
+++ b/src/pages/monitoring/transformer/style.css
@@ -0,0 +1,25 @@
+/* Add a higher z-index to the autocomplete dropdown */
+.autocomplete-dropdown {
+    position: absolute;
+    z-index: 100;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    padding: 5px;
+    list-style: none;
+    max-height: 150px;
+    max-width: inherit;
+    overflow-y: auto;
+  }
+  
+  .autocomplete-dropdown li {
+    cursor: pointer;
+    padding: 8px;
+  }
+  
+  .autocomplete-dropdown li:hover {
+    background-color: #f0f0f0;
+  }
+  
+  .dark-dropdown {
+    color: black ; 
+  }
\ No newline at end of file
diff --git a/src/pages/monitoring/uci-api/index.tsx b/src/pages/monitoring/uci-api/index.tsx
new file mode 100644
index 0000000..9807987
--- /dev/null
+++ b/src/pages/monitoring/uci-api/index.tsx
@@ -0,0 +1,318 @@
+import {
+  MDBBtn,
+  MDBCol,
+  MDBDropdown,
+  MDBDropdownItem,
+  MDBDropdownMenu,
+  MDBDropdownToggle,
+  MDBRow,
+} from "mdb-react-ui-kit";
+import BarChart from "../../../components/visualisation/bar";
+import React, { useEffect, useState } from "react";
+import { useStore } from "../../../store";
+import { getBots } from "../../../api/getBots";
+import { toast } from "react-hot-toast";
+import "./style.css";
+import PieChart from "../../../components/visualisation/pie";
+import LineChart from "../../../components/visualisation/line";
+// import { formatDate, reverseFormatDate } from "../../../utils/functions";
+import { fetchRealtime } from "../../../api/fetchRealtimeData";
+import { getFilesData } from "../../../api/getFiles";
+import { convertToShortDate, formatDate, reverseFormatDate } from "../../../utils/functions";
+
+interface AutocompleteItem {
+  value: string;
+}
+
+interface UCIAPIProps extends React.HTMLAttributes<HTMLDivElement> {
+  theme: string;
+}
+
+export const UCIAPI: React.FC<UCIAPIProps> = ({ theme }) => {
+  const [selectedChart, setSelectedChart] = useState("barchart");
+  const [dropdownLabel, setDropdownLabel] = useState("Select Chart");
+  const [searchText, setSearchText] = useState("");
+  // const [autocompleteSuggestions, setAutocompleteSuggestions] = useState<
+  //   AutocompleteItem[]
+  // >([]);
+  const [autocompleteSuggestionsFile, setAutocompleteSuggestionsFile] =
+    useState<AutocompleteItem[]>([]);
+  const [botList, setBotList] = useState([]);
+  const store: any = useStore();
+
+  const [selected, setSelected] = useState("");
+  const [dropdown, setDropdown] = useState(true);
+
+  const [uciApiData, setUciApiData] = useState([]);
+
+  const [final, setFinal] = useState("");
+
+  const func = async () => {
+    if (localStorage.getItem("file")) {
+      const file = localStorage.getItem("file");
+      const apiEndpoint = fetchRealtime(file);
+      try {
+        const response = await apiEndpoint;
+        const res = JSON.parse(response.data.result);
+        setUciApiData(res["uci-apis".trim()] || {}); 
+      } catch (error) {
+        console.error("Error toggling:", error);
+      }
+    } else if (final !== "") {
+
+      const file = reverseFormatDate(final);
+      localStorage.setItem("file", file);
+
+      const shortDate = convertToShortDate(selected);
+      localStorage.setItem("shortDate", shortDate);
+      localStorage.setItem("data_time", selected);
+
+      const apiEndpoint = fetchRealtime(file);
+      try {
+        const response = await apiEndpoint;
+        const res = JSON.parse(response.data.result);
+        setUciApiData(res["uci-apis".trim()] || {}); 
+      } catch (error) {
+        console.error("Error toggling:", error);
+      }
+    }
+    fetchBotData();
+  };
+
+  useEffect(() => {
+    func();
+    // fetchBotData();
+  }, [final]);
+
+  const dataBar = {
+    labels: Object.keys(uciApiData),
+    datasets: [
+      {
+        label: "UCI APIS",
+        data: Object.values(uciApiData).map(Number),
+        backgroundColor: "rgba(75, 192, 192, 0.6)",
+      },
+    ],
+  };
+
+  const dataPie = {
+    labels: Object.keys(uciApiData),
+    datasets: [
+      {
+        label: "UCI APIS",
+        data: Object.values(uciApiData).map(Number),
+      },
+    ],
+  };
+
+  const dataLine = {
+    labels: Object.keys(uciApiData),
+    datasets: [
+      {
+        label: "UCI APIS",
+        data: Object.values(uciApiData).map(Number),
+        backgroundColor: "rgba(75, 192, 192, 0.6)",
+      },
+    ],
+  };
+
+  const handleChartChange = (value, label) => {
+    setSelectedChart(value);
+    setDropdownLabel(label);
+  };
+
+  let chartComponent;
+  if (selectedChart === "barchart") {
+    chartComponent = <BarChart data={dataBar}/>;
+  } else if (selectedChart === "piechart") {
+    // chartComponent = <PieChart data={dataPie} />;
+    chartComponent = <PieChart data={dataPie} />;
+  } else if (selectedChart === "linechart") {
+    chartComponent = <LineChart data={dataLine} />;
+  }
+
+  const fetchBotData = async () => {
+    store?.startLoading();
+    const data = searchText.length > 0 ? { name: searchText } : {};
+    try {
+      const res = await getBots(data);
+      store?.stopLoading();
+      setBotList(res?.data?.result?.data.map((bot) => bot.name));
+    } catch (err) {
+      store?.stopLoading();
+      toast.error(err.message);
+    }
+  };
+
+  // const handleSearchInputChange = (
+  //   event: React.ChangeEvent<HTMLInputElement>
+  // ) => {
+  //   const { value } = event.target;
+  //   setSearchText(value);
+
+  //   const lowercasedValue = value.toLowerCase();
+  //   const suggestions: AutocompleteItem[] = botList.map((name) => ({
+  //     value: name,
+  //   }));
+
+  //   setAutocompleteSuggestions(
+  //     suggestions.filter((item) =>
+  //       item.value.toLowerCase().includes(lowercasedValue)
+  //     )
+  //   );
+  // };
+
+  // const handleSearchSubmit = (event: React.FormEvent<HTMLFormElement>) => {
+  //   event.preventDefault();
+  // };
+
+  const handleSearchSubmitFile = async (
+    event: React.FormEvent<HTMLFormElement>
+  ) => {
+    event.preventDefault();
+
+    const shortDate = convertToShortDate(selected);
+    localStorage.setItem("shortDate", shortDate);
+    localStorage.setItem("data_time", selected);
+
+    const file = reverseFormatDate(selected);
+    localStorage.setItem("file", file);
+
+    func();
+  };
+
+  const handleSearchInputChangeFile = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const { value } = event.target;
+    setSelected(value);
+    setFinal(selected);
+
+    const lowercasedValue = value.toLowerCase();
+    const apiEndpoint = getFilesData();
+    let data = [];
+
+    try {
+      const response = await apiEndpoint;
+      data = response.data.result;
+    } catch (error) {
+      console.error("Error toggling:", error);
+    }
+
+    const suggestions: AutocompleteItem[] = data.map((name) => ({
+      value: formatDate(name),
+    }));
+
+    setAutocompleteSuggestionsFile(
+      suggestions.filter((item) =>
+        item.value.toLowerCase().includes(lowercasedValue)
+      )
+    );
+  };
+
+  const handleAutocompleteItemClick = (value) => {
+    setSelected(value);
+    setDropdown(true);
+  };
+
+  return (
+    <div>
+      <MDBRow className="my-3">
+        <MDBCol>
+          <MDBDropdown>
+            <MDBDropdownToggle
+              caret="true"
+              color="primary"
+              style={{ cursor: "pointer" }}
+            >
+              {dropdownLabel}
+            </MDBDropdownToggle>
+            <MDBDropdownMenu style={{ width: "inherit" }}>
+              <MDBDropdownItem
+                className="p-2"
+                onClick={() => handleChartChange("barchart", "Bar Chart")}
+                style={{ cursor: "pointer" }}
+              >
+                Bar Chart
+              </MDBDropdownItem>
+              <MDBDropdownItem
+                className="p-2"
+                onClick={() => handleChartChange("piechart", "Pie Chart")}
+                style={{ cursor: "pointer" }}
+              >
+                Pie Chart
+              </MDBDropdownItem>
+              <MDBDropdownItem
+                className="p-2"
+                onClick={() => handleChartChange("linechart", "Line Chart")}
+                style={{ cursor: "pointer" }}
+              >
+                Line Chart
+              </MDBDropdownItem>
+            </MDBDropdownMenu>
+          </MDBDropdown>
+        </MDBCol>
+        {/* <MDBCol className="mx-3">
+          <form
+            className="d-flex input-group w-auto"
+            onSubmit={handleSearchSubmit}
+          >
+            <input
+              type="search"
+              className="form-control"
+              placeholder="Search Bot Name"
+              aria-label="Search"
+              value={searchText}
+              onChange={handleSearchInputChange}
+            />
+            <MDBBtn color="primary" type="submit">
+              Search
+            </MDBBtn>
+          </form>
+          {autocompleteSuggestions.length > 0 && (
+            <ul className={`autocomplete-dropdown ${theme}-dropdown`}>
+              {autocompleteSuggestions.map((item) => (
+                <li key={item.value} onClick={() => setSearchText(item.value)}>
+                  {item.value}
+                </li>
+              ))}
+            </ul>
+          )}
+        </MDBCol> */}
+        <MDBCol className="mx-3">
+          <form
+            className="d-flex input-group w-auto"
+            onSubmit={handleSearchSubmitFile}
+          >
+            <input
+              type="search"
+              className="form-control"
+              placeholder="Search Date"
+              aria-label="Search"
+              value={selected}
+              onChange={handleSearchInputChangeFile}
+            />
+            <MDBBtn color="primary" type="submit">
+              Search
+            </MDBBtn>
+          </form>
+          {dropdown && autocompleteSuggestionsFile.length > 0 && (
+            <ul className={`autocomplete-dropdown ${theme}-dropdown`}>
+              {autocompleteSuggestionsFile.map((item) => (
+                <li
+                  key={item.value}
+                  onClick={() => handleAutocompleteItemClick(item.value)}
+                >
+                  {item.value}
+                </li>
+              ))}
+            </ul>
+          )}
+        </MDBCol>
+      </MDBRow>
+      {chartComponent}
+    </div>
+  );
+};
+
+export default UCIAPI;
diff --git a/src/pages/monitoring/uci-api/style.css b/src/pages/monitoring/uci-api/style.css
new file mode 100644
index 0000000..2af15c3
--- /dev/null
+++ b/src/pages/monitoring/uci-api/style.css
@@ -0,0 +1,25 @@
+/* Add a higher z-index to the autocomplete dropdown */
+.autocomplete-dropdown {
+  position: absolute;
+  z-index: 100;
+  background-color: #fff;
+  border: 1px solid #ccc;
+  padding: 5px;
+  list-style: none;
+  max-height: 150px;
+  max-width: inherit;
+  overflow-y: auto;
+}
+
+.autocomplete-dropdown li {
+  cursor: pointer;
+  padding: 8px;
+}
+
+.autocomplete-dropdown li:hover {
+  background-color: #f0f0f0;
+}
+
+.dark-dropdown {
+  color: black !important; 
+}
\ No newline at end of file