إنتقل إلى المحتوى الرئيسي

std-hr-portal

Level: Organism | Entity: Employee | Persistence: runtime

2 states, 10 events, 7 transitions

Live Preview​

;; app HRPortal

orbital EmployeeOrbital {
  entity Employee [runtime] {
    id : string!
    name : string
    email : string
    department : string
    role : string
    startDate : datetime
  }
  trait EmployeeBrowse -> Employee [interaction] {
    initial: browsing
    state browsing {
      INIT -> browsing
        (fetch Employee)
        (render-ui main { type: "dashboard-layout", appName: "HRPortal", navItems: [{ label: "Employees", href: "/employees", icon: "users" }, { label: "Onboarding", href: "/onboarding", icon: "layout-list" }, { label: "Time Off", href: "/timeoff", icon: "calendar" }, { label: "Org Chart", href: "/org-chart", icon: "layout-list" }], children: [{ type: "stack", direction: "vertical", gap: "lg", className: "max-w-5xl mx-auto w-full", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "users", size: "lg" }, { type: "typography", content: "Employees", variant: "h2" }] }, { type: "stack", direction: "horizontal", gap: "sm", children: [{ type: "button", label: "Add Employee", event: "CREATE", variant: "primary", icon: "plus" }] }] }, { type: "divider" }, { type: "data-list", entity: "Employee", emptyIcon: "inbox", emptyTitle: "No employees yet", emptyDescription: "Add employees to your organization.", itemActions: [{ label: "View", event: "VIEW", variant: "ghost", size: "sm" }, { label: "Edit", event: "EDIT", variant: "ghost", size: "sm" }, { label: "Delete", event: "DELETE", variant: "danger", size: "sm" }], columns: [{ name: "name", variant: "h3", icon: "user" }, { name: "department", variant: "badge" }, { name: "role", variant: "body" }, { name: "email", variant: "caption" }, { name: "startDate", label: "Joined", variant: "caption", format: "date" }], variant: "card", gap: "sm" }] }] })
      EMPLOYEE_CREATED -> browsing
        (fetch Employee)
      EMPLOYEE_UPDATED -> browsing
        (fetch Employee)
      DELETE -> deleting
        (fetch Employee { id: "@payload.id" })
        (render-ui modal { type: "stack", direction: "vertical", gap: "md", children: [{ type: "stack", direction: "horizontal", gap: "sm", children: [{ type: "icon", name: "trash-2", size: "md" }, { type: "typography", content: "Delete Employee", variant: "h3" }] }, { type: "divider" }, { type: "typography", content: "Are you sure you want to delete this employee?", variant: "body" }, { type: "stack", direction: "horizontal", gap: "sm", justify: "end", children: [{ type: "button", label: "Cancel", event: "CANCEL", variant: "ghost" }, { type: "button", label: "Delete", event: "CONFIRM_DELETE", variant: "danger", icon: "trash" }] }] })
    }
    state deleting {
      CONFIRM_DELETE -> browsing
        (persist delete Employee @entity.id)
        (render-ui modal null)
        (fetch Employee)
        (render-ui main { type: "dashboard-layout", appName: "HRPortal", navItems: [{ label: "Employees", href: "/employees", icon: "users" }, { label: "Onboarding", href: "/onboarding", icon: "layout-list" }, { label: "Time Off", href: "/timeoff", icon: "calendar" }, { label: "Org Chart", href: "/org-chart", icon: "layout-list" }], children: [{ type: "stack", direction: "vertical", gap: "lg", className: "max-w-5xl mx-auto w-full", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "users", size: "lg" }, { type: "typography", content: "Employees", variant: "h2" }] }, { type: "stack", direction: "horizontal", gap: "sm", children: [{ type: "button", label: "Add Employee", event: "CREATE", variant: "primary", icon: "plus" }] }] }, { type: "divider" }, { type: "data-list", entity: "Employee", emptyIcon: "inbox", emptyTitle: "No employees yet", emptyDescription: "Add employees to your organization.", itemActions: [{ label: "View", event: "VIEW", variant: "ghost", size: "sm" }, { label: "Edit", event: "EDIT", variant: "ghost", size: "sm" }, { label: "Delete", event: "DELETE", variant: "danger", size: "sm" }], columns: [{ name: "name", variant: "h3", icon: "user" }, { name: "department", variant: "badge" }, { name: "role", variant: "body" }, { name: "email", variant: "caption" }, { name: "startDate", label: "Joined", variant: "caption", format: "date" }], variant: "card", gap: "sm" }] }] })
        (notify "Employee deleted successfully")
      CANCEL -> browsing
        (render-ui modal null)
        (fetch Employee)
        (render-ui main { type: "dashboard-layout", appName: "HRPortal", navItems: [{ label: "Employees", href: "/employees", icon: "users" }, { label: "Onboarding", href: "/onboarding", icon: "layout-list" }, { label: "Time Off", href: "/timeoff", icon: "calendar" }, { label: "Org Chart", href: "/org-chart", icon: "layout-list" }], children: [{ type: "stack", direction: "vertical", gap: "lg", className: "max-w-5xl mx-auto w-full", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "users", size: "lg" }, { type: "typography", content: "Employees", variant: "h2" }] }, { type: "stack", direction: "horizontal", gap: "sm", children: [{ type: "button", label: "Add Employee", event: "CREATE", variant: "primary", icon: "plus" }] }] }, { type: "divider" }, { type: "data-list", entity: "Employee", emptyIcon: "inbox", emptyTitle: "No employees yet", emptyDescription: "Add employees to your organization.", itemActions: [{ label: "View", event: "VIEW", variant: "ghost", size: "sm" }, { label: "Edit", event: "EDIT", variant: "ghost", size: "sm" }, { label: "Delete", event: "DELETE", variant: "danger", size: "sm" }], columns: [{ name: "name", variant: "h3", icon: "user" }, { name: "department", variant: "badge" }, { name: "role", variant: "body" }, { name: "email", variant: "caption" }, { name: "startDate", label: "Joined", variant: "caption", format: "date" }], variant: "card", gap: "sm" }] }] })
      CLOSE -> browsing
        (render-ui modal null)
        (fetch Employee)
        (render-ui main { type: "dashboard-layout", appName: "HRPortal", navItems: [{ label: "Employees", href: "/employees", icon: "users" }, { label: "Onboarding", href: "/onboarding", icon: "layout-list" }, { label: "Time Off", href: "/timeoff", icon: "calendar" }, { label: "Org Chart", href: "/org-chart", icon: "layout-list" }], children: [{ type: "stack", direction: "vertical", gap: "lg", className: "max-w-5xl mx-auto w-full", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "users", size: "lg" }, { type: "typography", content: "Employees", variant: "h2" }] }, { type: "stack", direction: "horizontal", gap: "sm", children: [{ type: "button", label: "Add Employee", event: "CREATE", variant: "primary", icon: "plus" }] }] }, { type: "divider" }, { type: "data-list", entity: "Employee", emptyIcon: "inbox", emptyTitle: "No employees yet", emptyDescription: "Add employees to your organization.", itemActions: [{ label: "View", event: "VIEW", variant: "ghost", size: "sm" }, { label: "Edit", event: "EDIT", variant: "ghost", size: "sm" }, { label: "Delete", event: "DELETE", variant: "danger", size: "sm" }], columns: [{ name: "name", variant: "h3", icon: "user" }, { name: "department", variant: "badge" }, { name: "role", variant: "body" }, { name: "email", variant: "caption" }, { name: "startDate", label: "Joined", variant: "caption", format: "date" }], variant: "card", gap: "sm" }] }] })
    }
    emits {
      ONBOARD external { id: string }
    }
    listens {
      * EMPLOYEE_CREATED -> EMPLOYEE_CREATED
      * EMPLOYEE_UPDATED -> EMPLOYEE_UPDATED
    }
  }
  trait EmployeeCreate -> Employee [interaction] {
    initial: closed
    state closed {
      INIT -> closed
        (fetch Employee)
      CREATE -> open
        (fetch Employee)
        (render-ui modal { type: "stack", direction: "vertical", gap: "md", children: [{ type: "stack", direction: "horizontal", gap: "sm", children: [{ type: "icon", name: "plus-circle", size: "md" }, { type: "typography", content: "New Employee", variant: "h3" }] }, { type: "divider" }, { type: "form-section", entity: "Employee", mode: "create", submitEvent: "SAVE", cancelEvent: "CLOSE", fields: ["name", "email", "department", "role", "startDate"] }] })
    }
    state open {
      CLOSE -> closed
        (render-ui modal null)
        (notify Cancelled info)
      SAVE -> closed
        (persist create Employee @payload.data)
        (fetch Employee)
        (render-ui modal null)
        (emit EMPLOYEE_CREATED)
        (notify "Employee created successfully")
    }
    emits {
      EMPLOYEE_CREATED
    }
  }
  trait EmployeeEdit -> Employee [interaction] {
    initial: closed
    state closed {
      INIT -> closed
        (fetch Employee)
      EDIT -> open
        (fetch Employee { id: "@payload.id" })
        (render-ui modal { type: "stack", direction: "vertical", gap: "md", children: [{ type: "stack", direction: "horizontal", gap: "sm", children: [{ type: "icon", name: "edit", size: "md" }, { type: "typography", content: "Edit Employee", variant: "h3" }] }, { type: "divider" }, { type: "form-section", entity: "Employee", mode: "edit", submitEvent: "SAVE", cancelEvent: "CLOSE", fields: ["name", "email", "department", "role", "startDate"], entityId: "@entity.id" }] })
    }
    state open {
      CLOSE -> closed
        (render-ui modal null)
        (notify Cancelled info)
      SAVE -> closed
        (persist update Employee @payload.data)
        (fetch Employee)
        (render-ui modal null)
        (emit EMPLOYEE_UPDATED)
        (notify "Employee updated successfully")
    }
    emits {
      EMPLOYEE_UPDATED
    }
  }
  trait EmployeeView -> Employee [interaction] {
    initial: closed
    state closed {
      INIT -> closed
        (fetch Employee)
      VIEW -> open
        (fetch Employee { id: "@payload.id" })
        (render-ui modal { type: "stack", direction: "vertical", gap: "md", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "eye", size: "md" }, { type: "typography", variant: "h3", content: "@entity.name" }] }, { type: "divider" }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Name" }, { type: "typography", variant: "body", content: "@entity.name" }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Email" }, { type: "typography", variant: "body", content: "@entity.email" }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Department" }, { type: "typography", variant: "body", content: "@entity.department" }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Role" }, { type: "typography", variant: "body", content: "@entity.role" }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Start Date" }, { type: "typography", variant: "body", content: "@entity.startDate" }] }, { type: "divider" }, { type: "stack", direction: "horizontal", gap: "sm", justify: "end", children: [{ type: "button", label: "Edit", event: "EDIT", variant: "primary", icon: "edit" }, { type: "button", label: "Close", event: "CLOSE", variant: "ghost" }] }] })
    }
    state open {
      CLOSE -> closed
        (render-ui modal null)
        (notify Cancelled info)
    }
  }
  page "/employees" -> EmployeeBrowse, EmployeeCreate, EmployeeEdit, EmployeeView
}
orbital OnboardingOrbital {
  entity Onboarding [runtime] {
    id : string!
    employeeName : string
    department : string
    manager : string
    equipmentReady : boolean
    accessGranted : boolean
  }
  trait OnboardingWizard -> Onboarding [interaction] {
    initial: step1
    state step1 {
      INIT -> step1
        (fetch Onboarding)
        (render-ui main { type: "dashboard-layout", appName: "HRPortal", navItems: [{ label: "Employees", href: "/employees", icon: "users" }, { label: "Onboarding", href: "/onboarding", icon: "layout-list" }, { label: "Time Off", href: "/timeoff", icon: "calendar" }, { label: "Org Chart", href: "/org-chart", icon: "layout-list" }], children: [{ type: "container", maxWidth: "lg", padding: "lg", children: [{ type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "clipboard-check", size: "lg" }, { type: "typography", content: "Employee Onboarding", variant: "h2" }] }, { type: "progress-dots", count: 3, currentIndex: 0 }, { type: "wizard-progress", steps: ["Employee Details", "Manager Assignment", "Setup Checklist"], currentStep: 0 }, { type: "divider" }, { type: "typography", content: "Employee Details", variant: "h3" }, { type: "form-section", entity: "Onboarding", mode: "create", submitEvent: "NEXT", cancelEvent: "INIT", fields: ["employeeName", "department"] }, { type: "stack", direction: "horizontal", gap: "sm", justify: "end", children: [{ type: "button", label: "Next", event: "NEXT", variant: "primary", icon: "arrow-right" }] }] }] }] })
      NEXT -> step2
        (fetch Onboarding)
        (render-ui main { type: "dashboard-layout", appName: "HRPortal", navItems: [{ label: "Employees", href: "/employees", icon: "users" }, { label: "Onboarding", href: "/onboarding", icon: "layout-list" }, { label: "Time Off", href: "/timeoff", icon: "calendar" }, { label: "Org Chart", href: "/org-chart", icon: "layout-list" }], children: [{ type: "container", maxWidth: "lg", padding: "lg", children: [{ type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "clipboard-check", size: "lg" }, { type: "typography", content: "Employee Onboarding", variant: "h2" }] }, { type: "progress-dots", count: 3, currentIndex: 1 }, { type: "wizard-progress", steps: ["Employee Details", "Manager Assignment", "Setup Checklist"], currentStep: 1 }, { type: "divider" }, { type: "typography", content: "Manager Assignment", variant: "h3" }, { type: "form-section", entity: "Onboarding", mode: "create", submitEvent: "NEXT", cancelEvent: "PREV", fields: ["manager"] }, { type: "stack", direction: "horizontal", gap: "sm", justify: "end", children: [{ type: "button", label: "Back", event: "PREV", variant: "ghost", icon: "arrow-left" }, { type: "button", label: "Next", event: "NEXT", variant: "primary", icon: "arrow-right" }] }] }] }] })
    }
    state step2 {
      NEXT -> step3
        (fetch Onboarding)
        (render-ui main { type: "dashboard-layout", appName: "HRPortal", navItems: [{ label: "Employees", href: "/employees", icon: "users" }, { label: "Onboarding", href: "/onboarding", icon: "layout-list" }, { label: "Time Off", href: "/timeoff", icon: "calendar" }, { label: "Org Chart", href: "/org-chart", icon: "layout-list" }], children: [{ type: "container", maxWidth: "lg", padding: "lg", children: [{ type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "clipboard-check", size: "lg" }, { type: "typography", content: "Employee Onboarding", variant: "h2" }] }, { type: "progress-dots", count: 3, currentIndex: 2 }, { type: "wizard-progress", steps: ["Employee Details", "Manager Assignment", "Setup Checklist"], currentStep: 2 }, { type: "divider" }, { type: "typography", content: "Setup Checklist", variant: "h3" }, { type: "repeatable-form-section", entity: "Onboarding", mode: "create", submitEvent: "NEXT", cancelEvent: "PREV", fields: ["equipmentReady", "accessGranted"] }, { type: "stack", direction: "horizontal", gap: "sm", justify: "end", children: [{ type: "button", label: "Back", event: "PREV", variant: "ghost", icon: "arrow-left" }, { type: "button", label: "Next", event: "NEXT", variant: "primary", icon: "arrow-right" }] }] }] }] })
      PREV -> step1
        (fetch Onboarding)
        (render-ui main { type: "dashboard-layout", appName: "HRPortal", navItems: [{ label: "Employees", href: "/employees", icon: "users" }, { label: "Onboarding", href: "/onboarding", icon: "layout-list" }, { label: "Time Off", href: "/timeoff", icon: "calendar" }, { label: "Org Chart", href: "/org-chart", icon: "layout-list" }], children: [{ type: "container", maxWidth: "lg", padding: "lg", children: [{ type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "clipboard-check", size: "lg" }, { type: "typography", content: "Employee Onboarding", variant: "h2" }] }, { type: "progress-dots", count: 3, currentIndex: 0 }, { type: "wizard-progress", steps: ["Employee Details", "Manager Assignment", "Setup Checklist"], currentStep: 0 }, { type: "divider" }, { type: "typography", content: "Employee Details", variant: "h3" }, { type: "form-section", entity: "Onboarding", mode: "create", submitEvent: "NEXT", cancelEvent: "INIT", fields: ["employeeName", "department"] }, { type: "stack", direction: "horizontal", gap: "sm", justify: "end", children: [{ type: "button", label: "Next", event: "NEXT", variant: "primary", icon: "arrow-right" }] }] }] }] })
    }
    state step3 {
      NEXT -> review
        (fetch Onboarding)
        (render-ui main { type: "dashboard-layout", appName: "HRPortal", navItems: [{ label: "Employees", href: "/employees", icon: "users" }, { label: "Onboarding", href: "/onboarding", icon: "layout-list" }, { label: "Time Off", href: "/timeoff", icon: "calendar" }, { label: "Org Chart", href: "/org-chart", icon: "layout-list" }], children: [{ type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "clipboard-check", size: "lg" }, { type: "typography", content: "Employee Onboarding", variant: "h2" }] }, { type: "badge", label: "Review" }, { type: "wizard-progress", steps: ["Employee Details", "Manager Assignment", "Setup Checklist"], currentStep: 3 }, { type: "divider" }, { type: "data-list", entity: "Onboarding", renderItem: ["fn", "item", { type: "stack", direction: "vertical", gap: "sm", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "typography", variant: "caption", content: "EmployeeName" }, { type: "typography", variant: "body", content: "@item.employeeName" }] }, { type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "typography", variant: "caption", content: "Department" }, { type: "typography", variant: "body", content: "@item.department" }] }, { type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "typography", variant: "caption", content: "Manager" }, { type: "typography", variant: "body", content: "@item.manager" }] }, { type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "typography", variant: "caption", content: "EquipmentReady" }, { type: "typography", variant: "body", content: "@item.equipmentReady" }] }, { type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "typography", variant: "caption", content: "AccessGranted" }, { type: "typography", variant: "body", content: "@item.accessGranted" }] }] }] }, { type: "wizard-navigation", currentStep: 3, totalSteps: 4, showBack: true, showComplete: true, showNext: false }] }] })
      PREV -> step2
        (fetch Onboarding)
        (render-ui main { type: "dashboard-layout", appName: "HRPortal", navItems: [{ label: "Employees", href: "/employees", icon: "users" }, { label: "Onboarding", href: "/onboarding", icon: "layout-list" }, { label: "Time Off", href: "/timeoff", icon: "calendar" }, { label: "Org Chart", href: "/org-chart", icon: "layout-list" }], children: [{ type: "container", maxWidth: "lg", padding: "lg", children: [{ type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "clipboard-check", size: "lg" }, { type: "typography", content: "Employee Onboarding", variant: "h2" }] }, { type: "progress-dots", count: 3, currentIndex: 1 }, { type: "wizard-progress", steps: ["Employee Details", "Manager Assignment", "Setup Checklist"], currentStep: 1 }, { type: "divider" }, { type: "typography", content: "Manager Assignment", variant: "h3" }, { type: "form-section", entity: "Onboarding", mode: "create", submitEvent: "NEXT", cancelEvent: "PREV", fields: ["manager"] }, { type: "stack", direction: "horizontal", gap: "sm", justify: "end", children: [{ type: "button", label: "Back", event: "PREV", variant: "ghost", icon: "arrow-left" }, { type: "button", label: "Next", event: "NEXT", variant: "primary", icon: "arrow-right" }] }] }] }] })
    }
    state review {
      PREV -> step3
        (fetch Onboarding)
        (render-ui main { type: "dashboard-layout", appName: "HRPortal", navItems: [{ label: "Employees", href: "/employees", icon: "users" }, { label: "Onboarding", href: "/onboarding", icon: "layout-list" }, { label: "Time Off", href: "/timeoff", icon: "calendar" }, { label: "Org Chart", href: "/org-chart", icon: "layout-list" }], children: [{ type: "container", maxWidth: "lg", padding: "lg", children: [{ type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "clipboard-check", size: "lg" }, { type: "typography", content: "Employee Onboarding", variant: "h2" }] }, { type: "progress-dots", count: 3, currentIndex: 2 }, { type: "wizard-progress", steps: ["Employee Details", "Manager Assignment", "Setup Checklist"], currentStep: 2 }, { type: "divider" }, { type: "typography", content: "Setup Checklist", variant: "h3" }, { type: "repeatable-form-section", entity: "Onboarding", mode: "create", submitEvent: "NEXT", cancelEvent: "PREV", fields: ["equipmentReady", "accessGranted"] }, { type: "stack", direction: "horizontal", gap: "sm", justify: "end", children: [{ type: "button", label: "Back", event: "PREV", variant: "ghost", icon: "arrow-left" }, { type: "button", label: "Next", event: "NEXT", variant: "primary", icon: "arrow-right" }] }] }] }] })
      COMPLETE -> complete
        (persist create Onboarding @payload.data)
        (notify success "Onboarding created successfully")
        (render-ui main { type: "dashboard-layout", appName: "HRPortal", navItems: [{ label: "Employees", href: "/employees", icon: "users" }, { label: "Onboarding", href: "/onboarding", icon: "layout-list" }, { label: "Time Off", href: "/timeoff", icon: "calendar" }, { label: "Org Chart", href: "/org-chart", icon: "layout-list" }], children: [{ type: "stack", direction: "vertical", gap: "lg", align: "center", children: [{ type: "icon", name: "check-circle", size: "lg" }, { type: "typography", content: "Onboarding Complete!", variant: "h2" }, { type: "typography", content: "The new employee has been fully onboarded.", variant: "body" }, { type: "button", label: "Start New", event: "RESTART", variant: "primary", icon: "refresh-cw" }] }] })
    }
    state complete {
      RESTART -> step1
        (fetch Onboarding)
        (render-ui main { type: "dashboard-layout", appName: "HRPortal", navItems: [{ label: "Employees", href: "/employees", icon: "users" }, { label: "Onboarding", href: "/onboarding", icon: "layout-list" }, { label: "Time Off", href: "/timeoff", icon: "calendar" }, { label: "Org Chart", href: "/org-chart", icon: "layout-list" }], children: [{ type: "container", maxWidth: "lg", padding: "lg", children: [{ type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "clipboard-check", size: "lg" }, { type: "typography", content: "Employee Onboarding", variant: "h2" }] }, { type: "progress-dots", count: 3, currentIndex: 0 }, { type: "wizard-progress", steps: ["Employee Details", "Manager Assignment", "Setup Checklist"], currentStep: 0 }, { type: "divider" }, { type: "typography", content: "Employee Details", variant: "h3" }, { type: "form-section", entity: "Onboarding", mode: "create", submitEvent: "NEXT", cancelEvent: "INIT", fields: ["employeeName", "department"] }, { type: "stack", direction: "horizontal", gap: "sm", justify: "end", children: [{ type: "button", label: "Next", event: "NEXT", variant: "primary", icon: "arrow-right" }] }] }] }] })
      INIT -> step1
        (fetch Onboarding)
        (render-ui main { type: "dashboard-layout", appName: "HRPortal", navItems: [{ label: "Employees", href: "/employees", icon: "users" }, { label: "Onboarding", href: "/onboarding", icon: "layout-list" }, { label: "Time Off", href: "/timeoff", icon: "calendar" }, { label: "Org Chart", href: "/org-chart", icon: "layout-list" }], children: [{ type: "container", maxWidth: "lg", padding: "lg", children: [{ type: "stack", direction: "vertical", gap: "lg", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "clipboard-check", size: "lg" }, { type: "typography", content: "Employee Onboarding", variant: "h2" }] }, { type: "progress-dots", count: 3, currentIndex: 0 }, { type: "wizard-progress", steps: ["Employee Details", "Manager Assignment", "Setup Checklist"], currentStep: 0 }, { type: "divider" }, { type: "typography", content: "Employee Details", variant: "h3" }, { type: "form-section", entity: "Onboarding", mode: "create", submitEvent: "NEXT", cancelEvent: "INIT", fields: ["employeeName", "department"] }, { type: "stack", direction: "horizontal", gap: "sm", justify: "end", children: [{ type: "button", label: "Next", event: "NEXT", variant: "primary", icon: "arrow-right" }] }] }] }] })
    }
    listens {
      * ONBOARD -> INIT
    }
  }
  page "/onboarding" -> OnboardingWizard
}
orbital TimeOffOrbital {
  entity TimeOff [runtime] {
    id : string!
    employeeName : string
    leaveType : string
    startDate : datetime
    endDate : datetime
    status : string
  }
  trait TimeOffBrowse -> TimeOff [interaction] {
    initial: browsing
    state browsing {
      INIT -> browsing
        (fetch TimeOff)
        (render-ui main { type: "dashboard-layout", appName: "HRPortal", navItems: [{ label: "Employees", href: "/employees", icon: "users" }, { label: "Onboarding", href: "/onboarding", icon: "layout-list" }, { label: "Time Off", href: "/timeoff", icon: "calendar" }, { label: "Org Chart", href: "/org-chart", icon: "layout-list" }], children: [{ type: "stack", direction: "vertical", gap: "lg", className: "max-w-5xl mx-auto w-full", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "calendar", size: "lg" }, { type: "typography", content: "Time Off Requests", variant: "h2" }] }, { type: "stack", direction: "horizontal", gap: "sm", children: [{ type: "button", label: "Request Time Off", event: "CREATE", variant: "primary", icon: "plus" }] }] }, { type: "divider" }, { type: "data-list", entity: "TimeOff", emptyIcon: "inbox", emptyTitle: "No time-off requests", emptyDescription: "Submit a request when you need time off.", itemActions: [{ label: "View", event: "VIEW", variant: "ghost", size: "sm" }, { label: "Edit", event: "EDIT", variant: "ghost", size: "sm" }, { label: "Delete", event: "DELETE", variant: "danger", size: "sm" }], columns: [{ name: "employeeName", label: "Employee", variant: "h3", icon: "calendar" }, { name: "leaveType", label: "Type", variant: "badge" }, { name: "status", variant: "badge" }, { name: "startDate", label: "From", variant: "body", format: "date" }, { name: "endDate", label: "To", variant: "body", format: "date" }], variant: "card", gap: "sm" }] }] })
      TIME_OFF_CREATED -> browsing
        (fetch TimeOff)
      TIME_OFF_UPDATED -> browsing
        (fetch TimeOff)
      DELETE -> deleting
        (fetch TimeOff { id: "@payload.id" })
        (render-ui modal { type: "stack", direction: "vertical", gap: "md", children: [{ type: "stack", direction: "horizontal", gap: "sm", children: [{ type: "icon", name: "trash-2", size: "md" }, { type: "typography", content: "Delete TimeOff", variant: "h3" }] }, { type: "divider" }, { type: "typography", content: "Are you sure you want to delete this timeoff?", variant: "body" }, { type: "stack", direction: "horizontal", gap: "sm", justify: "end", children: [{ type: "button", label: "Cancel", event: "CANCEL", variant: "ghost" }, { type: "button", label: "Delete", event: "CONFIRM_DELETE", variant: "danger", icon: "trash" }] }] })
    }
    state deleting {
      CONFIRM_DELETE -> browsing
        (persist delete TimeOff @entity.id)
        (render-ui modal null)
        (fetch TimeOff)
        (render-ui main { type: "dashboard-layout", appName: "HRPortal", navItems: [{ label: "Employees", href: "/employees", icon: "users" }, { label: "Onboarding", href: "/onboarding", icon: "layout-list" }, { label: "Time Off", href: "/timeoff", icon: "calendar" }, { label: "Org Chart", href: "/org-chart", icon: "layout-list" }], children: [{ type: "stack", direction: "vertical", gap: "lg", className: "max-w-5xl mx-auto w-full", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "calendar", size: "lg" }, { type: "typography", content: "Time Off Requests", variant: "h2" }] }, { type: "stack", direction: "horizontal", gap: "sm", children: [{ type: "button", label: "Request Time Off", event: "CREATE", variant: "primary", icon: "plus" }] }] }, { type: "divider" }, { type: "data-list", entity: "TimeOff", emptyIcon: "inbox", emptyTitle: "No time-off requests", emptyDescription: "Submit a request when you need time off.", itemActions: [{ label: "View", event: "VIEW", variant: "ghost", size: "sm" }, { label: "Edit", event: "EDIT", variant: "ghost", size: "sm" }, { label: "Delete", event: "DELETE", variant: "danger", size: "sm" }], columns: [{ name: "employeeName", label: "Employee", variant: "h3", icon: "calendar" }, { name: "leaveType", label: "Type", variant: "badge" }, { name: "status", variant: "badge" }, { name: "startDate", label: "From", variant: "body", format: "date" }, { name: "endDate", label: "To", variant: "body", format: "date" }], variant: "card", gap: "sm" }] }] })
        (notify "TimeOff deleted successfully")
      CANCEL -> browsing
        (render-ui modal null)
        (fetch TimeOff)
        (render-ui main { type: "dashboard-layout", appName: "HRPortal", navItems: [{ label: "Employees", href: "/employees", icon: "users" }, { label: "Onboarding", href: "/onboarding", icon: "layout-list" }, { label: "Time Off", href: "/timeoff", icon: "calendar" }, { label: "Org Chart", href: "/org-chart", icon: "layout-list" }], children: [{ type: "stack", direction: "vertical", gap: "lg", className: "max-w-5xl mx-auto w-full", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "calendar", size: "lg" }, { type: "typography", content: "Time Off Requests", variant: "h2" }] }, { type: "stack", direction: "horizontal", gap: "sm", children: [{ type: "button", label: "Request Time Off", event: "CREATE", variant: "primary", icon: "plus" }] }] }, { type: "divider" }, { type: "data-list", entity: "TimeOff", emptyIcon: "inbox", emptyTitle: "No time-off requests", emptyDescription: "Submit a request when you need time off.", itemActions: [{ label: "View", event: "VIEW", variant: "ghost", size: "sm" }, { label: "Edit", event: "EDIT", variant: "ghost", size: "sm" }, { label: "Delete", event: "DELETE", variant: "danger", size: "sm" }], columns: [{ name: "employeeName", label: "Employee", variant: "h3", icon: "calendar" }, { name: "leaveType", label: "Type", variant: "badge" }, { name: "status", variant: "badge" }, { name: "startDate", label: "From", variant: "body", format: "date" }, { name: "endDate", label: "To", variant: "body", format: "date" }], variant: "card", gap: "sm" }] }] })
      CLOSE -> browsing
        (render-ui modal null)
        (fetch TimeOff)
        (render-ui main { type: "dashboard-layout", appName: "HRPortal", navItems: [{ label: "Employees", href: "/employees", icon: "users" }, { label: "Onboarding", href: "/onboarding", icon: "layout-list" }, { label: "Time Off", href: "/timeoff", icon: "calendar" }, { label: "Org Chart", href: "/org-chart", icon: "layout-list" }], children: [{ type: "stack", direction: "vertical", gap: "lg", className: "max-w-5xl mx-auto w-full", children: [{ type: "stack", direction: "horizontal", gap: "md", justify: "space-between", align: "center", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "calendar", size: "lg" }, { type: "typography", content: "Time Off Requests", variant: "h2" }] }, { type: "stack", direction: "horizontal", gap: "sm", children: [{ type: "button", label: "Request Time Off", event: "CREATE", variant: "primary", icon: "plus" }] }] }, { type: "divider" }, { type: "data-list", entity: "TimeOff", emptyIcon: "inbox", emptyTitle: "No time-off requests", emptyDescription: "Submit a request when you need time off.", itemActions: [{ label: "View", event: "VIEW", variant: "ghost", size: "sm" }, { label: "Edit", event: "EDIT", variant: "ghost", size: "sm" }, { label: "Delete", event: "DELETE", variant: "danger", size: "sm" }], columns: [{ name: "employeeName", label: "Employee", variant: "h3", icon: "calendar" }, { name: "leaveType", label: "Type", variant: "badge" }, { name: "status", variant: "badge" }, { name: "startDate", label: "From", variant: "body", format: "date" }, { name: "endDate", label: "To", variant: "body", format: "date" }], variant: "card", gap: "sm" }] }] })
    }
    emits {
      APPROVE_LEAVE external { id: string }
    }
    listens {
      * TIME_OFF_CREATED -> TIME_OFF_CREATED
      * TIME_OFF_UPDATED -> TIME_OFF_UPDATED
    }
  }
  trait TimeOffCreate -> TimeOff [interaction] {
    initial: closed
    state closed {
      INIT -> closed
        (fetch TimeOff)
      CREATE -> open
        (fetch TimeOff)
        (render-ui modal { type: "stack", direction: "vertical", gap: "md", children: [{ type: "stack", direction: "horizontal", gap: "sm", children: [{ type: "icon", name: "plus-circle", size: "md" }, { type: "typography", content: "New Time Off Request", variant: "h3" }] }, { type: "divider" }, { type: "form-section", entity: "TimeOff", mode: "create", submitEvent: "SAVE", cancelEvent: "CLOSE", fields: ["employeeName", "leaveType", "startDate", "endDate", "status"] }] })
    }
    state open {
      CLOSE -> closed
        (render-ui modal null)
        (notify Cancelled info)
      SAVE -> closed
        (persist create TimeOff @payload.data)
        (fetch TimeOff)
        (render-ui modal null)
        (emit TIME_OFF_CREATED)
        (notify "TimeOff created successfully")
    }
    emits {
      TIME_OFF_CREATED
    }
  }
  trait TimeOffEdit -> TimeOff [interaction] {
    initial: closed
    state closed {
      INIT -> closed
        (fetch TimeOff)
      EDIT -> open
        (fetch TimeOff { id: "@payload.id" })
        (render-ui modal { type: "stack", direction: "vertical", gap: "md", children: [{ type: "stack", direction: "horizontal", gap: "sm", children: [{ type: "icon", name: "edit", size: "md" }, { type: "typography", content: "Edit TimeOff", variant: "h3" }] }, { type: "divider" }, { type: "form-section", entity: "TimeOff", mode: "edit", submitEvent: "SAVE", cancelEvent: "CLOSE", fields: ["employeeName", "leaveType", "startDate", "endDate", "status"], entityId: "@entity.id" }] })
    }
    state open {
      CLOSE -> closed
        (render-ui modal null)
        (notify Cancelled info)
      SAVE -> closed
        (persist update TimeOff @payload.data)
        (fetch TimeOff)
        (render-ui modal null)
        (emit TIME_OFF_UPDATED)
        (notify "TimeOff updated successfully")
    }
    emits {
      TIME_OFF_UPDATED
    }
  }
  trait TimeOffView -> TimeOff [interaction] {
    initial: closed
    state closed {
      INIT -> closed
        (fetch TimeOff)
      VIEW -> open
        (fetch TimeOff { id: "@payload.id" })
        (render-ui modal { type: "stack", direction: "vertical", gap: "md", children: [{ type: "stack", direction: "horizontal", gap: "sm", align: "center", children: [{ type: "icon", name: "eye", size: "md" }, { type: "typography", variant: "h3", content: "@entity.employeeName" }] }, { type: "divider" }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Employee Name" }, { type: "typography", variant: "body", content: "@entity.employeeName" }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Leave Type" }, { type: "typography", variant: "body", content: "@entity.leaveType" }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Start Date" }, { type: "typography", variant: "body", content: "@entity.startDate" }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "End Date" }, { type: "typography", variant: "body", content: "@entity.endDate" }] }, { type: "stack", direction: "horizontal", gap: "md", children: [{ type: "typography", variant: "caption", content: "Status" }, { type: "typography", variant: "body", content: "@entity.status" }] }, { type: "divider" }, { type: "stack", direction: "horizontal", gap: "sm", justify: "end", children: [{ type: "button", label: "Edit", event: "EDIT", variant: "primary", icon: "edit" }, { type: "button", label: "Close", event: "CLOSE", variant: "ghost" }] }] })
    }
    state open {
      CLOSE -> closed
        (render-ui modal null)
        (notify Cancelled info)
    }
  }
  page "/timeoff" -> TimeOffBrowse, TimeOffCreate, TimeOffEdit, TimeOffView
}
orbital OrgChartOrbital {
  entity OrgChart [runtime] {
    id : string!
    totalEmployees : number
    departments : number
    openPositions : number
    avgTenure : string
    headcount : number
  }
  trait OrgChartDisplay -> OrgChart [interaction] {
    initial: loading
    state loading {
      INIT -> displaying
        (fetch OrgChart)
        (render-ui main { type: "dashboard-layout", appName: "HRPortal", navItems: [{ label: "Employees", href: "/employees", icon: "users" }, { label: "Onboarding", href: "/onboarding", icon: "layout-list" }, { label: "Time Off", href: "/timeoff", icon: "calendar" }, { label: "Org Chart", href: "/org-chart", icon: "layout-list" }], children: [{ type: "scaled-diagram", children: [{ type: "stack", direction: "vertical", gap: "lg", children: [{ type: "breadcrumb", items: [{ label: "Home", href: "/" }, { label: "Org Chart" }] }, { type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "git-branch", size: "lg" }, { type: "typography", content: "Org Chart", variant: "h2" }] }, { type: "button", label: "Refresh", event: "REFRESH", variant: "secondary", icon: "refresh-cw" }] }, { type: "divider" }, { type: "box", padding: "md", children: [{ type: "simple-grid", columns: 3, children: [{ type: "stat-display", label: "TotalEmployees", value: ["object/get", ["array/first", "@entity"], "totalEmployees"] }, { type: "stat-display", label: "Departments", value: ["object/get", ["array/first", "@entity"], "departments"] }, { type: "stat-display", label: "OpenPositions", value: ["object/get", ["array/first", "@entity"], "openPositions"] }, { type: "card", children: [{ type: "stack", direction: "vertical", gap: "sm", children: [{ type: "typography", variant: "caption", content: "AvgTenure" }, { type: "typography", variant: "h3", content: ["object/get", ["array/first", "@entity"], "avgTenure"] }] }] }, { type: "stat-display", label: "Headcount", value: ["object/get", ["array/first", "@entity"], "headcount"] }] }] }, { type: "divider" }, { type: "grid", columns: 2, gap: "md", children: [{ type: "card", children: [{ type: "typography", variant: "caption", content: "Chart View" }] }, { type: "card", children: [{ type: "typography", variant: "caption", content: "Graph View" }] }] }, { type: "line-chart", data: [{ date: "Jan", value: 12 }, { date: "Feb", value: 19 }, { date: "Mar", value: 15 }, { date: "Apr", value: 25 }, { date: "May", value: 22 }, { date: "Jun", value: 30 }], xKey: "date", yKey: "value", title: "Trend" }, { type: "chart-legend", items: [{ label: "Current", color: "primary" }, { label: "Previous", color: "muted" }] }, { type: "graph-view", nodes: [{ id: "a", label: "Start", x: 50, y: 100 }, { id: "b", label: "Process", x: 200, y: 50 }, { id: "c", label: "End", x: 350, y: 100 }], edges: [{ from: "a", to: "b" }, { from: "b", to: "c" }], width: 400, height: 200 }] }] }] })
      LOADED -> displaying
        (fetch OrgChart)
        (render-ui main { type: "dashboard-layout", appName: "HRPortal", navItems: [{ label: "Employees", href: "/employees", icon: "users" }, { label: "Onboarding", href: "/onboarding", icon: "layout-list" }, { label: "Time Off", href: "/timeoff", icon: "calendar" }, { label: "Org Chart", href: "/org-chart", icon: "layout-list" }], children: [{ type: "scaled-diagram", children: [{ type: "stack", direction: "vertical", gap: "lg", children: [{ type: "breadcrumb", items: [{ label: "Home", href: "/" }, { label: "Org Chart" }] }, { type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "git-branch", size: "lg" }, { type: "typography", content: "Org Chart", variant: "h2" }] }, { type: "button", label: "Refresh", event: "REFRESH", variant: "secondary", icon: "refresh-cw" }] }, { type: "divider" }, { type: "box", padding: "md", children: [{ type: "simple-grid", columns: 3, children: [{ type: "stat-display", label: "TotalEmployees", value: ["object/get", ["array/first", "@entity"], "totalEmployees"] }, { type: "stat-display", label: "Departments", value: ["object/get", ["array/first", "@entity"], "departments"] }, { type: "stat-display", label: "OpenPositions", value: ["object/get", ["array/first", "@entity"], "openPositions"] }, { type: "card", children: [{ type: "stack", direction: "vertical", gap: "sm", children: [{ type: "typography", variant: "caption", content: "AvgTenure" }, { type: "typography", variant: "h3", content: ["object/get", ["array/first", "@entity"], "avgTenure"] }] }] }, { type: "stat-display", label: "Headcount", value: ["object/get", ["array/first", "@entity"], "headcount"] }] }] }, { type: "divider" }, { type: "grid", columns: 2, gap: "md", children: [{ type: "card", children: [{ type: "typography", variant: "caption", content: "Chart View" }] }, { type: "card", children: [{ type: "typography", variant: "caption", content: "Graph View" }] }] }, { type: "line-chart", data: [{ date: "Jan", value: 12 }, { date: "Feb", value: 19 }, { date: "Mar", value: 15 }, { date: "Apr", value: 25 }, { date: "May", value: 22 }, { date: "Jun", value: 30 }], xKey: "date", yKey: "value", title: "Trend" }, { type: "chart-legend", items: [{ label: "Current", color: "primary" }, { label: "Previous", color: "muted" }] }, { type: "graph-view", nodes: [{ id: "a", label: "Start", x: 50, y: 100 }, { id: "b", label: "Process", x: 200, y: 50 }, { id: "c", label: "End", x: 350, y: 100 }], edges: [{ from: "a", to: "b" }, { from: "b", to: "c" }], width: 400, height: 200 }] }] }] })
    }
    state displaying {
      INIT -> displaying
        (fetch OrgChart)
        (render-ui main { type: "dashboard-layout", appName: "HRPortal", navItems: [{ label: "Employees", href: "/employees", icon: "users" }, { label: "Onboarding", href: "/onboarding", icon: "layout-list" }, { label: "Time Off", href: "/timeoff", icon: "calendar" }, { label: "Org Chart", href: "/org-chart", icon: "layout-list" }], children: [{ type: "scaled-diagram", children: [{ type: "stack", direction: "vertical", gap: "lg", children: [{ type: "breadcrumb", items: [{ label: "Home", href: "/" }, { label: "Org Chart" }] }, { type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "git-branch", size: "lg" }, { type: "typography", content: "Org Chart", variant: "h2" }] }, { type: "button", label: "Refresh", event: "REFRESH", variant: "secondary", icon: "refresh-cw" }] }, { type: "divider" }, { type: "box", padding: "md", children: [{ type: "simple-grid", columns: 3, children: [{ type: "stat-display", label: "TotalEmployees", value: ["object/get", ["array/first", "@entity"], "totalEmployees"] }, { type: "stat-display", label: "Departments", value: ["object/get", ["array/first", "@entity"], "departments"] }, { type: "stat-display", label: "OpenPositions", value: ["object/get", ["array/first", "@entity"], "openPositions"] }, { type: "card", children: [{ type: "stack", direction: "vertical", gap: "sm", children: [{ type: "typography", variant: "caption", content: "AvgTenure" }, { type: "typography", variant: "h3", content: ["object/get", ["array/first", "@entity"], "avgTenure"] }] }] }, { type: "stat-display", label: "Headcount", value: ["object/get", ["array/first", "@entity"], "headcount"] }] }] }, { type: "divider" }, { type: "grid", columns: 2, gap: "md", children: [{ type: "card", children: [{ type: "typography", variant: "caption", content: "Chart View" }] }, { type: "card", children: [{ type: "typography", variant: "caption", content: "Graph View" }] }] }, { type: "line-chart", data: [{ date: "Jan", value: 12 }, { date: "Feb", value: 19 }, { date: "Mar", value: 15 }, { date: "Apr", value: 25 }, { date: "May", value: 22 }, { date: "Jun", value: 30 }], xKey: "date", yKey: "value", title: "Trend" }, { type: "chart-legend", items: [{ label: "Current", color: "primary" }, { label: "Previous", color: "muted" }] }, { type: "graph-view", nodes: [{ id: "a", label: "Start", x: 50, y: 100 }, { id: "b", label: "Process", x: 200, y: 50 }, { id: "c", label: "End", x: 350, y: 100 }], edges: [{ from: "a", to: "b" }, { from: "b", to: "c" }], width: 400, height: 200 }] }] }] })
      REFRESH -> refreshing
        (fetch OrgChart)
        (render-ui main { type: "dashboard-layout", appName: "HRPortal", navItems: [{ label: "Employees", href: "/employees", icon: "users" }, { label: "Onboarding", href: "/onboarding", icon: "layout-list" }, { label: "Time Off", href: "/timeoff", icon: "calendar" }, { label: "Org Chart", href: "/org-chart", icon: "layout-list" }], children: [{ type: "scaled-diagram", children: [{ type: "stack", direction: "vertical", gap: "lg", children: [{ type: "breadcrumb", items: [{ label: "Home", href: "/" }, { label: "Org Chart" }] }, { type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "git-branch", size: "lg" }, { type: "typography", content: "Org Chart", variant: "h2" }] }, { type: "button", label: "Refresh", event: "REFRESH", variant: "secondary", icon: "refresh-cw" }] }, { type: "divider" }, { type: "box", padding: "md", children: [{ type: "simple-grid", columns: 3, children: [{ type: "stat-display", label: "TotalEmployees", value: ["object/get", ["array/first", "@entity"], "totalEmployees"] }, { type: "stat-display", label: "Departments", value: ["object/get", ["array/first", "@entity"], "departments"] }, { type: "stat-display", label: "OpenPositions", value: ["object/get", ["array/first", "@entity"], "openPositions"] }, { type: "card", children: [{ type: "stack", direction: "vertical", gap: "sm", children: [{ type: "typography", variant: "caption", content: "AvgTenure" }, { type: "typography", variant: "h3", content: ["object/get", ["array/first", "@entity"], "avgTenure"] }] }] }, { type: "stat-display", label: "Headcount", value: ["object/get", ["array/first", "@entity"], "headcount"] }] }] }, { type: "divider" }, { type: "grid", columns: 2, gap: "md", children: [{ type: "card", children: [{ type: "typography", variant: "caption", content: "Chart View" }] }, { type: "card", children: [{ type: "typography", variant: "caption", content: "Graph View" }] }] }, { type: "line-chart", data: [{ date: "Jan", value: 12 }, { date: "Feb", value: 19 }, { date: "Mar", value: 15 }, { date: "Apr", value: 25 }, { date: "May", value: 22 }, { date: "Jun", value: 30 }], xKey: "date", yKey: "value", title: "Trend" }, { type: "chart-legend", items: [{ label: "Current", color: "primary" }, { label: "Previous", color: "muted" }] }, { type: "graph-view", nodes: [{ id: "a", label: "Start", x: 50, y: 100 }, { id: "b", label: "Process", x: 200, y: 50 }, { id: "c", label: "End", x: 350, y: 100 }], edges: [{ from: "a", to: "b" }, { from: "b", to: "c" }], width: 400, height: 200 }] }] }] })
    }
    state refreshing {
      REFRESHED -> displaying
        (fetch OrgChart)
        (render-ui main { type: "dashboard-layout", appName: "HRPortal", navItems: [{ label: "Employees", href: "/employees", icon: "users" }, { label: "Onboarding", href: "/onboarding", icon: "layout-list" }, { label: "Time Off", href: "/timeoff", icon: "calendar" }, { label: "Org Chart", href: "/org-chart", icon: "layout-list" }], children: [{ type: "scaled-diagram", children: [{ type: "stack", direction: "vertical", gap: "lg", children: [{ type: "breadcrumb", items: [{ label: "Home", href: "/" }, { label: "Org Chart" }] }, { type: "stack", direction: "horizontal", gap: "md", justify: "space-between", children: [{ type: "stack", direction: "horizontal", gap: "md", children: [{ type: "icon", name: "git-branch", size: "lg" }, { type: "typography", content: "Org Chart", variant: "h2" }] }, { type: "button", label: "Refresh", event: "REFRESH", variant: "secondary", icon: "refresh-cw" }] }, { type: "divider" }, { type: "box", padding: "md", children: [{ type: "simple-grid", columns: 3, children: [{ type: "stat-display", label: "TotalEmployees", value: ["object/get", ["array/first", "@entity"], "totalEmployees"] }, { type: "stat-display", label: "Departments", value: ["object/get", ["array/first", "@entity"], "departments"] }, { type: "stat-display", label: "OpenPositions", value: ["object/get", ["array/first", "@entity"], "openPositions"] }, { type: "card", children: [{ type: "stack", direction: "vertical", gap: "sm", children: [{ type: "typography", variant: "caption", content: "AvgTenure" }, { type: "typography", variant: "h3", content: ["object/get", ["array/first", "@entity"], "avgTenure"] }] }] }, { type: "stat-display", label: "Headcount", value: ["object/get", ["array/first", "@entity"], "headcount"] }] }] }, { type: "divider" }, { type: "grid", columns: 2, gap: "md", children: [{ type: "card", children: [{ type: "typography", variant: "caption", content: "Chart View" }] }, { type: "card", children: [{ type: "typography", variant: "caption", content: "Graph View" }] }] }, { type: "line-chart", data: [{ date: "Jan", value: 12 }, { date: "Feb", value: 19 }, { date: "Mar", value: 15 }, { date: "Apr", value: 25 }, { date: "May", value: 22 }, { date: "Jun", value: 30 }], xKey: "date", yKey: "value", title: "Trend" }, { type: "chart-legend", items: [{ label: "Current", color: "primary" }, { label: "Previous", color: "muted" }] }, { type: "graph-view", nodes: [{ id: "a", label: "Start", x: 50, y: 100 }, { id: "b", label: "Process", x: 200, y: 50 }, { id: "c", label: "End", x: 350, y: 100 }], edges: [{ from: "a", to: "b" }, { from: "b", to: "c" }], width: 400, height: 200 }] }] }] })
    }
    listens {
      * APPROVE_LEAVE -> INIT
    }
  }
  page "/org-chart" -> OrgChartDisplay
}
Loading preview...

Orbital Visualization​

Loading visualization...

Entity Fields​

FieldTypeDefault
idstring-
namestring""
emailstring""
departmentstring""
rolestring""
startDatedate""

States​

StateType
browsingInitial
deleting-

Events​

EventPayload
INIT-
CREATE-
VIEWid: string
EDITid: string
DELETEid: string
EMPLOYEE_CREATEDdata: object
EMPLOYEE_UPDATEDdata: object
CONFIRM_DELETE-
CANCEL-
CLOSE-

Transitions​

FromEventToEffects
browsingINITbrowsing2 effects
browsingEMPLOYEE_CREATEDbrowsing1 effect
browsingEMPLOYEE_UPDATEDbrowsing1 effect
browsingDELETEdeleting2 effects
deletingCONFIRM_DELETEbrowsing5 effects
deletingCANCELbrowsing3 effects
deletingCLOSEbrowsing3 effects

Emits​

  • [object Object]

Listens​

  • [object Object]
  • [object Object]