feat(ui): added datepicker component

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

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/react";
+
+import { DatePicker } from "./DatePicker";
+
+const meta: Meta<typeof DatePicker> = {
+  title: "Components/DatePicker",
+  component: DatePicker,
+  tags: ["v2"],
+  argTypes: {}
+};
+
+export default meta;
+type Story = StoryObj<typeof DatePicker>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Primary: Story = {
+  args: {}
+};

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

@@ -0,0 +1,37 @@
+import { DayPicker, DayPickerProps } from "react-day-picker";
+import { faCalendar } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { PopoverContentProps, PopoverProps } from "@radix-ui/react-popover";
+import { format } from "date-fns";
+
+import { Button } from "../Button";
+import { Popover, PopoverContent, PopoverTrigger } from "../Popoverv2";
+
+export type DatePickerProps = Omit<DayPickerProps, "selected"> & {
+  value?: Date;
+  onChange: (date?: Date) => void;
+  popUpProps: PopoverProps;
+  popUpContentProps: PopoverContentProps;
+};
+
+// Doc: https://react-day-picker.js.org/
+export const DatePicker = ({
+  value,
+  onChange,
+  popUpProps,
+  popUpContentProps,
+  ...props
+}: DatePickerProps) => {
+  return (
+    <Popover {...popUpProps}>
+      <PopoverTrigger asChild>
+        <Button variant="outline_bg" leftIcon={<FontAwesomeIcon icon={faCalendar} />}>
+          {value ? format(value, "PPP") : "Pick a date"}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-fit p-2" {...popUpContentProps}>
+        <DayPicker {...props} mode="single" selected={value} onSelect={onChange} />
+      </PopoverContent>
+    </Popover>
+  );
+};

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

@@ -0,0 +1,2 @@
+export type { DatePickerProps } from "./DatePicker";
+export { DatePicker } from "./DatePicker";

frontend/src/components/v2/Dropdown/Dropdown.tsx

@@ -49,6 +49,7 @@ export type DropdownMenuItemProps<T extends ElementType> =
     icon?: ReactNode;
     as?: T;
     inputRef?: Ref<T>;
+    iconPos?: "left" | "right";
   };
 
 export const DropdownMenuItem = <T extends ElementType = "button">({
@@ -57,6 +58,7 @@ export const DropdownMenuItem = <T extends ElementType = "button">({
   className,
   icon,
   as: Item = "button",
+  iconPos = "left",
   ...props
 }: DropdownMenuItemProps<T> & ComponentPropsWithRef<T>) => (
   <DropdownMenuPrimitive.Item
@@ -67,8 +69,9 @@ export const DropdownMenuItem = <T extends ElementType = "button">({
     )}
   >
     <Item type="button" role="menuitem" className="flex w-full items-center" ref={inputRef}>
-      {icon && <span className="flex items-center mr-2">{icon}</span>}
+      {icon && iconPos === "left" && <span className="flex items-center mr-2">{icon}</span>}
       <span className="flex-grow text-left">{children}</span>
+      {icon && iconPos === "right" && <span className="flex items-center ml-2">{icon}</span>}
     </Item>
   </DropdownMenuPrimitive.Item>
 );

frontend/src/components/v2/index.tsx

@@ -1,6 +1,7 @@
 export * from "./Button";
 export * from "./Card";
 export * from "./Checkbox";
+export * from "./DatePicker";
 export * from "./DeleteActionModal";
 export * from "./Drawer";
 export * from "./Dropdown";
@@ -12,6 +13,7 @@ export * from "./IconButton";
 export * from "./Input";
 export * from "./Menu";
 export * from "./Modal";
+export * from "./Pagination";
 export * from "./Popoverv2";
 export * from "./SecretInput";
 export * from "./Select";

frontend/src/pages/_app.tsx

@@ -28,6 +28,7 @@ import { queryClient } from "@app/reactQuery";
 
 import "nprogress/nprogress.css";
 import "@fortawesome/fontawesome-svg-core/styles.css";
+import "react-day-picker/dist/style.css";
 import "../styles/globals.css";
 
 import "@app/i18n";

frontend/src/styles/globals.css

@@ -1,5 +1,20 @@
 @tailwind base;
 @tailwind components;
+
+.rdp-day,
+.rdp-nav_button {
+  @apply rounded-md hover:text-mineshaft-500;
+}
+
+.rdp-button:hover:not([disabled]):not(.rdp-day_selected),
+.rdp-nav_button:hover {
+  @apply bg-primary;
+}
+
+.rdp-day_today {
+  @apply bg-primary/50 hover:bg-primary-600 text-mineshaft-500;
+}
+
 @tailwind utilities;
 
 @layer utilities {

frontend/src/views/Settings/ProjectSettingsPage/components/WebhooksTab/WebhooksTab.tsx

@@ -1,7 +1,7 @@
 import { useTranslation } from "react-i18next";
 import { faInfoCircle, faPlug, faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import dayjs from "dayjs";
+import { format } from "date-fns";
 
 import { useNotificationContext } from "@app/components/context/Notifications/NotificationProvider";
 import {
@@ -196,7 +196,8 @@ export const WebhooksTab = () => {
                               content={
                                 <div className="text-xs">
                                   <div>
-                                    Updated At: {dayjs(updatedAt).format("YYYY-MM-DD, hh:mm A")}
+                                    Updated At:{" "}
+                                    {format(new Date(updatedAt), "YYYY-MM-DD, hh:mm aaa")}
                                   </div>
                                   {lastRunErrorMessage && (
                                     <div className="mt-2 text-red">