Enhance dashboard functionality with new payment and device management features

- Added new PaymentPage component for processing payments and displaying devices to pay.
- Introduced DeviceDetails component for viewing individual device information.
- Implemented PriceCalculator component for calculating costs based on user input.
- Integrated Jotai for state management across components, including device cart functionality.
- Updated layout to include Jotai Provider for state management.
- Enhanced DevicesTable with AddDevicesToCartButton for adding devices to the cart.
- Refactored sidebar to include a link to the new Price Calculator page.
- Updated Prisma schema to include Payment and BillFormula models for better data handling.
- Added new UI components for device cart management and drawer functionality.
- Improved overall user experience with responsive design adjustments and new UI elements.

components/add-devices-to-cart-button.tsx

@@ -0,0 +1,32 @@
+'use client'
+import { deviceCartAtom } from '@/lib/atoms'
+import type { Device } from '@prisma/client'
+import { useAtomValue, useSetAtom } from 'jotai'
+import { BadgePlus, CheckCheck } from 'lucide-react'
+import React from 'react'
+import { Button } from './ui/button'
+
+export default function AddDevicesToCartButton({ device }: { device: Device }) {
+  const setDeviceCart = useSetAtom(deviceCartAtom)
+  const devices = useAtomValue(deviceCartAtom)
+  return (
+    <Button
+      disabled={devices.some((d) => d.id === device.id)}
+      onClick={() => setDeviceCart((prev) => [...prev, device])}
+    >
+      {devices.some((d) => d.id === device.id) ? (
+        <>
+          Added
+          <CheckCheck />
+        </>
+      ) : (
+        <>
+          Add to cart
+          <BadgePlus />
+
+        </>
+
+      )}
+    </Button>
+  )
+}

components/auth/application-layout.tsx

@@ -1,13 +1,7 @@
+import { DeviceCartDrawer } from "@/components/device-cart";
 import { ModeToggle } from "@/components/theme-toggle";
 import { AppSidebar } from "@/components/ui/app-sidebar";
-import {
-	Breadcrumb,
-	BreadcrumbItem,
-	BreadcrumbLink,
-	BreadcrumbList,
-	BreadcrumbPage,
-	BreadcrumbSeparator,
-} from "@/components/ui/breadcrumb";
+
 import { Separator } from "@/components/ui/separator";
 import {
 	SidebarInset,
@@ -33,20 +27,10 @@ export async function ApplicationLayout({
 					<div className="flex items-center gap-2 ">
 						<SidebarTrigger className="-ml-1" />
 						<Separator orientation="vertical" className="mr-2 h-4" />
-						<Breadcrumb>
-							<BreadcrumbList>
-								<BreadcrumbItem className="hidden md:block">
-									<BreadcrumbLink href="#">MENU</BreadcrumbLink>
-								</BreadcrumbItem>
-								<BreadcrumbSeparator className="hidden md:block" />
-								<BreadcrumbItem>
-									<BreadcrumbPage>Sar Link Portal v1.0.0</BreadcrumbPage>
-								</BreadcrumbItem>
-							</BreadcrumbList>
-						</Breadcrumb>
 					</div>
 
 					<div className="flex items-center gap-2">
+						<DeviceCartDrawer />
 						<ModeToggle />
 						<AccountPopover />
 					</div>

components/device-cart.tsx

@@ -0,0 +1,109 @@
+"use client"
+
+import * as React from "react"
+
+import { Button } from "@/components/ui/button"
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  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"
+
+
+export function DeviceCartDrawer() {
+  const pathname = usePathname()
+  const devices = useAtomValue(deviceCartAtom)
+  const setDeviceCart = useSetAtom(deviceCartAtom)
+  const [isOpen, setIsOpen] = useAtom(cartDrawerOpenAtom)
+  if (pathname === "/payment") {
+    return null
+  }
+  return (
+    <Drawer open={isOpen} onOpenChange={setIsOpen}>
+      <DrawerTrigger asChild>
+        <Button
+          onClick={() => setIsOpen(!isOpen)}
+          variant="outline">
+          <ShoppingCart />
+          Cart {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>
+          </DrawerHeader>
+          <div className="flex max-h-[calc(100svh-200px)] flex-col overflow-auto px-4 pb-4 gap-4">
+            {devices.map((device) => (
+              <DeviceCard key={device.id} device={device} />
+            ))}
+          </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>
+            <DrawerClose asChild>
+              <Button variant="outline">Cancel</Button>
+
+
+            </DrawerClose>
+            <Button
+              onClick={() => {
+                setDeviceCart([])
+              }}
+              variant="outline">Reset Cart</Button>
+          </DrawerFooter>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  )
+}
+
+
+function DeviceCard({ device }: { device: Device }) {
+  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>
+
+        <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"
+          value={device.mac}
+          readOnly
+          placeholder={"MAC Address"}
+        />
+      </div>
+
+      <Button
+        onClick={() => {
+          setDeviceCart((prev) => prev.filter((d) => d.id !== device.id))
+        }}
+        variant={"destructive"}>
+        Remove
+        <Trash2 />
+      </Button>
+    </div>
+  )
+}

components/devices-table.tsx

@@ -9,6 +9,7 @@ import {
 	TableRow,
 } from "@/components/ui/table";
 import prisma from "@/lib/db";
+import AddDevicesToCartButton from "./add-devices-to-cart-button";
 import Pagination from "./pagination";
 
 export async function DevicesTable({
@@ -38,8 +39,6 @@ export async function DevicesTable({
 						mode: "insensitive",
 					},
 				},
-
-
 			],
 		},
 	});
@@ -63,8 +62,6 @@ export async function DevicesTable({
 						mode: "insensitive",
 					},
 				},
-
-
 			],
 		},
 
