src/services/queries/chartOfAccount.ts

@@ -0,0 +1,36 @@
+import { useQuery } from '@tanstack/react-query'
+import { api } from '../api'
+import { ChartOfAccounts } from '@/types/services/chartOfAccount'
+
+interface ChartOfAccountQueryParams {
+  page?: number
+  limit?: number
+  search?: string
+}
+
+export function useChartOfAccount(params: ChartOfAccountQueryParams = {}) {
+  const { page = 1, limit = 10, search = '', ...filters } = params
+
+  return useQuery<ChartOfAccounts>({
+    queryKey: ['chart-of-accounts', { page, limit, search, ...filters }],
+    queryFn: async () => {
+      const queryParams = new URLSearchParams()
+
+      queryParams.append('page', page.toString())
+      queryParams.append('limit', limit.toString())
+
+      if (search) {
+        queryParams.append('search', search)
+      }
+
+      Object.entries(filters).forEach(([key, value]) => {
+        if (value !== undefined && value !== null && value !== '') {
+          queryParams.append(key, value.toString())
+        }
+      })
+
+      const res = await api.get(`/chart-of-accounts?${queryParams.toString()}`)
+      return res.data.data
+    }
+  })
+}

src/types/services/chartOfAccount.ts

@@ -14,3 +14,26 @@ export interface ChartOfAccountTypes {
   page: number
   total: number
 }
+
+export interface ChartOfAccount {
+  id: string
+  organization_id: string
+  outlet_id: string
+  chart_of_account_type_id: string
+  parent_id: string
+  name: string
+  code: string
+  description: string
+  is_active: boolean
+  is_system: boolean
+  created_at: string
+  updated_at: string
+  chart_of_account_type: ChartOfAccountType
+}
+
+export interface ChartOfAccounts {
+  data: ChartOfAccount[]
+  limit: number
+  page: number
+  total: number
+}

src/views/apps/account/AccountFormDrawer.tsx

@@ -15,6 +15,7 @@ import { useForm, Controller } from 'react-hook-form'
 import CustomTextField from '@core/components/mui/TextField'
 import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
 import { useChartOfAccountTypes } from '@/services/queries/chartOfAccountType'
+import { useChartOfAccount } from '@/services/queries/chartOfAccount'
 
 // Account Type
 export type AccountType = {
@@ -25,16 +26,6 @@ export type AccountType = {
   balance: string
 }
 
-export interface ChartOfAccountType {
-  id: string
-  name: string
-  code: string
-  description: string
-  is_active: boolean
-  created_at: string
-  updated_at: string
-}
-
 type Props = {
   open: boolean
   handleClose: () => void
@@ -50,19 +41,6 @@ type FormValidateType = {
   parentAccount?: string
 }
 
-// Parent accounts (dummy data for dropdown)
-const parentAccounts = [
-  { id: 1, code: '1-10001', name: 'Kas' },
-  { id: 2, code: '1-10002', name: 'Bank BCA' },
-  { id: 3, code: '1-10003', name: 'Bank Mandiri' },
-  { id: 4, code: '1-10101', name: 'Piutang Usaha' },
-  { id: 5, code: '1-10201', name: 'Persediaan Barang' },
-  { id: 6, code: '2-20001', name: 'Hutang Usaha' },
-  { id: 7, code: '3-30001', name: 'Modal Pemilik' },
-  { id: 8, code: '4-40001', name: 'Penjualan' },
-  { id: 9, code: '5-50001', name: 'Beban Gaji' }
-]
-
 // Vars
 const initialData = {
   name: '',
@@ -80,6 +58,11 @@ const AccountFormDrawer = (props: Props) => {
 
   const { data: accountTypes, isLoading } = useChartOfAccountTypes()
 
+  const { data: accounts, isLoading: isLoadingAccounts } = useChartOfAccount({
+    page: 1,
+    limit: 100
+  })
+
   // Process account types for the dropdown
   const categoryOptions = accountTypes?.data.length
     ? accountTypes.data
@@ -92,6 +75,19 @@ const AccountFormDrawer = (props: Props) => {
         }))
     : []
 
+  // Process accounts for parent account dropdown
+  const parentAccountOptions = accounts?.data.length
+    ? accounts.data
+        .filter(account => account.is_active) // Only show active accounts
+        .filter(account => (editingAccount ? account.id !== editingAccount.id.toString() : true)) // Exclude current account when editing
+        .map(account => ({
+          id: account.id,
+          code: account.code,
+          name: account.name,
+          description: account.description
+        }))
+    : []
+
   // Hooks
   const {
     control,
@@ -288,14 +284,36 @@ const AccountFormDrawer = (props: Props) => {
                 render={({ field: { onChange, value, ...field } }) => (
                   <CustomAutocomplete
                     {...field}
-                    options={parentAccounts}
-                    value={parentAccounts.find(account => `${account.code} ${account.name}` === value) || null}
+                    loading={isLoadingAccounts}
+                    options={parentAccountOptions}
+                    value={parentAccountOptions.find(account => `${account.code} ${account.name}` === value) || null}
                     onChange={(_, newValue) => onChange(newValue ? `${newValue.code} ${newValue.name}` : '')}
-                    getOptionLabel={option => `${option.code} ${option.name}`}
-                    renderInput={params => <CustomTextField {...params} placeholder='Pilih akun' />}
+                    getOptionLabel={option => `${option.code} - ${option.name}`}
+                    renderOption={(props, option) => (
+                      <Box component='li' {...props}>
+                        <div>
+                          <Typography variant='body2'>
+                            {option.code} - {option.name}
+                          </Typography>
+                          {option.description && (
+                            <Typography variant='caption' color='textSecondary'>
+                              {option.description}
+                            </Typography>
+                          )}
+                        </div>
+                      </Box>
+                    )}
+                    renderInput={params => (
+                      <CustomTextField
+                        {...params}
+                        placeholder={isLoadingAccounts ? 'Loading accounts...' : 'Pilih akun parent'}
+                      />
+                    )}
                     isOptionEqualToValue={(option, value) =>
                       `${option.code} ${option.name}` === `${value.code} ${value.name}`
                     }
+                    disabled={isLoadingAccounts}
+                    noOptionsText={isLoadingAccounts ? 'Loading...' : 'Tidak ada akun tersedia'}
                   />
                 )}
               />