Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
ConfiForms Form Definition
closeButtonLabelانصراف
formNamemediqNewAsset
saveButtonLabelثبت اطلاعات
registrationFormTitleثبت دارایی جدید

نام دستگاه را وارد کنیدdeviceIdشناسه دستگاهjiratexttrueنام دستگاه را وارد کنیدdeviceNameنام دستگاهjiratexttrue

ConfiForms (FormView) Registrations Control
overrideSaveButtonLabelثبت اطلاعات
formNamemediqNewAsset
overrideCloseButtonLabelانصراف
registrationMessageاطلاعات با موفقیت ثبت شد.
registrationButtonLabelثبت دارایی جدید
typeEmbedded



HTML
HTML

<div id="mediq-dashboard" dir="rtl">

<style>

/* ============================================================
   MEDIQ DASHBOARD - SUPPLY
   PRESENTATION VERSION
   ============================================================ */

#mediq-dashboard,
#mediq-dashboard * {
    box-sizing: border-box;
}

#mediq-dashboard {

    --navy: #073553;
    --navy-dark: #062d49;

    --primary: #08b9b0;
    --primary-dark: #069e98;

    --text: #173b59;
    --muted: #748b9e;

    --border: #dce9ef;

    --bg: #f4f9fb;
    --white: #ffffff;

    position: fixed;

    inset: 0;

    width: 100vw;
    height: 100vh;

    z-index: 9999;

    overflow: hidden;

    direction: rtl;

    font-family:
        Tahoma,
        Arial,
        sans-serif;

    color: var(--text);

    background:
        radial-gradient(
            circle at 12% 4%,
            rgba(9,185,176,.09),
            transparent 27%
        ),
        #f4f9fb;
}


/* ============================================================
   HIDE CONFLUENCE
   ============================================================ */

html,
body,
#page,
#full-height-container,
#main,
#content,
#main-content,
.aui-page-panel,
.aui-page-panel-inner,
.aui-page-panel-content,
.content-body {

    width: 100% !important;
    height: 100% !important;

    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;
}

html,
body {
    overflow: hidden !important;
}

#footer,
footer,
.aui-footer,
#header,
#main-header,
.breadcrumbs,
#breadcrumbs,
.page-metadata {

    display: none !important;
}


/* ============================================================
   APP
   ============================================================ */

.mq-app {

    width: 100%;
    height: 100%;

    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        255px;

    direction: ltr;
}


/* ============================================================
   SIDEBAR
   ============================================================ */

.mq-sidebar {

    grid-column: 2;

    height: 100vh;

    padding:
        24px
        17px;

    direction: rtl;

    color: #fff;

    display: flex;
    flex-direction: column;

    background:
        linear-gradient(
            180deg,
            #073b5c 0%,
            #062e4a 100%
        );

    box-shadow:
        -12px 0 45px
        rgba(7,53,83,.11);
}


/* LOGO */

.mq-logo {

    width: 100%;

    text-align: center;

    padding:
        3px
        5px
        22px;

    border-bottom:
        1px solid
        rgba(255,255,255,.10);
}

.mq-logo img {

    width: 174px;

    max-width: 92%;

    height: auto;
}


/* USER */

.mq-user {

    margin-top: 17px;

    padding:
        14px
        15px;

    border-radius: 14px;

    background:
        rgba(255,255,255,.065);

    border:
        1px solid
        rgba(255,255,255,.08);
}

.mq-user-name {

    font-size: 12px;

    font-weight: 900;
}

.mq-user-role {

    margin-top: 6px;

    color:
        rgba(255,255,255,.58);

    font-size: 9px;

    font-weight: 600;
}


/* ============================================================
   LIFE CYCLE
   ============================================================ */

.mq-life-title {

    margin:
        26px
        7px
        9px;

    color:
        rgba(255,255,255,.39);

    font-size: 9px;

    font-weight: 700;
}


.mq-life {

    display: flex;

    flex-direction: column;

    gap: 6px;
}


.mq-life-item {

    position: relative;

    min-height: 46px;

    padding:
        0
        13px;

    border-radius: 11px;

    display: flex;

    align-items: center;

    gap: 10px;

    color:
        rgba(255,255,255,.69);

    font-size: 11px;

    font-weight: 800;

    cursor: pointer;

    user-select: none;

    transition:
        background .15s ease,
        color .15s ease,
        transform .15s ease;
}


.mq-life-item:hover {

    color: #fff;

    background:
        rgba(255,255,255,.075);
}


.mq-life-item.active {

    color: #fff;

    background:
        linear-gradient(
            90deg,
            #08b9b0,
            #079e99
        );

    box-shadow:
        0 10px 23px
        rgba(8,185,176,.18);
}


.mq-life-icon {

    width: 28px;
    height: 28px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(255,255,255,.07);
}


.mq-life-item.active
.mq-life-icon {

    background:
        rgba(255,255,255,.14);
}


.mq-life-icon svg {

    width: 16px;
    height: 16px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.9;

    stroke-linecap: round;
    stroke-linejoin: round;
}


/* ============================================================
   LOGOUT
   ============================================================ */

.mq-sidebar-bottom {

    margin-top: auto;
}


.mq-logout {

    min-height: 43px;

    padding:
        0
        13px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    gap: 9px;

    color:
        rgba(255,255,255,.65);

    font-size: 10px;

    font-weight: 700;

    cursor: pointer;
}


.mq-logout:hover {

    color: #fff;

    background:
        rgba(255,255,255,.07);
}


/* ============================================================
   MAIN
   ============================================================ */

.mq-main {

    grid-column: 1;

    height: 100vh;

    direction: rtl;

    overflow-y: auto;

    padding:
        0
        clamp(25px,4vw,55px)
        45px;
}


/* ============================================================
   HEADER
   ============================================================ */