@@ -75,7 +72,6 @@ export async function DevicesTable({
 		},
 	});
 
-
 	return (
 		<div>
 			{devices.length === 0 ? (
@@ -90,20 +86,16 @@ export async function DevicesTable({
 							<TableRow>
 								<TableHead>Device Name</TableHead>
 								<TableHead>MAC Address</TableHead>
-								<TableHead>Status</TableHead>
+								<TableHead>Actions</TableHead>
 							</TableRow>
 						</TableHeader>
 						<TableBody className="overflow-scroll">
 							{devices.map((device) => (
-								<TableRow
-
-									key={device.id}
-								>
+								<TableRow key={device.id}>
 									<TableCell className="font-medium">{device.name}</TableCell>
 									<TableCell className="font-medium">{device.mac}</TableCell>
-
 									<TableCell>
-										Parental Controls
+										<AddDevicesToCartButton device={device} />
 									</TableCell>
 								</TableRow>
 							))}

components/devices-to-pay.tsx

@@ -0,0 +1,61 @@
+'use client'
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableRow,
+} from "@/components/ui/table"
+import { deviceCartAtom } from '@/lib/atoms'
+import type { BillFormula } from "@prisma/client"
+import { useAtomValue } from 'jotai'
+import React from 'react'
+
+export default function DevicesToPay({ billFormula }: { billFormula?: BillFormula }) {
+  const devices = useAtomValue(deviceCartAtom)
+  if (devices.length === 0) {
+    return null
+  }
+  const baseAmount = billFormula?.baseAmount ?? 100
+  const discountPercentage = billFormula?.discountPercentage ?? 75
+  // 100+(n−1)×75
+  const total = baseAmount + (devices.length - 1) * discountPercentage
+  return (
+    <div className='w-full'>
+      <div className='p-2 flex flex-col gap-2'>
+        <h3 className='title-bg my-1 font-semibold text-lg'>Devices to pay</h3>
+        <div className="flex flex-col gap-2">
+          {devices.map((device) => (
+            <div key={device.id} className="bg-muted border rounded p-2 flex gap-2 items-center">
+              <div className="flex flex-col">
+                <div className="text-sm font-medium">{device.name}</div>
+                <div className="text-xs text-muted-foreground">
+                  {device.mac}
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+      <div className='m-2 flex items-end justify-end p-2 text-sm text-foreground border rounded'>
+        <Table>
+          <TableCaption>Please send the following amount to the payment address</TableCaption>
+          <TableBody>
+            <TableRow>
+              <TableCell>Total Devices</TableCell>
+              <TableCell className="text-right">{devices.length}</TableCell>
+            </TableRow>
+          </TableBody>
+          <TableFooter>
+            <TableRow>
+              <TableCell colSpan={1}>Total</TableCell>
+              <TableCell className="text-right">{total.toFixed(2)}</TableCell>
+            </TableRow>
+          </TableFooter>
+        </Table>
+      </div>
+    </div>
+
+  )
+}

components/ui/app-sidebar.tsx

@@ -1,4 +1,5 @@
 import {
+	Calculator,
 	ChevronRight,
 	Coins,
 	CreditCard,
@@ -72,6 +73,11 @@ const data = {
 					url: "/user-payments",
 					icon: <Coins size={16} />,
 				},
+				{
+					title: "Price Calculator",
+					url: "/price-calculator",
+					icon: <Calculator size={16} />,
+				},
 			],
 		},
 	],
@@ -84,7 +90,7 @@ export function AppSidebar({
 	return (
 		<Sidebar {...props} className="z-50">
 			<SidebarHeader>
-				<h4 className="p-2 rounded shadow text-center uppercase ">
+				<h4 className="p-2 rounded title-bg border text-center uppercase ">
 					Sar Link Portal
 				</h4>
 			</SidebarHeader>

components/ui/drawer.tsx

@@ -0,0 +1,118 @@
+"use client"
+
+import * as React from "react"
+import { Drawer as DrawerPrimitive } from "vaul"
+
+import { cn } from "@/lib/utils"
+
+const Drawer = ({
+  shouldScaleBackground = true,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    shouldScaleBackground={shouldScaleBackground}
+    {...props}
+  />
+)
+Drawer.displayName = "Drawer"
+
+const DrawerTrigger = DrawerPrimitive.Trigger
+
+const DrawerPortal = DrawerPrimitive.Portal
+
+const DrawerClose = DrawerPrimitive.Close
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      className={cn(
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
+        className
+      )}
+      {...props}
+    >
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+))
+DrawerContent.displayName = "DrawerContent"
+
+const DrawerHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
+    {...props}
+  />
+)
+DrawerHeader.displayName = "DrawerHeader"
+
+const DrawerFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+)
+DrawerFooter.displayName = "DrawerFooter"
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+))
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
+
+export {
+  Drawer,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+}

components/ui/sidebar.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { Slot } from "@radix-ui/react-slot";
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import { type VariantProps, cva } from "class-variance-authority";
 import { PanelLeft } from "lucide-react";
 import * as React from "react";
@@ -8,7 +9,12 @@ import * as React from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
-import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
+import {
+	Sheet,
+	SheetContent,
+	SheetDescription,
+	SheetTitle,
+} from "@/components/ui/sheet";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
 	Tooltip,
@@ -214,6 +220,10 @@ const Sidebar = React.forwardRef<
 						}
 						side={side}
 					>
+						<VisuallyHidden.Root>
+							<SheetDescription>Description goes here</SheetDescription>
+						</VisuallyHidden.Root>
+
 						<SheetTitle className="hidden">Menu</SheetTitle>
 						<div className="flex h-full w-full flex-col">{children}</div>
 					</SheetContent>