feat(companies): implement companies page with data table

This commit introduces a new "Companies" page to the dashboard, providing a comprehensive view of company data in a sortable and paginated table.

Key changes include:
- A new page at `/companies` to display the data table.
- A new API route `/api/companies` that serves mock company data.
- A `CompaniesTable` component built with `react-table` featuring sorting, pagination, and search functionality.
- Reusable `TablePagination` and `TableActions` components to support the table.
- The `moment` library has been added as a dependency to format dates within the table.
- A new `CrossIcon` has been added for UI controls.
- The `InputGroup` component is enhanced with an `autoComplete` prop.
- A link to the new "Companies" page has been added to the sidebar navigation.

src/components/ui/IsVisible.tsx

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+
+interface IProps {
+  condition: boolean;
+  children: ReactNode;
+}
+
+const IsVisible = ({ condition, children }: IProps) => {
+  if(condition) {
+    return children;
+  }
+  return null;
+};
+
+export default IsVisible;

src/components/ui/modal.tsx

@@ -0,0 +1,77 @@
+import { CrossIcon } from "@/assets/icons";
+import { useState, useEffect, ReactNode } from "react";
+import { createPortal } from "react-dom";
+
+interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm?: () => void;
+  children: ReactNode;
+}
+
+const Modal: React.FC<ModalProps> = ({
+  isOpen,
+  onClose,
+  children,
+  onConfirm,
+}) => {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+    } else {
+      document.body.style.overflow = "unset";
+    }
+
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen]);
+
+  if (!mounted || !isOpen) return null;
+
+  const modalContent = (
+    <div
+      className="fixed inset-0 z-999999 flex items-center justify-center bg-dark/50 dark:bg-black/50"
+      onClick={onClose}
+    >
+      <div
+        className="max-h-[90vh] min-w-75 max-w-[90vw] overflow-auto rounded-lg bg-white p-5 shadow-4 dark:bg-dark-2"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <button
+          onClick={onClose}
+          className="float-right mb-2.5 cursor-pointer border-none bg-transparent p-0 text-2xl text-dark-5 hover:text-primary dark:text-gray-5 dark:hover:text-primary"
+        >
+          <CrossIcon />
+        </button>
+        <div className="clear-both">{children}</div>
+        <div className="flex gap-5">
+          <button
+            type="submit"
+            className="mt-6 flex w-fit justify-center rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90"
+            onClick={onConfirm}
+          >
+            Confirm
+          </button>
+          <button
+            type="button"
+            className="mt-6 flex w-fit justify-center rounded-lg bg-error p-[13px] font-medium text-white hover:bg-opacity-90"
+            onClick={onClose}
+          >
+            Close
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+
+  return createPortal(modalContent, document.body);
+};
+
+export default Modal;

src/components/ui/table.tsx

@@ -46,12 +46,13 @@ export function TableFooter({
   );
 }
 
-export function TableRow({
-  className,
-  ...props
-}: React.HTMLAttributes<HTMLTableRowElement>) {
+export const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => {
   return (
     <tr
+      ref={ref}
       className={cn(
         "border-b transition-colors hover:bg-neutral-100/50 data-[state=selected]:bg-neutral-100 dark:border-dark-3 dark:hover:bg-dark-2 dark:data-[state=selected]:bg-neutral-800",
         className,
@@ -59,7 +60,8 @@ export function TableRow({
       {...props}
     />
   );
-}
+});
+TableRow.displayName = "TableRow";
 
 export function TableHead({
   className,