fix ui ux contact log

static/css/operations.css

@@ -56,3 +56,46 @@ body>.voip-call-status{position:fixed!important;z-index:2147483001;right:auto!im
 .template-card-list{max-height:44rem;overflow:auto}.variable-box{border:1px dashed #b9cedb;border-radius:.7rem;background:#f7fbfd;padding:.7rem}.variable-box>b{display:block;margin-bottom:.45rem;color:#3e6077;font-size:.62rem}.variable-box>div{display:flex;flex-wrap:wrap;gap:.3rem}.variable-box code{border-radius:.35rem;background:#e7f3f9;padding:.18rem .35rem;color:#075e8d;font-size:.53rem}
 @media(max-width:1100px){.operations-kpis{grid-template-columns:repeat(3,1fr)}.contact-filter-bar{grid-template-columns:repeat(2,minmax(0,1fr))}.contact-search{grid-column:1/-1}.operations-split,.template-layout,.dispatch-layout{grid-template-columns:1fr}.operations-form-side,.dispatch-history{position:static}.dispatch-history>div,.template-card-list{max-height:none}}
 @media(max-width:700px){.operations-hero{align-items:stretch;flex-direction:column;padding:1.1rem}.operations-hero h1{font-size:1.3rem}.operations-hero-actions{align-items:stretch;flex-direction:column}.security-callout,.template-guide{align-self:stretch}.operations-kpis,.operations-kpis.compact{display:flex;max-width:none;overflow-x:auto;padding-bottom:.25rem}.operations-kpis article{min-width:9rem}.contact-filter-bar{grid-template-columns:1fr}.contact-search{grid-column:auto}.contact-card-grid{grid-template-columns:1fr;padding:.65rem}.contact-result-meta{align-items:flex-start;flex-direction:column;gap:.4rem}.editor-grid{grid-template-columns:1fr;padding:.8rem}.editor-wide{grid-column:auto}.editor-actions,.dispatch-composer>footer{align-items:stretch;flex-direction:column}.editor-actions span{margin:0}.group-selector-tools{grid-template-columns:1fr}.group-selection-count{justify-self:start}.group-choice-list>div{grid-template-columns:1fr}.group-card,.template-card{grid-template-columns:auto minmax(0,1fr) auto}.group-card .status-pill,.template-card .status-pill{grid-column:2}.group-card>a,.template-card>a{grid-column:3;grid-row:1/3}.contact-ticket-stats{grid-template-columns:repeat(2,1fr)}}
+
+/* Staff contact edit history */
+.contact-history{width:100%;max-width:58rem;margin-inline:auto}
+.contact-history__heading{display:flex;align-items:center;gap:.85rem;padding:1.2rem 1.35rem;border-bottom:1px solid #e5edf3;background:linear-gradient(115deg,#f3faff,#fff 70%)}
+.contact-history__heading-icon{display:grid;width:2.7rem;height:2.7rem;flex:none;place-items:center;border-radius:.85rem;background:#e2f2f9;color:#0879a3;font-size:1.55rem;font-weight:700}
+.contact-history__heading h2{margin:0;color:#173f60;font-size:1rem}
+.contact-history__heading p{margin:.3rem 0 0;color:#667f91;font-size:.69rem}
+.contact-history__total{margin-inline-start:auto;white-space:nowrap;border:1px solid #d4e8f1;border-radius:999px;background:#fff;padding:.35rem .7rem;color:#176b92;font-size:.63rem;font-weight:800}
+.contact-history__timeline{margin:0;padding:1.25rem 1.5rem 1.25rem 1.1rem;list-style:none}
+.contact-history__event{position:relative;padding:0 1.65rem 1rem 0}
+.contact-history__event:not(:last-child)::before{position:absolute;top:1.3rem;right:.36rem;bottom:-.35rem;width:2px;background:#dcecf3;content:""}
+.contact-history__event::after{position:absolute;top:1.25rem;right:0;width:.75rem;height:.75rem;border:3px solid #fff;border-radius:50%;background:#1595a7;box-shadow:0 0 0 1px #c3dce8;content:""}
+.contact-history__event:last-child{padding-bottom:0}
+.contact-history__details{overflow:hidden;border:1px solid #dce8ef;border-radius:.9rem;background:#fff;box-shadow:0 8px 22px -20px #123e61}
+.contact-history__details[open]{border-color:#c7e0eb;box-shadow:0 12px 28px -24px #0d5074}
+.contact-history__summary{display:flex;align-items:center;gap:.7rem;min-height:4.3rem;padding:.8rem 1rem;cursor:pointer;list-style:none}
+.contact-history__summary::-webkit-details-marker{display:none}
+.contact-history__summary:hover{background:#f7fbfd}
+.contact-history__summary:focus-visible{outline:3px solid #54a9ca;outline-offset:-3px}
+.contact-history__avatar{display:grid;width:2.35rem;height:2.35rem;flex:none;place-items:center;border-radius:.72rem;background:linear-gradient(135deg,#0b709f,#0d9a9c);color:#fff;font-size:.9rem;font-weight:900}
+.contact-history__identity{display:grid;min-width:0;gap:.2rem}
+.contact-history__identity strong{overflow:hidden;color:#173f60;font-size:.78rem;text-overflow:ellipsis;white-space:nowrap}
+.contact-history__identity time{color:#73899a;font-size:.64rem;font-variant-numeric:tabular-nums}
+.contact-history__count{margin-inline-start:auto;white-space:nowrap;border-radius:999px;background:#edf7fa;padding:.28rem .58rem;color:#18758d;font-size:.61rem;font-weight:800}
+.contact-history__chevron{width:.5rem;height:.5rem;flex:none;border-left:2px solid #68869a;border-bottom:2px solid #68869a;transform:rotate(-45deg);transition:transform .2s}
+.contact-history__details[open] .contact-history__chevron{transform:rotate(135deg)}
+.contact-history__changes{display:grid;gap:.6rem;margin:0;padding:.85rem 1rem 1rem;border-top:1px solid #eaf0f4;background:#fafdff;list-style:none}
+.contact-history__change{display:grid;grid-template-columns:minmax(7rem,10rem) minmax(0,1fr);align-items:center;gap:.8rem}
+.contact-history__change+.contact-history__change{padding-top:.6rem;border-top:1px dashed #e3edf2}
+.contact-history__field{color:#365a72;font-size:.7rem}
+.contact-history__values{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:.55rem;min-width:0}
+.contact-history__value{display:grid;align-content:start;gap:.25rem;min-width:0;min-height:3.3rem;border:1px solid #e1e9ee;border-radius:.65rem;background:#fff;padding:.45rem .65rem}
+.contact-history__value span{color:#8092a0;font-size:.58rem;font-weight:800}
+.contact-history__value b{color:#52687a;font-size:.68rem;font-weight:700;overflow-wrap:anywhere;white-space:pre-wrap}
+.contact-history__value--after{border-color:#cce9e1;background:#f2fbf7}
+.contact-history__value--after span{color:#28846e}
+.contact-history__value--after b{color:#1b6859}
+.contact-history__arrow{color:#7c9ba9;font-size:1rem;font-weight:900}
+.contact-history__empty{display:grid;justify-items:center;gap:.45rem;padding:2.25rem 1rem;text-align:center}
+.contact-history__empty>span{display:grid;width:3rem;height:3rem;place-items:center;border-radius:50%;background:#eef7fa;color:#2183a2;font-size:1.7rem}
+.contact-history__empty strong{color:#274b65;font-size:.82rem}
+.contact-history__empty p{margin:0;color:#78909f;font-size:.68rem}
+@media(max-width:640px){.contact-history__heading{flex-wrap:wrap;padding:1rem}.contact-history__heading p{line-height:1.7}.contact-history__total{margin-inline-start:0;margin-inline-end:auto}.contact-history__timeline{padding:1rem .9rem 1rem .7rem}.contact-history__event{padding-right:1.25rem}.contact-history__summary{gap:.55rem;padding:.7rem}.contact-history__change{grid-template-columns:1fr;gap:.35rem}.contact-history__changes{padding:.7rem}.contact-history__values{gap:.3rem}.contact-history__value{padding:.4rem .45rem}}

templates/tickets/staff_entity_form.html

@@ -9,5 +9,47 @@
   <section class="editor-section"><header><span>۳</span><div><h2>گروه‌بندی</h2><p>عضویت مخاطب در گروه‌های قابل مدیریت را اضافه یا حذف کنید</p></div></header><fieldset class="group-selector" data-contact-group-selector><legend>{{ form.groups.label }}</legend><div class="group-selector-tools"><label><span class="sr-only">جست‌وجوی گروه</span><input type="search" placeholder="جست‌وجوی نام گروه یا واحد…" autocomplete="off" data-group-search></label><span class="group-selection-count" data-group-selection-count aria-live="polite">۰ گروه انتخاب شده</span><button type="button" data-clear-groups>پاک‌کردن انتخاب‌ها</button></div><div class="group-choice-list">{{ form.groups }}</div>{{ form.groups.errors }}<small>{{ form.groups.help_text }}</small><p class="group-empty" data-group-empty hidden>گروهی با این عبارت پیدا نشد.</p></fieldset></section>
   <footer class="editor-actions"><button type="submit">ذخیره مخاطب</button><a href="{% url 'staff_tickets:contacts' %}">انصراف</a><span>اطلاعات ورود یا رمز عبور برای مخاطب ساخته نمی‌شود.</span></footer>
 </form>
-{% if call_customer %}<section class="operations-panel" aria-label="سابقه ویرایش مخاطب"><h2>سابقه ویرایش</h2>{% for entry in contact_edit_logs %}<article><p><strong>{{ entry.actor_name }}</strong> · {{ entry.created_at|date:"Y/m/d H:i" }}</p><ul>{% for change in entry.changes %}<li>{{ change.field }}: «{{ change.before|default:"خالی" }}» ← «{{ change.after|default:"خالی" }}»</li>{% endfor %}</ul></article>{% empty %}<p>هنوز ویرایشی در این بخش ثبت نشده است.</p>{% endfor %}</section>{% endif %}</div>{% endblock %}
+{% if call_customer %}
+<section class="operations-panel contact-history" aria-labelledby="contact-history-title">
+  <header class="contact-history__heading">
+    <span class="contact-history__heading-icon" aria-hidden="true">↺</span>
+    <div>
+      <h2 id="contact-history-title">سابقه ویرایش</h2>
+      <p>تغییرات ثبت‌شده این مخاطب، از جدیدترین به قدیمی‌ترین</p>
+    </div>
+    <span class="contact-history__total">{{ contact_edit_logs|length }} رویداد اخیر</span>
+  </header>
+  <ol class="contact-history__timeline">
+    {% for entry in contact_edit_logs %}
+    <li class="contact-history__event">
+      <details class="contact-history__details" {% if forloop.first %}open{% endif %}>
+        <summary class="contact-history__summary">
+          <span class="contact-history__avatar" aria-hidden="true">{{ entry.actor_name|slice:":1" }}</span>
+          <span class="contact-history__identity">
+            <strong>{{ entry.actor_name }}</strong>
+            <time datetime="{{ entry.created_at|date:'c' }}">{{ entry.created_at|date:"Y/m/d H:i" }}</time>
+          </span>
+          <span class="contact-history__count">{{ entry.changes|length }} تغییر</span>
+          <span class="contact-history__chevron" aria-hidden="true"></span>
+        </summary>
+        <ul class="contact-history__changes">
+          {% for change in entry.changes %}
+          <li class="contact-history__change">
+            <strong class="contact-history__field">{{ change.field }}</strong>
+            <div class="contact-history__values">
+              <div class="contact-history__value contact-history__value--before"><span>قبل</span><b dir="auto">{{ change.before|default:"خالی" }}</b></div>
+              <span class="contact-history__arrow" aria-hidden="true">←</span>
+              <div class="contact-history__value contact-history__value--after"><span>بعد</span><b dir="auto">{{ change.after|default:"خالی" }}</b></div>
+            </div>
+          </li>
+          {% endfor %}
+        </ul>
+      </details>
+    </li>
+    {% empty %}
+    <li class="contact-history__empty"><span aria-hidden="true">↺</span><strong>هنوز ویرایشی ثبت نشده است</strong><p>پس از تغییر اطلاعات مخاطب، جزئیات آن در اینجا نمایش داده می‌شود.</p></li>
+    {% endfor %}
+  </ol>
+</section>
+{% endif %}</div>{% endblock %}
 {% block extra_scripts %}<script defer src="{% static 'js/location-picker.js' %}?v={{ static_asset_version }}"></script><script defer src="{% static 'js/contact-group-selector.js' %}?v={{ static_asset_version }}"></script><script defer src="{% static 'js/voip-call.js' %}?v={{ static_asset_version }}"></script>{% endblock %}