Enhance payment processing and device management features

- Updated `package.json` to add a new script for pushing Prisma database changes.
- Refactored payment processing functions to include payment method handling for both wallet and transfer options.
- Improved `DevicesTable` and `AdminDevicesTable` components to support new payment method display and user association.
- Updated Prisma schema to introduce a new `PaymentType` enum and modified the `Payment` model to include a `method` field.
- Enhanced UI components to improve user experience in displaying payment and device information.

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

components/admin/admin-devices-table.tsx

@@ -75,7 +75,10 @@ export async function AdminDevicesTable({
         },
       ],
     },
-
+    include: {
+      User: true,
+      payments: true,
+    },
     skip: offset,
     take: limit,
     orderBy: {
@@ -97,6 +100,7 @@ export async function AdminDevicesTable({
               <TableHeader>
                 <TableRow>
                   <TableHead>Device Name</TableHead>
+                  <TableHead>User</TableHead>
                   <TableHead>MAC Address</TableHead>
                   <TableHead>isActive</TableHead>
                   <TableHead>blocked</TableHead>
@@ -115,14 +119,18 @@ export async function AdminDevicesTable({
                         >
                           {device.name}
                         </Link>
-                        <span className="text-muted-foreground">
-                          Active until{" "}
-                          {new Date().toLocaleDateString("en-US", {
-                            month: "short",
-                            day: "2-digit",
-                            year: "numeric",
-                          })}
-                        </span>
+                        {device.isActive && (
+
+                          <span className="text-muted-foreground">
+                            Active until{" "}
+                            {new Date().toLocaleDateString("en-US", {
+                              month: "short",
+                              day: "2-digit",
+                              year: "numeric",
+                            })}
+                          </span>
+                        )}
+
                         {device.blocked && (
                           <div className="p-2 rounded border my-2">
                             <span>Comment: </span>
@@ -134,6 +142,8 @@ export async function AdminDevicesTable({
 
                       </div>
                     </TableCell>
+                    <TableCell className="font-medium">{device.User?.name}</TableCell>
+
                     <TableCell className="font-medium">{device.mac}</TableCell>
                     <TableCell>
                       {device.isActive ? "Active" : "Inactive"}
@@ -159,7 +169,7 @@ export async function AdminDevicesTable({
               </TableBody>
               <TableFooter>
                 <TableRow>
-                  <TableCell colSpan={5}>
+                  <TableCell colSpan={7}>
                     {query.length > 0 && (
                       <p className="text-sm text-muted-foreground">
                         Showing {devices.length} locations for &quot;{query}

components/admin/user-payments-table.tsx

@@ -139,14 +139,13 @@ export async function UsersPaymentsTable({
             <TableCaption>Table of all users.</TableCaption>
             <TableHeader>
               <TableRow>
-                <TableHead>Name</TableHead>
-                <TableHead>ID Card</TableHead>
-                <TableHead>Atoll</TableHead>
-                <TableHead>Island</TableHead>
-                <TableHead>House Name</TableHead>
-                <TableHead>Status</TableHead>
-                <TableHead>Dob</TableHead>
-                <TableHead>Phone Number</TableHead>
+                <TableHead>Devices paid</TableHead>
+                <TableHead>User</TableHead>
+                <TableHead>Amount</TableHead>
+                <TableHead>Duration</TableHead>
+                <TableHead>Payment Status</TableHead>
+                <TableHead>Payment Method</TableHead>
+                <TableHead>Paid At</TableHead>
                 <TableHead>Action</TableHead>
               </TableRow>
             </TableHeader>
@@ -156,7 +155,15 @@ export async function UsersPaymentsTable({
                   className={`${payment.paid && "title-bg dark:bg-black"}`}
                   key={payment.id}
                 >
-                  <TableCell className="font-medium">{payment.user.name}</TableCell>
+                  <TableCell className="font-medium">
+                    <ol className="list-disc list-inside text-sm">
+                      {payment.devices.map((device) => (
+                        <li key={device.id} className="text-sm text-muted-foreground">
+                          {device.name}
+                        </li>
+                      ))}
+                    </ol>
+                  </TableCell>
                   <TableCell className="font-medium">{payment.user.id_card}</TableCell>
                   <TableCell>{payment.user?.name}</TableCell>
                   <TableCell>{payment.user?.name}</TableCell>

components/auth/signup-form.tsx

@@ -6,10 +6,10 @@ import Link from "next/link";
 import { signup } from "@/actions/auth-actions";
 import { cn } from "@/lib/utils";
 import type { Island, Prisma } from "@prisma/client";
-import { Loader } from "lucide-react";
+import { Loader2 } from "lucide-react";
 import { useSearchParams } from "next/navigation";
-import { useActionState } from "react";
 import * as React from "react";
+import { useActionState } from "react";
 
 import {
 	Select,
@@ -308,7 +308,7 @@ export default function SignUpForm({ atolls }: { atolls: AtollWithIslands[] }) {
 
 				</div>
 				<Button disabled={isPending} className="mt-4 w-full" type="submit">
-					{isPending ? <Loader className="animate-spin" /> : "Submit"}
+					{isPending ? <Loader2 className="animate-spin" /> : "Submit"}
 				</Button>
 			</div>
 

components/devices-table.tsx

@@ -51,8 +51,10 @@ export async function DevicesTable({
 				},
 			],
 			NOT: {
-				payment: {
-					paid: false
+				payments: {
+					some: {
+						paid: false
+					}
 				}
 			},
 			isActive: isAdmin ? undefined : parentalControl,
@@ -82,8 +84,10 @@ export async function DevicesTable({
 				},
 			],
 			NOT: {
-				payment: {
-					paid: false
+				payments: {
+					some: {
+						paid: false
+					}
 				},
 			},
 			isActive: parentalControl,