Add payment processing and device management features

- Introduced createPayment action for handling payment creation.
- Added PaymentsTable component for displaying payment records with pagination.
- Implemented new PaymentPage for viewing individual payment details and associated devices.
- Refactored DeviceCartDrawer to integrate payment creation and device selection.
- Enhanced DevicesToPay component to display devices based on payment status.
- Updated PriceCalculator component for better user input handling.
- Introduced NumberInput component for consistent number input across forms.
- Modified Prisma schema to include new fields for payments and devices.
- Improved overall user experience with responsive design adjustments and new UI elements.

components/device-cart.tsx

@@ -1,8 +1,7 @@
-"use client"
+"use client";
 
-import * as React from "react"
-
-import { Button } from "@/components/ui/button"
+import { createPayment } from "@/actions/payment";
+import { Button } from "@/components/ui/button";
 import {
   Drawer,
   DrawerClose,
@@ -12,98 +11,178 @@ import {
   DrawerHeader,
   DrawerTitle,
   DrawerTrigger,
-} from "@/components/ui/drawer"
-import { cartDrawerOpenAtom, deviceCartAtom } from "@/lib/atoms"
-import type { Device } from "@prisma/client"
-import { useAtom, useAtomValue, useSetAtom } from "jotai"
-import { CircleDollarSign, ShoppingCart, Trash2 } from "lucide-react"
-import Link from "next/link"
-import { usePathname } from "next/navigation"
+} from "@/components/ui/drawer";
+import {
+  cartDrawerOpenAtom,
+  deviceCartAtom,
+  numberOfMonths,
+} from "@/lib/atoms";
+import { authClient } from "@/lib/auth-client";
+import type { PaymentType } from "@/lib/types";
+import type { BillFormula, Device } from "@prisma/client";
+import { useAtom, useAtomValue, useSetAtom } from "jotai";
+import {
+  CircleDollarSign,
+  Loader2,
+  MonitorSmartphone,
+  Trash2,
+} from "lucide-react";
+import { usePathname, useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+import NumberInput from "./number-input";
 
 
-export function DeviceCartDrawer() {
-  const pathname = usePathname()
-  const devices = useAtomValue(deviceCartAtom)
-  const setDeviceCart = useSetAtom(deviceCartAtom)
-  const [isOpen, setIsOpen] = useAtom(cartDrawerOpenAtom)
+
+export function DeviceCartDrawer({
+  billFormula,
+}: {
+  billFormula: BillFormula | null;
+}) {
+  const baseAmount = billFormula?.baseAmount || 100;
+  const discountPercentage = billFormula?.discountPercentage || 75;
+  const session = authClient.useSession();
+  const pathname = usePathname();
+  const devices = useAtomValue(deviceCartAtom);
+  const setDeviceCart = useSetAtom(deviceCartAtom);
+  const [months, setMonths] = useAtom(numberOfMonths);
+  const [isOpen, setIsOpen] = useAtom(cartDrawerOpenAtom);
+  const [message, setMessage] = useState("");
+  const [disabled, setDisabled] = useState(false);
+  const [total, setTotal] = useState(0);
+  const router = useRouter();
+  useEffect(() => {
+    if (months === 7) {
+      setMessage("You will get 1 month free.");
+    } else if (months === 12) {
+      setMessage("You will get 2 months free.");
+    } else {
+      setMessage("");
+    }
+    setTotal(baseAmount + (devices.length - 1) * discountPercentage);
+  }, [months, devices.length, baseAmount, discountPercentage]);
+
   if (pathname === "/payment") {
-    return null
+    return null;
   }
+
+  const data: PaymentType = {
+    numberOfMonths: months,
+    userId: session?.data?.user.id ?? "",
+    deviceIds: devices.map((device) => device.id),
+    amount: Number.parseFloat(total.toFixed(2)),
+    paid: false,
+  };
+
   return (
     <Drawer open={isOpen} onOpenChange={setIsOpen}>
       <DrawerTrigger asChild>
-        <Button
-          onClick={() => setIsOpen(!isOpen)}
-          variant="outline">
-          <ShoppingCart />
-          Cart {devices.length > 0 && `(${devices.length})`}
+        <Button onClick={() => setIsOpen(!isOpen)} variant="outline">
+          <MonitorSmartphone />
+          Selected Devices {devices.length > 0 && `(${devices.length})`}
         </Button>
       </DrawerTrigger>
       <DrawerContent>
         <div className="mx-auto w-full max-w-sm">
           <DrawerHeader>
-            <DrawerTitle>Cart Devices</DrawerTitle>
-            <DrawerDescription>Devices in your cart to pay.</DrawerDescription>
+            <DrawerTitle>Selected Devices</DrawerTitle>
+            <DrawerDescription>Selected devices pay.</DrawerDescription>
           </DrawerHeader>
-          <div className="flex max-h-[calc(100svh-200px)] flex-col overflow-auto px-4 pb-4 gap-4">
+          <div className="flex max-h-[calc(100svh-400px)] flex-col overflow-auto px-4 pb-4 gap-4">
             {devices.map((device) => (
               <DeviceCard key={device.id} device={device} />
             ))}
           </div>
+          <div className="px-4 flex flex-col gap-4">
+            <NumberInput
+              label="Set No of Months"
+              value={months}
+              onChange={(value) => setMonths(value)}
+              maxAllowed={12}
+              isDisabled={devices.length === 0}
+            />
+            {message && (
+              <span className="title-bg text-lime-800 bg-lime-100/50 dark:text-lime-100 rounded text-center p-2 w-full">
+                {message}
+              </span>
+            )}
+          </div>
           <DrawerFooter>
-            <Link aria-disabled={devices.length === 0} href={devices.length === 0 ? "#" : "/payment"}>
-              <Button
-                onClick={() => {
-                  setIsOpen(!isOpen)
-                }}
-                className="w-full" disabled={devices.length === 0}>
-                Go to payment
-                <CircleDollarSign />
-              </Button>
-            </Link>
+            <Button
+              onClick={async () => {
+                setDisabled(true)
+                const payment = await createPayment(data)
+                setDisabled(false)
+                setDeviceCart([])
+                setMonths(1)
+                if (payment) {
+                  router.push(`/payments/${payment.id}`);
+                  setIsOpen(!isOpen);
+                } else {
+                  toast.error("Something went wrong.")
+                }
+              }}
+              className="w-full"
+              disabled={devices.length === 0 || disabled}
+            >
+              {disabled ? (
+                <>
+                  <Loader2 className="ml-2 animate-spin" />
+                </>
+              ) : (
+                <>
+                  Go to payment
+                  <CircleDollarSign />
+                </>
+              )}
+            </Button>
             <DrawerClose asChild>
               <Button variant="outline">Cancel</Button>
-
-
             </DrawerClose>
             <Button
               onClick={() => {
-                setDeviceCart([])
+                setDeviceCart([]);
               }}
-              variant="outline">Reset Cart</Button>
+              variant="outline"
+            >
+              Reset
+            </Button>
           </DrawerFooter>
         </div>
       </DrawerContent>
     </Drawer>
-  )
+  );
 }
 
-
 function DeviceCard({ device }: { device: Device }) {
-  const setDeviceCart = useSetAtom(deviceCartAtom)
+  const setDeviceCart = useSetAtom(deviceCartAtom);
   return (
-    <div className="relative flex h-full w-full items-center pr-4 justify-between rounded-lg border border-input bg-background shadow-sm shadow-black/5 transition-shadow focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20 has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-50 [&:has(input:is(:disabled))_*]:pointer-events-none">
+    <div className="relative flex h-full w-full items-center pr-4 justify-between rounded-lg border border-input bg-background shadow-sm shadow-black/5 transition-shadow focus-within:border-ring focus-within:outline-none focus-within:ring-[3px] focus-within:ring-ring/20">
       <div>
-
-        <label htmlFor="input-33" className="block px-3 pt-2 text-xs font-medium text-foreground">
+        <label
+          htmlFor="input-33"
+          className="block px-3 pt-2 text-xs font-medium text-foreground"
+        >
           {device.name}
         </label>
         <input
-          className="flex h-10 w-full bg-transparent px-3 pb-2 text-sm text-foreground placeholder:text-muted-foreground/70 focus-visible:outline-none"
+          className="flex h-10 opacity-50 w-full bg-transparent px-3 pb-2 text-sm text-foreground placeholder:text-muted-foreground/70 focus-visible:outline-none"
           value={device.mac}
           readOnly
+          disabled
           placeholder={"MAC Address"}
         />
       </div>
 
       <Button
         onClick={() => {
-          setDeviceCart((prev) => prev.filter((d) => d.id !== device.id))
+          setDeviceCart((prev) => prev.filter((d) => d.id !== device.id));
         }}
-        variant={"destructive"}>
+        variant={"destructive"}
+      >
         Remove
         <Trash2 />
       </Button>
     </div>
-  )
-}
+  );
+}