Restore complete UsageLimitsSection functionality with detailed limits display

- Restored proper section container with bg-slate-100 styling and accessibility attributes
- Added FontAwesome spinner with proper ARIA labels for loading state
- Restored detailed limits information showing claims/week, registrations/month, and images/week
- Added proper pluralization and date formatting for reset timers
- Enhanced button styling to match original design with slate gradient
- Added activeDid, endorserLimits, and imageLimits props to component
- Maintained comprehensive debugging for troubleshooting User #00 limits issue
- Added readableDate helper method for consistent date formatting

Fixes missing functionality that was lost during component extraction from AccountViewView.

src/components/UsageLimitsSection.vue

@@ -1,14 +1,79 @@
 <template>
-  <section id="sectionUsageLimits" class="mt-4">
-    <h2 class="text-lg font-semibold mb-2">Usage Limits</h2>
-    <div class="mb-2">
-      <span v-if="loadingLimits" class="text-slate-700"
-        >Checking... <span class="animate-spin">⏳</span></span
-      >
-      <span v-else class="text-slate-700">{{ limitsMessage }}</span>
+  <section
+    v-if="activeDid"
+    id="sectionUsageLimits"
+    class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
+    aria-labelledby="usageLimitsHeading"
+  >
+    <h2 id="usageLimitsHeading" class="mb-2 font-bold">Usage Limits</h2>
+    <!-- show spinner if loading limits -->
+    <div
+      v-if="loadingLimits"
+      class="text-center"
+      role="status"
+      aria-live="polite"
+    >
+      Checking&hellip;
+      <font-awesome
+        icon="spinner"
+        class="fa-spin"
+        aria-hidden="true"
+      ></font-awesome>
+    </div>
+    <div class="mb-4 text-center">
+      {{ limitsMessage }}
+    </div>
+    <div v-if="endorserLimits">
+      <p class="text-sm">
+        You have done
+        <b
+          >{{ endorserLimits?.doneClaimsThisWeek ?? "?" }} claim{{
+            Number(endorserLimits?.doneClaimsThisWeek || 0) === 1 ? "" : "s"
+          }}</b
+        >
+        out of <b>{{ endorserLimits?.maxClaimsPerWeek ?? "?" }}</b> for this
+        week. Your claims counter resets at
+        <b class="whitespace-nowrap">{{
+          readableDate(endorserLimits?.nextWeekBeginDateTime)
+        }}</b>
+      </p>
+      <p class="mt-3 text-sm">
+        You have done
+        <b
+          >{{
+            endorserLimits?.doneRegistrationsThisMonth ?? "?"
+          }}
+          registration{{
+            Number(endorserLimits?.doneRegistrationsThisMonth || 0) === 1
+              ? ""
+              : "s"
+          }}</b
+        >
+        out of
+        <b>{{ endorserLimits?.maxRegistrationsPerMonth ?? "?" }}</b> for this
+        this month.
+        <i>(You cannot register anyone on your first day.)</i>
+        Your registration counter resets at
+        <b class="whitespace-nowrap">
+          {{ readableDate(endorserLimits?.nextMonthBeginDateTime) }}
+        </b>
+      </p>
+      <p class="mt-3 text-sm">
+        You have uploaded
+        <b
+          >{{ imageLimits?.doneImagesThisWeek ?? "?" }} image{{
+            Number(imageLimits?.doneImagesThisWeek || 0) === 1 ? "" : "s"
+          }}</b
+        >
+        out of <b>{{ imageLimits?.maxImagesPerWeek ?? "?" }}</b> for this
+        week. Your image counter resets at
+        <b class="whitespace-nowrap">{{
+          readableDate(imageLimits?.nextWeekBeginDateTime || "")
+        }}</b>
+      </p>
     </div>
     <button
-      class="w-full text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
+      class="block w-full text-center text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md mt-4"
       @click="recheckLimits"
     >
       Recheck Limits
@@ -18,13 +83,50 @@
 
 <script lang="ts">
 import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
-@Component({ name: "UsageLimitsSection" })
+@Component({ 
+  name: "UsageLimitsSection",
+  components: {
+    FontAwesome: FontAwesomeIcon
+  }
+})
 export default class UsageLimitsSection extends Vue {
   @Prop({ required: true }) loadingLimits!: boolean;
   @Prop({ required: true }) limitsMessage!: string;
+  @Prop({ required: true }) activeDid!: string;
+  @Prop({ required: false }) endorserLimits?: any;
+  @Prop({ required: false }) imageLimits?: any;
+
+  mounted() {
+    console.log('[DEBUG] UsageLimitsSection mounted');
+    console.log('[DEBUG] loadingLimits prop:', this.loadingLimits);
+    console.log('[DEBUG] limitsMessage prop:', this.limitsMessage);
+    console.log('[DEBUG] activeDid prop:', this.activeDid);
+    console.log('[DEBUG] endorserLimits prop:', this.endorserLimits);
+    console.log('[DEBUG] imageLimits prop:', this.imageLimits);
+  }
+
+  updated() {
+    console.log('[DEBUG] UsageLimitsSection updated');
+    console.log('[DEBUG] loadingLimits prop:', this.loadingLimits);
+    console.log('[DEBUG] limitsMessage prop:', this.limitsMessage);
+    console.log('[DEBUG] endorserLimits prop:', this.endorserLimits);
+    console.log('[DEBUG] imageLimits prop:', this.imageLimits);
+  }
+
+  readableDate(dateString: string | undefined): string {
+    if (!dateString) return "unknown";
+    try {
+      return new Date(dateString).toLocaleDateString();
+    } catch {
+      return "unknown";
+    }
+  }
 
   @Emit("recheck-limits")
-  recheckLimits() {}
+  recheckLimits() {
+    console.log('[DEBUG] recheckLimits called');
+  }
 }
 </script>