From d567ea555353d85691f33e51e912232245270ccb Mon Sep 17 00:00:00 2001
From: hamed <15238-genius.ha@users.noreply.drupalcode.org>
Date: Thu, 16 Jul 2026 15:44:37 +0330
Subject: [PATCH] fix: RTL stepper connectors and duplicate clock icon in
 session wizard
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SessionStepper copied MUI's LTR connector offsets (left: -50%), which in
the RTL admin drew each connector away from its previous step — a stray
line ran off the card edge past the last step and the first two steps
had no line between them. Swap the offsets so connectors extend toward
the previous step on the right, matching tauri's MUI-flipped rendering.

The acceptance-time field showed two clock icons (custom ClockP + the
browser's native picker indicator); hide the native one like the tauri
source, which has a single ClockField adornment.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../admin/components/SessionStepper.test.tsx  | 35 +++++++++++++++++++
 assets/admin/components/SessionStepper.tsx    |  5 +--
 .../admin/components/session/CreateStep.tsx   |  1 +
 assets/admin/styles.css                       |  5 +++
 4 files changed, 44 insertions(+), 2 deletions(-)
 create mode 100644 assets/admin/components/SessionStepper.test.tsx

diff --git a/assets/admin/components/SessionStepper.test.tsx b/assets/admin/components/SessionStepper.test.tsx
new file mode 100644
index 00000000..924e13cd
--- /dev/null
+++ b/assets/admin/components/SessionStepper.test.tsx
@@ -0,0 +1,35 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import SessionStepper from './SessionStepper';
+
+const STEPS = ['ایجاد سرویس', 'پرداخت', 'جزییات'];
+
+describe('SessionStepper', () => {
+  it('برچسب همه گام‌ها و یک کانکتور به‌ازای هر گام غیر از اولی', () => {
+    render(<SessionStepper steps={STEPS} activeStep={0} />);
+    STEPS.forEach((l) => expect(screen.getByText(l)).toBeInTheDocument());
+    expect(screen.getByTestId('step-connector-1')).toBeInTheDocument();
+    expect(screen.getByTestId('step-connector-2')).toBeInTheDocument();
+    expect(screen.queryByTestId('step-connector-0')).not.toBeInTheDocument();
+  });
+
+  it('کانکتور سمت گامِ قبلی (راست در RTL) کشیده می‌شود، نه بیرون از لبه چپ', () => {
+    render(<SessionStepper steps={STEPS} activeStep={0} />);
+    const c = screen.getByTestId('step-connector-2');
+    // RTL: امتداد به سمت راست (گام قبلی) → left مثبت از مرکز، right منفی
+    expect(c.style.left).toBe('calc(50% + 40px)');
+    expect(c.style.right).toBe('calc(-50% + 40px)');
+  });
+
+  it('کانکتور گام‌های طی‌شده بنفش و بقیه خاکستری', () => {
+    render(<SessionStepper steps={STEPS} activeStep={1} />);
+    // jsdom رنگ hex را به rgb نرمال می‌کند
+    expect(screen.getByTestId('step-connector-1').style.background).toContain('rgb(85, 89, 206)');
+    expect(screen.getByTestId('step-connector-2').style.background).toContain('rgb(234, 234, 240)');
+  });
+
+  it('استپر خالی: بدون کرش و بدون کانکتور', () => {
+    const { container } = render(<SessionStepper steps={[]} activeStep={0} />);
+    expect(container.querySelectorAll('[data-testid^="step-connector"]').length).toBe(0);
+  });
+});
diff --git a/assets/admin/components/SessionStepper.tsx b/assets/admin/components/SessionStepper.tsx
index d9871114..6c01da12 100644
--- a/assets/admin/components/SessionStepper.tsx
+++ b/assets/admin/components/SessionStepper.tsx
@@ -41,12 +41,13 @@ export default function SessionStepper({ activeStep = 0, steps = [] }: { activeS
     <div style={{ display: 'flex', alignItems: 'flex-start', width: '100%', marginBottom: 24 }}>
       {steps.map((label, i) => (
         <div key={label} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', position: 'relative' }}>
-          {/* connector to previous step (tauri ColorlibConnector: top 22, h 3, marginX 40) */}
+          {/* connector to previous step (tauri ColorlibConnector: top 22, h 3, marginX 40).
+              صفحه RTL است و گامِ قبلی سمت راست می‌افتد؛ MUI در tauri این را خودش flip می‌کرد. */}
           {i > 0 && (
             <div
               data-testid={`step-connector-${i}`}
               style={{
-                position: 'absolute', top: 22, right: 'calc(50% + 40px)', left: 'calc(-50% + 40px)',
+                position: 'absolute', top: 22, left: 'calc(50% + 40px)', right: 'calc(-50% + 40px)',
                 height: 3, borderRadius: 1,
                 background: i <= activeStep ? 'linear-gradient(95deg, #5559ce 0%, #5559ce 100%)' : '#eaeaf0',
               }}
diff --git a/assets/admin/components/session/CreateStep.tsx b/assets/admin/components/session/CreateStep.tsx
index cc7a6210..a2a80728 100644
--- a/assets/admin/components/session/CreateStep.tsx
+++ b/assets/admin/components/session/CreateStep.tsx
@@ -270,6 +270,7 @@ export default function CreateStep({ recordUuid, profile, onCreated, onCancel }:
             <ClockP color="#6B7280" size={18} />
             <input
               type="time"
+              className="time-input-plain"
               aria-label="ساعت پذیرش"
               value={time}
               onChange={(e) => setTime(e.target.value)}
diff --git a/assets/admin/styles.css b/assets/admin/styles.css
index 25810ad7..d88ef70d 100644
--- a/assets/admin/styles.css
+++ b/assets/admin/styles.css
@@ -952,3 +952,8 @@ html, body { max-width: 100%; overflow-x: hidden; }
 .dark .inv-table td { border-color: var(--border); }
 .inv-table tbody tr:hover { background: #f4f5fd; }
 .dark .inv-table tbody tr:hover { background: var(--surface-2); }
+
+/* input[type=time] با آیکون سفارشی (گام «ایجاد سرویس»): آیکون native مرورگر حذف
+   می‌شود تا ساعت دوتایی نشود — مثل مبدأ tauri که فقط یک ClockField دارد. */
+.time-input-plain::-webkit-calendar-picker-indicator { display: none; }
+.time-input-plain { appearance: none; -webkit-appearance: none; }