88 lines
3.2 KiB
TypeScript
88 lines
3.2 KiB
TypeScript
"use client";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
|
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
|
|
|
import CollaborationTable from "./collaboration/components/collabroation-table";
|
|
import EscalationTable from "./escalation/components/escalation-table";
|
|
import { useState } from "react";
|
|
import { Link, useRouter } from "@/i18n/routing";
|
|
import { PlusIcon } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import InternalTable from "./internal/components/internal-table";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
const CommunicationPage = () => {
|
|
const [tab, setTab] = useState("Pertanyaan Internal");
|
|
const t = useTranslations("Communication");
|
|
return (
|
|
<div>
|
|
<SiteBreadcrumb />
|
|
<div className="w-full overflow-x-auto bg-slate-100 dark:bg-black p-4 rounded-sm space-y-3 border">
|
|
<div className="flex justify-between py-3">
|
|
<p className="text-lg font-bold">{tab}</p>
|
|
{tab === "Pertanyaan Internal" && (
|
|
<Link href="/admin/shared/communication/internal/create">
|
|
<Button color="primary" size="md">
|
|
<PlusIcon size={18} className="mr-2" />
|
|
{t("new-question", { defaultValue: "New Question" })}
|
|
</Button>
|
|
</Link>
|
|
)}
|
|
{tab === "Kolaborasi" && (
|
|
<Link href="/admin/shared/communication/collaboration/create">
|
|
<Button color="primary" size="md">
|
|
<PlusIcon size={18} className="mr-2" />
|
|
{t("new-collaboration", { defaultValue: "New Collaboration" })}
|
|
</Button>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
<div className="flex flex-wrap gap-1 border-2 rounded-md w-fit mb-5">
|
|
<Button
|
|
rounded="md"
|
|
onClick={() => setTab("Pertanyaan Internal")}
|
|
className={`
|
|
${
|
|
tab === "Pertanyaan Internal"
|
|
? "bg-black text-white "
|
|
: "bg-white text-black "
|
|
}`}
|
|
>
|
|
{t("internal-questions", { defaultValue: "Internal Questions" })}
|
|
</Button>
|
|
<Button
|
|
rounded="md"
|
|
onClick={() => setTab("Eskalasi")}
|
|
className={` hover:text-white
|
|
${
|
|
tab === "Eskalasi"
|
|
? "bg-black text-white "
|
|
: "bg-white text-black "
|
|
}`}
|
|
>
|
|
{t("escalation", { defaultValue: "Escalation" })}
|
|
</Button>
|
|
<Button
|
|
rounded="md"
|
|
onClick={() => setTab("Kolaborasi")}
|
|
className={` hover:text-white
|
|
${
|
|
tab === "Kolaborasi"
|
|
? "bg-black text-white "
|
|
: "bg-white text-black "
|
|
}`}
|
|
>
|
|
{t("collaboration", { defaultValue: "Collaboration" })}
|
|
</Button>
|
|
</div>
|
|
{tab === "Pertanyaan Internal" && <InternalTable />}
|
|
{tab === "Eskalasi" && <EscalationTable />}
|
|
{tab === "Kolaborasi" && <CollaborationTable />}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CommunicationPage;
|