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();
+ 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 (
+
+
Asset History
+ {events.map((event: TimelineEvent) => (
+
+
{event.date}
+
{event.description}
+
+ ))}
+
+ );
+};
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(
+ 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([
+ { id: "1", date: "2023-01-01", description: "Asset Created" },
+ ]);
+ const addEvent = (event: TimelineEvent) =>
+ setEvents((prev) => [...prev, event]);
+ return { events, addEvent };
+};