feat: [FE-72] Build the locations management page

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

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

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

frontend/features/LocationsManagement/LocationsManagementTypes.ts

@@ -0,0 +1,8 @@
+export interface Location {
+  id: string;
+  name: string;
+  address: string;
+}
+export interface LocationsState {
+  locations: Location[];
+}

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