Meta Data For User Add dropdown hooked

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,6 +232,8 @@ const AddUser: React.FC<AddUserProps> = ({ open, onClose }) => {
             </div>
           )}
         </div>
+        <div className="array-field-container">
+          <label>Job Title:</label>
           <select
             name="jobTitle"
             value={form.jobTitle}
@@ -235,13 +242,13 @@ const AddUser: React.FC<AddUserProps> = ({ open, onClose }) => {
             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>
+            {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"

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;