refactor(FE-361,363): Add sort order selector to PurchasesPerSupplierTab

src/components/pages/report/logistic-stock/tab/PurchasesPerSupplierTab.tsx

@@ -102,6 +102,14 @@ const PurchasesPerSupplierTab = () => {
     []
   );
 
+  const sortByOptions = useMemo(
+    () => [
+      { value: 'ASC', label: 'Ascending' },
+      { value: 'DESC', label: 'Descending' },
+    ],
+    []
+  );
+
   const areaChangeHandler = useCallback(
     (val: OptionType | OptionType[] | null) => {
       const arr = Array.isArray(val) ? val : val ? [val] : [];
@@ -163,6 +171,16 @@ const PurchasesPerSupplierTab = () => {
     [updateFilter]
   );
 
+  const sortByHandler = useCallback(
+    (val: OptionType | OptionType[] | null) => {
+      const newVal = val as OptionType;
+      const sortValue = (newVal?.value as 'ASC' | 'DESC') || 'ASC';
+      updateFilter('sort_by', sortValue);
+      setIsSubmitted(false);
+    },
+    [updateFilter]
+  );
+
   const startDateChangeHandler = useCallback<
     ChangeEventHandler<HTMLInputElement>
   >(
@@ -843,19 +861,34 @@ const PurchasesPerSupplierTab = () => {
             isLoading={isLoadingProductCategories}
             isClearable
           />
-          <SelectInput
-            label='Filter Berdasarkan'
-            placeholder='Pilih Filter Berdasarkan'
-            options={dataTypeOptions}
-            value={
-              dataTypeOptions?.find(
-                (option) => option.value === tableFilterState.filter_by
-              ) || null
-            }
-            onChange={dataTypeChangeHandler}
-            isLoading={false}
-            isClearable={false}
-          />
+          <div className='md:flex md:flex-row grid grid-cols-1 gap-4'>
+            <SelectInput
+              label='Filter Berdasarkan'
+              placeholder='Pilih Filter Berdasarkan'
+              options={dataTypeOptions}
+              value={
+                dataTypeOptions?.find(
+                  (option) => option.value === tableFilterState.filter_by
+                ) || null
+              }
+              onChange={dataTypeChangeHandler}
+              isLoading={false}
+              isClearable={false}
+            />
+            <SelectInput
+              label='Urutkan Berdasarkan'
+              placeholder='Pilih Urutkan Berdasarkan'
+              options={sortByOptions}
+              value={
+                sortByOptions?.find(
+                  (option) => option.value === tableFilterState.sort_by
+                ) || null
+              }
+              onChange={sortByHandler}
+              isLoading={false}
+              isClearable={false}
+            />
+          </div>
           <div className='md:flex md:flex-row grid grid-cols-1 gap-4'>
             <DateInput
               label='Tanggal Awal'