diff --git a/src/layouts/AdminLayout.vue b/src/layouts/AdminLayout.vue
index 89cef95..2733699 100644
--- a/src/layouts/AdminLayout.vue
+++ b/src/layouts/AdminLayout.vue
@@ -94,6 +94,14 @@ onMounted(() => {
                     to="admin.units-measure.index"
                 />
             </Section>
+            <Section name="Comercial">
+                <Link
+                    icon="bookmarks"
+                    name="Clasificaciones Comerciales" 
+                    to="admin.comercial-classifications.index"
+                />
+            </Section>
+                     
             <Section name="Capacitaciones">
                 <DropDown
                     icon="grid_view"
diff --git a/src/pages/ComercialClassifications/Create.vue b/src/pages/ComercialClassifications/Create.vue
new file mode 100644
index 0000000..16c8c5c
--- /dev/null
+++ b/src/pages/ComercialClassifications/Create.vue
@@ -0,0 +1,89 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useRouter, useRoute, RouterLink } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { apiTo, transl, viewTo } from './Module';
+
+import IconButton      from '@Holos/Button/Icon.vue'
+import PageHeader      from '@Holos/PageHeader.vue';
+import GoogleIcon      from '@Shared/GoogleIcon.vue';
+import Form            from './Form.vue'
+
+/** Definidores */
+const router = useRouter();
+const route = useRoute();
+
+/** Propiedades */
+const form = useForm({
+    code: '',
+    name: '',
+    description: '',
+    parent_id: null
+});
+
+const parentInfo = ref(null);
+
+/** Métodos */
+function submit() {
+    form.transform(data => ({
+        ...data,
+        parent_id: data.parent_id // Usar el parent_id del formulario
+    })).post(apiTo('store'), {
+        onSuccess: () => {
+            Notify.success(Lang('register.create.onSuccess'))
+            router.push(viewTo({ name: 'index' }));
+        }
+    })
+}
+
+/** Ciclos */
+onMounted(() => {
+    // Verificar si se están pasando parámetros para crear subcategoría
+    if (route.query.parent_id) {
+        parentInfo.value = {
+            id: parseInt(route.query.parent_id),
+            name: route.query.parent_name,
+            code: route.query.parent_code
+        };
+        // Pre-llenar el parent_id en el formulario
+        form.parent_id = parseInt(route.query.parent_id);
+    }
+})
+</script>
+
+<template>
+    <PageHeader
+        :title="parentInfo ? `${transl('create.title')} - Subcategoría` : transl('create.title')"
+    >
+        <RouterLink :to="viewTo({ name: 'index' })">
+            <IconButton
+                class="text-white"
+                icon="arrow_back"
+                :title="$t('return')"
+                filled
+            />
+        </RouterLink>
+    </PageHeader>
+    
+    <!-- Mostrar información del padre si se está creando una subcategoría -->
+    <div v-if="parentInfo" class="mb-4 p-4 bg-blue-50 dark:bg-blue-900 rounded-lg border border-blue-200 dark:border-blue-700">
+        <div class="flex items-center">
+            <GoogleIcon class="text-blue-600 text-xl mr-2" name="account_tree" />
+            <div>
+                <p class="text-sm font-medium text-blue-800 dark:text-blue-200">
+                    Creando subcategoría para:
+                </p>
+                <p class="text-lg font-semibold text-blue-900 dark:text-blue-100">
+                    <code class="bg-blue-100 dark:bg-blue-800 px-2 py-1 rounded text-sm mr-2">{{ parentInfo.code }}</code>
+                    {{ parentInfo.name }}
+                </p>
+            </div>
+        </div>
+    </div>
+    
+    <Form
+        action="create"
+        :form="form"
+        @submit="submit"
+    />
+</template>
\ No newline at end of file
diff --git a/src/pages/ComercialClassifications/Edit.vue b/src/pages/ComercialClassifications/Edit.vue
new file mode 100644
index 0000000..4527d2c
--- /dev/null
+++ b/src/pages/ComercialClassifications/Edit.vue
@@ -0,0 +1,139 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { RouterLink, useRoute, useRouter } from 'vue-router';
+import { api, useForm } from '@Services/Api';
+import { viewTo, apiTo, transl } from './Module';
+
+import IconButton      from '@Holos/Button/Icon.vue'
+import PageHeader      from '@Holos/PageHeader.vue';
+import GoogleIcon      from '@Shared/GoogleIcon.vue';
+import Form            from './Form.vue'
+
+/** Definiciones */
+const vroute = useRoute();
+const router = useRouter();
+
+/** Propiedades */
+const form = useForm({
+    id: null,
+    code: '',
+    name: '',
+    description: '',
+});
+
+const parentOptions = ref([]);
+
+/** Métodos */
+function submit() {
+    form.transform(data => ({
+        ...data,
+    })).put(apiTo('update', { comercial_classification: form.id }), {
+        onSuccess: () => {
+            Notify.success(Lang('register.edit.onSuccess'))
+            router.push(viewTo({ name: 'index' }));
+        },
+    })
+}
+
+/** Función para obtener clasificaciones padre (excluyendo la actual y sus hijos) */
+function loadParentOptions() {
+    api.get(apiTo('index'), {
+        onSuccess: (r) => {
+            // Función para excluir la clasificación actual y sus descendientes
+            const excludeCurrentAndChildren = (items, excludeId) => {
+                return items.filter(item => {
+                    if (item.id === excludeId) return false;
+                    if (hasDescendant(item, excludeId)) return false;
+                    return true;
+                }).map(item => ({
+                    ...item,
+                    children: excludeCurrentAndChildren(item.children || [], excludeId)
+                }));
+            };
+
+            // Función para verificar si un item tiene como descendiente la clasificación actual
+            const hasDescendant = (item, targetId) => {
+                if (!item.children) return false;
+                return item.children.some(child => 
+                    child.id === targetId || hasDescendant(child, targetId)
+                );
+            };
+
+            // Aplanar la estructura jerárquica para el selector
+            const flattenOptions = (items, level = 0) => {
+                let options = [];
+                items.forEach(item => {
+                    options.push({
+                        ...item,
+                        name: '  '.repeat(level) + item.name, // Indentación visual
+                        level
+                    });
+                    if (item.children && item.children.length > 0) {
+                        options = options.concat(flattenOptions(item.children, level + 1));
+                    }
+                });
+                return options;
+            };
+
+            const dataSource = r.data?.comercial_classifications?.data || r.comercial_classifications || [];
+            const filteredData = excludeCurrentAndChildren(dataSource, form.id);
+            parentOptions.value = flattenOptions(filteredData);
+        }
+    });
+}
+
+onMounted(() => {
+    api.get(apiTo('show', { comercial_classification: vroute.params.id }), {
+        onSuccess: (r) => {
+            const classification = r.data || r.comercial_classification || r;
+            form.fill({
+                id: classification.id,
+                code: classification.code,
+                name: classification.name,
+                description: classification.description,
+                is_active: classification.is_active,
+                parent: classification.parent || null
+            });
+            
+            // Cargar opciones padre después de obtener los datos actuales
+            loadParentOptions();
+        }
+    });
+})
+</script>
+
+<template>
+    <PageHeader :title="`${transl('edit.title')}${form.parent ? ' - Subcategoría' : ''}`">
+        <RouterLink :to="viewTo({ name: 'index' })">
+            <IconButton
+                class="text-white"
+                icon="arrow_back"
+                :title="$t('return')"
+                filled
+            />
+        </RouterLink>
+    </PageHeader>
+    
+    <!-- Mostrar información del padre si es una subcategoría -->
+    <div v-if="form.parent" class="mb-4 p-4 bg-yellow-50 dark:bg-yellow-900 rounded-lg border border-yellow-200 dark:border-yellow-700">
+        <div class="flex items-center">
+            <GoogleIcon class="text-yellow-600 text-xl mr-2" name="account_tree" />
+            <div>
+                <p class="text-sm font-medium text-yellow-800 dark:text-yellow-200">
+                    Editando subcategoría de:
+                </p>
+                <p class="text-lg font-semibold text-yellow-900 dark:text-yellow-100">
+                    <code class="bg-yellow-100 dark:bg-yellow-800 px-2 py-1 rounded text-sm mr-2">{{ form.parent.code }}</code>
+                    {{ form.parent.name }}
+                </p>
+            </div>
+        </div>
+    </div>
+    
+    <Form
+        action="update"
+        :form="form"
+        :parent-options="parentOptions"
+        @submit="submit"
+    />
+</template>
\ No newline at end of file
diff --git a/src/pages/ComercialClassifications/Form.vue b/src/pages/ComercialClassifications/Form.vue
new file mode 100644
index 0000000..bf02116
--- /dev/null
+++ b/src/pages/ComercialClassifications/Form.vue
@@ -0,0 +1,68 @@
+<script setup>
+import { transl } from './Module';
+
+import PrimaryButton from '@Holos/Button/Primary.vue';
+import Input         from '@Holos/Form/Input.vue';
+import Selectable    from '@Holos/Form/Selectable.vue';
+import Checkbox      from '@Holos/Checkbox.vue';
+
+/** Eventos */
+const emit = defineEmits([
+    'submit'
+])
+
+/** Propiedades */
+defineProps({
+    action: {
+        default: 'create',
+        type: String
+    },
+    form: Object,
+    parentOptions: {
+        type: Array,
+        default: () => []
+    }
+})
+
+/** Métodos */
+function submit() {
+    emit('submit')
+}
+</script>
+
+<template>
+    <div class="w-full pb-2">
+        <p class="text-justify text-sm" v-text="transl(`${action}.description`)" />
+    </div>
+    <div class="w-full">
+        <form @submit.prevent="submit" class="grid gap-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            <Input
+                v-model="form.code"
+                id="code"
+                :onError="form.errors.code"
+                autofocus
+                required
+            />
+            <Input
+                v-model="form.name"
+                id="name"
+                :onError="form.errors.name"
+                required
+            />
+            <Input
+                v-model="form.description"
+                id="description"
+                :onError="form.errors.description"
+                class="md:col-span-2"
+            />
+            <slot />
+            <div class="col-span-1 md:col-span-2 lg:col-span-3 xl:col-span-4 flex flex-col items-center justify-end space-y-4 mt-4">
+                <PrimaryButton
+                    v-text="$t(action)"
+                    :class="{ 'opacity-25': form.processing }"
+                    :disabled="form.processing"
+                />
+            </div>
+        </form>
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/pages/ComercialClassifications/Index.vue b/src/pages/ComercialClassifications/Index.vue
new file mode 100644
index 0000000..459b9ba
--- /dev/null
+++ b/src/pages/ComercialClassifications/Index.vue
@@ -0,0 +1,204 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { useRouter, RouterLink } from 'vue-router';
+import { useSearcher } from '@Services/Api';
+import { hasPermission } from '@Plugins/RolePermission';
+import { can, apiTo, viewTo, transl } from './Module'
+
+import IconButton from '@Holos/Button/Icon.vue'
+import DestroyView from '@Holos/Modal/Template/Destroy.vue';
+import SearcherHead from '@Holos/Searcher.vue';
+import Table from '@Holos/Table.vue';
+import ShowView from './Modals/Show.vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Button from '@Holos/Button/Button.vue';
+
+/** Propiedades */
+const models = ref([]);
+const router = useRouter();
+
+/** Referencias */
+const showModal = ref(null);
+const destroyModal = ref(null);
+
+/** Métodos */
+const searcher = useSearcher({
+    url: apiTo('index'),
+    onSuccess: (r) => {
+        console.log('Datos recibidos:', r);
+        // La API retorna los datos en r.data.comercial_classifications.data
+        const classificationsData = r.data?.comercial_classifications?.data || r.comercial_classifications || [];
+        models.value = classificationsData;
+    },
+    onError: () => {
+        models.value = [];
+    }
+});
+
+/** Función para renderizar estructura jerárquica */
+const renderHierarchicalRows = (items, level = 0) => {
+    const rows = [];
+    items.forEach(item => {
+        rows.push({ ...item, level });
+        if (item.children && item.children.length > 0) {
+            rows.push(...renderHierarchicalRows(item.children, level + 1));
+        }
+    });
+    return rows;
+};
+
+/** Función para crear subcategoría */
+const createSubcategory = (parentCategory) => {
+    // Redirigir a la vista de creación con el parent_id en query params
+    router.push(viewTo({ 
+        name: 'create', 
+        query: { 
+            parent_id: parentCategory.id,
+            parent_name: parentCategory.name,
+            parent_code: parentCategory.code
+        } 
+    }));
+};
+
+/** Función para eliminar con información contextual */
+const deleteItem = (item) => {
+    // Agregar información contextual al modal
+    const itemWithContext = {
+        ...item,
+        contextInfo: item.parent ? `Subcategoría de: ${item.parent.code} - ${item.parent.name}` : 'Categoría principal'
+    };
+    destroyModal.value.open(itemWithContext);
+};
+
+/** Función para mostrar detalles */
+const showItem = (item) => {
+    showModal.value.open(item);
+};
+
+/** Ciclos */
+onMounted(() => {
+    searcher.search();
+});
+</script>
+
+<template>
+    <div class="space-y-6">
+        <div class="flex items-center justify-between">
+            <div>
+                <h1 className="text-3xl font-bold text-foreground">Clasificaciones Comerciales</h1>
+                <p className="text-muted-foreground">
+                    Gestión de categorías y subcategorías de productos
+                </p>
+            </div>
+            <RouterLink :to="viewTo({ name: 'create' })">
+                <Button color="info">Nueva Clasificación</Button>
+            </RouterLink>
+        </div>
+        <!-- <SearcherHead :title="transl('name')" @search="(x) => searcher.search(x)">
+            <RouterLink :to="viewTo({ name: 'create' })">
+               
+                <IconButton class="text-white" icon="add" :title="$t('crud.create')" filled />
+            </RouterLink>
+            <IconButton icon="refresh" :title="$t('refresh')" @click="searcher.search()" />
+        </SearcherHead> -->
+        <div class="pt-2 w-full">
+            <Table :items="models" :processing="searcher.processing"
+                @send-pagination="(page) => searcher.pagination(page)">
+                <template #head>
+                    <th v-text="$t('code')" />
+                    <th v-text="$t('name')" />
+                    <th v-text="$t('description')" />
+                    <th v-text="$t('status')" class="w-20 text-center" />
+                    <th v-text="$t('actions')" class="w-32 text-center" />
+                </template>
+                <template #body="{ items }">
+                    <tr v-for="model in items" :key="model.id" class="table-row"
+                        :class="{ 'bg-gray-50 dark:bg-gray-800': model.level > 0 }">
+                        <td class="table-cell">
+                            <div :style="{ paddingLeft: `${model.level * 24}px` }" class="flex items-center">
+                                <span v-if="model.level > 0" class="text-gray-400 mr-2">└─</span>
+                                <code class="font-mono text-sm" 
+                                      :class="model.level > 0 ? 'text-blue-600 dark:text-blue-400' : 'text-gray-900 dark:text-gray-100'">
+                                    {{ model.code }}
+                                </code>
+                                <span v-if="model.level > 0" class="ml-2 text-xs bg-blue-100 text-blue-800 dark:bg-blue-800 dark:text-blue-100 px-2 py-1 rounded-full">
+                                    Subcategoría
+                                </span>
+                            </div>
+                        </td>
+                        <td class="table-cell">
+                            <span class="font-semibold">{{ model.name }}</span>
+                        </td>
+                        <td class="table-cell">
+                            <span class="text-sm text-gray-600 dark:text-gray-400">
+                                {{ model.description || '-' }}
+                            </span>
+                        </td>
+                        <td class="table-cell text-center">
+                            <span 
+                                class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium"
+                                :class="model.is_active 
+                                    ? 'bg-green-100 text-green-800 dark:bg-green-800 dark:text-green-100' 
+                                    : 'bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100'"
+                            >
+                                {{ model.is_active ? $t('active') : $t('inactive') }}
+                            </span>
+                        </td>
+                        <td class="table-cell">
+                            <div class="table-actions">
+                                <IconButton
+                                    icon="add_circle"
+                                    :title="$t('Agregar subcategoría')"
+                                    @click="createSubcategory(model)"
+                                    outline
+                                />
+                                <IconButton
+                                    icon="visibility"
+                                    :title="$t('crud.show')"
+                                    @click="showItem(model)"
+                                    outline
+                                />
+                                <RouterLink
+                                    class="h-fit"
+                                    :to="viewTo({ name: 'edit', params: { id: model.id } })"
+                                >
+                                    <IconButton
+                                        icon="edit"
+                                        :title="$t('crud.edit')"
+                                        outline
+                                    />
+                                </RouterLink>
+                                <IconButton
+                                    icon="delete"
+                                    :title="$t('crud.destroy')"
+                                    @click="deleteItem(model)"
+                                    outline
+                                />
+                            </div>
+                        </td>
+                    </tr>
+                </template>
+                <template #empty>
+                    <td class="table-cell">
+                        <div class="flex items-center text-sm">
+                            <GoogleIcon name="folder_open" class="mr-2 text-gray-400" />
+                            <p class="font-semibold">
+                                {{ $t('registers.empty') }}
+                            </p>
+                        </div>
+                    </td>
+                    <td class="table-cell">-</td>
+                    <td class="table-cell">-</td>
+                    <td class="table-cell">-</td>
+                    <td class="table-cell">-</td>
+                    <td class="table-cell">-</td>
+                </template>
+            </Table>
+        </div>
+
+        <ShowView ref="showModal" @reload="searcher.search()" />
+
+        <DestroyView ref="destroyModal" subtitle="name" :to="(id) => apiTo('destroy', { comercial_classification: id })"
+            @update="searcher.search()" />
+    </div>
+</template>
\ No newline at end of file
diff --git a/src/pages/ComercialClassifications/Modals/Show.vue b/src/pages/ComercialClassifications/Modals/Show.vue
new file mode 100644
index 0000000..1d84775
--- /dev/null
+++ b/src/pages/ComercialClassifications/Modals/Show.vue
@@ -0,0 +1,362 @@
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { getDateTime } from '@Controllers/DateController';
+import { viewTo, apiTo } from '../Module';
+import ComercialClassificationsService from '../services/ComercialClassificationsService';
+import Notify from '@Plugins/Notify';
+
+import Header     from '@Holos/Modal/Elements/Header.vue';
+import ShowModal  from '@Holos/Modal/Show.vue';
+import GoogleIcon from '@Shared/GoogleIcon.vue';
+import Button     from '@Holos/Button/Button.vue';
+import IconButton from '@Holos/Button/Icon.vue';
+import DestroyView from '@Holos/Modal/Template/Destroy.vue';
+
+/** Eventos */
+const emit = defineEmits([
+    'close', 
+    'reload'
+]);
+
+/** Servicios */
+const classificationsService = new ComercialClassificationsService();
+const router = useRouter();
+
+/** Propiedades */
+const model    = ref(null);
+const loading  = ref(false);
+const deletingChildId = ref(null); // Para mostrar loading específico en subcategoría que se está eliminando
+
+/** Referencias */
+const modalRef = ref(null);
+const destroyModal = ref(null);
+
+/** Métodos */
+function close() {
+    model.value = null;
+    emit('close');
+}
+
+/** Función para actualizar el estado de la clasificación */
+async function toggleStatus(item) {
+    if (loading.value) return;
+    
+    const newStatus = !item.is_active;
+    
+    try {
+        loading.value = true;
+        
+        // Usar el servicio para actualizar el estado
+        await classificationsService.updateStatus(item.id, newStatus);
+        
+        // Actualizar el modelo local
+        item.is_active = newStatus;
+        
+        // Notificación de éxito
+        const statusText = newStatus ? 'activada' : 'desactivada';
+        Notify.success(
+            `Clasificación "${item.code}" ${statusText} exitosamente`,
+            'Estado actualizado'
+        );
+        
+        // Emitir evento para recargar la lista principal si es necesario
+        emit('reload');
+        
+    } catch (error) {
+        console.error('Error actualizando estado:', error);
+        
+        // Manejo específico de errores según la estructura de tu API
+        let errorMessage = 'Error al actualizar el estado de la clasificación';
+        let errorTitle = 'Error';
+        
+        if (error?.response?.data) {
+            const errorData = error.response.data;
+            
+            // Caso 1: Error con estructura específica de tu API
+            if (errorData.status === 'error') {
+                if (errorData.errors) {
+                    // Errores de validación - extraer el primer error
+                    const firstField = Object.keys(errorData.errors)[0];
+                    const firstError = errorData.errors[firstField];
+                    errorMessage = Array.isArray(firstError) ? firstError[0] : firstError;
+                    errorTitle = 'Error de validación';
+                } else if (errorData.message) {
+                    // Mensaje general del error
+                    errorMessage = errorData.message;
+                    errorTitle = 'Error del servidor';
+                }
+            }
+            // Caso 2: Otros formatos de error
+            else if (errorData.message) {
+                errorMessage = errorData.message;
+            }
+        } else if (error?.message) {
+            // Error genérico de la petición (red, timeout, etc.)
+            errorMessage = `Error de conexión: ${error.message}`;
+            errorTitle = 'Error de red';
+        }
+        
+        // Notificación de error
+        Notify.error(errorMessage, errorTitle);
+    } finally {
+        loading.value = false;
+    }
+}
+
+/** Función para editar subcategoría */
+function editSubcategory(child) {
+    // Navegar a la vista de edición de la subcategoría
+    const editUrl = viewTo({ name: 'edit', params: { id: child.id } });
+    router.push(editUrl);
+    // Cerrar el modal actual
+    close();
+}
+
+/** Función para eliminar subcategoría */
+function deleteSubcategory(child) {
+    // Marcar cuál subcategoría se va a eliminar para mostrar loading
+    deletingChildId.value = child.id;
+    destroyModal.value.open(child);
+}
+
+/** Función para recargar después de eliminar - Mejorada */
+async function onSubcategoryDeleted() {
+    try {
+        // Mostrar que se está procesando
+        const deletedId = deletingChildId.value;
+        
+        // Recargar los datos de la clasificación actual para obtener subcategorías actualizadas
+        const response = await classificationsService.getById(model.value.id);
+        
+        // Actualizar el modelo local con los datos frescos
+        if (response && response.comercial_classification) {
+            model.value = response.comercial_classification;
+            
+            // Notificación de éxito con información específica
+            const deletedCount = model.value.children ? model.value.children.length : 0;
+            Notify.success(
+                `Subcategoría eliminada exitosamente. ${deletedCount} subcategorías restantes.`, 
+                'Eliminación exitosa'
+            );
+        }
+        
+        // Emitir evento para recargar la lista principal
+        emit('reload');
+        
+    } catch (error) {
+        console.error('Error recargando datos después de eliminar:', error);
+        
+        // En caso de error, cerrar modal y recargar lista principal
+        close();
+        emit('reload');
+        
+        // Notificación de error
+        Notify.error(
+            'Error al actualizar la vista. Los datos se han actualizado correctamente.',
+            'Error de actualización'
+        );
+    } finally {
+        // Limpiar el estado de eliminación
+        deletingChildId.value = null;
+    }
+}
+
+/** Función para cancelar eliminación */
+function onDeleteCancelled() {
+    // Limpiar el estado de eliminación si se cancela
+    deletingChildId.value = null;
+}
+
+/** Función para renderizar la jerarquía de hijos */
+const renderChildren = (children, level = 1) => {
+    if (!children || children.length === 0) return null;
+    return children.map(child => ({
+        ...child,
+        level,
+        children: renderChildren(child.children, level + 1)
+    }));
+};
+
+/** Exposiciones */
+defineExpose({
+    open: (data) => {
+        model.value = data;
+        modalRef.value.open();
+    }
+});
+</script>
+
+<template>
+    <ShowModal
+        ref="modalRef"
+        @close="close"
+    >
+        <div v-if="model">
+            <Header
+                :title="model.code"
+                :subtitle="model.name"
+            >
+                <div class="flex w-full flex-col">
+                    <div class="flex w-full justify-center items-center">
+                        <div class="w-24 h-24 rounded-full bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center">
+                            <GoogleIcon 
+                                class="text-white text-3xl"
+                                name="category"
+                            />
+                        </div>
+                    </div>
+                </div>
+            </Header>
+            <div class="flex w-full p-4 space-y-6">
+                <!-- Información básica -->
+                <div class="w-full">
+                    <div class="flex items-start">
+                        <GoogleIcon 
+                            class="text-xl text-success mt-1"
+                            name="info"
+                        />
+                        <div class="pl-3 w-full">
+                            <p class="font-bold text-lg leading-none pb-3">
+                                {{ $t('details') }}
+                            </p>
+                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                                <div>
+                                    <p>
+                                        <b>{{ $t('code') }}: </b>
+                                        <code class="font-mono text-sm bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded">
+                                            {{ model.code }}
+                                        </code>
+                                    </p>
+                                    <p class="mt-2">
+                                        <b>{{ $t('name') }}: </b>
+                                        {{ model.name }}
+                                    </p>
+                                    <p class="mt-2" v-if="model.description">
+                                        <b>{{ $t('description') }}: </b>
+                                        {{ model.description }}
+                                    </p>
+                                </div>
+                                <div>
+                                    <p>
+                                        <b>{{ $t('status') }}: </b>
+                                        <Button
+                                            :variant="'smooth'"
+                                            :color="model.is_active ? 'success' : 'danger'"
+                                            :size="'sm'"
+                                            :loading="loading"
+                                            @click="toggleStatus(model)"
+                                        >
+                                            {{ model.is_active ? $t('Activo') : $t('Inactivo') }}
+                                        </Button>
+                                    </p>
+                                    <p class="mt-2">
+                                        <b>{{ $t('created_at') }}: </b>
+                                        {{ getDateTime(model.created_at) }}
+                                    </p>
+                                    <p class="mt-2">
+                                        <b>{{ $t('updated_at') }}: </b>
+                                        {{ getDateTime(model.updated_at) }}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <!-- Clasificaciones hijas -->
+                    <div v-if="model.children && model.children.length > 0" class="mt-6 pt-6 border-t border-gray-200 dark:border-gray-700">
+                        <div class="flex items-start">
+                            <GoogleIcon 
+                                class="text-xl text-primary mt-1"
+                                name="account_tree"
+                            />
+                            <div class="pl-3 w-full">
+                                <p class="font-bold text-lg leading-none pb-3">
+                                    {{ $t('Subclasificaciones') }}
+                                </p>
+                                <div class="space-y-2">
+                                    <div 
+                                        v-for="child in model.children" 
+                                        :key="child.id"
+                                        class="flex items-center p-3 bg-gray-50 dark:bg-gray-800 rounded-lg transition-all duration-300"
+                                        :class="{
+                                            'opacity-50 pointer-events-none': deletingChildId === child.id,
+                                            'bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700': deletingChildId === child.id
+                                        }"
+                                    >
+                                        <div class="flex-1">
+                                            <div class="flex items-center">
+                                                <code class="font-mono text-sm bg-white dark:bg-gray-700 px-2 py-1 rounded mr-3">
+                                                    {{ child.code }}
+                                                </code>
+                                                <span class="font-semibold">{{ child.name }}</span>
+                                                <!-- Indicador de eliminación -->
+                                                <span v-if="deletingChildId === child.id" class="ml-2 text-xs bg-red-100 text-red-800 dark:bg-red-800 dark:text-red-100 px-2 py-1 rounded-full animate-pulse">
+                                                    Eliminando...
+                                                </span>
+                                            </div>
+                                            <p v-if="child.description" class="text-sm text-gray-600 dark:text-gray-400 mt-1">
+                                                {{ child.description }}
+                                            </p>
+                                        </div>
+                                        
+                                        <!-- Botones de acción para subcategorías -->
+                                        <div class="flex items-center space-x-2 ml-4">
+                                            <!-- Botón de estado -->
+                                            <Button
+                                                :variant="'smooth'"
+                                                :color="child.is_active ? 'success' : 'danger'"
+                                                :size="'sm'"
+                                                :loading="loading && deletingChildId !== child.id"
+                                                :disabled="deletingChildId === child.id"
+                                                @click="toggleStatus(child)"
+                                            >
+                                                {{ child.is_active ? $t('Activo') : $t('Inactivo') }}
+                                            </Button>
+                                            
+                                            <!-- Botón editar -->
+                                            <IconButton
+                                                icon="edit"
+                                                :title="$t('crud.edit')"
+                                                :disabled="deletingChildId === child.id"
+                                                @click="editSubcategory(child)"
+                                                outline
+                                                size="sm"
+                                            />
+                                            
+                                            <!-- Botón eliminar -->
+                                            <IconButton
+                                                icon="delete"
+                                                :title="$t('crud.destroy')"
+                                                :loading="deletingChildId === child.id"
+                                                :disabled="deletingChildId && deletingChildId !== child.id"
+                                                @click="deleteSubcategory(child)"
+                                                outline
+                                                size="sm"
+                                            />
+                                        </div>
+                                    </div>
+                                    
+                                    <!-- Mensaje cuando no hay subcategorías (después de eliminar todas) -->
+                                    <div v-if="!model.children || model.children.length === 0" 
+                                         class="text-center p-4 text-gray-500 dark:text-gray-400">
+                                        <GoogleIcon class="text-2xl mb-2" name="folder_open" />
+                                        <p class="text-sm">No hay subcategorías</p>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Modal de eliminación para subcategorías -->
+        <DestroyView
+            ref="destroyModal"
+            subtitle="name"
+            :to="(id) => apiTo('destroy', { comercial_classification: id })"
+            @update="onSubcategoryDeleted"
+        />
+    </ShowModal>
+</template>
\ No newline at end of file
diff --git a/src/pages/ComercialClassifications/Module.js b/src/pages/ComercialClassifications/Module.js
new file mode 100644
index 0000000..24b9ccf
--- /dev/null
+++ b/src/pages/ComercialClassifications/Module.js
@@ -0,0 +1,23 @@
+import { lang } from '@Lang/i18n';
+import { hasPermission } from '@Plugins/RolePermission.js';
+
+// Ruta API
+const apiTo = (name, params = {}) => route(`comercial-classifications.${name}`, params)
+
+// Ruta visual
+const viewTo = ({ name = '', params = {}, query = {} }) => view({ 
+    name: `admin.comercial-classifications.${name}`, params, query 
+})
+    
+// Obtener traducción del componente
+const transl = (str) => lang(`admin.comercial_classifications.${str}`)
+
+// Control de permisos
+const can = (permission) => hasPermission(`admin.comercial-classifications.${permission}`)
+
+export {
+    can,
+    viewTo,
+    apiTo,
+    transl
+}
\ No newline at end of file
diff --git a/src/pages/ComercialClassifications/interfaces/comercial-classifications.interfaces.js b/src/pages/ComercialClassifications/interfaces/comercial-classifications.interfaces.js
new file mode 100644
index 0000000..8a68475
--- /dev/null
+++ b/src/pages/ComercialClassifications/interfaces/comercial-classifications.interfaces.js
@@ -0,0 +1,62 @@
+/**
+ * Interfaces para Comercial Classifications
+ * 
+ * @author Sistema
+ * @version 1.0.0
+ */
+
+/**
+ * @typedef {Object} ComercialClassification
+ * @property {number} id - ID de la clasificación
+ * @property {string} code - Código de la clasificación
+ * @property {string} name - Nombre de la clasificación
+ * @property {string|null} description - Descripción de la clasificación
+ * @property {boolean} is_active - Estado activo/inactivo
+ * @property {number|null} parent_id - ID del padre
+ * @property {string} created_at - Fecha de creación
+ * @property {string} updated_at - Fecha de actualización
+ * @property {string|null} deleted_at - Fecha de eliminación
+ * @property {ComercialClassification|null} parent - Clasificación padre
+ * @property {ComercialClassification[]} children - Clasificaciones hijas
+ */
+
+/**
+ * @typedef {Object} ComercialClassificationResponse
+ * @property {string} status - Estado de la respuesta
+ * @property {Object} data - Datos de la respuesta
+ * @property {string} data.message - Mensaje de la respuesta
+ * @property {ComercialClassification} data.comercial_classification - Clasificación comercial
+ */
+
+/**
+ * @typedef {Object} ComercialClassificationsListResponse
+ * @property {string} status - Estado de la respuesta
+ * @property {Object} data - Datos de la respuesta
+ * @property {ComercialClassification[]} data.comercial_classifications - Lista de clasificaciones
+ */
+
+/**
+ * @typedef {Object} CreateComercialClassificationData
+ * @property {string} code - Código de la clasificación
+ * @property {string} name - Nombre de la clasificación
+ * @property {string|null} description - Descripción de la clasificación
+ * @property {boolean} is_active - Estado activo/inactivo
+ * @property {number|null} parent_id - ID del padre
+ */
+
+/**
+ * @typedef {Object} UpdateComercialClassificationData
+ * @property {string} [code] - Código de la clasificación
+ * @property {string} [name] - Nombre de la clasificación
+ * @property {string|null} [description] - Descripción de la clasificación
+ * @property {boolean} [is_active] - Estado activo/inactivo
+ * @property {number|null} [parent_id] - ID del padre
+ */
+
+export {
+    ComercialClassification,
+    ComercialClassificationResponse,
+    ComercialClassificationsListResponse,
+    CreateComercialClassificationData,
+    UpdateComercialClassificationData
+};
diff --git a/src/pages/ComercialClassifications/services/ComercialClassificationsService.js b/src/pages/ComercialClassifications/services/ComercialClassificationsService.js
new file mode 100644
index 0000000..129895b
--- /dev/null
+++ b/src/pages/ComercialClassifications/services/ComercialClassificationsService.js
@@ -0,0 +1,180 @@
+/**
+ * Servicio para Comercial Classifications
+ * 
+ * @author Sistema
+ * @version 2.0.0
+ */
+
+import { api, apiURL } from '@Services/Api';
+
+export default class ComercialClassificationsService {
+  
+  /**
+   * Obtener todas las clasificaciones comerciales
+   * @param {Object} params - Parámetros de la consulta
+   * @returns {Promise} Promesa con la respuesta
+   */
+  async getAll(params = {}) {
+    return new Promise((resolve, reject) => {
+      api.get(apiURL('comercial-classifications'), {
+        params,
+        onSuccess: (response) => resolve(response),
+        onError: (error) => reject(error)
+      });
+    });
+  }
+
+  /**
+   * Obtener una clasificación comercial por ID
+   * @param {number} id - ID de la clasificación
+   * @returns {Promise} Promesa con la respuesta
+   */
+  async getById(id) {
+    return new Promise((resolve, reject) => {
+      api.get(apiURL(`comercial-classifications/${id}`), {
+        onSuccess: (response) => resolve(response),
+        onError: (error) => reject(error)
+      });
+    });
+  }
+
+  /**
+   * Crear una nueva clasificación comercial
+   * @param {Object} data - Datos de la clasificación
+   * @param {string} data.code - Código de la clasificación
+   * @param {string} data.name - Nombre de la clasificación
+   * @param {string} data.description - Descripción de la clasificación
+   * @param {number|null} data.parent_id - ID de la clasificación padre (null para raíz)
+   * @param {boolean} data.is_active - Estado activo/inactivo
+   * @returns {Promise} Promesa con la respuesta
+   */
+  async create(data) {
+    return new Promise((resolve, reject) => {
+      api.post(apiURL('comercial-classifications'), {
+        data,
+        onSuccess: (response) => resolve(response),
+        onError: (error) => reject(error)
+      });
+    });
+  }
+
+  /**
+   * Actualizar una clasificación comercial existente
+   * @param {number} id - ID de la clasificación
+   * @param {Object} data - Datos actualizados
+   * @returns {Promise} Promesa con la respuesta
+   */
+  async update(id, data) {
+    return new Promise((resolve, reject) => {
+      api.put(apiURL(`comercial-classifications/${id}`), {
+        data,
+        onSuccess: (response) => resolve(response),
+        onError: (error) => reject(error)
+      });
+    });
+  }
+
+  /**
+   * Eliminar una clasificación comercial
+   * @param {number} id - ID de la clasificación
+   * @returns {Promise} Promesa con la respuesta
+   */
+  async delete(id) {
+    return new Promise((resolve, reject) => {
+      api.delete(apiURL(`comercial-classifications/${id}`), {
+        onSuccess: (response) => resolve(response),
+        onError: (error) => reject(error)
+      });
+    });
+  }
+
+  /**
+   * Actualizar solo el estado de una clasificación comercial
+   * @param {number} id - ID de la clasificación
+   * @param {boolean} is_active - Nuevo estado
+   * @returns {Promise} Promesa con la respuesta
+   */
+  async updateStatus(id, is_active) {
+    return new Promise((resolve, reject) => {
+      api.put(apiURL(`comercial-classifications/${id}`), {
+        data: { is_active },
+        onSuccess: (response) => {
+          resolve(response);
+        },
+        onError: (error) => {
+          // Mejorar el manejo de errores
+          const enhancedError = {
+            ...error,
+            timestamp: new Date().toISOString(),
+            action: 'updateStatus',
+            id: id,
+            is_active: is_active
+          };
+          reject(enhancedError);
+        }
+      });
+    });
+  }
+
+  /**
+   * Obtener clasificaciones padre disponibles (para selects)
+   * @param {number|null} excludeId - ID a excluir de la lista (para evitar loops)
+   * @returns {Promise} Promesa con la respuesta
+   */
+  async getParentOptions(excludeId = null) {
+    return new Promise((resolve, reject) => {
+      api.get(apiURL('comercial-classifications'), {
+        params: { exclude_children_of: excludeId },
+        onSuccess: (response) => {
+          // Aplanar la estructura jerárquica para el selector
+          const flattenOptions = (items, level = 0) => {
+            let options = [];
+            items.forEach(item => {
+              if (excludeId && (item.id === excludeId || this.hasDescendant(item, excludeId))) {
+                return; // Excluir item actual y sus descendientes
+              }
+              
+              options.push({
+                ...item,
+                name: '  '.repeat(level) + item.name, // Indentación visual
+                level
+              });
+              
+              if (item.children && item.children.length > 0) {
+                options = options.concat(flattenOptions(item.children, level + 1));
+              }
+            });
+            return options;
+          };
+
+          const flatOptions = flattenOptions(response.comercial_classifications?.data || response.data || []);
+          resolve(flatOptions);
+        },
+        onError: (error) => reject(error)
+      });
+    });
+  }
+
+  /**
+   * Función auxiliar para verificar si un item tiene como descendiente un ID específico
+   * @param {Object} item - Item a verificar
+   * @param {number} targetId - ID objetivo
+   * @returns {boolean} True si es descendiente
+   */
+  hasDescendant(item, targetId) {
+    if (!item.children) return false;
+    return item.children.some(child => 
+      child.id === targetId || this.hasDescendant(child, targetId)
+    );
+  }
+
+  /**
+   * Alternar el estado de una clasificación
+   * @param {Object} item - Objeto con la clasificación
+   * @returns {Promise} Promesa con la respuesta
+   */
+  async toggleStatus(item) {
+    const newStatus = !item.is_active;
+    return this.updateStatus(item.id, newStatus);
+  }
+}
\ No newline at end of file
diff --git a/src/router/Index.js b/src/router/Index.js
index 57db59a..5802ee6 100644
--- a/src/router/Index.js
+++ b/src/router/Index.js
@@ -494,6 +494,40 @@ const router = createRouter({
                         }
                     ]
                 },
+                {
+                    path: 'comercial-classifications',
+                    name: 'admin.comercial-classifications',
+                    meta: {
+                        title: 'Clasificaciones Comerciales',
+                        icon: 'category',
+                    },
+                    redirect: '/admin/comercial-classifications',
+                    children: [
+                        {
+                            path: '',
+                            name: 'admin.comercial-classifications.index',
+                            component: () => import('@Pages/ComercialClassifications/Index.vue'),
+                        },
+                        {
+                            path: 'create',
+                            name: 'admin.comercial-classifications.create',
+                           component: () => import('@Pages/ComercialClassifications/Create.vue'),
+                            meta: {
+                                title: 'Crear',
+                                icon: 'add',
+                            },
+                        },
+                        {
+                            path: ':id/edit',
+                            name: 'admin.comercial-classifications.edit',
+                           component: () => import('@Pages/ComercialClassifications/Edit.vue'),
+                            meta: {
+                                title: 'Editar',
+                                icon: 'edit',
+                            },
+                        }
+                    ]
+                },
                 {
                     path: 'roles',
                     name: 'admin.roles',