132 lines
3.9 KiB
TypeScript
132 lines
3.9 KiB
TypeScript
"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 (
|
|
<div>
|
|
{data.map((user: IUser) => (
|
|
<Card key={user.id} sx={{ mb: 2 }}>
|
|
<CardContent>
|
|
<Typography variant="h6">{user.username}</Typography>
|
|
<Typography variant="body2">
|
|
Merchant ID: {user.merchantId}
|
|
</Typography>
|
|
|
|
{/* You can render more UI here for additional properties */}
|
|
<Stack direction="row" spacing={1} mt={1}>
|
|
<UserRoleCard
|
|
username={user.lastName}
|
|
name={user.name || ""}
|
|
email={user.email}
|
|
isAdmin={true}
|
|
lastLogin="small"
|
|
roles={user.authorities}
|
|
// merchants={Numberuser.allowedMerchantIds}
|
|
/>
|
|
{/* Add more chips or UI elements for other data */}
|
|
</Stack>
|
|
</CardContent>
|
|
</Card>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// 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;
|