feat(policyView): replace New Policy button with a FAB for selecting type

* Ingest the polcy number from the user
* Display policy number in dialog header
* Add icon to the dialog header

Author: SplinterHead

backend/alembic/versions/485a0ffff5b4_add_policy_number_column.py

@@ -0,0 +1,37 @@
+"""Add policy number column
+
+Revision ID: 485a0ffff5b4
+Revises: 5aba4d45913a
+Create Date: 2026-01-21 23:54:44.779921
+
+"""
+
+from typing import Sequence, Union
+
+import sqlalchemy as sa
+
+from alembic import op
+
+# revision identifiers, used by Alembic.
+revision: str = "485a0ffff5b4"
+down_revision: Union[str, Sequence[str], None] = "5aba4d45913a"
+branch_labels: Union[str, Sequence[str], None] = None
+depends_on: Union[str, Sequence[str], None] = None
+
+
+def upgrade() -> None:
+ """Upgrade schema."""
+ # ### commands auto generated by Alembic - please adjust! ###
+ with op.batch_alter_table("policies", schema=None) as batch_op:
+ batch_op.add_column(sa.Column("policy_number", sa.String(), nullable=True))
+
+ # ### end Alembic commands ###
+
+
+def downgrade() -> None:
+ """Downgrade schema."""
+ # ### commands auto generated by Alembic - please adjust! ###
+ with op.batch_alter_table("policies", schema=None) as batch_op:
+ batch_op.drop_column("policy_number")
+
+ # ### end Alembic commands ###

backend/app/main.py

