EnglishContáctanos

El ui-kit

Construye un producto completo con piezas que ya funcionan.

El ui-kit es la plataforma compartida detrás de cada producto de Hamble Creek: cientos de componentes de Angular, los módulos de backend que los sirven y las reglas de negocio sobre las que ambos se ejecutan. Se escribe una vez. Se prueba una vez. Se reutiliza en todas partes.

Abrir la demo en vivoHáblanos de ello
componentes del ui-kit
400+
módulos de backend
100+
motores de dominio compartidos
16
productos en una plataforma
10

Arquitectura

Tres capas, una versión

El ui-kit es la capa visible de una pila. Debajo, core-server contiene los módulos de backend y domain las reglas de negocio puras. Los tres se publican juntos, así que un producto siempre ejecuta un conjunto compatible.

  • domain Las reglas viven aquí una sola vez. La pantalla y el servidor no pueden discrepar sobre impuestos, dinero o disponibilidad.
  • core-server La seguridad, la auditoría y la mensajería viven aquí una sola vez. Todos los productos reciben la misma versión reforzada.
  • ui-kit El aspecto y el comportamiento viven aquí una sola vez. Una corrección o una mejora llega a todos los productos en la siguiente versión.

Productos

Lo que usan los clientes

  • Pitch Spotlight
  • DentalChart
  • NextGen ISP Platform
  • Ledgerly
  • PhotoGallery
  • Officiating Hub
  • Contractor Service Desk
  • Rental Booker
  • Barn Ledger
  • Family Helper

ui-kit

@hch-shared-libraries/ui-kit

Más de 400 componentes de Angular, desde la estructura de la aplicación y las tablas de datos hasta las pantallas de contabilidad y el estudio de video. Un solo sistema de diseño, con el tema de cada tenant.

core-server

@hch-shared-libraries/core-server

Más de 100 módulos de backend: identidad, auditoría, mensajería, pagos, almacenamiento, programación y el libro contable. Se escriben una vez, se refuerzan una vez y los reutiliza cada producto.

domain

@hch-shared-libraries/domain

Las reglas de negocio como código puro sin framework: dinero, acceso, impuestos, programación, el libro contable. El navegador y el servidor ejecutan la misma función, así que una regla nunca puede desviarse entre ambos.

Desarrollo guiado por IA

Construye con IA, sobre piezas que ya funcionan

La IA puede escribir una aplicación rápidamente. Con el ui-kit no tiene que reinventar las funciones de negocio que toda aplicación necesita, así que llega a un producto terminado más rápido y con menos sorpresas.

  • Ensambla, no regeneres

    Un asistente de IA que parte de una página en blanco reconstruye inicios de sesión, facturación y registros de auditoría desde cero cada vez. Con el ui-kit compone funciones de negocio que ya existen, y su esfuerzo se dedica a lo que hace diferente a tu producto.

  • Calidad que no tuvo que inventar

    Cada componente y módulo se escribe una vez, se prueba una vez y se revisa una vez. Los productos creados con IA heredan esa garantía en lugar de llevar cada uno su propia copia sin revisar de la misma función.

  • Una implementación, no muchas

    Por sí sola, la IA escribe una versión ligeramente distinta del mismo código en cada producto. Las piezas compartidas eliminan esa duplicación, y una corrección o mejora llega a todos los productos en la siguiente versión.

  • Barreras de seguridad que una IA puede seguir

    Cada exportación está documentada para un lector de IA, con lo que necesita, lo que emite y las preguntas que debe hacer al desarrollador. Las convenciones se aplican con lint y pruebas, así que un error hace fallar la compilación en lugar de llegar a producción.

  • Marcos de cumplimiento integrados

    La clasificación de datos, el registro de auditoría, el cifrado por campo, el control de acceso y la retención son nativos de la plataforma y se corresponden con los controles de ISO 27001, SOC 2 Type II y HIPAA, así que un producto nuevo parte con ellos en lugar de añadirlos después.

  • De la idea al producto funcionando, antes

    Como las funciones de negocio comunes ya están hechas, una prueba de concepto es software real que funciona sobre módulos reales, y el tiempo ahorrado se dedica a las partes que solo tú puedes describir.

