feat(web): show full billing period range and remove Total Cost column

- Usage history now shows 'May 12, 2026 - June 13, 2026' format
- Removed Total Cost column from usage history table
- Added billingPeriodDate filter for long date format
- Updated billingPeriod filter to show date range

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: AchoArnold

web/pages/billing/index.vue

@@ -386,9 +386,6 @@
                       Received
                       <span v-if="$vuetify.breakpoint.lgAndUp">Messages</span>
                     </th>
-                    <th class="text-right">
-                      <span v-if="$vuetify.breakpoint.lgAndUp">Total</span> Cost
-                    </th>
                   </tr>
                 </thead>
                 <tbody>
@@ -398,17 +395,20 @@
                     :key="billingUsage.id"
                   >
                     <td>
-                      {{ billingUsage.start_timestamp | billingPeriod }}
+                      {{
+                        billingUsage.start_timestamp | billingPeriodDate
+                      }}
+                      –
+                      {{
+                        billingUsage.end_timestamp | billingPeriodDate
+                      }}
                     </td>
                     <td>
                       {{ billingUsage.sent_messages | decimal }}
                     </td>
                     <td>
                       {{ billingUsage.received_messages }}
                     </td>
-                    <td class="text-right font-weight-bold">
-                      {{ billingUsage.total_cost | money }}
-                    </td>
                   </tr>
                 </tbody>
               </template>

web/plugins/filters.ts

@@ -45,12 +45,32 @@ Vue.filter('decimal', (value: string): string => {
 })
 
 Vue.filter('billingPeriod', (value: string): string => {
-  const options = {
+  const startDate = new Date(value)
+  const options: Intl.DateTimeFormatOptions = {
+    month: 'short',
+    day: 'numeric',
+  }
+  const optionsWithYear: Intl.DateTimeFormatOptions = {
+    month: 'short',
+    day: 'numeric',
     year: 'numeric',
+  }
+  const start = startDate.toLocaleDateString('en-US', options)
+  const endDate = new Date(startDate)
+  endDate.setMonth(endDate.getMonth() + 1)
+  endDate.setDate(endDate.getDate() - 1)
+  const end = endDate.toLocaleDateString('en-US', optionsWithYear)
+  return `${start} – ${end}`
+})
+
+Vue.filter('billingPeriodDate', (value: string): string => {
+  const date = new Date(value)
+  const options: Intl.DateTimeFormatOptions = {
+    day: 'numeric',
     month: 'long',
+    year: 'numeric',
   }
-  // @ts-ignore
-  return new Date(value).toLocaleDateString('en-US', options)
+  return date.toLocaleDateString('en-US', options)
 })
 
 Vue.filter('humanizeTime', (value: string): string => {