From 47ac258c463fc08f145ca2bea6e8a5c15133d093 Mon Sep 17 00:00:00 2001
From: Hasidasbuilds <Hasidasbuilds@users.noreply.github.com>
Date: Mon, 27 Jul 2026 12:22:11 +0100
Subject: [PATCH] feat: [FE-72] Build the locations management page

---
 .../LocationsManagementComponent.spec.tsx     | 10 ++++++++++
 .../LocationsManagementComponent.tsx          | 19 +++++++++++++++++++
 .../LocationsManagementStore.ts               |  8 ++++++++
 .../LocationsManagementTypes.ts               |  8 ++++++++
 .../useLocationsManagement.ts                 |  7 +++++++
 5 files changed, 52 insertions(+)
 create mode 100644 frontend/features/LocationsManagement/LocationsManagementComponent.spec.tsx
 create mode 100644 frontend/features/LocationsManagement/LocationsManagementComponent.tsx
 create mode 100644 frontend/features/LocationsManagement/LocationsManagementStore.ts
 create mode 100644 frontend/features/LocationsManagement/LocationsManagementTypes.ts
 create mode 100644 frontend/features/LocationsManagement/useLocationsManagement.ts

diff --git a/frontend/features/LocationsManagement/LocationsManagementComponent.spec.tsx b/frontend/features/LocationsManagement/LocationsManagementComponent.spec.tsx
new file mode 100644
index 00000000..138b8ebf
--- /dev/null
+++ b/frontend/features/LocationsManagement/LocationsManagementComponent.spec.tsx
@@ -0,0 +1,10 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { LocationsManagementComponent } from "./LocationsManagementComponent";
+describe("LocationsManagementComponent", () => {
+  it("renders correctly", () => {
+    render(<LocationsManagementComponent />);
+    expect(screen.getByText("Locations Management")).toBeDefined();
+  });
+});
diff --git a/frontend/features/LocationsManagement/LocationsManagementComponent.tsx b/frontend/features/LocationsManagement/LocationsManagementComponent.tsx
new file mode 100644
index 00000000..8c07ef3d
--- /dev/null
+++ b/frontend/features/LocationsManagement/LocationsManagementComponent.tsx
@@ -0,0 +1,19 @@
+import React from "react";
+import { useLocationsManagement } from "./useLocationsManagement";
+import { Location } from "./LocationsManagementTypes";
+export const LocationsManagementComponent: React.FC = () => {
+  const { locations } = useLocationsManagement();
+  return (
+    <div className="p-4">
+      <h1 className="text-2xl font-bold">Locations Management</h1>
+      <div className="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
+        {locations.map((loc: Location) => (
+          <div key={loc.id} className="border p-4 rounded shadow">
+            <h2 className="font-semibold">{loc.name}</h2>
+            <p className="text-gray-600">{loc.address}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
diff --git a/frontend/features/LocationsManagement/LocationsManagementStore.ts b/frontend/features/LocationsManagement/LocationsManagementStore.ts
new file mode 100644
index 00000000..8096fa4b
--- /dev/null
+++ b/frontend/features/LocationsManagement/LocationsManagementStore.ts
@@ -0,0 +1,8 @@
+import { createContext } from "react";
+import { LocationsState, Location } from "./LocationsManagementTypes";
+export interface LocationsStore extends LocationsState {
+  addLocation: (loc: Location) => void;
+}
+export const LocationsManagementContext = createContext<
+  LocationsStore | undefined
+>(undefined);
diff --git a/frontend/features/LocationsManagement/LocationsManagementTypes.ts b/frontend/features/LocationsManagement/LocationsManagementTypes.ts
new file mode 100644
index 00000000..333228ae
--- /dev/null
+++ b/frontend/features/LocationsManagement/LocationsManagementTypes.ts
@@ -0,0 +1,8 @@
+export interface Location {
+  id: string;
+  name: string;
+  address: string;
+}
+export interface LocationsState {
+  locations: Location[];
+}
diff --git a/frontend/features/LocationsManagement/useLocationsManagement.ts b/frontend/features/LocationsManagement/useLocationsManagement.ts
new file mode 100644
index 00000000..9923e4cc
--- /dev/null
+++ b/frontend/features/LocationsManagement/useLocationsManagement.ts
@@ -0,0 +1,7 @@
+import { useState } from "react";
+import { Location } from "./LocationsManagementTypes";
+export const useLocationsManagement = () => {
+  const [locations, setLocations] = useState<Location[]>([]);
+  const addLocation = (loc: Location) => setLocations((prev) => [...prev, loc]);
+  return { locations, addLocation };
+};