.mq-header {

    min-height: 88px;

    border-bottom:
        1px solid
        var(--border);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


.mq-header-right {

    min-width: 0;
}


.mq-page-title {

    color:
        var(--navy);

    font-size: 20px;

    font-weight: 900;
}


.mq-page-description {

    margin-top: 6px;

    color:
        var(--muted);

    font-size: 10px;

    font-weight: 600;
}


/* CENTER */

.mq-center {

    padding:
        10px
        14px;

    border:
        1px solid
        var(--border);

    border-radius: 11px;

    background: #fff;

    color:
        #536f84;

    font-size: 10px;

    font-weight: 700;
}


/* ============================================================
   BREADCRUMB
   ============================================================ */

.mq-breadcrumb {

    min-height: 54px;

    display: flex;

    align-items: center;

    gap: 7px;

    flex-wrap: wrap;
}


.mq-bread-item {

    color:
        #8197a8;

    font-size: 10px;

    font-weight: 700;
}


.mq-bread-current {

    color:
        var(--primary-dark);

    font-weight: 900;
}


.mq-bread-separator {

    color:
        #b6c4cf;
}


/* ============================================================
   HERO
   ============================================================ */

.mq-hero {

    position: relative;

    overflow: hidden;

    min-height: 112px;

    padding:
        21px
        24px;

    border-radius: 18px;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: space-between;

    background:
        linear-gradient(
            105deg,
            #073b5c,
            #087c7d
        );

    box-shadow:
        0 15px 35px
        rgba(7,53,83,.10);
}


.mq-hero::before {

    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    left: -70px;
    top: -150px;

    border-radius: 50%;

    background:
        rgba(16,222,205,.14);
}


.mq-hero-title {

    position: relative;

    z-index: 2;

    font-size: 16px;

    font-weight: 900;
}


.mq-hero-desc {

    position: relative;

    z-index: 2;

    margin-top: 6px;

    color:
        rgba(255,255,255,.70);

    font-size: 10px;
}


.mq-back-btn {

    position: relative;

    z-index: 2;

    display: none;

    min-width: 88px;
    height: 36px;

    padding:
        0
        13px;

    border:
        1px solid
        rgba(255,255,255,.25);

    border-radius: 10px;

    background:
        rgba(255,255,255,.10);

    color: #fff;

    font-family:
        inherit;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;
}


.mq-back-btn:hover {

    background:
        rgba(255,255,255,.16);
}


/* ============================================================
   CONTENT
   ============================================================ */

.mq-view {

    margin-top: 23px;

    animation:
        mqFade
        .22s ease;
}


@keyframes mqFade {

    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


/* ============================================================
   SECTION HEADER
   ============================================================ */

.mq-section-head {

    margin-bottom: 14px;

    display: flex;

    align-items: center;

    justify-content: space-between;
}


.mq-section-title {

    color:
        var(--navy);

    font-size: 14px;

    font-weight: 900;
}


.mq-section-desc {

    margin-top: 4px;

    color:
        var(--muted);

    font-size: 9px;
}


/* ============================================================
   MODULE CARDS
   ============================================================ */

.mq-card-grid {

    display: grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap: 14px;
}


.mq-module-card {

    position: relative;

    min-height: 176px;

    padding:
        18px;

    border:
        1px solid
        var(--border);

    border-radius: 17px;

    background: #fff;

    cursor: pointer;

    box-shadow:
        0 9px 26px
        rgba(19,65,90,.035);

    transition:
        transform .17s ease,
        box-shadow .17s ease,
        border-color .17s ease;
}


.mq-module-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(8,185,176,.45);

    box-shadow:
        0 18px 40px
        rgba(19,65,90,.08);
}


.mq-module-icon {

    width: 48px;
    height: 48px;

    margin-bottom: 17px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        var(--primary-dark);

    background:
        linear-gradient(
            145deg,
            #e9fbf9,
            #d9f7f3
        );
}


.mq-module-icon svg {

    width: 24px;
    height: 24px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}


.mq-module-name {

    color:
        var(--navy);

    font-size: 12px;

    font-weight: 900;

    line-height: 1.8;
}


.mq-module-arrow {

    position: absolute;

    left: 18px;
    bottom: 17px;

    width: 29px;
    height: 29px;

    border-radius: 8px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        #8ea5b5;

    background:
        #f3f7f9;

    font-size: 18px;
}


.mq-module-card:hover
.mq-module-arrow {

    color: #fff;

    background:
        var(--primary);
}


/* ============================================================
   LARGE ACTION CARDS
   ============================================================ */

.mq-action-grid {

    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 15px;
}


.mq-action-card {

    min-height: 155px;

    padding:
        19px;

    border:
        1px solid
        var(--border);

    border-radius: 17px;

    background: #fff;

    cursor: pointer;

    display: flex;

    align-items: center;

    gap: 16px;

    transition: .17s;
}


.mq-action-card:hover {

    border-color:
        rgba(8,185,176,.45);

    transform:
        translateY(-2px);

    box-shadow:
        0 15px 35px
        rgba(24,74,98,.06);
}


.mq-action-icon {

    flex: 0 0 auto;

    width: 54px;
    height: 54px;

    border-radius: 15px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        var(--primary-dark);

    background:
        #e7faf8;
}


.mq-action-icon svg {

    width: 25px;
    height: 25px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.mq-action-title {

    color:
        var(--navy);

    font-size: 13px;

    font-weight: 900;
}


.mq-action-sub {

    margin-top: 6px;

    color:
        var(--muted);

    font-size: 9px;
}


/* ============================================================
   ASSET LIST MENU
   ============================================================ */

.mq-list-layout {

    display: grid;

    grid-template-columns:
        330px
        minmax(0,1fr);

    gap: 16px;

    direction: ltr;
}


.mq-list-menu,
.mq-preview {

    direction: rtl;

    border:
        1px solid
        var(--border);

    border-radius: 18px;

    background: #fff;

    box-shadow:
        0 10px 28px
        rgba(19,65,90,.035);
}


.mq-list-menu {

    padding: 13px;
}


.mq-list-option {

    min-height: 52px;

    margin-bottom: 5px;

    padding:
        0
        13px;

    border-radius: 10px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    color:
        #536f84;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;

    transition: .15s;
}


.mq-list-option:hover {

    color:
        var(--primary-dark);

    background:
        #f1faf9;
}


.mq-list-option.active {

    color:
        #087f7a;

    background:
        #e9f9f7;
}


.mq-option-badge {

    width: 26px;
    height: 26px;

    border-radius: 7px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        rgba(8,185,176,.09);

    color:
        var(--primary-dark);
}


/* ============================================================
   PREVIEW
   ============================================================ */

.mq-preview {

    min-height: 390px;

    padding:
        23px;
}


.mq-preview-title {

    color:
        var(--navy);

    font-size: 14px;

    font-weight: 900;
}


.mq-preview-description {

    margin-top: 7px;

    color:
        var(--muted);

    font-size: 9px;
}


/* MOCK CONTENT */

.mq-demo-box {

    margin-top: 23px;

    padding: 20px;

    border:
        1px dashed
        #bdd4df;

    border-radius: 14px;

    background:
        #f8fbfc;
}


.mq-demo-icon {

    width: 48px;
    height: 48px;

    margin:
        0
        auto
        12px;

    border-radius: 14px;

    display: flex;

    align-items: center;

    justify-content: center;

    color:
        var(--primary-dark);

    background:
        #e6f9f7;
}


.mq-demo-text {

    color:
        #557287;

    text-align: center;

    font-size: 10px;

    line-height: 2;
}


.mq-demo-button {

    display: block;

    min-width: 125px;

    height: 38px;

    margin:
        17px
        auto
        0;

    border: 0;

    border-radius: 9px;

    background:
        linear-gradient(
            90deg,
            #08aaa4,
            #0bc1b8
        );

    color: #fff;

    font-family: inherit;

    font-size: 10px;

    font-weight: 800;

    cursor: pointer;
}


/* ============================================================
   PLACEHOLDER LIFE CYCLE
   ============================================================ */

.mq-empty-cycle {

    min-height: 350px;

    border:
        1px dashed
        #c7dce5;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    background:
        rgba(255,255,255,.65);

    color:
        #7890a2;
}


.mq-empty-cycle strong {

    color:
        var(--navy);

    font-size: 15px;
}


.mq-empty-cycle span {

    margin-top: 8px;

    font-size: 10px;
}


/* ============================================================
   TOAST
   ============================================================ */

.mq-toast {

    position: fixed;

    left: 30px;
    bottom: 27px;

    z-index: 10020;

    min-width: 260px;

    max-width: 360px;

    padding:
        13px
        16px;

    border-radius: 11px;

    color: #fff;

    background:
        #073b5c;

    box-shadow:
        0 16px 40px
        rgba(0,0,0,.15);

    font-size: 10px;

    font-weight: 700;

    opacity: 0;

    transform:
        translateY(12px);

    pointer-events: none;

    transition:
        .2s;
}


.mq-toast.show {

    opacity: 1;

    transform:
        translateY(0);
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media(max-width:1300px) {

    .mq-card-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


@media(max-width:1000px) {

    .mq-app {
        grid-template-columns:
            minmax(0,1fr)
            210px;
    }

    .mq-list-layout {
        grid-template-columns:
            280px
            minmax(0,1fr);
    }

}


@media(max-width:800px) {

    .mq-sidebar {
        display: none;
    }

    .mq-app {
        display: block;
    }

    .mq-main {
        width: 100%;
    }

    .mq-card-grid,
    .mq-action-grid,
    .mq-list-layout {
        grid-template-columns:
            1fr;
    }

}


/* ============================================================
   MEDIQ SIDEBAR NAVIGATION TREE
   ============================================================ */

.mq-life-title,
.mq-life {
    display: none !important;
}

.mq-tree-title {
    margin: 22px 7px 9px;
    color: rgba(255,255,255,.39);
    font-size: 9px;
    font-weight: 700;
}

.mq-tree {
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow-y: auto;
    overflow-x: hidden;
    padding-left: 2px;
    scrollbar-width: thin;
}

.mq-tree::-webkit-scrollbar {
    width: 4px;
}
.mq-tree::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.15);
    border-radius: 10px;
}

.mq-tree-row {
    min-height: 38px;
    padding: 0 10px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.70);
    font-size: 10px;
    font-weight: 800;
    cursor: pointer;
    user-select: none;
    transition: background .15s ease, color .15s ease;
}

.mq-tree-row:hover {
    color: #fff;
    background: rgba(255,255,255,.07);
}

.mq-tree-row.active {
    color: #fff;
    background: linear-gradient(90deg,#08b9b0,#079e99);
}

.mq-tree-row.parent-active:not(.active) {
    color: #fff;
    background: rgba(255,255,255,.055);
}

.mq-tree-row.level-1 { padding-right: 10px; }
.mq-tree-row.level-2 { padding-right: 23px; font-size: 9.5px; }
.mq-tree-row.level-3 { padding-right: 36px; font-size: 9px; }
.mq-tree-row.level-4 { padding-right: 49px; font-size: 8.7px; color: rgba(255,255,255,.60); }

.mq-tree-dot {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: rgba(255,255,255,.32);
}

.mq-tree-row.active .mq-tree-dot {
    background: #fff;
}

.mq-tree-arrow {
    margin-right: auto;
    color: rgba(255,255,255,.45);
    font-size: 13px;
    transition: transform .18s ease;
}

.mq-tree-row.open > .mq-tree-arrow {
    transform: rotate(90deg);
}

.mq-tree-children {
    display: none;
    margin-top: 2px;
}

.mq-tree-children.open {
    display: block;
}

.mq-tree-separator {
    height: 1px;
    margin: 8px 9px;
    background: rgba(255,255,255,.08);
}


/* ============================================================
   MEDIQ UI POLISH - LARGER TYPOGRAPHY + TOP WELCOME
   ============================================================ */
#mediq-dashboard .mq-user-name { font-size: 15px; }
#mediq-dashboard .mq-user-role { font-size: 12px; }
#mediq-dashboard .mq-tree-title { font-size: 12px; }
#mediq-dashboard .mq-tree-row { font-size: 13px; min-height: 42px; }
#mediq-dashboard .mq-tree-row.level-2 { font-size: 12.5px; }
#mediq-dashboard .mq-tree-row.level-3 { font-size: 12px; }
#mediq-dashboard .mq-tree-row.level-4 { font-size: 11.7px; }
#mediq-dashboard .mq-logout { font-size: 13px; }
#mediq-dashboard .mq-page-title { font-size: 23px; }
#mediq-dashboard .mq-page-description { font-size: 13px; }
#mediq-dashboard .mq-center { font-size: 13px; }
#mediq-dashboard .mq-bread-item { font-size: 13px; }
#mediq-dashboard .mq-hero-title { font-size: 19px; }
#mediq-dashboard .mq-hero-desc { font-size: 13px; }
#mediq-dashboard .mq-back-btn { font-size: 13px; }
#mediq-dashboard .mq-section-title { font-size: 17px; }
#mediq-dashboard .mq-section-desc { font-size: 12px; }
#mediq-dashboard .mq-module-name { font-size: 15px; }
#mediq-dashboard .mq-action-title { font-size: 16px; }
#mediq-dashboard .mq-action-sub { font-size: 12px; }
#mediq-dashboard .mq-list-option { font-size: 13px; }
#mediq-dashboard .mq-preview-title { font-size: 17px; }
#mediq-dashboard .mq-preview-description,
#mediq-dashboard .mq-demo-text { font-size: 12px; }
#mediq-dashboard .mq-demo-button { font-size: 13px; }
#mediq-dashboard .mq-empty-cycle strong { font-size: 18px; }
#mediq-dashboard .mq-empty-cycle span { font-size: 13px; }
#mediq-dashboard .mq-toast { font-size: 13px; }

#mediq-dashboard .mq-header-welcome {
    display:flex; align-items:center; gap:9px; padding:9px 14px;
    border:1px solid rgba(8,185,176,.20); border-radius:999px;
    background:rgba(255,255,255,.82); box-shadow:0 7px 22px rgba(7,53,83,.055);
    color:#587287; font-size:13px; font-weight:700; white-space:nowrap;
}
#mediq-dashboard .mq-header-welcome strong { color:var(--navy); font-size:14px; font-weight:900; }
#mediq-dashboard .mq-welcome-dot { width:8px; height:8px; border-radius:50%; background:var(--primary); box-shadow:0 0 0 4px rgba(8,185,176,.10); }
#mediq-dashboard .mq-header-left { display:flex; align-items:center; gap:10px; }
#mediq-dashboard .mq-module-card { box-shadow:0 10px 30px rgba(19,65,90,.05); }
#mediq-dashboard .mq-module-card:hover { transform:translateY(-5px); box-shadow:0 20px 45px rgba(19,65,90,.10); }
#mediq-dashboard .mq-hero { box-shadow:0 18px 42px rgba(7,53,83,.12); }


/* ===== FINAL UI REFINEMENTS ===== */
#mediq-dashboard .mq-header { min-height: 92px; }
#mediq-dashboard .mq-header-left { margin-right:auto; }
#mediq-dashboard .mq-header-welcome { padding:10px 16px; }
#mediq-dashboard .mq-breadcrumb { min-height:46px; }
#mediq-dashboard .mq-hero { margin-top:14px; }
#mediq-dashboard .mq-tree { scrollbar-width:none; -ms-overflow-style:none; }
#mediq-dashboard .mq-tree::-webkit-scrollbar { display:none !important; width:0 !important; }
#mediq-dashboard .mq-sidebar { overflow:hidden; }


#mediq-dashboard .mq-bread-link {
    cursor: pointer;
    transition: color .15s ease, background .15s ease;
    border-radius: 7px;
    padding: 4px 6px;
}
#mediq-dashboard .mq-bread-link:hover {
    color: var(--primary) !important;
    background: rgba(8,185,176,.08);
}

