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/base/data-table/data-table.vue

@@ -15,6 +15,21 @@ defineProps<{
 }>()
 
 const loader = inject('table_data_loader') as DataTableLoader
+
+function handleActionCellClick(event: Event, _cellRef: string) {
+  // Prevent event if clicked directly on the button/dropdown
+  const target = event.target as HTMLElement
+  if (target.closest('button') || target.closest('[role="button"]')) {
+    return
+  }
+
+  // Find the dropdown trigger button and click it
+  const cell = event.currentTarget as HTMLElement
+  const triggerButton = cell.querySelector('button[data-state]') || cell.querySelector('button')
+  if (triggerButton) {
+    (triggerButton as HTMLButtonElement).click()
+  }
+}
 </script>
 
 <template>
@@ -50,11 +65,18 @@ v-for="(h, idx) in header[0]" :key="`head-${idx}`" class="border"
     </TableBody>
     <TableBody v-else>
       <TableRow v-for="(row, rowIndex) in rows" :key="`row-${rowIndex}`">
-        <TableCell v-for="(key, cellIndex) in keys" :key="`cell-${rowIndex}-${cellIndex}`" class="border">
+        <TableCell
+          v-for="(key, cellIndex) in keys"
+          :key="`cell-${rowIndex}-${cellIndex}`"
+          class="border"
+          :class="{ 'cursor-pointer': key === 'action' && funcComponent[key] }"
+          @click="key === 'action' && funcComponent[key] ? handleActionCellClick($event, `cell-${rowIndex}-${cellIndex}`) : null"
+        >
           <!-- If funcComponent has a renderer -->
           <component
             :is="funcComponent[key]?.(row, rowIndex).component"
             v-if="funcComponent[key]"
+            :ref="key === 'action' ? `actionComponent-${rowIndex}-${cellIndex}` : undefined"
             :rec="row"
             :idx="rowIndex"
             v-bind="funcComponent[key]?.(row, rowIndex).props"