e2e testing

This commit is contained in:
Gokul
2026-06-15 19:17:13 +05:30
parent 896561245d
commit 01685f14c2
18 changed files with 1102 additions and 198 deletions

View File

@@ -51,6 +51,7 @@ const ROLE_THEMES: Record<number, { bg: string; text: string; border: string; la
2: { bg: 'bg-amber-50/75', text: 'text-amber-700', border: 'border-amber-100', label: 'Admin' },
3: { bg: 'bg-blue-50/75', text: 'text-blue-700', border: 'border-blue-100', label: 'Admin' },
4: { bg: 'bg-emerald-50/75', text: 'text-emerald-700', border: 'border-emerald-100', label: 'Staff' },
5: { bg: 'bg-purple-50/75', text: 'text-purple-700', border: 'border-purple-100', label: 'Rider' },
6: { bg: 'bg-indigo-50/75', text: 'text-indigo-700', border: 'border-indigo-100', label: 'Cashier' },
};
@@ -187,7 +188,9 @@ export default function UsersPanel({ tenantId = FIESTA_TENANT_ID, defaultNewUser
});
const roleOptions = React.useMemo(() => {
return Array.from(new Set(users.map((u) => u.role)));
const roles = new Set(users.map((u) => u.role));
roles.add('Rider');
return Array.from(roles);
}, [users]);
const handleCreateUser = async (e: React.FormEvent) => {
@@ -277,32 +280,32 @@ export default function UsersPanel({ tenantId = FIESTA_TENANT_ID, defaultNewUser
</div>
{/* Search & Filter Utility Bar */}
<div className="bg-slate-50/50 border border-slate-200/60 p-4 rounded-2xl flex flex-col md:flex-row gap-4 items-stretch md:items-center justify-between select-none">
<div className="relative w-full md:max-w-md shrink-0 group">
<div className="relative flex items-center bg-white border border-slate-200 rounded-xl transition-all duration-300 shadow-sm focus-within:ring-4 focus-within:ring-purple-150 focus-within:border-purple-600 hover:border-slate-300">
<span className="pl-4 flex items-center pointer-events-none text-slate-400 group-focus-within:text-purple-600 transition-colors">
<Search className="w-4.5 h-4.5" />
<div className="bg-white border border-slate-200/80 p-3 rounded-2xl flex flex-col md:flex-row gap-4 items-stretch md:items-center justify-between shadow-sm">
<div className="relative w-full md:max-w-md shrink-0">
<div className="relative flex w-full items-center bg-slate-50 border border-slate-200/80 rounded-xl transition-all duration-300 focus-within:bg-white focus-within:ring-4 focus-within:ring-purple-500/10 focus-within:border-purple-500 group-search shadow-inner">
<span className="pl-4 flex items-center pointer-events-none text-slate-400 transition-colors">
<Search size={18} strokeWidth={2.5} />
</span>
<input
type="text"
placeholder="Search team members by name, email, phone..."
placeholder="Search team members..."
value={search}
onChange={(e) => setSearch(e.target.value)}
className="w-full pl-3 pr-10 py-3 bg-transparent border-none text-xs font-semibold text-slate-800 placeholder-slate-400 focus:outline-none outline-none"
className="w-full pl-3 pr-12 py-3 bg-transparent border-none text-sm font-semibold text-slate-800 placeholder-slate-400 focus:outline-none outline-none"
/>
{search && (
<button
onClick={() => setSearch('')}
className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600 active:scale-95 transition-all p-1 hover:bg-slate-100 rounded-lg"
className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-700 hover:bg-slate-200/50 active:scale-95 transition-all p-1.5 rounded-lg flex items-center justify-center"
>
<X className="w-3.5 h-3.5" />
<X size={16} strokeWidth={2.5} />
</button>
)}
</div>
</div>
{/* Role filter capsules */}
<div className="flex items-center gap-2 overflow-x-auto pb-1 md:pb-0 scrollbar-none">
<div className="flex items-center gap-2 overflow-x-auto pb-1 md:pb-0 scrollbar-none select-none">
<button
onClick={() => setUserRoleFilter('ALL')}
className={`px-3.5 py-2 rounded-xl text-xs uppercase tracking-wider font-extrabold transition-all duration-200 cursor-pointer border ${
@@ -389,6 +392,7 @@ export default function UsersPanel({ tenantId = FIESTA_TENANT_ID, defaultNewUser
{u.roleid === 2 && <Shield size={12} />}
{u.roleid === 3 && <SlidersHorizontal size={12} />}
{u.roleid === 4 && <User size={12} />}
{u.roleid === 5 && <Bike size={12} />}
{u.roleid === 6 && <Coins size={12} />}
{roleInfo.label}
</span>