feat: dynamic radio button for Filter component

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

@@ -66,6 +66,11 @@ export const Components: FC = (): ReactElement => {
   const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
   const [showFilter, setShowFilter] = useState(false);
 
+  const deliveryOptions = [
+    { id: 'option1', value: 'undelivered', label: 'Undelivered' },
+    { id: 'option1', value: 'delivered', label: 'Delivered' },
+  ];
+
   const columns: ColumnDef<Prize>[] = [
     {
       id: 'select',
@@ -214,7 +219,14 @@ export const Components: FC = (): ReactElement => {
               </Button>
               {showFilter && (
                 <div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
-                  <Filter onClose={() => setShowFilter(false)} />
+                  <Filter
+                    options={deliveryOptions}
+                    onClose={() => setShowFilter(false)}
+                    onFilterChange={(value) => {
+                      console.log('Selected filter:', value);
+                      // Filter logic di sini
+                    }}
+                  />
                 </div>
               )}
             </div>

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

@@ -50,6 +50,12 @@ export const Components: FC = (): ReactElement => {
   const [rowSelection, setRowSelection] = React.useState<RowSelectionState>({});
   const [showFilter, setShowFilter] = useState(false);
 
+  const validationOptions = [
+    { id: 'option1', value: 'unchecked', label: 'Unchecked' },
+    { id: 'option2', value: 'valid', label: 'Valid' },
+    { id: 'option3', value: 'invalid', label: 'Invalid' },
+  ];
+
   const columns: ColumnDef<Transaction>[] = [
     {
       id: 'select',
@@ -174,7 +180,14 @@ export const Components: FC = (): ReactElement => {
               </Button>
               {showFilter && (
                 <div className="absolute right-0 top-[calc(100%+12px)] z-10 shadow-lg">
-                  <Filter onClose={() => setShowFilter(false)} />
+                  <Filter
+                    options={validationOptions}
+                    onClose={() => setShowFilter(false)}
+                    onFilterChange={(value) => {
+                      console.log('Selected filter:', value);
+                      // Filter logic di sini
+                    }}
+                  />
                 </div>
               )}
             </div>

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

@@ -42,13 +42,31 @@ const Radio = ({
 
 interface FilterProps {
   onClose?: () => void;
+  options: Array<{
+    id: string;
+    value: string;
+    label: string;
+  }>;
+  selectedValue?: string;
+  onFilterChange?: (value: string) => void;
+  title?: string;
 }
 
-export const Filter = ({ onClose }: FilterProps) => {
-  const [selectedStatus, setSelectedStatus] = useState('delivered');
+export const Filter = ({
+  onClose,
+  options,
+  selectedValue,
+  onFilterChange,
+  title = 'Status',
+}: FilterProps) => {
+  const [selectedStatus, setSelectedStatus] = useState(
+    selectedValue || options[0]?.value || ''
+  );
 
   const handleStatusChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    setSelectedStatus(e.target.value);
+    const newValue = e.target.value;
+    setSelectedStatus(newValue);
+    onFilterChange?.(newValue);
   };
 
   return (
@@ -63,24 +81,19 @@ export const Filter = ({ onClose }: FilterProps) => {
         </button>
       </div>
       <hr className="border-primary-200" />
-      <span className="font-semibold text-primary-500">Status</span>
+      <span className="font-semibold text-primary-500">{title}</span>
       <div className="flex flex-col gap-[10px]">
-        <Radio
-          id="option1"
-          name="status"
-          value="undelivered"
-          label="Undelivered"
-          checked={selectedStatus === 'undelivered'}
-          onChange={handleStatusChange}
-        />
-        <Radio
-          id="option2"
-          name="status"
-          value="delivered"
-          label="Delivered"
-          checked={selectedStatus === 'delivered'}
-          onChange={handleStatusChange}
-        />
+        {options.map((option) => (
+          <Radio
+            key={option.id}
+            id={option.id}
+            name="status"
+            value={option.value}
+            label={option.label}
+            checked={selectedStatus === option.value}
+            onChange={handleStatusChange}
+          />
+        ))}
       </div>
     </div>
   );