sarlink/sarlink-portal
7
0
Fork 0
mirror of https://github.com/i701/sarlink-portal.git synced 2025-10-05 09:55:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: add animations ✨
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 10m27s
Details

Browse Source
This commit is contained in:
i701
2025-09-24 19:33:48 +05:00
parent f8774f51e6
commit 9ad1887f88
10 changed files with 994 additions and 993 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/(dashboard)/devices/[deviceId]/page.tsx
View File

@@ -27,11 +27,16 @@ export default async function DeviceDetails({
<div>
<div className="flex items-center justify-between title-bg title-bg ring-2 ring-sarLinkOrange/50 rounded-lg p-4">
<div className="flex flex-col justify-between items-start">
<h3 className="text-2xl text-sarLinkOrange font-bold">
<h3 className="text-2xl text-sarLinkOrange motion-preset-slide-down-md font-bold">
{device?.name}
</h3>
<Badge variant={"secondary"}>{device?.mac}</Badge>
<p className="text-muted-foreground text-sm mt-2">
<Badge
className="motion-preset-slide-down-md motion-delay-75"
variant={"secondary"}
>
{device?.mac}
</Badge>
<p className="text-muted-foreground text-sm mt-2 motion-preset-slide-down-md motion-delay-100">
Device active until{" "}
{new Date(device?.expiry_date || "").toLocaleDateString("en-US", {
month: "short",
@@ -40,7 +45,7 @@ export default async function DeviceDetails({
})}
</p>
</div>
<div className="flex items-center gap-2 flex-col">
<div className="flex items-center gap-2 flex-col motion-preset-fade">
{device?.expiry_date && new Date() < new Date(device.expiry_date) && (
<p className="text-base font-semibold font-mono w-full text-center px-2 p-1 rounded-md bg-green-500/10 text-green-900 dark:text-green-400">
ACTIVE

3
components/clickable-row.tsx
View File

@@ -12,10 +12,12 @@ export default function ClickableRow({
device,
parentalControl,
admin = false,
idx,
}: {
device: Device;
parentalControl?: boolean;
admin?: boolean;
idx?: number;
}) {
const [devices, setDeviceCart] = useAtom(deviceCartAtom);
@@ -26,6 +28,7 @@ export default function ClickableRow({
(parentalControl === false && device.blocked) || device.is_active
? "cursor-not-allowed hover:bg-accent-foreground/10"
: "cursor-pointer hover:bg-muted-foreground/10",
`motion-preset-fade-md motion-delay-${(idx || 1) * 75}ms`,
)}
onClick={() => {
if (device.blocked) return;

2
components/device-card.tsx
View File

@@ -41,7 +41,7 @@ export default function DeviceCard({
>
<div
className={cn(
"flex text-sm justify-between items-center my-2 p-4 border rounded-md",
"flex text-sm justify-between items-center my-2 p-4 border rounded-md motion-preset-fade-md",
isChecked ? "bg-accent" : "",
device.is_active
? "cursor-not-allowed text-green-600 hover:bg-accent-foreground/10"

3
components/devices-table.tsx
View File

@@ -79,12 +79,13 @@ export async function DevicesTable({
</TableRow>
</TableHeader>
<TableBody className="overflow-scroll">
{data?.map((device) => (
{data?.map((device, idx) => (
<ClickableRow
admin={isAdmin}
key={device.id}
device={device}
parentalControl={parentalControl}
idx={idx + 1}
/>
))}
</TableBody>

30
components/devices-to-pay.tsx
View File

@@ -126,6 +126,7 @@ export default function DevicesToPay({
type="submit"
variant={"secondary"}
size={"lg"}
className="w-full"
>
{isPending
? "Processing payment..."
@@ -145,7 +146,7 @@ export default function DevicesToPay({
disabled={isPending || disabled}
type="submit"
size={"lg"}
className="mb-4"
className="mb-4 w-full"
>
{isPending ? "Processing payment..." : "I have paid"}
{isPending ? (
@@ -162,10 +163,8 @@ export default function DevicesToPay({
</TableCaption>
<TableBody className="">
<TableRow>
<TableCell className="motion-preset-slide-left-sm">
Payment created
</TableCell>
<TableCell className="text-right motion-preset-slide-right-sm">
<TableCell>Payment created</TableCell>
<TableCell className="text-right motion-preset-slide-up-sm">
{new Date(payment?.created_at ?? "").toLocaleDateString(
"en-US",
{
@@ -180,31 +179,22 @@ export default function DevicesToPay({
</TableCell>
</TableRow>
<TableRow>
<TableCell className="motion-preset-slide-left-sm motion-delay-75">
Total Devices
</TableCell>
<TableCell className="text-right text-xl motion-preset-slide-right-sm motion-delay-75">
<TableCell>Total Devices</TableCell>
<TableCell className="text-right text-xl motion-preset-slide-up-sm motion-delay-75">
{devices?.length}
</TableCell>
</TableRow>
<TableRow>
<TableCell className="motion-preset-slide-left-sm motion-delay-100">
Duration
</TableCell>
<TableCell className="text-right text-xl motion-preset-slide-right-sm motion-delay-100">
<TableCell>Duration</TableCell>
<TableCell className="text-right text-xl motion-preset-slide-up-sm motion-delay-100">
{payment?.number_of_months} Months
</TableCell>
</TableRow>
</TableBody>
<TableFooter>
<TableRow className="">
<TableCell
className="motion-preset-slide-left-sm motion-delay-150"
colSpan={1}
>
Total Due
</TableCell>
<TableCell className="text-right text-3xl font-bold motion-preset-slide-right-sm motion-delay-150">
<TableCell colSpan={1}>Total Due</TableCell>
<TableCell className="text-right text-3xl font-bold motion-preset-slide-up-sm motion-delay-150">
{payment?.amount?.toFixed(2)}
</TableCell>
</TableRow>

4
components/payments-table.tsx
View File

@@ -68,7 +68,7 @@ export async function PaymentsTable({
</TableHeader>
<TableBody className="overflow-scroll">
{payments?.data?.map((payment) => (
<TableRow key={payment.id}>
<TableRow className="motion-preset-fade-md" key={payment.id}>
<TableCell>
<div
className={cn(
@@ -197,7 +197,7 @@ export function MobilePaymentDetails({
return (
<div
className={cn(
"flex flex-col items-start border rounded p-2 my-2",
"flex flex-col items-start border rounded p-2 my-2 motion-preset-fade-md",
payment?.paid
? "bg-green-500/10 border-dashed border-green-500"
: payment?.is_expired

8
components/topups-table.tsx
View File

@@ -71,7 +71,7 @@ export async function TopupsTable({
<TableCell>
<div
className={cn(
"flex flex-col items-start border rounded p-2",
"flex flex-col items-start border rounded p-2 motion-preset-fade-md",
topup?.paid
? "bg-green-500/10 border-dashed border-green-500"
: topup?.is_expired
@@ -165,9 +165,11 @@ function MobileTopupDetails({ topup }: { topup: Topup }) {
return (
<div
className={cn(
"flex flex-col items-start border rounded p-2 my-2",
"flex flex-col items-start border rounded p-2 my-2 motion-preset-fade-md",
topup?.paid
? "bg-green-500/10 border-dashed border-green=500"
? "bg-green-500/10 border-dashed border-green-500"
: topup?.is_expired
? "bg-gray-500/10 border-dashed border-gray-500 dark:border-gray-500/50"
: "bg-yellow-500/10 border-dashed border-yellow-500 dark:border-yellow-500/50",
)}
>

2
components/ui/app-sidebar.tsx
View File

@@ -204,7 +204,7 @@ export async function AppSidebar({
<Link className="text-md" href={item.link}>
{item.icon}
<span
className={`opacity-70 motion-preset-slide-left-md ml-2`}
className={`opacity-70 motion-preset-fade motion-duration-300 ml-2`}
>
{item.title}
</span>

4
components/wallet-transactions-table.tsx
View File

@@ -66,7 +66,7 @@ export async function WalletTransactionsTable({
</div>
) : (
<div>
<div className="flex gap-4 mb-4 w-full">
<div className="flex gap-4 mb-4 w-full motion-preset-fade-md">
<div className="bg-red-300 ring-4 ring-red-500/20 w-full sm:w-fit dark:bg-red-950 dark:text-red-400 text-red-900 p-2 px-4 rounded-md mb-2">
<h5 className="text-lg font-semibold uppercase font-barlow">
Total Debit
@@ -95,7 +95,7 @@ export async function WalletTransactionsTable({
{transactions?.data?.map((trx) => (
<TableRow
className={cn(
"items-start border rounded p-2",
"items-start border rounded p-2 motion-preset-slide-down-sm",
trx?.transaction_type === "TOPUP"
? "credit-bg"
: "debit-bg",

2
components/welcome-banner.tsx
View File

@@ -29,7 +29,7 @@ export function WelcomeBanner({ firstName, lastName }: WelcomeBannerProps) {
exit={{ opacity: 0 }}
>
Welcome,{" "}
<p className="font-semibold motion-preset-slide-down inline-block motion-delay-200">
<p className="font-semibold motion-preset-fade inline-block motion-delay-200">
{firstName} {lastName}
</p>
</motion.div>