fixing refresh & sorting manage groups

src/pages/groups/ListToolbar.tsx

@@ -1,8 +1,20 @@
 import { DefaultTooltip, KeenIcon, useDataGrid } from '@/components';
 import { Button } from '@/components/ui/button';
+import React, { useState } from 'react';
 
-const ListToolBar = ({ createGroup }: { createGroup: () => void }) => {
-  const { table, reload } = useDataGrid();
+interface ListToolBarProps {
+  createGroup: () => void;
+  onReload: () => void;
+  isReloading: boolean;
+}
+
+const ListToolBar = ({ createGroup, onReload, isReloading }: ListToolBarProps) => {
+  const { table } = useDataGrid();
+  const [usernameFilter, setUsernameFilter] = useState('');
+  const handleUsernameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setUsernameFilter(e.target.value);
+    table.getColumn('name')?.setFilterValue(e.target.value);
+  };
 
   return (
     <div className="card-header flex-wrap gap-2 border-b-0 px-5">
@@ -14,29 +26,25 @@ const ListToolBar = ({ createGroup }: { createGroup: () => void }) => {
               <input
                 type="text"
                 placeholder="Search users"
-                value={(table.getColumn('name')?.getFilterValue() as string) ?? ''}
-                onChange={(event) => table.getColumn('name')?.setFilterValue(event.target.value)}
+                value={usernameFilter}
+                onChange={handleUsernameChange}
+                className="input input-sm w-40"
               />
             </label>
-            {/* <DefaultTooltip title={'Filter'} placement={'top'}>
-              <Button
-                variant="outline"
-                className="h-7.5 disabled:bg-gray-400"
-                // disabled={isLoading}
-                // onClick={handleFilterData}
-              >
-                {loadingButton === 'filter' ? <ContentLoader /> : <KeenIcon icon="filter" />}
-                <KeenIcon icon="filter" />
-              </Button>
-            </DefaultTooltip> */}
           </div>
           <div className="flex gap-3 items-center">
             <Button variant="outline" className="h-7.5 text-[0.8rem]" onClick={createGroup}>
               Add Data
             </Button>
-            <DefaultTooltip title={'Refresh'} placement={'top'}>
-              <Button variant="outline" className="h-7.5" onClick={() => reload()}>
-                <KeenIcon icon="arrows-circle" />
+            <DefaultTooltip title={isReloading ? 'Refreshing...' : 'Refresh'} placement={'top'}>
+              <Button variant="outline" className="h-7.5" onClick={onReload} disabled={isReloading}>
+                {isReloading ? (
+                  <div className="animate-spin">
+                    <KeenIcon icon="arrows-circle" />
+                  </div>
+                ) : (
+                  <KeenIcon icon="arrows-circle" />
+                )}
               </Button>
             </DefaultTooltip>
           </div>