131 lines
4.1 KiB
TypeScript
131 lines
4.1 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
import { useState } from "react";
|
||
import {
|
||
Table,
|
||
TableBody,
|
||
TableCell,
|
||
TableHead,
|
||
TableHeader,
|
||
TableRow,
|
||
} from "@/components/ui/table";
|
||
import { Button } from "@/components/ui/button";
|
||
import { Eye } from "lucide-react";
|
||
import DialogCampaignDetail from "../dialog/campaign-detail";
|
||
|
||
export default function UserTable() {
|
||
const data = [
|
||
{
|
||
durasi: "22/08/2025 - 22/08/2026",
|
||
media: "Media Online",
|
||
tujuan: "Sosialisasi",
|
||
materi: "Tersedia",
|
||
deskripsi:
|
||
"Lorem ipsum dolor sit amet consectetur. Tempor mi scelerisque enim semper sed nibh.",
|
||
status: "Selesai",
|
||
},
|
||
{
|
||
durasi: "22/08/2025 - 22/08/2026",
|
||
media: "Media Sosial",
|
||
tujuan: "Sosialisasi",
|
||
materi: "Tersedia",
|
||
deskripsi:
|
||
"Ultricies pellentesque ullamcorper mattis pellentesque. Amet eu ut.",
|
||
status: "Selesai",
|
||
},
|
||
];
|
||
|
||
const [selectedRow, setSelectedRow] = useState<any>(null);
|
||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||
|
||
const openDetail = (row: any) => {
|
||
setSelectedRow(row);
|
||
setIsDialogOpen(true);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<div className="flex justify-between items-center mb-5 flex-wrap gap-3">
|
||
<Link href={"/dashboard/user/create"}>
|
||
<Button className="bg-blue-600 hover:bg-blue-700 text-white">
|
||
Add New
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
|
||
<div className="bg-white shadow rounded-lg p-4">
|
||
<div className="overflow-x-auto">
|
||
<Table>
|
||
<TableHeader>
|
||
<TableRow>
|
||
<TableHead>Durasi</TableHead>
|
||
<TableHead>Media</TableHead>
|
||
<TableHead>Tujuan</TableHead>
|
||
<TableHead>Materi</TableHead>
|
||
<TableHead>Deskripsi Promote</TableHead>
|
||
<TableHead>Status</TableHead>
|
||
<TableHead>Tindakan</TableHead>
|
||
</TableRow>
|
||
</TableHeader>
|
||
|
||
<TableBody>
|
||
{data.map((row, i) => (
|
||
<TableRow key={i}>
|
||
<TableCell>{row.durasi}</TableCell>
|
||
<TableCell className="font-medium">{row.media}</TableCell>
|
||
<TableCell>{row.tujuan}</TableCell>
|
||
<TableCell>{row.materi}</TableCell>
|
||
<TableCell className="min-w-[200px] text-gray-600">
|
||
{row.deskripsi}
|
||
</TableCell>
|
||
<TableCell>
|
||
<span className="bg-green-100 text-green-700 px-3 py-1 rounded-full text-xs font-medium">
|
||
{row.status}
|
||
</span>
|
||
</TableCell>
|
||
<TableCell>
|
||
<Button
|
||
variant="link"
|
||
className="text-blue-600 p-0 h-auto font-medium flex items-center gap-1"
|
||
onClick={() => openDetail(row)}
|
||
>
|
||
<Eye className="h-4 w-4" />
|
||
Lihat
|
||
</Button>
|
||
</TableCell>
|
||
</TableRow>
|
||
))}
|
||
</TableBody>
|
||
</Table>
|
||
</div>
|
||
|
||
{/* Pagination */}
|
||
<div className="flex flex-col sm:flex-row sm:justify-between sm:items-center mt-4 text-sm text-gray-500 gap-2">
|
||
<div className="flex items-center">
|
||
<span>Rows per page:</span>
|
||
<select className="ml-2 border rounded px-1 py-0.5">
|
||
<option>6</option>
|
||
<option>12</option>
|
||
</select>
|
||
</div>
|
||
|
||
<div className="flex items-center justify-between sm:justify-end gap-2">
|
||
<span>1–1 of 1</span>
|
||
<div className="flex gap-1">
|
||
<button className="text-gray-400 hover:text-gray-600">◀</button>
|
||
<button className="text-gray-400 hover:text-gray-600">▶</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<DialogCampaignDetail
|
||
isOpen={isDialogOpen}
|
||
onClose={() => setIsDialogOpen(false)}
|
||
data={selectedRow}
|
||
/>
|
||
</>
|
||
);
|
||
}
|