refactor(logo): Update main logo SVG to use currentColor

The main logo SVG has been replaced with an updated version.

The previous logo had hardcoded fill colors, making it difficult to adapt to different color schemes, such as light and dark modes.

The new SVG uses `fill="currentColor"`, which allows its color to be controlled via the parent element's CSS `color` property. This makes the logo easily themeable and more flexible for use throughout the application.

src/components/Tables/companies/index.tsx

@@ -40,7 +40,7 @@ const CompaniesTable = ({}: IProps) => {
             {columns.map((columns) => (
               <TableHead
                 colSpan={100}
-                className="text-start font-extrabold"
+                className="text-start font-extrabold uppercase"
                 key={columns}
               >
                 {columns}

src/components/Tables/companies/useCompanyListPresenter.ts

@@ -32,7 +32,7 @@ export const useCompanyListPresenter = () => {
     "country",
     "state",
     "city",
-    "postal_code",
+    "postal code",
     "language",
     "currency",
     "employee count",

src/components/Tables/customers/index.tsx

@@ -17,6 +17,7 @@ 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";
 const CustomersTable = () => {
   const {
     isPending,
@@ -63,7 +64,9 @@ const CustomersTable = () => {
               <TableCell colSpan={100}>{customer.email}</TableCell>
               <TableCell colSpan={100}>{customer.created_at}</TableCell>
               <TableCell colSpan={100}>{customer.type}</TableCell>
-              <TableCell colSpan={100}>{customer.status}</TableCell>
+              <TableCell colSpan={100}>
+                <Status status={customer.status}>{customer.status}</Status>
+              </TableCell>
               <TableCell colSpan={100}>
                 {customer.companies?.length ? (
                   customer.companies.map((c) => (

src/components/Tables/tenders/Skeleton.tsx

@@ -10,33 +10,20 @@ import {
 
 export function TendersSkeleton() {
   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>Full name</TableHead>
-            <TableHead>Email</TableHead>
-            <TableHead>Type</TableHead>
-            <TableHead>Status</TableHead>
-            <TableHead>Company</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>
+    <TableBody>
+      {Array.from({ length: 5 }).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>
+        </TableRow>
+      ))}
+    </TableBody>
   );
 }

src/components/Tables/tenders/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import useTenderListPresenter from "./useTenderListPresenter";
-
+import Status from "@/components/ui/Status";
 import {
   Table,
   TableBody,
@@ -30,6 +30,9 @@ const TendersTable = () => {
       <Table>
         <TableHeader>
           <TableRow className="border-none uppercase [&>th]:text-start">
+            <TableHead colSpan={100} className="text-start font-extrabold">
+              Row
+            </TableHead>
             <TableHead colSpan={100} className="text-start font-extrabold">
               Title
             </TableHead>
@@ -42,6 +45,7 @@ const TendersTable = () => {
           </TableRow>
         </TableHeader>
 
+        {isPending && <TendersSkeleton />}
         <TableBody>
           {allTenders.map((item, index) =>
             !item ? (
@@ -52,6 +56,9 @@ const TendersTable = () => {
                 key={item.id}
                 className="odd:bg-gray-2 dark:odd:bg-gray-7"
               >
+                <TableCell className="text-start" colSpan={100}>
+                  {index + 1}
+                </TableCell>
                 <TableCell className="text-start" colSpan={100}>
                   {item.title}
                 </TableCell>
@@ -59,21 +66,14 @@ const TendersTable = () => {
                   {item.country_code}
                 </TableCell>
                 <TableCell className={cn(`text capitalize`)} colSpan={100}>
-                  <span
-                    className={cn(
-                      "rounded-2xl p-2",
-                      getStatusColor(item.status),
-                    )}
-                  >
-                    {item.status}
-                  </span>
+                  <Status status={item.status}>{item.status}</Status>
                 </TableCell>
               </TableRow>
             ),
           )}
         </TableBody>
+        {isFetchingNextPage && <TendersSkeleton />}
       </Table>
-      {isFetchingNextPage && <TendersSkeleton />}
       {(data?.pages.length ?? 0) >= 5 && hasNextPage && (
         <button
           onClick={() => fetchNextPage()}