93 lines
2.6 KiB
TypeScript
93 lines
2.6 KiB
TypeScript
import { use, useEffect, useState } from "react";
|
|
import { PiDotsThreeOutlineVerticalFill } from "react-icons/pi";
|
|
import { Bounce, toast } from "react-toastify";
|
|
import api from "../../config/api";
|
|
import { IoMdAdd } from "react-icons/io";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useSelector } from "react-redux";
|
|
import { FaSpinner } from "react-icons/fa";
|
|
import LoaderUi from "../../helper/LoaderUi";
|
|
|
|
import TemplateTable from "./TemplateTable";
|
|
|
|
|
|
|
|
const Templates = () => {
|
|
const [activeFilter, setActiveFilter] = useState("All");
|
|
const [loading, setLoading] = useState(false)
|
|
const [templates, setTemplates] = useState([])
|
|
const accountDetails = useSelector((state: any) => state.user.account);
|
|
const accountId = accountDetails.id || "";
|
|
const [showMenu, setShowMenu] = useState(null);
|
|
|
|
const [activeAccountId, setActiveAccountId] = useState<string | null>(
|
|
JSON.parse(sessionStorage.getItem('activeAccountId') || 'null')
|
|
);
|
|
|
|
const navigate = useNavigate();
|
|
|
|
const filters = ["All", "My Templates", "Shared"];
|
|
|
|
|
|
|
|
const handleAddTemplate = async () => {
|
|
try {
|
|
const res = await api.post(`/api/accounts/${activeAccountId}/templates`);
|
|
navigate(`/process-step-one/${activeAccountId}/template/${res.data.id}`)
|
|
} catch (error) {
|
|
console.log(error)
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
return (
|
|
<div className="p-3 text-sm">
|
|
{/* Header */}
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 mb-3">
|
|
{/* Filter as pill buttons */}
|
|
<div className="flex flex-wrap gap-2">
|
|
{filters.map((filter) => (
|
|
<button
|
|
key={filter}
|
|
onClick={() => setActiveFilter(filter)}
|
|
className={`px-3 py-1 rounded-full text-xs border transition
|
|
${activeFilter === filter
|
|
? "bg-[var(--primary)] text-white"
|
|
: "border-gray-300 text-gray-600 hover:bg-gray-100"
|
|
}`}
|
|
>
|
|
{filter}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Add Template Button */}
|
|
<div
|
|
onClick={handleAddTemplate}
|
|
className="flex items-center justify-center gap-1 bg-gradient-to-br from-[var(--primary)] to-blue-600 px-3 py-2 rounded-sm cursor-pointer hover:opacity-90"
|
|
>
|
|
<IoMdAdd className="text-white text-lg" />
|
|
<button className="text-white text-sm font-medium">
|
|
Add Template
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{/* Table */}
|
|
<section className="my-4 mx-3"></section>
|
|
<TemplateTable />
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Templates;
|
|
|
|
|
|
|