Primeros cambios para cambiar los componentes de SF por PrimeVue

frontend/.env

+VITE_APP_TITLE=miPediatra
+VITE_APP_SYNCFUSION_LICENSE=Mgo+DSMBaFt+QHFqUUdrXVNbdV5dVGpAd0N3RGlcdlR1fUUmHVdTRHRcQllhTX9RdUBgXHddeXA=;Mgo+DSMBPh8sVXJ1S0d+WFBPd11dXmJWd1p/THNYflR1fV9DaUwxOX1dQl9gSXpRckRhWnpddXxQTmQ=;ORg4AjUWIQA/Gnt2VFhhQlVFfV5AQmBIYVp/TGpJfl96cVxMZVVBJAtUQF1hSn5XdEFiW3xbc3FcR2dY;MTgyNjc0NkAzMjMxMmUzMTJlMzQzMW9yc3RyZHJZQVJ2OFpuMi9lbWtUMDVTOTVkbVIyNkhYa1U5NmkzYnVGMHM9;MTgyNjc0N0AzMjMxMmUzMTJlMzQzMVV1QVVka1ROTkJSQUhZMlVGYzJBTGErS2RGQ2hlbXg5UEZ0blFPaWxhWGM9;NRAiBiAaIQQuGjN/V0d+XU9Ad1RDX3xKf0x/TGpQb19xflBPallYVBYiSV9jS31TckdnWH1ddXdQT2laVQ==;MTgyNjc0OUAzMjMxMmUzMTJlMzQzMWVMMkFTTlZmWGt6eEkrMDFpVm9Qa0NsYWFHRzlnN2hPZEZjcytVb0ZiaFE9;MTgyNjc1MEAzMjMxMmUzMTJlMzQzMUM2QmFQZzIzNzRiRjNyaDNJNzN5RjlNMWxxdElTOGpRSUxUOHdNNCtvYlE9;Mgo+DSMBMAY9C3t2VFhhQlVFfV5AQmBIYVp/TGpJfl96cVxMZVVBJAtUQF1hSn5XdEFiW3xbc3JVQGZY;MTgyNjc1MkAzMjMxMmUzMTJlMzQzMVVEOHZuL1MxYkNKekpvVE9MOFJHa28yLzg3djdlT1hKZ2U4MjdUUkh5TzQ9;MTgyNjc1M0AzMjMxMmUzMTJlMzQzMVBFK1ZyQnRONUloUCtEOWtUeGtqcnZVamh6eVNmY1ZKZmhKdDgyMlBWcEU9;MTgyNjc1NEAzMjMxMmUzMTJlMzQzMWVMMkFTTlZmWGt6eEkrMDFpVm9Qa0NsYWFHRzlnN2hPZEZjcytVb0ZiaFE9
\ No newline at end of file

frontend/.env.production

+VITE_APP_API_URL=https://api.bulky.es/
\ No newline at end of file

frontend/.eslintrc.js

-module.exports = {
-    extends: [
-        'plugin:vue/vue3-essential',
-        'prettier',
-    ],
-    rules: {
-        // override/add rules settings here, such as:
-        'vue/no-unused-vars': 'error',
-    },
-}
\ No newline at end of file

frontend/package.json

@@ -27,8 +27,10 @@
     "axios": "^1.4.0",
     "cldr-data": "^36.0.1",
     "date-fns": "^2.30.0",
-    "firebase": "^9.20.0",
+    "moment": "^2.29.4",
     "pinia": "^2.0.33",
+    "primeicons": "^6.0.1",
+    "primevue": "^3.29.2",
     "sweetalert2": "^11.4.8",
     "tailwindcss": "^3.2.7",
     "vite-plugin-json5": "^1.0.5",
@@ -36,7 +38,6 @@
     "vue-class-component": "^8.0.0-rc.1",
     "vue-router": "^4.1.5",
     "vue-sweetalert2": "^5.0.5",
