Refactor UI components for improved consistency and functionality

- Removed unnecessary border styles from various dashboard components including Devices, DeviceDetails, Parental Control, Payments, and Users pages to enhance visual consistency.
- Updated DevicesTable to utilize a new ClickableRow component for better device interaction and management.
- Refactored AddDevicesToCartButton to use a checkbox for selecting devices, improving user experience.
- Enhanced DeviceCard component to streamline device information display and interaction.
- Overall improvements to the layout and responsiveness of the dashboard components.

These changes enhance the user interface and improve the maintainability of the codebase.

components/clickable-row.tsx

@@ -0,0 +1,68 @@
+'use client'
+import {
+  TableCell,
+  TableRow
+} from "@/components/ui/table";
+import { deviceCartAtom } from "@/lib/atoms";
+import { cn } from "@/lib/utils";
+import type { Device } from "@prisma/client";
+import { useAtom } from "jotai";
+import Link from 'next/link';
+import AddDevicesToCartButton from "./add-devices-to-cart-button";
+import BlockDeviceDialog from "./block-device-dialog";
+export default function ClickableRow({ device, parentalControl }: { device: Device, parentalControl?: boolean }) {
+  const [devices, setDeviceCart] = useAtom(deviceCartAtom)
+
+
+  return (
+    <TableRow
+      key={device.id}
+      className={cn(parentalControl === false && "cursor-pointer hover:bg-muted",)}
+      onClick={() => {
+
+        if (parentalControl === true) return
+        setDeviceCart((prev) =>
+          devices.some((d) => d.id === device.id)
+            ? prev.filter((d) => d.id !== device.id)
+            : [...prev, device]
+        )
+      }}
+    >
+      <TableCell>
+        <div className="flex flex-col items-start">
+          <Link
+            className="font-medium hover:underline"
+            href={`/devices/${device.id}`}
+            onClick={(e) => e.stopPropagation()}
+          >
+            {device.name}
+          </Link>
+          <span className="text-muted-foreground">
+            Active until{" "}
+            {new Date().toLocaleDateString("en-US", {
+              month: "short",
+              day: "2-digit",
+              year: "numeric",
+            })}
+          </span>
+          {parentalControl && (
+            <div className="p-2 rounded border my-2">
+              <span>Comment: </span>
+              <p className="text-neutral-500">
+                blocked because he was watching youtube
+              </p>
+            </div>
+          )}
+        </div>
+      </TableCell>
+      <TableCell className="font-medium">{device.mac}</TableCell>
+      <TableCell>
+        {!parentalControl ? (
+          <AddDevicesToCartButton device={device} />
+        ) : (
+          <BlockDeviceDialog device={device} />
+        )}
+      </TableCell>
+    </TableRow >
+  )
+}