tm_panel/src/app/(companies)/companies/details/[id]/page.tsx

"use client";
import Loading from "@/app/loading";
import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
import IsVisible from "@/components/ui/IsVisible";
import Status from "@/components/ui/Status";
import { useCompanyDetails } from "@/hooks/queries";
import { BreadcrumbItem } from "@/types/shared";
import { formatPhoneNumber, unixToDate } from "@/utils/shared";
import getSymbolFromCurrency from "currency-symbol-map";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { use } from "react";

interface IProps {
  params: Promise<{ id: string }>;
}

const CompanyDetailsPage = ({ params }: IProps) => {
  const { id } = use(params);
  const breadcrumbItems: BreadcrumbItem[] = [
    {
      href: "/",
      name: "Dashboard",
    },
    {
      href: "/companies",
      name: "Companies",
    },
    {
      href: `/companies/details/${id}`,
      name: "Company details",
    },
  ];
  const { data, isLoading } = useCompanyDetails(id);
  const router = useRouter();
  if (isLoading) return <Loading />;

  return (
    <>
      <Breadcrumb items={breadcrumbItems} />

      <ShowcaseSection
        title={
          <div className="flex justify-between">
            <strong>{data.data.name}</strong>
            <Status status={data?.data?.status}>{data.data.status}</Status>
          </div>
        }
      >
        <div className="grid grid-cols-4 gap-4">
          <ShowcaseSection title={"Currency"}>
            <strong>
              {`${data?.data?.currency} ${getSymbolFromCurrency(data?.data.currency ?? "USD")}`}
            </strong>
          </ShowcaseSection>
          <ShowcaseSection title={"Language"}>
            <strong className="uppercase">{data?.data?.language}</strong>
          </ShowcaseSection>
          <ShowcaseSection title={"Created At"}>
            <strong>{unixToDate({ unix: data?.data?.created_at })}</strong>
          </ShowcaseSection>
          <ShowcaseSection title={"Annual revenue"}>
            <strong>{data?.data?.annual_revenue}</strong>
          </ShowcaseSection>
          <ShowcaseSection title={"Email"}>
            <strong>{data?.data?.email}</strong>
          </ShowcaseSection>
          <ShowcaseSection title={"Employee count"}>
            <strong>{data?.data?.employee_count}</strong>
          </ShowcaseSection>
          <ShowcaseSection title={"Founded Year"}>
            <strong>{data?.data?.founded_year}</strong>
          </ShowcaseSection>
          <ShowcaseSection title={"Industry"}>
            <strong>{data?.data?.industry}</strong>
          </ShowcaseSection>
          <ShowcaseSection title={"Is Compliant"}>
            <strong>{data?.data?.is_compliant ? "Yes" : "No"}</strong>
          </ShowcaseSection>
          <ShowcaseSection title={"Is Verified"}>
            <strong>{data?.data?.is_verified ? "Yes" : "No"}</strong>
          </ShowcaseSection>
          <ShowcaseSection title={"Phone"}>
            <strong>{formatPhoneNumber(data?.data?.phone ?? 0)}</strong>
          </ShowcaseSection>
          <ShowcaseSection title={"Registration Number"}>
            <strong>{data?.data?.registration_number}</strong>
          </ShowcaseSection>
          <ShowcaseSection title={"Tax id"}>
            <strong>{data?.data?.tax_id}</strong>
          </ShowcaseSection>
          <ShowcaseSection title={"Type"}>
            <strong>{data?.data?.type}</strong>
          </ShowcaseSection>
          <ShowcaseSection title={"Updated at"}>
            <strong>{unixToDate({ unix: data?.data?.updated_at ?? 0 })}</strong>
          </ShowcaseSection>
          <IsVisible condition={!!data.data.website}>
            <ShowcaseSection title={"Website"}>
              <Link
                href={data.data.website}
                className="font-bold"
                target="_blank"
              >
                {data.data.website}
              </Link>
            </ShowcaseSection>
          </IsVisible>
        </div>
      </ShowcaseSection>
    </>
  );
};

export default CompanyDetailsPage;