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)/devices/[deviceId]/page.tsx

@@ -13,7 +13,7 @@ export default async function DeviceDetails({ params }: {
   })
   return (
     <div>
-      <div className="flex flex-col justify-between items-start border-b-2 text-gray-500 title-bg py-4 px-2 mb-4">
+      <div className="flex flex-col justify-between items-start text-gray-500 title-bg py-4 px-2 mb-4">
         <h3 className='text-2xl font-bold'>
           {device?.name}
         </h3>
@@ -22,7 +22,7 @@ export default async function DeviceDetails({ params }: {
 
       <div
         id="user-filters"
-        className=" border-b-2 pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
+        className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
       >
         {/* <Search /> */}
         {/* <Filter

app/(dashboard)/devices/page.tsx

@@ -21,7 +21,7 @@ export default async function Devices({
 	const user = await getCurrentUser()
 	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>
 					My Devices
 				</h3>
@@ -30,13 +30,13 @@ export default async function Devices({
 
 			<div
 				id="user-filters"
-				className=" border-b-2 pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
+				className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
 			>
 				<Search />
 
 			</div>
 			<Suspense key={query} fallback={"loading...."}>
-				<DevicesTable searchParams={searchParams} />
+				<DevicesTable parentalControl={false} searchParams={searchParams} />
 			</Suspense>
 		</div>
 	);

app/(dashboard)/parental-control/page.tsx

@@ -18,7 +18,7 @@ export default async function ParentalControl({
   const query = (await searchParams)?.query || "";
   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>
           Parental Control
         </h3>
@@ -26,7 +26,7 @@ export default async function ParentalControl({
 
       <div
         id="user-filters"
-        className=" border-b-2 pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
+        className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
       >
         <Search />
 

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"}

app/(dashboard)/payments/page.tsx

@@ -15,13 +15,13 @@ export default async function Devices({
   const query = (await searchParams)?.query || "";
   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>My Payments</h3>
       </div>
 
       <div
         id="user-filters"
-        className=" border-b-2 pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
+        className=" pb-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
       >
         <Search />
       </div>

app/(dashboard)/user-devices/page.tsx

@@ -1,7 +1,7 @@
 export default async function UserDevcies() {
 	return (
 		<div>
-			<h3 className="border-b-2 text-2xl font-bold title-bg py-4 px-2 mb-4">
+			<h3 className="text-2xl font-bold title-bg py-4 px-2 mb-4">
 				User Devices
 			</h3>
 		</div>

app/(dashboard)/users/[userId]/verify/page.tsx

@@ -21,7 +21,7 @@ export default async function VerifyUserPage({
   })
   return (
     <div>
-      <div className='flex items-center justify-between border-b-2 text-gray-500 text-2xl font-bold title-bg py-4 px-2 mb-4'>
+      <div className='flex items-center justify-between text-gray-500 text-2xl font-bold title-bg py-4 px-2 mb-4'>
         <h3 className="">
           Verify user
         </h3>

app/(dashboard)/users/page.tsx

@@ -38,7 +38,7 @@ export default async function AdminUsers({
 
 	return (
 		<div>
-			<h3 className="border-b-2 text-gray-500 text-2xl font-bold title-bg py-4 px-2 mb-4">
+			<h3 className="text-gray-500 text-2xl font-bold title-bg py-4 px-2 mb-4">
 				Users
 			</h3>