first commit
This commit is contained in:
Samandar Turgunboyev
199
src/pages/support/ui/SupportTours.tsx
Normal file
199
src/pages/support/ui/SupportTours.tsx
Normal file
@@ -0,0 +1,199 @@
|
||||
"use client";
|
||||
|
||||
import { Badge } from "@/shared/ui/badge";
|
||||
import { Button } from "@/shared/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/shared/ui/card";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/shared/ui/dialog";
|
||||
import { MessageCircle, Phone, User } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
|
||||
type SupportRequest = {
|
||||
id: number;
|
||||
name: string;
|
||||
phone: string;
|
||||
message: string;
|
||||
status: "Pending" | "Resolved";
|
||||
};
|
||||
|
||||
const initialRequests: SupportRequest[] = [
|
||||
{
|
||||
id: 1,
|
||||
name: "Alisher Karimov",
|
||||
phone: "+998 90 123 45 67",
|
||||
message: "Sayohat uchun viza hujjatlarini tayyorlashda yordam kerak.",
|
||||
status: "Pending",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Dilnoza Tursunova",
|
||||
phone: "+998 91 765 43 21",
|
||||
message: "To‘lov muvaffaqiyatli o‘tmadi, yordam bera olasizmi?",
|
||||
status: "Resolved",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: "Jamshid Abdullayev",
|
||||
phone: "+998 93 555 22 11",
|
||||
message: "Sayohat sanasini o‘zgartirishni istayman.",
|
||||
status: "Pending",
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Jamshid Abdullayev",
|
||||
phone: "+998 93 555 22 11",
|
||||
message: "Sayohat sanasini o‘zgartirishni istayman.",
|
||||
status: "Pending",
|
||||
},
|
||||
];
|
||||
|
||||
const SupportTours = () => {
|
||||
const [requests, setRequests] = useState<SupportRequest[]>(initialRequests);
|
||||
const [selected, setSelected] = useState<SupportRequest | null>(null);
|
||||
|
||||
const handleToggleStatus = (id: number) => {
|
||||
setRequests((prev) =>
|
||||
prev.map((req) =>
|
||||
req.id === id
|
||||
? {
|
||||
...req,
|
||||
status: req.status === "Pending" ? "Resolved" : "Pending",
|
||||
}
|
||||
: req,
|
||||
),
|
||||
);
|
||||
setSelected((prev) =>
|
||||
prev
|
||||
? {
|
||||
...prev,
|
||||
status: prev.status === "Pending" ? "Resolved" : "Pending",
|
||||
}
|
||||
: prev,
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-900 text-gray-100 p-6 space-y-6 w-full">
|
||||
<h1 className="text-3xl font-bold tracking-tight mb-4 text-white">
|
||||
Yordam so‘rovlari
|
||||
</h1>
|
||||
|
||||
<div className="grid gap-5 sm:grid-cols-3 lg:grid-cols-3">
|
||||
{requests.map((req) => (
|
||||
<Card
|
||||
key={req.id}
|
||||
className="bg-gray-800/70 border border-gray-700 shadow-md hover:shadow-lg hover:bg-gray-800 transition-all duration-200"
|
||||
>
|
||||
<CardHeader className="pb-2">
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
<span className="flex items-center gap-2 text-lg font-semibold text-white">
|
||||
<User className="w-5 h-5 text-blue-400" />
|
||||
{req.name}
|
||||
</span>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`px-2 py-1 rounded-md text-xs font-medium ${
|
||||
req.status === "Pending"
|
||||
? "bg-red-500/10 text-red-400 border-red-400/40"
|
||||
: "bg-green-500/10 text-green-400 border-green-400/40"
|
||||
}`}
|
||||
>
|
||||
{req.status === "Pending" ? "Kutilmoqda" : "Yakunlangan"}
|
||||
</Badge>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
|
||||
<CardContent className="space-y-3 mt-1">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-400">
|
||||
<Phone className="w-4 h-4 text-gray-400" />
|
||||
{req.phone}
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-2 text-gray-300">
|
||||
<MessageCircle className="w-4 h-4 text-gray-400 mt-1" />
|
||||
<p className="text-sm leading-relaxed">{req.message}</p>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="mt-3 w-full border-gray-600 text-gray-200 hover:bg-gray-700 hover:text-white"
|
||||
onClick={() => setSelected(req)}
|
||||
>
|
||||
Batafsil ko‘rish
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Modal (Dialog) */}
|
||||
<Dialog open={!!selected} onOpenChange={() => setSelected(null)}>
|
||||
<DialogContent className="bg-gray-800 border border-gray-700 text-gray-100 sm:max-w-lg">
|
||||
<DialogHeader>
|
||||
<DialogTitle className="text-xl font-semibold text-white flex items-center gap-2">
|
||||
<User className="w-5 h-5 text-blue-400" />
|
||||
{selected?.name}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-3 mt-2">
|
||||
<div className="flex items-center gap-2 text-gray-400">
|
||||
<Phone className="w-4 h-4" />
|
||||
{selected?.phone}
|
||||
</div>
|
||||
<div className="flex items-start gap-2 text-gray-300">
|
||||
<MessageCircle className="w-4 h-4 mt-1" />
|
||||
<p className="text-sm leading-relaxed">{selected?.message}</p>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm text-gray-400">Status:</span>
|
||||
<Badge
|
||||
variant="outline"
|
||||
className={`px-2 py-1 rounded-md text-xs font-medium ${
|
||||
selected?.status === "Pending"
|
||||
? "bg-red-500/10 text-red-400 border-red-400/40"
|
||||
: "bg-green-500/10 text-green-400 border-green-400/40"
|
||||
}`}
|
||||
>
|
||||
{selected?.status === "Pending" ? "Kutilmoqda" : "Yakunlangan"}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="flex justify-end mt-4">
|
||||
<Button
|
||||
variant="outline"
|
||||
className="border-gray-600 text-gray-200 hover:bg-gray-700 hover:text-white"
|
||||
onClick={() => setSelected(null)}
|
||||
>
|
||||
Yopish
|
||||
</Button>
|
||||
{selected && (
|
||||
<Button
|
||||
onClick={() => handleToggleStatus(selected.id)}
|
||||
className={`${
|
||||
selected.status === "Pending"
|
||||
? "bg-green-600 hover:bg-green-700"
|
||||
: "bg-red-600 hover:bg-red-700"
|
||||
} text-white`}
|
||||
>
|
||||
{selected.status === "Pending"
|
||||
? "Yakunlandi deb belgilash"
|
||||
: "Kutilmoqda deb belgilash"}
|
||||
</Button>
|
||||
)}
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SupportTours;
|
||||
Reference in New Issue
Block a user