From e6b68fe6c6c3e778e43df8fa96b52aedf7c74978 Mon Sep 17 00:00:00 2001
From: sibios <>
Date: Fri, 10 Jan 2025 19:17:00 -0800
Subject: [PATCH] re-arrange ManageMember tab-panels to match tab orders to fix
 ui quirk (click right but UI scrolls left)

---
 .../components/AdminTools/ManageMember.vue    | 1402 ++++++++---------
 1 file changed, 701 insertions(+), 701 deletions(-)

diff --git a/src-frontend/src/components/AdminTools/ManageMember.vue b/src-frontend/src/components/AdminTools/ManageMember.vue
index d61a68ae..469e0209 100644
--- a/src-frontend/src/components/AdminTools/ManageMember.vue
+++ b/src-frontend/src/components/AdminTools/ManageMember.vue
@@ -422,320 +422,426 @@
           </div>
         </q-tab-panel>
 
-        <q-tab-panel name="log">
-          <div class="text-h6 q-pb-sm">
-            {{ $t('adminTools.userEvents') }}
-          </div>
-
-          <q-table
-            :rows="logs.userEventLogs"
-            :columns="[
-              {
-                name: 'logtype',
-                label: 'Log Type',
-                field: 'logtype',
-                sortable: true,
-              },
-              {
-                name: 'description',
-                label: 'Description',
-                field: 'description',
-                sortable: true,
-              },
-              {
-                name: 'date',
-                label: 'Date',
-                field: 'date',
-                sortable: true,
-              },
-            ]"
-            row-key="id"
-            :filter="userEventsFilter"
-            v-model:pagination="pagination"
-            :loading="loading"
-            :grid="$q.screen.xs"
-          >
-            <template v-slot:top-left>
-              <div class="row">
-                <q-input
-                  v-if="$q.screen.xs"
-                  v-model="filter"
-                  outlined
-                  dense
-                  debounce="300"
-                  placeholder="Search"
-                  style="margin-top: -3px"
-                >
-                  <template v-slot:append>
-                    <q-icon :name="icons.search" />
-                  </template>
-                </q-input>
+        <q-tab-panel name="billing">
+          <div class="column flex content-start items-start q-gutter-y-lg">
+            <div class="column q-gutter-y-sm full-width">
+              <div class="text-h6">
+                {{ $t('adminTools.subscriptionInfo') }}
               </div>
-            </template>
 
-            <template v-if="$q.screen.gt.xs" v-slot:top-right>
-              <q-input
-                v-model="filter"
-                outlined
-                dense
-                debounce="300"
-                placeholder="Search"
-                style="margin-top: -3px"
+              <q-markup-table
+                v-if="billing?.subscription"
+                bordered
+                padding
+                class="rounded-borders desktop-only"
               >
-                <template v-slot:append>
-                  <q-icon :name="icons.search" />
-                </template>
-              </q-input>
-            </template>
+                <thead>
+                  <tr>
+                    <th class="text-left">
+                      {{ $t(`adminTools.membershipTier`) }}
+                    </th>
+                    <th class="text-left">
+                      {{ $t(`adminTools.billingPlan`) }}
+                    </th>
+                    <th class="text-left">
+                      {{ $t(`adminTools.billingCycleAnchor`) }}
+                    </th>
+                    <th class="text-left">{{ $t(`adminTools.startDate`) }}</th>
+                    <th class="text-left">
+                      {{ $t(`adminTools.currentPeriodEnd`) }}
+                    </th>
+                    <template v-if="billing.subscription.cancelAt">
+                      <th class="text-left">
+                        {{ $t(`adminTools.cancelAt`) }}
+                      </th>
+                      <th class="text-left">
+                        {{ $t(`adminTools.cancelAtPeriodEnd`) }}
+                      </th>
+                    </template>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td class="text-left">
+                      <router-link
+                        :to="{
+                          name: 'manageTier',
+                          params: {
+                            planId: billing.subscription.membershipPlan.id,
+                          },
+                        }"
+                        >{{
+                          billing.subscription.membershipTier.name
+                        }}</router-link
+                      >
+                    </td>
+                    <td class="text-left">
+                      {{
+                        $t('paymentPlans.intervalDescription', {
+                          currency:
+                            billing.subscription.membershipPlan.currency.toUpperCase(),
+                          amount: $n(
+                            billing.subscription.membershipPlan.cost / 100,
+                            'currency',
+                            siteLocaleCurrency
+                          ),
+                          interval: $tc(
+                            `paymentPlans.interval.${billing.subscription.membershipPlan.interval.toLowerCase()}`,
+                            billing.subscription.membershipPlan.intervalAmount
+                          ),
+                        })
+                      }}
+                    </td>
+                    <td class="text-left">
+                      {{ formatDate(billing.subscription.billingCycleAnchor) }}
+                    </td>
+                    <td class="text-left">
+                      {{ formatDate(billing.subscription.startDate) }}
+                    </td>
+                    <td class="text-left">
+                      {{ formatDate(billing.subscription.currentPeriodEnd) }}
+                    </td>
+                    <template v-if="billing.subscription.cancelAt">
+                      <td class="text-left">
+                        {{ formatDate(billing.subscription.cancelAt) }}
+                      </td>
+                      <td class="text-left">
+                        {{
+                          formatBooleanYesNo(
+                            billing.subscription.cancelAtPeriodEnd
+                          )
+                        }}
+                      </td>
+                    </template>
+                  </tr>
+                </tbody>
+              </q-markup-table>
 