Estamos autocertificados en HIPAA. No contamos con la certificación ISO 27001 ni SOC 2 Type II: la plataforma está creada para respaldar sus controles, y la certificación de tu producto debe obtenerse por separado.

El catálogo de componentes

Todo lo que un producto necesita, ya construido

Desde la estructura de la aplicación hasta el último estado vacío. Son exportaciones reales de la biblioteca; las listas muestran una muestra de cada grupo.

  • Estructura y navegación de la aplicación

    La estructura de una aplicación: encabezado, barra lateral, contenedor de página y los selectores de tenant y de rol, ensamblados por un solo componente.

    • AppShell
    • AppHeader
    • Sidebar
    • PageContainer
    • UtilityNavBar
    • ResponsiveRouteTabs
    • NotificationPopout

  • Identidad y acceso

    Inicio de sesión, autenticación multifactor y reforzada, cambio de rol y revelado auditado de campos sensibles.

    • LoginPage
    • MfaEnrollment
    • StepUpAuth
    • PiiReveal
    • TenantSwitcher
    • RoleSwitcher
    • InvitationAccept
    • AgeAttestation

  • Visualización de datos

    Tablas, listas, tableros y gráficos que se leen bien desde un teléfono hasta un monitor ancho.

    • DataTable
    • DataEditableTable
    • RecordList
    • StatusBoard
    • StatTile
    • BarChart
    • AuditLogViewer
    • TagManager

  • Formularios y filtros

    Formularios basados en esquemas, entrada enriquecida y un único modelo de filtros compartido, del cuadro de búsqueda a las vistas guardadas.

    • SchemaForm
    • RichTextEditor
    • SignaturePad
    • RecurrenceEditor
    • AddressLookup
    • FilterBar
    • DateRangeFilter
    • ImageUpload

  • Foto y video

    Galerías, un estudio de video multicámara con anotaciones y cargas que se reanudan tras perder la conexión.

    • PhotoViewer
    • VideoStudio
    • VideoTimelinePlayer
    • MultiAngleVideoPlayer
    • VideoAnnotationCanvas
    • MultiFileResumableUpload
    • QrCode

  • Mapas y ubicación

    Mapas interactivos con herramientas de dibujo, marcadores por tipo, búsqueda de direcciones y condiciones meteorológicas en vivo.

    • Map
    • MapDrawToolbar
    • MapFeatureInfoWindow
    • MapMarkerTypeManager
    • LocationConditions
    • WeatherRadarLink

  • Contenido y comunidad

    Muros sociales, moderación, traducción, redacción asistida por IA y un creador de páginas por bloques.

    • WallFeed
    • ModerationQueue
    • TranslateToggle
    • TextRewriteAssist
    • GeminiPrompt
    • PageBlockEditor
    • MessagingComposer
    • SpeakButton

  • Contabilidad y facturación

    Una superficie contable completa de partida doble: libro mayor, facturas, pagos, suscripciones, cobranza e informes.

    • JournalEntryEditor
    • TrialBalance
    • BalanceSheet
    • PaymentList
    • CreditNoteEditor
    • RenewalsDueTable
    • DunningLadderEditor
    • ExpenseClaimEditor
    • ConsolidatedStatement

  • Programación y reservas

    Flujos de reserva públicos, calendarios y cuadrículas de recursos sobre un motor de disponibilidad compartido con el servidor.

    • BookingFlow
    • TenantCalendar
    • CalendarMonthGrid
    • ResourceScheduleGrid
    • ManageAppointment
    • WeeklySlotEditor
    • TimeOffEditor

  • Tareas y automatización

    Listas de tareas, plantillas y un planificador de reparto que convierte una regla en las tareas correctas para las personas correctas.

    • TaskList
    • TaskTemplateEditor
    • FanOutRuleManager
    • FanOutScheduleEditor
    • AssigneePicker
    • HierarchicalEntityPicker

  • Comercio y planes

    Carritos, fichas de producto, matrices de variantes, límites de uso y facturación de planes de tenant para vender y suscribirse.

    • ShoppingCartDrawer
    • ProductCard
    • VariantMatrixEditor
    • AllowanceMeter
    • UsageLimitCard
    • TenantPlanBilling
    • WalletPassButtons

  • Documentos y mensajes

    Plantillas con marca, vistas previas, un historial de mensajes entre canales y documentos legales con seguimiento de aceptación.

    • TemplateEditor
    • DocumentPreview
    • MessageHistoryTable
    • PublicDocumentPage
    • LegalDocumentViewer
    • LegalAcceptancePrompt

  • Estados y comentarios

    Estados vacíos, indicadores de carga, avisos de sincronización y diálogos de confirmación, para que cada pantalla maneje cada estado.

    • EmptyState
    • SkeletonCard
    • SyncStatusBanner
    • ConnectionStateIndicator
    • ConfirmationDialog
    • Drawer

