File size: 9,302 Bytes
658ff35
e9af8e8
 
 
 
59856af
e9af8e8
42ac3f3
e9af8e8
 
 
 
 
ab3bd11
e9af8e8
ab3bd11
e9af8e8
42ac3f3
 
 
e9af8e8
42ac3f3
 
 
 
 
 
 
 
 
ab3bd11
28a46a9
42ac3f3
ab3bd11
e9af8e8
 
ab3bd11
 
 
 
 
 
e9af8e8
 
42ac3f3
e9af8e8
 
 
ab3bd11
e9af8e8
 
42ac3f3
 
e9af8e8
 
42ac3f3
 
 
 
 
 
 
 
 
 
e9af8e8
 
 
42ac3f3
 
 
 
 
 
 
 
28a46a9
 
42ac3f3
e9af8e8
28a46a9
 
 
 
e9af8e8
 
42ac3f3
 
 
 
 
 
 
 
 
 
 
 
f0d2927
 
 
 
 
 
 
 
 
 
42ac3f3
 
ab3bd11
e9af8e8
42ac3f3
 
 
 
 
 
e9af8e8
f0d2927
 
 
 
 
 
 
e9af8e8
42ac3f3
e9af8e8
42ac3f3
ab3bd11
e9af8e8
 
f0d2927
 
 
 
 
 
 
42ac3f3
 
 
 
 
28a46a9
 
42ac3f3
 
e9af8e8
 
 
28a46a9
 
 
 
 
 
e9af8e8
 
42ac3f3
 
e9af8e8
 
42ac3f3
e9af8e8
 
42ac3f3
 
 
 
 
 
 
633e8c5
28a46a9
42ac3f3
e9af8e8
42ac3f3
e9af8e8
 
 
 
 
 
917da94
e9af8e8
 