-            <template v-slot:item="props">
-              <div
-                class="q-pa-sm col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+              <q-list
+                v-if="billing?.subscription"
+                bordered
+                padding
+                class="rounded-borders desktop-hide"
+                style="max-width: 350px"
               >
-                <q-card class="q-py-sm">
-                  <q-list dense>
-                    <q-item
-                      v-for="col in props.cols.filter(
-                        (col) => col.name !== 'desc'
-                      )"
-                      :key="col.name"
+                <q-item>
+                  <q-item-section>
+                    <q-item-label
+                      lines="1"
+                      :class="{
+                        inactive: billing.subscription.status === 'inactive',
+                        active: billing.subscription.status === 'active',
+                        cancelling:
+                          billing.subscription.status === 'cancelling',
+                      }"
                     >
-                      <q-item-section>
-                        <q-item-label>{{ col.label }}</q-item-label>
-                      </q-item-section>
-                      <q-item-section side>
-                        <q-item-label caption>
-                          <template v-if="col.name === 'date'">
-                            <div>
-                              {{ this.formatWhen(col.value) }}
-                              <q-tooltip :delay="500">
-                                {{ this.formatDate(col.value) }}
-                              </q-tooltip>
-                            </div>
-                          </template>
+                      {{
+                        $t(
+                          `adminTools.subscriptionStatusString.${billing.subscription.status}`
+                        )
+                      }}
+                    </q-item-label>
+                    <q-item-label caption>
+                      {{ $t(`adminTools.subscriptionStatus`) }}
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
 
-                          <template v-else>
-                            {{ col.value }}
-                          </template>
-                        </q-item-label>
-                      </q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-card>
-              </div>
-            </template>
+                <q-item>
+                  <q-item-section>
+                    <q-item-label lines="1">
+                      {{ formatDate(billing.subscription.billingCycleAnchor) }}
+                    </q-item-label>
+                    <q-item-label caption>
+                      {{ $t(`adminTools.billingCycleAnchor`) }}
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
 
-            <template v-slot:body="props">
-              <q-tr :props="props">
-                <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                  <template v-if="col.name === 'date'">
-                    <div>
-                      {{ this.formatWhen(col.value) }}
-                      <q-tooltip :delay="500">
-                        {{ this.formatDate(col.value) }}
-                      </q-tooltip>
-                    </div>
-                  </template>
+                <q-item>
+                  <q-item-section>
+                    <q-item-label lines="1">
+                      {{ formatDate(billing.subscription.startDate) }}
+                    </q-item-label>
+                    <q-item-label caption>
+                      {{ $t(`adminTools.startDate`) }}
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
 
-                  <template v-else>
-                    {{ col.value }}
-                  </template>
-                </q-td>
-              </q-tr>
-            </template>
-          </q-table>
+                <q-item>
+                  <q-item-section>
+                    <q-item-label lines="1">
+                      {{ formatDate(billing.subscription.currentPeriodEnd) }}
+                    </q-item-label>
+                    <q-item-label caption>
+                      {{ $t(`adminTools.currentPeriodEnd`) }}
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
 
-          <div class="text-h6 q-pb-sm subheading">
-            {{ $t('adminTools.userDoorLogs') }}
-          </div>
+                <q-item v-if="billing.subscription.cancelAt">
+                  <q-item-section>
+                    <q-item-label lines="1">
+                      {{ formatDate(billing.subscription.cancelAt) }}
+                    </q-item-label>
+                    <q-item-label caption>
+                      {{ $t(`adminTools.cancelAt`) }}
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
 
-          <q-table
-            :rows="logs.doorLogs"
-            :columns="[
-              {
-                name: 'door',
-                label: 'Door Name',
-                field: 'door',
-                sortable: true,
-              },
-              {
-                name: 'success',
-                label: 'Swipe Status',
-                field: 'success',
-                sortable: true,
-              },
-              {
-                name: 'date',
-                label: 'Date',
-                field: 'date',
-                sortable: true,
-              },
-            ]"
-            row-key="id"
-            :filter="doorFilter"
-            v-model:pagination="pagination"
-            :loading="loading"
-            :grid="$q.screen.xs"
-          >
-            <template v-slot:top-left>
-              <div class="row">
-                <q-input
-                  v-if="$q.screen.xs"
-                  v-model="filter"
-                  outlined
-                  dense
-                  debounce="300"
-                  placeholder="Search"
-                  style="margin-top: -3px"
-                >
-                  <template v-slot:append>
-                    <q-icon :name="icons.search" />
-                  </template>
-                </q-input>
+                <q-item v-if="billing.subscription.cancelAtPeriodEnd">
+                  <q-item-section>
+                    <q-item-label lines="1">
+                      {{ billing.subscription.cancelAtPeriodEnd }}
+                    </q-item-label>
+                    <q-item-label caption>
+                      {{ $t(`adminTools.cancelAtPeriodEnd`) }}
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+
+              <div v-else>
+                {{ $t(`adminTools.noSubscription`) }}
               </div>
