Ahora tienes un Mini-Framework sobre Laravel hecho a tu medida:

Tablas: admin.partials.dt_script

Formularios: <x-form.input>, <x-form.select>, etc.

Botones: ActionBtn::make()

Feedback: Alertas automáticas con Session.

Moneda: @money_usd / @money_bs.

Diseño: Componentes x-card, x-modal.

Con esto, programar un módulo nuevo es literalmente copiar, pegar y cambiar nombres. 🚀

Resumen de tu Librería de Componentes x-form:
Con esto, tienes cubierto el 99% de las necesidades de cualquier formulario en tu sistema:

<x-form.input /> (Texto, Números)

<x-form.select /> (Listas desplegables)

<x-form.textarea /> (Direcciones, notas)

<x-form.switch /> (Interruptores ON/OFF)

<x-form.checkbox /> (Casillas de verificación)

<x-form.file /> (Subida de archivos/fotos)

<x-form.date /> (Fechas)

<x-form.btn_save /> (Botonera de acción)

<x-modal /> (Ventanas emergentes)



{{-- controlador --}}

public function create()
{
    $categorias = \App\Models\Categoria::pluck('nombre', 'id'); // ['1' => 'Bebidas', '2' => 'Limpieza']
    $proveedores = \App\Models\Proveedor::pluck('nombre', 'id');
    
    return view('admin.productos.create', compact('categorias', 'proveedores'));
}


{{-- create.blade --}}

@extends('layouts.app')

@section('title', 'Nuevo Producto')

@section('content')
<section class="section">
    <div class="section-header">
        <h3 class="page__heading">Registro de Inventario</h3>
    </div>
    
    <div class="section-body">
        <form action="{{ route('productos.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="row">
                
                {{-- COLUMNA IZQUIERDA: DATOS PRINCIPALES --}}
                <div class="col-md-8">
                    <div class="card shadow-sm border-top-primary">
                        <div class="card-header bg-white">
                            <h5 class="text-primary m-0"><i class="fas fa-box mr-2"></i> Información General</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    {{-- Componente INPUT --}}
                                    <x-form.input name="codigo_barras" label="Código de Barras" placeholder="Escanear..." required="true" autofocus />
                                </div>
                                <div class="col-md-6">
                                    <x-form.input name="codigo_interno" label="Código Interno (SKU)" placeholder="Generado auto si vacío" />
                                </div>
                                <div class="col-12">
                                    <x-form.input name="nombre" label="Nombre del Producto" placeholder="Ej: Harina de Maíz 1Kg" required="true" />
                                </div>
                                
                                {{-- Componente SELECT + Botón para MODAL --}}
                                <div class="col-md-6">
                                    <label class="font-weight-bold text-dark">Categoría <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <select name="categoria_id" class="form-control select2">
                                            @foreach($categorias as $id => $nombre)
                                                <option value="{{ $id }}">{{ $nombre }}</option>
                                            @endforeach
                                        </select>
                                        <div class="input-group-append">
                                            <button type="button" class="btn btn-outline-primary" data-toggle="modal" data-target="#modalCategoria">
                                                <i class="fas fa-plus"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>

                                <div class="col-md-6">
                                    <x-form.select name="proveedor_id" label="Proveedor Principal" :options="$proveedores" />
                                </div>

                                <div class="col-12 mt-2">
                                    {{-- Componente TEXTAREA --}}
                                    <x-form.textarea name="descripcion" label="Descripción Detallada" rows="2" placeholder="Ingredientes, detalles técnicos..." />
                                </div>
                            </div>
                        </div>
                    </div>

                    {{-- SECCIÓN DE COSTOS Y PRECIOS --}}
                    <div class="card shadow-sm mt-3">
                        <div class="card-header bg-white">
                            <h5 class="text-success m-0"><i class="fas fa-money-bill-wave mr-2"></i> Precios e Inventario</h5>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <x-form.input name="costo_usd" label="Costo ($)" type="number" step="0.01" />
                                </div>
                                <div class="col-md-4">
                                    <x-form.input name="precio_usd" label="Precio Venta ($)" type="number" step="0.01" required="true" />
                                </div>
                                <div class="col-md-4">
                                    <x-form.input name="stock" label="Stock Inicial" type="number" value="0" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- COLUMNA DERECHA: MULTIMEDIA Y AJUSTES --}}
                <div class="col-md-4">
                    <div class="card shadow-sm">
                        <div class="card-body">
                            
                            {{-- Componente FILE (Dropify) --}}
                            <x-form.file name="imagen" label="Fotografía del Producto" />

                            <hr>

                            {{-- Componente DATE --}}
                            <x-form.date name="fecha_vencimiento" label="Fecha de Vencimiento" />

                            <hr>

                            {{-- Componentes SWITCH --}}
                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="font-weight-bold">Estado del Producto</span>
                                <x-form.switch name="activo" label="Activo" checked="true" />
                            </div>

                            <div class="d-flex justify-content-between align-items-center mb-2">
                                <span class="font-weight-bold">Aplica IVA (16%)</span>
                                <x-form.switch name="aplica_impuesto" label="Gravable" checked="true" offColor="danger" onColor="success" />
                            </div>

                            <hr>

                            {{-- Componente CHECKBOX --}}
                            <div class="bg-light p-2 rounded">
                                <x-form.checkbox name="garantia" label="Este producto incluye garantía extendida" />
                                <x-form.checkbox name="web" label="Mostrar en Tienda Online" checked="true" />
                            </div>

                        </div>
                    </div>
                </div>

            </div>

            {{-- Componente BOTONERA GUARDAR --}}
            <x-form.btn_save url="{{ route('productos.index') }}" />

        </form>
    </div>
