95 lines
3.3 KiB
TypeScript
95 lines
3.3 KiB
TypeScript
"use client";
|
|
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
|
import { Progress } from "@/components/ui/progress";
|
|
import { getUserFeedbacks } from "@/service/service/master/faq";
|
|
import { Icon } from "@iconify/react/dist/iconify.js";
|
|
import { useEffect, useState } from "react";
|
|
|
|
export default function UserFeedback() {
|
|
const [listData, setListData] = useState<any>([]);
|
|
|
|
useEffect(() => {
|
|
initState();
|
|
}, []);
|
|
async function initState() {
|
|
const response = await getUserFeedbacks();
|
|
console.log("ssss", response?.data?.data);
|
|
setListData(response?.data?.data);
|
|
}
|
|
|
|
const renderStar = (count: number) => {
|
|
const mapped = [1, 2, 3, 4, 5];
|
|
return (
|
|
<div className="flex flex-row gap-3 items-center">
|
|
{mapped?.map((row) =>
|
|
row < count + 1 ? (
|
|
<Icon key={row} icon="emojione:star" width={33} />
|
|
) : (
|
|
<Icon key={row} icon="emojione-monotone:star" width={33} />
|
|
)
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
return (
|
|
<div>
|
|
<SiteBreadcrumb />
|
|
<div className="flex flex-col gap-2 bg-white dark:bg-black p-4">
|
|
<p className="text-lg">Hasil Feedback</p>
|
|
<div className="grid grid-cols-2 gap-5">
|
|
{listData?.map(
|
|
(list: any) =>
|
|
list?.avgScore !== "NaN" && (
|
|
<div
|
|
key={list?.id}
|
|
className="flex flex-col gap-2 bg-gray-100 dark:bg-blue-950 rounded-md p-5"
|
|
>
|
|
<div className="flex flex-row gap-3 items-center">
|
|
<p className="text-3xl">{parseInt(list?.avgScore)}</p>
|
|
{renderStar(parseInt(list?.avgScore))}
|
|
</div>
|
|
<p className="font-semibold">{list?.question}</p>
|
|
<div className="flex flex-row gap-3 items-center">
|
|
<p className="w-[120px]">Penilaian 5</p>
|
|
<Progress
|
|
value={parseInt(list?.score5)}
|
|
className="w-[70%]"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-row gap-3 items-center">
|
|
<p className="w-[120px]">Penilaian 4</p>
|
|
<Progress
|
|
value={parseInt(list?.score4)}
|
|
className="w-[70%]"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-row gap-3 items-center">
|
|
<p className="w-[120px]">Penilaian 3</p>
|
|
<Progress
|
|
value={parseInt(list?.score3)}
|
|
className="w-[70%]"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-row gap-3 items-center">
|
|
<p className="w-[120px]">Penilaian 2</p>
|
|
<Progress
|
|
value={parseInt(list?.score2)}
|
|
className="w-[70%]"
|
|
/>
|
|
</div>
|
|
<div className="flex flex-row gap-3 items-center">
|
|
<p className="w-[120px]">Penilaian 1</p>
|
|
<Progress
|
|
value={parseInt(list?.score1)}
|
|
className="w-[70%]"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|