-            </template>
+            </div>
+
+            <div class="column q-gutter-y-sm full-width">
+              <div class="text-h6">
+                {{ $t('adminTools.billingInfo') }}
+              </div>
+
+              <q-markup-table
+                v-if="billing?.subscription"
+                bordered
+                padding
+                class="rounded-borders desktop-only"
+              >
+                <thead>
+                  <tr>
+                    <th class="text-left">
+                      {{ $t(`memberbucks.lastPurchase`) }}
+                    </th>
+                    <th class="text-left">
+                      {{ $t(`memberbucks.cardExpiry`) }}
+                    </th>
+                    <th class="text-left">{{ $t(`memberbucks.last4`) }}</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td class="text-left">
+                      <div v-if="billing?.memberbucks.lastPurchase">
+                        {{ this.formatWhen(billing?.memberbucks.lastPurchase) }}
+                        <q-tooltip :delay="500">
+                          {{
+                            this.formatDate(billing?.memberbucks.lastPurchase)
+                          }}
+                        </q-tooltip>
+                      </div>
+                      <div v-else>
+                        {{ $t('error.noValue') }}
+                      </div>
+                    </td>
+                    <td class="text-left">
+                      {{
+                        billing?.memberbucks.stripe_card_expiry ||
+                        $t('error.noValue')
+                      }}
+                    </td>
+                    <td class="text-left">
+                      {{
+                        billing?.memberbucks.stripe_card_last_digits ||
+                        $t('error.noValue')
+                      }}
+                    </td>
+                  </tr>
+                </tbody>
+              </q-markup-table>
 
-            <template v-if="$q.screen.gt.xs" v-slot:top-right>
-              <q-input
-                v-model="filter"
-                outlined
-                dense
-                debounce="300"
-                placeholder="Search"
-                style="margin-top: -3px"
+              <q-list
+                bordered
+                padding
+                class="rounded-borders mobile-only"
+                style="max-width: 350px"
               >
-                <template v-slot:append>
-                  <q-icon :name="icons.search" />
-                </template>
-              </q-input>
-            </template>
+                <q-item>
+                  <q-item-section>
+                    <q-item-label lines="1">
+                      <div v-if="billing?.memberbucks.lastPurchase">
+                        {{ this.formatWhen(billing?.memberbucks.lastPurchase) }}
+                        <q-tooltip :delay="500">
+                          {{
+                            this.formatDate(billing?.memberbucks.lastPurchase)
+                          }}
+                        </q-tooltip>
+                      </div>
+                      <div v-else>
+                        {{ $t('error.noValue') }}
+                      </div>
+                    </q-item-label>
+                    <q-item-label caption>
+                      {{ $t(`memberbucks.lastPurchase`) }}
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
 
-            <template v-slot:item="props">
-              <div
-                class="q-pa-sm col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
-              >
-                <q-card class="q-py-sm">
-                  <q-list dense>
-                    <q-item
-                      v-for="col in props.cols.filter(
-                        (col) => col.name !== 'desc'
-                      )"
-                      :key="col.name"
-                    >
-                      <q-item-section>
-                        <q-item-label>{{ col.label }}</q-item-label>
-                      </q-item-section>
-                      <q-item-section side>
-                        <q-item-label caption>
-                          <template v-if="col.name === 'date'">
-                            <div>
-                              {{ this.formatWhen(col.value) }}
-                              <q-tooltip :delay="500">
-                                {{ this.formatDate(col.value) }}
-                              </q-tooltip>
-                            </div>
-                          </template>
+                <q-item>
+                  <q-item-section>
+                    <q-item-label lines="1">
+                      {{
+                        billing?.memberbucks.stripe_card_expiry ||
+                        $t('error.noValue')
+                      }}
+                    </q-item-label>
+                    <q-item-label caption>
+                      {{ $t(`memberbucks.cardExpiry`) }}
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
 
-                          <template v-else-if="col.name === 'success'">
-                            <div
-                              :class="
-                                col.value ? 'text-positive' : 'text-negative'
-                              "
-                            >
-                              {{ $t(col.value ? 'success' : 'rejected') }}
-                            </div>
-                          </template>
+                <q-item>
+                  <q-item-section>
+                    <q-item-label lines="1">
+                      {{
+                        billing?.memberbucks.stripe_card_last_digits ||
+                        $t('error.noValue')
+                      }}
+                    </q-item-label>
+                    <q-item-label caption>
+                      {{ $t(`memberbucks.last4`) }}
+                    </q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </div>
 
-                          <template v-else>
-                            {{ col.value }}
-                          </template>
-                        </q-item-label>
-                      </q-item-section>
-                    </q-item>
-                  </q-list>
-                </q-card>
+            <div class="column q-gutter-y-sm full-width">
+              <div class="text-h6">
+                {{ $t('adminTools.memberbucksTransactions') }}
               </div>
-            </template>
 
-            <template v-slot:body="props">
-              <q-tr :props="props">
-                <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                  <template v-if="col.name === 'date'">
-                    <div>
-                      {{ this.formatWhen(col.value) }}
-                      <q-tooltip :delay="500">
-                        {{ this.formatDate(col.value) }}
-                      </q-tooltip>
-                    </div>
-                  </template>
+              <q-table
+                :rows="billing?.memberbucks.transactions"
+                :columns="[
+                  {
+                    name: 'description',
+                    label: 'Description',
+                    field: 'description',
+                    sortable: true,
+                  },
+                  {
+                    name: 'amount',
+                    label: 'Amount',
+                    field: 'amount',
+                    sortable: true,
+                  },
+                  {
+                    name: 'date',
+                    label: 'When',
+                    field: 'date',
+                    sortable: true,
+                    format: (val) => formatWhen(val),
+                  },
+                ]"
+                row-key="id"
+                :filter="filter"
+                v-model:pagination="pagination"
+                :loading="loading"
+                :grid="$q.screen.xs"
+              >
+                <template v-slot:top-left>
+                  <div class="row">
+                    <q-input
+                      v-if="$q.screen.xs"
+                      v-model="filter"
+                      outlined
+                      dense
+                      debounce="300"
+                      placeholder="Search"
+                      style="margin-top: -3px"
+                    >
+                      <template v-slot:append>
+                        <q-icon :name="icons.search" />
+                      </template>
+                    </q-input>
+                  </div>
+                  <div class="row">
+                    {{ $t('memberbucks.currentBalance') }}
+                    {{
+                      $n(
+                        billing?.memberbucks.balance || 0,
+                        'currency',
+                        siteLocaleCurrency
+                      )
+                    }}
+                  </div>
+                </template>
 
