From 568f56bf003a67ba632c3aa7ed1ce54947c3ab92 Mon Sep 17 00:00:00 2001
From: Mitchell Magro <mitchell222131@gmail.com>
Date: Mon, 10 Nov 2025 12:30:08 +0100
Subject: [PATCH] Meta Data For User Add dropdown hooked

---
 app/features/UserRoles/AddUser/AddUser.tsx | 53 ++++++++++++----------
 app/redux/metadata/metadataSlice.ts        |  1 -
 2 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/app/features/UserRoles/AddUser/AddUser.tsx b/app/features/UserRoles/AddUser/AddUser.tsx
index fc0c146..2e84c2d 100644
--- a/app/features/UserRoles/AddUser/AddUser.tsx
+++ b/app/features/UserRoles/AddUser/AddUser.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import React, { useState } from "react";
-import { useRouter } from "next/navigation";
 import { useDispatch, useSelector } from "react-redux";
 import { AppDispatch } from "@/app/redux/store";
 import "./AddUser.scss";
@@ -13,6 +12,7 @@ import Spinner from "../../../components/Spinner/Spinner";
 import { RootState } from "@/app/redux/store";
 import toast from "react-hot-toast";
 import Modal from "@/app/components/Modal/Modal";
+import { selectAppMetadata } from "@/app/redux/metadata/selectors";
 
 interface AddUserProps {
   open: boolean;
@@ -20,7 +20,6 @@ interface AddUserProps {
 }
 
 const AddUser: React.FC<AddUserProps> = ({ open, onClose }) => {
-  // const router = useRouter();
   const dispatch = useDispatch<AppDispatch>();
   const { status, error: authError } = useSelector(
     (state: RootState) => state.auth
@@ -39,6 +38,8 @@ const AddUser: React.FC<AddUserProps> = ({ open, onClose }) => {
 
   const [phoneError, setPhoneError] = useState("");
   const [countryCode, setCountryCode] = useState("+1");
+  const data = useSelector(selectAppMetadata);
+  const { merchants = [], groups = [], job_titles = [] } = data || {};
 
   const loading = status === "loading";
 
@@ -165,8 +166,11 @@ const AddUser: React.FC<AddUserProps> = ({ open, onClose }) => {
             className="add-user__select"
           >
             <option value="">Select Merchant</option>
-            <option value="Win Bot">Win Bot</option>
-            <option value="Data Spin">Data Spin</option>
+            {merchants.map((merchant: string) => (
+              <option key={merchant} value={merchant}>
+                {merchant}
+              </option>
+            ))}
           </select>
           {form.merchants.length > 0 && (
             <div className="selected-items">
@@ -200,10 +204,11 @@ const AddUser: React.FC<AddUserProps> = ({ open, onClose }) => {
             className="add-user__select"
           >
             <option value="">Select Group</option>
-            <option value="Admin">Admin</option>
-            <option value="Reader">Reader</option>
-            <option value="Manager">Manager</option>
-            <option value="User">User</option>
+            {groups.map((group: string) => (
+              <option key={group} value={group}>
+                {group}
+              </option>
+            ))}
           </select>
           {form.groups.length > 0 && (
             <div className="selected-items">
@@ -227,21 +232,23 @@ const AddUser: React.FC<AddUserProps> = ({ open, onClose }) => {
             </div>
           )}
         </div>
-        <select
-          name="jobTitle"
-          value={form.jobTitle}
-          onChange={handleChange}
-          required
-          className="add-user__select"
-        >
-          <option value="">Select Job Title</option>
-          <option value="Admin">Admin</option>
-          <option value="Reader">Reader</option>
-          <option value="User">User</option>
-          <option value="Manager">Manager</option>
-          <option value="Supervisor">Supervisor</option>
-          <option value="Director">Director</option>
-        </select>
+        <div className="array-field-container">
+          <label>Job Title:</label>
+          <select
+            name="jobTitle"
+            value={form.jobTitle}
+            onChange={handleChange}
+            required
+            className="add-user__select"
+          >
+            <option value="">Select Job Title</option>
+            {job_titles?.map((job_title: string) => (
+              <option key={job_title} value={job_title}>
+                {job_title}
+              </option>
+            ))}
+          </select>
+        </div>
         <div className="phone-input-container">
           <select
             name="countryCode"
diff --git a/app/redux/metadata/metadataSlice.ts b/app/redux/metadata/metadataSlice.ts
index 0376d31..fbc3518 100644
--- a/app/redux/metadata/metadataSlice.ts
+++ b/app/redux/metadata/metadataSlice.ts
@@ -1,5 +1,4 @@
 import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit";
-import { RootState } from "../store";
 
 export interface SidebarItem {
   id?: string;