diff --git a/payment-iq/app/dashboard/admin/backofficeusers/page.tsx b/payment-iq/app/dashboard/admin/users/page.tsx similarity index 53% rename from payment-iq/app/dashboard/admin/backofficeusers/page.tsx rename to payment-iq/app/dashboard/admin/users/page.tsx index 8cf2923..9a8be75 100644 --- a/payment-iq/app/dashboard/admin/backofficeusers/page.tsx +++ b/payment-iq/app/dashboard/admin/users/page.tsx @@ -1,13 +1,12 @@ // This ensures this component is rendered only on the client side "use client"; -import { Approve } from "@/app/features/Pages/Approve/Approve"; +import Users from "@/app/features/Pages/Admin/Users/users"; export default function BackOfficeUsersPage() { return (
- {/* This page will now be rendered on the client-side */} - +
); } diff --git a/payment-iq/app/dashboard/transactions/page.tsx b/payment-iq/app/dashboard/transactions/page.tsx index cd6af40..f2059f1 100644 --- a/payment-iq/app/dashboard/transactions/page.tsx +++ b/payment-iq/app/dashboard/transactions/page.tsx @@ -1,7 +1,7 @@ // This ensures this component is rendered only on the client side "use client"; -import TransactionTable from "@/app/features/Pages/transactions/Transactions"; +import TransactionTable from "@/app/features/Pages/Transactions/Transactions"; export default function TransactionPage() { return ( diff --git a/payment-iq/app/features/Pages/Admin/Users/interfaces.ts b/payment-iq/app/features/Pages/Admin/Users/interfaces.ts new file mode 100644 index 0000000..c9ac346 --- /dev/null +++ b/payment-iq/app/features/Pages/Admin/Users/interfaces.ts @@ -0,0 +1,26 @@ +export interface IUser { + merchantId: number; + name?: string; + id: string; + username: string; + firstName: string; + lastName: string; + email: string; + phone: string; + jobTitle: string; + enabled: boolean; + authorities: string[]; + allowedMerchantIds: number[]; + created: string; + disabledBy: string | null; + disabledDate: string | null; + disabledReason: string | null; + incidentNotes: boolean; + lastLogin: string; + lastMandatoryUpdated: string; + marketingNewsletter: boolean; + releaseNotes: boolean; + requiredActions: string[]; + twoFactorCondition: string; + twoFactorCredentials: any[]; // Assuming this is an array that could contain any type of data +} diff --git a/payment-iq/app/features/Pages/Admin/Users/users.tsx b/payment-iq/app/features/Pages/Admin/Users/users.tsx new file mode 100644 index 0000000..7e00e63 --- /dev/null +++ b/payment-iq/app/features/Pages/Admin/Users/users.tsx @@ -0,0 +1,131 @@ +"use client"; +import React, { useEffect, useState } from "react"; +import { Card, CardContent, Typography, Chip, Stack } from "@mui/material"; +import { IUser } from "./interfaces"; +import UserRoleCard from "@/app/features/UserRoles/userRoleCard"; + +const Users = () => { + const [data, setData] = useState([ + { + merchantId: 100987998, + id: "bc6a8a55-13bc-4538-8255-cd0cec3bb4e9", + mame: "Jacob", + username: "lspaddy", + firstName: "Paddy", + lastName: "Man", + email: "patrick@omegasys.eu", + phone: "", + jobTitle: "", + enabled: true, + authorities: [ + "ROLE_IIN", + "ROLE_FIRST_APPROVER", + "ROLE_RULES_ADMIN", + "ROLE_TRANSACTION_VIEWER", + "ROLE_IIN_ADMIN", + "ROLE_USER_PSP_ACCOUNT", + ], + allowedMerchantIds: [100987998], + created: "2025-05-04T15:32:48.432Z", + disabledBy: null, + disabledDate: null, + disabledReason: null, + incidentNotes: false, + lastLogin: "", + lastMandatoryUpdated: "2025-05-04T15:32:48.332Z", + marketingNewsletter: false, + releaseNotes: false, + requiredActions: ["CONFIGURE_TOTP", "UPDATE_PASSWORD"], + twoFactorCondition: "required", + twoFactorCredentials: [], + }, + { + merchantId: 100987998, + mame: "Jacob", + id: "382eed15-1e21-41fa-b1f3-0c1adb3af714", + username: "lsterence", + firstName: "Terence", + lastName: "User", + email: "terence@omegasys.eu", + phone: "", + jobTitle: "", + enabled: true, + authorities: ["ROLE_IIN", "ROLE_FIRST_APPROVER", "ROLE_RULES_ADMIN"], + allowedMerchantIds: [100987998], + created: "2025-05-04T15:32:48.432Z", + disabledBy: null, + disabledDate: null, + disabledReason: null, + incidentNotes: false, + lastLogin: "", + lastMandatoryUpdated: "2025-05-04T15:32:48.332Z", + marketingNewsletter: false, + releaseNotes: false, + requiredActions: ["CONFIGURE_TOTP", "UPDATE_PASSWORD"], + twoFactorCondition: "required", + twoFactorCredentials: [], + }, + // Add more users if needed + ]); + + useEffect(() => { + // Only run MSW in the browser environment + if (typeof window !== "undefined") { + const fetchData = async () => { + const response = await fetch( + "https://test-bo.paymentiq.io/paymentiq/backoffice/api/v2/users/?includeSubMids=false&size=20&page=0&merchantId=100987998" + ); // This would be intercepted by MSW in the browser + const data = await response.json(); + console.log("[DATA]", data); + // setData(data); + }; + + fetchData(); + } + }, []); + + return ( +
+ {data.map((user: IUser) => ( + + + {user.username} + + Merchant ID: {user.merchantId} + + + {/* You can render more UI here for additional properties */} + + + {/* Add more chips or UI elements for other data */} + + + + ))} +
+ ); +}; + +// Fetch data server-side using getServerSideProps +// export async function getServerSideProps() { +// // Replace this with your actual API call +// const res = await fetch("https://api.example.com/users"); +// const data = await res.json(); + +// // Return the fetched data as props +// return { +// props: { +// result: data, // Assuming data is an array of users +// }, +// }; +// } + +export default Users; diff --git a/payment-iq/app/features/UserRoles/userRoleCard.tsx b/payment-iq/app/features/UserRoles/userRoleCard.tsx new file mode 100644 index 0000000..43828bb --- /dev/null +++ b/payment-iq/app/features/UserRoles/userRoleCard.tsx @@ -0,0 +1,118 @@ +import { + Card, + CardContent, + Avatar, + Typography, + Chip, + IconButton, + Tooltip, + Stack, + Box, +} from "@mui/material"; +import { + Edit, + Delete, + Visibility, + VpnKey, + InfoOutlined, + AdminPanelSettings, + History, +} from "@mui/icons-material"; + +interface Props { + username: string; + name: string; + email: string; + isAdmin: boolean; + lastLogin: string; + merchants: string[]; + roles: string[]; + extraRolesCount?: number; +} + +export default function UserRoleCard({ + username, + name, + email, + isAdmin, + lastLogin, + // merchants, + roles, + extraRolesCount, +}: Props) { + return ( + + + {/* Header */} + + {username.slice(0, 2).toUpperCase()} + + {username} + {name} + {email} + + {isAdmin && ( + } label="Admin" size="small" /> + )} + + + + + + + + + + + + + + + + + + + + + + + + + + {/* Merchants + Roles */} + + Merchants + {/* + {merchants.map((m) => ( + + ))} + */} + + + + + Roles{" "} + + + + + + + {roles.map((role) => ( + + ))} + + {extraRolesCount && } + + + + {/* Footer */} + + + {lastLogin} + + + + + ); +} diff --git a/payment-iq/app/features/dashboard/sidebar/Sidebar.tsx b/payment-iq/app/features/dashboard/sidebar/Sidebar.tsx index bbb4a7b..72d9baa 100644 --- a/payment-iq/app/features/dashboard/sidebar/Sidebar.tsx +++ b/payment-iq/app/features/dashboard/sidebar/Sidebar.tsx @@ -19,7 +19,7 @@ const SideBar = () => {