first commit
This commit is contained in:
Samandar Turgunboyev
398
src/pages/users/User.tsx
Normal file
398
src/pages/users/User.tsx
Normal file
@@ -0,0 +1,398 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user