-                  <template v-else-if="col.name === 'success'">
-                    <div :class="col.value ? 'text-positive' : 'text-negative'">
-                      {{ $t(col.value ? 'success' : 'rejected') }}
-                    </div>
-                  </template>
+                <template v-if="$q.screen.gt.xs" v-slot:top-right>
+                  <q-input
+                    v-model="filter"
+                    outlined
+                    dense
+                    debounce="300"
+                    placeholder="Search"
+                    style="margin-top: -3px"
+                  >
+                    <template v-slot:append>
+                      <q-icon :name="icons.search" />
+                    </template>
+                  </q-input>
+                </template>
 
-                  <template v-else>
-                    {{ col.value }}
-                  </template>
-                </q-td>
-              </q-tr>
-            </template>
-          </q-table>
+                <template v-slot:body-cell-amount="props">
+                  <q-td>
+                    <div
+                      :class="{
+                        credit: props.value > 0,
+                        debit: props.value < 0,
+                      }"
+                    >
+                      ${{ props.value }}
+                    </div>
+                  </q-td>
+                </template>
+              </q-table>
+            </div>
+          </div>
+        </q-tab-panel>
 
-          <div class="text-h6 q-pb-sm subheading">
-            {{ $t('adminTools.userInterlockLogs') }}
+        <q-tab-panel name="log">
+          <div class="text-h6 q-pb-sm">
+            {{ $t('adminTools.userEvents') }}
           </div>
 
-          <q-table
-            :rows="logs.interlockLogs"
-            :columns="[
-              {
-                name: 'interlock',
-                label: 'Interlock',
-                field: 'interlockName',
-                sortable: true,
-              },
-              {
-                name: 'dateStarted',
-                label: 'Date',
-                field: 'dateStarted',
-                sortable: true,
-              },
-              {
-                name: 'totalTime',
-                label: 'Total Time',
-                field: 'totalTime',
-                sortable: true,
-                sort: sortByFloat,
-              },
+          <q-table
+            :rows="logs.userEventLogs"
+            :columns="[
               {
-                name: 'totalCost',
-                label: 'Total Cost',
-                field: 'totalCost',
+                name: 'logtype',
+                label: 'Log Type',
+                field: 'logtype',
                 sortable: true,
-                sort: sortByFloat,
-                format: (val) => $n(val || 0, 'currency', siteLocaleCurrency),
               },
               {
-                name: 'userEnded',
-                label: 'Swiped Off By',
-                field: 'userEnded',
+                name: 'description',
+                label: 'Description',
+                field: 'description',
                 sortable: true,
               },
               {
-                name: 'status',
-                label: 'Status',
-                field: 'status',
+                name: 'date',
+                label: 'Date',
+                field: 'date',
                 sortable: true,
               },
             ]"
             row-key="id"
-            :filter="doorFilter"
-            :pagination="{
-              ...pagination,
-              sortBy: 'dateStarted',
-            }"
+            :filter="userEventsFilter"
+            v-model:pagination="pagination"
             :loading="loading"
             :grid="$q.screen.xs"
           >
@@ -789,7 +895,7 @@
                       </q-item-section>
                       <q-item-section side>
                         <q-item-label caption>
-                          <template v-if="col.name === 'dateStarted'">
+                          <template v-if="col.name === 'date'">
                             <div>
                               {{ this.formatWhen(col.value) }}
                               <q-tooltip :delay="500">
@@ -798,36 +904,6 @@
                             </div>
                           </template>
 
-                          <template v-else-if="col.name === 'totalTime'">
-                            <div v-if="col.value > 1">
-                              {{ this.humanizeDurationOfSeconds(col.value) }}
-                              <q-tooltip :delay="500">
-                                {{
-                                  this.humanizeDurationOfSecondsPrecise(
-                                    col.value
-                                  )
-                                }}
-                              </q-tooltip>
-                            </div>
-                            <div v-else></div>
-                          </template>
-
-                          <template v-else-if="col.name === 'status'">
-                            <div class="text-negative" v-if="col.value === -1">
-                              {{ $t('rejected') }}
-                            </div>
-                            <div
-                              class="text-positive"
-                              v-else-if="col.value === 1"
-                            >
-                              {{ $t('interlocks.finished') }}
-                            </div>
-                            <div class="text-warning" v-else>
-                              {{ $t('interlocks.inProgress') }}
-                              <q-spinner-dots></q-spinner-dots>
-                            </div>
-                          </template>
-
                           <template v-else>
                             {{ col.value }}
                           </template>
@@ -842,7 +918,7 @@
             <template v-slot:body="props">
               <q-tr :props="props">
                 <q-td v-for="col in props.cols" :key="col.name" :props="props">
