mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-07-04 07:28:23 +00:00
refactor: enhance parental control features and improve device blocking logic 🔨
This commit is contained in:
@ -1,18 +1,22 @@
|
||||
import { Suspense } from "react";
|
||||
import { DevicesTable } from "@/components/devices-table";
|
||||
import Search from "@/components/search";
|
||||
import { Suspense } from "react";
|
||||
|
||||
export default async function ParentalControl({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{
|
||||
query: string;
|
||||
page: number;
|
||||
sortBy: string;
|
||||
status: string;
|
||||
}>;
|
||||
}) {
|
||||
const query = (await searchParams)?.query || "";
|
||||
|
||||
const parentalControlFilters = {
|
||||
is_active: "true",
|
||||
has_a_pending_payment: "false",
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<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 />
|
||||
</div>
|
||||
<Suspense key={query} fallback={"loading...."}>
|
||||
<Suspense key={(await searchParams).page} fallback={"loading...."}>
|
||||
<DevicesTable
|
||||
parentalControl={true}
|
||||
searchParams={searchParams}
|
||||
additionalFilters={parentalControlFilters}
|
||||
/>
|
||||
</Suspense>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,4 @@
|
||||
import { redirect } from "next/navigation";
|
||||
import { getServerSession } from "next-auth";
|
||||
import { Suspense } from "react";
|
||||
import { authOptions } from "@/app/auth";
|
||||
import { PaymentsTable } from "@/components/payments-table";
|
||||
import Search from "@/components/search";
|
||||
|
||||
@ -16,10 +13,7 @@ export default async function Payments({
|
||||
}>;
|
||||
}) {
|
||||
const query = (await searchParams)?.query || "";
|
||||
const session = await getServerSession(authOptions);
|
||||
if (session?.user?.is_admin) {
|
||||
return redirect("/user-payments");
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex justify-between items-center border rounded-md border-dashed font-bold title-bg py-4 px-2 mb-4">
|
||||
|
||||
@ -1,12 +1,9 @@
|
||||
"use client";
|
||||
|
||||
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { OctagonX } from "lucide-react";
|
||||
import { useState } from "react";
|
||||
import { type SubmitHandler, useForm } from "react-hook-form";
|
||||
import { DialogDescription } from "@radix-ui/react-dialog";
|
||||
import { OctagonX, ShieldBan } from "lucide-react";
|
||||
import { useActionState, useEffect, useState, useTransition } from "react";
|
||||
import { toast } from "sonner";
|
||||
import { z } from "zod";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
@ -19,160 +16,146 @@ import {
|
||||
import { Label } from "@/components/ui/label";
|
||||
import type { Device } from "@/lib/backend-types";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { blockDevice } from "@/queries/devices";
|
||||
import { blockDeviceAction } from "@/queries/devices";
|
||||
import { TextShimmer } from "./ui/text-shimmer";
|
||||
import { Textarea } from "./ui/textarea";
|
||||
|
||||
const validationSchema = z.object({
|
||||
reasonForBlocking: z.string().min(5, { message: "Reason is required" }),
|
||||
});
|
||||
export type BlockDeviceFormState = {
|
||||
message: string;
|
||||
success: boolean;
|
||||
fieldErrors?: {
|
||||
reason_for_blocking?: string[];
|
||||
};
|
||||
payload?: FormData;
|
||||
};
|
||||
|
||||
const initialState: BlockDeviceFormState = {
|
||||
message: "",
|
||||
success: false,
|
||||
fieldErrors: {},
|
||||
};
|
||||
|
||||
export default function BlockDeviceDialog({
|
||||
device,
|
||||
admin,
|
||||
}: { device: Device; type: "block" | "unblock"; admin?: boolean }) {
|
||||
const [disabled, setDisabled] = useState(false);
|
||||
// admin,
|
||||
parentalControl = false,
|
||||
}: {
|
||||
device: Device;
|
||||
type: "block" | "unblock";
|
||||
admin?: boolean;
|
||||
parentalControl?: boolean;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const {
|
||||
register,
|
||||
handleSubmit,
|
||||
formState: { errors },
|
||||
} = useForm<z.infer<typeof validationSchema>>({
|
||||
resolver: zodResolver(validationSchema),
|
||||
});
|
||||
const [state, formAction, isPending] = useActionState(blockDeviceAction, initialState);
|
||||
const [isTransitioning, startTransition] = useTransition();
|
||||
|
||||
const onSubmit: SubmitHandler<z.infer<typeof validationSchema>> = (data) => {
|
||||
setDisabled(true);
|
||||
console.log(data);
|
||||
toast.promise(
|
||||
blockDevice({
|
||||
deviceId: String(device.id),
|
||||
reason_for_blocking: data.reasonForBlocking,
|
||||
blocked_by: "ADMIN",
|
||||
}),
|
||||
{
|
||||
loading: "Blocking...",
|
||||
success: () => {
|
||||
setDisabled(false);
|
||||
setOpen((prev) => !prev);
|
||||
return "Blocked!";
|
||||
},
|
||||
error: (error) => {
|
||||
setDisabled(false);
|
||||
return error || "Something went wrong";
|
||||
},
|
||||
},
|
||||
);
|
||||
setDisabled(false);
|
||||
const handleSimpleBlock = () => {
|
||||
startTransition(() => {
|
||||
const formData = new FormData();
|
||||
formData.append("deviceId", String(device.id));
|
||||
formData.append("reason_for_blocking", "");
|
||||
formData.append("action", "simple-block");
|
||||
formData.append("blocked_by", "PARENT");
|
||||
|
||||
formAction(formData);
|
||||
});
|
||||
};
|
||||
|
||||
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 (
|
||||
<div>
|
||||
{device.blocked ? (
|
||||
<Button
|
||||
onClick={() => {
|
||||
setDisabled(true);
|
||||
toast.promise(
|
||||
blockDevice({
|
||||
blocked_by: "PARENT",
|
||||
deviceId: String(device.id),
|
||||
reason_for_blocking: ""
|
||||
}),
|
||||
{
|
||||
loading: "unblockinig...",
|
||||
success: () => {
|
||||
setDisabled(false);
|
||||
return "Unblocked!";
|
||||
},
|
||||
error: () => {
|
||||
setDisabled(false);
|
||||
return "Something went wrong";
|
||||
},
|
||||
},
|
||||
);
|
||||
}}
|
||||
>
|
||||
{disabled ? <TextShimmer>Unblocking</TextShimmer> : "Unblock"}
|
||||
</Button>
|
||||
) : (
|
||||
<div>
|
||||
{!admin ? (
|
||||
<Button
|
||||
variant={"destructive"}
|
||||
onClick={() => {
|
||||
setDisabled(true);
|
||||
toast.promise(
|
||||
blockDevice({
|
||||
blocked_by: "PARENT",
|
||||
deviceId: String(device.id),
|
||||
reason_for_blocking: "",
|
||||
}),
|
||||
{
|
||||
loading: "blocking...",
|
||||
success: () => {
|
||||
setDisabled(false);
|
||||
return "blocked!";
|
||||
},
|
||||
error: () => {
|
||||
setDisabled(false);
|
||||
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>
|
||||
)}
|
||||
<Dialog open={open} onOpenChange={setOpen}>
|
||||
<DialogTrigger asChild>
|
||||
<Button disabled={isLoading} variant="destructive">
|
||||
<OctagonX />
|
||||
Block
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[425px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Block 🚫</DialogTitle>
|
||||
<DialogDescription className="text-sm text-muted-foreground">
|
||||
Please provide a reason for blocking this device
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
<form action={formAction} className="space-y-4">
|
||||
<input type="hidden" name="deviceId" value={String(device.id)} />
|
||||
<input type="hidden" name="action" value="block" />
|
||||
<input type="hidden" name="blocked_by" value="ADMIN" />
|
||||
|
||||
<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>
|
||||
<Textarea
|
||||
rows={10}
|
||||
name="reason_for_blocking"
|
||||
id="reason_for_blocking"
|
||||
defaultValue={(state?.payload?.get("reason_for_blocking") || "") as string}
|
||||
className={cn(
|
||||
"col-span-5",
|
||||
(state.fieldErrors?.reason_for_blocking) && "ring-2 ring-red-500",
|
||||
)}
|
||||
/>
|
||||
<span className="text-sm text-red-500">
|
||||
{state.fieldErrors?.reason_for_blocking?.[0]}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="destructive" disabled={isLoading} type="submit">
|
||||
{isLoading ? "Blocking..." : "Block"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -91,6 +91,7 @@ export default function ClickableRow({
|
||||
admin={admin}
|
||||
type={device.blocked ? "unblock" : "block"}
|
||||
device={device}
|
||||
parentalControl={parentalControl}
|
||||
/>
|
||||
)}
|
||||
</TableCell>
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
"use client";
|
||||
import { deviceCartAtom } from "@/lib/atoms";
|
||||
import type { Device } from "@/lib/backend-types";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useAtom } from "jotai";
|
||||
import { HandCoins } from "lucide-react";
|
||||
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 BlockDeviceDialog from "./block-device-dialog";
|
||||
import { Badge } from "./ui/badge";
|
||||
|
||||
@ -21,11 +21,14 @@ import Pagination from "./pagination";
|
||||
export async function DevicesTable({
|
||||
searchParams,
|
||||
parentalControl,
|
||||
additionalFilters = {},
|
||||
|
||||
}: {
|
||||
searchParams: Promise<{
|
||||
[key: string]: unknown;
|
||||
}>;
|
||||
parentalControl?: boolean;
|
||||
additionalFilters?: Record<string, string | number | boolean>;
|
||||
}) {
|
||||
const resolvedParams = await searchParams;
|
||||
const session = await getServerSession(authOptions);
|
||||
@ -42,9 +45,15 @@ export async function DevicesTable({
|
||||
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.offset = offset;
|
||||
|
||||
console.log("API Params:", apiParams);
|
||||
const [error, devices] = await tryCatch(
|
||||
getDevices(apiParams),
|
||||
);
|
||||
|
||||
@ -3,6 +3,7 @@
|
||||
import { revalidatePath } from "next/cache";
|
||||
import { getServerSession } from "next-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 { ApiError, ApiResponse, Device } from "@/lib/backend-types";
|
||||
import { checkSession } from "@/utils/session";
|
||||
@ -114,33 +115,77 @@ export async function addDeviceAction(
|
||||
}
|
||||
}
|
||||
|
||||
export async function blockDevice({
|
||||
deviceId,
|
||||
reason_for_blocking,
|
||||
blocked_by,
|
||||
}: {
|
||||
deviceId: string;
|
||||
reason_for_blocking: string;
|
||||
blocked_by: "ADMIN" | "PARENT";
|
||||
}) {
|
||||
console.log("Blocking device:", deviceId, reason_for_blocking, blocked_by);
|
||||
const session = await getServerSession(authOptions);
|
||||
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}`,
|
||||
export async function blockDeviceAction(
|
||||
prevState: BlockDeviceFormState,
|
||||
formData: FormData
|
||||
): Promise<BlockDeviceFormState> {
|
||||
const deviceId = formData.get("deviceId") as string;
|
||||
const reason_for_blocking = formData.get("reason_for_blocking") as string;
|
||||
const action = formData.get("action") as "block" | "unblock" | "simple-block";
|
||||
const blocked_by = formData.get("blocked_by") as "ADMIN" | "PARENT";
|
||||
|
||||
try {
|
||||
const session = await getServerSession(authOptions);
|
||||
if (!session?.apiToken) {
|
||||
return {
|
||||
success: false,
|
||||
message: "Authentication required.",
|
||||
fieldErrors: {},
|
||||
payload: formData
|
||||
};
|
||||
}
|
||||
|
||||
// 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
|
||||
? reason_for_blocking
|
||||
: "Blocked by parent",
|
||||
blocked_by: session?.user?.is_superuser ? "ADMIN" : "PARENT",
|
||||
}),
|
||||
},
|
||||
);
|
||||
return handleApiResponse<Device>(response, "blockDevice");
|
||||
}
|
||||
);
|
||||
|
||||
const result = await handleApiResponse<Device>(response, "blockDeviceAction");
|
||||
|
||||
revalidatePath("/devices");
|
||||
revalidatePath("/parental-control");
|
||||
|
||||
return {
|
||||
success: true,
|
||||
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
|
||||
};
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user