add tx history panel

api/plugin.go

@@ -378,6 +378,32 @@ func (s *Server) ConfigurePlugin(c echo.Context) error {
 	return nil
 }
 
+func (s *Server) GetPluginPolicyTransactionHistory(c echo.Context) error {
+	policyID := c.Param("policyId")
+	if policyID == "" {
+		err := fmt.Errorf("policy id is required")
+		message := map[string]interface{}{
+			"message": "failed to get policy",
+			"error":   err.Error(),
+		}
+
+		return c.JSON(http.StatusBadRequest, message)
+
+	}
+
+	policyHistory, err := s.policyService.GetPluginPolicyTransactionHistory(policyID)
+	if err != nil {
+		err = fmt.Errorf("failed to get policy history: %w", err)
+		message := map[string]interface{}{
+			"message": fmt.Sprintf("failed to get policy history: %s", policyID),
+		}
+		s.logger.Error(err)
+		return c.JSON(http.StatusInternalServerError, message)
+	}
+
+	return c.JSON(http.StatusOK, policyHistory)
+}
+
 func calculateTransactionHash(txData string) (string, error) {
 	tx := &gtypes.Transaction{}
 	rawTx, err := hex.DecodeString(txData)

api/server.go

@@ -196,6 +196,7 @@ func (s *Server) StartServer() error {
 	pluginGroup.POST("/policy", s.CreatePluginPolicy)
 	pluginGroup.GET("/policy", s.GetAllPluginPolicies)
 	pluginGroup.PUT("/policy", s.UpdatePluginPolicyById)
+	pluginGroup.GET("/policy/history/:policyId", s.GetPluginPolicyTransactionHistory)
 	pluginGroup.GET("/policy/:policyId", s.GetPluginPolicyById)
 	pluginGroup.DELETE("/policy/:policyId", s.DeletePluginPolicyById)
 

plugins-ui/src/Home.css

@@ -1,43 +1,53 @@
 .container {
-    display: flex;
-    flex-direction: column;
-    height: 100vh;
-  }
-
-  .navbar {
-    height: 60px;
-    background-color: var(--background-primary-color);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .content {
-    display: flex;
-    flex: 1;
-  }
-
-  .left-section {
-    background-color: var(--background-primary-color);
-    border-right: 1px solid var(--border-normal-color);
-    border-top: 1px solid var(--border-normal-color);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .right-section {
-    flex: 1;
-    background-color: var(--background-primary-color);
-    border-top: 1px solid var(--border-normal-color);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .navbar, .left-section, .right-section {
-    color: var(--text-light-color);
-  }
-
+  display: flex;
+  flex-direction: column;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+  background-color: var(--background-primary-color);
+  scrollbar-width: thin;
+  scrollbar-color: var(--background-primary-color) var(--background-primary-color); 
+}
+
+.navbar {
+  position: sticky;
+  width: 100%;
+  min-width: max-content;
+  height: 60px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.content {
+  display: flex;
+  flex: 1;
+  overflow: hidden;
+}
+
+.left-section {
+  width: 350px;
+  border-right: 1px solid var(--border-normal-color);
+  border-top: 1px solid var(--border-normal-color);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: flex-start; /* Ensures content starts from the top */
+  padding: 2rem;
+  overflow-y: auto;
+}
+
+.right-section {
+  flex: 1;
+  border-top: 1px solid var(--border-normal-color);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start; /* Ensures content starts from the left */
+  justify-content: center;
+  padding: 2rem;
+  overflow-x: auto;
+}
+
+.navbar, .left-section, .right-section {
+  color: var(--text-light-color);
+} 

plugins-ui/src/modules/policy/components/policy-actions/PolicyActions.tsx

@@ -1,18 +1,22 @@
 import Button from "@/modules/core/components/ui/button/Button";
 import TrashIcon from "@/assets/Trash.svg?react";
 import PenIcon from "@/assets/Pen.svg?react";
+import BookIcon from "@/assets/Book.svg?react";
 import PauseIcon from "@/assets/Pause.svg?react";
 import { usePolicies } from "@/modules/policy/context/PolicyProvider";
 import Modal from "@/modules/core/components/ui/modal/Modal";
 import PolicyForm from "@/modules/policy/components/policy-form/PolicyForm";
 import { useState } from "react";
+import TransactionHistory from "../transaction-history/TransactionHistory";
 
 type PolicyActionsProps = {
   policyId: string;
 };
 
 const PolicyActions = ({ policyId }: PolicyActionsProps) => {
-  const [modalId, setModalId] = useState("");
+  const [editModalId, setEditModalId] = useState("");
+  const [transactionHistoryModalId, setTransactionHistoryModalId] =
+    useState("");
   const { policyMap, updatePolicy, removePolicy } = usePolicies();
 
   const handleUpdate = () => {
@@ -40,10 +44,19 @@ const PolicyActions = ({ policyId }: PolicyActionsProps) => {
           styleType="tertiary"
           size="small"
           style={{ color: "#DA2E2E", padding: "5px", margin: "0 5px" }}
-          onClick={() => setModalId(policyId)}
+          onClick={() => setEditModalId(policyId)}
         >
           <PenIcon width="20px" height="20px" color="#F0F4FC" />
         </Button>
+        <Button
+          type="button"
+          styleType="tertiary"
+          size="small"
+          style={{ color: "#DA2E2E", padding: "5px", margin: "0 5px" }}
+          onClick={() => setTransactionHistoryModalId(policyId)}
+        >
+          <BookIcon width="20px" height="20px" color="#F0F4FC" />
+        </Button>
         <Button
           type="button"
           styleType="tertiary"
@@ -56,15 +69,22 @@ const PolicyActions = ({ policyId }: PolicyActionsProps) => {
       </div>
 
       <Modal
-        isOpen={modalId !== ""}
-        onClose={() => setModalId("")}
+        isOpen={editModalId !== ""}
+        onClose={() => setEditModalId("")}
         variant="panel"
       >
         <PolicyForm
-          data={policyMap.get(modalId)}
-          onSubmitCallback={() => setModalId("")}
+          data={policyMap.get(editModalId)}
+          onSubmitCallback={() => setEditModalId("")}
         />
       </Modal>
+      <Modal
+        isOpen={transactionHistoryModalId !== ""}
+        onClose={() => setTransactionHistoryModalId("")}
+        variant="panel"
+      >
+        <TransactionHistory policyId={transactionHistoryModalId} />
+      </Modal>
     </>
   );
 };

plugins-ui/src/modules/policy/components/policy-form/PolicyForm.css

@@ -1,7 +1,6 @@
 .policy-form {
     display: flex;
     flex-direction: column;
-    padding: 20px
 }
 
 form .form-control {

plugins-ui/src/modules/policy/components/transaction-history/TransactionHistory.css

@@ -0,0 +1,35 @@
+.history-panel {
+    padding: 16px;
+  }
+
+  .history-panel h2 {
+    font-size: 1.25rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+    padding-bottom: 6px;
+  }
+
+  .history-item {
+    display: flex;
+    justify-content: space-between;
+    padding: 8px 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+  }
+
+  .history-item:last-child {
+    border-bottom: none;
+  }
+
+  .history-date {
+    font-weight: bold;
+  }
+
+  .history-time {
+    width: 65px;
+    font-style: italic;
+    color: rgba(255, 255, 255, 0.8);
+  }
+
+  .history-status {
+    color: var(--alert-success-color);
+  }
+

plugins-ui/src/modules/policy/components/transaction-history/TransactionHistory.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useState } from "react";
+import { usePolicies } from "../../context/PolicyProvider";
+import { PolicyTransactionHistory } from "../../models/policy";
+import "./TransactionHistory.css";
+import Toast from "@/modules/core/components/ui/toast/Toast";
+
+type TransactionHistoryProps = {
+  policyId: string;
+};
+
+const formatDate = (dateString: string): { date: string; time: string } => {
+  const dateObj = new Date(dateString);
+  return {
+    date: dateObj.toLocaleDateString("en-GB", {
+      day: "2-digit",
+      month: "short",
+      year: "numeric",
+    }), // "26 Feb 2025"
+    time: dateObj.toLocaleTimeString("en-GB", {
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    }), // "14:25:35"
+  };
+};
+
+const TransactionHistory = ({ policyId }: TransactionHistoryProps) => {
+  const { getPolicyHistory } = usePolicies();
+  const [historyData, setHistoryData] = useState<PolicyTransactionHistory[]>(
+    []
+  );
+
+  const [toast, setToast] = useState<{
+    message: string;
+    error?: string;
+    type: "success" | "warning" | "error";
+  } | null>(null);
+
+  useEffect(() => {
+    const fetchPolicyHistory = async (): Promise<void> => {
+      try {
+        const fetchedHistory = await getPolicyHistory(policyId);
+        setHistoryData(fetchedHistory);
+      } catch (error: any) {
+        console.error("Failed to get policy history:", error.message);
+        setToast({
+          message: error.message || "Failed to get policy history",
+          error: error.error,
+          type: "error",
+        });
+      }
+    };
+
+    fetchPolicyHistory();
+  }, []);
+
+  return (
+    <div className="history-panel">
+      <h2>Transaction History</h2>
+      <ul>
+        {historyData &&
+          historyData.map((item) => {
+            const { date, time } = formatDate(item.updated_at);
+            return (
+              <li key={item.id} className="history-item">
+                <span className="history-status">{item.status}</span>
+                <span className="history-date">{date}</span>
+                <span className="history-time">{time}</span>
+              </li>
+            );
+          })}
+        {!historyData && (
+          <li key={1} className="history-item">
+            Nothing to see here yet.
+          </li>
+        )}
+      </ul>
+      {toast && (
+        <Toast
+          title={toast.message}
+          type={toast.type}
+          onClose={() => setToast(null)}
+        />
+      )}
+    </div>
+  );
+};
+
+export default TransactionHistory;

plugins-ui/src/modules/policy/context/PolicyProvider.tsx

@@ -1,5 +1,5 @@
 import React, { createContext, useContext, useEffect, useState } from "react";
-import { PluginPolicy } from "../models/policy";
+import { PluginPolicy, PolicyTransactionHistory } from "../models/policy";
 import PolicyService from "../services/policyService";
 import { isSupportedChainType } from "@/modules/shared/wallet/wallet.utils";
 import Toast from "@/modules/core/components/ui/toast/Toast";
@@ -10,6 +10,7 @@ interface PolicyContextType {
   addPolicy: (policy: PluginPolicy) => Promise<boolean>;
   updatePolicy: (policy: PluginPolicy) => Promise<boolean>;
   removePolicy: (policyId: string) => Promise<void>;
+  getPolicyHistory: (policyId: string) => Promise<PolicyTransactionHistory[]>;
 }
 
 const PolicyContext = createContext<PolicyContextType | undefined>(undefined);
@@ -154,13 +155,32 @@ export const PolicyProvider: React.FC<{ children: React.ReactNode }> = ({
     return "";
   };
 
+  const getPolicyHistory = async (
+    policyId: string
+  ): Promise<PolicyTransactionHistory[]> => {
+    try {
+      const history = await PolicyService.getPolicyTransactionHistory(policyId);
+      return history;
+    } catch (error: any) {
+      console.error("Failed to get policy history:", error);
+      setToast({
+        message: error.message,
+        error: error.error,
+        type: "error",
+      });
+
+      return [];
+    }
+  };
+
   return (
     <PolicyContext.Provider
       value={{
         policyMap,
         addPolicy,
         updatePolicy,
         removePolicy,
+        getPolicyHistory,
       }}
     >
       {children}