| 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: #082f4f#069e98; --text: #173b59; --muted: #70889c#748b9e; --primaryborder: #0bb9b1#dce9ef; --borderbg: #dbe8ee#f4f9fb; --backgroundwhite: #f5fafc#ffffff; position: fixed; inset: 0; width: 100vw; height: 100vh; overflowz-index: hidden9999; z-indexoverflow: 9999hidden; direction: rtl; font-family: Tahoma, Arial, sans-serif; color: var(--text); background: #f5fafc; } /* ===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) 235px255px; direction: ltr; } /* ============================================================ SIDEBAR ============================================================ */ .mq-sidebar { grid-column: 2; height: 100vh; backgroundpadding: linear-gradient(24px 17px; 180deg,direction: rtl; color: #fff; display: flex; #073553,flex-direction: column; background: #082e4blinear-gradient( ); 180deg, padding: #073b5c 25px0%, 17px; direction:#062e4a rtl; 100% display: flex); flexbox-directionshadow: column; color: #fff -12px 0 45px rgba(7,53,83,.11); } /* LOGO */ .mq-logo { width: 100%; text-align: center; padding-bottom: 24px: 3px 5px 22px; border-bottom: 1px solid rgba(255,255,255,.10); } .mq-logo img { width: 165px174px; max-width: 90%92%; height: auto; } /* ============================================================ USER ============================================================ */ .mq-user { margin-top: 18px17px; padding: 14px 15px; border-radius: 13px14px; background: rgba(255,255,255,.07065); border: 1px solid rgba(255,255,255,.08); } .mq-user-name { font-size: 13px12px; font-weight: 800900; } .mq-user-role { margin-top: 5px; font-size: 10px6px; color: rgba(255,255,255,.60); 58); font-size: 9px; font-weight: 600; } /* ============================================================ LIFE CYCLE MENU ============================================================ */ .mq-life-title { margin-top: 25px; 26px 7px 9px; color: rgba(255,255,255,.39); font-size: 9px; font-weight: 700; } .mq-life { display: flex; flex-direction: column; gap: 7px6px; } .mq-life-item { position: relative; min-height: 44px46px; padding: 0 13px; border-radius: 14px11px; display: flex; align-items: center; border-radiusgap: 10px; color: rgba(255,255,255,.7569); font-size: 12px11px; font-weight: 700800; cursor: pointer; transitionuser-select: .15snone; } transition: background .15s ease, color .15s ease, transform .15s ease; } .mq-life-item:hover { color: #fff; background: rgba(255,255,255,.08075); } .mq-life-item.active { color: #fff; background: linear-gradient( 90deg, #0bb9b1#08b9b0, #08a69f#079e99 ); } /* ============================================================ LOGOUT ============================================================ */ .mq-sidebar-bottom { margin-top: auto box-shadow: 0 10px 23px rgba(8,185,176,.18); } .mq-life-logouticon { min-heightwidth: 44px28px; displayheight: flex28px; alignborder-itemsradius: center8px; paddingdisplay: 0 flex; 14pxalign-items: center; borderjustify-radiuscontent: 10pxcenter; colorbackground: rgba(255,255,255,.7007); } .mq-life-item.active .mq-life-icon { font-sizebackground: 11px; cursor: pointer rgba(255,255,255,.14); } .mq-logout:hover {life-icon svg { width: 16px; height: 16px; backgroundfill: none; stroke: currentColor; rgba(255,255,255,.07)stroke-width: 1.9; colorstroke-linecap: round; stroke-linejoin: #fffround; } /* ============================================================ MAINLOGOUT ============================================================ */ .mq-mainsidebar-bottom { gridmargin-columntop: 1auto; } .mq-logout { min-height: 43px; padding: 100vh 0 13px; overflowborder-yradius: auto10px; directiondisplay: rtlflex; padding: align-items: center; gap: 9px; 28pxcolor: clamp(25px, 4vw, 55px) rgba(255,255,255,.65); font-size: 10px; font-weight: 700; 45pxcursor: pointer; } /* =========== .mq-logout:hover { color: #fff; background: rgba(255,255,255,.07); } /* ============================================================ HEADERMAIN ============================================================ */ .mq-headermain { mingrid-heightcolumn: 65px1; displayheight: flex100vh; align-itemsdirection: centerrtl; justifyoverflow-contenty: space-betweenauto; border-bottompadding: 1px solid0 var(--border); clamp(25px,4vw,55px) margin-bottom: 25px45px; } .mq-header-title { color: var(--navy); font-size: 20px; font-weight: 900; } /* ===========/* ================================================================ GRIDHEADER ============================================================ */ .mq-content-gridheader { widthmin-height: 100%88px; display: grid; grid-template-columnsborder-bottom: minmax(250px, .72fr)1px solid minmax(250px, .72fr) var(--border); display: flex; minmax(400px, 1.6fr)align-items: center; justify-content: space-between; minmax(400px, 1.6fr);gap: 20px; } .mq-header-right { gapmin-width: 18px;0; } .mq-page-title { align-items: stretch; } /* ============================================================ CARD ============================================================ */ .mq-cardcolor: var(--navy); font-size: 20px; font-weight: 900; } .mq-page-description { minmargin-heighttop: 415px6px; padding: 20px; border: 1px solidcolor: var(--bordermuted); borderfont-radiussize: 18px10px; background: #fff;font-weight: 600; } /* CENTER */ .mq-center { box-shadowpadding: 0 12px 32px10px rgba(27,72,98,.05); } .mq-card-header {14px; padding-bottom: 14px; border: margin-bottom: 11px; 1px border-bottom:solid 1px solid var(--border); border-radius: 11px; #edf3f6; } .mq-card-title {background: #fff; color: var(--navy)#536f84; font-size: 15px10px; font-weight: 900700; } /* ============================================================ ACTIONBREADCRUMB ============================================================ */ .mq-actionsbreadcrumb { min-height: 54px; display: flex; flexalign-directionitems: columncenter; gap: 5px7px; flex-wrap: wrap; } .mq-bread-actionitem { min-height: 42px; paddingcolor: 0 12px#8197a8; borderfont-radiussize: 9px10px; displayfont-weight: flex700; align-items: center; justify-content: space-between;} .mq-bread-current { color: #49677e; font-size: 11pxvar(--primary-dark); font-weight: 700; cursor: pointer; transition: .15s; 900; } .mq-action:hoverbread-separator { color: #079f99#b6c4cf; background: #effafa; } .mq-arrow { color: #a2b6c4; font-size: 16px; } /*/* ============================================================ FORM CARDSHERO ============================================================ */ .mq-form-cardhero { position: relative; overflow: hidden; min-height: 415px112px; padding: 25px21px 17px24px; border-radius: 18px; color: #fff; 1px soliddisplay: flex; var(--border)align-items: center; borderjustify-radiuscontent: 18pxspace-between; background: #fff; linear-gradient( box-shadow: 0105deg, 12px 32px rgba(27,72,98,.04); } .mq-form-title { #073b5c, min-height: 55px; display: flex; #087c7d align-items: center); justifybox-contentshadow: center; text-align: center; 0 15px color:35px var(--navy);rgba(7,53,83,.10); } .mq-hero::before { font-sizecontent: 13px""; font-weightposition: 900absolute; border-bottom:width: 250px; height: 250px; 1px solidleft: -70px; #edf3f6top: -150px; margin-bottom: 16pxborder-radius: 50%; background: rgba(16,222,205,.14); } .mq-formhero-actionstitle { position: relative; displayz-index: flex2; flexfont-directionsize: column16px; gapfont-weight: 6px900; } .mq-formhero-actiondesc { min-heightposition: 38pxrelative; padding: z-index: 2; margin-top: 6px; 0color: 6pxrgba(255,255,255,.70); displayfont-size: flex10px; align-items: center;} .mq-back-btn { justify-contentposition: centerrelative; borderz-radiusindex: 8px2; colordisplay: none; min-width: 88px; height: #49677e36px; text-align: center; padding: 0 font-size: 10px13px; font-weight: 700; border: 1px solid cursor: pointer rgba(255,255,255,.25); } .mq-form-action:hover { border-radius: 10px; colorbackground: #079f99rgba(255,255,255,.10); color: #fff; backgroundfont-family: #effafainherit; } font-size: 10px; /* font-weight: 800; cursor: pointer; } .mq-back-btn:hover { background: rgba(255,255,255,.16); } /* ============================================================ RESPONSIVECONTENT ============================================================ */ @media(max-width:1400px).mq-view { .mq-content-grid {margin-top: 23px; grid-template-columnsanimation: mqFade repeat(2,minmax(0,1fr)); .22s }ease; } @media(max-width:900px)@keyframes mqFade { .mq-appfrom { grid-template-columnsopacity: 1fr 0; } .mq-sidebar { display: nonetransform: translateY(5px); } .mq-mainto { grid-columnopacity: 1; } .mq-content-grid { grid-template-columns: 1fr transform: translateY(0); } } </style> <div class="mq-app"> <!-- /* ============================================================ SECTION HEADER MAIN ============================================================ */ .mq-section->head { <main class="mq-main"> margin-bottom: 14px; display: flex; <header class="mq-header">align-items: center; <div class="mq-header-title">justify-content: space-between; } .mq-section-title { color: var(--navy); مدیریت تجهیزاتfont-size: 14px; font-weight: 900; } .mq-section-desc { </div>margin-top: 4px; </header> color: <div class="mq-content-grid"> var(--muted); font-size: <!-- 9px; } /* ============================================================ EDIT EXISTING ASSET MODULE CARDS ============================================================ */ .mq-card->grid { display: grid; grid-template-columns: <section class="mq-form-card"> repeat(4,minmax(0,1fr)); gap: 14px; } .mq-module-card { position: relative; <div class="mq-form-title">min-height: 176px; padding: 18px; border: ثبت ویرایش دارایی موجود 1px solid var(--border); </div>border-radius: 17px; background: #fff; cursor: pointer; <div class="mq-form-actions"> box-shadow: 0 9px 26px <div class="mq-form-action">rgba(19,65,90,.035); transition: transform .17s ease, box-shadow .17s ثبتease, داراییهای خریداری شده border-color .17s ease; } .mq-module-card:hover { transform: </div>translateY(-4px); border-color: rgba(8,185,176,.45); <div class="mq-form-action">box-shadow: 0 18px 40px rgba(19,65,90,.08); } .mq-module-icon { شناسنامه فنیwidth: 48px; height: 48px; margin-bottom: 17px; border-radius: 14px; </div>display: flex; align-items: center; justify-content: center; color: <div class="mq-form-action"> var(--primary-dark); background: linear-gradient( شناسنامه مالی145deg, </div> #e9fbf9, #d9f7f3 <div class="); } .mq-form-action"> 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: </div> var(--navy); font-size: 12px; font-weight: 900; <div class="mq-form-action">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; </div>justify-content: center; color: #8ea5b5; </div> background: #f3f7f9; font-size: </section> 18px; } .mq-module-card:hover .mq-module-arrow { color: #fff; background: <!var(--primary); } /* ================================================= NEW ASSET ============ LARGE ACTION CARDS ============================================================ */ .mq-action->grid { display: grid; <section class="mq-form-card"> grid-template-columns: repeat(2,minmax(0,1fr)); <div class="mq-form-title">gap: 15px; } .mq-action-card { min-height: 155px; padding: 19px; ثبت ورود دارایی جدید border: 1px solid </div> var(--border); border-radius: 17px; background: #fff; <div class="mq-form-actions">cursor: pointer; display: flex; align-items: center; gap: 16px; <div class="mq-form-action">transition: .17s; } .mq-action-card:hover { border-color: rgba(8,185,176,.45); transform: ثبت داراییهای خریداری شدهtranslateY(-2px); box-shadow: 0 </div> 15px 35px rgba(24,74,98,.06); } .mq-action-icon { flex: 0 0 auto; <div class="mq-form-action">width: 54px; height: 54px; border-radius: 15px; display: flex; align-items: center; justify-content: center; شناسنامه فنیcolor: var(--primary-dark); background: </div>#e7faf8; } .mq-action-icon svg { width: 25px; height: 25px; fill: none; <div class="mq-form-action"> stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .mq-action-title { شناسنامه مالیcolor: var(--navy); font-size: 13px; font-weight: </div>900; } .mq-action-sub { margin-top: 6px; color: <div class="mq-form-action">var(--muted); شناسنامه نگهداری و تعمیر font-size: 9px; } /* ============================================================ ASSET LIST MENU ============================================================ */ .mq-list-layout { display: grid; grid-template-columns: 330px </div>minmax(0,1fr); gap: 16px; <div class="mq-form-action"> direction: ltr; } .mq-list-menu, .mq-preview { direction: rtl; border: شناسنامه بازرگانی1px solid var(--border); border-radius: 18px; </div>background: #fff; box-shadow: 0 </div> 10px 28px </section> rgba(19,65,90,.035); } .mq-list-menu { padding: 13px; } .mq-list-option { min-height: 52px; <!margin-- =================================================bottom: 5px; padding: 0 MANAGEMENT CARD 213px; border-radius: 10px; display: flex; ================================================= --> align-items: center; justify-content: space-between; color: #536f84; <section class="mq-card">font-size: 10px; font-weight: 800; cursor: pointer; <div class="mq-card-header">transition: .15s; } .mq-list-option:hover { color: var(--primary-dark); background: <div class="mq-card-title"> #f1faf9; } .mq-list-option.active { color: #087f7a; background: مدیریت تجهیزات#e9f9f7; } .mq-option-badge { width: 26px; height: 26px; border-radius: 7px; </div>display: flex; align-items: center; </div> justify-content: center; background: <div class="mq-actions">rgba(8,185,176,.09); color: <div class="mq-action">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; } } </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-center"> بیمارستان / مرکز درمانی </div> </header> <!-- BREADCRUMB --> <div id="mqBreadcrumb" class="mq-breadcrumb" ></div> <!-- 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> <!-- 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-user"> <div id="mqUserName" class="mq-user-name" > کاربر مدیکیو </div> <div class="mq-user-role"> مدیریت تجهیزات پزشکی </div> </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> <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' ) + '">' + item + '</span>'; if (!isLast) { html += '<span class="mq-bread-separator">/</span>'; } } ); breadcrumb.innerHTML = html; } /* ============================================================ 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(); } /* ============================================================ 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(); } 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 ); } 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; 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( <span> "خرید دارایی" مدیریت تأمین و لجستیک ); </span> } else if ( <spanaction class="mq-arrow">‹</span>=== "consumable" ) { </div> renderSimplePage( <div class="mq-action"> "کالاهای مصرفی" ); <span>} }; } } /* ============================================================ SECTION OPTIONS ============================================================ */ function خرید داراییbindSectionOptions() { var options = </span> document.querySelectorAll( <span class="mq-arrow">‹</span> "#mediq-dashboard .mq-list-option" </div>); for ( var i <div class="mq-action"> = 0; i < options.length; i++ ) <span>{ options[i].onclick = ورود دارایی جدید function () { </span> renderPreview( this.getAttribute( <span class="mq-arrow">‹</span> </div> "data-section" <div class="mq-action"> ) ); <span> }; ویرایش دارایی} } /* ============================================================ BACK ============================================================ */ if (backButton) { backButton.onclick = function () { if </span> ( <span class="mq-arrow">‹</span> state.screen === </div> "logistics" <div class="mq-action">) { renderEquipment(); <span> } else if ( کالاهای مصرفی state.screen === </span> "newAsset" || state.screen === <span class="mq-arrow">‹</span> "editAsset" </div>) { </div>renderLogistics(); </section>} <!-- ================================================= else { renderLogistics(); MANAGEMENT CARD 1 } }; } /* ================================================== --> <section class="mq-card"> <div class="mq-card-header"> <div class="mq-card-title"> مدیریت تجهیزات </div> ======== LIFE CYCLE BUTTONS ============================================================ */ var lifeItems = document.querySelectorAll( </div> <div class="mq-actions"> "#mediq-dashboard .mq-life-item" ); for ( var i = 0; i < lifeItems.length; i++ ) { <div class="mq-action"> lifeItems[i].onclick = function () { var cycle <span>= this.getAttribute( مدیریت اموال "data-cycle" </span>); for ( <span class="mq-arrow">‹</span> var x = 0; </div> x < lifeItems.length; <div class="mq-action"> x++ ) { <span> lifeItems[x] مدیریت نگهداری و تعمیر .classList </span> .remove( <span class="mq-arrow">‹</span> active" </div> ); <div class="mq-action">} this.classList.add( <span> "active" ); مدیریت مالی و بهرهوریif ( cycle === </span> "supply" <span class="mq-arrow">‹</span>) { </div> state.cycle = <div class="mq-action">"supply"; renderEquipment(); <span>} else if ( مدیریت تأمین وcycle لجستیک=== "operation" </span> ) { renderOtherCycle( <span class="mq-arrow">‹</span> "operation", </div> </div> "بهرهبرداری" </section> ); </div> </main> <!-- ===================================================== } else SIDEBAR if ( ===================================================== --> cycle === <aside class="mq-sidebarreplacement"> ) { <div class="mq-logo"> renderOtherCycle( "replacement", <img src="/download/attachments/174855060/MediQ%20Heart%20Medical%20Logo.png"جایگزینی" alt="MediQ"); >} </div> else if ( <divcycle class="mq-user"> === <div class="mq-user-name">"maintenance" ) { سیما صیاف </div> renderOtherCycle( <div class="mq-user-role">"maintenance", مدیریت تجهیزات "نگهداری" </div> </div>); <div class="mq-life"> } }; } /* ============================================================ <div class="mq-life-item active"> تأمین </div> LOGOUT ============================================================ */ var logout = document.getElementById( <div class="mq-life-item">"mqLogout" بهرهبرداری </div>); if (logout) { <div class="mq-life-item">logout.onclick = function () { جایگزینی </div> window.location.href = <div class="mq-life-item"> "/logout.action"; }; } /* نگهداری </div> </div> ============================================================ CURRENT USER ============================================================ */ try { <div class="mq-sidebar-bottom"> if ( <divwindow.AJS && AJS.Meta id="mqLogout") { var class="mq-logout"remoteUser = >AJS.Meta.get( خروج از حساب کاربری"remote-user" </div>); </div> </aside> </div> <script> (function ( if (remoteUser) { "use strict"; document var logout = document.getElementById( "mqLogout" "mqUserName" ); if (logout) { logout.addEventListener(textContent = "click", remoteUser; } function (} } catch(e) { } window.location.href /* ============================================================ INITIAL "/logout.action"; } ); }============================================================ */ renderEquipment(); })(); </script> </div> |
Page History
Overview
Content Tools
Apps