--wip-- [skip ci]

dashboard/package.json

@@ -22,6 +22,7 @@
     "@mui/x-charts": "^7.7.1",
     "@radix-ui/react-collapsible": "^1.1.0",
     "@radix-ui/react-checkbox": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.1",
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-label": "^2.1.0",
     "@radix-ui/react-navigation-menu": "^1.2.0",
@@ -44,6 +45,7 @@
     "react-intl": "^6.6.8",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
+    "vaul": "^0.9.1",
     "vite": "^5.3.1"
   },
   "devDependencies": {
@@ -78,4 +80,4 @@
     "tailwindcss": "^3.4.4",
     "typescript": "^5.2.2"
   }
-}
+}

dashboard/src/components/Filter/Drawer.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import { Button } from '../ui/button';
+
+import {
+  Drawer as UIDrawer,
+  DrawerContent,
+  DrawerFooter,
+  DrawerClose,
+  DrawerTrigger,
+} from '../ui/drawer';
+import { Separator } from '../ui/separator';
+
+import Header, { IHeader } from './Header';
+
+interface IFilterDrawe {
+  children?: React.ReactNode;
+  onCancel?: () => void;
+  onFilter?: () => void;
+  headerProps: IHeader;
+}
+
+const Drawer = ({
+  children,
+  onCancel,
+  onFilter,
+  headerProps,
+}: IFilterDrawe): JSX.Element => {
+  return (
+    <UIDrawer>
+      <DrawerTrigger asChild>
+        <Button variant="outline">Open Drawer</Button>
+      </DrawerTrigger>
+      <DrawerContent className="flex items-center bg-lightGray">
+        <div className="w-[1000px] rounded-lg bg-white">
+          <Header {...headerProps} />
+
+          {React.Children.map(children, child => (
+            <>
+              <Separator />
+              <div className="px-6 py-10">{child}</div>
+            </>
+          ))}
+        </div>
+
+        <DrawerFooter className="flex flex-row justify-end w-full h-20 bg-white mt-6 gap-x-6">
+          <DrawerClose asChild>
+            <Button variant="ghost" onClick={onCancel}>
+              Cancel
+            </Button>
+          </DrawerClose>
+          <DrawerClose
+            asChild
+            className="w-[200px] rounded-full bg-lightBlue text-white"
+          >
+            <Button variant="outline" onClick={onFilter}>
+              Filter
+            </Button>
+          </DrawerClose>
+        </DrawerFooter>
+      </DrawerContent>
+    </UIDrawer>
+  );
+};
+
+export default Drawer;

dashboard/src/components/Filter/Header.tsx

@@ -0,0 +1,27 @@
+export interface IHeader {
+  title: string;
+  tree: string;
+  matainer: string;
+  commit: string;
+  estimate: string;
+}
+
+const Header = ({
+  title,
+  tree,
+  matainer,
+  commit,
+  estimate,
+}: IHeader): JSX.Element => {
+  return (
+    <div className="h-[100px]">
+      {title}
+      {tree}
+      {matainer}
+      {commit}
+      {estimate}
+    </div>
+  );
+};
+
+export default Header;

dashboard/src/components/Filter/CheckboxSection.stories.tsx → dashboard/src/components/Filter/stories/CheckboxSection.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { fn } from '@storybook/test';
 
-import CheckboxSection from './CheckboxSection';
+import CheckboxSection from '../CheckboxSection';
 
 const ActionsData = {
   onClickItem: fn(),

dashboard/src/components/Filter/stories/FilterDrawer.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { IntlProvider } from 'react-intl';
+import { flatten } from 'flat';
+
+import { LOCALES } from '../../../locales/constants';
+
+import { messages } from '../../../locales/messages';
+
+import FilterDrawer from '../Drawer';
+
+import CheckboxSection from '../CheckboxSection';
+import TimeRangeSection from '../TimeRangeSection';
+
+const meta: Meta<typeof FilterDrawer> = {
+  title: 'FilterDrawer',
+  component: FilterDrawer,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  decorators: [
+    (): JSX.Element => (
+      <IntlProvider
+        messages={flatten(messages[LOCALES.EN_US])}
+        locale={LOCALES.EN_US}
+      >
+        <FilterDrawer headerProps={headerProps}>
+          <CheckboxSection {...checkboxSectionProps} />
+          <CheckboxSection {...checkboxSectionProps} />
+          <TimeRangeSection {...timeRangeSectionProps} />
+        </FilterDrawer>
+      </IntlProvider>
+    ),
+  ],
+};
+
+const headerProps = {
+  title: 'Tree',
+  tree: 'stable-rc',
+  matainer: 'Shannon Nelson',
+  commit: '5.15.150-rc1 - 3ab4d9c9e190217ee7e974c70b96795cd2f74611',
+  estimate: '2 hours',
+};
+
+const checkboxSectionProps = {
+  items: ['linux-5.15.y', 'Status:failed', 'Status: Warnings'],
+  title: 'Branch',
+  subtitle: 'Please select one or more Branches',
+  onClickItem: (idx: number, isChecked: boolean): void =>
+    console.log(idx, isChecked),
+};
+
+const onChangeM = (e: React.FormEvent<HTMLInputElement>): void =>
+  console.log(e.target);
+const timeRangeSectionProps = {
+  min: 0,
+  max: 100,
+  onMinChange: onChangeM,
+  onMaxChange: onChangeM,
+};

dashboard/src/components/Filter/TimeRangeSection.stories.tsx → dashboard/src/components/Filter/stories/TimeRangeSection.stories.tsx

@@ -4,11 +4,11 @@ import { flatten } from 'flat';
 
 import { fn } from '@storybook/test';
 
-import { LOCALES } from '../../locales/constants';
+import { LOCALES } from '../../../locales/constants';
 
-import { messages } from '../../locales/messages';
+import { messages } from '../../../locales/messages';
 
-import TimeRangeSection from './TimeRangeSection';
+import TimeRangeSection from '../TimeRangeSection';
 
 const ActionsData = {
   onMinChange: fn(),