feat(policies): split policyView into active/expired sections

Simply page titles

Author: SplinterHead

frontend/src/views/InventoryView.vue

@@ -2,8 +2,7 @@
   <div>
     <v-row class="mb-4" align="center">
       <v-col>
-        <div class="text-caption text-medium-emphasis">INVENTORY</div>
-        <h1 class="text-h4 font-weight-thin">My Assets</h1>
+        <h1 class="text-h4 font-weight-thin">Inventory</h1>
       </v-col>
       <v-col cols="auto">
         <v-btn color="primary" prepend-icon="mdi-plus" size="large" @click="dialog = true">

frontend/src/views/PoliciesView.vue

@@ -2,8 +2,7 @@
   <div v-if="currentHousehold">
     <v-row class="mb-4" align="center">
       <v-col>
-        <div class="text-caption text-medium-emphasis">DASHBOARD</div>
-        <h1 class="text-h4 font-weight-thin">{{ currentHousehold.name }}</h1>
+        <h1 class="text-h4 font-weight-thin">Policies</h1>
       </v-col>
       <v-col cols="auto">
         <v-btn color="primary" prepend-icon="mdi-plus" size="large" @click="policyDialog = true">
@@ -12,13 +11,39 @@
       </v-col>
     </v-row>
 
-    <PolicyList
-      :currency-code="currencyCode"
-      :loading="loading"
-      :policies="policies"
-      @edit="openEditDialog"
-      @delete="handleDelete"
-    />
+    <div class="mb-6">
+      <div class="d-flex align-center mb-2">
+        <v-icon color="success" class="mr-2">mdi-shield-check</v-icon>
+        <h2 class="text-h6 font-weight-bold">Active Policies</h2>
+      </div>
+
+      <PolicyList
+        :currency-code="currencyCode"
+        :policies="activePolicies"
+        :loading="loading"
+        @edit="openEditDialog"
+        @delete="handleDelete"
+        @upload="handleUpload"
+      />
+    </div>
+
+    <div v-if="expiredPolicies.length > 0" class="mb-6">
+      <v-divider class="my-6" />
+
+      <div class="d-flex align-center mb-2 text-medium-emphasis">
+        <v-icon color="grey" class="mr-2">mdi-history</v-icon>
+        <h2 class="text-h6 font-weight-bold">Expired Policies</h2>
+      </div>
+
+      <PolicyList
+        :currency-code="currencyCode"
+        :policies="expiredPolicies"
+        :loading="loading"
+        @edit="openEditDialog"
+        @delete="handleDelete"
+        @upload="handleUpload"
+      />
+    </div>
 
     <PolicyForm
       v-model="policyDialog"
@@ -67,6 +92,27 @@ export default {
       if (!val) this.selectedPolicy = null
     },
   },
+  computed: {
+    activePolicies() {
+      const today = new Date();
+      today.setHours(0, 0, 0, 0);
+
+      return this.policies.filter(p => {
+        if (!p.end_date) return true;
+        return new Date(p.end_date) >= today;
+      });
+    },
+
+    expiredPolicies() {
+      const today = new Date();
+      today.setHours(0, 0, 0, 0);
+
+      return this.policies.filter(p => {
+        if (!p.end_date) return false;
+        return new Date(p.end_date) < today;
+      });
+    }
+  },
   methods: {
     openEditDialog(policy) {
       this.selectedPolicy = policy

frontend/src/views/SettingsView.vue

@@ -1,5 +1,10 @@
 <template>
   <div>
+    <v-row>
+      <v-col>
+        <h1 class="text-h4 font-weight-thin">Settings</h1>
+      </v-col>
+    </v-row>
     <v-row>
       <v-col cols="12" md="6">
         <v-card elevation="2" rounded="lg" class="pa-4">