From 39391e5522223214ad1c16645ec3e7df8ac6bc29 Mon Sep 17 00:00:00 2001
From: Hafid Nur <hafidnurazis@gmail.com>
Date: Thu, 27 Mar 2025 16:55:54 +0700
Subject: [PATCH] feat: Page Data Akun

---
 apps/backoffice/src/app/accounts/page.tsx       | 15 ++++++++++-----
 libs/ui/src/atoms/input/input.tsx               |  4 ++--
 libs/ui/src/molecules/pagination/pagination.tsx |  2 +-
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/apps/backoffice/src/app/accounts/page.tsx b/apps/backoffice/src/app/accounts/page.tsx
index 93f7611..8cfb2ba 100644
--- a/apps/backoffice/src/app/accounts/page.tsx
+++ b/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="relative w-full max-w-[400px]">
+        <div className="flex justify-between items-center gap-8 mb-2">
+          <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>
diff --git a/libs/ui/src/atoms/input/input.tsx b/libs/ui/src/atoms/input/input.tsx
index 69006b8..a20ed2d 100644
--- a/libs/ui/src/atoms/input/input.tsx
+++ b/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}
diff --git a/libs/ui/src/molecules/pagination/pagination.tsx b/libs/ui/src/molecules/pagination/pagination.tsx
index 949cb9a..ffff09a 100644
--- a/libs/ui/src/molecules/pagination/pagination.tsx
+++ b/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}