Cada componente tiene una página interactiva con controles para probar cada opción.Explora la demo de componentes

Potencia

Capacidades completas, no solo componentes sueltos

Parte de lo que hace el kit es demasiado grande para ser un componente. Son capacidades completas que un producto activa.

Una plataforma de contabilidad completa

Cualquier producto puede tener una contabilidad real detrás. El libro contable, la facturación, la cobranza y los informes son pantallas y servicios que montas, no funciones que construyes.

  • Libro de partida doble con numeración sin huecos, cierre de periodo y reversión
  • Facturas, cuentas por pagar, notas de crédito, pagos, reembolsos y estados de cuenta de clientes
  • Suscripciones con prorrateo, pago automático y una escalera de cobranza para recuperar pagos
  • Reembolsos de gastos, estados consolidados y exportaciones firmadas para auditores

Programación y reservas

Un flujo de reservas para el público, un calendario para el personal y un único motor de disponibilidad por debajo, compartido por el navegador y el servidor.

  • Tipos de cita, horarios semanales, excepciones y días libres
  • Series recurrentes, reprogramación y avisos de citas afectadas
  • Cuadrículas de recursos para salas, campos y equipos
  • Bloqueos de reserva que impiden que dos personas tomen el mismo horario

Foto y video, de principio a fin

De la captura a la reproducción: cargas reanudables, transcodificación y transmisión en el servidor, y un estudio en el navegador para revisar y anotar grabaciones.

  • Reproductor multicámara con línea de tiempo sincronizada
  • Anotación fotograma a fotograma y marcadores de línea de tiempo por categorías
  • Cargas de varios archivos reanudables con una bandeja de progreso
  • Agrupación de rostros y etiquetado visual automático de fotos

Documentos y comunicaciones

Una forma gobernada de enviar cualquier cosa: plantillas con marca de entrada, un mensaje auditable de salida, por el canal que prefiera cada persona.

  • Correo, SMS, WhatsApp, RCS y voz desde una única vía de envío
  • Gobierno de plantillas con borrador, publicación e instantáneas de lo que se envió
  • Registros de bajas consultados en cada SMS saliente
  • Generación de PDF y enlaces de documentos firmados y renovables

Flexibilidad

Lo bastante potente para compartirse, lo bastante flexible para adaptarse

Una biblioteca compartida solo funciona si cada producto puede seguir siendo él mismo. El kit está hecho para configurarse, no para bifurcarse.

  • Dale tu tema

    Los tokens de diseño de Material 3 definen cada color. El tema claro y el oscuro siguen al visitante, y cada tenant puede aportar su color de acento y su logotipo, que toda la interfaz adopta.

  • Configúralo

    Los componentes aceptan entradas de modo y opciones activables en lugar de bifurcaciones. Una sola página de acceso sirve para iniciar sesión y registrarse; una estructura muestra solo los elementos que la aplicación pide.

  • Conéctalo

    Las pantallas hablan con un puerto, una interfaz que implementa la aplicación. El kit incluye implementaciones REST y en memoria, de modo que una demo funciona sin backend y un producto funciona con el suyo.

  • Amplíalo

    Las ranuras de extensión tipadas permiten que un producto añada su propio panel a una pantalla compartida, cada una tras un límite de errores para que una extensión rota nunca tumbe la página.

  • Tradúcelo

    Los diccionarios se cargan bajo demanda, con inglés, español, francés y alemán incluidos. El dinero, las fechas y las unidades siguen la configuración regional del tenant.

  • Ábrelo a todas las personas

    Cada campo tiene una etiqueta real asociada, el foco es visible y está bien gestionado, el movimiento respeta la preferencia del visitante y el kit se construye conforme a WCAG 2.1 AA.

