feat: Page Data Akun

apps/backoffice/src/app/accounts/page.tsx

@@ -54,20 +54,25 @@ export const Components: FC = (): ReactElement => {
       {/* Account Table Section */}
       <section className="flex flex-col gap-6 p-8 bg-white rounded-md">
         {/* Search and Filter */}
-        <div className="flex justify-between items-center">
+        <div className="flex justify-between items-center gap-8 mb-2">
-          <div className="relative w-full max-w-[400px]">
+          <div className="relative w-full">
             <Input
               placeholder="Cari berdasarkan nama lengkap, email"
               value={searchQuery}
               onChange={handleSearch}
-              className="pl-10"
+              className="pl-12 w-full max-h-full"
             />
-            <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400">
+            <div className="absolute left-3 top-1/2 transform -translate-y-1/2 text-[16px]">
               <SearchOutlined />
             </div>
           </div>
 
-          <Button variant="secondary" className="flex items-center gap-2">
+          <Button
+            variant="primary"
+            disabled
+            size="md"
+            className="flex items-center gap-3"
+          >
             <FilterOutlined />
             Filters
           </Button>

libs/ui/src/atoms/input/input.tsx

@@ -45,14 +45,14 @@ export const Input: FC<TInputProps> = ({
   };
 
   const mergedClassName = cn(
-    'px-[12px] py-[8px] text-neutral-800 placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree w-full',
+    'px-[12px] py-[8px] text-neutral-800 placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree min-w-70',
     sizeClasses[size].textSize,
     disabled && disabledClass,
     className
   );
 
   return (
-    <div className="relative inline-flex min-w-70 items-center">
+    <div className="relative flex items-center">
       <input
         className={mergedClassName}
         type={type === 'password' && showPassword ? 'text' : type}

libs/ui/src/molecules/pagination/pagination.tsx

@@ -45,7 +45,7 @@ export const Pagination: FC<PaginationProps> = ({
   };
 
   return (
-    <div className="flex items-center justify-center mt-4 gap-[40px]">
+    <div className="flex items-center justify-center gap-[40px]">
       <button
         onClick={() => currentPage > 1 && onPageChange(currentPage - 1)}
         disabled={currentPage === 1}