</style>



<div class="mq-app">


    <!-- =====================================================
         MAIN
         ===================================================== -->

    <main class="mq-main">


        <!-- HEADER -->

        <header class="mq-header">

            <div class="mq-header-right">

                <div
                    id="mqPageTitle"
                    class="mq-page-title"
                >
                    تأمین
                </div>

                <div
                    id="mqPageDesc"
                    class="mq-page-description"
                >
                    مدیریت فرآیند تأمین تجهیزات پزشکی
                </div>

            </div>


            <div class="mq-header-left">
                <div class="mq-header-welcome">
                    <span class="mq-welcome-dot"></span>
                    <strong id="mqWelcomeUser">کاربر مدیکیو</strong>
                    <span>خوش آمدید</span>
                </div>
            </div>

        </header>



        <!-- HERO -->

        <section class="mq-hero">

            <div>

                <div
                    id="mqHeroTitle"
                    class="mq-hero-title"
                >
                    مدیریت تجهیزات
                </div>

                <div
                    id="mqHeroDesc"
                    class="mq-hero-desc"
                >
                    بخش موردنظر خود را انتخاب کنید.
                </div>

            </div>


            <button
                id="mqBack"
                class="mq-back-btn"
                type="button"
            >
                بازگشت
            </button>

        </section>



        <!-- BREADCRUMB -->

        <div
            id="mqBreadcrumb"
            class="mq-breadcrumb"
        ></div>



        <!-- DYNAMIC VIEW -->

        <div
            id="mqView"
            class="mq-view"
        ></div>


    </main>



    <!-- =====================================================
         SIDEBAR
         ===================================================== -->

    <aside class="mq-sidebar">


        <div class="mq-logo">

            <img
                src="/download/attachments/174855060/MediQ%20Heart%20Medical%20Logo.png"
                alt="MediQ"
            >

        </div>


        <div class="mq-life-title">
            چرخه عمر تجهیزات
        </div>


        <div class="mq-life">


            <div
                class="mq-life-item active"
                data-cycle="supply"
            >

                <div class="mq-life-icon">

                    <svg viewBox="0 0 24 24">

                        <path d="M4 7h16"></path>
                        <path d="M6 7l1 13h10l1-13"></path>
                        <path d="M9 4h6"></path>

                    </svg>

                </div>

                تأمین

            </div>



            <div
                class="mq-life-item"
                data-cycle="operation"
            >

                <div class="mq-life-icon">

                    <svg viewBox="0 0 24 24">

                        <circle
                            cx="12"
                            cy="12"
                            r="3"
                        ></circle>

                        <path d="M12 3v3"></path>
                        <path d="M12 18v3"></path>
                        <path d="M3 12h3"></path>
                        <path d="M18 12h3"></path>

                    </svg>

                </div>

                بهره‌برداری

            </div>



            <div
                class="mq-life-item"
                data-cycle="replacement"
            >

                <div class="mq-life-icon">

                    <svg viewBox="0 0 24 24">

                        <path d="M4 7h11"></path>
                        <path d="M12 4l3 3-3 3"></path>

                        <path d="M20 17H9"></path>
                        <path d="M12 14l-3 3 3 3"></path>

                    </svg>

                </div>

                جایگزینی

            </div>



            <div
                class="mq-life-item"
                data-cycle="maintenance"
            >

                <div class="mq-life-icon">

                    <svg viewBox="0 0 24 24">

                        <path
                            d="M14 6a4 4 0 0 0 4 4l-8 8-4-4 8-8z"
                        ></path>

                    </svg>

                </div>

                نگهداری

            </div>


        </div>




        <!-- MEDIQ NAVIGATION TREE -->
        <div class="mq-tree-title">ساختار تأمین</div>

        <div class="mq-tree" id="mqTree">

            <div class="mq-tree-row level-1 active" data-tree-action="equipment" data-tree-key="equipment">
                <span class="mq-tree-dot"></span>
                <span>مدیریت تجهیزات</span>
                <span class="mq-tree-arrow">‹</span>
            </div>

            <div class="mq-tree-children open" data-tree-group="equipment">

                <div class="mq-tree-row level-2" data-tree-action="property" data-tree-key="property">
                    <span class="mq-tree-dot"></span>
                    <span>مدیریت اموال</span>
                </div>

                <div class="mq-tree-row level-2" data-tree-action="equipmentMaintenance" data-tree-key="equipmentMaintenance">
                    <span class="mq-tree-dot"></span>
                    <span>مدیریت نگهداری و تعمیر</span>
                </div>

                <div class="mq-tree-row level-2" data-tree-action="finance" data-tree-key="finance">
                    <span class="mq-tree-dot"></span>
                    <span>مدیریت مالی و بهره‌وری</span>
                </div>

                <div class="mq-tree-row level-2" data-tree-action="logistics" data-tree-key="logistics">
                    <span class="mq-tree-dot"></span>
                    <span>مدیریت تأمین و لجستیک</span>
                    <span class="mq-tree-arrow">‹</span>
                </div>

                <div class="mq-tree-children" data-tree-group="logistics">

                    <div class="mq-tree-row level-3" data-tree-action="purchase" data-tree-key="purchase">
                        <span class="mq-tree-dot"></span>
                        <span>خرید دارایی</span>
                    </div>

                    <div class="mq-tree-row level-3" data-tree-action="newAsset" data-tree-key="newAsset">
                        <span class="mq-tree-dot"></span>
                        <span>ورود دارایی جدید</span>
                        <span class="mq-tree-arrow">‹</span>
                    </div>

                    <div class="mq-tree-children" data-tree-group="newAsset">
                        <div class="mq-tree-row level-4" data-tree-action="section" data-mode="newAsset" data-section="purchased" data-tree-key="newAsset-purchased"><span class="mq-tree-dot"></span><span>لیست دارایی‌های خریداری شده</span></div>
                        <div class="mq-tree-row level-4" data-tree-action="section" data-mode="newAsset" data-section="technical" data-tree-key="newAsset-technical"><span class="mq-tree-dot"></span><span>شناسنامه فنی</span></div>
                        <div class="mq-tree-row level-4" data-tree-action="section" data-mode="newAsset" data-section="financial" data-tree-key="newAsset-financial"><span class="mq-tree-dot"></span><span>شناسنامه مالی</span></div>
                        <div class="mq-tree-row level-4" data-tree-action="section" data-mode="newAsset" data-section="maintenance" data-tree-key="newAsset-maintenance"><span class="mq-tree-dot"></span><span>شناسنامه نگهداری و تعمیر</span></div>
                        <div class="mq-tree-row level-4" data-tree-action="section" data-mode="newAsset" data-section="commercial" data-tree-key="newAsset-commercial"><span class="mq-tree-dot"></span><span>شناسنامه بازرگانی</span></div>
                    </div>

                    <div class="mq-tree-row level-3" data-tree-action="editAsset" data-tree-key="editAsset">
                        <span class="mq-tree-dot"></span>
                        <span>ویرایش دارایی</span>
                        <span class="mq-tree-arrow">‹</span>
                    </div>

                    <div class="mq-tree-children" data-tree-group="editAsset">
                        <div class="mq-tree-row level-4" data-tree-action="section" data-mode="editAsset" data-section="purchased" data-tree-key="editAsset-purchased"><span class="mq-tree-dot"></span><span>لیست دارایی‌های خریداری شده</span></div>
                        <div class="mq-tree-row level-4" data-tree-action="section" data-mode="editAsset" data-section="technical" data-tree-key="editAsset-technical"><span class="mq-tree-dot"></span><span>شناسنامه فنی</span></div>
                        <div class="mq-tree-row level-4" data-tree-action="section" data-mode="editAsset" data-section="financial" data-tree-key="editAsset-financial"><span class="mq-tree-dot"></span><span>شناسنامه مالی</span></div>
                        <div class="mq-tree-row level-4" data-tree-action="section" data-mode="editAsset" data-section="maintenance" data-tree-key="editAsset-maintenance"><span class="mq-tree-dot"></span><span>شناسنامه نگهداری و تعمیر</span></div>
                        <div class="mq-tree-row level-4" data-tree-action="section" data-mode="editAsset" data-section="commercial" data-tree-key="editAsset-commercial"><span class="mq-tree-dot"></span><span>شناسنامه بازرگانی</span></div>
                    </div>

                    <div class="mq-tree-row level-3" data-tree-action="consumable" data-tree-key="consumable">
                        <span class="mq-tree-dot"></span>
                        <span>کالاهای مصرفی</span>
                    </div>

                </div>
            </div>

            <div class="mq-tree-separator"></div>

            <div class="mq-tree-row level-1" data-tree-action="cycle" data-cycle="operation" data-tree-key="operation">
                <span class="mq-tree-dot"></span><span>بهره‌برداری</span>
            </div>

            <div class="mq-tree-row level-1" data-tree-action="cycle" data-cycle="replacement" data-tree-key="replacement">
                <span class="mq-tree-dot"></span><span>جایگزینی</span>
            </div>

            <div class="mq-tree-row level-1" data-tree-action="cycle" data-cycle="maintenance" data-tree-key="maintenanceCycle">
                <span class="mq-tree-dot"></span><span>نگهداری</span>
            </div>

        </div>


        <div class="mq-sidebar-bottom">

            <div
                id="mqLogout"
                class="mq-logout"
            >
                خروج از حساب کاربری
            </div>

        </div>


    </aside>


