feature: project and org identity pagination, search and sort

frontend/src/components/v2/Input/Input.tsx

@@ -11,6 +11,7 @@ type Props = {
   isDisabled?: boolean;
   isReadOnly?: boolean;
   autoCapitalization?: boolean;
+  containerClassName?: string;
 };
 
 const inputVariants = cva(
@@ -71,6 +72,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
   (
     {
       className,
+      containerClassName,
       isRounded = true,
       isFullWidth = true,
       isDisabled,
@@ -94,7 +96,15 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
     };
 
     return (
-      <div className={inputParentContainerVariants({ isRounded, isError, isFullWidth, variant })}>
+      <div
+        className={inputParentContainerVariants({
+          isRounded,
+          isError,
+          isFullWidth,
+          variant,
+          className: containerClassName
+        })}
+      >
         {leftIcon && <span className="absolute left-0 ml-3 text-sm">{leftIcon}</span>}
         <input
           {...props}

frontend/src/components/v2/Pagination/Pagination.tsx

@@ -50,7 +50,7 @@ export const Pagination = ({
     >
       <div className="mr-6 flex items-center space-x-2">
         <div className="text-xs">
-          {(page - 1) * perPage} - {Math.min((page - 1) * perPage + perPage, count)} of {count}
+          {(page - 1) * perPage + 1} - {Math.min((page - 1) * perPage + perPage, count)} of {count}
         </div>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>