</section>

{{-- Componente MODAL (Para crear categoría al vuelo) --}}
<x-modal id="modalCategoria" title="Nueva Categoría Rápida" formAction="{{ route('categorias.store') }}">
    
    <div class="row">
        <div class="col-12">
            <x-form.input name="nombre" label="Nombre de la Categoría" required="true" />
        </div>
        <div class="col-12">
            <x-form.textarea name="descripcion" label="Descripción (Opcional)" rows="2" />
        </div>
        <div class="col-12 mt-2">
            <x-form.switch name="activo" label="Categoría Activa" checked="true" />
        </div>
    </div>

    {{-- El modal usará sus propios botones de guardar definidos en el componente --}}
</x-modal>

@endsection



{{-- paneles de kpi --}}


@extends('layouts.app')

@section('content')
<section class="section">
    <div class="section-header">
        <h1>Dashboard General</h1>
    </div>

    {{-- 1. PANELES KPI --}}
    <div class="row">
        <div class="col-lg-3 col-6">
            <x-info-box label="Ventas del Día" :value="'$ 1.500'" icon="fas fa-shopping-cart" color="success" :url="route('ventas.index')" />
        </div>
        <div class="col-lg-3 col-6">
            <x-info-box label="Clientes Nuevos" value="15" icon="fas fa-user-plus" color="warning" :url="route('clientes.index')" />
        </div>
        <div class="col-lg-3 col-6">
            <x-info-box label="Productos Bajos" value="4" icon="fas fa-exclamation-triangle" color="danger" :url="route('productos.index')" />
        </div>
        <div class="col-lg-3 col-6">
            <x-info-box label="Usuarios Activos" value="3" icon="fas fa-users" color="primary" />
        </div>
    </div>

    {{-- 2. TABLA DE ÚLTIMOS USUARIOS (Ejemplo de uso de Avatar y Fechas) --}}
    <div class="card card-primary card-outline mt-3">
        <div class="card-header">
            <h4 class="card-title">Últimos Registros</h4>
        </div>
        <div class="card-body p-0">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th>Usuario</th>
                        <th>Fecha Registro</th>
                        <th>Estado</th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($ultimos_usuarios as $user)
                    <tr>
                        <td>
                            <div class="d-flex align-items-center">
                                {{-- USO DE COMPONENTE AVATAR --}}
                                <x-avatar :name="$user->name" size="30" class="mr-2" />
                                <span>{{ $user->name }}</span>
                            </div>
                        </td>
                        <td>
                            {{-- USO DE DIRECTIVA FECHA --}}
                            @datetime($user->created_at)
                        </td>
                        <td>
                            <x-status :value="$user->activo" />
                        </td>
                    </tr>
                    @endforeach
                    
                    {{-- USO DE EMPTY STATE (Si no hay datos) --}}
                    @if($ultimos_usuarios->isEmpty())
                        <tr>
                            <td colspan="3">
                                <x-empty-state title="Sin actividad reciente" icon="fas fa-history" />
                            </td>
                        </tr>
                    @endif
                </tbody>
            </table>
        </div>
    </div>

</section>
@endsection