feat: [FE-76] Asset history timeline on the detail page

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();
+  });
+});

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>
+  );
+};

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,
+);

frontend/features/AssetHistory/AssetHistoryTypes.ts

@@ -0,0 +1,8 @@
+export interface TimelineEvent {
+  id: string;
+  date: string;
+  description: string;
+}
+export interface AssetHistoryState {
+  events: TimelineEvent[];
+}

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 };
+};