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 handleAccountAction = () => {}
+  const handleCloseDrawer = () => {
+    setAddAccountOpen(false)
+    setEditingAccount(null)
+  }
 
   // Filter and search logic
   const filteredAccounts = useMemo(() => {
@@ -267,60 +275,80 @@ const CashBankList = () => {
   }, [searchQuery])
 
   return (
-    <Box sx={{ p: 3 }}>
-      {/* Search and Filters */}
-      <Box sx={{ mb: 4 }}>
-        <Grid container spacing={2} sx={{ mb: 3 }}>
-          <Grid size={{ xs: 12, md: 6 }}>
+    <>
+      <Box sx={{ p: 3 }}>
+        {/* Search and Filters */}
+        <Box sx={{ mb: 4 }}>
+          <div className='flex justify-between items-center'>
             <DebouncedInput
               value={searchQuery}
               onChange={value => setSearchQuery(value as string)}
               placeholder='Cari '
               className='max-sm:is-full'
             />
-          </Grid>
+            <Box>
+              <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 */}
+        <Grid container spacing={3}>
+          {filteredAccounts.length > 0 ? (
+            filteredAccounts.map(account => (
+              <Grid key={account.id} size={{ xs: 12, lg: 6, xl: 4 }}>
+                <CashBankCard
+                  title={account.title}
+                  accountNumber={account.accountNumber}
+                  balances={account.balances}
+                  chartData={account.chartData}
+                  categories={account.categories}
+                  chartColor={account.chartColor}
+                  currency={account.currency}
+                  showButton={account.accountType !== 'cash'}
+                  href={getLocalizedUrl(`/apps/cash-bank/${account.accountNumber}/detail`, locale as Locale)}
+                />
+              </Grid>
+            ))
+          ) : (
+            <Grid size={{ xs: 12 }}>
+              <Box
+                sx={{
+                  textAlign: 'center',
+                  py: 8,
+                  backgroundColor: 'grey.50',
+                  borderRadius: 2
+                }}
+              >
+                <Typography variant='h6' color='text.secondary' gutterBottom>
+                  Tidak ada akun yang ditemukan
+                </Typography>
+                <Typography variant='body2' color='text.secondary'>
+                  Coba ubah kata kunci pencarian atau filter yang digunakan
+                </Typography>
+              </Box>
+            </Grid>
+          )}
         </Grid>
       </Box>
-
-      {/* Account Cards */}
-      <Grid container spacing={3}>
-        {filteredAccounts.length > 0 ? (
-          filteredAccounts.map(account => (
-            <Grid key={account.id} size={{ xs: 12, lg: 6, xl: 4 }}>
-              <CashBankCard
-                title={account.title}
-                accountNumber={account.accountNumber}
-                balances={account.balances}
-                chartData={account.chartData}
-                categories={account.categories}
-                chartColor={account.chartColor}
-                currency={account.currency}
-                showButton={account.accountType !== 'cash'}
-                href={getLocalizedUrl(`/apps/cash-bank/${account.accountNumber}/detail`, locale as Locale)}
-              />
-            </Grid>
-          ))
-        ) : (
-          <Grid size={{ xs: 12 }}>
-            <Box
-              sx={{
-                textAlign: 'center',
-                py: 8,
-                backgroundColor: 'grey.50',
-                borderRadius: 2
-              }}
-            >
-              <Typography variant='h6' color='text.secondary' gutterBottom>
-                Tidak ada akun yang ditemukan
-              </Typography>
-              <Typography variant='body2' color='text.secondary'>
-                Coba ubah kata kunci pencarian atau filter yang digunakan
-              </Typography>
-            </Box>
-          </Grid>
-        )}
-      </Grid>
-    </Box>
+      <AccountFormDrawer
+        open={addAccountOpen}
+        handleClose={handleCloseDrawer}
+        accountData={data}
+        setData={setData}
+        editingAccount={editingAccount}
+      />
+    </>
   )
 }