482 lines
16 KiB
TypeScript
482 lines
16 KiB
TypeScript
"use client";
|
|
|
|
import Cookies from "js-cookie";
|
|
import Link from "next/link";
|
|
import { useEffect, useState } from "react";
|
|
import { Article } from "@/types/globals";
|
|
import {
|
|
Popover,
|
|
PopoverContent,
|
|
PopoverTrigger,
|
|
} from "@/components/ui/popover";
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "@/components/ui/accordion";
|
|
import "react-datepicker/dist/react-datepicker.css";
|
|
import { Checkbox } from "@/components/ui/checkbox";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Calendar } from "@/components/ui/calendar";
|
|
import ApexChartColumn from "@/components/main/dashboard/chart/column-chart";
|
|
import CustomPagination from "@/components/layout/custom-pagination";
|
|
import { motion } from "framer-motion";
|
|
import { Input } from "@/components/ui/input";
|
|
import {
|
|
SelectTrigger,
|
|
SelectValue,
|
|
SelectContent,
|
|
SelectItem,
|
|
Select,
|
|
} from "@/components/ui/select";
|
|
import { Badge } from "lucide-react";
|
|
|
|
type ArticleData = Article & {
|
|
no: number;
|
|
createdAt: string;
|
|
};
|
|
|
|
interface TopPages {
|
|
id: number;
|
|
no: number;
|
|
title: string;
|
|
viewCount: number;
|
|
}
|
|
|
|
interface PostCount {
|
|
userLevelId: number;
|
|
no: number;
|
|
userLevelName: string;
|
|
totalArticle: number;
|
|
}
|
|
|
|
export default function DashboardContainer() {
|
|
const [roleName, setRoleName] = useState<string | undefined>();
|
|
useEffect(() => {
|
|
const role = Cookies.get("roleName");
|
|
setRoleName(role);
|
|
}, []);
|
|
|
|
const username = Cookies.get("username");
|
|
const fullname = Cookies.get("ufne");
|
|
const [page, setPage] = useState(1);
|
|
const [totalPage, setTotalPage] = useState(1);
|
|
const [topPagesTotalPage, setTopPagesTotalPage] = useState(1);
|
|
const [article, setArticle] = useState<ArticleData[]>([]);
|
|
// const [analyticsView, setAnalyticView] = useState<string[]>(["comment", "view", "share"]);
|
|
// const [startDateValue, setStartDateValue] = useState(parseDate(convertDateFormatNoTimeV2(new Date())));
|
|
// const [postContentDate, setPostContentDate] = useState({
|
|
// startDate: parseDate(convertDateFormatNoTimeV2(new Date(new Date().setDate(new Date().getDate() - 7)))),
|
|
// endDate: parseDate(convertDateFormatNoTimeV2(new Date())),
|
|
// });
|
|
|
|
const [startDateValue, setStartDateValue] = useState(new Date());
|
|
const [analyticsView, setAnalyticView] = useState<string[]>([]);
|
|
const options = [
|
|
{ label: "Comment", value: "comment" },
|
|
{ label: "View", value: "view" },
|
|
{ label: "Share", value: "share" },
|
|
];
|
|
const handleChange = (value: string, checked: boolean) => {
|
|
if (checked) {
|
|
setAnalyticView([...analyticsView, value]);
|
|
} else {
|
|
setAnalyticView(analyticsView.filter((v) => v !== value));
|
|
}
|
|
};
|
|
const [postContentDate, setPostContentDate] = useState({
|
|
startDate: new Date(new Date().setDate(new Date().getDate() - 7)),
|
|
endDate: new Date(),
|
|
});
|
|
|
|
const [typeDate, setTypeDate] = useState("monthly");
|
|
const [summary, setSummary] = useState<any>();
|
|
|
|
const [topPages, setTopPages] = useState<TopPages[]>([]);
|
|
const [postCount, setPostCount] = useState<PostCount[]>([]);
|
|
|
|
// useEffect(() => {
|
|
// fetchSummary();
|
|
// }, []);
|
|
|
|
// useEffect(() => {
|
|
// initState();
|
|
// }, [page]);
|
|
|
|
// async function initState() {
|
|
// const req = {
|
|
// limit: "5",
|
|
// page: page,
|
|
// search: "",
|
|
// };
|
|
// const res = await getListArticle(req);
|
|
// setArticle(res.data?.data);
|
|
// setTotalPage(res?.data?.meta?.totalPage);
|
|
// }
|
|
|
|
// async function fetchSummary() {
|
|
// const res = await getStatisticSummary();
|
|
// setSummary(res?.data?.data);
|
|
// }
|
|
|
|
// useEffect(() => {
|
|
// fetchTopPages();
|
|
// }, [page]);
|
|
|
|
// async function fetchTopPages() {
|
|
// const req = {
|
|
// limit: "10",
|
|
// page: page,
|
|
// search: "",
|
|
// };
|
|
// const res = await getTopArticles(req);
|
|
// setTopPages(getTableNumber(10, res.data?.data));
|
|
// setTopPagesTotalPage(res?.data?.meta?.totalPage);
|
|
// }
|
|
|
|
// useEffect(() => {
|
|
// fetchPostCount();
|
|
// }, [postContentDate]);
|
|
// async function fetchPostCount() {
|
|
// const getDate = (data: any) => {
|
|
// return `${data.year}-${data.month < 10 ? `0${data.month}` : data.month}-${
|
|
// data.day < 10 ? `0${data.day}` : data.day
|
|
// }`;
|
|
// };
|
|
// const res = await getUserLevelDataStat(
|
|
// getDate(postContentDate.startDate),
|
|
// getDate(postContentDate.endDate)
|
|
// );
|
|
// setPostCount(getTableNumber(10, res?.data?.data));
|
|
// }
|
|
|
|
const getTableNumber = (limit: number, data: any) => {
|
|
if (data) {
|
|
const startIndex = limit * (page - 1);
|
|
let iterate = 0;
|
|
const newData = data.map((value: any) => {
|
|
iterate++;
|
|
value.no = startIndex + iterate;
|
|
return value;
|
|
});
|
|
return newData;
|
|
}
|
|
};
|
|
|
|
const getMonthYear = (date: any) => {
|
|
return date.month + " " + date.year;
|
|
};
|
|
const getMonthYearName = (date: any) => {
|
|
const newDate = new Date(date);
|
|
|
|
const months = [
|
|
"Januari",
|
|
"Februari",
|
|
"Maret",
|
|
"April",
|
|
"Mei",
|
|
"Juni",
|
|
"Juli",
|
|
"Agustus",
|
|
"September",
|
|
"Oktober",
|
|
"November",
|
|
"Desember",
|
|
];
|
|
const year = newDate.getFullYear();
|
|
|
|
const month = months[newDate.getMonth()];
|
|
return month + " " + year;
|
|
};
|
|
|
|
if (!roleName) return null;
|
|
const AdminDashboard = () => {
|
|
const tasks = [
|
|
{
|
|
id: "1",
|
|
title: "MediaHUB Content Aggregator",
|
|
author: "John Kontributor",
|
|
category: "Product",
|
|
date: "2026-02-13",
|
|
status: "OPEN",
|
|
},
|
|
{
|
|
id: "2",
|
|
title:
|
|
"Mudik Nyaman Bersama Pertamina: Layanan 24 Jam, Motoris, dan Fasilitas Lengkap",
|
|
author: "Jane Kontributor",
|
|
category: "Service",
|
|
date: "2026-02-13",
|
|
status: "OPEN",
|
|
},
|
|
{
|
|
id: "3",
|
|
title: "Artifintel Services Update",
|
|
author: "Alex Approver",
|
|
category: "Event",
|
|
date: "2026-02-13",
|
|
status: "CLOSED",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-8">
|
|
{/* HEADER */}
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-slate-800">Admin Dashboard</h1>
|
|
<p className="text-slate-500">
|
|
Review and manage content submissions
|
|
</p>
|
|
</div>
|
|
|
|
{/* STAT CARDS */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{[
|
|
{ title: "Open Tasks", value: 2, color: "bg-yellow-500" },
|
|
{ title: "Closed Tasks", value: 2, color: "bg-green-600" },
|
|
{ title: "Total Submissions", value: 4, color: "bg-blue-600" },
|
|
{ title: "Rejected", value: 7, color: "bg-red-600" },
|
|
].map((card, i) => (
|
|
<div
|
|
key={i}
|
|
className="bg-white rounded-2xl shadow border p-6 flex justify-between items-center"
|
|
>
|
|
<div>
|
|
<p className="text-sm text-slate-500">{card.title}</p>
|
|
<h2 className="text-3xl font-bold text-slate-800 mt-2">
|
|
{card.value}
|
|
</h2>
|
|
</div>
|
|
<div className={`w-12 h-12 rounded-xl ${card.color}`} />
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* TASK LIST */}
|
|
<div className="bg-white rounded-2xl shadow border p-6 space-y-6">
|
|
{/* Title */}
|
|
<div className="flex items-center justify-between">
|
|
<h2 className="text-lg font-semibold">
|
|
Task List{" "}
|
|
<span className="ml-2 text-xs bg-amber-100 text-amber-600 px-3 py-1 rounded-full">
|
|
{tasks.length} Tasks
|
|
</span>
|
|
</h2>
|
|
</div>
|
|
|
|
{/* Filters */}
|
|
<div className="flex flex-wrap gap-4">
|
|
<Input type="date" className="w-[180px]" />
|
|
<Input type="date" className="w-[180px]" />
|
|
<Select>
|
|
<SelectTrigger className="w-[150px]">
|
|
<SelectValue placeholder="Status" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
<SelectItem value="open">Open</SelectItem>
|
|
<SelectItem value="closed">Closed</SelectItem>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
|
|
{/* Accordion List */}
|
|
<Accordion type="single" collapsible className="space-y-4">
|
|
{tasks.map((task) => (
|
|
<AccordionItem
|
|
key={task.id}
|
|
value={task.id}
|
|
className="border rounded-xl px-4"
|
|
>
|
|
<AccordionTrigger className="hover:no-underline">
|
|
<div className="flex items-center justify-between w-full">
|
|
<div className="text-left">
|
|
<p className="font-medium text-slate-800">{task.title}</p>
|
|
<p className="text-sm text-slate-500 mt-1">
|
|
{task.author} • {task.category} • {task.date}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4">
|
|
<Badge
|
|
className={
|
|
task.status === "OPEN"
|
|
? "bg-yellow-100 text-yellow-600"
|
|
: "bg-green-100 text-green-600"
|
|
}
|
|
>
|
|
{task.status}
|
|
</Badge>
|
|
|
|
{/* Mini Progress */}
|
|
<div className="flex gap-1">
|
|
<div className="w-6 h-1 bg-green-500 rounded" />
|
|
<div className="w-6 h-1 bg-yellow-500 rounded" />
|
|
<div className="w-6 h-1 bg-gray-300 rounded" />
|
|
<div className="w-6 h-1 bg-gray-300 rounded" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AccordionTrigger>
|
|
|
|
<AccordionContent>
|
|
<div className="mt-4 bg-slate-50 rounded-xl border p-6 space-y-6">
|
|
{/* Title */}
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-5 h-5 rounded-full border-2 border-amber-500 flex items-center justify-center">
|
|
<div className="w-2 h-2 bg-amber-500 rounded-full" />
|
|
</div>
|
|
<h3 className="font-semibold text-slate-700">
|
|
Document Flow Status
|
|
</h3>
|
|
</div>
|
|
|
|
{/* Stepper */}
|
|
<div className="relative">
|
|
{/* Line */}
|
|
<div className="absolute top-5 left-0 right-0 h-[2px] bg-slate-200" />
|
|
|
|
<div className="relative grid grid-cols-4 text-center">
|
|
{/* STEP 1 */}
|
|
<div className="flex flex-col items-center">
|
|
<div className="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center text-white">
|
|
✓
|
|
</div>
|
|
<p className="mt-2 text-sm font-medium text-slate-700">
|
|
Submission
|
|
</p>
|
|
<p className="text-xs text-slate-500">
|
|
Feb 13, 2026 09:00
|
|
</p>
|
|
</div>
|
|
|
|
{/* STEP 2 */}
|
|
<div className="flex flex-col items-center">
|
|
<div className="w-10 h-10 rounded-full bg-amber-500 flex items-center justify-center text-white">
|
|
●
|
|
</div>
|
|
<p className="mt-2 text-sm font-medium text-slate-700">
|
|
Technical Review
|
|
</p>
|
|
<p className="text-xs text-slate-500">
|
|
Feb 13, 2026 11:00
|
|
</p>
|
|
</div>
|
|
|
|
{/* STEP 3 */}
|
|
<div className="flex flex-col items-center">
|
|
<div className="w-10 h-10 rounded-full border-2 border-slate-300 bg-white" />
|
|
<p className="mt-2 text-sm font-medium text-slate-400">
|
|
Admin Verification
|
|
</p>
|
|
<p className="text-xs text-slate-400">Waiting</p>
|
|
</div>
|
|
|
|
{/* STEP 4 */}
|
|
<div className="flex flex-col items-center">
|
|
<div className="w-10 h-10 rounded-full border-2 border-slate-300 bg-white" />
|
|
<p className="mt-2 text-sm font-medium text-slate-400">
|
|
Final Approval
|
|
</p>
|
|
<p className="text-xs text-slate-400">Waiting</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
))}
|
|
</Accordion>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const ContributorDashboard = () => {
|
|
return (
|
|
<div className="space-y-8">
|
|
<div>
|
|
<h1 className="text-2xl font-bold text-slate-800">Dashboard</h1>
|
|
</div>
|
|
|
|
{/* STAT CARDS */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{[
|
|
{
|
|
title: "Total Content",
|
|
value: 24,
|
|
color: "bg-blue-600",
|
|
growth: "+12%",
|
|
},
|
|
{
|
|
title: "Pending Approval",
|
|
value: 8,
|
|
color: "bg-yellow-500",
|
|
growth: "+3",
|
|
},
|
|
{
|
|
title: "Published",
|
|
value: 16,
|
|
color: "bg-green-600",
|
|
growth: "+5",
|
|
},
|
|
{
|
|
title: "Rejected",
|
|
value: 2,
|
|
color: "bg-red-600",
|
|
growth: "-1",
|
|
},
|
|
].map((card, i) => (
|
|
<div
|
|
key={i}
|
|
className="bg-white rounded-2xl shadow border p-6 flex justify-between items-center"
|
|
>
|
|
<div>
|
|
<p className="text-sm text-slate-500">{card.title}</p>
|
|
<h2 className="text-3xl font-bold text-slate-800 mt-2">
|
|
{card.value}
|
|
</h2>
|
|
</div>
|
|
|
|
<div className="text-right">
|
|
<p className="text-sm text-green-600 font-medium">
|
|
{card.growth}
|
|
</p>
|
|
<div className={`w-10 h-10 rounded-xl mt-2 ${card.color}`} />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
{/* CONTENT + QUICK ACTIONS */}
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<div className="lg:col-span-2 bg-white rounded-2xl shadow border p-6">
|
|
<h2 className="font-semibold mb-4">Recent Content</h2>
|
|
{/* isi list content di sini */}
|
|
</div>
|
|
|
|
<div className="bg-amber-700 text-white rounded-2xl shadow p-6 space-y-4">
|
|
<h2 className="font-semibold">Quick Actions</h2>
|
|
|
|
<button className="w-full bg-amber-600 py-2 rounded-lg">
|
|
+ Create New Article
|
|
</button>
|
|
|
|
<button className="w-full bg-amber-600 py-2 rounded-lg">
|
|
+ Update Product
|
|
</button>
|
|
|
|
<button className="w-full bg-white text-amber-700 py-2 rounded-lg">
|
|
View All Actions
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<>{roleName === "Admin" ? <AdminDashboard /> : <ContributorDashboard />}</>
|
|
);
|
|
}
|