658ff35
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
<!doctype html>
<html lang="ar" dir="rtl">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="theme-color" content="#4137A8" />
    <meta name="robots" content="noindex, nofollow" />
    <title>رصد بيانات المنشآت</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <main>
      <section id="loginView" class="login-view">
        <form id="loginForm" class="login-card" autocomplete="off">
          <div class="brand-mark" aria-hidden="true">
            <svg viewBox="0 0 24 24"><path d="M4 20V8l8-4 8 4v12H4Z" /><path d="M8 20v-7h8v7" /></svg>
          </div>
          <p class="eyebrow">مشروع رصد بيانات المنشآت</p>
          <h1>تسجيل الدخول</h1>
          <p class="login-description">اختر اسم الباحث، ثم أدخل الرقم السري للمتابعة.</p>

          <label for="researcherSelect">اسم المستخدم</label>
          <div class="select-wrap">
            <select id="researcherSelect" required>
              <option value="">جاري تحميل الباحثين...</option>
            </select>
            <svg viewBox="0 0 24 24"><path d="m7 10 5 5 5-5" /></svg>
          </div>

          <label for="password">الرقم السري</label>
          <div class="password-field">
            <input id="password" type="password" inputmode="numeric" autocomplete="new-password" placeholder="****" required />
            <button id="togglePassword" type="button" class="icon-button" aria-label="إظهار الرقم السري">
              <svg viewBox="0 0 24 24"><path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z" /><circle cx="12" cy="12" r="2.8" /></svg>
            </button>
          </div>
          <p id="loginError" class="form-error" role="alert"></p>
          <button id="loginButton" class="primary-button" type="submit">
            <span>دخول</span>
            <svg viewBox="0 0 24 24"><path d="m9 18 6-6-6-6" /></svg>
          </button>
        </form>
      </section>

      <section id="appView" class="app-view" hidden>
        <header class="topbar">
          <div class="topbar-brand">
            <div class="brand-mark small" aria-hidden="true">
              <svg viewBox="0 0 24 24"><path d="M4 20V8l8-4 8 4v12H4Z" /><path d="M8 20v-7h8v7" /></svg>
            </div>
            <div>
              <p id="roleLabel">لوحة الباحث</p>
              <h1>رصد بيانات المنشآت</h1>
            </div>
          </div>
          <div class="topbar-actions">
            <button id="refreshButton" class="secondary-button compact" type="button">
              <svg viewBox="0 0 24 24"><path d="M20 6v5h-5M4 18v-5h5M18 9a7 7 0 0 0-11.8-3M6 15a7 7 0 0 0 11.8 3" /></svg>
              تحديث
            </button>
            <button id="logoutButton" class="secondary-button compact" type="button">
              <svg viewBox="0 0 24 24"><path d="M10 17l5-5-5-5M15 12H3M15 4h4a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-4" /></svg>
              خروج
            </button>
          </div>
        </header>

        <div class="dashboard-shell">
          <section class="hero-panel">
            <div>
              <p class="eyebrow" id="welcomeLabel">مرحبًا</p>
              <h2 id="heroTitle">متابعة وتحديث بيانات المنشآت</h2>
              <p id="heroDescription">تظهر المنشآت المسندة لك فقط، مع إمكانية البحث والتحديث المباشر.</p>
            </div>
            <div class="quick-stats">
              <div><span>الإجمالي</span><strong id="totalCount">0</strong></div>
              <div><span>المكتملة</span><strong id="enteredCount">0</strong></div>
              <div><span>غير المكتملة</span><strong id="missingCount">0</strong></div>
              <div><span>الإنجاز</span><strong id="progressCount">0%</strong></div>
            </div>
            <div class="progress-wrap">
              <span id="progressLabel">نسبة الإنجاز 0%</span>
              <div class="progress-track"><i id="progressBar"></i></div>
            </div>
          </section>

          <section id="adminStats" class="admin-stats" hidden>
            <div class="section-heading">
              <div>
                <p class="eyebrow">إحصائية الباحثين</p>
                <h2>ملخص الإنجاز حسب كل باحث</h2>
              </div>
              <div class="export-actions">
                <button id="exportSummaryButton" class="secondary-button" type="button">تصدير ملف إحصائي مختصر</button>
                <button id="exportFullButton" class="secondary-button" type="button">تصدير ملف تفصيلي كامل</button>
              </div>
            </div>
            <div id="researcherStatsGrid" class="researcher-stats-grid"></div>
            <div class="leader-grid">
              <div class="leader-card">
                <span>أكثر الباحثين إنجازًا</span>
                <strong id="bestResearcher">-</strong>
              </div>
              <div class="leader-card">
                <span>أقل الباحثين إنجازًا</span>
                <strong id="leastResearcher">-</strong>
              </div>
            </div>
          </section>

          <section class="controls-panel">
            <div class="filters-grid">
              <div class="field-group search-group">
                <label for="searchInput">البحث</label>
                <div class="search-wrap">
                  <svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" /><path d="m20 20-4-4" /></svg>
                  <input id="searchInput" type="search" placeholder="اسم المنشأة، السجل التجاري، الحي، الباحث..." />
                </div>
              </div>
              <div id="researcherFilterGroup" class="field-group">
                <label for="researcherFilter">الباحث</label>
                <div class="select-wrap">
                  <select id="researcherFilter"><option value="">كل الباحثين</option></select>
                  <svg viewBox="0 0 24 24"><path d="m7 10 5 5 5-5" /></svg>
                </div>
              </div>
              <div class="field-group">
                <label for="regionFilter">المنطقة</label>
                <div class="select-wrap">
                  <select id="regionFilter"><option value="">كل المناطق</option></select>
                  <svg viewBox="0 0 24 24"><path d="m7 10 5 5 5-5" /></svg>
                </div>
              </div>
              <div class="field-group">
                <label for="districtFilter">الحي</label>
                <div class="select-wrap">
                  <select id="districtFilter"><option value="">كل الأحياء</option></select>
                  <svg viewBox="0 0 24 24"><path d="m7 10 5 5 5-5" /></svg>
                </div>
              </div>
              <div class="field-group">
                <label for="statusFilter">حالة الإدخال</label>
                <div class="select-wrap">
                  <select id="statusFilter">
                    <option value="">كل الحالات</option>
                    <option value="entered">مكتملة</option>
                    <option value="missing">غير مكتملة</option>
                  </select>
                  <svg viewBox="0 0 24 24"><path d="m7 10 5 5 5-5" /></svg>
                </div>
              </div>
            </div>
            <div class="quick-filter-row">
              <button class="quick-filter active" type="button" data-status="">الكل</button>
              <button class="quick-filter" type="button" data-status="entered">مكتملة</button>
              <button class="quick-filter" type="button" data-status="missing">غير مكتملة</button>
              <button id="saveAllButton" class="primary-button save-all-button" type="button" disabled>حفظ الكل</button>
            </div>
          </section>

          <section class="table-section">
            <div class="section-heading compact-heading">
              <div>
                <p id="resultsMeta" class="results-meta"></p>
                <h2 id="resultsTitle">بيانات المنشآت</h2>
              </div>
            </div>
            <div class="table-wrap">
              <table>
                <thead>
                  <tr id="tableHead"></tr>
                </thead>
                <tbody id="tableBody"></tbody>
              </table>
            </div>
            <div id="cardsGrid" class="cards-grid"></div>
            <div id="emptyState" class="empty-state" hidden>
              <h3>لا توجد نتائج مطابقة</h3>
              <p>جرّب تغيير كلمات البحث أو التصفية.</p>
            </div>
          </section>
        </div>
      </section>
    </main>
    <div id="toast" class="toast" role="status" aria-live="polite"></div>
    <script src="https://cdn.jsdelivr.net/npm/xlsx@0.18.5/dist/xlsx.full.min.js"></script>
    <script src="app.js"></script>
  </body>
</html>