-                  <template v-if="col.name === 'dateStarted'">
+                  <template v-if="col.name === 'date'">
                     <div>
                       {{ this.formatWhen(col.value) }}
                       <q-tooltip :delay="500">
@@ -851,29 +927,6 @@
                     </div>
                   </template>
 
-                  <template v-else-if="col.name === 'totalTime'">
-                    <div v-if="col.value > 1">
-                      {{ this.humanizeDurationOfSeconds(col.value) }}
-                      <q-tooltip :delay="500">
-                        {{ this.humanizeDurationOfSecondsPrecise(col.value) }}
-                      </q-tooltip>
-                    </div>
-                    <div v-else></div>
-                  </template>
-
-                  <template v-else-if="col.name === 'status'">
-                    <div class="text-negative" v-if="col.value === -1">
-                      {{ $t('rejected') }}
-                    </div>
-                    <div class="text-positive" v-else-if="col.value === 1">
-                      {{ $t('interlocks.finished') }}
-                    </div>
-                    <div class="text-warning" v-else>
-                      {{ $t('interlocks.inProgress') }}
-                      <q-spinner-dots></q-spinner-dots>
-                    </div>
-                  </template>
-
                   <template v-else>
                     {{ col.value }}
                   </template>
@@ -881,396 +934,343 @@
               </q-tr>
             </template>
           </q-table>
-        </q-tab-panel>
 
-        <q-tab-panel name="billing">
-          <div class="column flex content-start items-start q-gutter-y-lg">
-            <div class="column q-gutter-y-sm full-width">
-              <div class="text-h6">
-                {{ $t('adminTools.subscriptionInfo') }}
-              </div>
+          <div class="text-h6 q-pb-sm subheading">
+            {{ $t('adminTools.userDoorLogs') }}
+          </div>
 
-              <q-markup-table
-                v-if="billing?.subscription"
-                bordered
-                padding
-                class="rounded-borders desktop-only"
-              >
-                <thead>
-                  <tr>
-                    <th class="text-left">
-                      {{ $t(`adminTools.membershipTier`) }}
-                    </th>
-                    <th class="text-left">
-                      {{ $t(`adminTools.billingPlan`) }}
-                    </th>
-                    <th class="text-left">
-                      {{ $t(`adminTools.billingCycleAnchor`) }}
-                    </th>
-                    <th class="text-left">{{ $t(`adminTools.startDate`) }}</th>
-                    <th class="text-left">
-                      {{ $t(`adminTools.currentPeriodEnd`) }}
-                    </th>
-                    <template v-if="billing.subscription.cancelAt">
-                      <th class="text-left">
-                        {{ $t(`adminTools.cancelAt`) }}
-                      </th>
-                      <th class="text-left">
-                        {{ $t(`adminTools.cancelAtPeriodEnd`) }}
-                      </th>
-                    </template>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <td class="text-left">
-                      <router-link
-                        :to="{
-                          name: 'manageTier',
-                          params: {
-                            planId: billing.subscription.membershipPlan.id,
-                          },
-                        }"
-                        >{{
-                          billing.subscription.membershipTier.name
-                        }}</router-link
-                      >
-                    </td>
-                    <td class="text-left">
-                      {{
-                        $t('paymentPlans.intervalDescription', {
-                          currency:
-                            billing.subscription.membershipPlan.currency.toUpperCase(),
-                          amount: $n(
-                            billing.subscription.membershipPlan.cost / 100,
-                            'currency',
-                            siteLocaleCurrency
-                          ),
-                          interval: $tc(
-                            `paymentPlans.interval.${billing.subscription.membershipPlan.interval.toLowerCase()}`,
-                            billing.subscription.membershipPlan.intervalAmount
-                          ),
-                        })
-                      }}
-                    </td>
-                    <td class="text-left">
-                      {{ formatDate(billing.subscription.billingCycleAnchor) }}
-                    </td>
-                    <td class="text-left">
-                      {{ formatDate(billing.subscription.startDate) }}
-                    </td>
-                    <td class="text-left">
-                      {{ formatDate(billing.subscription.currentPeriodEnd) }}
-                    </td>
-                    <template v-if="billing.subscription.cancelAt">
-                      <td class="text-left">
-                        {{ formatDate(billing.subscription.cancelAt) }}
-                      </td>
-                      <td class="text-left">
-                        {{
-                          formatBooleanYesNo(
-                            billing.subscription.cancelAtPeriodEnd
-                          )
-                        }}
-                      </td>
-                    </template>
-                  </tr>
-                </tbody>
-              </q-markup-table>
+          <q-table
+            :rows="logs.doorLogs"
+            :columns="[
+              {
+                name: 'door',
+                label: 'Door Name',
+                field: 'door',
+                sortable: true,
+              },
+              {
+                name: 'success',
+                label: 'Swipe Status',
+                field: 'success',
+                sortable: true,
+              },
+              {
+                name: 'date',
+                label: 'Date',
+                field: 'date',
+                sortable: true,
+              },
+            ]"
+            row-key="id"
+            :filter="doorFilter"
+            v-model:pagination="pagination"
+            :loading="loading"
+            :grid="$q.screen.xs"
+          >
+            <template v-slot:top-left>
+              <div class="row">
+                <q-input
+                  v-if="$q.screen.xs"
+                  v-model="filter"
+                  outlined
+                  dense
+                  debounce="300"
+                  placeholder="Search"
+                  style="margin-top: -3px"
+                >
+                  <template v-slot:append>
+                    <q-icon :name="icons.search" />
+                  </template>
+                </q-input>
+              </div>
+            </template>
 
