Get Chart of Account Types

src/views/apps/account/AccountFormDrawer.tsx

@@ -15,6 +15,7 @@ import { useForm, Controller } from 'react-hook-form'
 // Component Imports
 import CustomTextField from '@core/components/mui/TextField'
 import CustomAutocomplete from '@/@core/components/mui/Autocomplete'
+import { useChartOfAccountTypes } from '@/services/queries/chartOfAccountType'
 
 // Account Type
 export type AccountType = {
@@ -25,6 +26,16 @@ 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
@@ -40,8 +51,8 @@ type FormValidateType = {
   parentAccount?: string
 }
 
-// Categories available for accounts
-const accountCategories = [
+// Fallback categories (used when API data is not available)
+const fallbackAccountCategories = [
   'Kas & Bank',
   'Piutang',
   'Persediaan',
@@ -80,6 +91,25 @@ const AccountFormDrawer = (props: Props) => {
   // Determine if we're editing
   const isEdit = !!editingAccount
 
+  const { data: accountTypes, isLoading } = useChartOfAccountTypes()
+
+  // Process account types for the dropdown
+  const categoryOptions = accountTypes?.data.length
+    ? accountTypes.data
+        .filter(type => type.is_active) // Only show active types
+        .map(type => ({
+          id: type.id,
+          name: type.name,
+          code: type.code,
+          description: type.description
+        }))
+    : fallbackAccountCategories.map(category => ({
+        id: category.toLowerCase().replace(/\s+/g, '_'),
+        name: category,
+        code: category,
+        description: category
+      }))
+
   // Hooks
   const {
     control,
@@ -237,17 +267,29 @@ const AccountFormDrawer = (props: Props) => {
                 render={({ field: { onChange, value, ...field } }) => (
                   <CustomAutocomplete
                     {...field}
-                    options={accountCategories}
-                    value={value || null}
-                    onChange={(_, newValue) => onChange(newValue || '')}
+                    loading={isLoading}
+                    options={categoryOptions}
+                    value={categoryOptions.find(option => option.name === value) || null}
+                    onChange={(_, newValue) => onChange(newValue?.name || '')}
+                    getOptionLabel={option => option.name}
+                    renderOption={(props, option) => (
+                      <Box component='li' {...props}>
+                        <div>
+                          <Typography variant='body2'>
+                            {option.code} - {option.name}
+                          </Typography>
+                        </div>
+                      </Box>
+                    )}
                     renderInput={params => (
                       <CustomTextField
                         {...params}
-                        placeholder='Pilih kategori'
+                        placeholder={isLoading ? 'Loading categories...' : 'Pilih kategori'}
                         {...(errors.category && { error: true, helperText: 'Field ini wajib diisi.' })}
                       />
                     )}
-                    isOptionEqualToValue={(option, value) => option === value}
+                    isOptionEqualToValue={(option, value) => option.name === value.name}
+                    disabled={isLoading}
                   />
                 )}
               />