feat: manage owner usage history records
This commit is contained in:
Wyndham ARR
59
index.html
59
index.html
@@ -6,7 +6,7 @@
|
||||
<meta name="description" content="Condo owner annual stay privilege management prototype" />
|
||||
<title>Condo</title>
|
||||
<link rel="icon" href="favicon.svg" type="image/svg+xml" />
|
||||
<link rel="stylesheet" href="styles.css?v=20260802-history" />
|
||||
<link rel="stylesheet" href="styles.css?v=20260803-accounts-fill-1" />
|
||||
</head>
|
||||
<body>
|
||||
<section class="login-screen" id="loginScreen" aria-labelledby="loginTitle" data-auth-state="checking">
|
||||
@@ -106,6 +106,14 @@
|
||||
</button>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-session">
|
||||
<button class="session-logout sidebar-logout" id="logoutButton" type="button" aria-label="Sign out" data-i18n-aria-label="signOut">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M10 5H5v14h5M14 8l4 4-4 4M18 12H9"/></svg>
|
||||
<span data-i18n="signOut">Sign out</span>
|
||||
</button>
|
||||
<span class="session-error" id="sessionError" role="alert" hidden></span>
|
||||
</div>
|
||||
|
||||
</aside>
|
||||
|
||||
<div class="language-dock">
|
||||
@@ -130,21 +138,6 @@
|
||||
<button class="icon-button mobile-menu" id="menuButton" type="button" aria-label="Open navigation" aria-controls="sidebar" aria-expanded="false" data-i18n-aria-label="openNavigation">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 7h16M4 12h16M4 17h16" /></svg>
|
||||
</button>
|
||||
<div class="period-display" role="status" aria-label="Current period 2026" data-i18n-aria-label="currentPeriodAria">
|
||||
<span data-i18n="currentPeriod">Current period</span>
|
||||
<strong>2026</strong>
|
||||
</div>
|
||||
<div class="session-area">
|
||||
<div class="session-identity">
|
||||
<span data-i18n="signedInAs">Signed in as</span>
|
||||
<strong id="sessionUsername">—</strong>
|
||||
</div>
|
||||
<button class="session-logout" id="logoutButton" type="button" aria-label="Sign out" data-i18n-aria-label="signOut">
|
||||
<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M10 5H5v14h5M14 8l4 4-4 4M18 12H9"/></svg>
|
||||
<span data-i18n="signOut">Sign out</span>
|
||||
</button>
|
||||
<span class="session-error" id="sessionError" role="alert" hidden></span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="content">
|
||||
@@ -158,14 +151,11 @@
|
||||
</section>
|
||||
|
||||
<section class="page active" id="page-dashboard" data-page-content="dashboard">
|
||||
<div class="page-heading dashboard-heading">
|
||||
<div>
|
||||
<div class="metric-grid dashboard-overview-grid">
|
||||
<article class="dashboard-title-card">
|
||||
<span class="eyebrow" data-i18n="dashboardDate">WEDNESDAY, JULY 29</span>
|
||||
<h1>Condon</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metric-grid">
|
||||
</article>
|
||||
<article class="metric-card">
|
||||
<div class="metric-icon"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M4 20V8.5L12 4l8 4.5V20M8 20v-7h8v7M3 20h18"/></svg></div>
|
||||
<span data-i18n="ownerRooms">Owner rooms</span>
|
||||
@@ -244,12 +234,16 @@
|
||||
<select id="roomTypeFilter" aria-label="Filter by purchased room type" data-i18n-aria-label="purchasedTypeFilterAria"><option value="" data-i18n="allRoomTypes">All room types</option><option>RM2</option><option>RM3</option><option>AC2</option></select>
|
||||
<span class="toolbar-count" id="ownerCount">190 accounts shown</span>
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<div class="table-wrap" id="ownerTableWrap">
|
||||
<table class="owner-table">
|
||||
<thead><tr><th data-i18n="no">No</th><th data-i18n="transferDate">Transfer Date</th><th data-i18n="name">Name</th><th data-i18n="roomNo">Room No.</th><th data-i18n="roomType">Room Type</th><th data-i18n="unitNo">Unit No.</th><th data-i18n="memberNo">Member No.</th><th class="align-right" data-i18n="remainingStayPrivileges">Remaining stay privileges</th><th></th></tr></thead>
|
||||
<thead><tr><th data-i18n="no">No</th><th data-i18n="name">Name</th><th data-i18n="roomNo">Room No.</th><th data-i18n="roomType">Room Type</th><th data-i18n="unitNo">Unit No.</th><th data-i18n="memberNo">Member No.</th><th data-i18n="transferDate">Transfer Date</th><th class="align-right" data-i18n="remainingStayPrivileges">Remaining stay privileges</th><th></th></tr></thead>
|
||||
<tbody id="ownerTableBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<nav class="table-pagination" id="ownerPagination" aria-label="Owner account pages" data-i18n-aria-label="ownerPaginationAria" hidden>
|
||||
<span class="pagination-status" id="ownerPageStatus" role="status" aria-live="polite"></span>
|
||||
<div class="pagination-pages" id="ownerPageNumbers" role="group" aria-label="Page numbers" data-i18n-aria-label="pageNumbersAria"></div>
|
||||
</nav>
|
||||
</article>
|
||||
</section>
|
||||
<section class="owner-workspace-view" id="ownerUsagePanel" role="tabpanel" aria-labelledby="usageTab" data-owner-view-panel="usage" hidden>
|
||||
@@ -261,7 +255,7 @@
|
||||
</div>
|
||||
<div class="table-wrap">
|
||||
<table class="usage-table">
|
||||
<thead><tr><th data-i18n="confirmationNo">Confirmation No.</th><th data-i18n="ownerRoom">Owner / room</th><th data-i18n="checkIn">Check-in</th><th data-i18n="checkOut">Check-out</th><th data-i18n="night">Night</th><th data-i18n="use">Use</th><th data-i18n="balance">Balance</th><th data-i18n="usedRoomType">Used Room Type</th><th data-i18n="remark">Remark</th><th></th></tr></thead>
|
||||
<thead><tr><th data-i18n="confirmationNo">Confirmation No.</th><th data-i18n="ownerRoom">Owner / room</th><th data-i18n="checkIn">Check-in</th><th data-i18n="checkOut">Check-out</th><th data-i18n="night">Night</th><th data-i18n="use">Use</th><th data-i18n="balance">Balance</th><th data-i18n="usedRoomType">Used Room Type</th><th data-i18n="remark">Remark</th><th><span class="sr-only" data-i18n="actions">Actions</span></th></tr></thead>
|
||||
<tbody id="stayTableBody"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
@@ -276,6 +270,19 @@
|
||||
<div class="mobile-scrim" id="mobileScrim" hidden></div>
|
||||
|
||||
<div class="drawer-scrim" id="drawerScrim" hidden></div>
|
||||
<div class="confirm-scrim" id="confirmScrim" hidden></div>
|
||||
<section class="confirm-dialog" id="confirmDialog" role="alertdialog" aria-modal="true" aria-labelledby="confirmDialogTitle" aria-describedby="confirmDialogMessage" aria-hidden="true" hidden>
|
||||
<div class="confirm-dialog-header">
|
||||
<div class="confirm-dialog-icon" aria-hidden="true"><svg viewBox="0 0 24 24"><path d="M5 7h14M9 7V4h6v3M8 7l1 13h6l1-13M10 11v6M14 11v6"/></svg></div>
|
||||
<div><span class="eyebrow" data-i18n="confirmAction">CONFIRM ACTION</span><h2 id="confirmDialogTitle" data-i18n="deleteUsageTitle">Delete usage record</h2></div>
|
||||
</div>
|
||||
<p class="confirm-dialog-message" id="confirmDialogMessage"></p>
|
||||
<div class="confirm-dialog-summary"><span data-i18n="confirmationNo">Confirmation No.</span><strong id="confirmDialogRecord"></strong></div>
|
||||
<div class="confirm-dialog-footer">
|
||||
<button class="secondary-button" id="cancelConfirmDialog" type="button" data-i18n="cancel">Cancel</button>
|
||||
<button class="primary-button confirm-danger-button" id="confirmDialogAction" type="button" data-i18n="delete">Delete</button>
|
||||
</div>
|
||||
</section>
|
||||
<aside class="drawer wide-drawer stay-drawer" id="stayDrawer" role="dialog" aria-modal="true" aria-labelledby="drawerTitle" aria-hidden="true">
|
||||
<div class="drawer-header">
|
||||
<div><span class="eyebrow" data-i18n="newUsage">NEW USAGE</span><h2 id="drawerTitle">Add usage record</h2><p id="drawerSubtitle">Review the deduction before saving.</p></div>
|
||||
@@ -326,6 +333,6 @@
|
||||
<script src="runtime-config.js?v=20260802-login"></script>
|
||||
<script src="owners-data.js"></script>
|
||||
<script src="api-client.js?v=20260802-login"></script>
|
||||
<script src="app.js?v=20260802-history"></script>
|
||||
<script src="app.js?v=20260803-accounts-fill-1"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user