feat(FE-85-87-88): slicing ui and integrate api for search and edit

src/components/pages/production/project-flock/ProjectFlockTable.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import Button from '@/components/Button';
+import DebouncedTextInput from '@/components/input/DebouncedTextInput';
 import SelectInput, { OptionType } from '@/components/input/SelectInput';
 import { useModal } from '@/components/Modal';
 import ConfirmationModal from '@/components/modal/ConfirmationModal';
@@ -21,7 +22,7 @@ import {
   ColumnSort,
   SortingState,
 } from '@tanstack/react-table';
-import { useCallback, useEffect, useState } from 'react';
+import { ChangeEventHandler, useCallback, useEffect, useState } from 'react';
 import toast from 'react-hot-toast';
 import useSWR from 'swr';
 
@@ -54,6 +55,15 @@ const RowOptionsMenu = ({
         <Icon icon='mdi:eye-outline' width={16} height={16} />
         Detail
       </Button>
+      <Button
+        href={`/production/project-flock/detail/edit?projectFlockId=${props.row.original.id}`}
+        variant='ghost'
+        color='warning'
+        className='justify-start text-sm'
+      >
+        <Icon icon='mdi:pencil-outline' width={16} height={16} />
+        Edit
+      </Button>
       <Button
         onClick={deleteClickHandler}
         variant='ghost'
@@ -217,6 +227,10 @@ const ProjectFlockTable = () => {
     setIsDeleteLoading(false);
   };
 
+  const searchChangeHandler: ChangeEventHandler<HTMLInputElement> = (e) => {
+    updateFilter('search', e.target.value);
+  };
+
   const updateSortingFilter = useCallback(
     (
       sortName: Exclude<keyof typeof tableFilterState, 'page' | 'pageSize'>,
@@ -235,14 +249,31 @@ const ProjectFlockTable = () => {
     <>
       <div className='w-full p-0 sm:p-4'>
         <div className='flex flex-col gap-2 mb-4'>
-          <div className='w-full flex flex-col sm:flex-row justify-between items-end sm:items-center gap-2'>
-            <div className='flex flex-row'>
-              <Button href='/production/project-flock/add' color='primary'>
+          <div className='w-full flex flex-col justify-between items-end gap-2'>
+            <div className='flex flex-col sm:flex-row gap-3 w-full'>
+              <Button
+                href='/production/project-flock/add'
+                color='primary'
+                className='w-full sm:w-fit'
+              >
                 <Icon icon='ic:round-plus' width={24} height={24} />
                 Tambah
               </Button>
+              <div className='ms-auto w-full sm:w-auto'>
+                <DebouncedTextInput
+                  name='search'
+                  placeholder='Cari Area'
+                  value={tableFilterState.search}
+                  onChange={searchChangeHandler}
+                  className={{ 
+                    wrapper: 'w-full sm:max-w-3xs', 
+                    input: 'w-full',
+                    inputWrapper: 'w-full',
+                  }}
+                />
+              </div>
             </div>
-            <div className='flex flex-row justify-end'>
+            <div className='hidden sm:flex flex-row justify-end'>
               <SelectInput
                 label='Baris'
                 options={ROWS_OPTIONS}