123 lines
3.8 KiB
TypeScript
123 lines
3.8 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 CoordinatorTable() {
|
|||
|
|
const data = [
|
|||
|
|
{
|
|||
|
|
durasi: "22/08/2025 - 22/08/2026",
|
|||
|
|
media: "Media Online",
|
|||
|
|
tujuan: "Sosialisasi",
|
|||
|
|
materi: "Tersedia",
|
|||
|
|
description:
|
|||
|
|
"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",
|
|||
|
|
description:
|
|||
|
|
"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="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.description}
|
|||
|
|
</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}
|
|||
|
|
/>
|
|||
|
|
</>
|
|||
|
|
);
|
|||
|
|
}
|