Feat: Show notes panel on crm page (#2320)

* Feat: Show notes panel on CRM page

Co-authored-by: Muhsin Keloth <muhsinkeramam@gmail.com>

app/javascript/dashboard/modules/notes/components/AddNote.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="card">
+    <textarea
+      v-model="inputText"
+      :placeholder="$t('NOTES.ADD.PLACEHOLDER')"
+      class="input--note"
+      @keydown.enter.shift.exact="onAdd"
+    />
+    <div class="footer">
+      <woot-button
+        size="tiny"
+        color-scheme="warning"
+        :title="$t('NOTES.ADD.TITLE')"
+        :is-disabled="buttonDisabled"
+        @click="onAdd"
+      >
+        {{ $t('NOTES.ADD.BUTTON') }}
+      </woot-button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      inputText: '',
+    };
+  },
+
+  computed: {
+    buttonDisabled() {
+      return this.inputText === '';
+    },
+  },
+
+  methods: {
+    onAdd() {
+      if (this.inputText !== '') {
+        this.$emit('add', this.inputText);
+      }
+      this.inputText = '';
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.input--note {
+  font-size: var(--font-size-mini);
+  border-color: transparent;
+  margin-bottom: var(--space-small);
+  padding: 0;
+  resize: none;
+  min-height: var(--space-larger);
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+}
+</style>