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

feat: enhance error handling and improve API response management across components
Some checks failed
Build and Push Docker Images / Build and Push Docker Images (push) Failing after 1m39s
Details

Browse Source
This commit is contained in:
i701
2025-04-14 01:05:07 +05:00
parent 0d578c9add
commit 6365a701ba
11 changed files with 111 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
components/auth/login-form.tsx
View File

@ -15,7 +15,7 @@ export default function LoginForm() {
return (
<form
className="bg-white overflow-clip dark:bg-transparent dark:border-2 w-full max-w-xs mx-auto rounded-lg shadow mt-4"
className="overflow-clip title-bg dark:border-2 w-full max-w-xs mx-auto rounded-lg shadow border mt-4"
action={formAction}
>
<div className="py-4 px-4">
@ -23,7 +23,6 @@ export default function LoginForm() {
<PhoneInput
id="phone-number"
name="phoneNumber"
className="b0rder"
maxLength={8}
disabled={isPending}
placeholder="Enter phone number"

8
components/auth/verify-otp-form.tsx
View File

@ -57,11 +57,11 @@ export default function VerifyOTPForm({
return (
<form
onSubmit={handleSubmit(onSubmit)}
className="w-full max-w-xs rounded-lg shadow my-4"
className="w-full max-w-xs title-bg border rounded-lg shadow my-4"
>
<div className="grid pb-4 pt-4 gap-4 px-4">
<div className="">
<Label htmlFor="otp-number" className="text-gray-500">
<div className="flex flex-col gap-4">
<Label htmlFor="otp-number" className="sr-only text-gray-500">
Enter the OTP
</Label>
<Input
@ -69,6 +69,8 @@ export default function VerifyOTPForm({
id="otp-number"
{...register("pin")}
type="text"
placeholder="Enter OTP"
className="bg-white dark:bg-sarLinkOrange/10"
/>
{errors.pin && (
<p className="text-red-500 text-sm">{errors.pin.message}</p>

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

@ -1,6 +1,6 @@
"use client";
import { blockDevice } from "@/actions/omada-actions";
import { blockDevice as BlockDeviceFromOmada } from "@/actions/omada-actions";
import { Button } from "@/components/ui/button";
import {
Dialog,
@ -13,6 +13,8 @@ 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 { zodResolver } from "@hookform/resolvers/zod";
import { OctagonX } from "lucide-react";
import { useState } from "react";
@ -46,11 +48,9 @@ export default function BlockDeviceDialog({
console.log(data);
toast.promise(
blockDevice({
macAddress: device.mac,
type: type,
reason: data.reasonForBlocking,
blockedBy: "ADMIN",
// reason: data.reasonForBlocking,
deviceId: String(device.id),
reason_for_blocking: data.reasonForBlocking,
blocked_by: "ADMIN",
}),
{
loading: "Blocking...",
@ -75,7 +75,7 @@ export default function BlockDeviceDialog({
onClick={() => {
setDisabled(true);
toast.promise(
blockDevice({
BlockDeviceFromOmada({
macAddress: device.mac,
type: "unblock",
reason: "",
@ -104,7 +104,7 @@ export default function BlockDeviceDialog({
onClick={() => {
setDisabled(true);
toast.promise(
blockDevice({
BlockDeviceFromOmada({
macAddress: device.mac,
type: "block",
reason: "",

20
components/client-error-message.tsx
View File

@ -8,14 +8,18 @@ export default function ClientErrorMessage({ message }: { message: string }) {
<div className="bg-white dark:bg-transparent p-6 rounded flex flex-col items-center justify-center gap-4">
<TriangleAlert color="red" />
<h6 className="text-red-500 text-sm font-semibold">{message}</h6>
<span className="text-muted-foreground">
Please contact the administrator to give you permissions.
</span>
<Link href="tel:9198026">
<Button>
<Phone /> 919-8026
</Button>
</Link>
{message === "You do not have permission to perform this action." && (
<>
<span className="text-muted-foreground">
Please contact the administrator to give you permissions.
</span>
<Link href="tel:9198026">
<Button>
<Phone /> 919-8026
</Button>
</Link>
</>
)}
</div>
</div>
);

9
components/devices-table.tsx
View File

@ -40,8 +40,11 @@ export async function DevicesTable({
getDevices({ query: query, limit: limit, offset: offset }),
);
if (error) {
if (error.message === "Invalid token.") redirect("/auth/signin");
return <ClientErrorMessage message={error.message} />;
if (error.message === "UNAUTHORIZED") {
redirect("/auth/signin");
} else {
return <ClientErrorMessage message={error.message} />;
}
}
const { meta, data } = devices;
return (
@ -77,7 +80,7 @@ export async function DevicesTable({
<TableCell colSpan={2}>
{query?.length > 0 && (
<p className="text-sm text-muted-foreground">
Showing {meta?.total} locations for &quot;{query}
Showing {meta?.total} devices for &quot;{query}
&quot;
</p>
)}

2
components/payments-table.tsx
View File

@ -191,7 +191,7 @@ export async function PaymentsTable({
<TableCell colSpan={2}>
{query.length > 0 && (
<p className="text-sm text-muted-foreground">
Showing {payments?.data?.length} locations for &quot;
Showing {payments?.data?.length} payments for &quot;
{query}
&quot;
</p>

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

@ -64,13 +64,13 @@ export async function AppSidebar({
children: [
{
title: "Devices",
link: "/devices",
link: "/devices?page=1",
perm_identifier: "device",
icon: <Smartphone size={16} />,
},
{
title: "Payments",
link: "/payments",
link: "/payments?page=1",
icon: <CreditCard size={16} />,
perm_identifier: "payment",
},

2
components/ui/phone-input.tsx
View File

@ -61,7 +61,7 @@ const InputComponent = React.forwardRef<
HTMLInputElement,
React.ComponentProps<"input">
>(({ className, ...props }, ref) => (
<Input className={cn("mx-2", className)} {...props} ref={ref} />
<Input className={cn("mx-2 bg-white/10", className)} {...props} ref={ref} />
));
InputComponent.displayName = "InputComponent";