Notes

import React, { useEffect, useState, useRef } from "react";
import { useMsal } from "@azure/msal-react";
import { CSVLink } from "react-csv";
import { Tab } from "./Tab/Tab";
import { DataTable } from "../AdminDashboard/DataTable/DataTable";
import { ExportBtn } from "../../Components/ExportBtn/ExportBtn.js";
import CalendarDropdown from "../../Components/ExportBtn/CalendarDropdown";
import Searchicon from "../../Assets/Icon/Searchicon.svg"
import "./AdminDashboard.css";

const AdminDashboard = () => {
const [activeTab, setActiveTab] = useState("Accounts");
const [accountsRows, setAccountsRows] = useState([]);
const [paymentsRows, setPaymentsRows] = useState([]);
const [policiesRows, setPoliciesRows] = useState([]);
const [loggedInUser, setLoggedinUser] = useState("");
const [isCalendarOpen, setIsCalendarOpen] = useState(false); // Calendar state
const calendarRef = useRef(null);
const { accounts } = useMsal();

useEffect(() => {
setLoggedinUser(accounts[0].name.split(" ")[0]);
// if (!isFetching) {
// setAccountsRows(data.users);
// }
// if (!isFetchingPolicy) {
// setPoliciesRows(policyData)
// }



// useEffect(() => {
// // if (rowss.length > 0) {
// // setExportData(rowss);
// // }
// // }, [rowss]);
// handleActiveTab("Accounts");
// },)
// setPaymentsRows([
// {
// "account_name": "Dhruvit Patel",
// "Email": "[email protected]",
// "Policyholder": "Performance Services Pty Ltd",
// "policy_number": "LGS00622-24",
// "order_number": "887889",
// "payment_date": "08/13/2024",
// "amount": "$1,300.00",
// "view_invoice": ""
// },
// {
// "account_name": "Dhruvit Patel",
// "Email": "[email protected]",
// "Policyholder": "Performance Services Pty Ltd",
// "policy_number": "LGS00622-24",
// "order_number": "867889",
// "payment_date": "07/13/2024",
// "amount": "$1,618.77",
// "view_invoice": ""
// },
// {
// "account_name": "Jane Doe",
// "Email": "[email protected]",
// "Policyholder": "Comany name Pty Ltd 1",
// "policy_number": "LGS00785-24",
// "order_number": "623834",
// "payment_date": "06/07/2024",
// "amount": "$900.00",
// "view_invoice": ""
// },
// {
// "account_name": "Keyur Raval",
// "Email": "[email protected]",
// "Policyholder": "Company 3 name",
// "policy_number": "LGS00762-24",
// "order_number": "623801",
// "payment_date": "05/16/2024",
// "amount": "$1,300.07",
// "view_invoice": ""
// },
// {
// "account_name": "Kinjal Panchal",
// "Email": "[email protected]",
// "Policyholder": "Company 4 name",
// "policy_number": "LGS00369-24",
// "order_number": "523832",
// "payment_date": "05/17/2024",
// "amount": "$1200.00",
// "view_invoice": ""
// }
// ])

}, [])
const columns = [
{ id: "account_name", name: "Account Name" },
{ id: "status", name: "Status" },

];
const headers = columns.map((col) => ({ label: col.name, key: col.id }));

const accountsColumns = [
{
id: "account_name",
name: "Account name"
},
{
id: "email",
name: "Email"
},
{
id: "relation",
name: "Relationship"
},
{
id: "createdAt",
name: "Account since"
},
{
id: "policies",
name: "Policies"
},
{
id: "request",
name: "Requests"
},
{
id: "modifiedAt",
name: "Last sign in"
},
{
id: "isActive",
name: "Status"
},
{
id: "view_account",
name: ""
}
]

const paymentsColumns = [
{
id: "accountName",
name: "Account name"
},
{
id: "policyHolderName",
name: "Policyholder"
},
{
id: "policyNumber",
name: "Policy number"
},
{
id: "confirmationNumber",
name: "Confirmation no."
},
{
id: "invoiceTypeCode",
name: "Type"
},
{
id: "reportingPeriod",
name: "Period"
},
{
id: "transactionDate",
name: "Payment date"
},
{
id: "premiumReceived",
name: "Amount"
},
{
id: "view_invoice",
name: ""
}
]

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: "three_dot",
// name: ""
// },
{
id: "view_policy",
name: ""
}
]

const tabsArray = [
{
id: 1,
name: "Accounts",
rows: accountsRows,
columns: accountsColumns
},
{
id: 2,
name: "Policies",
rows: policiesRows,
columns: policiesColumns
},
{
id: 3,
name: "Payments",
rows: paymentsRows,
columns: paymentsColumns
},
// {
// id: 5,
// name: "Policy requests",
// rows: policyRequestRows,
// columns: policyRequestColumns

// },
// {
// id: 6,
// name: "Reactivation requests",
// rows: accountsRows,
// columns: accountsColumns
// }
];

const getActiveTable = () => tabsArray.filter((tabObj) => tabObj.name === activeTab)[0];

// const handleActiveTab = async (tabName) => {
// setActiveTab(tabName);
// }
// const handleRowUpdate = async (data) => {
// setRowss(data
// // setRowss(data)
// );
// console.log(data,"data from amdin dashboard")
// // setIsLoading(false);
// console.log("fetching rowsdaa data ", data)
// // console.log("fetching rowsdaa row ", rowss)
// };
// useEffect (()=>{
// console.log("checking rows from admin dashboard" , rowss)

// },[rowss]);
const handleActiveTab = async (tabName) => {
setActiveTab(tabName);
}
const handleCalendarToggle = () => {
setIsCalendarOpen(!isCalendarOpen);
};

const handleApply = () => {
console.log("Apply filter clicked");
setIsCalendarOpen(false);
};

const handleReset = () => {
console.log("Reset filter clicked");
};

const closeCalendarOnClickOutside = (event) => {
if (calendarRef.current && !calendarRef.current.contains(event.target)) {
setIsCalendarOpen(false);
}
};

useEffect(() => {
document.addEventListener("mousedown", closeCalendarOnClickOutside);
return () => {
document.removeEventListener("mousedown", closeCalendarOnClickOutside);
};
}, []);

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 id={tab.id} setActiveTab={(tabName) => handleActiveTab(tabName)} activeTab={activeTab} tab={tab} />)}
</ul>
<div className="search-export-container">
<div className="search-container">
{/* <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search" viewBox="0 0 16 16">
<path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0" />
</svg> */}
<img alt="company-logo" src={Searchicon} width="20" height="20" fill="currentColor" className="download-arrow" viewBox="0 0 16 16" />
<input className="search-input" placeholder="Search" type="search" />
</div>

<ExportBtn
activeTab={activeTab}
onCalendarToggle={handleCalendarToggle}
/>
{isCalendarOpen && (
<div ref={calendarRef}>
<CalendarDropdown onApply={handleApply} onReset={handleReset} />
</div>
)}
</div>
</div>
</div>
<div className="admin-bottom-section">
<div className="admin-table-container">
<DataTable columns={getActiveTable().columns} activeTab={activeTab} />
</div>
</div>
{isCalendarOpen && (
<div ref={calendarRef}>
<CalendarDropdown onApply={handleApply} onReset={handleReset} />
</div>
)}
</div>
);
};

export default AdminDashboard;