feat(division): impl division list+entry

feat(form): add accessibility improvements to form components

- Add labelFor prop to Label component for better form element association
- Enhance Combobox with ARIA attributes for better screen reader support
- Update form fields with proper IDs and label associations

feat(pagination): adjust button width based on page number length

Add dynamic button sizing for pagination items to accommodate different digit lengths (1-99, 100-999, 1000+). This improves visual consistency when displaying varying page numbers.

feat(modal): add reusable dialog component and refactor division form

- Create new Dialog.vue component with configurable size and outside click prevention
- Replace inline dialog implementation in division list with new Dialog component
- Fix formatting in entry-form.vue

feat(data-table): add click handling for action cells

Implement handleActionCellClick function to manage click events on action cells, triggering dropdown buttons when clicked outside interactive elements. Add cursor-pointer class and click handler to action cells for better UX.

refactor(custom-ui): centralize action event strings in types

Replace hardcoded action event strings with constants from types.ts to improve maintainability and reduce potential typos

feat(confirmation): add reusable confirmation modal components

- Implement base confirmation.vue component with customizable props
- Create record-specific record-confirmation.vue for data operations
- Add comprehensive README.md documentation for usage
- Integrate confirmation flow in division list component

refactor(components): move dialog component to base directory and update imports

The dialog component was moved from custom-ui/modal to base/modal to better reflect its shared usage across the application. All import paths referencing the old location have been updated accordingly.

refactor(select): reorganize imports and adjust conditional formatting

- Reorder imports in Select.vue for better organization
- Adjust logical operator formatting in SelectContent.vue for consistency

app/components/pub/custom-ui/form/combobox.vue

@@ -63,7 +63,12 @@ function onSelect(item: Item) {
     <PopoverTrigger as-child>
       <Button
       :id="props.id"
-      variant="outline" role="combobox" :aria-expanded="open" :class="cn(
+      variant="outline"
+      role="combobox"
+      :aria-expanded="open"
+      :aria-controls="`${props.id}-list`"
+      :aria-describedby="`${props.id}-search`"
+      :class="cn(
         'w-full justify-between border-black bg-white hover:bg-gray-50 text-sm font-normal',
         !modelValue && 'text-muted-foreground',
         props.class,
@@ -75,9 +80,14 @@ function onSelect(item: Item) {
     </PopoverTrigger>
     <PopoverContent class="w-full p-0">
       <Command>
-        <CommandInput class="h-9" :placeholder="searchPlaceholder || 'Cari...'" />
+        <CommandInput
+          :id="`${props.id}-search`"
+          class="h-9"
+          :placeholder="searchPlaceholder || 'Cari...'"
+          :aria-label="`Cari ${displayText}`"
+        />
         <CommandEmpty>{{ emptyMessage || 'Item tidak ditemukan.' }}</CommandEmpty>
-        <CommandList>
+        <CommandList :id="`${props.id}-list`" role="listbox">
           <CommandGroup>
             <CommandItem v-for="item in searchableItems" :key="item.value" :value="item.searchValue" @select="onSelect(item)">
               <div class="flex items-center justify-between w-full">

app/components/pub/custom-ui/form/label.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const props = withDefaults(
   defineProps<{
+    labelFor: string
     size?: 'default' | 'narrow' | 'wide'
     height?: 'default' | 'compact'
     position?: 'default' | 'dynamic'
@@ -45,7 +46,7 @@ const labelClass = computed(() => positionChildMap[props.position])
 
 <template>
   <div :class="wrapperClass">
-    <label :class="labelClass">
+    <label :class="labelClass" :for="labelFor">
       <slot />
     </label>
   </div>