order-tracker/index.html at main · ashikscript/order-tracker · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Order Tracker</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="wrap">

  <!-- SETUP SCREEN (hidden - URL hardcoded) -->
  <div id="setupScreen" style="display:none"></div>

  <!-- MAIN APP -->
  <div id="mainApp">

    <!-- Top bar -->
    <div class="topbar">
      <div class="app-title">
        <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
          <rect x="3" y="4" width="18" height="16" rx="2"/>
          <path d="M3 10h18"/>
        </svg>
        Order Tracker
      </div>
      <div class="top-right">
        <div class="sync-badge" id="syncStatus"></div>
        <!-- Theme Toggle -->
        <button class="btn-theme" id="themeToggle" onclick="toggleTheme()" title="Toggle light/dark mode">
          <svg id="iconMoon" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/></svg>
          <svg id="iconSun" style="display:none" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"/><path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/></svg>
        </button>
        <!-- Trash Button -->
        <button class="btn-trash" id="trashBtn" onclick="openTrash()" title="Trash" style="display:none">
          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
          <span id="trashBadge" class="trash-badge"></span>
        </button>
        <span class="badge badge-locked" id="authBadge" onclick="handleBadgeClick()">🔒 Locked</span>
      </div>
    </div>

    <!-- Metrics -->
    <div class="metrics">
      <div class="metric">
        <div class="metric-label">Total Orders</div>
        <div class="metric-value" id="totalOrders">—</div>
      </div>
      <div class="metric">
        <div class="metric-label">Total Profit</div>
        <div class="metric-value green" id="totalProfit">—</div>
      </div>
    </div>

    <!-- New Entry / Edit (Admin only) -->
    <div class="card" id="addCard" style="display:none">
      <div class="card-title" id="formTitle">New Entry</div>
      <div class="row2">
        <div>
          <label class="field-label">My Site Order ID</label>
          <input type="text" id="myId" placeholder="e.g. ORD-1001"/>
        </div>
        <div>
          <label class="field-label">Other Site Order ID</label>
          <input type="text" id="otherId" placeholder="e.g. EXT-5523"/>
        </div>
      </div>
      <div class="row2">
        <div>
          <label class="field-label">Profit (৳)</label>
          <input type="number" id="profit" placeholder="0"/>
        </div>
        <div>
          <label class="field-label">Note (optional)</label>
          <input type="text" id="note" placeholder="..."/>
        </div>
      </div>
      <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
        <button class="btn-save" id="saveBtn" onclick="saveOrder()">+ Save Order</button>
        <button class="btn-cancel" id="cancelEdit" style="display:none" onclick="clearForm()">✕ Cancel</button>
      </div>
      <div class="err" id="addErr"></div>
      <div class="ok-msg" id="addOk"></div>
    </div>

    <!-- Lock screen -->
    <div class="card" id="lockCard">
      <div class="lock-center">
        <div class="lock-icon">🔐</div>
        <div class="lock-h">Admin Login</div>
        <div class="lock-sub">Enter password to add or delete orders</div>
        <div class="lock-form">
          <input type="password" id="passInput" placeholder="Password..." onkeydown="if(event.key==='Enter')tryLogin()"/>
          <button class="btn-login" onclick="tryLogin()">Login</button>
          <div class="err" id="passErr"></div>
        </div>
      </div>
    </div>

    <!-- Profit Summary -->
    <div class="card">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:8px">
        <div class="card-title" style="margin-bottom:0">Profit Summary</div>
        <button class="btn-export" id="exportBtn" onclick="exportExcel()" disabled>
          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
            <polyline points="7 10 12 15 17 10"/>
            <line x1="12" y1="15" x2="12" y2="3"/>
          </svg>
          <span id="exportBtnLabel">🔒 Export to Excel</span>
        </button>
      </div>
      <div class="summary-controls">
        <select id="summaryType" onchange="renderSummary()" disabled>
          <option value="monthly">Monthly</option>
          <option value="yearly">Yearly</option>
        </select>
        <select id="summaryYear" onchange="onYearChange()" disabled></select>
        <span id="monthSelWrap">
          <select id="summaryMonth" onchange="renderSummary()" disabled></select>
        </span>
      </div>
      <div class="guest-summary-note" id="guestSummaryNote">🔒 Login to change month/year or export</div>
      <div id="summaryContent"></div>
    </div>

    <!-- Search -->
    <div class="card">
      <div class="card-title">Search</div>
      <div class="search-wrap">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round">
          <circle cx="11" cy="11" r="8"/>
          <path d="m21 21-4.35-4.35"/>
        </svg>
        <input type="text" id="searchBox" placeholder="Search any order ID..." oninput="renderOrders()"/>
      </div>
    </div>

    <!-- Recent Orders -->
    <div class="card">
      <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem">
        <div class="card-title" style="margin-bottom:0">Recent 5 Orders</div>
        <span class="order-count" id="orderCount"></span>
      </div>
      <div id="orderList"><div class="empty">Loading...</div></div>
    </div>

  </div><!-- /mainApp -->
</div><!-- /wrap -->

<!-- TRASH MODAL -->
<div id="trashModal" class="modal-overlay" style="display:none">
  <div class="modal-box">
    <div class="modal-header">
      <div class="modal-title">
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/><path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>
        Trash
      </div>
      <button class="modal-close" onclick="closeTrash()">✕</button>
    </div>
    <div class="modal-sub">Deleted orders are kept for 15 days, then removed automatically.</div>
    <div id="trashList"><div class="empty">Loading...</div></div>
  </div>
</div>

<script src="https://www.gstatic.com/firebasejs/10.13.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/10.13.0/firebase-auth-compat.js"></script>
<script src="app.js"></script>
</body>
</html>