feat: add filter popover component for delivery status

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

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'