feat: add user management page
This commit is contained in:
parent
4dc8786847
commit
aea6fa4127
@ -2,6 +2,7 @@ import { BrowserRouter, Routes, Route } from 'react-router-dom';
|
||||
import Layout from './components/Layout';
|
||||
import Dashboard from './pages/Dashboard';
|
||||
import Login from './pages/Login';
|
||||
import Users from './pages/Users';
|
||||
|
||||
function App() {
|
||||
return (
|
||||
@ -10,7 +11,7 @@ function App() {
|
||||
<Route path="/login" element={<Login />} />
|
||||
<Route path="/" element={<Layout />}>
|
||||
<Route index element={<Dashboard />} />
|
||||
<Route path="users" element={<div className="p-4">مدیریت کاربران</div>} />
|
||||
<Route path="users" element={<Users />} />
|
||||
<Route path="products" element={<div className="p-4">مدیریت محصولات</div>} />
|
||||
<Route path="orders" element={<div className="p-4">مدیریت سفارشات</div>} />
|
||||
<Route path="coupons" element={<div className="p-4">کدهای تخفیف</div>} />
|
||||
|
||||
99
frontend/admin-panel/src/pages/Users.tsx
Normal file
99
frontend/admin-panel/src/pages/Users.tsx
Normal file
@ -0,0 +1,99 @@
|
||||
import { Users as UsersIcon, CheckCircle, XCircle, Search, Filter } from 'lucide-react';
|
||||
|
||||
const users = [
|
||||
{ id: 1, name: 'علی رضایی', email: 'ali@example.com', role: 'B2C', status: 'active', date: '۱۴۰۲/۰۸/۱۵' },
|
||||
{ id: 2, name: 'کلینیک دامپزشکی مهر', email: 'mehr@clinic.com', role: 'B2B', status: 'pending', date: '۱۴۰۲/۰۸/۱۴' },
|
||||
{ id: 3, name: 'سارا احمدی', email: 'sara@example.com', role: 'B2C', status: 'active', date: '۱۴۰۲/۰۸/۱۲' },
|
||||
{ id: 4, name: 'داروخانه پتشاپ', email: 'info@petshop.ir', role: 'B2B', status: 'active', date: '۱۴۰۲/۰۸/۱۰' },
|
||||
];
|
||||
|
||||
export default function Users() {
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h2 className="text-2xl font-black text-gray-900 flex items-center gap-2">
|
||||
<UsersIcon className="w-6 h-6 text-purple-600" />
|
||||
مدیریت کاربران
|
||||
</h2>
|
||||
<p className="text-gray-500 font-medium mt-1">مشاهده و تایید حسابهای کاربری و کلینیکها</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<button className="bg-white border border-gray-200 text-gray-700 px-4 py-2 rounded-xl flex items-center gap-2 font-bold hover:bg-gray-50 transition-all">
|
||||
<Filter className="w-4 h-4" />
|
||||
فیلتر
|
||||
</button>
|
||||
<div className="relative">
|
||||
<Search className="w-5 h-5 text-gray-400 absolute right-3 top-1/2 -translate-y-1/2" />
|
||||
<input
|
||||
type="text"
|
||||
placeholder="جستجوی کاربر..."
|
||||
className="pl-4 pr-10 py-2 border border-gray-200 rounded-xl outline-none focus:ring-2 focus:ring-purple-500 w-full sm:w-64 font-medium"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white rounded-2xl shadow-sm border border-gray-200 overflow-hidden">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-right font-vazir">
|
||||
<thead className="bg-gray-50 text-gray-500 text-sm border-b border-gray-200">
|
||||
<tr>
|
||||
<th className="py-4 px-6 font-bold">نام کاربر / کلینیک</th>
|
||||
<th className="py-4 px-6 font-bold">ایمیل</th>
|
||||
<th className="py-4 px-6 font-bold">نوع حساب</th>
|
||||
<th className="py-4 px-6 font-bold">تاریخ عضویت</th>
|
||||
<th className="py-4 px-6 font-bold">وضعیت</th>
|
||||
<th className="py-4 px-6 font-bold text-center">عملیات</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-gray-100">
|
||||
{users.map((user) => (
|
||||
<tr key={user.id} className="hover:bg-gray-50/50 transition-colors">
|
||||
<td className="py-4 px-6 font-bold text-gray-900">{user.name}</td>
|
||||
<td className="py-4 px-6 text-gray-500" dir="ltr">{user.email}</td>
|
||||
<td className="py-4 px-6">
|
||||
<span className={`px-3 py-1 rounded-full text-xs font-bold ${user.role === 'B2B' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-700'}`}>
|
||||
{user.role === 'B2B' ? 'همکار (B2B)' : 'مشتری عادی'}
|
||||
</span>
|
||||
</td>
|
||||
<td className="py-4 px-6 text-gray-500 text-sm font-medium">{user.date}</td>
|
||||
<td className="py-4 px-6">
|
||||
{user.status === 'active' ? (
|
||||
<span className="flex items-center gap-1.5 text-green-600 font-bold text-sm">
|
||||
<CheckCircle className="w-4 h-4" />
|
||||
تایید شده
|
||||
</span>
|
||||
) : (
|
||||
<span className="flex items-center gap-1.5 text-orange-500 font-bold text-sm">
|
||||
<div className="w-2 h-2 rounded-full bg-orange-500"></div>
|
||||
در انتظار تایید
|
||||
</span>
|
||||
)}
|
||||
</td>
|
||||
<td className="py-4 px-6 text-center">
|
||||
{user.role === 'B2B' && user.status === 'pending' ? (
|
||||
<div className="flex justify-center gap-2">
|
||||
<button className="text-green-600 hover:bg-green-50 p-1.5 rounded-lg transition-colors" title="تایید مدارک">
|
||||
<CheckCircle className="w-5 h-5" />
|
||||
</button>
|
||||
<button className="text-red-600 hover:bg-red-50 p-1.5 rounded-lg transition-colors" title="رد درخواست">
|
||||
<XCircle className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<button className="text-purple-600 hover:underline text-sm font-bold">
|
||||
مشاهده پروفایل
|
||||
</button>
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user