123 lines
4.6 KiB
TypeScript
123 lines
4.6 KiB
TypeScript
'use client'
|
|
|
|
import {
|
|
Accordion,
|
|
AccordionContent,
|
|
AccordionItem,
|
|
AccordionTrigger,
|
|
} from "@/components/ui/accordion";
|
|
import {Card, CardContent} from "@/components/ui/card";
|
|
import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs";
|
|
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
|
import {getKnowledgeBaseCategoryList, getKnowledgeBaseList} from "@/service/master/knowledge-base";
|
|
import React from "react";
|
|
import {Plus, Trash2} from "lucide-react";
|
|
import {Button} from "@/components/ui/button";
|
|
import CreateCategory from "./create-category";
|
|
|
|
const KnowledgeBase = () => {
|
|
const [categories, setCategories] = React.useState<any>([]);
|
|
const [questions, setQuestions] = React.useState<any>([]);
|
|
|
|
React.useEffect(() => {
|
|
fetchCategoryList();
|
|
}, []);
|
|
|
|
async function fetchCategoryList() {
|
|
const response = await getKnowledgeBaseCategoryList();
|
|
const data = response.data?.data;
|
|
if (data) {
|
|
setCategories(data);
|
|
fetchQuestions(data[0]?.id)
|
|
}
|
|
}
|
|
|
|
const fetchQuestions = async (id: number) => {
|
|
const response = await getKnowledgeBaseList(id);
|
|
const data = response.data?.data;
|
|
if (data) {
|
|
setQuestions(data);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div>
|
|
<SiteBreadcrumb/>
|
|
<Tabs defaultValue={`category-0`}>
|
|
<div className="grid grid-cols-12 gap-6">
|
|
<Card className="lg:col-span-3 md:col-span-5 col-span-12 h-max">
|
|
<CardContent className=" p-6">
|
|
<TabsList className="md:flex-col gap-2 flex-wrap md:items-start justify-start">
|
|
<CreateCategory onSuccess={fetchCategoryList} />
|
|
{categories?.map((category: any, index: number) => (
|
|
<TabsTrigger
|
|
key={index}
|
|
value={`category-${index}`}
|
|
onClick={() => {
|
|
fetchQuestions(category?.id);
|
|
}}
|
|
className="data-[state=active]:bg-secondary data-[state=active]:text-default rounded-md px-6 py-3 w-full justify-start"
|
|
>
|
|
{category?.name}
|
|
<div
|
|
className="absolute right-2 top-2 hidden group-hover:inline-flex"
|
|
// onClick={() => deleteCategory(category?.id)}
|
|
>
|
|
<Trash2 className="w-3.5 h-3.5 me-1" />
|
|
</div>
|
|
</TabsTrigger>
|
|
))}
|
|
</TabsList>
|
|
</CardContent>
|
|
</Card>
|
|
<div className="lg:col-span-9 md:col-span-7 col-span-12 mt-4 lg:mt-0">
|
|
{categories?.map((cateogry: any, index: number) => (
|
|
<TabsContent key={index} value={`category-${index}`} className="mt-0">
|
|
<Accordion type="single" collapsible className="w-full">
|
|
{questions?.map((question: any) => (
|
|
<AccordionItem
|
|
key={question.id}
|
|
className="dark:bg-secondary bg-white"
|
|
value={question.id}
|
|
>
|
|
<AccordionTrigger
|
|
className="dark:bg-secondary bg-white data-[state=open]:bg-default-200 data-[state=active]:text-default">
|
|
{question.question}
|
|
</AccordionTrigger>
|
|
<AccordionContent className="dark:bg-secondary bg-white">
|
|
{question.answer}
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
))
|
|
}
|
|
</Accordion>
|
|
{questions?.length > 0 &&
|
|
<div className="flex gap-3">
|
|
<Button
|
|
fullWidth
|
|
size="md"
|
|
variant="outline"
|
|
>
|
|
<Plus className="w-6 h-6 me-1.5"/>
|
|
Import
|
|
</Button>
|
|
<Button
|
|
fullWidth
|
|
size="md"
|
|
>
|
|
<Plus className="w-6 h-6 me-1.5"/>
|
|
Add Question
|
|
</Button>
|
|
</div>
|
|
}
|
|
</TabsContent>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</Tabs>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default KnowledgeBase;
|