feat(filters): replace existing filters with dynamic filters for improved user and device management ✨

app/(dashboard)/users/page.tsx

@@ -1,27 +1,7 @@
-import Filter from "@/components/filter";
-import Search from "@/components/search";
-import { UsersTable } from "@/components/user-table";
-import {
-	AArrowDown,
-	AArrowUp,
-	CheckCheck,
-	Hourglass,
-	Minus,
-} from "lucide-react";
 import { Suspense } from "react";
+import DynamicFilter from "@/components/generic-filter";
+import { UsersTable } from "@/components/user-table";
 
-const sortfilterOptions = [
-	{
-		value: "asc",
-		label: "Ascending",
-		icon: <AArrowUp size={16} />,
-	},
-	{
-		value: "desc",
-		label: "Descending",
-		icon: <AArrowDown size={16} />,
-	},
-];
 
 export default async function AdminUsers({
 	searchParams,
@@ -43,33 +23,59 @@ export default async function AdminUsers({
 				id="user-table-filters"
 				className=" pb-4 gap-4 flex items-center justify-start"
 			>
-				<Search />
-				<Filter
-					options={[
+				<DynamicFilter
+					description="Filter users by id card, name, or house name and more."
+					title="User Filter"
+					inputs={[
 						{
-							value: "all",
-							label: "ALL",
-							icon: <Minus size={14} />,
+							name: "first_name",
+							label: "User First Name",
+							type: "string",
+							placeholder: "Enter user first name",
 						},
 						{
-							value: "unverified",
-							label: "Unverfieid",
-							icon: <CheckCheck size={14} />,
+							name: "last_name",
+							label: "User Last Name",
+							type: "string",
+							placeholder: "Enter user last name",
 						},
 						{
-							value: "verified",
-							label: "Verified",
-							icon: <Hourglass size={14} />,
+							name: "id_card",
+							label: "ID Card",
+							type: "string",
+							placeholder: "Enter ID card number",
 						},
+						{
+							name: "house_name",
+							label: "House Name",
+							type: "string",
+							placeholder: "Enter house name",
+						},
+						{
+							name: "mobile",
+							label: "Phone Number",
+							type: "string",
+							placeholder: "Enter phone number",
+						},
+						{
+							name: "verified",
+							type: "radio-group",
+							label: "User Status",
+							options: [
+								{
+									value: "",
+									label: "All",
+								},
+								{
+									label: "Verified",
+									value: "true",
+								},
+								{
+									label: "Unverified",
+									value: "false",
+								}]
+						}
 					]}
-					defaultOption="all"
-					queryParamKey="status"
-				/>
-
-				<Filter
-					options={sortfilterOptions}
-					defaultOption="asc"
-					queryParamKey="sortBy"
 				/>
 			</div>
 			<Suspense fallback={"loading...."}>