Notes

import React, { useEffect, useState } from "react";
import { useMsal } from "@azure/msal-react";
import { Tab } from "./Tab/Tab";
import { DataTable } from "../AdminDashboard/DataTable/DataTable";
import { ExportBtn } from "../../Components/ExportBtn/ExportBtn.js";
import Searchicon from "../../Assets/Icon/Searchicon.svg";
import { useSearchPolicyMutation } from "../../api/policyAPI"; // Assuming correct path
import "./AdminDashboard.css";

const AdminDashboard = () => {
const [activeTab, setActiveTab] = useState("Accounts");
const [accountsRows, setAccountsRows] = useState([]);
const [paymentsRows, setPaymentsRows] = useState([]);
const [policiesRows, setPoliciesRows] = useState([]);
const [searchQuery, setSearchQuery] = useState(""); // Search query state
const [searchResults, setSearchResults] = useState([]); // Search results state
const [loggedInUser, setLoggedinUser] = useState("");
const { accounts } = useMsal();

const [searchPolicy, { isLoading: isSearchLoading }] = useSearchPolicyMutation(); // Mutation hook

useEffect(() => {
setLoggedinUser(accounts[0]?.name?.split(" ")[0] || "");
}, [accounts]);

const handleSearch = async () => {
if (!searchQuery) return;
try {
const response = await searchPolicy({ policyNumber: searchQuery }).unwrap();
setSearchResults(response?.policies || []); // Assuming the API returns a `policies` array
} catch (error) {
console.error("Error searching for policies:", error);
}
};

const policiesColumns = [
{ id: "policyHolderName", name: "Policyholder" },
{ id: "policyNumber", name: "Policy number" },
{ id: "policyEffectiveDate", name: "Effective date" },
{ id: "user", name: "Users" },
{ id: "paymentStatus", name: "Payment status" },
{ id: "lastPayment", name: "Last payment" },
{ id: "eslStatus", name: "ESL status" },
{ id: "view_policy", name: "" },
];

const tabsArray = [
{
id: 1,
name: "Accounts",
rows: accountsRows,
columns: [], // Update with relevant columns
},
{
id: 2,
name: "Policies",
rows: searchResults.length > 0 ? searchResults : policiesRows,
columns: policiesColumns,
},
{
id: 3,
name: "Payments",
rows: paymentsRows,
columns: [], // Update with relevant columns
},
];

const getActiveTable = () => tabsArray.find((tabObj) => tabObj.name === activeTab);

const handleActiveTab = (tabName) => {
setActiveTab(tabName);
if (tabName === "Policies" && searchQuery) {
handleSearch();
}
};

return (
<div className="dashbaord-container">
<div className="admin-dashboard-top-section">
<h1 className="welcome-user">Welcome {loggedInUser}</h1>
<div className="tabs-search-conatiner">
<ul className="tabs-container">
{tabsArray.map((tab) => (
<Tab
key={tab.id}
id={tab.id}
setActiveTab={handleActiveTab}
activeTab={activeTab}
tab={tab}
/>
))}
</ul>
<div className="search-export-container">
<div className="search-container">
<img
alt="Search icon"
src={Searchicon}
width="20"
height="20"
fill="currentColor"
className="download-arrow"
viewBox="0 0 16 16"
/>
<input
className="search-input"
placeholder="Search Policy Number"
type="search"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
/>
<button onClick={handleSearch} disabled={isSearchLoading}>
Search
</button>
</div>
<ExportBtn activeTab={activeTab} />
</div>
</div>
</div>
<div className="admin-bottom-section">
<div className="admin-table-container">
<DataTable
columns={getActiveTable()?.columns || []}
rows={getActiveTable()?.rows || []}
activeTab={activeTab}
/>
</div>
</div>
</div>
);
};

export default AdminDashboard;