Enhance user management and payment processing features

- Updated `package.json` to include a new script for launching Prisma Studio.
- Modified `signup` function in `auth-actions.ts` to include account number in user data.
- Refactored `createPayment` function in `payment.ts` to improve error handling and return structured responses.
- Updated UI components in the dashboard to improve layout and responsiveness, including changes to `UserDevices` and `UserPayments` pages.
- Introduced new `AdminDevicesTable` and `UsersPaymentsTable` components for better admin functionalities.
- Enhanced `DeviceCartDrawer` to provide user feedback during payment processing.
- Added account number input to the signup form and updated validation schema accordingly.
- Updated Prisma schema to include a new `ninja_user_id` field for user management.

These changes improve the overall functionality, maintainability, and user experience of the application, particularly in user management and payment processing.

app/(dashboard)/user-payments/page.tsx

@@ -1,8 +1,20 @@
+import { UsersPaymentsTable } from "@/components/admin/user-payments-table";
 import { AdminAuthGuard } from "@/lib/auth-guard";
-import React from "react";
+import React, { Suspense } from "react";
 
-export default async function UserPayments() {
+export default async function UserPayments({
+	searchParams,
+}: {
+	searchParams: Promise<{
+		query: string;
+		page: number;
+		sortBy: string;
+		status: string;
+	}>;
+}) {
 	await AdminAuthGuard();
+	const query = (await searchParams)?.query || "";
+
 	return (
 		<div>
 			<div className="flex justify-between items-center border-[1px] rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
@@ -10,6 +22,9 @@ export default async function UserPayments() {
 					User Payments
 				</h3>
 			</div>
+			<Suspense key={query} fallback={"loading...."}>
+				<UsersPaymentsTable searchParams={searchParams} />
+			</Suspense>
 		</div>
 	);
 }