-    "vue3-apexcharts": "^1.4.1",
     "vue3-perfect-scrollbar": "^1.6.0"
   },
   "devDependencies": {

frontend/src/components/base/BaseBtn.vue

-<script>
-import { ButtonComponent } from "@syncfusion/ej2-vue-buttons";
-
-export default {
-  emits: ["submitForm", "click"],
-  components: { "ejs-button": ButtonComponent },
-  props: {
-    text: String,
-    class: {
-      type: String,
-      default: "e-btn e-outline",
-    },
-    type: String,
-  },
-  name: "BaseBtn",
-  data() {
-    return {
-      buttonType: this.type,
-    };
-  },
-  methods: {
-    emitEvent() {
-      if (this.type === "submit") {
-        this.$emit("submitForm");
-      } else {
-        this.$emit("click");
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <ejs-button
-    :class="this.class"
-    :type="buttonType"
-    class="e-btn button"
-    @click="emitEvent"
-  >
-    {{ text }}
-  </ejs-button>
-
-  <slot></slot>
-</template>
-
-<style scoped>
-.button {
-  margin: 5px;
-  text-transform: none;
-}
-
-button:hover {
-}
-</style>

frontend/src/components/base/BaseFormInput.vue

+<template>
+  <div>
+    <div class="text-left">
+      <span class="p-float-label">
+        <InputText
+          ref="inputField"
+          v-model="data"
+          :class="validClass"
+          @blur="validate"
+          @keyup.enter="validate"
+        />
+        <label for="username">{{ text }}</label>
+      </span>
+    </div>
+    <label v-show="!isValid" class="e-error">{{ errorMessage }}</label>
+  </div>
+</template>
+
 <script>
-import { TextBoxComponent } from "@syncfusion/ej2-vue-inputs";
+import InputText from "primevue/inputtext";
 
 export default {
   name: "BaseFormInput",
-  components: { "ejs-textbox": TextBoxComponent },
+  components: { InputText },
   props: ["modelValue", "text", "isValid", "errorMessage"],
   emits: ["update:modelValue"],
   data() {
@@ -26,21 +44,4 @@ export default {
 };
 </script>
 
-<template>
-  <div>
-    <div class="text-left">
-      <ejs-textbox
-        ref="inputField"
-        v-model="data"
-        :class="validClass"
-        :placeholder="text"
-        floatLabelType="Auto"
-        @blur="validate"
-        @keydown.enter="validate"
-      ></ejs-textbox>
-    </div>
-    <label v-show="!isValid" class="e-error">{{ errorMessage }}</label>
-  </div>
-</template>
-
 <style scoped></style>

frontend/src/components/base/BasePageCard.vue

@@ -36,7 +36,7 @@ export default {
             <div class="title mb-2 md:mb-0">
               <slot name="title" />
             </div>
-            <div class="button">
+            <div>
               <slot name="button" />
             </div>
           </div>

frontend/src/components/consultations/ConsultationsList.vue

@@ -35,11 +35,7 @@ export default {
 <template>
   <div v-if="consultations" class="container mx-auto">
     <div class="flex flex-row items-start max-w-xs mb-4 mt-4">
-      <ConsultationsTypeCombo
-        class="w-24"
-        mode="filter"
-        @selected-item="handleFilter"
-      />
+      <ConsultationsTypeCombo mode="filter" @selected-item="handleFilter" />
     </div>
     <div
       v-if="consultationsToShow && consultationsToShow.length"

frontend/src/components/consultations/EmergencyForm.vue

@@ -41,7 +41,6 @@ export default {
     <h2 class="pb-4">Datos concretos</h2>
     <div class="grid sm:grid-cols-1 md:grid-cols-2 gap-4 pt-4">
       <div class="md:col-span-1">
-        <div class="whitespace-nowrap text-align-right">Síntomas:</div>
         <div class="flex-grow ml-2">
           <SymptomsCombo
             :patient="formData.patient"

frontend/src/components/consultations/combos/ConsultationsTypesCombo.vue

 <script>
-import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
+import Dropdown from "primevue/dropdown";
 
 export default {
   name: "ConsultationsTypeCombo",
-  components: { "ejs-dropdownlist": DropDownListComponent },
+  components: { Dropdown },
   props: ["mode"],
   emits: ["selected-item"],
   data() {
     return {
+      selectedValue: null,
       consultationsTypes: [
         {
           id: 0,
@@ -28,7 +29,8 @@ export default {
   },
   methods: {
     onSelectionChange(e) {
-      this.$emit("selected-item", e.itemData);
+      this.selectedValue = e;
+      this.$emit("selected-item", e);
     },
   },
   beforeMount() {
@@ -44,14 +46,13 @@ export default {
 </script>
 
 <template>
-  <ejs-dropdownlist
-    :dataSource="consultationsTypes"
-    :fields="consultationData.fields"
+  <Dropdown
+    :modelValue="selectedValue"
+    :optionLabel="consultationData.fields.text"
+    :options="consultationsTypes"
     :placeholder="consultationData.placeholder"
-    popupHeight="450px"
-    @change="onSelectionChange"
-  >
-  </ejs-dropdownlist>
+    @update:modelValue="onSelectionChange"
+  />
 </template>
 
 <style scoped></style>

frontend/src/components/consultations/combos/SymptomsCombo.vue

+<template>
+  <div class="p-field">
+    <div class="p-float-label">
+      <Dropdown
+        id="symptom"
+        v-model="selectedSymptom"
+        :options="symptomsData.data"
+        class="w-full md:w-14rem"
+        filter
+        optionGroupChildren="items"
+        optionGroupLabel="state"
+        optionLabel="name"
+        placeholder="Seleccione un síntoma..."
+        @change="onSelectionChange"
+      ></Dropdown>
+      <label for="symptom">Síntomas</label>
+    </div>
+  </div>
+</template>
+
 <script>
-import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
-import symptomsList from "@/data/symptoms.json";
-import { Predicate, Query } from "@syncfusion/ej2-data";
 import { usePatientsStore } from "@/store/patientsStore.js";
 import { useLoadingStore } from "@/store/loadingStore.js";
 import { mapActions } from "pinia";
+import symptomsList from "@/data/symptoms.json";
+import Dropdown from "primevue/dropdown";
 
 export default {
-  name: "SymptomsComo",
-  components: { "ejs-dropdownlist": DropDownListComponent },
+  name: "SymptomsCombo",
+  components: { Dropdown },
   emits: ["selected-item"],
   props: {
     patient: {
@@ -21,10 +40,9 @@ export default {
       allSymptoms: [],
       patientSymptoms: [],
       symptomsData: {
-        fields: { groupBy: "state", text: "name", value: "id" },
-        placeholder: "Seleccione un tipo de síntoma...",
-        data: symptomsList.symptoms,
+        data: [],
       },
+      selectedSymptom: null,
     };
   },
   watch: {
@@ -44,53 +62,40 @@ export default {
       if (this.patient) {
         this.patientSymptoms = (
           await this.getLatestSymptomsFromPatient(this.patient, 5)
-        ).map((symptom) => ({ ...symptom, state: "Recientes" }));
+        ).map((symptom) => ({ name: symptom.name, id: symptom.id }));
+
+        this.allSymptoms = symptomsList.symptoms.map((symptom) => ({
+          name: symptom.name,
+          id: symptom.id,
+        }));
 
-        this.symptomsData.data = [...this.patientSymptoms, ...this.allSymptoms];
-      } else {
-        this.patientSymptoms = [];
-        this.symptomsData.data = [...this.allSymptoms];
+        this.symptomsData.data = [
+          {
+            state: "Recientes",
+            items: this.patientSymptoms,
+          },
+          {
+            state: "Todos",
+            items: this.allSymptoms,
+          },
+        ];
       }
-      this.setLoading(false);
-    },
 
-    onSelectionChange(e) {
-      this.$emit("selected-item", e.itemData);
+      this.setLoading(false);
     },
-    onFiltering(e) {
-      let predicate = new Predicate("name", "contains", e.text, true);
-
-      if (e.text !== "") {
-        const customPredicate = new Predicate("name", "equal", "Otros", true);
-        predicate = predicate.or(customPredicate);
-      }
 
-      let query = new Query();
-      query = query.where(predicate);
-      e.updateData(this.symptomsData.data, query);
+    onSelectionChange(symptom) {
+      this.$emit("selected-item", this.selectedSymptom);
     },
   },
   beforeMount() {
-    this.allSymptoms = symptomsList.symptoms.map((symptom) => ({
-      ...symptom,
-      state: "Todos",
-    }));
+    this.updateSymptoms();
   },
 };
 </script>
 
-<template>
-  <ejs-dropdownlist
-    :allowFiltering="true"
-    :dataSource="symptomsData.data"
-    :fields="symptomsData.fields"
-    :filtering="onFiltering"
-    :placeholder="symptomsData.placeholder"
-    locale="es"
-    popupHeight="450px"
-    @change="onSelectionChange"
-  >
-  </ejs-dropdownlist>
-</template>
-
-<style scoped></style>
+<style scoped>
+.p-field {
+  margin: 0.5em 0;
+}
+</style>

frontend/src/components/patients/PatientCard.vue

 <script>
 import { publicImagesPath } from "@/router/publicPath.js";
-import { TooltipComponent } from "@syncfusion/ej2-vue-popups";
 
 export default {
   name: "PatientCard",
   props: ["patient"],
-  components: {
-    "ejs-tooltip": TooltipComponent,
-  },
   computed: {
     photoSrc() {
       if (this.patient.photo && this.patient.photo.data) {
@@ -31,19 +27,12 @@ export default {
   },
   methods: {
     formatDate(date) {
-      return (
-        new Date(date).toLocaleDateString("es-ES", {
-          weekday: "long",
-          year: "numeric",
-          month: "long",
-          day: "numeric",
-        }) +
-        " a las " +
-        new Date(date).toLocaleTimeString("es-ES", {
-          hour: "numeric",
-          minute: "2-digit",
-        })
-      );
+      return new Date(date).toLocaleDateString("es-ES", {
+        weekday: "long",
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      });
     },
   },
 };
@@ -69,22 +58,21 @@ export default {
       {{ patient.comments }}
     </p>
     <div class="mt-4 flex justify-center gap-4">
-      <ejs-tooltip ref="tooltip" content="Detalles">
-        <router-link
-          :to="{ name: 'PatientDetailsPage', params: { id: patient.id } }"
-          class="hover:text-primary text-2xl"
-        >
-          <i class="i-Search-People"></i>
-        </router-link>
-      </ejs-tooltip>
-      <ejs-tooltip ref="tooltip" content="Editar">
-        <router-link
-          :to="{ name: 'PatientEditPage', params: { id: patient.id } }"
-          class="hover:text-primary text-2xl"
-        >
-          <i class="i-Pen-3"></i>
-        </router-link>
-      </ejs-tooltip>
+      <router-link
+        v-tooltip.top="'Detalles'"
+        :to="{ name: 'PatientDetailsPage', params: { id: patient.id } }"
+        class="hover:text-primary text-2xl"
+      >
+        <i class="i-Search-People"></i>
+      </router-link>
+
+      <router-link
+        v-tooltip.top="'Editar'"
+        :to="{ name: 'PatientEditPage', params: { id: patient.id } }"
+        class="hover:text-primary text-2xl"
+      >
+        <i class="i-Pen-3"></i>
+      </router-link>
     </div>
   </BaseCard>
 </template>

frontend/src/components/patients/PatientDetailsTab.vue

@@ -33,19 +33,12 @@ export default {
     ...mapActions(useLoadingStore, ["setLoading"]),
     ...mapActions(useLoadingStore, ["deletePatient"]),
     formatDate(date) {
-      return (
-        new Date(date).toLocaleDateString("es-ES", {
-          weekday: "long",
-          year: "numeric",
-          month: "long",
-          day: "numeric",
-        }) +
-        " a las " +
-        new Date(date).toLocaleTimeString("es-ES", {
-          hour: "numeric",
-          minute: "2-digit",
-        })
-      );
+      return new Date(date).toLocaleDateString("es-ES", {
+        weekday: "long",
+        year: "numeric",
+        month: "long",
+        day: "numeric",
+      });
     },
     getGenderDisplay() {
       let selectedGender;
@@ -131,13 +124,20 @@ export default {
       <router-link
         :to="{ name: 'PatientEditPage', params: { id: patient.id } }"
       >
-        <BaseBtn class="i-Pen-3" text=" Editar"></BaseBtn>
+        <Button
+          icon="pi pi-pencil"
+          label="Editar"
+          severity="warning"
+          size="small"
+        />
       </router-link>
-      <BaseBtn
-        class="i-Eraser-2 e-danger"
-        text=" Borrar"
+      <Button
+        icon="pi pi-trash"
+        label="Borrar"
+        severity="danger"
+        size="small"
         @click="confirmDeletePatient"
-      ></BaseBtn>
+      />
     </div>
   </div>
 </template>

frontend/src/components/patients/PatientGeneralForm.vue

@@ -2,14 +2,13 @@
 import GenderCombo from "@/components/patients/combos/GendersCombo.vue";
 import AutonomousCommunityCombo from "@/components/patients/combos/AutonomousCommunitiesCombo.vue";
 import BloodTypesCombo from "@/components/patients/combos/BloodTypesCombo.vue";
-import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
-import { DateTimePickerComponent } from "@syncfusion/ej2-vue-calendars";
-import {
-  NumericTextBoxComponent,
-  UploaderComponent,
-} from "@syncfusion/ej2-vue-inputs";
-
 import { publicImagesPath } from "@/router/publicPath.js";
+import FileUpload from "primevue/fileupload";
+import Calendar from "primevue/calendar";
+import InputNumber from "primevue/inputnumber";
+import moment from "moment";
+
+moment.locale("es");
 
 export default {
   name: "PatientGeneralForm",
@@ -17,10 +16,9 @@ export default {
     BloodTypesCombo,
     AutonomousCommunityCombo,
     GenderCombo,
-    "ejs-dropdownlist": DropDownListComponent,
-    "ejs-datetimepicker": DateTimePickerComponent,
-    "ejs-numerictextbox": NumericTextBoxComponent,
-    "ejs-uploader": UploaderComponent,
+    FileUpload,
+    Calendar,
+    InputNumber,
   },
   props: {
     formData: {
@@ -34,6 +32,7 @@ export default {
   },
   data() {
     return {
+      formattedDate: null,
       isValidName: true,
       isValidLastName: true,
       isValidDescription: true,
@@ -43,6 +42,24 @@ export default {
       isValidPhoto: true,
     };
   },
+  watch: {
+    "formData.birthdate": {
+      immediate: true,
+      handler(newVal) {
+        this.formattedDate = newVal
+          ? moment(newVal).format("DD/MM/YYYY")
+          : null;
+      },
+    },
+    formattedDate: {
+      immediate: true,
+      handler(newVal) {
+        this.formData.birthdate = newVal
+          ? new Date(moment(newVal, "DD/MM/YYYY"))
+          : null;
+      },
+    },
+  },
   computed: {
     loaded() {
       return this.formData != null;
@@ -76,17 +93,17 @@ export default {
   },
   methods: {
     onFileSelect(args) {
-      if (args.filesData[0].statusCode !== "1") {
+      if (args.files.length === 0) {
         this.isValidPhoto = false;
       } else {
         this.formData.changedPhoto = true;
         this.isValidPhoto = true;
-        this.formData.photo = args.filesData[0];
+        this.formData.photo = args.files[0];
         const reader = new FileReader();
         reader.onload = (event) => {
           this.formData.previewImage = event.target.result;
         };
-        reader.readAsDataURL(this.formData.photo.rawFile);
+        reader.readAsDataURL(this.formData.photo);
       }
     },
     onFileRemove() {
@@ -160,17 +177,16 @@ export default {
         <div class="md:col-span-2">
           <div class="text-align-right">Cambiar foto:</div>
           <div class="upload-area ml-2">
-            <ejs-uploader
-              ref="uploader"
-              :autoUpload="false"
+            <FileUpload
+              :maxFileSize="5000000"
               :multiple="false"
-              :removing="onFileRemove"
-              :selected="onFileSelect"
-              allowedExtensions=".jpg, .png, .jpeg"
-              locale="es"
-              maxFileSize="5000000"
-              name="UploadFiles"
-            ></ejs-uploader>
+              accept="image/*"
+              mode="basic"
+              name="demo[]"
+              @remove="onFileRemove"
+              @select="onFileSelect"
+            >
+            </FileUpload>
           </div>
         </div>
       </div>
@@ -209,14 +225,21 @@ export default {
         >
       </div>
       <div class="md:col-span-1">
-        <ejs-datetimepicker
-          id="datetimepicker"
-          v-model="formData.birthdate"
-          format="dd/MM/yyyy hh:mm"
-          locale="es"
-          placeholder="Fecha de nacimiento"
-          @change="validateBirthdate"
-        ></ejs-datetimepicker>
+        <span class="p-float-label">
+          <Calendar
+            id="datepicker"
+            v-model="formData.birthdate"
+            :class="!isValidBirthdate ? 'p-invalid' : ''"
+            :showIcon="true"
+            dateFormat="dd/mm/yy"
+            placeholder="Fecha de nacimiento"
+            showButtonBar
+            showIcon
+            @update:modelValue="validateBirthdate"
+          >
+          </Calendar>
+          <label for="birth_date">Fecha de nacimiento</label>
+        </span>
         <label v-show="!isValidBirthdate" class="e-error"
           >Debe introducir una fecha correcta</label
         >
@@ -233,12 +256,18 @@ export default {
       </div>
 
       <div class="md:col-span-1 flex">
-        <div class="whitespace-nowrap text-align-right">Peso al nacer:</div>
         <div class="flex-grow ml-2">
-          <ejs-numerictextbox
-            v-model="formData.birthWeight"
-            format="###.### kg"
-          ></ejs-numerictextbox>
+          <span class="p-float-label">
+            <InputNumber
+              v-model="formData.birthWeight"
+              :maxFractionDigits="3"
+              :minFractionDigits="3"
+              :suffix="' kg'"
+              mode="decimal"
+            >
+            </InputNumber>
+            <label for="number-input">Peso al nacer</label>
+          </span>
         </div>
       </div>
 

frontend/src/data/es.json

+{
+  "es": {
+    "startsWith": "Comience con",
+    "contains": "Contenga",
+    "notContains": "No contenga",
+    "endsWith": "Termine con",
+    "equals": "Igual a",
+    "notEquals": "Diferente a",
+    "noFilter": "Sin filtro",
+    "lt": "Menor que",
+    "lte": "Menor o igual a",
+    "gt": "Mayor que",
+    "gte": "Mayor o igual a",
+    "dateIs": "Fecha igual a",
+    "dateIsNot": "Fecha diferente a",
+    "dateBefore": "Fecha antes de",
+    "dateAfter": "Fecha después de",
+    "custom": "Personalizar",
+    "clear": "Limpiar",
+    "apply": "Aplicar",
+    "matchAll": "Coincidir todo",
+    "matchAny": "Coincidir con cualquiera",
+    "addRule": "Agregar regla",
+    "removeRule": "Eliminar regla",
+    "accept": "Sí",
+    "reject": "No",
+    "choose": "Examinar",
+    "upload": "Subir",
+    "cancel": "Cancelar",
+    "dayNames": [
+      "Domingo",
+      "Lunes",
+      "Martes",
+      "Miércoles",
+      "Jueves",
+      "Viernes",
+      "Sábado"
+    ],
+    "dayNamesShort": [
+      "Dom",
+      "Lun",
+      "Mar",
+      "Mié",
+      "Jue",
+      "Vie",
+      "Sáb"
+    ],
+    "dayNamesMin": [
+      "D",
+      "L",
+      "M",
+      "X",
+      "J",
+      "V",
+      "S"
+    ],
+    "monthNames": [
+      "Enero",
+      "Febrero",
+      "Marzo",
+      "Abril",
+      "Mayo",
+      "Junio",
+      "Julio",
+      "Agosto",
+      "Septiembre",
+      "Octubre",
+      "Noviembre",
+      "Diciembre"
+    ],
+    "monthNamesShort": [
+      "Ene",
+      "Feb",
+      "Mar",
+      "Abr",
+      "May",
+      "Jun",
+      "Jul",
+      "Ago",
+      "Sep",
+      "Oct",
+      "Nov",
+      "Dic"
+    ],
+    "today": "Hoy",
+    "weekHeader": "Sem",
+    "firstDayOfWeek": 1,
+    "dateFormat": "dd/mm/yy",
+    "weak": "Débil",
+    "medium": "Medio",
+    "strong": "Fuerte",
+    "passwordPrompt": "Escriba una contraseña",
+    "emptyFilterMessage": "Sin opciones disponibles",
+    "emptyMessage": "No se han encontrado resultados",
+    "aria": {
+      "trueLabel": "Verdadero",
+      "falseLabel": "Falso",
+      "nullLabel": "No seleccionado",
+      "star": "1 estrella",
+      "stars": "{star} estrellas",
+      "selectAll": "Seleccionar todos",
+      "unselectAll": "Deseleccionar todos",
+      "close": "Cerrar",
+      "previous": "Anterior",
+      "next": "Siguiente",
+      "navigation": "Navegación",
+      "scrollTop": "Desplazarse arriba",
+      "moveTop": "Mover arriba",
+      "moveUp": "Subir",
+      "moveDown": "Bajar",
+      "moveBottom": "Desplazarse abajo",
+      "moveToTarget": "Mover al objectivo",
+      "moveToSource": "Mover al fuente",
+      "moveAllToTarget": "Mover todo al objetivo",
+      "moveAllToSource": "Mover todo al fuente",
+      "pageLabel": "{page}",
+      "firstPageLabel": "Primera Página",
+      "lastPageLabel": "Última Página",
+      "nextPageLabel": "Siguiente Página",
+      "previousPageLabel": "Página Anterior",
+      "rowsPerPageLabel": "Filas por página",
+      "jumpToPageDropdownLabel": "Ir al menú desplegable de página",
+      "jumpToPageInputLabel": "Ir a la entrada de página",
+      "selectRow": "Seleccionar fila",
+      "unselectRow": "Desmarcar fila",
+      "expandRow": "Expandir Fila",
+      "collapseRow": "Reducir Fila",
+      "showFilterMenu": "Mostrar menú del filtro",
+      "hideFilterMenu": "Ocultar menú del filtro",
+      "filterOperator": "Operador de filtro",
+      "filterConstraint": "Restricción de filtro",
+      "editRow": "Editar fila",
+      "saveEdit": "Guardar editado",
+      "cancelEdit": "Cancelar editado",
+      "listView": "Vista de lista",
+      "gridView": "Vista de cuadrícula",
+      "slide": "Deslizar",
+      "slideNumber": "{slideNumber}",
+      "zoomImage": "Ampliar imagen",
+      "zoomIn": "Ampliar",
+      "zoomOut": "Reducir",
+      "rotateRight": "Girar derecha",
+      "rotateLeft": "Girar izquierda"
+    }
+  }
+}
\ No newline at end of file

frontend/src/index.css

@@ -5,6 +5,9 @@
 @import "../node_modules/@syncfusion/ej2-vue-calendars/styles/tailwind.css";
 @import "../node_modules/@syncfusion/ej2-vue-dropdowns/styles/tailwind.css";
 @import "../node_modules/@syncfusion/ej2-icons/styles/tailwind.css";
+@import "primevue/resources/themes/mdc-light-indigo/theme.css";
+@import "primevue/resources/primevue.min.css";
+@import 'primeicons/primeicons.css';
 
 @tailwind base;
 

frontend/src/main.js

 import { createApp } from "vue";
 import App from "./App.vue";
-import "./services/l10n.js";
+import local from "./data/es.json";
 
 // CSS Globales
 import "./assets/scss/global.scss";
@@ -16,6 +16,11 @@ import router from "./router/router.js";
 import PerfectScrollbar from "vue3-perfect-scrollbar";
 import "vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css";
 
+// PrimeVue
+import PrimeVue from "primevue/config";
+import Button from "primevue/button";
+import Tooltip from "primevue/tooltip";
+
 // Syncfusion
 import { registerLicense } from "@syncfusion/ej2-base";
 import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
@@ -34,7 +39,6 @@ import "sweetalert2/dist/sweetalert2.min.css";
 
 // Los componentes base
 import BaseCard from "./components/base/BaseCard.vue";
-import BaseBtn from "./components/base/BaseBtn.vue";
 import BaseFormInput from "./components/base/BaseFormInput.vue";
 import BreadCrumbs from "./components/base/BaseBreadCrumbs.vue";
 import BasePageCard from "./components/base/BasePageCard.vue";
@@ -42,12 +46,16 @@ import BasePageCard from "./components/base/BasePageCard.vue";
 registerLicense(import.meta.env.VITE_APP_SYNCFUSION_LICENSE);
 
 createApp(App)
+  .directive("tooltip", Tooltip)
   .component("BaseCard", BaseCard)
-  .component("BaseBtn", BaseBtn)
+  .component("Button", Button)
   .component("BaseFormInput", BaseFormInput)
   .component("BreadCrumbs", BreadCrumbs)
   .component("BasePageCard", BasePageCard)
   .use(VueSweetalert2)
+  .use(PrimeVue, {
+    locale: local.es,
+  })
   .use(ButtonPlugin)
   .use(TooltipPlugin)
   .use(DialogPlugin)

frontend/src/services/l10n.js

-import { L10n, loadCldr } from "@syncfusion/ej2-base";
-
-import * as numberingSystems from "cldr-data/supplemental/numberingSystems.json";
-import * as gregorian from "cldr-data/main/es/ca-gregorian.json";
-import * as numbers from "cldr-data/main/es/numbers.json";
-import * as timeZoneNames from "cldr-data/main/es/timeZoneNames.json";
-import * as weekData from "cldr-data/supplemental/weekData.json";
-
-loadCldr(numberingSystems, gregorian, numbers, timeZoneNames, weekData);
-
-L10n.load({
-  es: {
-    datetimepicker: { today: "Hoy" },
-    uploader: {
-      Browse: "Examinar",
-      dropFilesHint: "...o arrastre sus archivos aquí",
-      remove: "Eliminar",
-      delete: "Borrar archivo",
-      invalidFileType: "El tipo de archivo no está permitido",
-      invalidMaxFileSize: "El tamaño del archivo es demasiado grande.",
-      totalFiles: "Archivos totales",
-      size: "Tamaño",
-      invalidSelection: "Archivos no válidos seleccionados",
-    },
-    "drop-down-list": {
-      noRecordsTemplate: "No se encontraron registros",
-      actionFailureTemplate: "La solicitud falló",
-    },
-  },
-});