feat: add filter popover component for delivery status

- Tambah fungsional close button untuk komponen Filter
- Penyesuaian warna neutral sesuai Design System

apps/backoffice/src/app/accounts/page.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 
-import { FC, ReactElement } from 'react';
+import { FC, ReactElement, useState } from 'react';
 import {
   FilterOutlined,
   SearchOutlined,
   EditOutlined,
 } from '@ant-design/icons';
 import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
-import { DataTable } from '@imphnen-frontend-service/ui/organisms';
+import { DataTable, Filter } from '@imphnen-frontend-service/ui/organisms';
 
 import {
   ColumnDef,
@@ -100,6 +100,7 @@ export const Components: FC = (): ReactElement => {
   });
 
   const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+  const [showFilter, setShowFilter] = useState(false);
 
   const table = useReactTable({
     data: mockData,
@@ -138,15 +139,23 @@ export const Components: FC = (): ReactElement => {
             </div>
           </div>
 
-          <Button
-            variant="primary"
-            disabled
-            size="md"
-            className="flex items-center gap-3"
-          >
-            <FilterOutlined />
-            Filters
-          </Button>
+          <div className="relative">
+            <Button
+              variant="primary"
+              size="md"
+              className="flex items-center gap-3"
+              disabled
+              onClick={() => setShowFilter(!showFilter)}
+            >
+              <FilterOutlined />
+              Filters
+            </Button>
+            {showFilter && (
+              <div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
+                <Filter onClose={() => setShowFilter(false)} />
+              </div>
+            )}
+          </div>
         </div>
 
         {/* Table */}

apps/backoffice/src/app/prizes/page.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 
-import { FC, ReactElement } from 'react';
+import { FC, ReactElement, useState } from 'react';
 import {
   FilterOutlined,
   SearchOutlined,
   AuditOutlined,
 } from '@ant-design/icons';
 import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
-import { DataTable } from '@imphnen-frontend-service/ui/organisms';
+import { DataTable, Filter } from '@imphnen-frontend-service/ui/organisms';
 
 import {
   ColumnDef,
@@ -165,6 +165,7 @@ export const Components: FC = (): ReactElement => {
   });
 
   const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+  const [showFilter, setShowFilter] = useState(false);
 
   const table = useReactTable({
     data: mockData,
@@ -203,14 +204,22 @@ export const Components: FC = (): ReactElement => {
             </div>
           </div>
 
-          <Button
-            variant="primary"
-            size="md"
-            className="flex items-center gap-3"
-          >
-            <FilterOutlined />
-            Filters
-          </Button>
+          <div className="relative">
+            <Button
+              variant="primary"
+              size="md"
+              className="flex items-center gap-3"
+              onClick={() => setShowFilter(!showFilter)}
+            >
+              <FilterOutlined />
+              Filters
+            </Button>
+            {showFilter && (
+              <div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
+                <Filter onClose={() => setShowFilter(false)} />
+              </div>
+            )}
+          </div>
         </div>
 
         {/* Table */}

apps/backoffice/src/app/transactions/page.tsx

@@ -1,13 +1,12 @@
 import * as React from 'react';
-
-import { FC, ReactElement } from 'react';
+import { FC, ReactElement, useState } from 'react';
 import {
   FilterOutlined,
   SearchOutlined,
   AuditOutlined,
 } from '@ant-design/icons';
 import { Button, Input } from '@imphnen-frontend-service/ui/atoms';
-import { DataTable } from '@imphnen-frontend-service/ui/organisms';
+import { DataTable, Filter } from '@imphnen-frontend-service/ui/organisms';
 
 import {
   ColumnDef,
@@ -120,6 +119,7 @@ export const Components: FC = (): ReactElement => {
   });
 
   const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
+  const [showFilter, setShowFilter] = useState(false);
 
   const table = useReactTable({
     data: mockTransactions,
@@ -158,14 +158,22 @@ export const Components: FC = (): ReactElement => {
             </div>
           </div>
 
-          <Button
-            variant="primary"
-            size="md"
-            className="flex items-center gap-3"
-          >
-            <FilterOutlined />
-            Filters
-          </Button>
+          <div className="relative">
+            <Button
+              variant="primary"
+              size="md"
+              className="flex items-center gap-3"
+              onClick={() => setShowFilter(!showFilter)}
+            >
+              <FilterOutlined />
+              Filters
+            </Button>
+            {showFilter && (
+              <div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
+                <Filter onClose={() => setShowFilter(false)} />
+              </div>
+            )}
+          </div>
         </div>
 
         {/* Table */}

apps/backoffice/src/index.css

@@ -17,14 +17,14 @@
 
   --color-neutral-50: #f6f6f6;
   --color-neutral-100: #e7e7e7;
-  --color-neutral-200: #d0d0d0;
-  --color-neutral-300: #b7b7b7;
-  --color-neutral-400: #9f9f9f;
-  --color-neutral-500: #7e7e7e;
+  --color-neutral-200: #d1d1d1;
+  --color-neutral-300: #b0b0b0;
+  --color-neutral-400: #888888;
+  --color-neutral-500: #6d6d6d;
   --color-neutral-600: #5d5d5d;
-  --color-neutral-700: #4a4a4a;
-  --color-neutral-800: #3a3a3a;
-  --color-neutral-900: #2f2f2f;
+  --color-neutral-700: #4f4f4f;
+  --color-neutral-800: #454545;
+  --color-neutral-900: #3d3d3d;
   --color-neutral-950: #2b2b2b;
 
   --color-success-100: #e0fbd8;

apps/gacha/src/index.css

@@ -17,14 +17,14 @@
 
   --color-neutral-50: #f6f6f6;
   --color-neutral-100: #e7e7e7;
-  --color-neutral-200: #d0d0d0;
-  --color-neutral-300: #b7b7b7;
-  --color-neutral-400: #9f9f9f;
-  --color-neutral-500: #7e7e7e;
+  --color-neutral-200: #d1d1d1;
+  --color-neutral-300: #b0b0b0;
+  --color-neutral-400: #888888;
+  --color-neutral-500: #6d6d6d;
   --color-neutral-600: #5d5d5d;
-  --color-neutral-700: #4a4a4a;
-  --color-neutral-800: #3a3a3a;
-  --color-neutral-900: #2f2f2f;
+  --color-neutral-700: #4f4f4f;
+  --color-neutral-800: #454545;
+  --color-neutral-900: #3d3d3d;
   --color-neutral-950: #2b2b2b;
 
   --color-success-100: #e0fbd8;

libs/ui/src/index.css

@@ -17,14 +17,14 @@
 
   --color-neutral-50: #f6f6f6;
   --color-neutral-100: #e7e7e7;
-  --color-neutral-200: #d0d0d0;
-  --color-neutral-300: #b7b7b7;
-  --color-neutral-400: #9f9f9f;
-  --color-neutral-500: #7e7e7e;
+  --color-neutral-200: #d1d1d1;
+  --color-neutral-300: #b0b0b0;
+  --color-neutral-400: #888888;
+  --color-neutral-500: #6d6d6d;
   --color-neutral-600: #5d5d5d;
-  --color-neutral-700: #4a4a4a;
-  --color-neutral-800: #3a3a3a;
-  --color-neutral-900: #2f2f2f;
+  --color-neutral-700: #4f4f4f;
+  --color-neutral-800: #454545;
+  --color-neutral-900: #3d3d3d;
   --color-neutral-950: #2b2b2b;
 
   --color-success-100: #e0fbd8;

libs/ui/src/organisms/filter/filter.tsx

@@ -20,7 +20,7 @@ const Radio = ({
   value,
   onChange,
 }: RadioProps) => (
-  <div className="flex gap-2 items-start">
+  <div className="flex gap-2 items-center">
     <div className="relative grid place-items-center mt-1">
       <input
         type="radio"
@@ -40,7 +40,11 @@ const Radio = ({
   </div>
 );
 
-export const Filter = () => {
+interface FilterProps {
+  onClose?: () => void;
+}
+
+export const Filter = ({ onClose }: FilterProps) => {
   const [selectedStatus, setSelectedStatus] = useState('delivered');
 
   const handleStatusChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -48,13 +52,11 @@ export const Filter = () => {
   };
 
   return (
-    <div className="inline-flex flex-col p-[20px] bg-white rounded-lg gap-4 w-[122px]">
+    <div className="inline-flex flex-col p-[20px] bg-white rounded-lg gap-4 w-[122px] shadow">
       <div className="flex justify-between items-baseline">
         <span className="font-semibold text-p3 text-primary-500">Filters</span>
         <button
-          onClick={() => {
-            console.log('clicked');
-          }}
+          onClick={onClose}
           className="cursor-pointer text-neutral-400 hover:text-neutral-600"
         >
           <CloseOutlined className="text-[12px]" />

libs/ui/src/organisms/index.ts

@@ -2,3 +2,4 @@ export * from './navbar';
 export * from './modals-gacha';
 export * from './backoffice-sidebar'
 export * from './datatable'
+export * from './filter'