fix: Prevent edit page crash and correct date formatting

On the company edit page, added optional chaining to the `defaultValues` prop. This prevents a potential runtime error if the company data is undefined when the page loads.

Additionally, this commit corrects the `unixToDate` utility function. The previous logic could incorrectly include 'false' in the format string when time was not required. It now uses a ternary operator to conditionally add the time format, ensuring correct output.

Minor code formatting adjustments are also included.

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

@@ -0,0 +1,116 @@
+"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;

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

@@ -18,7 +18,7 @@ const EditCompanyPage = ({ params }: { params: Promise<{ id: string }> }) => {
   return (
     <>
       <Breadcrumb items={breadcrumbItems} />
-      <CreateCompany editMode defaultValues={data.data} id={id} />
+      <CreateCompany editMode defaultValues={data?.data} id={id} />
     </>
   );
 };

src/components/forms/notifications/CreateNotification.tsx

@@ -100,7 +100,7 @@ const CreateNotificationForm = () => {
             {...register("link", {
               pattern: {
                 value: REGEX.URL,
-                message: FormErrorMessages.invalidPattern,
+                message: FormErrorMessages.invalidPattern, 
               },
             })}
             name="link"

src/lib/api/services/companies-service.ts

@@ -128,7 +128,7 @@ export const companyCategoriesService = {
       throw error;
     }
   },
-   updateCategories: async ({
+  updateCategories: async ({
     id,
     credentials,
   }: {

src/utils/shared.ts

@@ -7,7 +7,7 @@ export const unixToDate = ({
   unix: number;
   hasTime?: boolean;
 }) => {
-  return moment.unix(unix).format(`YYYY/MM/DD ${hasTime && "HH:MM"}`);
+  return moment.unix(unix).format(`YYYY/MM/DD ${hasTime ? "HH:MM" : ""}`);
 };
 export const msToDate = (ms: number) => {
   return moment.default(ms).format("YYYY/MM/DD");