Fix UI alignment and reactive ref access issues

Co-authored-by: karpikpl <[email protected]>

Author: Copilot

app/components/DateRangeSelector.vue

@@ -22,7 +22,7 @@
           @update:model-value="updateDateRange"
         />
       </v-col>
-      <v-col cols="12" sm="4" class="d-flex align-center">
+      <v-col cols="12" sm="4" class="d-flex align-end">
         <v-btn
           color="primary"
           variant="outlined"
@@ -33,7 +33,7 @@
         </v-btn>
         <v-btn
           color="primary"
-          :loading="loading"
+          :loading="props.loading"
           @click="applyDateRange"
         >
           Apply

app/components/MainComponent.vue

@@ -186,10 +186,10 @@ export default defineNuxtComponent({
     // Load initial data
     try {
       const { data: metricsData, error: metricsError } = await this.metricsFetch;
-      if (metricsError.value || !metricsData.value) {
-        this.processError(metricsError.value as H3Error);
+      if (metricsError || !metricsData) {
+        this.processError(metricsError as H3Error);
       } else {
-        const apiResponse = metricsData.value as MetricsApiResponse;
+        const apiResponse = metricsData as MetricsApiResponse;
         this.metrics = apiResponse.metrics || [];
         this.originalMetrics = apiResponse.usage || [];
         this.metricsReady = true;