En código

La estructura de una aplicación es un solo componente

Integrar es una plantilla, no un proyecto. Estos ejemplos provienen directamente de la documentación del ui-kit.

Toda la estructura de la aplicaciónUn componente aporta el encabezado, la barra lateral, los selectores de tenant y de rol y el inicio de sesión. La aplicación aporta su nombre, su menú y qué hacer al iniciar sesión.
<hch-app-shell
  app_name="Pitch Spotlight"
  [sidebar_items]="nav_items()"
  [sidebar_user_permissions]="my_permissions()"
  [show_tenant_switcher]="is_multi_tenant()"
  [show_role_switcher]="can_view_as_role()"
  (login_clicked)="on_login()"
  (logout_clicked)="on_logout()"
  (tenant_selected)="on_switch_tenant($event)"
  (role_selected)="on_switch_role($event)"
></hch-app-shell>
Una tarjeta con encabezado y accionesDentro de una página, el contenido va en tarjetas de Material con un encabezado compartido, de modo que el espaciado, los iconos y los botones de acción se ven igual en todos los productos.
<mat-card>
  <hch-card-header
    icon="group"
    title="Roster"
    subtitle="12 players"
    [actions]="[{ icon: 'edit', label: 'Edit', on_click: on_edit_roster }]"
  ></hch-card-header>
  <mat-card-content>...</mat-card-content>
</mat-card>

La otra mitad

Un conjunto de herramientas de backend a la medida

Las pantallas se apoyan en core-server: módulos de identidad, auditoría, pagos, multimedia, mensajería y las integraciones que un negocio realmente usa. Cada uno es una biblioteca que la aplicación compone, y la persistencia la aporta la propia aplicación.

Plataforma e identidad

  • platform_tenant
  • identity
  • authorization
  • roles
  • invitations
  • self_serve_signup
  • admin_mfa
  • legal_acceptance

Transversales

  • audit
  • compliance
  • outbox
  • secrets
  • rate_limiting
  • request_validation
  • scheduled_jobs
  • offline_sync

Almacenamiento y multimedia

  • secure_storage
  • object_storage
  • transcode
  • video_timeline
  • photo_derivative
  • face_clustering
  • playback_authorization

Comunicación

  • communications
  • messaging_providers
  • notifications
  • inbound_sms
  • translation
  • template_engine
  • documents

Dominios de negocio

  • accounting
  • payments
  • banking
  • appointments
  • entitlements
  • task
  • fan_out_worker
  • share_links

Integraciones

  • stripe
  • square
  • plaid
  • mercury
  • gusto
  • checkr
  • easypost
  • google_sheets

Seguro por defecto

Controles que todo producto hereda

La seguridad y la privacidad son convenciones de la plataforma, aplicadas en el código y en la revisión, para que un producto nuevo nazca con ellas en lugar de añadirlas después.

  • Multi-tenant desde el primer día

    Cada registro pertenece a un tenant y el acceso se comprueba en el servidor. Un mismo producto atiende a muchas organizaciones sin que sus datos se mezclen jamás.

  • Auditado en la misma transacción

    Los cambios sensibles escriben una fila de auditoría de solo adición en la misma transacción de base de datos que el propio cambio, con los datos personales ocultos en las instantáneas de antes y después.

  • Los datos sensibles permanecen sellados

    Cada campo está clasificado. Los datos de salud y los datos personales sensibles se cifran a nivel de campo, y cada lectura queda registrada.

  • Autenticación reforzada

    Las acciones de riesgo piden a la persona que se identifique de nuevo. Revelar un valor protegido exige un administrador, una nueva verificación y deja un registro de auditoría.

  • Borrado por diseño

    A las personas se las borra destruyendo sus claves de cifrado, de modo que sus datos quedan ilegibles en todas partes a la vez, mientras los registros financieros se conservan intactos.

  • Pensado para las familias

    Los menores de 13 años cuentan con consentimiento parental verificable, datos mínimos y sin segmentación por comportamiento, con eliminación a petición de los padres incluida.

Pon la plataforma a trabajar en tu producto

Tanto si te interesa el ui-kit o un producto de la cartera como si gestionas algo parecido, nos encantaría saber qué estás construyendo.

ContáctanosVer los productos