423 lines
18 KiB
HTML
423 lines
18 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta
|
||
name="viewport"
|
||
content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover"
|
||
/>
|
||
<title>Agency Center</title>
|
||
<link rel="stylesheet" href="../../../common/theme.css" />
|
||
<link rel="stylesheet" href="../../packages/ui/center.css" />
|
||
<link rel="stylesheet" href="./style.css" />
|
||
<script src="../../packages/core/product-context.js"></script>
|
||
<script src="../../products/fami/product.js"></script>
|
||
</head>
|
||
<body>
|
||
<div class="guild-center fami-agency-center">
|
||
<header class="center-header">
|
||
<button
|
||
class="icon-button"
|
||
id="backButton"
|
||
type="button"
|
||
data-i18n-aria="fami_common.back"
|
||
aria-label="Back"
|
||
>
|
||
<span aria-hidden="true">‹</span>
|
||
</button>
|
||
<h1 data-i18n="fami_agency.title">Agency Center</h1>
|
||
<div class="language-switcher">
|
||
<button
|
||
class="language-button"
|
||
type="button"
|
||
data-language-toggle
|
||
data-current-lang
|
||
aria-expanded="false"
|
||
data-i18n-aria="fami_common.change_language"
|
||
aria-label="Change language"
|
||
>
|
||
EN
|
||
</button>
|
||
<div class="language-menu" data-language-menu hidden>
|
||
<button type="button" data-lang-option="en">EN</button>
|
||
<button type="button" data-lang-option="ar">AR</button>
|
||
<button type="button" data-lang-option="tr">TR</button>
|
||
<button type="button" data-lang-option="es">ES</button>
|
||
</div>
|
||
</div>
|
||
</header>
|
||
|
||
<main class="guild-center__content" aria-live="polite">
|
||
<section class="guild-card agency-profile-card">
|
||
<div class="agency-avatar">
|
||
<img id="agencyAvatar" alt="" hidden />
|
||
<span id="agencyInitial" aria-hidden="true">A</span>
|
||
</div>
|
||
<div class="agency-profile-copy">
|
||
<strong id="agencyName">—</strong>
|
||
<span id="agencyID">Agency ID: —</span>
|
||
<span id="createdAt">Created: —</span>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="guild-card contact-card">
|
||
<span class="contact-icon" aria-hidden="true">☎</span>
|
||
<div>
|
||
<strong data-i18n="fami_agency.contact">WhatsApp</strong
|
||
><span id="contactValue">—</span>
|
||
</div>
|
||
<button
|
||
id="editContactButton"
|
||
type="button"
|
||
data-i18n="fami_common.edit"
|
||
>
|
||
Edit
|
||
</button>
|
||
</section>
|
||
|
||
<section class="guild-card balance-card">
|
||
<div>
|
||
<span
|
||
class="card-label"
|
||
data-i18n="fami_common.diamond_balance"
|
||
>Diamond balance</span
|
||
>
|
||
<strong class="balance-value"
|
||
><span aria-hidden="true">💎</span
|
||
><span id="diamondBalance">—</span></strong
|
||
>
|
||
</div>
|
||
<button
|
||
class="primary-action"
|
||
id="withdrawButton"
|
||
type="button"
|
||
data-i18n="fami_common.withdraw"
|
||
>
|
||
Withdraw
|
||
</button>
|
||
</section>
|
||
|
||
<section class="data-section" aria-labelledby="dataTitle">
|
||
<div class="section-title-row">
|
||
<h2 id="dataTitle" data-i18n="fami_agency.data_title">
|
||
Agency data
|
||
</h2>
|
||
<span id="rangeCaption"></span>
|
||
</div>
|
||
<div class="data-tabs" role="tablist">
|
||
<button
|
||
type="button"
|
||
role="tab"
|
||
data-tab="agency"
|
||
aria-selected="true"
|
||
data-i18n="fami_agency.tab_agency"
|
||
>
|
||
Agency data
|
||
</button>
|
||
<button
|
||
type="button"
|
||
role="tab"
|
||
data-tab="hosts"
|
||
aria-selected="false"
|
||
data-i18n="fami_agency.tab_hosts"
|
||
>
|
||
Host data
|
||
</button>
|
||
</div>
|
||
<div
|
||
class="guild-filter-bar"
|
||
id="rangeFilters"
|
||
role="group"
|
||
data-i18n-aria="fami_range.label"
|
||
aria-label="Date range"
|
||
>
|
||
<button
|
||
type="button"
|
||
data-range="today"
|
||
data-i18n="fami_range.today"
|
||
>
|
||
Today
|
||
</button>
|
||
<button
|
||
type="button"
|
||
data-range="yesterday"
|
||
data-i18n="fami_range.yesterday"
|
||
>
|
||
Yesterday
|
||
</button>
|
||
<button
|
||
type="button"
|
||
data-range="last_7_days"
|
||
data-i18n="fami_range.last_7_days"
|
||
>
|
||
Last 7 days
|
||
</button>
|
||
<button
|
||
type="button"
|
||
data-range="last_30_days"
|
||
data-i18n="fami_range.last_30_days"
|
||
>
|
||
Last 30 days
|
||
</button>
|
||
<button
|
||
type="button"
|
||
data-range="this_month"
|
||
data-i18n="fami_range.this_month"
|
||
>
|
||
This month
|
||
</button>
|
||
<button
|
||
type="button"
|
||
data-range="last_month"
|
||
data-i18n="fami_range.last_month"
|
||
>
|
||
Last month
|
||
</button>
|
||
<button
|
||
type="button"
|
||
data-range="custom"
|
||
data-i18n="fami_range.custom"
|
||
>
|
||
Custom
|
||
</button>
|
||
</div>
|
||
<div class="stats-status" id="statsStatus" hidden></div>
|
||
|
||
<div id="agencyPanel" role="tabpanel">
|
||
<div class="guild-card summary-grid">
|
||
<article>
|
||
<strong id="totalEarnings">—</strong
|
||
><span data-i18n="fami_agency.total_earnings"
|
||
>Total earnings</span
|
||
>
|
||
</article>
|
||
<article>
|
||
<strong id="giftIncome">—</strong
|
||
><span data-i18n="fami_agency.gift_income"
|
||
>Gift income</span
|
||
>
|
||
</article>
|
||
<article>
|
||
<strong id="shareIncome">—</strong
|
||
><span data-i18n="fami_agency.share_income"
|
||
>Share income</span
|
||
>
|
||
</article>
|
||
<article>
|
||
<strong id="totalHosts">—</strong
|
||
><span data-i18n="fami_agency.total_hosts"
|
||
>Total hosts</span
|
||
>
|
||
</article>
|
||
<article>
|
||
<strong id="giftedHosts">—</strong
|
||
><span data-i18n="fami_agency.gifted_hosts"
|
||
>Gifted hosts</span
|
||
>
|
||
</article>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="hostsPanel" role="tabpanel" hidden>
|
||
<div class="host-panel-toolbar">
|
||
<span id="hostCountLabel"></span>
|
||
<button
|
||
class="primary-action compact"
|
||
id="addHostButton"
|
||
type="button"
|
||
>
|
||
<span aria-hidden="true">＋</span
|
||
><span data-i18n="fami_agency.add_host"
|
||
>Add host</span
|
||
>
|
||
</button>
|
||
</div>
|
||
<div class="guild-card host-table-shell">
|
||
<table class="host-table">
|
||
<thead>
|
||
<tr>
|
||
<th data-i18n="fami_agency.host">
|
||
Host
|
||
</th>
|
||
<th
|
||
data-i18n="fami_metric.diamond_earnings"
|
||
>
|
||
Diamond earnings
|
||
</th>
|
||
<th
|
||
data-i18n="fami_metric.diamond_exchanged"
|
||
>
|
||
Diamonds exchanged
|
||
</th>
|
||
<th
|
||
data-i18n="fami_metric.gift_senders"
|
||
>
|
||
Gift senders
|
||
</th>
|
||
<th
|
||
data-i18n="fami_metric.online_duration"
|
||
>
|
||
Online duration
|
||
</th>
|
||
<th
|
||
data-i18n="fami_metric.valid_mic_duration"
|
||
>
|
||
Valid mic duration
|
||
</th>
|
||
<th
|
||
data-i18n="fami_metric.valid_mic_days"
|
||
>
|
||
Valid mic days
|
||
</th>
|
||
<th data-i18n="fami_agency.joined_at">
|
||
Joined
|
||
</th>
|
||
<th data-i18n="fami_agency.action">
|
||
Action
|
||
</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody id="hostTableBody"></tbody>
|
||
</table>
|
||
<div
|
||
class="empty-state"
|
||
id="hostEmpty"
|
||
hidden
|
||
data-i18n="fami_agency.no_hosts"
|
||
>
|
||
No hosts yet.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</main>
|
||
|
||
<dialog class="edit-dialog" id="contactDialog">
|
||
<form method="dialog" id="contactForm">
|
||
<h2 data-i18n="fami_agency.edit_contact">Edit WhatsApp</h2>
|
||
<label
|
||
><span data-i18n="fami_agency.contact_number"
|
||
>Contact number</span
|
||
><input
|
||
id="contactInput"
|
||
type="text"
|
||
maxlength="64"
|
||
autocomplete="tel"
|
||
/></label>
|
||
<div class="dialog-actions">
|
||
<button
|
||
type="button"
|
||
id="cancelContactButton"
|
||
data-i18n="fami_common.cancel"
|
||
>
|
||
Cancel</button
|
||
><button
|
||
class="primary-action"
|
||
type="submit"
|
||
data-i18n="fami_common.save"
|
||
>
|
||
Save
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
|
||
<dialog class="edit-dialog" id="rangeDialog">
|
||
<form method="dialog" id="rangeForm">
|
||
<h2 data-i18n="fami_range.custom_title">
|
||
Custom date range
|
||
</h2>
|
||
<label
|
||
><span data-i18n="fami_range.start">Start date</span
|
||
><input id="rangeStart" type="date" required
|
||
/></label>
|
||
<label
|
||
><span data-i18n="fami_range.end">End date</span
|
||
><input id="rangeEnd" type="date" required
|
||
/></label>
|
||
<div class="dialog-actions">
|
||
<button
|
||
type="button"
|
||
id="cancelRangeButton"
|
||
data-i18n="fami_common.cancel"
|
||
>
|
||
Cancel</button
|
||
><button
|
||
class="primary-action"
|
||
type="submit"
|
||
data-i18n="fami_common.apply"
|
||
>
|
||
Apply
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
|
||
<dialog class="edit-dialog" id="inviteDialog">
|
||
<form method="dialog" id="inviteForm">
|
||
<h2 data-i18n="fami_agency.add_host">Add host</h2>
|
||
<p data-i18n="fami_agency.invite_hint">
|
||
Enter the host display ID. The host joins after
|
||
accepting the invitation.
|
||
</p>
|
||
<label
|
||
><span data-i18n="fami_agency.host_id">Host ID</span
|
||
><input
|
||
id="inviteHostID"
|
||
type="text"
|
||
inputmode="numeric"
|
||
maxlength="32"
|
||
required
|
||
/></label>
|
||
<div class="dialog-actions">
|
||
<button
|
||
type="button"
|
||
id="cancelInviteButton"
|
||
data-i18n="fami_common.cancel"
|
||
>
|
||
Cancel</button
|
||
><button
|
||
class="primary-action"
|
||
type="submit"
|
||
data-i18n="fami_agency.send_invite"
|
||
>
|
||
Send invite
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
|
||
<dialog class="edit-dialog" id="removeDialog">
|
||
<form method="dialog" id="removeForm">
|
||
<h2 data-i18n="fami_agency.remove_host">Remove host</h2>
|
||
<p id="removeMessage"></p>
|
||
<div class="dialog-actions">
|
||
<button
|
||
type="button"
|
||
id="cancelRemoveButton"
|
||
data-i18n="fami_common.cancel"
|
||
>
|
||
Cancel</button
|
||
><button
|
||
class="danger-action"
|
||
type="submit"
|
||
data-i18n="fami_agency.remove"
|
||
>
|
||
Remove
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</dialog>
|
||
</div>
|
||
|
||
<script src="../../../common/api.js"></script>
|
||
<script src="../../../common/params.js"></script>
|
||
<script src="../../../common/i18n.js"></script>
|
||
<script src="../../../common/jsbridge.js"></script>
|
||
<script src="../../../common/toast.js"></script>
|
||
<script src="../../packages/core/date-range.js"></script>
|
||
<script src="../../packages/agency-center/agency-center.js"></script>
|
||
<script src="./script.js"></script>
|
||
</body>
|
||
</html>
|