1111 lines
37 KiB
TypeScript
1111 lines
37 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
import {
|
|
ColumnFiltersState,
|
|
PaginationState,
|
|
SortingState,
|
|
VisibilityState,
|
|
flexRender,
|
|
getCoreRowModel,
|
|
getFilteredRowModel,
|
|
getPaginationRowModel,
|
|
getSortedRowModel,
|
|
useReactTable,
|
|
} from "@tanstack/react-table";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
import {
|
|
DropdownMenu,
|
|
DropdownMenuContent,
|
|
DropdownMenuRadioGroup,
|
|
DropdownMenuRadioItem,
|
|
DropdownMenuTrigger,
|
|
} from "@/components/ui/dropdown-menu";
|
|
import { Input } from "@/components/ui/input";
|
|
import { InputGroup, InputGroupText } from "@/components/ui/input-group";
|
|
import { Label } from "@/components/ui/label";
|
|
import TablePagination from "@/components/table/table-pagination";
|
|
|
|
import { Search, ChevronDown } from "lucide-react";
|
|
import { format } from "date-fns";
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
import { getCookiesDecrypt } from "@/lib/utils";
|
|
import { listTask, listTaskTa } from "@/service/task";
|
|
|
|
import useTableColumns from "./columns"; // kamu sudah punya
|
|
|
|
type ActiveTab = "ta" | "daily" | "special" | "mabes-koor";
|
|
|
|
const MABES_LEVEL_ID = 216;
|
|
const APPROVER_ROLE_ID = 3;
|
|
|
|
export default function TaskTaTable() {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const t = useTranslations("AnalyticsDashboard");
|
|
|
|
// ✅ user identity from cookies
|
|
const userLevelId = Number(getCookiesDecrypt("ulie"));
|
|
const roleId = Number(getCookiesDecrypt("urie"));
|
|
const userId = Number(getCookiesDecrypt("uie"));
|
|
|
|
const isMabesApprover =
|
|
userLevelId === MABES_LEVEL_ID && roleId === APPROVER_ROLE_ID;
|
|
|
|
// table states
|
|
const [dataTable, setDataTable] = React.useState<any[]>([]);
|
|
const [totalData, setTotalData] = React.useState<number>(1);
|
|
const [sorting, setSorting] = React.useState<SortingState>([]);
|
|
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
|
|
[],
|
|
);
|
|
const [columnVisibility, setColumnVisibility] =
|
|
React.useState<VisibilityState>({});
|
|
const [rowSelection, setRowSelection] = React.useState({});
|
|
|
|
const [showData, setShowData] = React.useState("10");
|
|
const [pagination, setPagination] = React.useState<PaginationState>({
|
|
pageIndex: 0,
|
|
pageSize: Number(showData),
|
|
});
|
|
|
|
const [activeTab, setActiveTab] = React.useState<ActiveTab>(
|
|
isMabesApprover ? "mabes-koor" : "ta",
|
|
);
|
|
const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
|
|
const [dateFilter, setDateFilter] = React.useState("");
|
|
const [filterByCode, setFilterByCode] = React.useState<string>("");
|
|
const [search, setSearch] = React.useState<string>("");
|
|
|
|
const [page, setPage] = React.useState(1);
|
|
const [totalPage, setTotalPage] = React.useState(1);
|
|
|
|
const KOOR_KURATOR_USER_ID = "464";
|
|
|
|
// ✅ columns based on tab
|
|
const columns = useTableColumns(activeTab);
|
|
|
|
const table = useReactTable({
|
|
data: dataTable,
|
|
columns,
|
|
onSortingChange: setSorting,
|
|
onColumnFiltersChange: setColumnFilters,
|
|
getCoreRowModel: getCoreRowModel(),
|
|
getPaginationRowModel: getPaginationRowModel(),
|
|
getSortedRowModel: getSortedRowModel(),
|
|
getFilteredRowModel: getFilteredRowModel(),
|
|
onColumnVisibilityChange: setColumnVisibility,
|
|
onRowSelectionChange: setRowSelection,
|
|
onPaginationChange: setPagination,
|
|
state: {
|
|
sorting,
|
|
columnFilters,
|
|
columnVisibility,
|
|
rowSelection,
|
|
pagination,
|
|
},
|
|
});
|
|
|
|
React.useEffect(() => {
|
|
const pageFromUrl = searchParams?.get("page");
|
|
if (pageFromUrl) setPage(Number(pageFromUrl));
|
|
}, [searchParams]);
|
|
|
|
React.useEffect(() => {
|
|
fetchData();
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [
|
|
page,
|
|
showData,
|
|
search,
|
|
dateFilter,
|
|
filterByCode,
|
|
statusFilter,
|
|
activeTab,
|
|
]);
|
|
|
|
const isKoorKurator = String(userId) === KOOR_KURATOR_USER_ID;
|
|
|
|
async function fetchData() {
|
|
const formattedStartDate = dateFilter
|
|
? format(new Date(dateFilter), "yyyy-MM-dd")
|
|
: "";
|
|
|
|
try {
|
|
let res: any;
|
|
|
|
if (activeTab === "ta") {
|
|
res = await listTaskTa(
|
|
page - 1,
|
|
search,
|
|
showData,
|
|
filterByCode,
|
|
formattedStartDate,
|
|
"atensi-khusus",
|
|
statusFilter,
|
|
);
|
|
}
|
|
|
|
if (activeTab === "daily") {
|
|
res = await listTaskTa(
|
|
page - 1,
|
|
search,
|
|
showData,
|
|
filterByCode,
|
|
formattedStartDate,
|
|
"tugas-harian",
|
|
statusFilter,
|
|
);
|
|
}
|
|
|
|
if (activeTab === "special") {
|
|
res = await listTask(
|
|
page - 1,
|
|
search,
|
|
showData,
|
|
filterByCode,
|
|
formattedStartDate,
|
|
"atensi-khusus",
|
|
statusFilter,
|
|
);
|
|
}
|
|
|
|
// ✅ TAB BARU: khusus Mabes Approver
|
|
if (activeTab === "mabes-koor") {
|
|
// hanya blok kalau BUKAN Mabes Approver DAN BUKAN Koor Kurator
|
|
if (!isMabesApprover && !isKoorKurator) {
|
|
setDataTable([]);
|
|
setTotalData(0);
|
|
setTotalPage(0);
|
|
return;
|
|
}
|
|
|
|
res = await listTaskTa(
|
|
page - 1,
|
|
search,
|
|
showData,
|
|
filterByCode,
|
|
formattedStartDate,
|
|
"atensi-khusus",
|
|
statusFilter,
|
|
);
|
|
}
|
|
|
|
let contentData = res?.data?.data?.content || [];
|
|
|
|
// 🚫 TAB TA: SEMBUNYIKAN TASK MABES → KOOR
|
|
if (activeTab === "ta") {
|
|
contentData = contentData.filter((item: any) => {
|
|
const assignedUsers = String(item?.assignedToUsers || "");
|
|
return !assignedUsers.split(",").includes(KOOR_KURATOR_USER_ID);
|
|
});
|
|
}
|
|
|
|
// ⛔ blok task baru kalau upload belum selesai (fitur kamu)
|
|
const isUploadingTA =
|
|
localStorage.getItem("TA_UPLOAD_IN_PROGRESS") === "true";
|
|
if (isUploadingTA) {
|
|
const now = new Date();
|
|
contentData = contentData.filter((item: any) => {
|
|
const created = new Date(item.createdAt);
|
|
const diff = now.getTime() - created.getTime();
|
|
return diff > 5 * 60 * 1000;
|
|
});
|
|
}
|
|
|
|
// ✅ OPTIONAL SAFETY FILTER (kalau backend belum 100% benar)
|
|
// sesuaikan field names sesuai response kamu
|
|
// if (activeTab === "mabes-koor") {
|
|
// contentData = contentData.filter((item: any) => {
|
|
// const createdByLevelName =
|
|
// item?.createdByLevelName || item?.createdByLevel?.name;
|
|
// const assignedToLevelName =
|
|
// item?.assignedToLevelName || item?.assignedToLevel?.name;
|
|
|
|
// // minimal filter:
|
|
// return (
|
|
// String(createdByLevelName || "")
|
|
// .toUpperCase()
|
|
// .includes("MABES") &&
|
|
// String(assignedToLevelName || "")
|
|
// .toUpperCase()
|
|
// .includes("KOOR")
|
|
// );
|
|
// });
|
|
// }
|
|
if (activeTab === "mabes-koor") {
|
|
contentData = contentData.filter((item: any) => {
|
|
const createdByLevel =
|
|
item?.createdBy?.userLevel?.name || item?.createdByLevelName || "";
|
|
|
|
const assignedUsers = String(item?.assignedToUsers || "");
|
|
|
|
return (
|
|
/MABES/i.test(createdByLevel) &&
|
|
assignedUsers.split(",").includes(KOOR_KURATOR_USER_ID)
|
|
);
|
|
});
|
|
}
|
|
|
|
contentData.forEach((item: any, index: number) => {
|
|
item.no = (page - 1) * Number(showData) + index + 1;
|
|
});
|
|
|
|
setDataTable(contentData);
|
|
setTotalData(res?.data?.data?.totalElements || 0);
|
|
setTotalPage(res?.data?.data?.totalPages || 0);
|
|
} catch (error) {
|
|
console.error("Error fetching tasks:", error);
|
|
setDataTable([]);
|
|
setTotalData(0);
|
|
setTotalPage(0);
|
|
}
|
|
}
|
|
|
|
const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const value = e.target.value;
|
|
setFilterByCode(value);
|
|
setSearch(value);
|
|
table.getColumn("judul")?.setFilterValue(value);
|
|
};
|
|
|
|
function handleStatusCheckboxChange(value: number) {
|
|
setStatusFilter((prev) =>
|
|
prev.includes(value) ? prev.filter((s) => s !== value) : [...prev, value],
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="w-full overflow-x-auto">
|
|
<div className="mx-5 mb-3">
|
|
<div className="flex justify-between mb-6">
|
|
<label className="inline-flex text-md cursor-pointer">
|
|
<div className="flex mb-6 flex-wrap gap-2">
|
|
{/* ❗ JIKA MABES APPROVER → HANYA 1 TAB */}
|
|
{isMabesApprover ? (
|
|
<button
|
|
onClick={() => setActiveTab("mabes-koor")}
|
|
className={`px-4 py-1 rounded transition ${
|
|
activeTab === "mabes-koor"
|
|
? "bg-default-900 text-white dark:text-black"
|
|
: "border dark:text-default-700"
|
|
}`}
|
|
>
|
|
Atensi Khusus Mabes → Koor Kurator
|
|
</button>
|
|
) : (
|
|
<>
|
|
{/* 👇 USER SELAIN MABES APPROVER */}
|
|
<button
|
|
onClick={() => setActiveTab("special")}
|
|
className={`px-4 py-1 rounded transition ${
|
|
activeTab === "special"
|
|
? "bg-default-900 text-white dark:text-black"
|
|
: "border dark:text-default-700"
|
|
}`}
|
|
>
|
|
Atensi Khusus Mabes
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => setActiveTab("mabes-koor")}
|
|
className={`px-4 py-1 rounded transition ${
|
|
activeTab === "mabes-koor"
|
|
? "bg-default-900 text-white dark:text-black"
|
|
: "border dark:text-default-700"
|
|
}`}
|
|
>
|
|
Atensi Khusus Mabes → Koor Kurator
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => setActiveTab("ta")}
|
|
className={`px-4 py-1 rounded transition ${
|
|
activeTab === "ta"
|
|
? "bg-default-900 text-white dark:text-black"
|
|
: "border dark:text-default-700"
|
|
}`}
|
|
>
|
|
Atensi Khusus TA
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => setActiveTab("daily")}
|
|
className={`px-4 py-1 rounded transition ${
|
|
activeTab === "daily"
|
|
? "bg-default-900 text-white dark:text-black"
|
|
: "border dark:text-default-700"
|
|
}`}
|
|
>
|
|
{t("daily-tasks", { defaultValue: "Daily Tasks" })}
|
|
</button>
|
|
</>
|
|
)}
|
|
</div>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col sm:flex-row lg:flex-row justify-between sm:items-center md:items-center lg:items-center px-5">
|
|
<div className="mb-3 sm:mb-0 lg-mb-0">
|
|
<InputGroup merged>
|
|
<InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
|
|
<Search className=" h-4 w-4 dark:text-white" />
|
|
</InputGroupText>
|
|
<Input
|
|
type="text"
|
|
placeholder="Search Title dan Code"
|
|
className="bg-transparent dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white w-full"
|
|
value={search}
|
|
onChange={handleSearch}
|
|
/>
|
|
</InputGroup>
|
|
</div>
|
|
|
|
<div className="flex flex-row items-center gap-3">
|
|
<div className="flex items-center py-4">
|
|
<div className="mx-3">
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button size="md" variant="outline">
|
|
1 - {showData} Data
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
<DropdownMenuContent className="w-56 text-sm">
|
|
<DropdownMenuRadioGroup
|
|
value={showData}
|
|
onValueChange={setShowData}
|
|
>
|
|
<DropdownMenuRadioItem value="10">
|
|
1 - 10 Data
|
|
</DropdownMenuRadioItem>
|
|
<DropdownMenuRadioItem value="50">
|
|
1 - 50 Data
|
|
</DropdownMenuRadioItem>
|
|
<DropdownMenuRadioItem value="100">
|
|
1 - 100 Data
|
|
</DropdownMenuRadioItem>
|
|
<DropdownMenuRadioItem value="250">
|
|
1 - 250 Data
|
|
</DropdownMenuRadioItem>
|
|
</DropdownMenuRadioGroup>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
|
|
<DropdownMenu>
|
|
<DropdownMenuTrigger asChild>
|
|
<Button
|
|
variant="outline"
|
|
className="ml-auto w-full sm:w-[100px]"
|
|
size="md"
|
|
>
|
|
Filter <ChevronDown />
|
|
</Button>
|
|
</DropdownMenuTrigger>
|
|
|
|
<DropdownMenuContent
|
|
align="end"
|
|
className="w-64 h-[200px] overflow-y-auto"
|
|
>
|
|
<div className="flex flex-row justify-between my-1 mx-1">
|
|
<p>Filter</p>
|
|
</div>
|
|
|
|
<div className="mx-2 my-1">
|
|
<Label>{t("date", { defaultValue: "Date" })}</Label>
|
|
<Input
|
|
type="date"
|
|
value={dateFilter}
|
|
onChange={(e) => setDateFilter(e.target.value)}
|
|
className="max-w-sm"
|
|
/>
|
|
</div>
|
|
|
|
<Label className="ml-2 mt-2">Status</Label>
|
|
<div className="flex items-center px-4 py-1">
|
|
<input
|
|
type="checkbox"
|
|
id="status-1"
|
|
className="mr-2"
|
|
checked={statusFilter.includes(1)}
|
|
onChange={() => handleStatusCheckboxChange(1)}
|
|
/>
|
|
<label htmlFor="status-1" className="text-sm">
|
|
{t("done", { defaultValue: "Done" })}
|
|
</label>
|
|
</div>
|
|
|
|
<div className="flex items-center px-4 py-1">
|
|
<input
|
|
type="checkbox"
|
|
id="status-2"
|
|
className="mr-2"
|
|
checked={statusFilter.includes(2)}
|
|
onChange={() => handleStatusCheckboxChange(2)}
|
|
/>
|
|
<label htmlFor="status-2" className="text-sm">
|
|
{t("active", { defaultValue: "Active" })}
|
|
</label>
|
|
</div>
|
|
</DropdownMenuContent>
|
|
</DropdownMenu>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Table className="overflow-hidden mt-3">
|
|
<TableHeader>
|
|
{table.getHeaderGroups().map((headerGroup) => (
|
|
<TableRow key={headerGroup.id} className="bg-default-200">
|
|
{headerGroup.headers.map((header) => (
|
|
<TableHead key={header.id}>
|
|
{header.isPlaceholder
|
|
? null
|
|
: flexRender(
|
|
header.column.columnDef.header,
|
|
header.getContext(),
|
|
)}
|
|
</TableHead>
|
|
))}
|
|
</TableRow>
|
|
))}
|
|
</TableHeader>
|
|
|
|
<TableBody>
|
|
{table.getRowModel().rows?.length ? (
|
|
table.getRowModel().rows.map((row) => (
|
|
<TableRow
|
|
key={row.id}
|
|
data-state={row.getIsSelected() && "selected"}
|
|
className="h-[75px]"
|
|
>
|
|
{row.getVisibleCells().map((cell) => (
|
|
<TableCell key={cell.id}>
|
|
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
|
</TableCell>
|
|
))}
|
|
</TableRow>
|
|
))
|
|
) : (
|
|
<TableRow>
|
|
<TableCell colSpan={columns.length} className="h-24 text-center">
|
|
No results.
|
|
</TableCell>
|
|
</TableRow>
|
|
)}
|
|
</TableBody>
|
|
</Table>
|
|
|
|
<TablePagination
|
|
table={table}
|
|
totalData={totalData}
|
|
totalPage={totalPage}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// "use client";
|
|
|
|
// import * as React from "react";
|
|
// import {
|
|
// ColumnDef,
|
|
// ColumnFiltersState,
|
|
// PaginationState,
|
|
// SortingState,
|
|
// VisibilityState,
|
|
// flexRender,
|
|
// getCoreRowModel,
|
|
// getFilteredRowModel,
|
|
// getPaginationRowModel,
|
|
// getSortedRowModel,
|
|
// useReactTable,
|
|
// } from "@tanstack/react-table";
|
|
// import { Button } from "@/components/ui/button";
|
|
|
|
// import {
|
|
// Table,
|
|
// TableBody,
|
|
// TableCell,
|
|
// TableHead,
|
|
// TableHeader,
|
|
// TableRow,
|
|
// } from "@/components/ui/table";
|
|
// import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
|
// import {
|
|
// ChevronDown,
|
|
// ChevronLeft,
|
|
// ChevronRight,
|
|
// Eye,
|
|
// MoreVertical,
|
|
// Search,
|
|
// SquarePen,
|
|
// Trash2,
|
|
// TrendingDown,
|
|
// TrendingUp,
|
|
// } from "lucide-react";
|
|
// import { cn } from "@/lib/utils";
|
|
// import {
|
|
// DropdownMenu,
|
|
// DropdownMenuContent,
|
|
// DropdownMenuItem,
|
|
// DropdownMenuRadioGroup,
|
|
// DropdownMenuRadioItem,
|
|
// DropdownMenuTrigger,
|
|
// } from "@/components/ui/dropdown-menu";
|
|
// import { Input } from "@/components/ui/input";
|
|
// import { InputGroup, InputGroupText } from "@/components/ui/input-group";
|
|
// import { paginationBlog } from "@/service/blog/blog";
|
|
// import { ticketingPagination } from "@/service/ticketing/ticketing";
|
|
// import { Badge } from "@/components/ui/badge";
|
|
// import { useRouter, useSearchParams } from "next/navigation";
|
|
// import TablePagination from "@/components/table/table-pagination";
|
|
// import columns from "./columns";
|
|
// import { listTask, listTaskMabesForTa, listTaskTa } from "@/service/task";
|
|
// import { Label } from "@/components/ui/label";
|
|
// import { format } from "date-fns";
|
|
// import { useTranslations } from "next-intl";
|
|
// import useTableColumns from "./columns";
|
|
|
|
// const TaskTaTable = () => {
|
|
// const router = useRouter();
|
|
// const searchParams = useSearchParams();
|
|
// const t = useTranslations("AnalyticsDashboard");
|
|
// const [dataTable, setDataTable] = React.useState<any[]>([]);
|
|
// const [totalData, setTotalData] = React.useState<number>(1);
|
|
// const [sorting, setSorting] = React.useState<SortingState>([]);
|
|
// const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
|
|
// []
|
|
// );
|
|
// const [columnVisibility, setColumnVisibility] =
|
|
// React.useState<VisibilityState>({});
|
|
// const [rowSelection, setRowSelection] = React.useState({});
|
|
// const [showData, setShowData] = React.useState("10");
|
|
// const [pagination, setPagination] = React.useState<PaginationState>({
|
|
// pageIndex: 0,
|
|
// pageSize: Number(showData),
|
|
// });
|
|
// const [activeTab, setActiveTab] = React.useState<"ta" | "daily" | "special">(
|
|
// "ta"
|
|
// );
|
|
// const [statusFilter, setStatusFilter] = React.useState<number[]>([]);
|
|
// const [dateFilter, setDateFilter] = React.useState("");
|
|
// const [endDate, setEndDate] = React.useState("");
|
|
// const [filterByCode, setFilterByCode] = React.useState<string>("");
|
|
// const [page, setPage] = React.useState(1);
|
|
// const [totalPage, setTotalPage] = React.useState(1);
|
|
// const [limit, setLimit] = React.useState(10);
|
|
// const [isSpecificAttention, setIsSpecificAttention] = React.useState(true);
|
|
// const [search, setSearch] = React.useState<string>("");
|
|
// const columns = useTableColumns(activeTab);
|
|
// const table = useReactTable({
|
|
// data: dataTable,
|
|
// columns,
|
|
// onSortingChange: setSorting,
|
|
// onColumnFiltersChange: setColumnFilters,
|
|
// getCoreRowModel: getCoreRowModel(),
|
|
// getPaginationRowModel: getPaginationRowModel(),
|
|
// getSortedRowModel: getSortedRowModel(),
|
|
// getFilteredRowModel: getFilteredRowModel(),
|
|
// onColumnVisibilityChange: setColumnVisibility,
|
|
// onRowSelectionChange: setRowSelection,
|
|
// onPaginationChange: setPagination,
|
|
// state: {
|
|
// sorting,
|
|
// columnFilters,
|
|
// columnVisibility,
|
|
// rowSelection,
|
|
// pagination,
|
|
// },
|
|
// });
|
|
|
|
// React.useEffect(() => {
|
|
// const pageFromUrl = searchParams?.get("page");
|
|
// if (pageFromUrl) {
|
|
// setPage(Number(pageFromUrl));
|
|
// }
|
|
// }, [searchParams]);
|
|
|
|
// React.useEffect(() => {
|
|
// fetchData();
|
|
// }, [
|
|
// page,
|
|
// showData,
|
|
// isSpecificAttention,
|
|
// search,
|
|
// dateFilter,
|
|
// filterByCode,
|
|
// statusFilter,
|
|
// activeTab,
|
|
// ]);
|
|
|
|
// async function fetchData() {
|
|
// const formattedStartDate = dateFilter
|
|
// ? format(new Date(dateFilter), "yyyy-MM-dd")
|
|
// : "";
|
|
|
|
// try {
|
|
// let res;
|
|
|
|
// if (activeTab === "ta") {
|
|
// res = await listTaskTa(
|
|
// page - 1,
|
|
// search,
|
|
// showData,
|
|
// filterByCode,
|
|
// formattedStartDate,
|
|
// "atensi-khusus",
|
|
// statusFilter
|
|
// );
|
|
// } else if (activeTab === "daily") {
|
|
// res = await listTaskTa(
|
|
// page - 1,
|
|
// search,
|
|
// showData,
|
|
// filterByCode,
|
|
// formattedStartDate,
|
|
// "tugas-harian",
|
|
// statusFilter
|
|
// );
|
|
// } else if (activeTab === "special") {
|
|
// res = await listTask(
|
|
// page - 1,
|
|
// search,
|
|
// showData,
|
|
// filterByCode,
|
|
// formattedStartDate,
|
|
// "atensi-khusus",
|
|
// statusFilter
|
|
// );
|
|
// }
|
|
|
|
// let contentData = res?.data?.data?.content || [];
|
|
|
|
// // ⛔ Jika upload belum selesai → sembunyikan task baru
|
|
// const isUploadingTA =
|
|
// localStorage.getItem("TA_UPLOAD_IN_PROGRESS") === "true";
|
|
|
|
// if (isUploadingTA) {
|
|
// const now = new Date();
|
|
// // Filter task yg dibuat < 5 menit terakhir (belum selesai upload)
|
|
// contentData = contentData.filter((item: any) => {
|
|
// const created = new Date(item.createdAt);
|
|
// const diff = now.getTime() - created.getTime();
|
|
// return diff > 5 * 60 * 1000; // lebih dari 5 menit
|
|
// });
|
|
// }
|
|
|
|
// contentData.forEach((item: any, index: number) => {
|
|
// item.no = (page - 1) * Number(showData) + index + 1;
|
|
// });
|
|
|
|
// setDataTable(contentData);
|
|
// setTotalData(res?.data?.data?.totalElements);
|
|
// setTotalPage(res?.data?.data?.totalPages);
|
|
// } catch (error) {
|
|
// console.error("Error fetching tasks:", error);
|
|
// }
|
|
// }
|
|
|
|
// // async function fetchData() {
|
|
// // const formattedStartDate = dateFilter
|
|
// // ? format(new Date(dateFilter), "yyyy-MM-dd")
|
|
// // : "";
|
|
|
|
// // try {
|
|
// // let res;
|
|
|
|
// // if (activeTab === "ta") {
|
|
// // res = await listTaskTa(
|
|
// // page - 1,
|
|
// // search,
|
|
// // showData,
|
|
// // filterByCode,
|
|
// // formattedStartDate,
|
|
// // "atensi-khusus",
|
|
// // statusFilter
|
|
// // );
|
|
// // } else if (activeTab === "daily") {
|
|
// // res = await listTaskTa(
|
|
// // page - 1,
|
|
// // search,
|
|
// // showData,
|
|
// // filterByCode,
|
|
// // formattedStartDate,
|
|
// // "tugas-harian",
|
|
// // statusFilter
|
|
// // );
|
|
// // } else if (activeTab === "special") {
|
|
// // res = await listTask(
|
|
// // page - 1,
|
|
// // search,
|
|
// // showData,
|
|
// // filterByCode,
|
|
// // formattedStartDate,
|
|
// // "atensi-khusus",
|
|
// // statusFilter
|
|
// // );
|
|
// // }
|
|
|
|
// // const data = res?.data?.data;
|
|
// // const contentData = data?.content || [];
|
|
|
|
// // contentData.forEach((item: any, index: number) => {
|
|
// // item.no = (page - 1) * Number(showData) + index + 1;
|
|
// // });
|
|
|
|
// // setDataTable(contentData);
|
|
// // setTotalData(data?.totalElements);
|
|
// // setTotalPage(data?.totalPages);
|
|
// // } catch (error) {
|
|
// // console.error("Error fetching tasks:", error);
|
|
// // }
|
|
// // }
|
|
|
|
// // async function fetchData() {
|
|
// // const formattedStartDate = dateFilter
|
|
// // ? format(new Date(dateFilter), "yyyy-MM-dd")
|
|
// // : "";
|
|
// // try {
|
|
// // const res = isSpecificAttention
|
|
// // ? await listTaskTa(
|
|
// // page - 1,
|
|
// // search,
|
|
// // showData,
|
|
// // filterByCode,
|
|
// // formattedStartDate,
|
|
// // "atensi-khusus",
|
|
// // statusFilter
|
|
// // )
|
|
// // : await listTask(
|
|
// // page - 1,
|
|
// // search,
|
|
// // showData,
|
|
// // filterByCode,
|
|
// // formattedStartDate,
|
|
// // "atensi-khusus",
|
|
// // statusFilter
|
|
// // );
|
|
|
|
// // const data = res?.data?.data;
|
|
// // const contentData = data?.content;
|
|
|
|
// // // let contentDataFilter = res?.data?.data?.content || [];
|
|
|
|
// // // Filter berdasarkan status
|
|
// // // contentDataFilter = contentDataFilter.filter((item: any) => {
|
|
// // // const isSelesai = statusFilter.includes(1) ? item.isDone : true;
|
|
// // // const isAktif = statusFilter.includes(2) ? item.isActive : true;
|
|
// // // return isSelesai && isAktif;
|
|
// // // });
|
|
|
|
// // contentData.forEach((item: any, index: number) => {
|
|
// // item.no = (page - 1) * Number(showData) + index + 1;
|
|
// // });
|
|
|
|
// // console.log("contentData : ", contentData);
|
|
|
|
// // setDataTable(contentData);
|
|
// // setTotalData(data?.totalElements);
|
|
// // setTotalPage(data?.totalPages);
|
|
// // } catch (error) {
|
|
// // console.error("Error fetching tasks:", error);
|
|
// // }
|
|
// // }
|
|
|
|
// const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
// setFilterByCode(e.target.value);
|
|
// setSearch(e.target.value);
|
|
// table.getColumn("judul")?.setFilterValue(e.target.value);
|
|
// };
|
|
|
|
// function handleStatusCheckboxChange(value: number) {
|
|
// setStatusFilter((prev) =>
|
|
// prev.includes(value)
|
|
// ? prev.filter((status) => status !== value)
|
|
// : [...prev, value]
|
|
// );
|
|
// }
|
|
|
|
// // const handleSearchFilterByCode = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
// // const value = e.target.value;
|
|
// // console.log("code :", value);
|
|
// // setFilterByCode(value);
|
|
// // fetchData();
|
|
// // };
|
|
|
|
// return (
|
|
// <div className="w-full overflow-x-auto">
|
|
// <div className="mx-5 mb-3">
|
|
// <div className="">
|
|
// <div className="row">
|
|
// <div className="flex justify-between mb-6">
|
|
// <label className="inline-flex text-md cursor-pointer">
|
|
// <input
|
|
// type="checkbox"
|
|
// onChange={() => setIsSpecificAttention(!isSpecificAttention)}
|
|
// hidden
|
|
// />
|
|
// <div className="flex mb-6">
|
|
// <button
|
|
// onClick={() => setActiveTab("special")}
|
|
// className={`px-4 py-1 rounded transition ${
|
|
// activeTab === "special"
|
|
// ? "bg-default-900 text-white dark:text-black"
|
|
// : "border dark:text-default-700"
|
|
// }`}
|
|
// >
|
|
// {/* {t("special-attention", {defaultValue: "Special Attention", })} */}
|
|
// Atensi Khusus Mabes
|
|
// </button>
|
|
// <button
|
|
// onClick={() => setActiveTab("ta")}
|
|
// className={`px-4 py-1 rounded transition ${
|
|
// activeTab === "ta"
|
|
// ? "bg-default-900 text-white dark:text-black"
|
|
// : "border dark:text-default-700"
|
|
// }`}
|
|
// >
|
|
// Atensi Khusus TA
|
|
// </button>
|
|
|
|
// <button
|
|
// onClick={() => setActiveTab("daily")}
|
|
// className={`px-4 py-1 rounded transition ${
|
|
// activeTab === "daily"
|
|
// ? "bg-default-900 text-white dark:text-black"
|
|
// : "border dark:text-default-700"
|
|
// }`}
|
|
// >
|
|
// {t("daily-tasks", { defaultValue: "Daily Tasks" })}
|
|
// </button>
|
|
// </div>
|
|
|
|
// {/* <span
|
|
// className={` ${
|
|
// isSpecificAttention
|
|
// ? "bg-default-900 text-white"
|
|
// : "dark:text-default-700 border-2"
|
|
// }
|
|
// px-[18px] py-1 transition duration-100 rounded`}
|
|
// >
|
|
// Atensi Khusus TA{" "}
|
|
// </span>
|
|
// <span
|
|
// className={`
|
|
// ${
|
|
// !isSpecificAttention
|
|
// ? "bg-default-900 text-white dark:text-black"
|
|
// : " dark:text-default-700 border-2 dark:border dark:border-gray-500"
|
|
// }
|
|
// px-[18px] py-1 transition duration-100 rounded
|
|
// `}
|
|
// >
|
|
// {t("daily-tasks", { defaultValue: "Daily Tasks" })}
|
|
// </span>
|
|
// <span
|
|
// className={`
|
|
// ${
|
|
// !isSpecificAttention
|
|
// ? "bg-default-900 text-white"
|
|
// : " dark:text-default-700 border-2"
|
|
// }
|
|
// px-[18px] py-1 transition duration-100 rounded
|
|
// `}
|
|
// >
|
|
// {t("special-attention", {
|
|
// defaultValue: "Special Attention",
|
|
// })}{" "}
|
|
// </span> */}
|
|
// </label>
|
|
// </div>
|
|
// </div>
|
|
// </div>
|
|
// </div>
|
|
// <div className="flex flex-col sm:flex-row lg:flex-row justify-between sm:items-center md:items-center lg:items-center px-5">
|
|
// <div className="mb-3 sm:mb-0 lg-mb-0">
|
|
// <InputGroup merged>
|
|
// <InputGroupText className="bg-transparent dark:border-secondary dark:group-focus-within:border-secondary">
|
|
// <Search className=" h-4 w-4 dark:text-white" />
|
|
// </InputGroupText>
|
|
// <Input
|
|
// type="text"
|
|
// placeholder="Search Title dan Code"
|
|
// className="bg-transparent dark:border-secondary dark:placeholder-white/80 dark:focus:border-secondary dark:text-white w-full"
|
|
// value={search}
|
|
// onChange={handleSearch}
|
|
// />
|
|
// </InputGroup>
|
|
// </div>
|
|
|
|
// <div className=" flex flex-row items-center gap-3">
|
|
// <div className="flex items-center py-4">
|
|
// <div className="mx-3">
|
|
// <DropdownMenu>
|
|
// <DropdownMenuTrigger asChild>
|
|
// <Button size="md" variant="outline">
|
|
// 1 - {showData} Data
|
|
// </Button>
|
|
// </DropdownMenuTrigger>
|
|
// <DropdownMenuContent className="w-56 text-sm">
|
|
// <DropdownMenuRadioGroup
|
|
// value={showData}
|
|
// onValueChange={setShowData}
|
|
// >
|
|
// <DropdownMenuRadioItem value="10">
|
|
// 1 - 10 Data
|
|
// </DropdownMenuRadioItem>
|
|
// <DropdownMenuRadioItem value="50">
|
|
// 1 - 50 Data
|
|
// </DropdownMenuRadioItem>
|
|
// <DropdownMenuRadioItem value="100">
|
|
// 1 - 100 Data
|
|
// </DropdownMenuRadioItem>
|
|
// <DropdownMenuRadioItem value="250">
|
|
// 1 - 250 Data
|
|
// </DropdownMenuRadioItem>
|
|
// </DropdownMenuRadioGroup>
|
|
// </DropdownMenuContent>
|
|
// </DropdownMenu>
|
|
// </div>
|
|
// <DropdownMenu>
|
|
// <DropdownMenuTrigger asChild>
|
|
// <Button
|
|
// variant="outline"
|
|
// className="ml-auto w-full sm:w-[100px]"
|
|
// size="md"
|
|
// >
|
|
// Filter <ChevronDown />
|
|
// </Button>
|
|
// </DropdownMenuTrigger>
|
|
// <DropdownMenuContent
|
|
// align="end"
|
|
// className="w-64 h-[200px] overflow-y-auto"
|
|
// >
|
|
// <div className="flex flex-row justify-between my-1 mx-1">
|
|
// <p>Filter</p>
|
|
// </div>
|
|
// <div className="mx-2 my-1">
|
|
// <Label>{t("date", { defaultValue: "Date" })}</Label>
|
|
// <Input
|
|
// type="date"
|
|
// value={dateFilter}
|
|
// onChange={(e) => setDateFilter(e.target.value)}
|
|
// className="max-w-sm"
|
|
// />
|
|
// </div>
|
|
// {/* <div className="mx-2 my-1">
|
|
// <Label>Code</Label>
|
|
// <Input
|
|
// placeholder="Filter Status..."
|
|
// value={filterByCode}
|
|
// // onChange={handleSearchFilterByCode}
|
|
// className="max-w-sm"
|
|
// />
|
|
// </div> */}
|
|
// <Label className="ml-2 mt-2">Status</Label>
|
|
// <div className="flex items-center px-4 py-1">
|
|
// <input
|
|
// type="checkbox"
|
|
// id="status-1"
|
|
// className="mr-2"
|
|
// checked={statusFilter.includes(1)}
|
|
// onChange={() => handleStatusCheckboxChange(1)}
|
|
// />
|
|
// <label htmlFor="status-1" className="text-sm">
|
|
// {t("done", { defaultValue: "Done" })}
|
|
// </label>
|
|
// </div>
|
|
// <div className="flex items-center px-4 py-1">
|
|
// <input
|
|
// type="checkbox"
|
|
// id="status-2"
|
|
// className="mr-2"
|
|
// checked={statusFilter.includes(2)}
|
|
// onChange={() => handleStatusCheckboxChange(2)}
|
|
// />
|
|
// <label htmlFor="status-2" className="text-sm">
|
|
// {t("active", { defaultValue: "Active" })}
|
|
// </label>
|
|
// </div>
|
|
// </DropdownMenuContent>
|
|
// </DropdownMenu>
|
|
// </div>
|
|
// </div>
|
|
// {/* <div className="flex-none">
|
|
// <Input
|
|
// placeholder="Filter Status..."
|
|
// value={
|
|
// (table.getColumn("status")?.getFilterValue() as string) ?? ""
|
|
// }
|
|
// onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
|
|
// table.getColumn("status")?.setFilterValue(event.target.value)
|
|
// }
|
|
// className="max-w-sm "
|
|
// />
|
|
// </div> */}
|
|
// </div>
|
|
// <Table className="overflow-hidden mt-3">
|
|
// <TableHeader>
|
|
// {table.getHeaderGroups().map((headerGroup) => (
|
|
// <TableRow key={headerGroup.id} className="bg-default-200">
|
|
// {headerGroup.headers.map((header) => (
|
|
// <TableHead key={header.id}>
|
|
// {header.isPlaceholder
|
|
// ? null
|
|
// : flexRender(
|
|
// header.column.columnDef.header,
|
|
// header.getContext()
|
|
// )}
|
|
// </TableHead>
|
|
// ))}
|
|
// </TableRow>
|
|
// ))}
|
|
// </TableHeader>
|
|
// <TableBody>
|
|
// {table.getRowModel().rows?.length ? (
|
|
// table.getRowModel().rows.map((row) => (
|
|
// <TableRow
|
|
// key={row.id}
|
|
// data-state={row.getIsSelected() && "selected"}
|
|
// className="h-[75px]"
|
|
// >
|
|
// {row.getVisibleCells().map((cell) => (
|
|
// <TableCell key={cell.id}>
|
|
// {flexRender(cell.column.columnDef.cell, cell.getContext())}
|
|
// </TableCell>
|
|
// ))}
|
|
// </TableRow>
|
|
// ))
|
|
// ) : (
|
|
// <TableRow>
|
|
// <TableCell colSpan={columns.length} className="h-24 text-center">
|
|
// No results.
|
|
// </TableCell>
|
|
// </TableRow>
|
|
// )}
|
|
// </TableBody>
|
|
// </Table>
|
|
// <TablePagination
|
|
// table={table}
|
|
// totalData={totalData}
|
|
// totalPage={totalPage}
|
|
// />
|
|
// </div>
|
|
// );
|
|
// };
|
|
|
|
// export default TaskTaTable;
|