Refactor Matrix Calculator Architecture and Fix Build Issues

.gitignore

@@ -8,6 +8,7 @@ node_modules
 .env.*.local
 
 # Log files
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

src/components/AppNotification.vue

@@ -0,0 +1,20 @@
+<template>
+  <div v-if="show" class="fixed bottom-4 right-4 bg-green-500 text-white p-4 rounded-lg shadow-lg transition-opacity duration-300" :class="{ 'opacity-0': !show }">
+    <p>{{ message }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    message: {
+      type: String,
+      required: true,
+    },
+    show: {
+      type: Boolean,
+      required: true,
+    },
+  },
+};
+</script>

src/components/ErrorDisplay.vue

@@ -0,0 +1,17 @@
+<template>
+  <div v-if="error" class="bg-red-500 text-white p-4 rounded-lg shadow-lg">
+    <p class="font-bold">Error:</p>
+    <p>{{ error }}</p>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    error: {
+      type: String,
+      default: null,
+    },
+  },
+};
+</script>