src/views/apps/account/AccountListTable.tsx

@@ -65,7 +65,7 @@ type AccountTypeWithAction = AccountType & {
 }
 
 // Dummy Account Data
-const accountsData: AccountType[] = [
+export const accountsData: AccountType[] = [
   {
     id: 1,
     code: '1-10001',

src/views/apps/cash-bank/CashBankList.tsx

@@ -16,6 +16,9 @@ import CustomTextField from '@/@core/components/mui/TextField'
 import { getLocalizedUrl } from '@/utils/i18n'
 import { Locale } from '@/configs/i18n'
 import { useParams } from 'next/navigation'
+import AccountFormDrawer, { AccountType } from '../account/AccountFormDrawer'
+import { accountsData } from '../account/AccountListTable'
+import { Button } from '@mui/material'
 
 // Types
 interface BankAccount {
@@ -250,10 +253,15 @@ const DebouncedInput = ({
 }
 const CashBankList = () => {
   const [searchQuery, setSearchQuery] = useState('')
+  const [editingAccount, setEditingAccount] = useState<AccountType | null>(null)
+  const [addAccountOpen, setAddAccountOpen] = useState(false)
+  const [data, setData] = useState<AccountType[]>(accountsData)
   const { lang: locale } = useParams()
 
-  // Handle button clicks
+  const handleCloseDrawer = () => {
-  const handleAccountAction = () => {}
+    setAddAccountOpen(false)
+    setEditingAccount(null)
+  }
 
   // Filter and search logic
   const filteredAccounts = useMemo(() => {
@@ -267,19 +275,31 @@ const CashBankList = () => {
   }, [searchQuery])
 
   return (
+    <>
       <Box sx={{ p: 3 }}>
         {/* Search and Filters */}
         <Box sx={{ mb: 4 }}>
-        <Grid container spacing={2} sx={{ mb: 3 }}>
+          <div className='flex justify-between items-center'>
-          <Grid size={{ xs: 12, md: 6 }}>
             <DebouncedInput
               value={searchQuery}
               onChange={value => setSearchQuery(value as string)}
               placeholder='Cari '
               className='max-sm:is-full'
             />
-          </Grid>
+            <Box>
-        </Grid>
+              <Button
+                variant='contained'
+                className='max-sm:is-full is-auto'
+                startIcon={<i className='tabler-plus' />}
+                onClick={() => {
+                  setEditingAccount(null)
+                  setAddAccountOpen(true)
+                }}
+              >
+                Tambah Akun
+              </Button>
+            </Box>
+          </div>
         </Box>
 
         {/* Account Cards */}
@@ -321,6 +341,14 @@ const CashBankList = () => {
           )}
         </Grid>
       </Box>
+      <AccountFormDrawer
+        open={addAccountOpen}
+        handleClose={handleCloseDrawer}
+        accountData={data}
+        setData={setData}
+        editingAccount={editingAccount}
+      />
+    </>
   )
 }