-              <q-list
-                v-if="billing?.subscription"
-                bordered
-                padding
-                class="rounded-borders desktop-hide"
-                style="max-width: 350px"
+            <template v-if="$q.screen.gt.xs" v-slot:top-right>
+              <q-input
+                v-model="filter"
+                outlined
+                dense
+                debounce="300"
+                placeholder="Search"
+                style="margin-top: -3px"
               >
-                <q-item>
-                  <q-item-section>
-                    <q-item-label
-                      lines="1"
-                      :class="{
-                        inactive: billing.subscription.status === 'inactive',
-                        active: billing.subscription.status === 'active',
-                        cancelling:
-                          billing.subscription.status === 'cancelling',
-                      }"
+                <template v-slot:append>
+                  <q-icon :name="icons.search" />
+                </template>
+              </q-input>
+            </template>
+
+            <template v-slot:item="props">
+              <div
+                class="q-pa-sm col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+              >
+                <q-card class="q-py-sm">
+                  <q-list dense>
+                    <q-item
+                      v-for="col in props.cols.filter(
+                        (col) => col.name !== 'desc'
+                      )"
+                      :key="col.name"
                     >
-                      {{
-                        $t(
-                          `adminTools.subscriptionStatusString.${billing.subscription.status}`
-                        )
-                      }}
-                    </q-item-label>
-                    <q-item-label caption>
-                      {{ $t(`adminTools.subscriptionStatus`) }}
-                    </q-item-label>
-                  </q-item-section>
-                </q-item>
+                      <q-item-section>
+                        <q-item-label>{{ col.label }}</q-item-label>
+                      </q-item-section>
+                      <q-item-section side>
+                        <q-item-label caption>
+                          <template v-if="col.name === 'date'">
+                            <div>
+                              {{ this.formatWhen(col.value) }}
+                              <q-tooltip :delay="500">
+                                {{ this.formatDate(col.value) }}
+                              </q-tooltip>
+                            </div>
+                          </template>
 
-                <q-item>
-                  <q-item-section>
-                    <q-item-label lines="1">
-                      {{ formatDate(billing.subscription.billingCycleAnchor) }}
-                    </q-item-label>
-                    <q-item-label caption>
-                      {{ $t(`adminTools.billingCycleAnchor`) }}
-                    </q-item-label>
-                  </q-item-section>
-                </q-item>
+                          <template v-else-if="col.name === 'success'">
+                            <div
+                              :class="
+                                col.value ? 'text-positive' : 'text-negative'
+                              "
+                            >
+                              {{ $t(col.value ? 'success' : 'rejected') }}
+                            </div>
+                          </template>
 
-                <q-item>
-                  <q-item-section>
-                    <q-item-label lines="1">
-                      {{ formatDate(billing.subscription.startDate) }}
-                    </q-item-label>
-                    <q-item-label caption>
-                      {{ $t(`adminTools.startDate`) }}
-                    </q-item-label>
-                  </q-item-section>
-                </q-item>
+                          <template v-else>
+                            {{ col.value }}
+                          </template>
+                        </q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-card>
+              </div>
+            </template>
 
-                <q-item>
-                  <q-item-section>
-                    <q-item-label lines="1">
-                      {{ formatDate(billing.subscription.currentPeriodEnd) }}
-                    </q-item-label>
-                    <q-item-label caption>
-                      {{ $t(`adminTools.currentPeriodEnd`) }}
-                    </q-item-label>
-                  </q-item-section>
-                </q-item>
+            <template v-slot:body="props">
+              <q-tr :props="props">
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                  <template v-if="col.name === 'date'">
+                    <div>
+                      {{ this.formatWhen(col.value) }}
+                      <q-tooltip :delay="500">
+                        {{ this.formatDate(col.value) }}
+                      </q-tooltip>
+                    </div>
+                  </template>
 
-                <q-item v-if="billing.subscription.cancelAt">
-                  <q-item-section>
-                    <q-item-label lines="1">
-                      {{ formatDate(billing.subscription.cancelAt) }}
-                    </q-item-label>
-                    <q-item-label caption>
-                      {{ $t(`adminTools.cancelAt`) }}
-                    </q-item-label>
-                  </q-item-section>
-                </q-item>
+                  <template v-else-if="col.name === 'success'">
+                    <div :class="col.value ? 'text-positive' : 'text-negative'">
+                      {{ $t(col.value ? 'success' : 'rejected') }}
+                    </div>
+                  </template>
 
-                <q-item v-if="billing.subscription.cancelAtPeriodEnd">
-                  <q-item-section>
-                    <q-item-label lines="1">
-                      {{ billing.subscription.cancelAtPeriodEnd }}
-                    </q-item-label>
-                    <q-item-label caption>
-                      {{ $t(`adminTools.cancelAtPeriodEnd`) }}
-                    </q-item-label>
-                  </q-item-section>
-                </q-item>
-              </q-list>
+                  <template v-else>
+                    {{ col.value }}
+                  </template>
+                </q-td>
+              </q-tr>
+            </template>
+          </q-table>
 
-              <div v-else>
-                {{ $t(`adminTools.noSubscription`) }}
-              </div>
-            </div>
+          <div class="text-h6 q-pb-sm subheading">
+            {{ $t('adminTools.userInterlockLogs') }}
+          </div>
 
