Update filter type and refactor DocSearchView component

- Made the `label` property in the `Filter` type optional for greater flexibility.
- Added `TextField` import in `doc-search-view.tsx` for user input.
- Removed `DocSearch` and `DocSort` components, replacing them with a `TextField` that uses `filter.label` or `filter.type` as its label.

src/client/dd-hub-react/src/api/filter-service.ts

@@ -4,7 +4,7 @@ export type Type = 'BOOLEAN' | 'DATE' | 'VARCHAR' | 'INTEGER' | 'DECIMAL';
 
 export type Filter = {
     id: number;
-    label: string;
+    label?: string;
     name: string;
     type: Type;
 };

src/client/dd-hub-react/src/sections/document/view/doc-search-view.tsx

@@ -3,6 +3,7 @@ import { useState, useCallback, useEffect } from 'react';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import Pagination from '@mui/material/Pagination';
 
@@ -38,6 +39,19 @@ export function DocSearchView({ posts }: Props) {
     });
   }, []);
 
+  //#region example components
+    // <DocSearch posts={posts} />
+    // <DocSort
+    //   sortBy={sortBy}
+    //   onSort={handleSort}
+    //   options={[
+    //     { value: 'latest', label: 'Latest' },
+    //     { value: 'popular', label: 'Popular' },
+    //     { value: 'oldest', label: 'Oldest' },
+    //   ]}
+    // />
+  //#endregion
+
   return (
     <DashboardContent>
 
@@ -91,16 +105,7 @@ export function DocSearchView({ posts }: Props) {
               justifyContent: 'space-between',
             }}
           >
-            <DocSearch posts={posts} />
+            <TextField id="filled-basic" label={filter.label ?? filter.type} variant="filled" />
-            <DocSort
-              sortBy={sortBy}
-              onSort={handleSort}
-              options={[
-                { value: 'latest', label: 'Latest' },
-                { value: 'popular', label: 'Popular' },
-                { value: 'oldest', label: 'Oldest' },
-              ]}
-            />
           </Box>
         )
         )}