@@ -139,6 +139,7 @@ def create_policy(
  household_id: int = Form(...),
  asset_id: Optional[int] = Form(None),
  provider: str = Form(...),
+ policy_number: str = Form(...),
  type: str = Form(...),
  start_date: date = Form(...),
  end_date: date = Form(None),
@@ -158,6 +159,7 @@ def create_policy(
  household_id=household_id,
  asset_id=asset_id,
  provider=provider,
+ policy_number=policy_number,
  type=type,
  start_date=start_date,
  end_date=end_date,
@@ -216,6 +218,7 @@ def update_policy(
  household_id: int = Form(...),
  asset_id: Optional[int] = Form(None),
  provider: str = Form(...),
+ policy_number: str = Form(...),
  type: str = Form(...),
  start_date: date = Form(...),
  end_date: date = Form(...),
@@ -239,6 +242,7 @@ def update_policy(
  policy.household_id = household_id
  policy.asset_id = asset_id
  policy.provider = provider
+ policy.policy_number = policy_number
  policy.type = type
  policy.start_date = start_date
  policy.end_date = end_date

backend/app/models.py

@@ -33,9 +33,10 @@ class Policy(Base):
  household_id = Column(Integer, ForeignKey("households.id"), nullable=False)
  asset_id = Column(Integer, ForeignKey("assets.id"), nullable=True)
  provider = Column(String, index=True, nullable=False)
+ policy_number = Column(String, nullable=True)
  type = Column(String, nullable=False)
  start_date = Column(Date, nullable=False)
- end_date = Column(Date, nullable=False)
+ end_date = Column(Date, nullable=True)
  premium = Column(Float, nullable=False)
  attributes = Column(JSON, nullable=False, default={})
  document_path = Column(String, nullable=True)

frontend/src/components/PolicyDetailsDialog.vue

@@ -7,9 +7,16 @@
   >
     <v-card rounded="lg">
       <v-toolbar :color="getHeaderColour(policy.type)">
+        <template v-slot:prepend>
+          <div class="ml-4">
+            <v-icon :icon="getHeaderIcon(policy.type)" />
+          </div>
+        </template>
         <v-toolbar-title class="font-weight-bold text-white">
           {{ policy.provider }}
-          <span class="text-subtitle-2 ml-2 opacity-80 text-white"> {{ policy.type }} Policy </span>
+          <span v-if="policy.policy_number" class="text-subtitle-2 ml-2 opacity-80 text-white">
+            Policy No. {{ policy.policy_number }}
+          </span>
         </v-toolbar-title>
         <v-spacer />
         <v-btn icon="mdi-close" @click="$emit('update:modelValue', false)" />
@@ -170,7 +177,7 @@
 <script>
 import { getFileUrl } from '@/services/api'
 import { currencyFormat } from '@/utils/Formats'
-import { getPolicyColour } from '@/utils/PolicyStyles'
+import { getPolicyColour, getPolicyIcon } from '@/utils/PolicyStyles'
 
 import BuildingsPolicyDetails from '@/components/details/BuildingsPolicyDetails.vue'
 import CarPolicyDetails from '@/components/details/CarPolicyDetails.vue'
@@ -213,6 +220,9 @@ export default {
  getHeaderColour(policyType) {
  return getPolicyColour(policyType)
     },
+ getHeaderIcon(policyType) {
+ return getPolicyIcon(policyType)
+    },
  getRenewalColor(dateStr) {
  if (!dateStr) return 'text-grey'
  const daysLeft = (new Date(dateStr) - new Date()) / (1000 * 60 * 60 * 24)

frontend/src/components/PolicyForm.vue

@@ -22,10 +22,9 @@
               />
             </v-col>
             <v-col cols="12" sm="6">
-              <v-select
- v-model="form.type"
- :items="policyTypes"
- label="Type"
+              <v-text-field
+ v-model="form.policy_number"
+ label="Policy No."
  variant="outlined"
  density="comfortable"
               />
@@ -135,9 +134,9 @@
         </v-form>
       </v-card-text>
 
-      <v-divider></v-divider>
+      <v-divider />
       <v-card-actions class="pa-4">
-        <v-spacer></v-spacer>
+        <v-spacer />
         <v-btn variant="text" @click="$emit('update:modelValue', false)">Cancel</v-btn>
         <v-btn color="primary" variant="flat" @click="submit" :loading="loading">Save Policy</v-btn>
       </v-card-actions>
@@ -164,27 +163,28 @@ export default {
     PetPolicyForm,
   },
   props: {
-    modelValue: Boolean,
-    loading: Boolean,
     assets: Array,
-    policyToEdit: Object,
     currencyCode: String,
+    loading: Boolean,
+    modelValue: Boolean,
+    policyToEdit: Object,
+    policyType: String,
   },
   emits: ['update:modelValue', 'submit'],
  data() {
  return {
       form: {
         asset_id: null,
+        type: this.policyType,
         provider: '',
- type: null,
+ policy_number: '',
         start_date: '',
         end_date: null,
         premium: '',
         frequency: 'Annual',
         attributes: {},
       },
       file: null,
-      policyTypes: ['Buildings', 'Car', 'Contents', 'Life', 'Medical', 'Pet'],
     }
   },
   computed: {
@@ -202,8 +202,9 @@ export default {
         } else {
  this.form = {
             asset_id: null,
+            type: this.policyType,
             provider: '',
- type: null,
+ policy_number: '',
             start_date: '',
             end_date: '',
             premium: '',

frontend/src/utils/PolicyStyles.js

@@ -2,37 +2,32 @@ export const POLICY_THEME = {
  Buildings: {
  colour: 'blue-grey-darken-2',
  icon: 'mdi-home-city',
- label: 'Buildings Insurance',
+ label: 'Buildings',
  },
  Car: {
  colour: 'blue-darken-2',
  icon: 'mdi-car',
- label: 'Vehicle Insurance',
+ label: 'Car',
  },
  Contents: {
  colour: 'amber-darken-3',
  icon: 'mdi-sofa',
- label: 'Contents Insurance',
+ label: 'Contents',
  },
  Life: {
  colour: 'purple-darken-2',
  icon: 'mdi-heart-pulse',
- label: 'Life Insurance',
+ label: 'Life',
  },
  Medical: {
  colour: 'teal-darken-2',
  icon: 'mdi-medical-bag',
- label: 'Health Insurance',
+ label: 'Medical',
  },
  Pet: {
  colour: 'brown-darken-1',
  icon: 'mdi-paw',
- label: 'Pet Insurance',
- },
- Other: {
- colour: 'grey-darken-2',
- icon: 'mdi-file-certificate',
- label: 'Other Policy',
+ label: 'Pet',
  },
 }
 

frontend/src/views/PoliciesView.vue

@@ -4,13 +4,31 @@
       <v-col>
         <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">
-          Add Policy
-        </v-btn>
-      </v-col>
     </v-row>
 
+    <v-fab app="true" color="primary" location="right bottom" size="large" icon>
+      <v-icon :icon="openFab ? 'mdi-close' : 'mdi-plus'" />
+      <v-speed-dial
+ v-model="openFab"
+ location="top left"
+ transition="slide-y-reverse-transition"
+ activator="parent"
+      >
+        <v-btn
+ v-for="(config, type) in createOptions"
+ :key="type"
+ :color="config.colour"
+ :prepend-icon="config.icon"
+ density="default"
+ rounded="xl"
+ size="large"
+ @click="openPolicyDialog(type)"
+        >
+          {{ config.label }}
+        </v-btn>
+      </v-speed-dial>
+    </v-fab>
+
     <div class="mb-6">
       <div class="d-flex align-center mb-2">
         <v-icon color="success" icon="mdi-shield-check" class="mr-2" />
@@ -51,13 +69,15 @@
       :currency-code="currencyCode"
       :loading="submitting"
       :policy-to-edit="selectedPolicy"
+      :policy-type="policyDialogType"
       @submit="handlePolicySubmit"
     />
   </div>
 </template>
 
 <script>
 import api from '@/services/api'
+import { POLICY_THEME } from '@/utils/PolicyStyles'
 import PolicyList from '@/components/PolicyList.vue'
 import PolicyForm from '@/components/PolicyForm.vue'
 
@@ -74,8 +94,11 @@ export default {
       assets: [],
       loading: false,
       policyDialog: false,
+      policyDialogType: null,
       submitting: false,
       selectedPolicy: null,
+      openFab: false,
+      policyTheme: POLICY_THEME,
     }
   },
   watch: {
@@ -102,7 +125,9 @@ export default {
  return new Date(p.end_date) >= today
       })
     },
-
+ createOptions() {
+ return this.policyTheme
+    },
  expiredPolicies() {
  const today = new Date()
  today.setHours(0, 0, 0, 0)
@@ -114,6 +139,10 @@ export default {
     },
   },
   methods: {
+ openPolicyDialog(type) {
+ this.policyDialogType = type
+ this.policyDialog = true
+    },
  openEditDialog(policy) {
  this.selectedPolicy = policy
  this.policyDialog = true
@@ -139,6 +168,7 @@ export default {
  let formData = new FormData()
  formData.append('household_id', this.currentHousehold.id)
  formData.append('provider', payload.provider)
+ formData.append('policy_number', payload.policy_number)
  formData.append('type', payload.type)
  formData.append('start_date', payload.start_date)
  formData.append('end_date', payload.end_date)