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.

app/(dashboard)/payments/[paymentId]/page.tsx

@@ -29,7 +29,7 @@ export default async function PaymentPage({
   const formula = await prisma.billFormula.findFirst();
   return (
     <div>
-      <div className="flex justify-between items-center border-b-2 text-gray-500 text-2xl font-bold title-bg py-4 px-2 mb-4">
+      <div className="flex justify-between items-center text-gray-500 text-2xl font-bold title-bg py-4 px-2 mb-4">
         <h3>Payment</h3>
         <span className={cn("text-sm border px-4 py-2 rounded-md uppercase font-semibold", payment?.paid ? "text-green-500 bg-green-500/20" : "text-yellow-500 bg-yellow-500/20")}>
           {payment?.paid ? "Paid" : "Pending"}