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

actions/payment.ts

@@ -11,7 +11,6 @@ import type {
 	Topup
 } from "@/lib/backend-types";
 import type { TopupResponse } from "@/lib/types";
-import type { User } from "@/lib/types/user";
 import { handleApiResponse } from "@/utils/tryCatch";
 
 type GenericGetResponseProps = {

app/(dashboard)/parental-control/page.tsx

@@ -1,5 +1,6 @@
 import { Suspense } from "react";
 import { DevicesTable } from "@/components/devices-table";
+import DynamicFilter from "@/components/generic-filter";
 import Search from "@/components/search";
 
 export default async function ParentalControl({
@@ -27,8 +28,30 @@ export default async function ParentalControl({
         id="user-filters"
         className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
       >
-        <Search />
+        <DynamicFilter
-      </div>
+          description="Filter devices by name, MAC address, or vendor."
+          title="Device Filter"
+          inputs={[
+            {
+              name: "name",
+              label: "Device Name",
+              type: "string",
+              placeholder: "Enter device name",
+            },
+            {
+              name: "mac",
+              label: "MAC Address",
+              type: "string",
+              placeholder: "Enter MAC address",
+            },
+            {
+              name: "vendor",
+              label: "Vendor",
+              type: "string",
+              placeholder: "Enter vendor name",
+            }
+          ]}
+        />      </div>
       <Suspense key={(await searchParams).page} fallback={"loading...."}>
         <DevicesTable
           parentalControl={true}

app/(dashboard)/profile/page.tsx

@@ -1,10 +1,10 @@
 import { redirect } from "next/navigation";
 import { getServerSession } from "next-auth";
-import { getProfileById } from "@/actions/user-actions";
 import { authOptions } from "@/app/auth";
 import ClientErrorMessage from "@/components/client-error-message";
 import { Badge } from "@/components/ui/badge";
 import { FloatingLabelInput } from "@/components/ui/floating-label";
+import { getProfileById } from "@/queries/users";
 import { tryCatch } from "@/utils/tryCatch";
 
 export default async function Profile() {

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 />
+				<DynamicFilter
-				<Filter
+					description="Filter users by id card, name, or house name and more."
-					options={[
+					title="User Filter"
+					inputs={[
 						{
-							value: "all",
+							name: "first_name",
-							label: "ALL",
+							label: "User First Name",
-							icon: <Minus size={14} />,
+							type: "string",
+							placeholder: "Enter user first name",
 						},
 						{
-							value: "unverified",
+							name: "last_name",
-							label: "Unverfieid",
+							label: "User Last Name",
-							icon: <CheckCheck size={14} />,
+							type: "string",
+							placeholder: "Enter user last name",
+						},
+						{
+							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",
 								},
 								{
-							value: "verified",
 									label: "Verified",
-							icon: <Hourglass size={14} />,
+									value: "true",
 								},
+								{
+									label: "Unverified",
+									value: "false",
+								}]
+						}
 					]}
-					defaultOption="all"
-					queryParamKey="status"
-				/>
-
-				<Filter
-					options={sortfilterOptions}
-					defaultOption="asc"
-					queryParamKey="sortBy"
 				/>
 			</div>
 			<Suspense fallback={"loading...."}>