From b19989785626ea5a0d468801c60281520a056ce2 Mon Sep 17 00:00:00 2001
From: zakkiyyat <zakkiyyat@users.noreply.github.com>
Date: Mon, 27 Jul 2026 12:21:57 +0100
Subject: [PATCH] feat: [FE-76] Asset history timeline on the detail page

---
 .../AssetHistory/AssetHistoryComponent.spec.tsx | 10 ++++++++++
 .../AssetHistory/AssetHistoryComponent.tsx      | 17 +++++++++++++++++
 .../features/AssetHistory/AssetHistoryStore.ts  |  8 ++++++++
 .../features/AssetHistory/AssetHistoryTypes.ts  |  8 ++++++++
 .../features/AssetHistory/useAssetHistory.ts    | 10 ++++++++++
 5 files changed, 53 insertions(+)
 create mode 100644 frontend/features/AssetHistory/AssetHistoryComponent.spec.tsx
 create mode 100644 frontend/features/AssetHistory/AssetHistoryComponent.tsx
 create mode 100644 frontend/features/AssetHistory/AssetHistoryStore.ts
 create mode 100644 frontend/features/AssetHistory/AssetHistoryTypes.ts
 create mode 100644 frontend/features/AssetHistory/useAssetHistory.ts

diff --git a/frontend/features/AssetHistory/AssetHistoryComponent.spec.tsx b/frontend/features/AssetHistory/AssetHistoryComponent.spec.tsx
new file mode 100644
index 00000000..ba93b537
--- /dev/null
+++ b/frontend/features/AssetHistory/AssetHistoryComponent.spec.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { AssetHistoryComponent } from "./AssetHistoryComponent";
+describe("AssetHistoryComponent", () => {
+  it("renders correctly", () => {
+    render(<AssetHistoryComponent />);
+    expect(screen.getByText("Asset History")).toBeDefined();
+  });
+});
diff --git a/frontend/features/AssetHistory/AssetHistoryComponent.tsx b/frontend/features/AssetHistory/AssetHistoryComponent.tsx
new file mode 100644
index 00000000..6631f1a4
--- /dev/null
+++ b/frontend/features/AssetHistory/AssetHistoryComponent.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { useAssetHistory } from "./useAssetHistory";
+import { TimelineEvent } from "./AssetHistoryTypes";
+export const AssetHistoryComponent: React.FC = () => {
+  const { events } = useAssetHistory();
+  return (
+    <div className="border-l-2 border-blue-500 pl-4 ml-4">
+      <h3 className="font-bold mb-4">Asset History</h3>
+      {events.map((event: TimelineEvent) => (
+        <div key={event.id} className="mb-2">
+          <span className="text-gray-500 text-sm">{event.date}</span>
+          <p>{event.description}</p>
+        </div>
+      ))}
+    </div>
+  );
+};
diff --git a/frontend/features/AssetHistory/AssetHistoryStore.ts b/frontend/features/AssetHistory/AssetHistoryStore.ts
new file mode 100644
index 00000000..2d2307ad
--- /dev/null
+++ b/frontend/features/AssetHistory/AssetHistoryStore.ts
@@ -0,0 +1,8 @@
+import { createContext } from "react";
+import { AssetHistoryState, TimelineEvent } from "./AssetHistoryTypes";
+export interface AssetHistoryStore extends AssetHistoryState {
+  addEvent: (event: TimelineEvent) => void;
+}
+export const AssetHistoryContext = createContext<AssetHistoryStore | undefined>(
+  undefined,
+);
diff --git a/frontend/features/AssetHistory/AssetHistoryTypes.ts b/frontend/features/AssetHistory/AssetHistoryTypes.ts
new file mode 100644
index 00000000..d89d62fc
--- /dev/null
+++ b/frontend/features/AssetHistory/AssetHistoryTypes.ts
@@ -0,0 +1,8 @@
+export interface TimelineEvent {
+  id: string;
+  date: string;
+  description: string;
+}
+export interface AssetHistoryState {
+  events: TimelineEvent[];
+}
diff --git a/frontend/features/AssetHistory/useAssetHistory.ts b/frontend/features/AssetHistory/useAssetHistory.ts
new file mode 100644
index 00000000..0f0b8a9c
--- /dev/null
+++ b/frontend/features/AssetHistory/useAssetHistory.ts
@@ -0,0 +1,10 @@
+import { useState } from "react";
+import { TimelineEvent } from "./AssetHistoryTypes";
+export const useAssetHistory = () => {
+  const [events, setEvents] = useState<TimelineEvent[]>([
+    { id: "1", date: "2023-01-01", description: "Asset Created" },
+  ]);
+  const addEvent = (event: TimelineEvent) =>
+    setEvents((prev) => [...prev, event]);
+  return { events, addEvent };
+};