Add: shared skeleton, dark toggle bg, fixed: multi select patching issue

src/app/admins/page.tsx

@@ -1,8 +1,7 @@
 import Breadcrumb from "@/components/Breadcrumbs/Breadcrumb";
 import AdminsTable from "@/components/Tables/admins";
-import { AdminsSkeleton } from "@/components/Tables/admins/Skeleton";
+
 import { Metadata } from "next";
-import { Suspense } from "react";
 
 export const metadata: Metadata = {
   title: "Admins Page",
@@ -15,9 +14,7 @@ const AdminsPage = () => {
   return (
     <>
       <Breadcrumb items={breadcrumbItems} />
-      <Suspense fallback={<AdminsSkeleton />}>
-        <AdminsTable />
-      </Suspense>
+      <AdminsTable />
     </>
   );
 };

src/components/FormElements/switch.tsx

@@ -50,14 +50,14 @@ export function Switch({
             "absolute left-1 top-1 flex size-6 items-center justify-center rounded-full bg-white shadow-switch-1 transition peer-checked:right-1 peer-checked:translate-x-full peer-checked:[&_.check-icon]:block peer-checked:[&_.x-icon]:hidden",
             {
               "-top-1 left-0 size-7 shadow-switch-2": backgroundSize === "sm",
-              "peer-checked:bg-primary peer-checked:dark:bg-white":
+              "peer-checked:bg-primary peer-checked:dark:bg-primary":
                 background !== "dark",
             },
           )}
         >
           {withIcon && (
             <>
-              <CheckIcon className="check-icon hidden fill-white dark:fill-dark" />
+              <CheckIcon className="check-icon hidden fill-white" />
               <XIcon className="x-icon" />
             </>
           )}

src/components/Tables/admins/Skeleton.tsx

@@ -1,41 +0,0 @@
-import { Skeleton } from "@/components/ui/skeleton";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-
-export function AdminsSkeleton() {
-  return (
-    <div className="rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
-      <h2 className="mb-5.5 text-body-2xlg font-bold text-dark dark:text-white">
-        Admins
-      </h2>
-
-      <Table>
-        <TableHeader>
-          <TableRow className="border-none uppercase [&>th]:text-center">
-            <TableHead className="!text-left">Full name</TableHead>
-            <TableHead>Email</TableHead>
-            <TableHead className="!text-right">Role</TableHead>
-            <TableHead>Username</TableHead>
-            <TableHead>Actions</TableHead>
-          </TableRow>
-        </TableHeader>
-
-        <TableBody>
-          {Array.from({ length: 5 }).map((_, i) => (
-            <TableRow key={i}>
-              <TableCell colSpan={100}>
-                <Skeleton className="h-8" />
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </div>
-  );
-}

src/components/Tables/admins/index.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
+import ConfirmationModal from "@/components/ui/ConfirmationModal";
 import {
   Table,
   TableBody,
@@ -8,11 +10,9 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { useAdminsPresenter } from "./useAdminsPresenter";
-import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
-import ConfirmationModal from "@/components/ui/ConfirmationModal";
-import { AdminsSkeleton } from "./Skeleton";
+import TableSkeleton from "@/components/ui/TableSkeleton";
 import Link from "next/link";
+import { useAdminsPresenter } from "./useAdminsPresenter";
 
 const AdminsTable = () => {
   const {
@@ -27,7 +27,6 @@ const AdminsTable = () => {
     pathName,
   } = useAdminsPresenter();
 
-  if (isPending) return <AdminsSkeleton />;
   return (
     <div className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
       <button className="mb-5 flex w-fit justify-center self-end rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90">
@@ -53,11 +52,14 @@ const AdminsTable = () => {
             </TableHead>
           </TableRow>
         </TableHeader>
-
+        {isPending && <TableSkeleton column={5} />}
         <TableBody>
           {allUsers.map((item) => {
             return (
-              <TableRow key={item.id} className="odd:bg-gray-2 dark:odd:bg-gray-7">
+              <TableRow
+                key={item.id}
+                className="odd:bg-gray-2 dark:odd:bg-gray-7"
+              >
                 <TableCell className="text-start" colSpan={100}>
                   {item.full_name}
                 </TableCell>

src/components/Tables/companies/Skeleton.tsx

@@ -1,47 +0,0 @@
-"use client";
-import { Skeleton } from "@/components/ui/skeleton";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import { useCompanyListPresenter } from "./useCompanyListPresenter";
-export function CompaniesSkeleton() {
-  const { columns } = useCompanyListPresenter();
-  return (
-    <div className="rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
-      <h2 className="mb-5.5 text-body-2xlg font-bold text-dark dark:text-white">
-        Companies
-      </h2>
-
-      <Table>
-        <TableHeader>
-          <TableRow className="border-none uppercase [&>th]:text-center">
-            {columns.map((column) => (
-              <TableHead
-                colSpan={100}
-                className="text-start font-extrabold"
-                key={column}
-              >
-                {column}
-              </TableHead>
-            ))}
-          </TableRow>
-        </TableHeader>
-
-        <TableBody>
-          {Array.from({ length: 5 }).map((_, i) => (
-            <TableRow key={i}>
-              <TableCell colSpan={100}>
-                <Skeleton className="h-8" />
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </div>
-  );
-}

src/components/Tables/companies/company-categories/index.tsx

@@ -48,7 +48,7 @@ const CompanyCategoriesTable = () => {
             <TableHead colSpan={100}>Actions</TableHead>
           </TableRow>
         </TableHeader>
-        {isLoading && <TableSkeleton column={5} />}
+        {isLoading && <TableSkeleton column={6} />}
         <TableBody>
           <IsVisible condition={!categories}>
             <TableRow>
@@ -69,7 +69,7 @@ const CompanyCategoriesTable = () => {
                   </TableCell>
                   <TableCell colSpan={100}>
                     <IsVisible condition={isToggling}>
-                      <Skeleton></Skeleton>
+                      <Skeleton className="h-8 bg-neutral-400 dark:bg-dark-4" />
                     </IsVisible>
                     <IsVisible condition={!isToggling}>
                       <Switch

src/components/Tables/companies/index.tsx

@@ -1,7 +1,6 @@
 "use client";
-import Link from "next/link";
-import { CompaniesSkeleton } from "./Skeleton";
-import { useCompanyListPresenter } from "./useCompanyListPresenter";
+import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
+import ConfirmationModal from "@/components/ui/ConfirmationModal";
 import {
   Table,
   TableBody,
@@ -10,9 +9,10 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
-import ConfirmationModal from "@/components/ui/ConfirmationModal";
+import TableSkeleton from "@/components/ui/TableSkeleton";
 import { formatPhoneNumber } from "@/utils/shared";
+import Link from "next/link";
+import { useCompanyListPresenter } from "./useCompanyListPresenter";
 
 interface IProps {}
 
@@ -29,7 +29,6 @@ const CompaniesTable = ({}: IProps) => {
     onConfirmDelete,
     modalConfig,
   } = useCompanyListPresenter();
-  if (isPending) return <CompaniesSkeleton />;
   return (
     <div className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
       <button className="mb-5 flex w-fit justify-center self-end rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90">
@@ -49,7 +48,7 @@ const CompaniesTable = ({}: IProps) => {
             ))}
           </TableRow>
         </TableHeader>
-
+        {isPending && <TableSkeleton column={columns.length} />}
         <TableBody>
           {allCompanies.map((company, index) =>
             !company ? (

src/components/Tables/customers/Skeleton.tsx

@@ -1,43 +0,0 @@
-import { Skeleton } from "@/components/ui/skeleton";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-
-export function CustomersSkeleton() {
-  return (
-    <div className="rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
-      <h2 className="mb-5.5 text-body-2xlg font-bold text-dark dark:text-white">
-        Tenders
-      </h2>
-
-      <Table>
-        <TableHeader>
-          <TableRow className="border-none uppercase [&>th]:text-center">
-            <TableHead className="uppercase">full name</TableHead>
-            <TableHead className="uppercase">email</TableHead>
-            <TableHead className="uppercase">created at</TableHead>
-            <TableHead className="uppercase">type</TableHead>
-            <TableHead className="uppercase">status</TableHead>
-            <TableHead className="uppercase">company</TableHead>
-            <TableHead className="uppercase">actions</TableHead>
-          </TableRow>
-        </TableHeader>
-
-        <TableBody>
-          {Array.from({ length: 5 }).map((_, i) => (
-            <TableRow key={i}>
-              <TableCell colSpan={100}>
-                <Skeleton className="h-8" />
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </div>
-  );
-}

src/components/Tables/customers/index.tsx

@@ -1,7 +1,6 @@
 "use client";
-import Link from "next/link";
-import { CustomersSkeleton } from "./Skeleton";
-import useCustomerListPresenter from "./useCustomerListPresenter";
+import { PencilSquareIcon, TrashIcon, UserIcon } from "@/assets/icons";
+import ConfirmationModal from "@/components/ui/ConfirmationModal";
 import {
   Table,
   TableBody,
@@ -10,16 +9,15 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { PencilSquareIcon, TrashIcon, UserIcon } from "@/assets/icons";
-import ConfirmationModal from "@/components/ui/ConfirmationModal";
+import Link from "next/link";
+import useCustomerListPresenter from "./useCustomerListPresenter";
 
-import AssignToCompanyModalContent from "./AssignToCompanyModalContent";
 import Modal from "@/components/ui/modal";
-import { TAssignCustomerToCompanyCredentials } from "@/lib/api";
-import { toast } from "react-toastify";
 import Status from "@/components/ui/Status";
+import TableSkeleton from "@/components/ui/TableSkeleton";
 import { unixToDate } from "@/utils/shared";
-import { custom } from "zod";
+import { toast } from "react-toastify";
+import AssignToCompanyModalContent from "./AssignToCompanyModalContent";
 
 const CustomersTable = () => {
   const {
@@ -40,7 +38,6 @@ const CustomersTable = () => {
     isAssignCompanyModalOpen,
     setIsAssignCompanyModalOpen,
   } = useCustomerListPresenter();
-  if (isPending) return <CustomersSkeleton />;
   return (
     <div className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
       <button className="mb-5 flex w-fit justify-center self-end rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90">
@@ -60,6 +57,7 @@ const CustomersTable = () => {
             ))}
           </TableRow>
         </TableHeader>
+        {isPending && <TableSkeleton column={columns.length} />}
         <TableBody>
           {allCustomers.map((customer) => (
             <TableRow key={customer.id}>
@@ -69,11 +67,11 @@ const CustomersTable = () => {
                 {unixToDate(customer.created_at)}
               </TableCell>
 
-              <TableCell colSpan={100} className="uppercase">{customer.type}</TableCell>
+              <TableCell colSpan={100} className="uppercase">
+                {customer.type}
+              </TableCell>
               <TableCell colSpan={100}>
-                <Status status={customer.status}>
                   <Status status={customer.status}>{customer.status}</Status>
-                </Status>
               </TableCell>
               <TableCell colSpan={100}>
                 {customer.companies?.length ? (

src/components/Tables/tenders/Skeleton.tsx

@@ -1,35 +0,0 @@
-import { Skeleton } from "@/components/ui/skeleton";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-
-export function TendersSkeleton() {
-  return (
-    <TableBody>
-      {Array.from({ length: 20 }).map((_, i) => (
-        <TableRow key={i}>
-          <TableCell colSpan={100}>
-            <Skeleton className="h-8" />
-          </TableCell>
-          <TableCell colSpan={100}>
-            <Skeleton className="h-8" />
-          </TableCell>
-          <TableCell colSpan={100}>
-            <Skeleton className="h-8" />
-          </TableCell>
-          <TableCell colSpan={100}>
-            <Skeleton className="h-8" />
-          </TableCell>
-          <TableCell colSpan={100}>
-            <Skeleton className="h-8" />
-          </TableCell>
-        </TableRow>
-      ))}
-    </TableBody>
-  );
-}

src/components/forms/companies/useCreateCompanyPresenter.ts

@@ -7,6 +7,7 @@ import {
 import { ICreateCompanyCredentials } from "@/lib/api";
 import { useIsMutating } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
+import { useEffect } from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 
 interface IProps {
@@ -28,15 +29,17 @@ const useCreateCompanyPresenter = ({ defaultValues, editMode, id }: IProps) => {
     mode: "onChange",
     defaultValues: {
       ...defaultValues,
-      tags: {
-        ...defaultValues?.tags,
-        categories: defaultValues?.tags.categories.map((item) => ({
-          value: item.id,
-          text: item.name,
-        })),
-      },
     },
   });
+
+  useEffect(() => {
+    if (defaultValues) {
+      const categories = defaultValues?.tags.categories.map(
+        (item: any) => item.id,
+      );
+      setValue("tags.categories", categories);
+    }
+  }, [defaultValues]);
   const router = useRouter();
   const { data: companyCategories } = useCompanyCategoriesQuery();
   const { mutate: createCompany, isPending: isCreating } = useCreateCompany();

src/components/ui/Status.tsx

@@ -31,7 +31,7 @@ const Status = ({ status, children }: IProps) => {
   return (
     <span
       className={cn(
-        "flex items-center justify-center rounded-2xl px-3 py-1.5 text-center text-sm font-medium capitalize",
+        "flex items-center justify-center rounded-2xl px-3 py-2 text-center text-sm font-medium capitalize",
         {
           "bg-green text-white": greens.includes(status),
           "bg-orange-light text-white": oranges.includes(status),

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

@@ -16,7 +16,7 @@ export const customersService = {
       const response = await api.get(API_ENDPOINTS.CUSTOMERS.READ_ALL, {
         params,
       });
-      return CustomerListResponseSchema.parse(response.data);
+      return response.data
     } catch (error) {
       console.error("ERROR caught in Customers Services Read all:", error);
       throw error;

src/lib/api/services/user-services.ts

@@ -1,7 +1,6 @@
 import api from "../axios";
 import { API_ENDPOINTS } from "../endpoints";
 import {
-  AdminListResponseSchema,
   ApiResponse,
   IAdminListResponse,
   ICreateAdminCredentials,
@@ -14,7 +13,7 @@ import {
 
 export const userService = {
   login: async (
-    credentials: ILoginCredentials
+    credentials: ILoginCredentials,
   ): Promise<ApiResponse<ILoginResponse>> => {
     try {
       const response = await api.post(API_ENDPOINTS.USER.LOGIN, credentials);
@@ -35,11 +34,11 @@ export const userService = {
     }
   },
   adminsList: async (
-    params?: Record<string, any>
+    params?: Record<string, any>,
   ): Promise<ApiResponse<IAdminListResponse>> => {
     try {
       const response = await api.get(API_ENDPOINTS.USER.ADMINS, { params });
-      return AdminListResponseSchema.parse(response.data);
+      return response.data;
     } catch (error) {
       console.error("ERROR caught in User Service User List", error);
       throw error;
@@ -79,7 +78,7 @@ export const userService = {
     }
   },
   deleteAdmin: async (
-    id: string
+    id: string,
   ): Promise<ApiResponse<{ message: string }>> => {
     try {
       return await api.delete(`${API_ENDPOINTS.USER.ADMINS}/${id}`);