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.

components/auth/signup-form.tsx

@@ -48,7 +48,7 @@ export default function SignUpForm({ atolls }: { atolls: AtollWithIslands[] }) {
 	return (
 		<form
 			action={action}
-			className="max-w-xs mt-4 w-full bg-white dark:bg-transparent dark:border-2 shadow rounded-lg mx-auto"
+			className="max-w-xs mt-2 w-full bg-white dark:bg-transparent dark:border-2 shadow rounded-lg mx-auto"
 		>
 			<div className="py-2 px-4 my-2 space-y-2">
 				<div>
@@ -208,7 +208,28 @@ export default function SignUpForm({ atolls }: { atolls: AtollWithIslands[] }) {
 						</span>
 					)}
 				</div>
+				<div>
+					<label htmlFor="accNo" className="text-sm">
+						Account Number
+					</label>
 
+					<Input
+						className={cn(
+							"text-base",
+							actionState.errors?.fieldErrors.accNo && "border-2 border-red-500",
+						)}
+						name="accNo"
+						type="number"
+						disabled={isPending}
+						defaultValue={(actionState.payload?.get("accNo") || "") as string}
+						placeholder="Account no"
+					/>
+					{actionState.errors?.fieldErrors.accNo && (
+						<span className="text-sm inline-block text-red-500">
+							{actionState.errors?.fieldErrors.accNo}
+						</span>
+					)}
+				</div>
 				<div>
 					<label htmlFor="phone_number" className="text-sm">
 						Phone Number