improvement: revise and expand audit log date filter and page

frontend/src/components/v2/DatePicker/DatePicker.tsx

@@ -18,6 +18,7 @@ export type DatePickerProps = Omit<DayPickerProps, "selected"> & {
   popUpProps: PopoverProps;
   popUpContentProps: PopoverContentProps;
   dateFormat?: "PPP" | "PP" | "P"; // extend as needed
+  buttonClassName?: string;
 };
 
 // Doc: https://react-day-picker.js.org/
@@ -27,6 +28,7 @@ export const DatePicker = ({
   popUpProps,
   popUpContentProps,
   dateFormat = "PPP",
+  buttonClassName,
   ...props
 }: DatePickerProps) => {
   const [timeValue, setTimeValue] = useState<string>(value ? format(value, "HH:mm") : "00:00");
@@ -57,7 +59,11 @@ export const DatePicker = ({
   return (
     <Popover {...popUpProps}>
       <PopoverTrigger asChild>
-        <Button variant="outline_bg" leftIcon={<FontAwesomeIcon icon={faCalendar} />}>
+        <Button
+          className={buttonClassName}
+          variant="outline_bg"
+          leftIcon={<FontAwesomeIcon icon={faCalendar} />}
+        >
           {value ? format(value, dateFormat) : "Pick a date and time"}
         </Button>
       </PopoverTrigger>

frontend/src/components/v2/Select/Select.tsx

@@ -19,6 +19,7 @@ type Props = {
   icon?: IconProp;
   isMulti?: boolean;
   iconClassName?: string;
+  dropdownContainerStyle?: React.CSSProperties;
 };
 
 export type SelectProps = Omit<SelectPrimitive.SelectProps, "disabled"> & Props;
@@ -35,6 +36,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
       position,
       containerClassName,
       iconClassName,
+      dropdownContainerStyle,
       ...props
     },
     ref
@@ -82,7 +84,7 @@ export const Select = forwardRef<HTMLButtonElement, SelectProps>(
                 dropdownContainerClassName
               )}
               position={position}
-              style={{ width: "var(--radix-select-trigger-width)" }}
+              style={dropdownContainerStyle ?? { width: "var(--radix-select-trigger-width)" }}
             >
               <SelectPrimitive.ScrollUpButton>
                 <div className="flex items-center justify-center">