-            <div class="column q-gutter-y-sm full-width">
-              <div class="text-h6">
-                {{ $t('adminTools.billingInfo') }}
+          <q-table
+            :rows="logs.interlockLogs"
+            :columns="[
+              {
+                name: 'interlock',
+                label: 'Interlock',
+                field: 'interlockName',
+                sortable: true,
+              },
+              {
+                name: 'dateStarted',
+                label: 'Date',
+                field: 'dateStarted',
+                sortable: true,
+              },
+              {
+                name: 'totalTime',
+                label: 'Total Time',
+                field: 'totalTime',
+                sortable: true,
+                sort: sortByFloat,
+              },
+              {
+                name: 'totalCost',
+                label: 'Total Cost',
+                field: 'totalCost',
+                sortable: true,
+                sort: sortByFloat,
+                format: (val) => $n(val || 0, 'currency', siteLocaleCurrency),
+              },
+              {
+                name: 'userEnded',
+                label: 'Swiped Off By',
+                field: 'userEnded',
+                sortable: true,
+              },
+              {
+                name: 'status',
+                label: 'Status',
+                field: 'status',
+                sortable: true,
+              },
+            ]"
+            row-key="id"
+            :filter="doorFilter"
+            :pagination="{
+              ...pagination,
+              sortBy: 'dateStarted',
+            }"
+            :loading="loading"
+            :grid="$q.screen.xs"
+          >
+            <template v-slot:top-left>
+              <div class="row">
+                <q-input
+                  v-if="$q.screen.xs"
+                  v-model="filter"
+                  outlined
+                  dense
+                  debounce="300"
+                  placeholder="Search"
+                  style="margin-top: -3px"
+                >
+                  <template v-slot:append>
+                    <q-icon :name="icons.search" />
+                  </template>
+                </q-input>
               </div>
+            </template>
 
-              <q-markup-table
-                v-if="billing?.subscription"
-                bordered
-                padding
-                class="rounded-borders desktop-only"
-              >
-                <thead>
-                  <tr>
-                    <th class="text-left">
-                      {{ $t(`memberbucks.lastPurchase`) }}
-                    </th>
-                    <th class="text-left">
-                      {{ $t(`memberbucks.cardExpiry`) }}
-                    </th>
-                    <th class="text-left">{{ $t(`memberbucks.last4`) }}</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <td class="text-left">
-                      <div v-if="billing?.memberbucks.lastPurchase">
-                        {{ this.formatWhen(billing?.memberbucks.lastPurchase) }}
-                        <q-tooltip :delay="500">
-                          {{
-                            this.formatDate(billing?.memberbucks.lastPurchase)
-                          }}
-                        </q-tooltip>
-                      </div>
-                      <div v-else>
-                        {{ $t('error.noValue') }}
-                      </div>
-                    </td>
-                    <td class="text-left">
-                      {{
-                        billing?.memberbucks.stripe_card_expiry ||
-                        $t('error.noValue')
-                      }}
-                    </td>
-                    <td class="text-left">
-                      {{
-                        billing?.memberbucks.stripe_card_last_digits ||
-                        $t('error.noValue')
-                      }}
-                    </td>
-                  </tr>
-                </tbody>
-              </q-markup-table>
-
-              <q-list
-                bordered
-                padding
-                class="rounded-borders mobile-only"
-                style="max-width: 350px"
+            <template v-if="$q.screen.gt.xs" v-slot:top-right>
+              <q-input
+                v-model="filter"
+                outlined
+                dense
+                debounce="300"
+                placeholder="Search"
+                style="margin-top: -3px"
               >
-                <q-item>
-                  <q-item-section>
-                    <q-item-label lines="1">
-                      <div v-if="billing?.memberbucks.lastPurchase">
-                        {{ this.formatWhen(billing?.memberbucks.lastPurchase) }}
-                        <q-tooltip :delay="500">
-                          {{
-                            this.formatDate(billing?.memberbucks.lastPurchase)
-                          }}
-                        </q-tooltip>
-                      </div>
-                      <div v-else>
-                        {{ $t('error.noValue') }}
-                      </div>
-                    </q-item-label>
-                    <q-item-label caption>
-                      {{ $t(`memberbucks.lastPurchase`) }}
-                    </q-item-label>
-                  </q-item-section>
-                </q-item>
+                <template v-slot:append>
+                  <q-icon :name="icons.search" />
+                </template>
+              </q-input>
+            </template>
 
-                <q-item>
-                  <q-item-section>
-                    <q-item-label lines="1">
-                      {{
-                        billing?.memberbucks.stripe_card_expiry ||
-                        $t('error.noValue')
-                      }}
-                    </q-item-label>
-                    <q-item-label caption>
-                      {{ $t(`memberbucks.cardExpiry`) }}
-                    </q-item-label>
-                  </q-item-section>
-                </q-item>
+            <template v-slot:item="props">
+              <div
+                class="q-pa-sm col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition"
+              >
+                <q-card class="q-py-sm">
+                  <q-list dense>
+                    <q-item
+                      v-for="col in props.cols.filter(
+                        (col) => col.name !== 'desc'
+                      )"
+                      :key="col.name"
+                    >
+                      <q-item-section>
+                        <q-item-label>{{ col.label }}</q-item-label>
+                      </q-item-section>
+                      <q-item-section side>
+                        <q-item-label caption>
+                          <template v-if="col.name === 'dateStarted'">
+                            <div>
+                              {{ this.formatWhen(col.value) }}
+                              <q-tooltip :delay="500">
+                                {{ this.formatDate(col.value) }}
+                              </q-tooltip>
+                            </div>
+                          </template>
 