</div>



<div
    id="mqToast"
    class="mq-toast"
></div>



<script>

(function () {

"use strict";


/* ============================================================
   STATE
   ============================================================ */

var state = {

    cycle:
        "supply",

    screen:
        "equipment",

    selectedAssetSection:
        "purchased"

};



/* ============================================================
   ELEMENTS
   ============================================================ */

var view =
    document.getElementById(
        "mqView"
    );


var breadcrumb =
    document.getElementById(
        "mqBreadcrumb"
    );


var heroTitle =
    document.getElementById(
        "mqHeroTitle"
    );


var heroDesc =
    document.getElementById(
        "mqHeroDesc"
    );


var backButton =
    document.getElementById(
        "mqBack"
    );


var pageTitle =
    document.getElementById(
        "mqPageTitle"
    );


var pageDesc =
    document.getElementById(
        "mqPageDesc"
    );


var toast =
    document.getElementById(
        "mqToast"
    );



/* ============================================================
   ICONS
   ============================================================ */

var ICONS = {

    property:
        '<path d="M12 3l7 4-7 4-7-4 7-4z"></path>' +
        '<path d="M5 7v9l7 4 7-4V7"></path>' +
        '<path d="M12 11v9"></path>',


    maintenance:
        '<circle cx="12" cy="12" r="3"></circle>' +
        '<path d="M12 2v3"></path>' +
        '<path d="M12 19v3"></path>' +
        '<path d="M2 12h3"></path>' +
        '<path d="M19 12h3"></path>',


    finance:
        '<circle cx="12" cy="12" r="9"></circle>' +
        '<path d="M8 12h8"></path>' +
        '<path d="M12 8v8"></path>',


    supply:
        '<path d="M4 7h16"></path>' +
        '<path d="M6 7l1 13h10l1-13"></path>' +
        '<path d="M9 4h6"></path>',


    purchase:
        '<path d="M4 5h2l2 11h9l2-7H8"></path>' +
        '<circle cx="10" cy="20" r="1"></circle>' +
        '<circle cx="17" cy="20" r="1"></circle>',


    newAsset:
        '<path d="M12 3l7 4-7 4-7-4 7-4z"></path>' +
        '<path d="M5 7v9l7 4 7-4V7"></path>' +
        '<path d="M18 3v6"></path>' +
        '<path d="M15 6h6"></path>',


    edit:
        '<path d="M4 20h4l11-11-4-4L4 16v4z"></path>' +
        '<path d="M13 7l4 4"></path>',


    consumable:
        '<rect x="5" y="4" width="14" height="16" rx="2"></rect>' +
        '<path d="M8 9h8"></path>' +
        '<path d="M8 13h8"></path>'

};



/* ============================================================
   TOAST
   ============================================================ */

var toastTimer = null;


function showToast(message) {

    if (!toast) {
        return;
    }


    toast.textContent =
        message;


    toast.classList.add(
        "show"
    );


    window.clearTimeout(
        toastTimer
    );


    toastTimer =
        window.setTimeout(
            function () {

                toast.classList.remove(
                    "show"
                );

            },
            2200
        );

}



/* ============================================================
   BREADCRUMB
   ============================================================ */

function buildBreadcrumb(items) {

    if (!breadcrumb) {
        return;
    }

    var html = "";

    items.forEach(function (item, index) {

        var isLast = index === items.length - 1;

        html +=
            '<span class="' +
            (isLast ? 'mq-bread-item mq-bread-current' : 'mq-bread-item mq-bread-link') +
            '" data-bread-label="' + item + '">' +
            item +
            '</span>';

        if (!isLast) {
            html += '<span class="mq-bread-separator">/</span>';
        }
    });

    breadcrumb.innerHTML = html;

    var links = breadcrumb.querySelectorAll('.mq-bread-link');
    for (var i = 0; i < links.length; i++) {
        links[i].onclick = function () {
            var label = this.getAttribute('data-bread-label');

            if (label === 'تأمین' || label === 'مدیریت تجهیزات') {
                renderEquipment();
            }
            else if (label === 'مدیریت تأمین و لجستیک') {
                renderLogistics();
            }
            else if (label === 'ورود دارایی جدید') {
                state.selectedAssetSection = 'purchased';
                renderAssetSections('newAsset');
            }
            else if (label === 'ویرایش دارایی') {
                state.selectedAssetSection = 'purchased';
                renderAssetSections('editAsset');
            }
        };
    }

}


/* ============================================================
   CARD
   ============================================================ */

function moduleCard(
    title,
    icon,
    action,
    clickable
) {

    return (

        '<div class="mq-module-card" ' +

            (
                clickable
                    ? 'data-action="' +
                      action +
                      '"'
                    : ''
            ) +

        '>' +

            '<div class="mq-module-icon">' +

                '<svg viewBox="0 0 24 24">' +

                    icon +

                '</svg>' +

            '</div>' +

            '<div class="mq-module-name">' +
                title +
            '</div>' +

            (
                clickable
                    ? '<div class="mq-module-arrow">‹</div>'
                    : ''
            ) +

        '</div>'

    );

}



/* ============================================================
   SCREEN : EQUIPMENT
   ============================================================ */

function renderEquipment() {

    state.screen =
        "equipment";


    pageTitle.textContent =
        "تأمین";


    pageDesc.textContent =
        "مدیریت فرآیند تأمین تجهیزات پزشکی";


    heroTitle.textContent =
        "مدیریت تجهیزات";


    heroDesc.textContent =
        "حوزه موردنظر را انتخاب کنید.";


    backButton.style.display =
        "none";


    buildBreadcrumb(
        [
            "تأمین",
            "مدیریت تجهیزات"
        ]
    );


    view.innerHTML =

        '<div class="mq-section-head">' +

            '<div>' +

                '<div class="mq-section-title">' +
                    'مدیریت تجهیزات' +
                '</div>' +

                '<div class="mq-section-desc">' +
                    'یکی از حوزه‌های مدیریت تجهیزات را انتخاب کنید.' +
                '</div>' +

            '</div>' +

        '</div>' +


        '<div class="mq-card-grid">' +


            moduleCard(
                "مدیریت اموال",
                ICONS.property,
                "",
                false
            ) +


            moduleCard(
                "مدیریت نگهداری و تعمیر",
                ICONS.maintenance,
                "",
                false
            ) +


            moduleCard(
                "مدیریت مالی و بهره‌وری",
                ICONS.finance,
                "",
                false
            ) +


            moduleCard(
                "مدیریت تأمین و لجستیک",
                ICONS.supply,
                "logistics",
                true
            ) +


        '</div>';


    bindActions();
    mqTreeActivate("equipment");

}



/* ============================================================
   SCREEN : LOGISTICS
   ============================================================ */

function renderLogistics() {

    state.screen =
        "logistics";


    heroTitle.textContent =
        "مدیریت تأمین و لجستیک";


    heroDesc.textContent =
        "عملیات موردنظر را انتخاب کنید.";


    backButton.style.display =
        "inline-block";


    buildBreadcrumb(
        [
            "تأمین",
            "مدیریت تجهیزات",
            "مدیریت تأمین و لجستیک"
        ]
    );


    view.innerHTML =

        '<div class="mq-section-head">' +

            '<div>' +

                '<div class="mq-section-title">' +
                    'مدیریت تأمین و لجستیک' +
                '</div>' +

                '<div class="mq-section-desc">' +
                    'عملیات مرتبط با تأمین و لجستیک تجهیزات' +
                '</div>' +

            '</div>' +

        '</div>' +


        '<div class="mq-action-grid">' +


            actionCard(
                "خرید دارایی",
                "فرآیند خرید دارایی",
                ICONS.purchase,
                "purchase"
            ) +


            actionCard(
                "ورود دارایی جدید",
                "ثبت و تکمیل اطلاعات دارایی جدید",
                ICONS.newAsset,
                "newAsset"
            ) +


            actionCard(
                "ویرایش دارایی",
                "مشاهده و ویرایش اطلاعات دارایی موجود",
                ICONS.edit,
                "editAsset"
            ) +


            actionCard(
                "کالاهای مصرفی",
                "مدیریت کالاهای مصرفی",
                ICONS.consumable,
                "consumable"
            ) +


        '</div>';


    bindActions();
    mqTreeActivate("logistics");

}



function actionCard(
    title,
    subtitle,
    icon,
    action
) {

    return (

        '<div class="mq-action-card" data-action="' +
            action +
        '">' +

            '<div class="mq-action-icon">' +

                '<svg viewBox="0 0 24 24">' +

                    icon +

                '</svg>' +

            '</div>' +

            '<div>' +

                '<div class="mq-action-title">' +
                    title +
                '</div>' +

                '<div class="mq-action-sub">' +
                    subtitle +
                '</div>' +

            '</div>' +

        '</div>'

    );

}



/* ============================================================
   ASSET SECTION SCREEN
   ============================================================ */

function renderAssetSections(mode) {

    state.screen =
        mode;


    var isNew =
        mode ===
        "newAsset";


    var title =
        isNew
            ? "ورود دارایی جدید"
            : "ویرایش دارایی موجود";


    heroTitle.textContent =
        title;


    heroDesc.textContent =
        isNew
            ? "اطلاعات موردنیاز برای ورود دارایی را انتخاب کنید."
            : "بخش موردنظر برای ویرایش دارایی را انتخاب کنید.";


    backButton.style.display =
        "inline-block";


    buildBreadcrumb(
        [
            "تأمین",
            "مدیریت تجهیزات",
            "مدیریت تأمین و لجستیک",
            title
        ]
    );


    view.innerHTML =

        '<div class="mq-list-layout">' +


            '<div class="mq-list-menu">' +


                listOption(
                    "purchased",
                    "لیست دارایی‌های خریداری شده"
                ) +


                listOption(
                    "technical",
                    "شناسنامه فنی"
                ) +


                listOption(
                    "financial",
                    "شناسنامه مالی"
                ) +


                listOption(
                    "maintenance",
                    "شناسنامه نگهداری و تعمیر"
                ) +


                listOption(
                    "commercial",
                    "شناسنامه بازرگانی"
                ) +


            '</div>' +


            '<div class="mq-preview">' +

                '<div id="mqPreviewContent"></div>' +

            '</div>' +


        '</div>';


    bindSectionOptions();


    renderPreview(
        state.selectedAssetSection
    );

    mqTreeActivate(mode + "-" + state.selectedAssetSection);

}



function listOption(
    key,
    title
) {

    return (

        '<div ' +
            'class="mq-list-option" ' +
            'data-section="' +
            key +
            '">' +

            '<span>' +
                title +
            '</span>' +

            '<span class="mq-option-badge">' +
                '‹' +
            '</span>' +

        '</div>'

    );

}



/* ============================================================
   PREVIEW CONTENT
   ============================================================ */

var SECTION_NAMES = {

    purchased:
        "لیست دارایی‌های خریداری شده",

    technical:
        "شناسنامه فنی",

    financial:
        "شناسنامه مالی",

    maintenance:
        "شناسنامه نگهداری و تعمیر",

    commercial:
        "شناسنامه بازرگانی"

};



function renderPreview(section) {

    state.selectedAssetSection =
        section;

    if (state.screen === "newAsset" || state.screen === "editAsset") {
        mqTreeActivate(state.screen + "-" + section);
    }


    var container =
        document.getElementById(
            "mqPreviewContent"
        );


    if (!container) {
        return;
    }


    var title =
        SECTION_NAMES[section];


    container.innerHTML =

        '<div class="mq-preview-title">' +
            title +
        '</div>' +

        '<div class="mq-preview-description">' +

            (
                state.screen ===
                "newAsset"

                    ? "این بخش برای ثبت اطلاعات دارایی جدید استفاده می‌شود."

                    : "این بخش برای مشاهده و ویرایش اطلاعات دارایی موجود استفاده می‌شود."
            ) +

        '</div>' +


        '<div class="mq-demo-box">' +

            '<div class="mq-demo-icon">' +
                '✓' +
            '</div>' +

            '<div class="mq-demo-text">' +

                title +

                '<br>' +

                'در مرحله بعد این بخش به اطلاعات واقعی Jira / Assets متصل می‌شود.' +

            '</div>' +

            '<button ' +
                'class="mq-demo-button" ' +
                'type="button" ' +
                'id="mqDemoButton"' +
            '>' +

                (
                    state.screen ===
                    "newAsset"

                        ? "ثبت اطلاعات"

                        : "مشاهده اطلاعات"
                ) +

            '</button>' +

        '</div>';


    var options =
        document.querySelectorAll(
            "#mediq-dashboard .mq-list-option"
        );


    for (
        var i = 0;
        i < options.length;
        i++
    ) {

        options[i].classList.toggle(
            "active",
            options[i].getAttribute(
                "data-section"
            ) === section
        );

    }


    var demoButton =
        document.getElementById(
            "mqDemoButton"
        );


    if (demoButton) {

        demoButton.onclick =
            function () {

                showToast(
                    "این بخش در مرحله اتصال به Jira / Assets فعال می‌شود."
                );

            };

    }

}



/* ============================================================
   SIMPLE PRESENTATION PAGES
   ============================================================ */

function renderSimplePage(
    title
) {

    heroTitle.textContent =
        title;


    heroDesc.textContent =
        "نمای پرزنت این بخش";


    backButton.style.display =
        "inline-block";


    buildBreadcrumb(
        [
            "تأمین",
            "مدیریت تجهیزات",
            "مدیریت تأمین و لجستیک",
            title
        ]
    );


    view.innerHTML =

        '<div class="mq-empty-cycle">' +

            '<strong>' +
                title +
            '</strong>' +

            '<span>' +
                'این بخش در ادامه فرآیند طراحی تکمیل می‌شود.' +
            '</span>' +

        '</div>';

}



/* ============================================================
   OTHER LIFE CYCLE TABS
   ============================================================ */

function renderOtherCycle(
    key,
    title
) {

    state.cycle =
        key;


    pageTitle.textContent =
        title;


    pageDesc.textContent =
        "چرخه عمر تجهیزات پزشکی";


    heroTitle.textContent =
        title;


    heroDesc.textContent =
        "نمای ساختار این بخش";


    backButton.style.display =
        "none";


    buildBreadcrumb(
        [
            title
        ]
    );


    view.innerHTML =

        '<div class="mq-empty-cycle">' +

            '<strong>' +
                title +
            '</strong>' +

            '<span>' +
                'ساختار این بخش در مرحله بعد طراحی می‌شود.' +
            '</span>' +

        '</div>';

}



/* ============================================================
   BIND MODULE ACTIONS
   ============================================================ */

function bindActions() {

    var elements =
        document.querySelectorAll(
            "#mediq-dashboard [data-action]"
        );


    for (
        var i = 0;
        i < elements.length;
        i++
    ) {

        elements[i].onclick =
            function () {

                var action =
                    this.getAttribute(
                        "data-action"
                    );


                if (
                    action ===
                    "logistics"
                ) {

                    renderLogistics();

                }


                else if (
                    action ===
                    "newAsset"
                ) {

                    renderAssetSections(
                        "newAsset"
                    );

                }


                else if (
                    action ===
                    "editAsset"
                ) {

                    renderAssetSections(
                        "editAsset"
                    );

                }


                else if (
                    action ===
                    "purchase"
                ) {

                    renderSimplePage(
                        "خرید دارایی"
                    );

                }


                else if (
                    action ===
                    "consumable"
                ) {

                    renderSimplePage(
                        "کالاهای مصرفی"
                    );

                }

            };

    }

}



/* ============================================================
   SECTION OPTIONS
   ============================================================ */

function bindSectionOptions() {

    var options =
        document.querySelectorAll(
            "#mediq-dashboard .mq-list-option"
        );


    for (
        var i = 0;
        i < options.length;
        i++
    ) {

        options[i].onclick =
            function () {

                renderPreview(
                    this.getAttribute(
                        "data-section"
                    )
                );

            };

    }

}



/* ============================================================
   BACK
   ============================================================ */

if (backButton) {

    backButton.onclick =
        function () {


            if (
                state.screen ===
                "logistics"
            ) {

                renderEquipment();

            }


            else if (
                state.screen ===
                "newAsset" ||
                state.screen ===
                "editAsset"
            ) {

                renderLogistics();

            }


            else if (
                state.screen === "property" ||
                state.screen === "equipmentMaintenance" ||
                state.screen === "finance"
            ) {

                renderEquipment();

            }

            else if (
                state.screen === "purchase" ||
                state.screen === "consumable"
            ) {

                renderLogistics();

            }

            else {

                renderLogistics();

            }

        };

}



/* ============================================================
   LIFE CYCLE BUTTONS
   ============================================================ */

var lifeItems =
    document.querySelectorAll(
        "#mediq-dashboard .mq-life-item"
    );


for (
    var i = 0;
    i < lifeItems.length;
    i++
) {

    lifeItems[i].onclick =
        function () {

            var cycle =
                this.getAttribute(
                    "data-cycle"
                );


            for (
                var x = 0;
                x < lifeItems.length;
                x++
            ) {

                lifeItems[x]
                    .classList
                    .remove(
                        "active"
                    );

            }


            this.classList.add(
                "active"
            );


            if (
                cycle ===
                "supply"
            ) {

                state.cycle =
                    "supply";


                renderEquipment();

            }


            else if (
                cycle ===
                "operation"
            ) {

                renderOtherCycle(
                    "operation",
                    "بهره‌برداری"
                );

            }


            else if (
                cycle ===
                "replacement"
            ) {

                renderOtherCycle(
                    "replacement",
                    "جایگزینی"
                );

            }


            else if (
                cycle ===
                "maintenance"
            ) {

                renderOtherCycle(
                    "maintenance",
                    "نگهداری"
                );

            }

        };

}



/* ============================================================
   LOGOUT
   ============================================================ */

var logout =
    document.getElementById(
        "mqLogout"
    );


if (logout) {

    logout.onclick =
        function () {

            window.location.href =
                "/logout.action";

        };

}



/* ============================================================
   CURRENT USER / FULL NAME
   ============================================================ */

(function loadMediQCurrentUser() {

    var fallbackUser = "";

    try {
        if (window.AJS && AJS.Meta) {
            fallbackUser = AJS.Meta.get("remote-user") || "";
        }
    } catch (e) {}

    function setWelcomeName(name) {
        var welcomeUser = document.getElementById("mqWelcomeUser");
        if (welcomeUser && name) {
            welcomeUser.textContent = name;
        }
    }

    setWelcomeName(fallbackUser || "کاربر مدیکیو");

    try {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "/rest/api/user/current", true);
        xhr.setRequestHeader("Accept", "application/json");
        xhr.onreadystatechange = function () {
            if (xhr.readyState !== 4 || xhr.status < 200 || xhr.status >= 300) return;
            try {
                var user = JSON.parse(xhr.responseText || "{}");
                setWelcomeName(user.displayName || user.fullName || fallbackUser || "کاربر مدیکیو");
            } catch (e) {}
        };
        xhr.send();
    } catch (e) {}

})();


/* ============================================================
   SIDEBAR TREE
   ============================================================ */

function mqTreeOpen(group, open) {
    var el = document.querySelector('#mediq-dashboard [data-tree-group="' + group + '"]');
    var row = document.querySelector('#mediq-dashboard [data-tree-key="' + group + '"]');
    if (el) el.classList.toggle("open", !!open);
    if (row) row.classList.toggle("open", !!open);
}

function mqTreeReset() {
    var rows = document.querySelectorAll("#mediq-dashboard .mq-tree-row");
    for (var i = 0; i < rows.length; i++) {
        rows[i].classList.remove("active");
        rows[i].classList.remove("parent-active");
    }
}

function mqTreeActivate(key) {
    mqTreeReset();

    var active = document.querySelector('#mediq-dashboard [data-tree-key="' + key + '"]');
    if (active) active.classList.add("active");

    /* Default collapse */
    mqTreeOpen("equipment", false);
    mqTreeOpen("logistics", false);
    mqTreeOpen("newAsset", false);
    mqTreeOpen("editAsset", false);

    if (key === "equipment" || key === "property" || key === "equipmentMaintenance" || key === "finance" ||
        key === "logistics" || key === "purchase" || key === "newAsset" || key === "editAsset" ||
        key === "consumable" || key.indexOf("newAsset-") === 0 || key.indexOf("editAsset-") === 0) {
        mqTreeOpen("equipment", true);
        var p1 = document.querySelector('[data-tree-key="equipment"]');
        if (p1 && key !== "equipment") p1.classList.add("parent-active");
    }

    if (key === "logistics" || key === "purchase" || key === "newAsset" || key === "editAsset" ||
        key === "consumable" || key.indexOf("newAsset-") === 0 || key.indexOf("editAsset-") === 0) {
        mqTreeOpen("logistics", true);
        var p2 = document.querySelector('[data-tree-key="logistics"]');
        if (p2 && key !== "logistics") p2.classList.add("parent-active");
    }

    if (key === "newAsset" || key.indexOf("newAsset-") === 0) {
        mqTreeOpen("newAsset", true);
        var p3 = document.querySelector('[data-tree-key="newAsset"]');
        if (p3 && key !== "newAsset") p3.classList.add("parent-active");
    }

    if (key === "editAsset" || key.indexOf("editAsset-") === 0) {
        mqTreeOpen("editAsset", true);
        var p4 = document.querySelector('[data-tree-key="editAsset"]');
        if (p4 && key !== "editAsset") p4.classList.add("parent-active");
    }
}

function mqTreeSimpleEquipmentPage(title, key) {
    state.screen = key;
    pageTitle.textContent = "تأمین";
    pageDesc.textContent = "مدیریت فرآیند تأمین تجهیزات پزشکی";
    heroTitle.textContent = title;
    heroDesc.textContent = "نمای پرزنت این بخش";
    backButton.style.display = "inline-block";
    buildBreadcrumb(["تأمین", "مدیریت تجهیزات", title]);
    view.innerHTML =
        '<div class="mq-empty-cycle">' +
            '<strong>' + title + '</strong>' +
            '<span>این بخش در ادامه فرآیند طراحی تکمیل می‌شود.</span>' +
        '</div>';
    mqTreeActivate(key);
}

function bindTree() {
    var rows = document.querySelectorAll("#mediq-dashboard .mq-tree-row[data-tree-action]");

    for (var i = 0; i < rows.length; i++) {
        rows[i].onclick = function () {
            var action = this.getAttribute("data-tree-action");

            if (action === "equipment") {
                renderEquipment();
            }
            else if (action === "property") {
                mqTreeSimpleEquipmentPage("مدیریت اموال", "property");
            }
            else if (action === "equipmentMaintenance") {
                mqTreeSimpleEquipmentPage("مدیریت نگهداری و تعمیر", "equipmentMaintenance");
            }
            else if (action === "finance") {
                mqTreeSimpleEquipmentPage("مدیریت مالی و بهره‌وری", "finance");
            }
            else if (action === "logistics") {
                renderLogistics();
            }
            else if (action === "purchase") {
                state.screen = "purchase";
                renderSimplePage("خرید دارایی");
                mqTreeActivate("purchase");
            }
            else if (action === "newAsset") {
                state.selectedAssetSection = "purchased";
                renderAssetSections("newAsset");
            }
            else if (action === "editAsset") {
                state.selectedAssetSection = "purchased";
                renderAssetSections("editAsset");
            }
            else if (action === "consumable") {
                state.screen = "consumable";
                renderSimplePage("کالاهای مصرفی");
                mqTreeActivate("consumable");
            }
            else if (action === "section") {
                var mode = this.getAttribute("data-mode");
                var section = this.getAttribute("data-section");

                if (state.screen !== mode) {
                    state.selectedAssetSection = section;
                    renderAssetSections(mode);
                } else {
                    renderPreview(section);
                }

                mqTreeActivate(mode + "-" + section);
            }
            else if (action === "cycle") {
                var cycle = this.getAttribute("data-cycle");

                if (cycle === "operation") {
                    renderOtherCycle("operation", "بهره‌برداری");
                    mqTreeActivate("operation");
                }
                else if (cycle === "replacement") {
                    renderOtherCycle("replacement", "جایگزینی");
                    mqTreeActivate("replacement");
                }
                else if (cycle === "maintenance") {
                    renderOtherCycle("maintenance", "نگهداری");
                    mqTreeActivate("maintenanceCycle");
                }
            }
        };
    }
}


/* ============================================================
   INITIAL
   ============================================================ */

bindTree();
renderEquipment();


})();

</script>

</div>