sarlink-portal/app/(dashboard)/devices/[deviceId]/page.tsx

import { redirect } from "next/navigation";
import ClientErrorMessage from "@/components/client-error-message";
import Search from "@/components/search";
import { Badge } from "@/components/ui/badge";
import { getDevice } from "@/queries/devices";
import { tryCatch } from "@/utils/tryCatch";

export default async function DeviceDetails({
  params,
}: {
  params: Promise<{ deviceId: string }>;
}) {
  const deviceId = (await params)?.deviceId;
  const [error, device] = await tryCatch(getDevice({ deviceId: deviceId }));
  if (error) {
    // Handle specific actions for certain errors, but reuse the error message
    if (error.message === "UNAUTHORIZED") {
      redirect("/auth/signin");
    } else {
      // For all other errors, display the error message directly
      return <ClientErrorMessage message={error.message} />;
    }
  }
  if (!device) return null;

  return (
    <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 motion-preset-slide-down-md font-bold">
            {device?.name}
          </h3>
          <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",
              day: "2-digit",
              year: "numeric",
            })}
          </p>
        </div>
        <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
            </p>
          )}
        </div>
      </div>

      <div
        id="user-filters"
        className=" py-4 gap-4 flex sm:flex-row flex-col items-start justify-start"
      >
        <Search />
        {/* <Filter
        options={sortfilterOptions}
        defaultOption="asc"
        queryParamKey="sortBy"
      /> */}
      </div>
      {/* <Suspense key={query} fallback={"loading...."}>
      <DevicesTable searchParams={searchParams} />
    </Suspense> */}
    </div>
  );
}