chore: update application configuration and UI components for improved styling and functionality

components/WizardCostsStep.vue

@@ -1,55 +1,74 @@
 <template>
   <div class="space-y-6">
     <div>
-      <h3 class="text-lg font-medium mb-4">Operating Costs</h3>
-      <p class="text-gray-600 mb-6">
-        Add your monthly overhead costs. Production costs are handled
-        separately.
-      </p>
+      <h3 class="text-2xl font-black text-black mb-4">
+        Where does your money go?
+      </h3>
     </div>
 
     <!-- Overhead Costs -->
     <div class="space-y-4">
-      <div class="flex items-center justify-between">
-        <h4 class="font-medium">Monthly Overhead</h4>
-        <UButton size="sm" @click="addOverheadCost" icon="i-heroicons-plus">
+      <div
+        v-if="overheadCosts.length > 0"
+        class="flex items-center justify-between">
+        <h4 class="text-lg font-bold text-black">Monthly Overhead</h4>
+        <UButton
+          size="sm"
+          @click="addOverheadCost"
+          variant="solid"
+          color="success"
+          :ui="{
+            base: 'cursor-pointer hover:scale-105 transition-transform',
+            leadingIcon: 'hover:rotate-90 transition-transform',
+          }">
+          <UIcon name="i-heroicons-plus" class="mr-1" />
           Add Cost
         </UButton>
       </div>
 
       <div
         v-if="overheadCosts.length === 0"
-        class="text-center py-8 text-gray-500">
-        <p>No overhead costs added yet.</p>
-        <p class="text-sm">
+        class="text-center py-12 border-4 border-dashed border-black rounded-xl bg-white shadow-lg">
+        <h4 class="font-medium text-neutral-900 mb-2">No overhead costs yet</h4>
+        <p class="text-sm text-neutral-500 mb-4">
           Add costs like rent, tools, insurance, or other recurring expenses.
         </p>
+        <UButton
+          @click="addOverheadCost"
+          size="lg"
+          variant="solid"
+          color="primary">
+          <UIcon name="i-heroicons-plus" class="mr-2" />
+          Add your first cost
+        </UButton>
       </div>
 
       <div
         v-for="cost in overheadCosts"
         :key="cost.id"
-        class="p-4 border border-gray-200 rounded-lg">
+        class="p-6 border-3 border-black rounded-xl bg-white shadow-md">
         <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
           <UFormField label="Cost Name" required>
             <UInput
               v-model="cost.name"
               placeholder="Office rent"
+              size="xl"
+              class="text-lg font-medium w-full"
               @update:model-value="saveCost(cost)"
               @blur="saveCost(cost)" />
           </UFormField>
 
           <UFormField label="Monthly Amount" required>
             <UInput
-              v-model.number="cost.amount"
-              type="number"
-              min="0"
-              step="0.01"
+              v-model="cost.amount"
+              type="text"
               placeholder="800.00"
-              @update:model-value="saveCost(cost)"
+              size="xl"
+              class="text-lg font-bold w-full"
+              @update:model-value="validateAndSaveAmount($event, cost)"
               @blur="saveCost(cost)">
               <template #leading>
-                <span class="text-gray-500">€</span>
+                <span class="text-neutral-500">€</span>
               </template>
             </UInput>
           </UFormField>
@@ -58,65 +77,40 @@
             <USelect
               v-model="cost.category"
               :items="categoryOptions"
+              size="xl"
+              class="text-lg font-medium w-full"
               @update:model-value="saveCost(cost)" />
           </UFormField>
         </div>
 
-        <div class="flex justify-end mt-4 pt-4 border-t border-gray-100">
+        <div class="flex justify-end mt-6 pt-6 border-t-3 border-black">
           <UButton
-            size="sm"
-            variant="ghost"
-            color="red"
-            @click="removeCost(cost.id)">
-            Remove
+            size="xs"
+            variant="solid"
+            color="error"
+            @click="removeCost(cost.id)"
+            :ui="{
+              base: 'cursor-pointer hover:opacity-90 transition-opacity',
+            }">
+            <UIcon name="i-heroicons-trash" class="w-4 h-4" />
           </UButton>
         </div>
       </div>
-    </div>
 
-    <!-- Cost Categories -->
-    <div class="bg-blue-50 rounded-lg p-4">
-      <h4 class="font-medium text-sm mb-2 text-blue-900">Cost Categories</h4>
-      <div class="grid grid-cols-2 md:grid-cols-4 gap-3 text-xs">
-        <div>
-          <span class="font-medium text-blue-800">Operations:</span>
-          <span class="text-blue-700 ml-1">Rent, utilities, insurance</span>
-        </div>
-        <div>
-          <span class="font-medium text-blue-800">Tools:</span>
-          <span class="text-blue-700 ml-1">Software, hardware, licenses</span>
-        </div>
-        <div>
-          <span class="font-medium text-blue-800">Professional:</span>
-          <span class="text-blue-700 ml-1">Legal, accounting, consulting</span>
-        </div>
-        <div>
-          <span class="font-medium text-blue-800">Other:</span>
-          <span class="text-blue-700 ml-1">Miscellaneous costs</span>
-        </div>
-      </div>
-    </div>
-
-    <!-- Summary -->
-    <div class="bg-gray-50 rounded-lg p-4">
-      <h4 class="font-medium text-sm mb-2">Cost Summary</h4>
-      <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
-        <div>
-          <span class="text-gray-600">Total items:</span>
-          <span class="font-medium ml-1">{{ overheadCosts.length }}</span>
-        </div>
-        <div>
-          <span class="text-gray-600">Monthly overhead:</span>
-          <span class="font-medium ml-1">€{{ totalMonthlyCosts }}</span>
-        </div>
-        <div>
-          <span class="text-gray-600">Largest cost:</span>
-          <span class="font-medium ml-1">€{{ largestCost }}</span>
-        </div>
-        <div>
-          <span class="text-gray-600">Avg per item:</span>
-          <span class="font-medium ml-1">€{{ avgCostPerItem }}</span>
-        </div>
+      <!-- Add Cost Button (when items exist) -->
+      <div v-if="overheadCosts.length > 0" class="flex justify-center">
+        <UButton
+          @click="addOverheadCost"
+          size="lg"
+          variant="solid"
+          color="success"
+          :ui="{
+            base: 'cursor-pointer hover:scale-105 transition-transform',
+            leadingIcon: 'hover:rotate-90 transition-transform',
+          }">
+          <UIcon name="i-heroicons-plus" class="mr-2" />
+          Add another cost
+        </UButton>
       </div>
     </div>
   </div>
@@ -182,6 +176,13 @@ function saveCost(cost: any) {
   }
 }
 
+// Validation function for amount
+function validateAndSaveAmount(value: string, cost: any) {
+  const numValue = parseFloat(value.replace(/[^\d.]/g, ""));
+  cost.amount = isNaN(numValue) ? 0 : Math.max(0, numValue);
+  saveCost(cost);
+}
+
 function addOverheadCost() {
   const newCost = {
     id: Date.now().toString(),