17 خطوط
1.4 KiB
TypeScript
17 خطوط
1.4 KiB
TypeScript
"use client";
|
||
|
||
import { useState } from "react";
|
||
import type { SystemRoleKey, UserRoleAssignment } from "@/types/rolesAccess";
|
||
|
||
export function ViewAsUserSection({ role, users }: { role: SystemRoleKey; users: UserRoleAssignment[] }) {
|
||
const [activeUser, setActiveUser] = useState<UserRoleAssignment | null>(null);
|
||
if (role !== "org_admin") return <div className="liquid-glass rounded-[22px] p-6">شما به این بخش دسترسی ندارید.</div>;
|
||
return (
|
||
<section className="space-y-4">
|
||
{activeUser ? <div className="rounded-2xl bg-amber-400/25 p-4 font-bold">شما در حال مشاهده سامانه بهعنوان {activeUser.nameFa} هستید. <button onClick={() => setActiveUser(null)} className="mr-3 rounded-xl bg-white/20 px-3 py-1">خروج از حالت مشاهده</button></div> : null}
|
||
<h2 className="text-xl font-black">مشاهده بهعنوان کاربر</h2>
|
||
<div className="grid gap-3 md:grid-cols-2">{users.map((user) => <div key={user.userId} className="liquid-glass rounded-[20px] p-4"><h3 className="font-black">{user.nameFa}</h3><p className="mt-2 text-sm opacity-70">{user.roleFa} • {user.unitFa}</p><button onClick={() => setActiveUser(user)} className="mt-3 rounded-2xl bg-emerald-500 px-4 py-2 text-white">شروع مشاهده بهعنوان این کاربر</button></div>)}</div>
|
||
</section>
|
||
);
|
||
}
|