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

refactor: enhance parental control features and improve device blocking logic 🔨

Browse Source
This commit is contained in:
i701
2025-07-02 23:29:40 +05:00
parent 40bf8413f8
commit c90b003167
7 changed files with 229 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
app/(dashboard)/parental-control/page.tsx
View File

@ -1,18 +1,22 @@
import { Suspense } from "react";
import { DevicesTable } from "@/components/devices-table"; import { DevicesTable } from "@/components/devices-table";
import Search from "@/components/search"; import Search from "@/components/search";
import { Suspense } from "react";
export default async function ParentalControl({ export default async function ParentalControl({
searchParams, searchParams,
}: { }: {
searchParams: Promise<{ searchParams: Promise<{
query: string;
page: number; page: number;
sortBy: string; sortBy: string;
status: string; status: string;
}>; }>;
}) { }) {
const query = (await searchParams)?.query || "";
const parentalControlFilters = {
is_active: "true",
has_a_pending_payment: "false",
};
return ( return (
<div> <div>
<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4"> <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
@ -25,10 +29,11 @@ export default async function ParentalControl({
> >
<Search /> <Search />
</div> </div>
<Suspense key={query} fallback={"loading...."}> <Suspense key={(await searchParams).page} fallback={"loading...."}>
<DevicesTable <DevicesTable
parentalControl={true} parentalControl={true}
searchParams={searchParams} searchParams={searchParams}
additionalFilters={parentalControlFilters}
/> />
</Suspense> </Suspense>
</div> </div>

8
app/(dashboard)/payments/page.tsx
View File

@ -1,7 +1,4 @@
import { redirect } from "next/navigation";
import { getServerSession } from "next-auth";
import { Suspense } from "react"; import { Suspense } from "react";
import { authOptions } from "@/app/auth";
import { PaymentsTable } from "@/components/payments-table"; import { PaymentsTable } from "@/components/payments-table";
import Search from "@/components/search"; import Search from "@/components/search";
@ -16,10 +13,7 @@ export default async function Payments({
}>; }>;
}) { }) {
const query = (await searchParams)?.query || ""; const query = (await searchParams)?.query || "";
const session = await getServerSession(authOptions);
if (session?.user?.is_admin) {
return redirect("/user-payments");
}
return ( return (
<div> <div>
<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4"> <div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">

279
components/block-device-dialog.tsx
View File

@ -1,12 +1,9 @@
"use client"; "use client";
import { DialogDescription } from "@radix-ui/react-dialog";
import { zodResolver } from "@hookform/resolvers/zod"; import { OctagonX, ShieldBan } from "lucide-react";
import { OctagonX } from "lucide-react"; import { useActionState, useEffect, useState, useTransition } from "react";
import { useState } from "react";
import { type SubmitHandler, useForm } from "react-hook-form";
import { toast } from "sonner"; import { toast } from "sonner";
import { z } from "zod";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { import {
Dialog, Dialog,
@ -19,160 +16,146 @@ import {
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import type { Device } from "@/lib/backend-types"; import type { Device } from "@/lib/backend-types";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { blockDevice } from "@/queries/devices"; import { blockDeviceAction } from "@/queries/devices";
import { TextShimmer } from "./ui/text-shimmer"; import { TextShimmer } from "./ui/text-shimmer";
import { Textarea } from "./ui/textarea"; import { Textarea } from "./ui/textarea";
const validationSchema = z.object({ export type BlockDeviceFormState = {
reasonForBlocking: z.string().min(5, { message: "Reason is required" }), message: string;
}); success: boolean;
fieldErrors?: {
reason_for_blocking?: string[];
};
payload?: FormData;
};
const initialState: BlockDeviceFormState = {
message: "",
success: false,
fieldErrors: {},
};
export default function BlockDeviceDialog({ export default function BlockDeviceDialog({
device, device,
admin, // admin,
}: { device: Device; type: "block" | "unblock"; admin?: boolean }) { parentalControl = false,
const [disabled, setDisabled] = useState(false); }: {
device: Device;
type: "block" | "unblock";
admin?: boolean;
parentalControl?: boolean;
}) {
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const { const [state, formAction, isPending] = useActionState(blockDeviceAction, initialState);
register, const [isTransitioning, startTransition] = useTransition();
handleSubmit,
formState: { errors },
} = useForm<z.infer<typeof validationSchema>>({
resolver: zodResolver(validationSchema),
});
const onSubmit: SubmitHandler<z.infer<typeof validationSchema>> = (data) => { const handleSimpleBlock = () => {
setDisabled(true); startTransition(() => {
console.log(data); const formData = new FormData();
toast.promise( formData.append("deviceId", String(device.id));
blockDevice({ formData.append("reason_for_blocking", "");
deviceId: String(device.id), formData.append("action", "simple-block");
reason_for_blocking: data.reasonForBlocking, formData.append("blocked_by", "PARENT");
blocked_by: "ADMIN",
}), formAction(formData);
{ });
loading: "Blocking...",
success: () => {
setDisabled(false);
setOpen((prev) => !prev);
return "Blocked!";
},
error: (error) => {
setDisabled(false);
return error || "Something went wrong";
},
},
);
setDisabled(false);
}; };
const handleUnblock = () => {
startTransition(() => {
const formData = new FormData();
formData.append("deviceId", String(device.id));
formData.append("reason_for_blocking", "");
formData.append("action", "unblock");
formData.append("blocked_by", "PARENT");
formAction(formData);
});
};
// Show toast notifications based on state changes
useEffect(() => {
if (state.message) {
if (state.success) {
toast.success(state.message);
if (open) setOpen(false);
} else {
toast.error(state.message);
}
}
}, [state, open]);
const isLoading = isPending || isTransitioning;
// If device is blocked and user is not admin, show unblock button
if (device.blocked && parentalControl) {
return (
<Button onClick={handleUnblock} disabled={isLoading}>
{isLoading ? <TextShimmer>Unblocking</TextShimmer> : "Unblock"}
</Button>
);
}
// If device is not blocked and user is not admin, show simple block button
if (!device.blocked && parentalControl) {
return (
<Button onClick={handleSimpleBlock} disabled={isLoading} variant="destructive">
<ShieldBan />
{isLoading ? <TextShimmer>Blocking</TextShimmer> : "Block"}
</Button>
);
}
// If user is admin, show block with reason dialog
return ( return (
<div> <div>
{device.blocked ? ( <Dialog open={open} onOpenChange={setOpen}>
<Button <DialogTrigger asChild>
onClick={() => { <Button disabled={isLoading} variant="destructive">
setDisabled(true); <OctagonX />
toast.promise( Block
blockDevice({ </Button>
blocked_by: "PARENT", </DialogTrigger>
deviceId: String(device.id), <DialogContent className="sm:max-w-[425px]">
reason_for_blocking: "" <DialogHeader>
}), <DialogTitle>Block 🚫</DialogTitle>
{ <DialogDescription className="text-sm text-muted-foreground">
loading: "unblockinig...", Please provide a reason for blocking this device
success: () => { </DialogDescription>
setDisabled(false); </DialogHeader>
return "Unblocked!"; <form action={formAction} className="space-y-4">
}, <input type="hidden" name="deviceId" value={String(device.id)} />
error: () => { <input type="hidden" name="action" value="block" />
setDisabled(false); <input type="hidden" name="blocked_by" value="ADMIN" />
return "Something went wrong";
}, <div className="grid gap-4 py-4">
}, <div className="flex flex-col items-start gap-1">
); <Label htmlFor="reason_for_blocking" className="text-right">
}} Reason for blocking
> </Label>
{disabled ? <TextShimmer>Unblocking</TextShimmer> : "Unblock"} <Textarea
</Button> rows={10}
) : ( name="reason_for_blocking"
<div> id="reason_for_blocking"
{!admin ? ( defaultValue={(state?.payload?.get("reason_for_blocking") || "") as string}
<Button className={cn(
variant={"destructive"} "col-span-5",
onClick={() => { (state.fieldErrors?.reason_for_blocking) && "ring-2 ring-red-500",
setDisabled(true); )}
toast.promise( />
blockDevice({ <span className="text-sm text-red-500">
blocked_by: "PARENT", {state.fieldErrors?.reason_for_blocking?.[0]}
deviceId: String(device.id), </span>
reason_for_blocking: "", </div>
}), </div>
{ <DialogFooter>
loading: "blocking...", <Button variant="destructive" disabled={isLoading} type="submit">
success: () => { {isLoading ? "Blocking..." : "Block"}
setDisabled(false); </Button>
return "blocked!"; </DialogFooter>
}, </form>
error: () => { </DialogContent>
setDisabled(false); </Dialog>
return "Something went wrong";
},
},
);
}}
>
<OctagonX />
{disabled ? <TextShimmer>Blocking</TextShimmer> : "Block"}
</Button>
) : (
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<Button disabled={disabled} variant="destructive">
<OctagonX />
Block
</Button>
</DialogTrigger>
<DialogContent className="sm:max-w-[425px]">
<DialogHeader>
<DialogTitle>
Please provide a reason for blocking this device.
</DialogTitle>
</DialogHeader>
<form onSubmit={handleSubmit(onSubmit)}>
<div className="grid gap-4 py-4">
<div className="flex flex-col items-start gap-1">
<Label htmlFor="reason" className="text-right">
Reason for blocking
</Label>
<Textarea
rows={10}
{...register("reasonForBlocking")}
id="reasonForBlocking"
className={cn(
"col-span-5",
errors.reasonForBlocking && "ring-2 ring-red-500",
)}
/>
<span className="text-sm text-red-500">
{errors.reasonForBlocking?.message}
</span>
</div>
</div>
<DialogFooter>
<Button
variant={"destructive"}
disabled={disabled}
type="submit"
>
Block
</Button>
</DialogFooter>
</form>
</DialogContent>
</Dialog>
)}
</div>
)}
</div> </div>
); );
} }

1
components/clickable-row.tsx
View File

@ -91,6 +91,7 @@ export default function ClickableRow({
admin={admin} admin={admin}
type={device.blocked ? "unblock" : "block"} type={device.blocked ? "unblock" : "block"}
device={device} device={device}
parentalControl={parentalControl}
/> />
)} )}
</TableCell> </TableCell>

6
components/device-card.tsx
View File

@ -1,10 +1,10 @@
"use client"; "use client";
import { deviceCartAtom } from "@/lib/atoms";
import type { Device } from "@/lib/backend-types";
import { cn } from "@/lib/utils";
import { useAtom } from "jotai"; import { useAtom } from "jotai";
import { HandCoins } from "lucide-react"; import { HandCoins } from "lucide-react";
import Link from "next/link"; import Link from "next/link";
import { deviceCartAtom } from "@/lib/atoms";
import type { Device } from "@/lib/backend-types";
import { cn } from "@/lib/utils";
import AddDevicesToCartButton from "./add-devices-to-cart-button"; import AddDevicesToCartButton from "./add-devices-to-cart-button";
import BlockDeviceDialog from "./block-device-dialog"; import BlockDeviceDialog from "./block-device-dialog";
import { Badge } from "./ui/badge"; import { Badge } from "./ui/badge";

11
components/devices-table.tsx
View File

@ -21,11 +21,14 @@ import Pagination from "./pagination";
export async function DevicesTable({ export async function DevicesTable({
searchParams, searchParams,
parentalControl, parentalControl,
additionalFilters = {},
}: { }: {
searchParams: Promise<{ searchParams: Promise<{
[key: string]: unknown; [key: string]: unknown;
}>; }>;
parentalControl?: boolean; parentalControl?: boolean;
additionalFilters?: Record<string, string | number | boolean>;
}) { }) {
const resolvedParams = await searchParams; const resolvedParams = await searchParams;
const session = await getServerSession(authOptions); const session = await getServerSession(authOptions);
@ -42,9 +45,15 @@ export async function DevicesTable({
apiParams[key] = typeof value === "number" ? value : String(value); apiParams[key] = typeof value === "number" ? value : String(value);
} }
} }
for (const [key, value] of Object.entries(additionalFilters)) {
if (value !== undefined && value !== "") {
apiParams[key] = typeof value === "number" ? value : String(value);
}
}
apiParams.limit = limit; apiParams.limit = limit;
apiParams.offset = offset; apiParams.offset = offset;
console.log("API Params:", apiParams);
const [error, devices] = await tryCatch( const [error, devices] = await tryCatch(
getDevices(apiParams), getDevices(apiParams),
); );

103
queries/devices.ts
View File

@ -3,6 +3,7 @@
import { revalidatePath } from "next/cache"; import { revalidatePath } from "next/cache";
import { getServerSession } from "next-auth"; import { getServerSession } from "next-auth";
import { authOptions } from "@/app/auth"; import { authOptions } from "@/app/auth";
import { BlockDeviceFormState } from "@/components/block-device-dialog";
import type { AddDeviceFormState, initialState } from "@/components/user/add-device-dialog"; import type { AddDeviceFormState, initialState } from "@/components/user/add-device-dialog";
import type { ApiError, ApiResponse, Device } from "@/lib/backend-types"; import type { ApiError, ApiResponse, Device } from "@/lib/backend-types";
import { checkSession } from "@/utils/session"; import { checkSession } from "@/utils/session";
@ -114,33 +115,77 @@ export async function addDeviceAction(
} }
} }
export async function blockDevice({ export async function blockDeviceAction(
deviceId, prevState: BlockDeviceFormState,
reason_for_blocking, formData: FormData
blocked_by, ): Promise<BlockDeviceFormState> {
}: { const deviceId = formData.get("deviceId") as string;
deviceId: string; const reason_for_blocking = formData.get("reason_for_blocking") as string;
reason_for_blocking: string; const action = formData.get("action") as "block" | "unblock" | "simple-block";
blocked_by: "ADMIN" | "PARENT"; const blocked_by = formData.get("blocked_by") as "ADMIN" | "PARENT";
}) {
console.log("Blocking device:", deviceId, reason_for_blocking, blocked_by); try {
const session = await getServerSession(authOptions); const session = await getServerSession(authOptions);
const response = await fetch( if (!session?.apiToken) {
`${process.env.SARLINK_API_BASE_URL}/api/devices/${deviceId}/block/`, return {
{ success: false,
method: "PUT", message: "Authentication required.",
headers: { fieldErrors: {},
"Content-Type": "application/json", payload: formData
Authorization: `Token ${session?.apiToken}`, };
}
// Validation only for admin block with reason
if (action === "block" && session?.user?.is_superuser && (!reason_for_blocking || reason_for_blocking.trim().length < 5)) {
return {
success: false,
message: "Reason for blocking is required and must be at least 5 characters.",
fieldErrors: {
reason_for_blocking: ["Reason is required and must be at least 5 characters."]
},
payload: formData
};
}
const isBlocking = action === "block" || action === "simple-block";
const response = await fetch(
`${process.env.SARLINK_API_BASE_URL}/api/devices/${deviceId}/block/`,
{
method: "PUT",
headers: {
"Content-Type": "application/json",
Authorization: `Token ${session.apiToken}`,
},
body: JSON.stringify({
blocked: isBlocking,
reason_for_blocking: session?.user?.is_superuser
? reason_for_blocking || (action === "simple-block" ? "Blocked by admin" : "")
: isBlocking ? "Blocked by parent" : "",
blocked_by: session?.user?.is_superuser ? blocked_by : "PARENT",
}),
}, },
body: JSON.stringify({ );
blocked: true,
reason_for_blocking: session?.user?.is_superuser const result = await handleApiResponse<Device>(response, "blockDeviceAction");
? reason_for_blocking
: "Blocked by parent", revalidatePath("/devices");
blocked_by: session?.user?.is_superuser ? "ADMIN" : "PARENT", revalidatePath("/parental-control");
}),
}, return {
); success: true,
return handleApiResponse<Device>(response, "blockDevice"); message: isBlocking ? "Device blocked successfully!" : "Device unblocked successfully!",
} fieldErrors: {},
payload: formData
};
} catch (error: unknown) {
console.error("Block Device Action Error:", error);
return {
success: false,
message: (error as ApiError).message || "An unexpected error occurred.",
fieldErrors: {},
payload: formData
};
}
}