137 lines
5.0 KiB
TypeScript
137 lines
5.0 KiB
TypeScript
"use client";
|
|
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
|
import { Link } from "@/i18n/routing";
|
|
import { Icon } from "@iconify/react/dist/iconify.js";
|
|
import QuestionsTable from "./components/questions-table";
|
|
import { useState } from "react";
|
|
|
|
interface statisticType {
|
|
incomingTotal: number;
|
|
createdTicketTotal: number;
|
|
todayIncomingTotal: number;
|
|
}
|
|
|
|
export default function Questions() {
|
|
const [statisticData, setStatisticData] = useState<statisticType>({
|
|
incomingTotal: 0,
|
|
createdTicketTotal: 0,
|
|
todayIncomingTotal: 0,
|
|
});
|
|
return (
|
|
<div>
|
|
<SiteBreadcrumb />
|
|
<div className="flex flex-col gap-4">
|
|
<div className="flex flex-row gap-4">
|
|
<div className="flex flex-col gap-4 w-[30%]">
|
|
<div className="flex flex-row gap-10 bg-white rounded-sm px-10 py-6 items-center">
|
|
<Icon icon="ion:ticket" width={56} />
|
|
<div className="flex flex-col gap-3">
|
|
<p className="text-3xl ">{statisticData.todayIncomingTotal}</p>
|
|
<p className="text-sm">Pertanyaan hari ini</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-row gap-10 bg-white rounded-sm px-10 py-6 items-center">
|
|
<Icon icon="ion:ticket" width={56} />
|
|
<div className="flex flex-col gap-3">
|
|
<p className="text-3xl ">{statisticData.incomingTotal}</p>
|
|
<p className="text-sm">Pertanyaan masuk</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-row gap-10 bg-white rounded-sm px-10 py-6 items-center">
|
|
<Icon icon="ion:ticket" width={56} />
|
|
<div className="flex flex-col gap-3">
|
|
<p className="text-3xl ">{statisticData.createdTicketTotal}</p>
|
|
<p className="text-sm">Tiket dibuat</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="w-[70%] bg-white py-6 px-10 rounded-sm flex flex-col gap-5 text-sm">
|
|
<p>Pertanyaan masuk berdasarkan sumber:</p>
|
|
<div className="grid grid-cols-2 gap-8 text-[#2563eb]">
|
|
<Link
|
|
href="/supervisor/communications/questions/emergency"
|
|
className="flex items-center gap-3"
|
|
>
|
|
<Icon
|
|
icon="material-symbols:emergency-home-rounded"
|
|
width={24}
|
|
color="#2563eb"
|
|
/>
|
|
Emergency Issue
|
|
</Link>
|
|
<Link
|
|
href="/supervisor/communications/questions/email"
|
|
className="flex items-center gap-3"
|
|
>
|
|
<Icon icon="ic:baseline-email" width={22} color="#2563eb" />
|
|
Email
|
|
</Link>
|
|
{/* <Link
|
|
href="/supervisor/communications/questions/facebook"
|
|
className="flex items-center gap-3"
|
|
>
|
|
<Icon icon="dashicons:facebook" width={24} color="#2563eb" />
|
|
Facebook
|
|
</Link>
|
|
<Link
|
|
href="/supervisor/communications/questions/x"
|
|
className="flex items-center gap-3"
|
|
>
|
|
<Icon icon="proicons:x-twitter" width={24} color="#2563eb" />X
|
|
</Link>
|
|
<Link
|
|
href="/supervisor/communications/questions/instagram"
|
|
className="flex items-center gap-3"
|
|
>
|
|
<Icon
|
|
icon="ant-design:instagram-filled"
|
|
width={24}
|
|
color="#2563eb"
|
|
/>
|
|
Instagram
|
|
</Link> */}
|
|
<Link
|
|
href="/supervisor/communications/questions/whatsapp"
|
|
className="flex items-center gap-3"
|
|
>
|
|
<Icon icon="ri:whatsapp-fill" width={24} color="#2563eb" />
|
|
Whatsapp
|
|
</Link>
|
|
{/* <Link
|
|
href="/supervisor/communications/questions/youtube"
|
|
className="flex items-center gap-3"
|
|
>
|
|
<Icon icon="mdi:youtube" width={24} color="#2563eb" />
|
|
Youtube
|
|
</Link> */}
|
|
<Link
|
|
href="/supervisor/communications/questions/inbox"
|
|
className="flex items-center gap-3"
|
|
>
|
|
<Icon
|
|
icon="material-symbols:inbox"
|
|
width={24}
|
|
color="#2563eb"
|
|
/>
|
|
Pesan Masuk
|
|
</Link>
|
|
<Link
|
|
href="/supervisor/communications/questions/comment"
|
|
className="flex items-center gap-3"
|
|
>
|
|
<Icon
|
|
icon="material-symbols-light:comment-rounded"
|
|
width={24}
|
|
color="#2563eb"
|
|
/>
|
|
Komentar Konten
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<QuestionsTable statisticData={(data) => setStatisticData(data)} />
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|