darmanlink_service_blueprint_persian.html

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
  *{box-sizing:border-box;margin:0;padding:0}
  :root{
    --font-sans:'Vazirmatn',sans-serif;
    --col0:180px;
    --col1:1fr;--col2:1fr;--col3:1fr;--col4:1fr;--col5:1fr;
    --row-pad:10px 14px;
    --fs-label:14px;
    --fs-body:13px;
    --fs-small:12px;
    --radius:5px;
    --color-text-primary:#1a1a1a;
    --color-text-secondary:#555;
    --color-border-secondary:#ccc;
    --color-background-secondary:#f5f5f5;
    --color-background-tertiary:#eaeaea;
  }
  body{
    width:1200px;
    margin:0;
    padding:0;
    font-family:var(--font-sans);
    background:#fff;
    direction:rtl;
  }
  .bp-wrap{
    width:1200px;
    overflow-x:auto;
    font-family:var(--font-sans);
    direction:rtl;
    font-size:var(--fs-body);
    color:var(--color-text-primary);
    padding:16px 0 24px;
  }
  .bp-title{
    text-align:center;
    font-size:22px;
    font-weight:600;
    margin-bottom:8px;
    color:var(--color-text-primary);
    letter-spacing:.01em;
  }
  .bp-subtitle{
    text-align:center;
    font-size:14px;
    color:var(--color-text-secondary);
    margin-bottom:18px;
  }
  .bp-grid{
    display:grid;
    grid-template-columns:var(--col0) repeat(5,1fr);
    min-width:1020px;
    border:1px solid var(--color-border-secondary);
    border-radius:var(--radius);
    overflow:hidden;
  }
  .hdr-row-label{
    grid-column:1;
    background:var(--color-background-tertiary);
    border-left:1px solid var(--color-border-secondary);
    border-bottom:1px solid var(--color-border-secondary);
    padding:var(--row-pad);
    font-size:var(--fs-small);
    color:var(--color-text-secondary);
    display:flex;align-items:center;justify-content:center;
    font-weight:500;
  }
  .hdr-cell{
    background:var(--color-background-tertiary);
    border-left:1px solid var(--color-border-secondary);
    border-bottom:1px solid var(--color-border-secondary);
    padding:8px 10px;
    text-align:center;
    font-size:var(--fs-small);
    font-weight:500;
    color:var(--color-text-primary);
    line-height:1.5;
  }
  .hdr-cell .step-num{
    display:inline-block;
    width:24px;height:24px;
    border-radius:50%;
    background:#3B8BD4;
    color:#fff;
    font-size:13px;font-weight:600;
    line-height:24px;
    text-align:center;
    margin-bottom:4px;
  }
  .row-label{
    background:var(--color-background-secondary);
    border-left:1px solid var(--color-border-secondary);
    border-bottom:1px solid var(--color-border-secondary);
    padding:var(--row-pad);
    font-size:var(--fs-label);
    font-weight:500;
    display:flex;align-items:center;justify-content:center;
    text-align:center;
    line-height:1.5;
    color:var(--color-text-primary);
  }
  .row-label small{
    display:block;font-size:11px;font-weight:400;color:var(--color-text-secondary);margin-top:2px;
  }
  .cell{
    border-left:1px solid var(--color-border-secondary);
    border-bottom:1px solid var(--color-border-secondary);
    padding:var(--row-pad);
    font-size:var(--fs-body);
    line-height:1.6;
    color:var(--color-text-primary);
    vertical-align:top;
  }
  .cell.empty{background:var(--color-background-secondary);opacity:.4;}
  .row-pe .row-label{background:#E6F1FB;color:#0C447C;}
  .row-pe .cell{background:rgba(230,241,251,.25);}
  .row-ca .row-label{background:#EAF3DE;color:#3B6D11;}
  .row-ca .cell{background:rgba(234,243,222,.25);}
  .row-fs .row-label{background:#E1F5EE;color:#0F6E56;}
  .row-fs .cell{background:rgba(225,245,238,.25);}
  .row-bs .row-label{background:#FAEEDA;color:#633806;}
  .row-bs .cell{background:rgba(250,238,218,.25);}
  .row-sp .row-label{background:#FBEAF0;color:#4B1528;}
  .row-sp .cell{background:rgba(251,234,240,.25);}
  .row-fp .row-label{background:#FCEBEB;color:#501313;}
  .row-fp .cell{background:rgba(252,235,235,.2);}
  .divider-row{
    grid-column:1/-1;
    display:flex;
    align-items:center;
    padding:6px 14px;
    font-size:12px;
    font-weight:500;
    gap:8px;
    border-bottom:1px solid var(--color-border-secondary);
  }
  .divider-interaction{
    background:#3B8BD4;
    color:#fff;
  }
  .divider-visibility{
    background:#0F6E56;
    color:#fff;
  }
  .divider-line{flex:1;height:2px;border-radius:1px;}
  .divider-interaction .divider-line{background:rgba(255,255,255,.4);}
  .divider-visibility .divider-line{background:rgba(255,255,255,.4);}
  .badge{
    display:inline-block;
    font-size:11px;
    padding:2px 7px;
    border-radius:3px;
    font-weight:500;
    margin-bottom:4px;
  }
  .badge-blue{background:#B5D4F4;color:#0C447C;}
  .badge-red{background:#F7C1C1;color:#501313;}
  .badge-green{background:#C0DD97;color:#3B6D11;}
  .badge-amber{background:#FAC775;color:#633806;}
  .badge-pink{background:#F4C0D1;color:#4B1528;}
  .root-note{
    display:block;
    margin-top:8px;
    padding:6px 10px;
    background:#F7C1C1;
    color:#501313;
    border-radius:3px;
    font-size:11px;
    font-weight:500;
    border-right:3px solid #E24B4A;
  }
  .effect-note{
    display:block;
    margin-top:8px;
    padding:6px 10px;
    background:#FAC775;
    color:#633806;
    border-radius:3px;
    font-size:11px;
    font-weight:500;
    border-right:3px solid #EF9F27;
  }
  .fp-item{margin-bottom:10px;}
  .fp-label{display:block;font-size:11px;font-weight:600;color:#A32D2D;margin-bottom:3px;}
  .pk-label{display:block;font-size:11px;font-weight:500;color:#0F6E56;margin-bottom:3px;}
  .arrows-row{
    grid-column:2/-1;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    background:var(--color-background-secondary);
    border-bottom:1px solid var(--color-border-secondary);
    padding:4px 0;
  }
  .arrow-cell{
    display:flex;align-items:center;justify-content:center;
    font-size:18px;color:var(--color-text-secondary);
  }
</style>
</head>
<body>
<div class="bp-wrap">
  <div class="bp-title">بلوپرینت خدمات — دارمان‌لینک</div>
  <div class="bp-subtitle">ویزیت آنلاین · نسخه الکترونیک · استعلام موجودی داروخانه · تحویل دارو</div>

  <div class="bp-grid">

    <div class="hdr-row-label">مراحل فرآیند</div>
    <div class="hdr-cell"><span class="step-num">۱</span><br>ثبت علائم و<br>درخواست ویزیت</div>
    <div class="hdr-cell"><span class="step-num">۲</span><br>ویزیت آنلاین و<br>صدور نسخه</div>
    <div class="hdr-cell"><span class="step-num">۳</span><br>ارسال نسخه و<br>استعلام موجودی</div>
    <div class="hdr-cell"><span class="step-num">۴</span><br>تایید موجودی، رزرو<br>سفارش و تخصیص پیک</div>
    <div class="hdr-cell"><span class="step-num">۵</span><br>تحویل دارو و<br>پیگیری وضعیت</div>

    <div class="row-label row-pe">شواهد فیزیکی<small>Physical Evidence</small></div>
    <div class="cell row-pe"><span class="badge badge-blue">پیام</span><br>پیام ثبت درخواست</div>
    <div class="cell row-pe"><span class="badge badge-blue">صفحه</span><br>صفحه ویزیت آنلاین<br><span style="font-size:11px;color:var(--color-text-secondary)">پیام «نسخه صادر شد»</span></div>
    <div class="cell row-pe"><span class="badge badge-blue">اعلان</span><br>پیام «در حال بررسی موجودی»</div>
    <div class="cell row-pe"><span class="badge badge-blue">تایید</span><br>پیام «موجودی تایید شد»<br>نام داروخانه<br>زمان تقریبی تحویل</div>
    <div class="cell row-pe"><span class="badge badge-blue">رهگیری</span><br>کد پیگیری<br>تحویل دارو</div>

    <div class="row-label row-ca">اقدام بیمار<small>Customer Actions</small></div>
    <div class="cell row-ca">بیمار علائم اولیه را ثبت می‌کند.</div>
    <div class="cell row-ca">بیمار وارد ویزیت آنلاین می‌شود.</div>
    <div class="cell row-ca">بیمار وضعیت نسخه و ارسال دارو را در اپلیکیشن می‌بیند.</div>
    <div class="cell row-ca">بیمار بین گزینه‌های تاییدشده تحویل انتخاب می‌کند.</div>
    <div class="cell row-ca">بیمار دارو را دریافت می‌کند.</div>

    <div class="divider-row divider-interaction">
      <span>⬌</span>
      <div class="divider-line"></div>
      <span>خط تعامل: تماس مستقیم بیمار با پلتفرم، پزشک و اپلیکیشن</span>
      <div class="divider-line"></div>
    </div>

    <div class="row-label row-fs">فعالیت‌های قابل مشاهده<small>Frontstage</small></div>
    <div class="cell row-fs empty">—</div>
    <div class="cell row-fs">پزشک شرح حال را تکمیل می‌کند.<br>پزشک نسخه الکترونیک صادر می‌کند.</div>
    <div class="cell row-fs">اپلیکیشن وضعیت نسخه و بررسی موجودی را به بیمار نشان می‌دهد.</div>
    <div class="cell row-fs">بیمار فقط گزینه‌های موجودی کامل و تاییدشده را می‌بیند.<br>زمان تحویل و کد پیگیری نمایش داده می‌شود.</div>
    <div class="cell row-fs">اپلیکیشن وضعیت تحویل را به‌روز می‌کند.</div>

    <div class="divider-row divider-visibility">
      <span>👁</span>
      <div class="divider-line"></div>
      <span>خط دید: بیمار نتیجه را می‌بیند؛ تماس با داروخانه، بررسی دستی موجودی و تخصیص پیک پنهان است.</span>
      <div class="divider-line"></div>
    </div>

    <div class="row-label row-bs">فعالیت‌های پشت‌صحنه<small>Backstage</small></div>
    <div class="cell row-bs empty">—</div>
    <div class="cell row-bs">—</div>
    <div class="cell row-bs">
      سیستم/اپراتور نسخه را به داروخانه‌های طرف قرارداد در محدوده بیمار ارسال می‌کند.<br>
      موجودی همه اقلام نسخه استعلام می‌شود.
      <span class="effect-note">⚠ اثر عملیاتی: نیاز به استعلام دستی و انتخاب داروخانه دارای موجودی کامل</span>
    </div>
    <div class="cell row-bs">
      داروخانه دارای موجودی کامل انتخاب می‌شود.<br>
      داروخانه سفارش را رزرو می‌کند (مثلاً ۳۰ دقیقه).<br>
      پیک تخصیص داده می‌شود.
    </div>
    <div class="cell row-bs">وضعیت سفارش به اپلیکیشن برگردانده می‌شود.</div>

    <div class="row-label row-sp">فرآیندهای پشتیبان<small>Support Processes</small></div>
    <div class="cell row-sp">
      <span class="badge badge-pink">DB</span><br>
      پایگاه اطلاعات داروخانه‌های طرف قرارداد<br>
      کنترل‌های رگولاتوری
    </div>
    <div class="cell row-sp">
      <span class="badge badge-pink">قواعد</span><br>
      لیست داروهای قابل تجویز منطقه‌ای (به‌روزرسانی دستی)<br>
      قواعد جایگزین مجاز — فقط توسط پزشک
    </div>
    <div class="cell row-sp">
      <span class="badge badge-pink">فرآیند</span><br>
      فرآیند دستی تماس/پیام با داروخانه‌ها<br>
      لیست داروهای قابل تامین منطقه‌ای
      <span class="root-note">🔴 ریشه مشکل: نبود سینک لحظه‌ای موجودی در لایه پشتیبان</span>
    </div>
    <div class="cell row-sp">
      <span class="badge badge-pink">رزرو</span><br>
      سیستم ثبت کد رزرو<br>
      فرآیند تخصیص پیک
    </div>
    <div class="cell row-sp">
      <span class="badge badge-pink">لاگ</span><br>
      لاگ مسئولیت هر مرحله
    </div>

    <div class="row-label row-fp">نقاط شکست و پوکایوکه<small>Fail Points &amp; Poka-Yoke</small></div>
    <div class="cell row-fp empty">—</div>
    <div class="cell row-fp">
      <div class="fp-item">
        <span class="fp-label">✗ نقطه شکست ۱</span>
        پزشک دارویی تجویز می‌کند که در هیچ داروخانه‌ای موجود نیست.
        <span class="pk-label" style="margin-top:4px;">✓ پوکایوکه</span>
        لیست داروهای قابل تجویز منطقه‌ای در پنل پزشک با اعتبار روزانه و به‌روزرسانی دستی.
      </div>
    </div>
    <div class="cell row-fp">
      <div class="fp-item">
        <span class="fp-label">✗ نقطه شکست ۲</span>
        داروخانه منتخب فقط بخشی از اقلام نسخه را دارد.
        <span class="pk-label" style="margin-top:4px;">✓ پوکایوکه</span>
        سفارش فقط وقتی تایید شود که داروخانه موجودی همه اقلام را تایید کند؛ وگرنه ارجاع به داروخانه بعدی.
      </div>
    </div>
    <div class="cell row-fp">
      <div class="fp-item">
        <span class="fp-label">✗ نقطه شکست ۳</span>
        موجودی هنگام استعلام تایید می‌شود، اما تا زمان بسته‌بندی تمام می‌شود.
        <span class="pk-label" style="margin-top:4px;">✓ پوکایوکه</span>
        داروخانه باید سفارش را رزرو کند (۳۰ دقیقه) و کد رزرو بدهد. پیام «تایید نهایی» فقط پس از دریافت کد رزرو نمایش داده شود.
      </div>
    </div>
    <div class="cell row-fp empty">—</div>

  </div>
</div>
</body>
</html>