sarlink/sarlink-portal
7
0
Fork 0
mirror of https://github.com/i701/sarlink-portal.git synced 2025-07-01 15:23:58 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Refactor UI components for improved consistency and functionality

Browse Source 
- 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.
This commit is contained in:
i701
2024-12-26 00:43:39 +05:00
parent 7acd1189ee
commit 0f17800a00
12 changed files with 196 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
components/devices-table.tsx
View File

@ -11,9 +11,7 @@ import {
import { auth } from "@/lib/auth";
import prisma from "@/lib/db";
import { headers } from "next/headers";
import Link from "next/link";
import AddDevicesToCartButton from "./add-devices-to-cart-button";
import BlockDeviceButton from "./block-device-dialog";
import ClickableRow from "./clickable-row";
import DeviceCard from "./device-card";
import Pagination from "./pagination";
@ -56,7 +54,7 @@ export async function DevicesTable({
paid: false
}
},
isActive: parentalControl ? parentalControl : undefined,
isActive: parentalControl,
blocked: parentalControl !== undefined ? undefined : false,
},
});
@ -89,7 +87,6 @@ export async function DevicesTable({
},
isActive: parentalControl,
blocked: parentalControl !== undefined ? undefined : false,
},
skip: offset,
@ -114,48 +111,49 @@ export async function DevicesTable({
<TableRow>
<TableHead>Device Name</TableHead>
<TableHead>MAC Address</TableHead>
<TableHead>Actions</TableHead>
<TableHead>#</TableHead>
</TableRow>
</TableHeader>
<TableBody className="overflow-scroll">
{devices.map((device) => (
<TableRow key={device.id}>
<TableCell>
<div className="flex flex-col items-start">
<Link
className="font-medium hover:underline"
href={`/devices/${device.id}`}
>
{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>
)}
// <TableRow key={device.id}>
// <TableCell>
// <div className="flex flex-col items-start">
// <Link
// className="font-medium hover:underline"
// href={`/devices/${device.id}`}
// >
// {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} />
) : (
<BlockDeviceButton device={device} />
)}
</TableCell>
</TableRow>
// </div>
// </TableCell>
// <TableCell className="font-medium">{device.mac}</TableCell>
// <TableCell>
// {!parentalControl ? (
// <AddDevicesToCartButton device={device} />
// ) : (
// <BlockDeviceButton device={device} />
// )}
// </TableCell>
// </TableRow>
<ClickableRow key={device.id} device={device} parentalControl={parentalControl} />
))}
</TableBody>
<TableFooter>