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

first commit

Browse Source
This commit is contained in:
Samandar Turgunboyev
2025-10-18 17:14:59 +05:00
parent edf364b389
commit 036a36ce90
92 changed files with 14614 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

280
src/pages/support/ui/SupportAgency.tsx Normal file
View File

@@ -0,0 +1,280 @@
import { XIcon } from "lucide-react";
import { useMemo, useState } from "react";
import { Link } from "react-router-dom";
interface Data {
id: number;
name: string;
address: string;
email: string;
phone: string;
instagram: string;
web_site: string;
documents: string[];
}
const sampleData: Data[] = [
{
id: 1,
name: "Alpha Travel",
address: "Tashkent, Mustaqillik ko'chasi 12",
email: "alpha@example.com",
phone: "+998901234567",
instagram: "https://instagram.com/alphatravel",
web_site: "https://alphatravel.uz",
documents: [
"https://turan-travel.com/uploads/files/license/sertificate.jpg",
"https://turan-travel.com/uploads/files/license/sertificate.jpg",
],
},
{
id: 2,
name: "Samarkand Tours",
address: "Samarkand, Registon 5",
email: "info@samarktours.uz",
phone: "+998903334455",
instagram: "https://instagram.com/samarktours",
web_site: "https://samarktours.uz",
documents: [
"https://turan-travel.com/uploads/files/license/sertificate.jpg",
],
},
];
const SupportAgency = ({ requests = sampleData }) => {
const [query, setQuery] = useState("");
const [selected, setSelected] = useState<Data | null>(null);
const filtered = useMemo(() => {
if (!query.trim()) return requests;
const q = query.toLowerCase();
return requests.filter(
(r) =>
(r.name && r.name.toLowerCase().includes(q)) ||
(r.email && r.email.toLowerCase().includes(q)) ||
(r.phone && r.phone.toLowerCase().includes(q)),
);
}, [requests, query]);
return (
<div className="p-4 w-full mx-auto">
<h2 className="text-2xl font-semibold mb-4">Agentlik soʻrovlari</h2>
<div className="flex gap-3 mb-6">
<input
value={query}
onChange={(e) => setQuery(e.target.value)}
placeholder="Qidiruv (ism, email yoki telefon)..."
className="flex-1 p-2 border rounded-md focus:outline-none focus:ring"
/>
<button
onClick={() => setQuery("")}
className="px-4 py-2 bg-gray-500 rounded-md hover:bg-gray-300 transition"
>
Tozalash
</button>
</div>
{filtered.length === 0 ? (
<div className="text-center text-gray-500">Soʻrov topilmadi.</div>
) : (
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
{filtered.map((r) => (
<div
key={r.id}
className="border rounded-lg p-4 shadow-sm hover:shadow-md transition bg-gray-800 text-white"
>
<div className="flex items-start justify-between">
<div>
<h3 className="text-lg font-medium">{r.name}</h3>
<p className="text-md">{r.address}</p>
</div>
<div className="text-md">{r.phone}</div>
</div>
<div className="mt-3 text-sm text-white">
<div>
<strong>Email:</strong>{" "}
<Link to={`mailto:${r.email}`} className="text-white">
{r.email}
</Link>
</div>
{r.instagram && (
<div>
<strong>Instagram:</strong>{" "}
<a
href={r.instagram}
target="_blank"
rel="noopener noreferrer"
className="text-white hover:underline"
>
@
{r.instagram.replace(
/^https?:\/\/(www\.)?instagram\.com\/?/,
"",
)}
</a>
</div>
)}
{r.web_site && (
<div>
<strong>Website:</strong>{" "}
<a
href={r.web_site}
target="_blank"
rel="noopener noreferrer"
className="text-white hover:underline"
>
{r.web_site.replace(/^https?:\/\//, "")}
</a>
</div>
)}
</div>
<div className="mt-4 flex gap-2">
<button
onClick={() => setSelected(r)}
className="px-3 py-1 rounded bg-blue-600 text-white text-sm hover:bg-blue-700 transition"
>
Tafsilotlar
</button>
<Link
to={`mailto:${r.email}`}
className="px-3 py-1 rounded border text-sm transition"
>
Javob yozish
</Link>
</div>
</div>
))}
</div>
)}
{selected && (
<div
className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4"
onClick={() => setSelected(null)}
>
<div
className="bg-gray-900 rounded-lg max-w-2xl w-full p-6 relative max-h-[90vh] overflow-y-auto"
onClick={(e) => e.stopPropagation()}
>
<button
onClick={() => setSelected(null)}
className="absolute top-3 right-3 text-white cursor-pointer text-2xl"
>
<XIcon />
</button>
<h3 className="text-xl font-semibold mb-2">{selected.name}</h3>
<p className="text-md text-white mb-4">{selected.address}</p>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
<div>
<div className="text-md text-white">Email</div>
<a
href={`mailto:${selected.email}`}
className="block text-white hover:underline"
>
{selected.email}
</a>
</div>
<div>
<div className="text-md text-white">Telefon</div>
<div>{selected.phone}</div>
</div>
<div>
<div className="text-md text-white">Instagram</div>
{selected.instagram ? (
<a
href={selected.instagram}
target="_blank"
rel="noopener noreferrer"
className="block text-white hover:underline"
>
{selected.instagram}
</a>
) : (
<div className="text-white">—</div>
)}
</div>
<div>
<div className="text-xs text-white">Website</div>
{selected.web_site ? (
<a
href={selected.web_site}
target="_blank"
rel="noopener noreferrer"
className="block text-white hover:underline"
>
{selected.web_site}
</a>
) : (
<div className="text-gray-400">—</div>
)}
</div>
</div>
<div className="mt-5">
<div className="text-sm font-medium mb-2">Hujjatlar</div>
{selected.documents && selected.documents.length > 0 ? (
<div className="grid grid-cols-2 sm:grid-cols-3 gap-3">
{selected.documents.map((doc, i) => (
<a
key={i}
href={doc}
target="_blank"
rel="noopener noreferrer"
className="group relative aspect-square border-2 border-gray-200 rounded-lg overflow-hidden hover:border-blue-500 transition"
>
<img
src={doc}
alt={`Hujjat ${i + 1}`}
className="w-full h-full object-cover"
/>
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/10 transition flex items-end">
<div className="w-full bg-gradient-to-t from-black/70 to-transparent p-2">
<span className="text-white text-xs font-medium">
Hujjat {i + 1}
</span>
</div>
</div>
</a>
))}
</div>
) : (
<div className="text-gray-500">Hujjat topilmadi</div>
)}
</div>
<div className="mt-6 flex justify-end gap-3">
<button
onClick={() => {
alert("Qabul qilindi (ishlab chiqishingiz kerak)");
setSelected(null);
}}
className="px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700 transition"
>
Qabul qilish
</button>
<button
onClick={() => {
alert("Rad etildi (ishlab chiqishingiz kerak)");
setSelected(null);
}}
className="px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700 transition"
>
Rad etish
</button>
</div>
</div>
</div>
)}
</div>
);
};
export default SupportAgency;

199
src/pages/support/ui/SupportTours.tsx Normal file
View 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;