75 lines
3.0 KiB
JavaScript
75 lines
3.0 KiB
JavaScript
import SelectBox from "@/Components/Input/SelectBox"
|
|
import ArrowDownTrayIcon from '@heroicons/react/24/outline/ArrowDownTrayIcon'
|
|
import ShareIcon from '@heroicons/react/24/outline/ShareIcon'
|
|
import EnvelopeIcon from '@heroicons/react/24/outline/EnvelopeIcon'
|
|
import EllipsisVerticalIcon from '@heroicons/react/24/outline/EllipsisVerticalIcon'
|
|
import ArrowPathIcon from '@heroicons/react/24/outline/ArrowPathIcon'
|
|
import { useState } from "react"
|
|
import Datepicker from "react-tailwindcss-datepicker";
|
|
|
|
|
|
|
|
const periodOptions = [
|
|
{ name: "Today", value: "TODAY" },
|
|
{ name: "Yesterday", value: "YESTERDAY" },
|
|
{ name: "This Week", value: "THIS_WEEK" },
|
|
{ name: "Last Week", value: "LAST_WEEK" },
|
|
{ name: "This Month", value: "THIS_MONTH" },
|
|
{ name: "Last Month", value: "LAST_MONTH" },
|
|
]
|
|
|
|
function DashboardTopBar({ updateDashboardPeriod }) {
|
|
|
|
const [dateValue, setDateValue] = useState({
|
|
startDate: new Date(),
|
|
endDate: new Date()
|
|
});
|
|
|
|
const handleDatePickerValueChange = (newValue) => {
|
|
console.log("newValue:", newValue);
|
|
setDateValue(newValue);
|
|
updateDashboardPeriod(newValue)
|
|
}
|
|
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
|
|
<div className="">
|
|
<Datepicker
|
|
containerClassName="w-72 "
|
|
value={dateValue}
|
|
theme={"light"}
|
|
inputClassName="input input-bordered w-72"
|
|
popoverDirection={"down"}
|
|
toggleClassName="invisible"
|
|
onChange={handleDatePickerValueChange}
|
|
showShortcuts={true}
|
|
primaryColor={"white"}
|
|
/>
|
|
{/* <SelectBox
|
|
options={periodOptions}
|
|
labelTitle="Period"
|
|
placeholder="Select date range"
|
|
containerStyle="w-72"
|
|
labelStyle="hidden"
|
|
defaultValue="TODAY"
|
|
updateFormValue={updateSelectBoxValue}
|
|
/> */}
|
|
</div>
|
|
<div className="text-right ">
|
|
<button className="btn btn-ghost btn-sm normal-case"><ArrowPathIcon className="w-4 mr-2" />Refresh Data</button>
|
|
<button className="btn btn-ghost btn-sm normal-case ml-2"><ShareIcon className="w-4 mr-2" />Share</button>
|
|
|
|
<div className="dropdown dropdown-bottom dropdown-end ml-2">
|
|
<label tabIndex={0} className="btn btn-ghost btn-sm normal-case btn-square "><EllipsisVerticalIcon className="w-5" /></label>
|
|
<ul tabIndex={0} className="dropdown-content menu menu-compact p-2 shadow bg-base-100 rounded-box w-52">
|
|
<li><a><EnvelopeIcon className="w-4" />Email Digests</a></li>
|
|
<li><a><ArrowDownTrayIcon className="w-4" />Download</a></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DashboardTopBar |