...
| 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);
}
/* MEDIQ -> CONFIFORMS BRIDGE */
.confiforms-registration-control {
position: fixed !important;
left: -10000px !important;
top: -10000px !important;
width: 1px !important;
height: 1px !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: auto !important;
}
/* ============================================================
MEDIQ CONFIFORMS MODAL
============================================================ */
#mqCfModal {
position: fixed;
inset: 0;
z-index: 10050;
display: none;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(3, 35, 55, .48);
backdrop-filter: blur(3px);
direction: rtl;
}
#mqCfModal.open { display: flex; }
#mqCfDialog {
width: min(620px, 94vw);
max-height: 88vh;
overflow: auto;
background: #fff;
border: 1px solid #dce9ef;
border-radius: 20px;
box-shadow: 0 28px 80px rgba(3,35,55,.24);
}
#mqCfHeader {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 22px;
border-bottom: 1px solid #e4eef2;
}
#mqCfHeader strong {
color: #073553;
font-size: 16px;
font-weight: 900;
}
#mqCfClose {
width: 34px;
height: 34px;
border: 0;
border-radius: 9px;
background: #f1f6f8;
color: #557287;
font: 700 20px/34px Tahoma,Arial,sans-serif;
cursor: pointer;
}
#mqCfClose:hover { background: #e6f4f4; color: #069e98; }
#mqCfBody { padding: 8px 18px 18px; }
/* The real ConfiForms registration panel is moved here at runtime */
#mqCfBody .confiFormsFormBorder {
width: 100% !important;
margin: 0 !important;
border: 0 !important;
box-shadow: none !important;
}
#mqCfBody .confiFormsFormTitle { display: none !important; }
#mqCfBody .confiFormsFormContent { padding: 16px 4px !important; }
#mqCfBody .confiFormsFormFooter {
padding: 14px 4px 4px !important;
background: transparent !important;
}
#mqCfBody table { width: 100% !important; }
#mqCfBody td {
border: 0 !important;
padding: 8px !important;
text-align: right !important;
}
#mqCfBody input[type="text"],
#mqCfBody input[type="password"],
#mqCfBody textarea,
#mqCfBody select {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
min-height: 40px;
border-radius: 9px !important;
direction: rtl;
}
#mqCfBody .entry_metadata_button,
#mqCfBody .entry_metadata { display: none !important; }
#mqCfBody .save-cf-btn {
min-width: 130px;
min-height: 40px;
border: 0 !important;
border-radius: 9px !important;
background: linear-gradient(90deg,#08aaa4,#0bc1b8) !important;
color: #fff !important;
font-family: inherit !important;
font-weight: 800 !important;
cursor: pointer;
}
/* ============================================================
MEDIQ - REAL PURCHASED ASSETS LIST (ConfiForms TableView)
============================================================ */
#mediq-dashboard .mq-assets-head {
margin-top: 18px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-wrap: wrap;
}
#mediq-dashboard .mq-assets-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
#mediq-dashboard .mq-assets-btn {
min-height: 38px;
padding: 0 15px;
border: 1px solid #d8e7ed;
border-radius: 9px;
background: #fff;
color: #47677d;
font-family: inherit;
font-size: 12px;
font-weight: 800;
cursor: pointer;
}
#mediq-dashboard .mq-assets-btn.primary {
border-color: transparent;
color: #fff;
background: linear-gradient(90deg,#08aaa4,#0bc1b8);
}
#mediq-dashboard .mq-assets-host {
margin-top: 14px;
min-height: 140px;
}
#mediq-dashboard .mq-assets-host > table,
#mediq-dashboard .mq-assets-host table {
width: 100% !important;
border-collapse: collapse !important;
direction: rtl !important;
background: #fff !important;
border: 1px solid #dce9ef !important;
border-radius: 12px !important;
overflow: hidden !important;
}
#mediq-dashboard .mq-assets-host th {
padding: 12px 14px !important;
text-align: right !important;
background: #f3f8fa !important;
color: #47677d !important;
border-bottom: 1px solid #dce9ef !important;
font-size: 12px !important;
font-weight: 900 !important;
}
#mediq-dashboard .mq-assets-host td {
padding: 12px 14px !important;
text-align: right !important;
color: #294e68 !important;
border-bottom: 1px solid #edf3f6 !important;
font-size: 12px !important;
font-weight: 700 !important;
}
#mediq-dashboard .mq-assets-message {
min-height: 140px;
display: flex;
align-items: center;
justify-content: center;
padding: 22px;
border: 1px dashed #c5dce5;
border-radius: 12px;
background: #f8fbfc;
color: #6f8799;
text-align: center;
font-size: 12px;
font-weight: 700;
}
</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"
>
تأمین
/* ConfiForms delete proxy inside MediQ */
#mediq-dashboard .mq-cf-delete-proxy {
display: inline-flex !important;
align-items: center;
justify-content: center;
min-width: 58px;
min-height: 30px;
padding: 0 10px !important;
border: 1px solid #f1c9c9 !important;
border-radius: 8px !important;
background: #fff7f7 !important;
color: #b42318 !important;
text-decoration: none !important;
font-family: inherit !important;
font-size: 11px !important;
font-weight: 800 !important;
cursor: pointer !important;
}
#mediq-dashboard .mq-cf-delete-proxy:hover {
background: #ffeded !important;
border-color: #e8aaaa !important;
}
</style>
<div class="mq-app">
<!-- =====================================================
</div>
MAIN
===================================================== -->
<div<main class="mq-main">
<!-- HEADER -->
<header idclass="mqPageDescmq-header">
<div class="mq-pageheader-descriptionright">
><div
مدیریت فرآیند تأمین تجهیزات پزشکی
id="mqPageTitle"
</div>
class="mq-page-title"
</div>
>
<div class="mq-header-left">
تأمین
<div class="mq-header-welcome">
</div>
<span class="mq-welcome-dot"></span> <div
<strong id="mqWelcomeUsermqPageDesc">کاربر مدیکیو</strong>
<span>خوش آمدید</span>class="mq-page-description"
</div>>
</div>
</header>
مدیریت فرآیند تأمین تجهیزات پزشکی
<!-- HERO -->
<section class="mq-hero"> </div>
<div></div>
<div<div class="mq-header-left">
<div idclass="mqHeroTitlemq-header-welcome">
<span class="mq-herowelcome-titledot"></span>
>
<strong id="mqWelcomeUser">کاربر مدیکیو</strong>
مدیریت تجهیزات
</div>
<span>خوش آمدید</span>
<div</div>
</div>
id="mqHeroDesc"</header>
<!-- HERO -->
<section class="mq-hero-desc">
<div>
>
<div
id="mqHeroTitle"
بخش موردنظر خود را انتخاب کنید. class="mq-hero-title"
</div>
>
مدیریت تجهیزات
</div>
<button<div
id="mqBackmqHeroDesc"
class="mq-backhero-btndesc"
type="button">
>
بخش موردنظر خود را انتخاب کنید.
بازگشت
</button>div>
</section>
div>
<!-- BREADCRUMB -->
<button
<div
id="mqBreadcrumbmqBack"
class="mq-breadcrumbback-btn"
></div>
<!-- DYNAMIC VIEW -->
type="button"
<div>
id="mqView"
بازگشت
class="mq-view"
</button>
></div>
</main>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>
<!-- MEDIQ CONFIFORMS MODAL -->
<div id="mqCfModal" aria-hidden="true">
<div id="mqCfDialog" role="dialog" aria-modal="true" aria-labelledby="mqCfTitle">
<div id="mqCfHeader">
<strong id="mqCfTitle">ثبت دارایی جدید</strong>
<button id="mqCfClose" type="button" aria-label="بستن">×</button>
</div>
<div id="mqCfBody"></div>
</div>
</div>
<div
id="mqToast"
class="mq-toast"
></div>
<script>
(function () {
"use strict";
/* ============================================================
STATE
============================================================ */
var state = {
cycle: */
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>' +
"supply",'<path d="M13 7l4 4"></path>',
screenconsumable:
"equipment",
selectedAssetSection:'<rect x="5" y="4" width="14" height="16" rx="2"></rect>' +
'<path d="M8 9h8"></path>' +
"purchased"'<path d="M8 13h8"></path>'
};
/* ============================================================
ELEMENTSTOAST
============================================================ */
var viewtoastTimer = null;
function showToast(message) {
document.getElementById( if (!toast) {
"mqView"return;
);}
var breadcrumb toast.textContent =
document.getElementById message;
toast.classList.add(
"mqBreadcrumbshow"
);
var heroTitle =
documentwindow.getElementByIdclearTimeout(
"mqHeroTitle"toastTimer
);
var heroDesctoastTimer =
document.getElementById window.setTimeout(
"mqHeroDesc"
function (); {
var backButton =
document.getElementById(
"mqBack"
toast.classList.remove(
);
var pageTitle =
document.getElementById(
"mqPageTitleshow"
);
var pageDesc =
document.getElementById();
"mqPageDesc"
);
var toast =
},
document.getElementById(
2200
"mqToast"
);
}
/* ============================================================
ICONSBREADCRUMB
============================================================ */
function buildBreadcrumb(items) {
if (!breadcrumb) {
return;
}
var html = "";
items.forEach(function (item, index) {
var isLast = index ============= */
var ICONS = {
items.length - 1;
html +=
property:
'<path<span dclass="M12 3l7 4-7 4-7-4 7-4z"></path>' +
' +
(isLast ? 'mq-bread-item mq-bread-current' : 'mq-bread-item mq-bread-link') +
'<path d" data-bread-label="M5' + 7v9l7item 4+ 7-4V7"></path>' +'">' +
item +
'</span>';
if (!isLast) {
html += '<path<span dclass="M12 11v9"></path>',
mq-bread-separator">/</span>';
maintenance:
}
});
'<circle cx="12" cy="12" r="3"></circle>' + breadcrumb.innerHTML = html;
var links = '<path d="M12 2v3"></path>' +breadcrumb.querySelectorAll('.mq-bread-link');
for (var i '<path d="M12 19v3"></path>' += 0; i < links.length; i++) {
'<path d="M2 12h3"></path>' +
links[i].onclick = function () {
'<path d="M19 12h3"></path>',
var label = this.getAttribute('data-bread-label');
finance:
if '<circle(label cx=="12" cy="12" r="9"></circle>' +
'<path d="M8 12h8"></path>' +
'تأمین' || label === 'مدیریت تجهیزات') {
'<path d="M12 8v8"></path>',
supply:
renderEquipment();
'<path d="M4 7h16"></path>' + }
'<path d="M6 7l1 13h10l1-13"></path>' +
'<path d="M9 4h6"></path>',
else if (label === 'مدیریت تأمین و لجستیک') {
purchase:
'<path d="M4 5h2l2 11h9l2-7H8"></path>' + renderLogistics();
'<circle cx="10" cy="20" r="1"></circle>' +
}
'<circle cx="17" cy="20" r="1"></circle>',
else if (label === 'ورود دارایی جدید') {
newAsset:
'<path d="M12 3l7 4-7 4-7-4 7-4z"></path>' +
state.selectedAssetSection = 'purchased';
'<path d="M5 7v9l7 4 7-4V7"></path>' +
renderAssetSections('newAsset');
'<path d="M18 3v6"></path>' + }
'<path d="M15 6h6"></path>',
else if edit:
(label === 'ویرایش دارایی') {
'<path d="M4 20h4l11-11-4-4L4 16v4z"></path>' +
'<pathstate.selectedAssetSection d="M13 7l4 4"></path>',
'purchased';
consumable:
'<rect x="5" y="4" width="14" height="16" rx="2"></rect>' +
renderAssetSections('editAsset');
'<path d="M8 9h8"></path>' + }
'<path d="M8 13h8"></path>'};
}
};
/* ============================================================
TOASTCARD
============================================================ */
var toastTimer = null;
function showToast(message */
function moduleCard(
title,
icon,
action,
clickable
) {
if (!toast) {
return (
'<div class="mq-module-card" ' +
return;(
}
clickable
toast.textContent =
? 'data-action="' +
message;
action +
toast.classList.add(
'"show"'
);
window.clearTimeout(
: toastTimer''
);
toastTimer) =+
window.setTimeout('>' +
function () {'<div class="mq-module-icon">' +
toast.classList.remove(
'<svg viewBox="0 0 24 24">' +
"show"
icon +
);
'</svg>' +
},
2200'</div>' +
);
}
/* ============================================================
BREADCRUMB
'<div ============================================================ */
function buildBreadcrumb(items) {
class="mq-module-name">' +
if (!breadcrumb) {
return;
title }+
var html = "";
items.forEach(function (item, index) { '</div>' +
var isLast = index === items.length - 1;
(
html +=
clickable
'<span class="' +
(isLast ? 'mq-bread-item <div class="mq-bread-current' : 'mq-bread-item mq-bread-link') +
module-arrow">‹</div>'
'" data-bread-label="' + item +: '">' +
item) +
'</span>div>';
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 () {);
}
/* ============================================================
SCREEN : EQUIPMENT
============================================================ */
function renderEquipment() {
state.screen =
"equipment";
pageTitle.textContent =
var label = this.getAttribute('data-bread-label');"تأمین";
pageDesc.textContent =
if (label === 'تأمین' || label === 'مدیریت تجهیزات') {"مدیریت فرآیند تأمین تجهیزات پزشکی";
heroTitle.textContent =
"مدیریت تجهیزات";
renderEquipment();heroDesc.textContent =
"حوزه موردنظر را }انتخاب کنید.";
backButton.style.display =
else if (label === 'مدیریت تأمین و لجستیک') {
"none";
buildBreadcrumb(
[
renderLogistics();"تأمین",
}"مدیریت تجهیزات"
]
else if (label === 'ورود دارایی جدید') {
);
view.innerHTML =
'<div class="mq-section-head">' +
state.selectedAssetSection = 'purchased<div>'; +
renderAssetSections('newAsset');
'<div class="mq-section-title">' +
}
else if (label === 'ویرایش دارایی') {
'مدیریت تجهیزات' +
state.selectedAssetSection = 'purchased';</div>' +
renderAssetSections('editAsset');'<div class="mq-section-desc">' +
}
'یکی };از حوزههای مدیریت تجهیزات را انتخاب کنید.' +
}
}
/* ============================================================
CARD
============================================================ */
function moduleCard(
title,'</div>' +
icon,
action,
clickable
) {'</div>' +
return ( '</div>' +
'<div class="mq-modulecard-cardgrid" >' +
moduleCard(
"مدیریت clickableاموال",
ICONS.property,
? 'data-action="' +
"",
action +false
) +
'"' moduleCard(
"مدیریت نگهداری و تعمیر",
: ''
) +
ICONS.maintenance,
'>' +
"",
'<div class="mq-module-icon">' +
false
'<svg viewBox="0 0 24 24">') +
moduleCard(
icon +
"مدیریت مالی و بهرهوری",
'</svg>' +
ICONS.finance,
'</div>' +
'<div class="mq-module-name">' +",
title +false
'</div>') +
moduleCard(
"مدیریت تأمین و لجستیک",
clickable
ICONS.supply,
? '<div class="mq-module-arrow">‹</div>'
"logistics",
: ''true
) +
'</div>';
bindActions();
mqTreeActivate("equipment");
}
/* ============================================================
SCREEN : EQUIPMENTLOGISTICS
============================================================ */
function renderEquipmentrenderLogistics() {
state.screen =
"equipmentlogistics";
pageTitleheroTitle.textContent =
"تأمین";
pageDesc.textContent =
"مدیریت فرآیند تأمین تجهیزات پزشکی";
heroTitle.textContent =
"مدیریت تجهیزات"و لجستیک";
heroDesc.textContent =
"حوزهعملیات موردنظر را انتخاب کنید.";
backButton.style.display =
"noneinline-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-cardaction-grid">' +
moduleCardactionCard(
"مدیریتخرید اموالدارایی",
ICONS.property"فرآیند خرید دارایی",
""ICONS.purchase,
false"purchase"
) +
moduleCardactionCard(
"ورود دارایی جدید",
"مدیریت نگهداری و تعمیر",
"ثبت و تکمیل اطلاعات دارایی ICONS.maintenanceجدید",
""ICONS.newAsset,
false"newAsset"
) +
moduleCardactionCard(
"مدیریت مالی و بهرهوریویرایش دارایی",
ICONS.finance"مشاهده و ویرایش اطلاعات دارایی موجود",
""ICONS.edit,
false"editAsset"
) +
moduleCardactionCard(
"مدیریت تأمین و لجستیککالاهای مصرفی",
ICONS.supply,
"logistics""مدیریت کالاهای مصرفی",
true
) +
ICONS.consumable,
'</div>';
bindActions();
mqTreeActivate("equipmentconsumable");
}
/* ============================================================
SCREEN : LOGISTICS
============================================================ */
function renderLogistics() {+
state.screen = '</div>';
bindActions();
mqTreeActivate("logistics");
}
function actionCard(
heroTitle.textContent =title,
subtitle,
icon,
"مدیریت تأمین و لجستیک";
action
) {
return (
heroDesc.textContent =
'<div class="mq-action-card" data-action="' +
action "عملیات موردنظر را انتخاب کنید.";
+
'">' +
backButton.style.display =
'<div class="inlinemq-action-block";
buildBreadcrumb(icon">' +
[
'<svg viewBox="0 0 24 "تأمین",
24">' +
"مدیریت تجهیزات",
icon +
"مدیریت تأمین و لجستیک"
]
);'</svg>' +
view.innerHTML =
'<div class="mq-section-head"></div>' +
'<div>' +
'<div class="mq-sectionaction-title">' +
'مدیریت تأمین و لجستیک' title +
'</div>' +
'<div class="mq-sectionaction-descsub">' +
'عملیات مرتبط با تأمین و لجستیک تجهیزات'subtitle +
'</div>' +
'</div>' +
'</div>' +
'<div class="mq-action-grid">' +
actionCard(
"خرید دارایی",
);
}
/* ============================================================
ASSET SECTION SCREEN
============================================================ */
function renderAssetSections(mode) {
state.screen =
"فرآیند خرید دارایی",mode;
var isNew =
ICONS.purchase,mode ===
"purchase"
"newAsset";
var ) +
title =
actionCard(isNew
? "ورود دارایی جدید",
: "ثبت و تکمیل اطلاعات"ویرایش دارایی جدیدموجود",;
ICONS.newAsset,
"newAsset"
heroTitle.textContent =
) +title;
heroDesc.textContent =
actionCard( isNew
? "اطلاعات موردنیاز برای "ویرایشورود دارایی",
را انتخاب کنید."
: "مشاهدهبخش موردنظر وبرای ویرایش اطلاعاتدارایی را داراییانتخاب موجود",کنید.";
backButton.style.display =
"inline-block";
ICONS.edit,
buildBreadcrumb(
[
"editAssetتأمین",
) +
"مدیریت تجهیزات",
actionCard(
"مدیریت تأمین و لجستیک",
"کالاهای مصرفی",title
]
);
"مدیریت کالاهای مصرفی",view.innerHTML =
'<div class="mq-list-layout">' +
ICONS.consumable,
'<div class="mq-list-menu">' +
"consumable"
listOption(
) +
'</div>';
bindActions();
mqTreeActivate("logisticspurchased");
}
function actionCard(
,
title,
subtitle,
icon,
"لیست داراییهای خریداری actionشده"
) {
return (
'<div class="mq-action-card" data-action="' ) +
action +
listOption(
'">' +
'<div class="mq-action-icon">' +
"technical",
'<svg viewBox="0 0 24 24">'شناسنامه +فنی"
) +
icon +
listOption(
'</svg>' +
'</div>' +
"financial",
'<div>' +
"شناسنامه مالی"
'<div class="mq-action-title">' +
) +
title +listOption(
'</div>' +
"maintenance",
'<div class="mq-action-sub">' +
"شناسنامه نگهداری و تعمیر"
subtitle) +
'</div>' +
listOption(
'</div>' +
'</div>'
"commercial",
);
}
/* ============================================================
ASSET SECTION SCREEN
============================================================ */
function renderAssetSections(mode) {
state.screen ="شناسنامه بازرگانی"
mode;
var isNew =
) +
mode ===
"newAsset";'</div>' +
var title =
'<div isNew
class="mq-preview">' +
? "ورود دارایی جدید"'<div id="mqPreviewContent"></div>' +
: "ویرایش دارایی موجود";'</div>' +
heroTitle.textContent =
'</div>';
titlebindSectionOptions();
heroDesc.textContent =renderPreview(
isNewstate.selectedAssetSection
);
mqTreeActivate(mode ? "اطلاعات موردنیاز برای ورود دارایی را انتخاب کنید."+ "-" + state.selectedAssetSection);
}
function listOption(
key,
title
) {
return (
: "بخش موردنظر برای ویرایش دارایی را'<div انتخاب کنید.";
' +
backButton.style.display =
"inline-block";
'class="mq-list-option" ' +
buildBreadcrumb(
[
'data-section="' +
key "تأمین",+
'"مدیریت تجهیزات",>' +
'<span>' +
"مدیریت تأمین و لجستیک",
title +
]
);'</span>' +
view.innerHTML =
'<div<span class="mq-listoption-layoutbadge">' +
'<div class="mq-list-menu">‹' +
'</span>' +
listOption(
"purchased",
'</div>'
);
}
/* ============================================================
PREVIEW CONTENT
============================================================ */
var SECTION_NAMES = {
purchased:
"لیست داراییهای خریداری شده",
technical:
) +"شناسنامه فنی",
financial:
listOption("شناسنامه مالی",
maintenance:
"شناسنامه نگهداری "technicalو تعمیر",
commercial:
"شناسنامه فنیبازرگانی"
) +
};
function mqFindConfiFormsTable() {
var tables listOption(
"financial",
"شناسنامه مالی"= document.querySelectorAll("table");
for (var i = 0; i < ) +
tables.length; i++) {
var table listOption(= tables[i];
if (table.closest("#mediq-dashboard")) continue;
if "maintenance",(table.closest("#mqCfModal")) continue;
if (table.closest("form.aui-confiforms")) continue;
"شناسنامه نگهداری و تعمیر"if (table.closest(".confiFormsFormBorder")) continue;
if (table.querySelectorAll("td").length >= 2) {
) +
return table;
listOption(}
}
return null;
}
function mqFindDeleteControl(row) {
if (!row) return null;
"commercial",
var candidates = row.querySelectorAll('a, button, input[type="button"], input[type="submit"]');
for (var i = 0; i < "شناسنامه بازرگانی"candidates.length; i++) {
var el = candidates[i];
) +
var text = ((el.textContent || el.value || '</div>') +
'').trim().toLowerCase();
var cls = ((el.className '<div class="mq-preview">' +
|| '') + '').toLowerCase();
var title = ((el.getAttribute('title') || '') + '<div id="mqPreviewContent"></div>' +').toLowerCase();
if (text === '</div>delete' +
'</div>';
bindSectionOptions();
renderPreview(
state.selectedAssetSection|| text === 'حذف' || cls.indexOf('delete') >= 0 || title.indexOf('delete') >= 0) {
);
mqTreeActivate(mode + "-" + state.selectedAssetSection);
}
function listOption( return el;
key,
title}
) {}
return (null;
}
function mqBindClonedDeleteControls(sourceTable, clonedTable) {
var sourceRows = '<div ' +sourceTable.querySelectorAll('tr');
var clonedRows 'class="mq-list-option" ' += clonedTable.querySelectorAll('tr');
for (var i = 0; i < 'data-section="' +clonedRows.length; i++) {
var clonedDelete = mqFindDeleteControl(clonedRows[i]);
key +
if (!clonedDelete) continue;
'">' +
var sourceDelete = i < sourceRows.length ? mqFindDeleteControl(sourceRows[i]) : null;
'<span>' +
/* Keep the control visually inside MediQ, but execute the REAL titleConfiForms +
delete control */
clonedDelete.textContent = '</span>' +
حذف';
if '<span class="mq-option-badge">' +
('value' in clonedDelete && clonedDelete.tagName !== 'A') clonedDelete.value = 'حذف';
'‹' +clonedDelete.setAttribute('title', 'حذف رکورد');
'</span>' +clonedDelete.classList.add('mq-cf-delete-proxy');
if '</div>'
(!sourceDelete) {
);
}
/* ============================================================
PREVIEW CONTENT
============================================================ */
var SECTION_NAMES = {
purchased:
clonedDelete.style.display = 'none';
continue;
"لیست داراییهای خریداری شده",}
technical:
(function (realDelete) {
"شناسنامه فنی",
clonedDelete.onclick = function (e) {
financial:
"شناسنامه مالی",
e.preventDefault();
maintenance:
"شناسنامه نگهداری و تعمیر", e.stopPropagation();
commercial:
"شناسنامه بازرگانی"
};
function mqFindConfiFormsTable() try {
var tables = documentwindow.sessionStorage.querySelectorAll("table"setItem('mediqResumeView', 'newAsset-purchased');
for (var i = 0; i < tables.length; i++) {
} catch (ignore) {}
var table = tables[i];
if (table.closest("#mediq-dashboard")) continue;
if (table.closest("#mqCfModal")) continue;
/* Trigger the original ConfiForms control because cloneNode does not copy JS event handlers */
if (table.closest("form.aui-confiforms")) continue;
if (tablerealDelete.closestclick(".confiFormsFormBorder")) continue;
if (table.querySelectorAll("td").length >= 2) {
return false;
return table;
};
}
})(sourceDelete);
return null;}
}
function mqLoadPurchasedAssets(attempt) {
var host = document.getElementById("mqAssetsHost");
if (!host) return;
var table = mqFindConfiFormsTable();
if (!table) {
if ((attempt || 0) < 12) {
window.setTimeout(function () {
mqLoadPurchasedAssets((attempt || 0) + 1);
}, 250);
return;
}
host.innerHTML =
'<div class="mq-assets-message">' +
'خروجی لیست ConfiForms روی صفحه پیدا نشد.' +
'</div>';
return;
}
var clonedTable = table.cloneNode(true);
/* Remove only actionform/editoredit controlsinputs from the copied TableView visual copy; keep Delete and proxy it to the real ConfiForms control */
var controls = clonedTable.querySelectorAll(
'button, input, select, textarea, .aui-button, .confiforms-edit, .confiforms-delete'
'input:not([type="button"]):not([type="submit"]), select, textarea');
for (var i = 0; i < controls.length; i++) {
controls[i].parentNode && controls[i].parentNode.removeChild(controls[i]);
}
mqBindClonedDeleteControls(table, clonedTable);
host.innerHTML = "";
host.appendChild(clonedTable);
}
function mqRenderPurchasedAssets(container) {
container.innerHTML =
'<div class="mq-preview-title">لیست داراییهای خریداری شده</div>' +
'<div class="mq-preview-description">داراییهای ثبتشده</div>' +
'<div class="mq-assets-head">' +
'<div></div>' +
'<div class="mq-assets-actions">' +
'<button class="mq-assets-btn" type="button" id="mqAssetsRefresh">بهروزرسانی لیست</button>' +
'<button class="mq-assets-btn primary" type="button" id="mqAssetsNew">ثبت دارایی جدید</button>' +
'</div>' +
'</div>' +
'<div id="mqAssetsHost" class="mq-assets-host">' +
'<div class="mq-assets-message">در حال بارگذاری داراییها...</div>' +
'</div>';
var addButton = document.getElementById("mqAssetsNew");
if (addButton) addButton.onclick = openMediQAssetForm;
var refreshButton = document.getElementById("mqAssetsRefresh");
if (refreshButton) {
refreshButton.onclick = function () {
try {
window.sessionStorage.setItem("mediqResumeView", "newAsset-purchased");
} catch (e) {}
window.location.reload();
};
}
mqLoadPurchasedAssets(0);
}
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];
if (section === "purchased") {
mqRenderPurchasedAssets(container);
} else {
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 + '</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("فرم این بخش هنوز تعریف نشده است.");
};
}
}
/* ============================================================
MEDIQ <-> CONFIFORMS : NEW ASSET FORM
============================================================ */
var mqCfOriginalParent = null;
var mqCfOriginalNext = null;
function findMediQAssetFormPanel() {
var form = document.querySelector(
'form.aui-confiforms input[name="registrationFormName"][value="mediqNewAsset"]'
);
if (!form) return null;
var panel = form.closest(".confiFormsFormBorder");
return panel || form.parentElement;
}
function openMediQAssetForm() {
var panel = findMediQAssetFormPanel();
var modal = document.getElementById("mqCfModal");
var body = document.getElementById("mqCfBody");
if (!panel || !modal || !body) {
showToast("فرم mediqNewAsset روی این صفحه پیدا نشد.");
return;
}
if (!mqCfOriginalParent) {
mqCfOriginalParent = panel.parentNode;
mqCfOriginalNext = panel.nextSibling;
}
body.appendChild(panel);
panel.style.display = "block";
panel.style.position = "static";
panel.style.left = "auto";
panel.style.top = "auto";
panel.style.width = "100%";
panel.style.height = "auto";
panel.style.opacity = "1";
panel.style.overflow = "visible";
panel.style.pointerEvents = "auto";
modal.classList.add("open");
modal.setAttribute("aria-hidden", "false");
window.setTimeout(function () {
var first = panel.querySelector(
'input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled])'
);
if (first) first.focus();
}, 60);
}
function closeMediQAssetForm() {
var modal = document.getElementById("mqCfModal");
var panel = findMediQAssetFormPanel();
if (panel && mqCfOriginalParent) {
if (mqCfOriginalNext && mqCfOriginalNext.parentNode === mqCfOriginalParent) {
mqCfOriginalParent.insertBefore(panel, mqCfOriginalNext);
} else {
mqCfOriginalParent.appendChild(panel);
}
}
if (modal) {
modal.classList.remove("open");
modal.setAttribute("aria-hidden", "true");
}
}
(function bindMediQAssetModal() {
var modal = document.getElementById("mqCfModal");
var close = document.getElementById("mqCfClose");
if (close) {
close.onclick = closeMediQAssetForm;
}
if (modal) {
modal.onclick = function (e) {
if (e.target === modal) {
closeMediQAssetForm();
}
};
}
document.addEventListener("keydown", function (e) {
if (e.key === "Escape" && modal && modal.classList.contains("open")) {
closeMediQAssetForm();
}
});
})();
/* ============================================================
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();
var mqResumeView = "";
try {
mqResumeView = window.sessionStorage.getItem("mediqResumeView") || "";
if (mqResumeView) {
window.sessionStorage.removeItem("mediqResumeView");
}
} catch (e) {}
if (mqResumeView === "newAsset-purchased") {
state.selectedAssetSection = "purchased";
renderAssetSections("newAsset");
} else {
renderEquipment();
}
})();
</script>
</div>
|