-                <q-item>
-                  <q-item-section>
-                    <q-item-label lines="1">
-                      {{
-                        billing?.memberbucks.stripe_card_last_digits ||
-                        $t('error.noValue')
-                      }}
-                    </q-item-label>
-                    <q-item-label caption>
-                      {{ $t(`memberbucks.last4`) }}
-                    </q-item-label>
-                  </q-item-section>
-                </q-item>
-              </q-list>
-            </div>
+                          <template v-else-if="col.name === 'totalTime'">
+                            <div v-if="col.value > 1">
+                              {{ this.humanizeDurationOfSeconds(col.value) }}
+                              <q-tooltip :delay="500">
+                                {{
+                                  this.humanizeDurationOfSecondsPrecise(
+                                    col.value
+                                  )
+                                }}
+                              </q-tooltip>
+                            </div>
+                            <div v-else></div>
+                          </template>
 
-            <div class="column q-gutter-y-sm full-width">
-              <div class="text-h6">
-                {{ $t('adminTools.memberbucksTransactions') }}
+                          <template v-else-if="col.name === 'status'">
+                            <div class="text-negative" v-if="col.value === -1">
+                              {{ $t('rejected') }}
+                            </div>
+                            <div
+                              class="text-positive"
+                              v-else-if="col.value === 1"
+                            >
+                              {{ $t('interlocks.finished') }}
+                            </div>
+                            <div class="text-warning" v-else>
+                              {{ $t('interlocks.inProgress') }}
+                              <q-spinner-dots></q-spinner-dots>
+                            </div>
+                          </template>
+
+                          <template v-else>
+                            {{ col.value }}
+                          </template>
+                        </q-item-label>
+                      </q-item-section>
+                    </q-item>
+                  </q-list>
+                </q-card>
               </div>
+            </template>
 
-              <q-table
-                :rows="billing?.memberbucks.transactions"
-                :columns="[
-                  {
-                    name: 'description',
-                    label: 'Description',
-                    field: 'description',
-                    sortable: true,
-                  },
-                  {
-                    name: 'amount',
-                    label: 'Amount',
-                    field: 'amount',
-                    sortable: true,
-                  },
-                  {
-                    name: 'date',
-                    label: 'When',
-                    field: 'date',
-                    sortable: true,
-                    format: (val) => formatWhen(val),
-                  },
-                ]"
-                row-key="id"
-                :filter="filter"
-                v-model:pagination="pagination"
-                :loading="loading"
-                :grid="$q.screen.xs"
-              >
-                <template v-slot:top-left>
-                  <div class="row">
-                    <q-input
-                      v-if="$q.screen.xs"
-                      v-model="filter"
-                      outlined
-                      dense
-                      debounce="300"
-                      placeholder="Search"
-                      style="margin-top: -3px"
-                    >
-                      <template v-slot:append>
-                        <q-icon :name="icons.search" />
-                      </template>
-                    </q-input>
-                  </div>
-                  <div class="row">
-                    {{ $t('memberbucks.currentBalance') }}
-                    {{
-                      $n(
-                        billing?.memberbucks.balance || 0,
-                        'currency',
-                        siteLocaleCurrency
-                      )
-                    }}
-                  </div>
-                </template>
+            <template v-slot:body="props">
+              <q-tr :props="props">
+                <q-td v-for="col in props.cols" :key="col.name" :props="props">
+                  <template v-if="col.name === 'dateStarted'">
+                    <div>
+                      {{ this.formatWhen(col.value) }}
+                      <q-tooltip :delay="500">
+                        {{ this.formatDate(col.value) }}
+                      </q-tooltip>
+                    </div>
+                  </template>
 
-                <template v-if="$q.screen.gt.xs" v-slot:top-right>
-                  <q-input
-                    v-model="filter"
-                    outlined
-                    dense
-                    debounce="300"
-                    placeholder="Search"
-                    style="margin-top: -3px"
-                  >
-                    <template v-slot:append>
-                      <q-icon :name="icons.search" />
-                    </template>
-                  </q-input>
-                </template>
+                  <template v-else-if="col.name === 'totalTime'">
+                    <div v-if="col.value > 1">
+                      {{ this.humanizeDurationOfSeconds(col.value) }}
+                      <q-tooltip :delay="500">
+                        {{ this.humanizeDurationOfSecondsPrecise(col.value) }}
+                      </q-tooltip>
+                    </div>
+                    <div v-else></div>
+                  </template>
 
-                <template v-slot:body-cell-amount="props">
-                  <q-td>
-                    <div
-                      :class="{
-                        credit: props.value > 0,
-                        debit: props.value < 0,
-                      }"
-                    >
-                      ${{ props.value }}
+                  <template v-else-if="col.name === 'status'">
+                    <div class="text-negative" v-if="col.value === -1">
+                      {{ $t('rejected') }}
                     </div>
-                  </q-td>
-                </template>
-              </q-table>
-            </div>
-          </div>
+                    <div class="text-positive" v-else-if="col.value === 1">
+                      {{ $t('interlocks.finished') }}
+                    </div>
+                    <div class="text-warning" v-else>
+                      {{ $t('interlocks.inProgress') }}
+                      <q-spinner-dots></q-spinner-dots>
+                    </div>
+                  </template>
+
+                  <template v-else>
+                    {{ col.value }}
+                  </template>
+                </q-td>
+              </q-tr>
+            </template>
+          </q-table>
         </q-tab-panel>
       </q-tab-panels>
     </q-card>