399 lines
15 KiB
TypeScript
399 lines
15 KiB
TypeScript
import { Button } from "@/shared/ui/button";
|
|
import {
|
|
AlertTriangle,
|
|
Calendar,
|
|
ChevronLeft,
|
|
ChevronRight,
|
|
Eye,
|
|
Mail,
|
|
Pencil,
|
|
Phone,
|
|
Plus,
|
|
Search,
|
|
Trash2,
|
|
Users,
|
|
X,
|
|
} from "lucide-react";
|
|
import { useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
type User = {
|
|
id: number;
|
|
username: string;
|
|
email?: string;
|
|
phone?: string;
|
|
createdAt: string;
|
|
};
|
|
|
|
export default function UserList() {
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const usersPerPage = 6;
|
|
const navigate = useNavigate();
|
|
|
|
const [users, setUsers] = useState<User[]>([
|
|
{
|
|
id: 1,
|
|
username: "john_doe",
|
|
email: "john@example.com",
|
|
createdAt: "2024-01-15",
|
|
},
|
|
{
|
|
id: 2,
|
|
username: "jane_smith",
|
|
phone: "+998907654321",
|
|
createdAt: "2024-01-20",
|
|
},
|
|
{
|
|
id: 3,
|
|
username: "ali_karimov",
|
|
phone: "+998909876543",
|
|
createdAt: "2024-02-01",
|
|
},
|
|
{
|
|
id: 4,
|
|
username: "sara_johnson",
|
|
email: "sara@example.com",
|
|
phone: "+998901234567",
|
|
createdAt: "2024-02-10",
|
|
},
|
|
{
|
|
id: 5,
|
|
username: "murod_toshev",
|
|
email: "murod@example.com",
|
|
createdAt: "2024-02-15",
|
|
},
|
|
{
|
|
id: 6,
|
|
username: "aziza_sobirova",
|
|
email: "aziza@example.com",
|
|
createdAt: "2024-03-01",
|
|
},
|
|
{
|
|
id: 7,
|
|
username: "timur_ergashev",
|
|
phone: "+998907777777",
|
|
createdAt: "2024-03-10",
|
|
},
|
|
{
|
|
id: 8,
|
|
username: "odil_akbarov",
|
|
email: "odil@example.com",
|
|
createdAt: "2024-03-12",
|
|
},
|
|
{
|
|
id: 9,
|
|
username: "lola_nazarova",
|
|
phone: "+998909111222",
|
|
createdAt: "2024-04-05",
|
|
},
|
|
{
|
|
id: 10,
|
|
username: "bahrom_tursunov",
|
|
email: "bahrom@example.com",
|
|
createdAt: "2024-04-10",
|
|
},
|
|
]);
|
|
|
|
const [confirmDelete, setConfirmDelete] = useState<User | null>(null);
|
|
|
|
const handleDelete = (id: number) => {
|
|
setUsers((prev) => prev.filter((u) => u.id !== id));
|
|
setConfirmDelete(null);
|
|
};
|
|
|
|
const formatPhone = (phone: string) => {
|
|
if (phone.startsWith("+998")) {
|
|
return phone.replace(
|
|
/(\+998)(\d{2})(\d{3})(\d{2})(\d{2})/,
|
|
"$1 $2 $3 $4 $5",
|
|
);
|
|
}
|
|
return phone;
|
|
};
|
|
|
|
const filteredUsers = users.filter(
|
|
(user) =>
|
|
user.username.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
user.email?.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
user.phone?.includes(searchQuery),
|
|
);
|
|
|
|
const totalPages = Math.ceil(filteredUsers.length / usersPerPage);
|
|
const startIndex = (currentPage - 1) * usersPerPage;
|
|
const paginatedUsers = filteredUsers.slice(
|
|
startIndex,
|
|
startIndex + usersPerPage,
|
|
);
|
|
|
|
const getInitials = (username: string) => username.slice(0, 2).toUpperCase();
|
|
|
|
const getAvatarGradient = (id: number) => {
|
|
const gradients = ["from-blue-600 to-cyan-500"];
|
|
return gradients[id % gradients.length];
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 py-12 px-4 w-full">
|
|
<div className="max-w-[90%] mx-auto">
|
|
<div className="flex justify-between items-center">
|
|
<div className="mb-12">
|
|
<div className="flex items-center gap-3 mb-3">
|
|
<div className="p-3 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl shadow-lg shadow-cyan-500/20">
|
|
<Users className="w-8 h-8 text-white" />
|
|
</div>
|
|
<h1 className="text-5xl font-bold bg-gradient-to-r from-blue-400 via-cyan-300 to-blue-400 bg-clip-text text-transparent">
|
|
Foydalanuvchilar
|
|
</h1>
|
|
</div>
|
|
<p className="text-slate-400 text-lg ml-14">
|
|
Jami {users.length} ta foydalanuvchini boshqaring
|
|
</p>
|
|
</div>
|
|
<Button
|
|
onClick={() => navigate("/users/create")}
|
|
className="py-5 px-4 bg-gradient-to-br text-white cursor-pointer from-blue-500 to-cyan-500 rounded-xl shadow-lg shadow-cyan-500/20"
|
|
>
|
|
<Plus />
|
|
<p>Foydalanuvchi Qo'shish</p>
|
|
</Button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-12">
|
|
<StatCard
|
|
title="Jami foydalanuvchilar"
|
|
value={users.length.toString()}
|
|
icon={<Users className="w-6 h-6" />}
|
|
gradient="from-blue-600 to-blue-400"
|
|
/>
|
|
<StatCard
|
|
title="Email bilan ro'yxatlangan"
|
|
value={users.filter((u) => u.email).length.toString()}
|
|
icon={<Mail className="w-6 h-6" />}
|
|
gradient="from-cyan-600 to-cyan-400"
|
|
/>
|
|
<StatCard
|
|
title="Telefon bilan ro'yxatlangan"
|
|
value={users.filter((u) => u.phone).length.toString()}
|
|
icon={<Phone className="w-6 h-6" />}
|
|
gradient="from-purple-600 to-pink-400"
|
|
/>
|
|
</div>
|
|
|
|
<div className="mb-10 relative">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-blue-600/10 to-cyan-600/10 rounded-2xl blur-xl" />
|
|
<div className="relative bg-slate-800/50 border border-slate-700/50 rounded-2xl p-6 backdrop-blur-sm">
|
|
<Search className="absolute left-8 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-400" />
|
|
<input
|
|
type="text"
|
|
placeholder="Username, email yoki telefon raqami bo'yicha qidirish..."
|
|
value={searchQuery}
|
|
onChange={(e) => {
|
|
setSearchQuery(e.target.value);
|
|
setCurrentPage(1);
|
|
}}
|
|
className="w-full pl-14 pr-4 py-3 bg-slate-700/30 border border-slate-600/50 text-white placeholder-slate-400 rounded-xl focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mb-10">
|
|
{paginatedUsers.map((user) => (
|
|
<div className="group relative hover:scale-105 transition-transform duration-300">
|
|
<div className="absolute inset-0 bg-gradient-to-r from-blue-600/20 to-cyan-600/20 rounded-2xl blur-xl group-hover:blur-2xl transition-all opacity-0 group-hover:opacity-100" />
|
|
<div className="relative h-full flex flex-col justify-between bg-gradient-to-br from-slate-800 to-slate-900 border border-slate-700/50 rounded-2xl p-6 shadow-2xl hover:border-slate-600/70 transition-all backdrop-blur-sm">
|
|
<div>
|
|
<div className="flex items-center gap-4 mb-4">
|
|
<div
|
|
className={`w-16 h-16 rounded-xl bg-gradient-to-br ${getAvatarGradient(
|
|
user.id,
|
|
)} flex items-center justify-center text-white text-xl font-bold shadow-lg`}
|
|
>
|
|
{getInitials(user.username)}
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-xl font-bold text-white truncate">
|
|
{user.username}
|
|
</h3>
|
|
<span className="inline-block mt-1 px-3 py-1 bg-green-500/20 text-green-300 text-xs font-semibold rounded-full border border-green-500/50">
|
|
Faol
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="space-y-3 pt-4 border-t border-slate-700/50">
|
|
{user.email && (
|
|
<div className="flex items-center gap-3">
|
|
<Mail className="w-5 h-5 text-cyan-400" />
|
|
<span className="text-slate-300 text-sm truncate">
|
|
{user.email}
|
|
</span>
|
|
</div>
|
|
)}
|
|
{user.phone && (
|
|
<div className="flex items-center gap-3">
|
|
<Phone className="w-5 h-5 text-cyan-400" />
|
|
<span className="text-slate-300 text-sm">
|
|
{formatPhone(user.phone)}
|
|
</span>
|
|
</div>
|
|
)}
|
|
<div className="flex items-center gap-3">
|
|
<Calendar className="w-5 h-5 text-cyan-400" />
|
|
<span className="text-slate-300 text-sm">
|
|
{user.createdAt}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2 pt-4 mt-4 border-t border-slate-700/50">
|
|
<button
|
|
onClick={() => navigate(`/users/${user.id}/`)}
|
|
className="flex-1 flex cursor-pointer items-center justify-center gap-2 px-4 py-2.5 bg-blue-500/20 hover:bg-blue-500/30 text-blue-300 font-medium rounded-lg transition-all border border-blue-500/30 hover:border-blue-500/50"
|
|
>
|
|
<Eye className="w-4 h-4" />
|
|
Ko'rish
|
|
</button>
|
|
<button
|
|
onClick={() => navigate(`/users/${user.id}/edit`)}
|
|
className="flex-1 flex items-center cursor-pointer justify-center gap-2 px-4 py-2.5 bg-green-500/20 hover:bg-green-500/30 text-green-300 font-medium rounded-lg transition-all border border-green-500/30 hover:border-green-500/50"
|
|
>
|
|
<Pencil className="w-4 h-4" />
|
|
Tahrirlash
|
|
</button>
|
|
<button
|
|
onClick={() => setConfirmDelete(user)}
|
|
className="flex-1 flex items-center cursor-pointer justify-center gap-2 px-4 py-2.5 bg-red-500/20 hover:bg-red-500/30 text-red-300 font-medium rounded-lg transition-all border border-red-500/30 hover:border-red-500/50"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
O'chirish
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-2">
|
|
<button
|
|
disabled={currentPage === 1}
|
|
onClick={() => setCurrentPage((p) => Math.max(p - 1, 1))}
|
|
className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
|
|
>
|
|
<ChevronLeft className="w-5 h-5" />
|
|
</button>
|
|
|
|
{[...Array(totalPages)].map((_, i) => (
|
|
<button
|
|
key={i}
|
|
onClick={() => setCurrentPage(i + 1)}
|
|
className={`px-4 py-2 rounded-lg border transition-all font-medium ${
|
|
currentPage === i + 1
|
|
? "bg-gradient-to-r from-blue-600 to-cyan-600 border-blue-500 text-white shadow-lg shadow-cyan-500/50"
|
|
: "border-slate-600 text-slate-300 hover:bg-slate-700/50 hover:border-slate-500"
|
|
}`}
|
|
>
|
|
{i + 1}
|
|
</button>
|
|
))}
|
|
|
|
<button
|
|
disabled={currentPage === totalPages}
|
|
onClick={() => setCurrentPage((p) => Math.min(p + 1, totalPages))}
|
|
className="p-2 rounded-lg border border-slate-600 text-slate-300 hover:bg-slate-700/50 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
|
|
>
|
|
<ChevronRight className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{confirmDelete && (
|
|
<div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center p-4 z-50">
|
|
<div className="bg-gradient-to-br from-slate-800 to-slate-900 border border-slate-700/50 rounded-2xl shadow-2xl max-w-md w-full p-6 space-y-6">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-center gap-3">
|
|
<div className="p-3 bg-red-500/20 rounded-xl border border-red-500/30">
|
|
<Trash2 className="w-6 h-6 text-red-400" />
|
|
</div>
|
|
<h2 className="text-xl font-bold text-white">
|
|
Foydalanuvchini o'chirish
|
|
</h2>
|
|
</div>
|
|
<button
|
|
onClick={() => setConfirmDelete(null)}
|
|
className="p-2 hover:bg-slate-700/50 rounded-lg transition-colors"
|
|
>
|
|
<X className="w-5 h-5 text-slate-400" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="py-4">
|
|
<p className="text-slate-300">
|
|
Siz{" "}
|
|
<span className="font-semibold text-white">
|
|
{confirmDelete.username}
|
|
</span>{" "}
|
|
foydalanuvchini o'chirmoqchimisiz?
|
|
</p>
|
|
<div className="mt-3 p-3 bg-red-500/10 border border-red-500/30 rounded-lg">
|
|
<p className="text-sm text-red-300 font-medium flex items-center gap-2">
|
|
<AlertTriangle className="w-4 h-4" />
|
|
<span>Ushbu amalni qaytarib bo'lmaydi.</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-3 pt-2">
|
|
<button
|
|
onClick={() => setConfirmDelete(null)}
|
|
className="flex-1 px-4 py-3 border border-slate-600 hover:bg-slate-700/50 text-slate-300 font-medium rounded-lg transition-all"
|
|
>
|
|
Bekor qilish
|
|
</button>
|
|
<button
|
|
onClick={() => handleDelete(confirmDelete.id)}
|
|
className="flex-1 flex items-center justify-center gap-2 px-4 py-3 bg-gradient-to-r from-red-600 to-red-700 hover:from-red-500 hover:to-red-600 text-white font-medium rounded-lg transition-all shadow-lg"
|
|
>
|
|
<Trash2 className="w-4 h-4" />
|
|
<span>O'chirish</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function StatCard({
|
|
title,
|
|
value,
|
|
icon,
|
|
gradient,
|
|
}: {
|
|
title: string;
|
|
value: string;
|
|
icon: React.ReactNode;
|
|
gradient: string;
|
|
}) {
|
|
return (
|
|
<div className="group relative hover:scale-105 transition-transform duration-300">
|
|
<div
|
|
className={`absolute inset-0 bg-gradient-to-r ${gradient} rounded-xl blur-lg opacity-20 group-hover:opacity-40 transition-all`}
|
|
/>
|
|
<div
|
|
className={`relative bg-gradient-to-br ${gradient} bg-opacity-10 border border-white/10 backdrop-blur-sm rounded-xl p-6 shadow-xl hover:shadow-2xl transition-all hover:border-white/20`}
|
|
>
|
|
<div className="flex justify-between items-start mb-3">
|
|
<p className="text-slate-300 text-sm font-medium">{title}</p>
|
|
<div
|
|
className={`bg-gradient-to-br ${gradient} p-2 rounded-lg text-white shadow-lg`}
|
|
>
|
|
{icon}
|
|
</div>
|
|
</div>
|
|
<p className="text-3xl font-bold text-white">{value}</p>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|