Samandar/simple-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

barcha apilar ulandi

Browse Source
This commit is contained in:
Samandar Turgunboyev
2025-10-31 18:42:21 +05:00
parent 39f5b8ca3c
commit 77bce24399
19 changed files with 1306 additions and 656 deletions
Download Patch File Download Diff File Expand all files Collapse all files

195
src/pages/agencies/ui/AgencyUsersSection.tsx Normal file
View File

@@ -0,0 +1,195 @@
import formatPhone from "@/shared/lib/formatPhone";
import { Badge } from "@/shared/ui/badge";
import { Button } from "@/shared/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/ui/card";
import {
Dialog,
DialogContent,
DialogDescription,
DialogFooter,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/shared/ui/dialog";
import { Pencil, Phone, Shield, Trash2, User } from "lucide-react";
import { useTranslation } from "react-i18next";
interface AgencyUser {
first_name: string;
id: number;
last_name: string;
phone: string;
role: string;
}
interface AgencyUsersProps {
users: AgencyUser[];
onEdit: (userId: number) => void;
onDelete: (userId: number) => void;
isLoading?: boolean;
}
export function AgencyUsersSection({
users,
onEdit,
onDelete,
isLoading = false,
}: AgencyUsersProps) {
const { t } = useTranslation();
const getRoleBadge = (role: string) => {
const roleColors: Record<string, string> = {
admin: "bg-purple-500/20 text-purple-300 border-purple-500/40",
manager: "bg-blue-500/20 text-blue-300 border-blue-500/40",
user: "bg-gray-500/20 text-gray-300 border-gray-500/40",
agent: "bg-green-500/20 text-green-300 border-green-500/40",
};
return (
<Badge className={roleColors[role] || roleColors.user}>
{role.toUpperCase()}
</Badge>
);
};
if (isLoading) {
return (
<Card className="border border-gray-700 shadow-lg bg-gray-800">
<CardHeader>
<CardTitle className="text-2xl text-white flex items-center gap-2">
<User className="w-6 h-6" />
{t("Agentlik foydalanuvchilari")}
</CardTitle>
</CardHeader>
<CardContent>
<div className="text-center text-gray-400 py-8">
{t("Ma'lumotlar yuklanmoqda...")}
</div>
</CardContent>
</Card>
);
}
if (!users || users.length === 0) {
return (
<Card className="border border-gray-700 shadow-lg bg-gray-800">
<CardHeader>
<CardTitle className="text-2xl text-white flex items-center gap-2">
<User className="w-6 h-6" />
{t("Agentlik foydalanuvchilari")}
</CardTitle>
</CardHeader>
<CardContent>
<div className="text-center text-gray-400 py-8">
{t("Hozircha foydalanuvchilar yo'q")}
</div>
</CardContent>
</Card>
);
}
return (
<Card className="border border-gray-700 shadow-lg bg-gray-800">
<CardHeader>
<CardTitle className="text-2xl text-white flex items-center gap-2">
<User className="w-6 h-6" />
{t("Agentlik foydalanuvchilari")}
</CardTitle>
<p className="text-gray-400">
{t("Agentlik bilan bog'langan foydalanuvchilar ro'yxati")}
</p>
</CardHeader>
<CardContent>
<div className="space-y-3">
{users.map((user) => (
<div
key={user.id}
className="p-5 border border-gray-700 rounded-xl bg-gray-800 hover:bg-gray-750 transition-all"
>
<div className="flex items-center justify-between">
<div className="flex items-center gap-4 flex-1">
<div className="w-12 h-12 rounded-full bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center">
<User className="w-6 h-6 text-white" />
</div>
<div className="flex-1">
<div className="flex items-center gap-3 mb-2">
<h3 className="text-lg font-semibold text-white">
{user.first_name} {user.last_name}
</h3>
{getRoleBadge(user.role)}
</div>
<div className="flex flex-wrap items-center gap-4 text-sm">
<div className="flex items-center gap-2 text-gray-400">
<Phone className="w-4 h-4" />
<span>{formatPhone(user.phone)}</span>
</div>
<div className="flex items-center gap-2 text-gray-400">
<Shield className="w-4 h-4" />
<span>ID: {user.id}</span>
</div>
</div>
</div>
</div>
<div className="flex items-center gap-2">
{/* Edit Button */}
<Button
variant="outline"
size="icon"
onClick={() => onEdit(user.id)}
className="border-gray-600 bg-gray-700 hover:bg-gray-600 text-blue-400 hover:text-blue-300"
>
<Pencil className="w-4 h-4" />
</Button>
{/* Delete Alert Dialog */}
<Dialog>
<DialogTrigger asChild>
<Button
variant="outline"
size="icon"
className="border-gray-600 bg-gray-700 hover:bg-red-900/20 hover:border-red-500 text-red-400 hover:text-red-300"
>
<Trash2 className="w-4 h-4" />
</Button>
</DialogTrigger>
<DialogContent className="bg-gray-800 border-gray-700 text-white">
<DialogHeader>
<DialogTitle>
{t("Foydalanuvchini o'chirish")}
</DialogTitle>
<DialogDescription className="text-gray-400">
{t("Haqiqatan ham")}{" "}
<span className="font-semibold text-white">
{user.first_name} {user.last_name}
</span>{" "}
{t(
"ni o'chirmoqchimisiz? Bu amalni qaytarib bo'lmaydi.",
)}
</DialogDescription>
</DialogHeader>
<DialogFooter>
<Button className="border-gray-600 bg-gray-700 hover:bg-gray-600 text-white">
{t("Bekor qilish")}
</Button>
<Button
onClick={() => onDelete(user.id)}
className="bg-red-600 hover:bg-red-700 text-white"
>
{t("O'chirish")}
</Button>
</DialogFooter>
</DialogContent>
</Dialog>
</div>
</div>
</div>
))}
</div>
</CardContent>
</Card>
);
}