Audit Bill Date Picker - Copy this React, Tailwind Component to your project
"use client"; import React, { useState } from "react"; import { format } from "date-fns"; import { cn } from "../lib/utils"; import { Popover, PopoverContent, PopoverTrigger } from "../components/ui/popover"; import { Calendar } from "../components/ui/calendar"; // Ensure correct import function AuditBillGenerator({ className }) { // State for start & end dates const [startDate, setStartDate] = useState(null); const [endDate, setEndDate] = useState(null); return ( <div className={cn("grid gap-4", className)}> {/* Start Date Picker */} <div className="relative"> <label className="block text-gray-700">Start Date:</label> <Popover> <PopoverTrigger asChild> <button className={cn( "btn px-2.5 cursor-pointer min-w-[15.5rem] bg-white border border-gray-300 dark:border-gray-700 dark:bg-gray-800 text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 font-medium text-left justify-start" )} > 📅 {startDate ? format(startDate, "LLL dd, y") : "Select start date"} </button> </PopoverTrigger> <PopoverContent className="w-auto p-0" align="start"> <Calendar mode="single" selected={startDate} onSelect={setStartDate} className="border p-2 rounded-md bg-white dark:bg-gray-800" /> </PopoverContent> </Popover> </div> {/* End Date Picker */} <div className="relative"> <label className="block text-gray-700">End Date:</label> <Popover> <PopoverTrigger asChild> <button className={cn( "btn px-2.5 cursor-pointer min-w-[15.5rem] bg-white border border-gray-300 dark:border-gray-700 dark:bg-gray-800 text-gray-600 hover:text-gray-800 dark:text-gray-300 dark:hover:text-gray-100 font-medium text-left justify-start" )} > 📅 {endDate ? format(endDate, "LLL dd, y") : "Select end date"} </button> </PopoverTrigger> <PopoverContent className="w-auto p-0" align="start"> <Calendar mode="single" selected={endDate} onSelect={setEndDate} className="border p-2 rounded-md bg-white dark:bg-gray-800" /> </PopoverContent> </Popover> </div> </div> ); } export default AuditBillGenerator; flex the code and generate report button add
