feature notifications

src/components/CardBudget.vue

@@ -2,6 +2,8 @@
     import Swal from 'sweetalert2';
     import { useCompanyStore } from '../stores/company';
     import { useI18n } from 'vue-i18n';
+    import { computed } from 'vue';
+    import { formatCurrency } from '../helpers/format_currency';
 
     const props = defineProps({
         budget: {
@@ -9,7 +11,7 @@
             required: true
         }
     })
-
+    
     defineEmits(['set-budget'])
 
     const companyStore = useCompanyStore();
@@ -55,6 +57,12 @@
         });
 
     }
+
+    const totalPercentage = computed(() => {
+		const percent = props.budget.total_profit / props.budget.total_before_tax * 100;
+        const result = isNaN(percent) ? 0.0 : percent;
+		return parseFloat(result).toFixed(2) + "%";
+	});
 </script>
 
 <template>
@@ -71,12 +79,12 @@
                 </div>
                 <div class="col-lg-6 col-md-6 col-sm-12">
                     <p><span>{{ t('calculator.totallt') }}: </span> {{parseFloat( budget.total_fuel_consumed).toFixed(2)}}</p>
-                    <p><span>{{ t('calculator.totalcostDiesel') }}:</span> {{"$" + parseFloat( budget.total_cost_fuel).toFixed(2)}}</p> 
+                    <p><span>{{ t('calculator.totalcostDiesel') }}:</span> {{ formatCurrency( budget.total_cost_fuel) }}</p> 
-                    <p><span>{{ t('calculator.totalBeforeIva') }}:</span> ${{budget.total_before_tax}}</p>
+                    <p><span>{{ t('calculator.totalBeforeIva') }}:</span> {{ formatCurrency(budget.total_before_tax) }}</p>
-                    <p><span>{{ t('calculator.totalUtityByKm') }}:</span> {{"$" + parseFloat( budget.total_utility_per_km).toFixed(2)}}</p>
+                    <p><span>{{ t('calculator.totalUtityByKm') }}:</span> {{ formatCurrency( budget.total_utility_per_km) }}</p>
-                    <p><span>{{ t('calculator.totalUtity') }}:</span> {{"$" + parseFloat( budget.total_profit).toFixed(2)}}</p>
+                    <p><span>{{ t('calculator.totalUtity') }}:</span> {{ formatCurrency( budget.total_profit ) }}</p>
                     <!-- <p>{{ $t('CALCULATOR.PROFIT_PERCENTAGE') }}: {{budget.profit_percentage}}%</p>  -->
-                    <p><span>{{ t('calculator.percentUtility') }}:</span> {{parseFloat(budget.profit_percentage).toFixed(2) + "%"}}</p>
+                    <p><span>{{ t('calculator.percentUtility') }}:</span> {{ totalPercentage }}</p>
                     
                 </div>
             </div>

src/components/CardUser.vue

@@ -1,6 +1,6 @@
 <script setup>
     import Swal from 'sweetalert2';
-    import { getDateMonthDay } from '../helpers/date_formats';
+    import { getDateOnly } from '../helpers/date_formats';
     import { getTypeUser } from '../helpers/type_user';
     import { useCompanyStore } from '../stores/company';
     import { useAuthStore } from '../stores/auth';
@@ -84,18 +84,18 @@
                 <p><span>{{ t('labels.locationLoadState') }}: </span>{{user._user_state}}</p>
                 <p v-if="user.company.truck_type"><span>{{ t('labels.truckUsed') }}: </span> {{user._truck_type}}</p>
                 <p ><span>{{ t('labels.userInfo') }}: </span> {{user.user_description}}</p>
-                <p ><span>{{ t('labels.memberSince') }}: </span>{{getDateMonthDay(user.createdAt)}}</p>
+                <p v-if="user.createAt"><span>{{ t('labels.memberSince') }}: </span>{{getDateOnly(user.createAt)}}</p>
-                <p v-if="readonly" ><span>Tipo de afiliación: </span> {{user.company.membership}}</p>
+                <p v-if="readonly && user.company.membership"><span>Tipo de afiliación: </span> {{user.company.membership}}</p>
-                <p><span>{{ t('labels.userRole') }}: </span>{{user.job_role}}</p>
+                <!-- <p><span>{{ t('labels.userRole') }}: </span>{{user.job_role}}</p> -->
             </div>
             <div class="col-lg-6 col-sm-12" v-else>
                 <p><span>{{ t('global.segments') }}: </span>{{user.categories?.map((e) => e.name).join(', ')}}</p>
                 <p><span>{{ t('labels.locationLoadCity') }}: </span>{{user.user_city?.join(', ')}}</p>
                 <p><span>{{ t('labels.locationLoadState') }}: </span>{{user.user_state?.join(', ')}}</p>
                 <p v-if="user.truck_type"><span>{{ t('labels.truckUsed') }}: </span> {{user.truck_type?.join(', ')}}</p>
-                <p ><span>{{ t('labels.userInfo') }}: </span> {{user.user_description}}</p>
+                <p><span>{{ t('labels.userInfo') }}: </span> {{user.user_description}}</p>
-                <p ><span>{{ t('labels.memberSince') }}: </span>{{getDateMonthDay(user.createdAt)}}</p>
+                <p v-if="user.createAt"><span>{{ t('labels.memberSince') }}: </span>{{getDateOnly(user.createAt)}}</p>
-                <p v-if="readonly" ><span>Tipo de afiliación: </span> {{user.company.membership}}</p>
+                <p v-if="readonly && user.company.membership" ><span>Tipo de afiliación: </span> {{user.company.membership}}</p>
             </div>
         </div>
         <div class="btn-row" v-if="readonly === false && (authStore.user?.job_role === 'owner' || authStore.user?.job_role === 'manager')">

src/components/CreateBudgetModal.vue

@@ -10,7 +10,7 @@
     import Cities from './ui/Cities.vue';
     import html2pdf from 'html2pdf.js';
     import { useI18n } from 'vue-i18n';
-
+    import { formatCurrency } from '../helpers/format_currency';
 
     const props = defineProps({
         budget: {
@@ -133,29 +133,29 @@
 
 		const totalFuelCost = computed(() => {
            budgetForm.total_fuel_cost = isNaN(budgetForm.total_fuel * budgetForm.fuel_price_per_liter) ? 0.0 : budgetForm.total_fuel * budgetForm.fuel_price_per_liter;
-		   return "$" + (isNaN(budgetForm.total_fuel_cost) ? '0.0' : parseFloat(budgetForm.total_fuel_cost).toFixed(2));
+		   return isNaN(budgetForm.total_fuel_cost) ? '0.0' : parseFloat(budgetForm.total_fuel_cost);
 		});
 
 		const totalAdminExpenses = computed(() => {
 		    budgetForm.total_administrative_expenses = budgetForm.driver_salary*1 + budgetForm.accomadation_allowance*1 + budgetForm.other_administrative_expenses*1;
             budgetForm.total_administrative_expenses = isNaN(budgetForm.total_administrative_expenses) ? 0.0 : budgetForm.total_administrative_expenses;
-		   return "$" + (isNaN(budgetForm.total_administrative_expenses) ? '0.0' : parseFloat(budgetForm.total_administrative_expenses).toFixed(2));
+		   return isNaN(budgetForm.total_administrative_expenses) ? '0.0' : parseFloat(budgetForm.total_administrative_expenses);
 		});
 
 		const totalBeforeTax = computed(() => {
 			budgetForm.total_before_tax = budgetForm.tonnage * budgetForm.price_per_ton;
             budgetForm.total_before_tax = isNaN(budgetForm.total_before_tax) ? 0.0 : budgetForm.total_before_tax;
-			return "$" + (isNaN(budgetForm.total_before_tax) ? '0.0' : parseFloat(budgetForm.total_before_tax).toFixed(2));
+			return isNaN(budgetForm.total_before_tax) ? '0.0' : parseFloat(budgetForm.total_before_tax);
 		});
 
 		const totalUtilityPerKm = computed(() => {
-			budgetForm.total_utility_per_km = isNaN(budgetForm.total_before_tax / budgetForm.total_travel) ? 0.0 : (budgetForm.total_before_tax / budgetForm.total_travel);
+			budgetForm.total_utility_per_km = isNaN(budgetForm.total_before_tax / budgetForm.total_travel) ? 0.0 : (budgetForm.total_profit / budgetForm.total_travel);
-			return "$" + (isNaN(budgetForm.total_utility_per_km) ? '0.0' : parseFloat(budgetForm.total_utility_per_km).toFixed(2));
+			return isNaN(budgetForm.total_utility_per_km) ? '0.0' : parseFloat(budgetForm.total_utility_per_km);
 		});
 
 		const totalProfit = computed(() => {
 			budgetForm.total_profit = budgetForm.total_before_tax - budgetForm.total_fuel_cost - budgetForm.other_fuel_expenses - budgetForm.driver_salary - budgetForm.accomadation_allowance - budgetForm.other_administrative_expenses;
-			return "$" + (isNaN(budgetForm.total_profit) ? '0.0' : parseFloat(budgetForm.total_profit).toFixed(2));
+			return isNaN(budgetForm.total_profit) ? '0.0' : parseFloat(budgetForm.total_profit);
 		});
 
 		const totalPercentage = computed(() => {
@@ -432,7 +432,7 @@
                                                     <h6>{{ t('calculator.truckCost4').toLocaleUpperCase() }}</h6>
                                                 </div>
                                                 <div>
-                                                    {{ totalFuelCost }}
+                                                    {{ formatCurrency(totalFuelCost) }}
                                                 </div>
                                             </div>
                                         </div>         
@@ -471,7 +471,7 @@
                                                     <h6>{{ t('calculator.spendsAdminTotal').toUpperCase() }}</h6>
                                                 </div>
                                                 <div>
-                                                    {{ totalAdminExpenses }}
+                                                    {{ formatCurrency(totalAdminExpenses) }}
                                                 </div>
                                             </div>
                                         </div>         
@@ -486,7 +486,7 @@
                                                     <h6>{{ t('calculator.totalBeforeIva').toUpperCase() }}</h6>
                                                 </div>
                                                 <div>
-                                                    {{ totalBeforeTax }}
+                                                    {{ formatCurrency(totalBeforeTax) }}
                                                 </div>
                                             </div>
                                             <div class="calculator-card__totals">
@@ -494,7 +494,7 @@
                                                     <h6>{{ t('calculator.totalUtityByKm').toUpperCase() }}</h6>
                                                 </div>
                                                 <div>
-                                                    {{ totalUtilityPerKm }}
+                                                    {{ formatCurrency(totalUtilityPerKm) }}
                                                 </div>
                                             </div>
                                             <div class="calculator-card__totals">
@@ -502,7 +502,7 @@
                                                     <h6>{{ t('calculator.totalUtity').toUpperCase() }}</h6>
                                                 </div>
                                                 <div>
-                                                    {{ totalProfit }}
+                                                    {{ formatCurrency(totalProfit) }}
                                                 </div>
                                             </div>
                                             <div class="calculator-card__totals">

src/components/CreateLocationModal.vue

@@ -68,6 +68,8 @@
                     meta_value: e
                 }
             });
+            locationForm.location_type = props.location.type;
+            locationForm.zipcode = props.location.zipcode;
             locationForm.address = props.location.address;
             locationForm.description = props.location.description;
             locationForm.zipcode = "";
@@ -96,6 +98,8 @@
 				truck_type: locationForm.truck_type?.length <= 0 ? null : locationForm.truck_type?.map((e) => e.meta_value),
 				description: locationForm.description,
 				company: authStore.user.company,
+                type: locationForm.location_type,
+                zipcode: locationForm.zipcode
 
 			}
 
@@ -199,8 +203,8 @@
                             >
                                 <option disabled value="">-- {{ t('labels.select')}} --</option>
                                 <!-- <option value="owner">Dueño</option> -->
-                                <option value="load">{{ t('labels.load')}}</option>
+                                <option value="loading">{{ t('labels.load')}}</option>
-                                <option value="download">{{ t('labels.download')}}</option>
+                                <option value="unloading">{{ t('labels.download')}}</option>
                                 <option value="both">{{ t('labels.both')}}</option>
                             </select>
                             <span class="error-msg" v-if="errors.location_type">{{ errors.location_type }}</span>

src/components/FormLoadModal.vue

@@ -16,7 +16,7 @@
     import { useCompanyStore } from '../stores/company';
     import { useI18n } from 'vue-i18n';
     import { computed } from 'vue';
-    import {getDateTime, getDateOnly } from '../helpers/date_formats';
+    import {getDateTime } from '../helpers/date_formats';
 
 
     const loadStore = useLoadsStore();

src/components/MakeProposalModal.vue

@@ -47,7 +47,7 @@
     const companyStore = useCompanyStore();
 
 
-    defineEmits(['reset-load'])
+    const emit = defineEmits(['reset-load', 'remove-load'])
     const { t } = useI18n()
 
     onMounted(() => {
@@ -62,11 +62,13 @@
     const initData = async() => {
         isLoading.value = true;
         let filterQuery = [];
-        filterQuery.company = "company="+ authStore.user.company
+        filterQuery.company = "company="+ authStore.user.company._id
         await vehiclesStore.fetchVehicles(filterQuery);
         if(!props.proposal)  {
-            vehiclesAvailable.value = vehiclesStore.vehicles.filter((vehicle) => vehicle.is_available);
+            // vehiclesAvailable.value = vehiclesStore.vehicles.filter((vehicle) => vehicle.is_available);
+            vehiclesAvailable.value = vehiclesStore.vehicles;
         } else {
+            // vehiclesAvailable.value = vehiclesStore.vehicles.filter((vehicle) => vehicle._id === props.proposal.vehicle._id);
             vehiclesAvailable.value = vehiclesStore.vehicles.filter((vehicle) => vehicle.is_available || vehicle._id === props.proposal.vehicle._id);
         }
         originCoords.value = {lat: Number.parseFloat(props.load.origin.lat), lng: Number.parseFloat(props.load.origin.lng)};
@@ -120,6 +122,9 @@
             loadingSubmit.value = true;
             action = t('proposals.msgOffertDone');
             result = await companyStore.createPropsal(formData);
+            if(result === 'success') {
+                emit('remove-load', props.load);
+            }
         } else {
             let formData = {
                 comment: form.comments,

src/components/NavBar.vue

@@ -3,9 +3,13 @@
     import { useAuthStore } from '../stores/auth';
     import { useNotificationsStore } from '../stores/notifications';
     import { useI18n } from 'vue-i18n';
+    import { onMounted, ref } from 'vue';
+    import { getNotificationsCompany } from '../services/company';
 
     const auth = useAuthStore();
     const noty = useNotificationsStore();
+    const { t } = useI18n()
+
      $(document).ready(function() {
         $('#sidebarCollapse').on('click', function () {
             $('#sidebar').toggleClass('active');
@@ -13,7 +17,20 @@
         });
     });
 
-    const { t } = useI18n()
+    onMounted(() => {
+        getNotifications();
+        setInterval(() => {
+            getNotifications();
+        }, 600000); // 5 minutos
+    });
+
+    const getNotifications = async () => {
+        const resp = await getNotificationsCompany();
+        if(resp.data.length > 0) {
+            noty.newNoty = true; 
+        }
+        noty.notifications = resp.data;
+    }
 </script>
 
 <template>
@@ -39,10 +56,22 @@
                         v-if="auth.user?.permissions === 'role_carrier'"
                         active-class="router-link-active"
                         class="nav-link" :to="{name: 'shippers'}"><i class="fa-solid fa-book me-1"></i> <span class="clear-xsm">{{ t('global.shippers') }}</span></RouterLink>
+                    <div 
+                        class="nav-link noty"
+                        @click="noty.toggleNotifications"
+                    >
+                        <i class="fa-regular fa-bell icon"></i>
+                        <div 
+                            class="box-badge" 
+                            v-if="noty.newNoty"
+                        >
+                            <span class="badge bg-danger custom-badge">{{ noty.notifications.length }}</span>
+                        </div>
+                    </div>
                     <a 
                         active-class="router-link-active"
                         @click="noty.toggleProfile"
-                        class="nav-link"><i class="fa-solid fa-user me-1"></i> <span class="clear-xsm">{{ auth?.user?.first_name }}</span></a>
+                        class="nav-link"><i class="fa-regular fa-user"></i></a>
                 </div>
             </div>
     </nav>
@@ -76,7 +105,7 @@
 
     .nav-link{
         cursor: pointer;
-        color: #FBBA33;
+        color: #323030;
         font-size: 1.3rem;
         margin-right: 1.2rem;
         font-weight: 500;
@@ -124,4 +153,22 @@
             display: flex;
         }
     }
+    .icon {
+        font-size: 1.5rem;
+        color: #323030;
+    }
+    .noty {
+        position: relative;
+    }
+
+    .box-badge {
+        position: absolute;
+        top: -15px;
+        right: -15px;
+    }
+    .custom-badge {
+        font-size: 0.7rem;
+        font-weight: normal;
+        padding: 0.3rem 0.5rem;
+    }
 </style>

src/components/NotificationCard.vue

@@ -0,0 +1,136 @@
+<script setup>
+    import { computed, ref } from 'vue';
+    import { useI18n } from 'vue-i18n';
+    import { useRouter } from 'vue-router';
+    import {getDateTime} from '../helpers/date_formats';
+    import { deleteNotification } from '../services/company';
+    import { useNotificationsStore } from '../stores/notifications';
+    import Spiner from './ui/Spiner.vue';
+
+    const props = defineProps({
+        noty: {
+            type: Object,
+            required: true,
+        }
+    })
+
+    const loading = ref(false);
+
+    const { t } = useI18n();
+    const router = useRouter();
+    const notyStore = useNotificationsStore();
+
+    const title = computed(() => {
+        return props.noty.tag == 'new_proposal' ? t('noty.newProposalTitle') : props.noty.tag == 'accepted_proposal' ? t('noty.acceptedProposalTitle') : t('noty.rejectedProposalTitle');
+    })
+
+    const description = computed(() => {
+        return props.noty.tag == 'new_proposal' 
+            ? t('noty.newProposalDesc') 
+            : props.noty.tag == 'accepted_proposal' ? t('noty.acceptedProposalDesc')  
+            : t('noty.rejectedProposalDesc') 
+    })
+
+    const deleteNoty = async() => {
+        loading.value = true;
+        const resp = await deleteNotification(props.noty._id);
+        console.log(resp);
+        if(resp.msg === 'Done') {
+            notyStore.removeNoty(props.noty._id);
+        }
+        loading.value = false;
+    }
+
+    const openNoty = () => {
+        notyStore.toggleNotifications();
+        if(props.noty.tag === 'new_proposal') {
+            router.push({name: 'published-loads', params: {id: props.noty.proposalId}});
+        } else {
+            router.push({name: 'published-trucks', params: {id: props.noty.proposalId}});
+        }
+    }
+
+</script>
+
+<template>
+    <div 
+        class="noty-card"
+        @click="openNoty"
+    >
+        <div 
+            class="noty-icon" 
+            :style="{
+                background: (noty.tag === 'accepted_proposal') ? '#4CAF50' : (noty.tag === 'new_proposal') ? '#FFC107' : 'red' 
+            }"
+        >
+            <i v-if="noty.tag === 'reject_proposal'" class="fa-solid fa-ban"></i>
+            <i v-if="noty.tag === 'accepted_proposal'" class="fa-solid fa-clipboard-check"></i>
+            <i v-if="noty.tag === 'new_proposal'" class="fa-solid fa-envelope-open-text"></i>
+        </div>
+        <div class="noty-body">
+            <h3>{{ title }}</h3>
+            <p>{{ description }} <span class="font-bold">{{props.noty.description.toUpperCase()}}</span></p>
+            <p class="date">{{ getDateTime(noty.createdAt, 0) }}</p>
+        </div>
+        <div class="d-flex">
+            <p 
+                class="noty-action"
+                @click="deleteNoty"
+                v-if="!loading"
+            >{{ t('buttons.delete') }}</p>
+           <Spiner v-else/>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    .noty-card {
+        border-radius: 5px;
+        padding: 10px;
+        display: flex;
+        flex-direction: row;
+        margin-bottom: 8px;
+        align-items: center;
+        cursor: pointer;
+    }
+
+    .noty-icon {
+        width: 50px;
+        height: 50px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: 100%;
+        color: white;
+        font-size: 1.8rem;
+    }
+    .noty-body {
+        display: flex;
+        flex-direction: column;
+        margin-left: 1rem;
+        flex: 1;
+        /* width: 220px; */
+    }
+    .noty-body h3 {
+        font-size: 1.1rem;
+        font-weight: 500;
+    }
+    .noty-body p {
+        font-size: 1rem;
+        font-weight: normal;
+        margin: 0;
+    }
+    .noty-body .date {
+        margin: 5px 0px;
+        font-size: 0.8rem;
+        font-weight: 300;
+        color: #7d7d7d;
+    }
+    .noty-action {
+        margin-left: 1rem;
+        font-size: 0.8rem;
+        font-weight: 300;
+        color: #f4505e;
+        cursor: pointer;
+    }
+</style>

src/components/NotificationsPopup.vue

@@ -0,0 +1,126 @@
+<script setup>
+    import { useNotificationsStore } from '../stores/notifications';
+    import { useI18n } from 'vue-i18n';
+    import NotificationCard from './NotificationCard.vue';
+
+    const noty = useNotificationsStore();
+    const { t } = useI18n();
+
+    const closePopup = () => {
+        noty.toggleNotifications()
+        noty.newNoty = false;
+    }
+
+</script>
+
+<template>
+    <div
+        v-if="noty.openNotifications"
+    >
+        <div 
+            class="background"
+            @click="closePopup()"
+        >
+        </div>
+        <div 
+            class="noty-content"
+        >
+            <i class="fa-solid fa-xmark close-icon" @click="closePopup()"></i>
+            <h3 class="ps-1">{{ t('noty.title') }}</h3>
+            <div class="body">
+                <NotificationCard
+                    v-if="noty.notifications.length > 0"
+                    v-for="notification in noty.notifications"
+                    :key="notification._id"
+                    :noty="notification"
+                />
+                <div v-else>
+                    <p class="text-center">{{ t('noty.empty') }}</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+
+    .background {
+        position: fixed;
+        z-index: 1000;
+        width: 100wv;
+        right: 0px;
+        top: 0px;
+        left: 0px;
+        cursor: pointer;
+        bottom: 0px;
+        background-color: #000;
+        opacity: 0.2;
+    }
+
+    .noty-content {
+        position: fixed;
+        right: 10px;
+        top: 70px;
+        z-index: 2000;
+        width: 420px;
+        background-color: #FFF;
+        opacity: 1;
+        border-radius: 13px;
+        padding: 20px 16px;
+        display: flex;
+        flex-direction: column;
+        /* flex-wrap: nowrap; */
+        /* overflow: hidden; */
+        filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.10));
+    }
+
+    .body {
+        overflow-y: auto;
+        max-height: 500px;
+        /* padding: 20px 20px; */
+    }
+
+    .section-prefs {
+        margin-top: 20px !important;
+        font-size: 1rem !important;
+        color: grey;
+    }
+
+    .label-item {
+        font-weight: 900 !important;
+        font-size: 1.2rem !important;
+        margin-bottom: 1rem;
+    }
+
+    .noty-content h3 {
+        margin-top: 20px;
+        margin-bottom: 20px;
+        font-size: 1.2rem;
+        font-weight: 700;
+    }
+
+    .noty-content p {
+        margin-top: 8px;
+        font-size: 1rem;
+        font-weight: 500;
+        text-overflow: ellipsis;
+    }
+
+    .close-icon {
+        display: flex;
+        position: absolute;
+        right: 20px;
+        top: 16px;
+        cursor: pointer;
+        font-size: 24px;
+    }
+
+    @media (max-width: 568px) {
+        .noty-content {
+            right: 5px;
+            top: 50px;
+            width: 95%;
+            padding: 16px 8px;
+        }
+    }
+</style>

src/components/ProfilePopup.vue

@@ -4,14 +4,15 @@
     import { useNotificationsStore } from '../stores/notifications';
     import { useI18n } from 'vue-i18n';
     import { ref } from 'vue';
-import { onMounted } from 'vue';
+    import { onMounted } from 'vue';
-import CustomRadioInput from './ui/CustomRadioInput.vue';
+    import CustomRadioInput from './ui/CustomRadioInput.vue';
-import { watch } from 'vue';
+    import { watch } from 'vue';
 
+    const lang = ref(null);
+    
     const noty = useNotificationsStore();
     const auth = useAuthStore();
     const router = useRouter();
-    const lang = ref(null);
     const { t, locale } = useI18n();
 
     onMounted(() => {

src/components/ui/EditCompanyModal.vue

@@ -4,6 +4,8 @@
     import NotificationBadge from './NotificationBadge.vue';
     import Segments from './Segments.vue';
     import TruckTypes from './TruckTypes.vue';
+    import Cities from './Cities.vue';
+    import States from './States.vue';
     import Custominput from './CustomInput.vue';
     import { useCompanyStore } from '../../stores/company';
     import { useNotificationsStore } from '../../stores/notifications';
@@ -60,8 +62,8 @@
                 company_type: companyStore.company.company_type,
                 meta_data: companyStore.company.meta_data,
                 categories: company.segments.map((e) => e),
-                // company_city: company.cities.map((e) => e.city_name),
+                company_city: company.cities.map((e) => e.city_name),
-                // company_state: company.states.map((e) => e.state_name),
+                company_state: company.states.map((e) => e.state_name),
                 truck_type: company.truckTypes.map((e) => e.meta_value),
                 company_description: company.description
             };
@@ -88,10 +90,10 @@
     const validations = () => {
         if(company.segments.length === 0) {
             return t('errors.segments');
-        // }else if(company.states.length === 0) {
+        }else if(company.states.length === 0) {
-        //     return t('errors.states');
+            return t('errors.states');
-        // } else if( company.cities.length === 0) {
+        } else if( company.cities.length === 0) {
-        //     msgError.value = t('errors.cities');
+            msgError.value = t('errors.cities');
         } else if(company.truckTypes.length === 0){
             msgError.value = t('errors.trucks');
         } else {
@@ -123,20 +125,20 @@
                             :multiple="true"
                         />
                     </div>
-                    <!-- <div class="mb-4">
+                    <div class="mb-4">
-                        <label class="custom-label">Ubicaciones de carga por estado</label>
+                        <label class="custom-label">{{ t('labels.locationLoadState') }}</label>
                         <States
                             v-model="company.states"
                             :multiple="true"
                         />
                     </div>
                     <div class="mb-4">
-                        <label class="custom-label">Ubicaciones de carga por municipio</label>
+                        <label class="custom-label">{{ t('labels.locationLoadCity') }}</label>
-                        <Cities 
+                        <Cities
                             v-model="company.cities"
                             :multiple="true"
                         />
-                    </div> -->
+                    </div>
                     <div class="mb-4">
                         <label class="custom-label">{{  t('labels.truckUsed') }}</label>
                         <TruckTypes 

src/data/loadsType.json

@@ -2,27 +2,27 @@
     {
         "name": "Published",
         "status": "Publicado",
-        "color": "#ffd22b"
+        "color": "#A9B0B2"
     },
     {
         "name": "Loading",
         "status": "Cargando",
-        "color": "green"
+        "color": "#F44336"
     },
     {
         "name": "Transit",
         "status": "En Transito",
-        "color": "red"
+        "color": "#ffd22b"
     },
     {
         "name": "Downloading",
         "status": "Descargando",
-        "color": "#0F5E21"
+        "color": "#428502"
     },
     {
         "name": "Delivered",
         "status": "Entregado",
-        "color": "blue"
+        "color": "#1B70AF"
     },
     {
         "name": "Draf",

src/helpers/format_currency.js

@@ -0,0 +1,4 @@
+export const formatCurrency = amount => Number(amount).toLocaleString('es-MX', {
+    style: 'currency',
+    currency: 'MXN'
+})

src/i18n/en.js

@@ -451,7 +451,25 @@ const en = {
         helpText: 'Load status indicators',
         general: 'General calendar',
         my: 'My calendar'
-    }
+    },
+    noty: {
+        title: 'Notifications',
+        empty: 'No notifications',
+        read: 'Read',
+        unread: 'Not read',
+        markAll: 'Mark all as read',
+        markRead: 'Mark as read',
+        markUnread: 'Mark as unread',
+        msgMarkAll: 'All notifications have been marked as read',
+        msgMarkRead: 'Notification marked as read',
+        msgMarkUnread: 'Notification marked as unread',
+        newProposalTitle: 'New offer received',
+        acceptedProposalTitle: 'Offer accepted',
+        rejectedProposalTitle: 'Offer rejected',
+        newProposalDesc: 'Congratulations, you have received a new offer in your load',
+        acceptedProposalDesc: 'Your offer has been accepted in the upload',
+        rejectedProposalDesc: 'Your offer has been rejected on upload',
+    },
 };
 
 export default en;

src/i18n/es.js

@@ -10,8 +10,8 @@ const es = {
         questionCompany: '¿Cuál es el nombre de la empresa?',
         questionRfc: '¿Cuál es el RFC de la empresa?',
         questionSegments: '¿A que segmentos pertenece la empresa?',
-        questionSates: '¿Cuáles son las locaciones de carga de la empresa por estado?',
+        questionSates: '¿Cuáles son las ubicaciones de carga de la empresa por estado?',
-        questionCities: '¿Cuáles son las locaciones de carga de la empresa por municipio?',
+        questionCities: '¿Cuáles son las ubicaciones de carga de la empresa por municipio?',
         questionTrucks: '¿Qué tipo de transportes utiliza la empresa?',
         questionSignOut: '¿Estás seguro de cerrar sesión?',
         infoCompanies: 'Información adicional de la empresa',
@@ -29,8 +29,8 @@ const es = {
         codeId: 'Código',
         dateMembership: 'Empresa miembro desde',
         segmentsCompany: 'Segmentos de la empresa',
-        locationLoadState: 'Locaciones de carga por estado',
+        locationLoadState: 'Ubicaciones de carga por estado',
-        locationLoadCity: 'Locaciones de carga por municipio',
+        locationLoadCity: 'Ubicaciones de carga por municipio',
         truckUsed: 'Transportes utilizados',
         infoCompany: 'Información general de la empresa',
         registryNumber: "Número de registro",
@@ -44,7 +44,7 @@ const es = {
         staff: 'Personal',
         driver: 'Conductor',
         filters: 'Filtros',
-        location: 'Locación',
+        location: 'Ubicación',
         both: 'Ambas',
         load: 'Carga',
         download: 'Descarga',
@@ -232,33 +232,33 @@ const es = {
         msgNotDel: 'El usuario no se pudo eliminar, intente más tarde.'
     },
     directory: {
-        querySearch: 'Buscar por nombre de locación',
+        querySearch: 'Buscar por nombre de ubicación',
         directory: 'Directorio',
         notLocations: 'No hay ubicaciones agregadas',
-        editLocation: 'Editar locación',
+        editLocation: 'Editar ubicación',
-        createLocation: 'Crear Locación',
+        createLocation: 'Crear ubicación',
-        name: 'Nombre de la locación',
+        name: 'Nombre de la ubicación',
         address: 'Dirección',
-        state: 'Estado de la locación',
+        state: 'Estado de la ubicación',
-        city: 'Municipio de la locación',
+        city: 'Municipio de la ubicación',
         typeDirectory: 'Tipo de directorio',
         zipCode: 'Código postal',
         typeTruck: 'Tipo de transporte',
         typeTruckNeed: 'Tipos de camiones que se necesitan',
-        additionalInfoLocation: 'Información adicional de la locación',
+        additionalInfoLocation: 'Información adicional de la ubicación',
         labelPrice: 'Precio en MXN',
         labelWeight: 'Peso de la carga en Kg',
         notes: 'Notas',
 
-        titleDel: 'Eliminar Locación!',
+        titleDel: 'Eliminar ubicación!',
-        textDel: '¿Estás seguro de eliminar este locación?',
+        textDel: '¿Estás seguro de eliminar este ubicación?',
-        loadingDel: 'Eliminando locación',
+        loadingDel: 'Eliminando ubicación',
-        msgTitleDel: 'Locación eliminado!',
+        msgTitleDel: 'Ubicación eliminado!',
-        msgDel: 'Tu locación ha sido eliminado exitosamente.',
+        msgDel: 'Tu ubicación ha sido eliminado exitosamente.',
-        msgNotDel: 'Tu locación no se pudo eliminar, intente más tarde.',
+        msgNotDel: 'Tu ubicación no se pudo eliminar, intente más tarde.',
         msgEmpty: 'No hay ubicaciones agregadas',
-        msgLocationUpdate: 'Locación actualizada con éxito!',
+        msgLocationUpdate: 'Ubicación actualizada con éxito!',
-        msgLocationCreated: 'Locación creada con éxito!'
+        msgLocationCreated: 'Ubicación creada con éxito!'
     },
     loads: {
         title: 'Mis cargas publicadas',
@@ -287,10 +287,10 @@ const es = {
         addressOrigin: 'Dirección de origen',
         addressDestination: 'Dirección de destino',
         checkAddress: 'Usar locaciones registradas',
-        addressNameLoad: 'Nombre locación de carga',
+        addressNameLoad: 'Nombre ubicación de carga',
-        addressNameDownload: 'Nombre locación de descarga',
+        addressNameDownload: 'Nombre ubicación de descarga',
         locationsRegistered: 'Locaciones registradas',
-        selectedLocation: 'Seleccionar locación',
+        selectedLocation: 'Seleccionar ubicación',
         labelPrice: 'Precio en MXN',
         labelWeight: 'Peso de la carga en kg',
         notes: 'Notas',
@@ -447,7 +447,7 @@ const es = {
         truckCost2: "Precio del diesel por litro",
         otherSpends: "Otros gastos",
         truckCost4: "Total costo del diesel",
-        salaryAdmin: "Gastas administrativos",
+        salaryAdmin: "Gastos administrativos",
         stands: "Casetas",
         spendsAdminTotal: "Gastos administrativos totales",
         msgUpdate: "<strong>Presupuesto actualizado con éxito!</strong>",
@@ -460,6 +460,24 @@ const es = {
         general: 'Calendario general',
         my: 'Mi calendario'
     },
+    noty: {
+        title: 'Notificaciones',
+        empty: 'No hay notificaciones',
+        read: 'Leido',
+        unread: 'No leido',
+        markAll: 'Marcar todas como leidas',
+        markRead: 'Marcar como leida',
+        markUnread: 'Marcar como no leida',
+        msgMarkAll: 'Todas las notificaciones han sido marcadas como leidas',
+        msgMarkRead: 'Notificación marcada como leida',
+        msgMarkUnread: 'Notificación marcada como no leida',
+        newProposalTitle: 'Nueva oferta recibida',
+        acceptedProposalTitle: 'Oferta aceptada',
+        rejectedProposalTitle: 'Oferta rechazada',
+        newProposalDesc: 'Feliciades has recibido una nueva oferta en tu carga',
+        acceptedProposalDesc: 'Tu oferta ha sido aceptada en la carga',
+        rejectedProposalDesc: 'Tu oferta ha sido rechazada en la carga',
+    },
 };
 
 export default es;

src/layouts/AdminLayout.vue

@@ -3,7 +3,7 @@
     import NavBar from '../components/NavBar.vue';
     import Sidebar from '../components/Sidebar.vue';
     import ProfilePopup from '../components/ProfilePopup.vue';
-    import EditProfileModal from '../components/EditProfileModal.vue';
+    import NotificationsPopup from '../components/NotificationsPopup.vue';
 
 </script>
 
@@ -19,6 +19,7 @@
     </div>
     <LoadingModal/>
     <ProfilePopup/>
+    <NotificationsPopup/>
 </template>
 
 <style lang="scss" scoped>

src/router/index.js

@@ -94,7 +94,7 @@ const router = createRouter({
           component: () => import('../views/LocationsView.vue'),
         },
         {
-          path: 'camiones',
+          path: 'ofertas',
           name: 'published-trucks',
           component: () => import('../views/TrucksPublishedView.vue'),
         },

src/services/company.js

@@ -194,13 +194,33 @@ export const getCalendar = async(startDate, endDate, global) => {
 }
 
 
-// export const editCompany = async(companyId, formData) => {
+export const getNotificationsCompany = async() => {
-//     try {
+    try {
-//         const endpoint = `/companies/${companyId}`;
+        const endpoint = `/v1/notifications`;
-//         const {data} = await api.patch(endpoint, formData);
+        const {data} = await api.get(endpoint);
-//         return data;
+        console.log(data)
-//     } catch (error) {
+        return {
-//         console.log(error);
+            msg: "success",
-//         return null;
+            data: data
-//     }
+        };
-// }
+    } catch (error) {
+        console.log(error);
+        return {
+            msg: "Algo salió mal, intente nás tarde",
+            data: null
+        };
+    }
+}
+
+export const deleteNotification = async(id) => {
+    try {
+        const endpoint = `/v1/notifications/${id}`;
+        const {data} = await api.delete(endpoint);
+        return data;
+    } catch (error) {
+        console.log(error);
+        return {
+            msg: "Algo salió mal, intente nás tarde",
+        };
+    }
+}

src/stores/auth.js

@@ -16,6 +16,7 @@ export const useAuthStore = defineStore('auth', () => {
     const company = useCompanyStore();
     const loadStore = useLoadsStore();
     const vehiclesStore = useVehiclesStore();
+    const notyStore = useNotificationsStore();
     const sesion = ref('')
     const checking = ref(false);
     const authStatus = ref('checking');
@@ -89,6 +90,11 @@ export const useAuthStore = defineStore('auth', () => {
         user.value = null;
         checking.value = false;
         authStatus.value = 'checking'
+        notyStore.notifications = [];
+        notyStore.newNoty = false;
+        notyStore.show = false;
+        notyStore.openNotifications = false;
+        notyStore.toggleProfile = false;
 
         company.clear();
         loadStore.clear();

src/stores/notifications.js

@@ -8,6 +8,9 @@ export const useNotificationsStore = defineStore('notifications', () => {
     const error = ref(false)
     const show = ref(false);
     const openProfile = ref(false);
+    const openNotifications = ref(false);
+    const notifications = ref([]);
+    const newNoty = ref(false);
 
     watch(show, () => {
         if(show) {
@@ -23,12 +26,25 @@ export const useNotificationsStore = defineStore('notifications', () => {
         openProfile.value = !openProfile.value;
     }
 
+    const toggleNotifications = () => {
+        openNotifications.value = !openNotifications.value;
+    }
+
+    const removeNoty = (id) => {
+        return notifications.value = notifications.value.filter(noty => noty._id !== id);
+    }
+
 
     return {
         text,
         error,
         show,
+        notifications,
+        newNoty,
         openProfile,
+        removeNoty,
         toggleProfile,
+        openNotifications,
+        toggleNotifications
     }
 });

src/views/LocationsView.vue

@@ -38,17 +38,18 @@
         await companyStore.getLocationsCompany(filterQuery.value, false)
         optionsFilter.value = [
             {value: 'both',label: t('labels.both')},
-            {value: 'load',label: t('labels.load')},
+            {value: 'loading',label: t('labels.load')},
-            {value: 'download',label: t('labels.download')}
+            {value: 'unloading',label: t('labels.download')}
         ]
+        console.log(companyStore.locations)
         loading.value = false;
     }
 
     watch(locale, () => {
         optionsFilter.value = [
             {value: 'both',label: t('labels.both')},
-            {value: 'load',label: t('labels.load')},
+            {value: 'loading',label: t('labels.load')},
-            {value: 'download',label: t('labels.download')}
+            {value: 'unloading',label: t('labels.download')}
         ]
     })
 

src/views/SearchLoadsView.vue

@@ -159,9 +159,13 @@
     }
 
     const handleResetCurrentLoad = () => {
-        console.log('se resear');
         currentLoad.value = null
     }
+
+    const removeLoadOfList = (load) => {
+        console.log('se ejecuta removeLoadOfList');
+        loads.value = loads.value.filter((e) => e._id !== load._id);
+    }
 </script>
 
 <template>
@@ -170,6 +174,7 @@
         v-if="currentLoad" 
         :load="currentLoad"
         @reset-load="handleResetCurrentLoad"
+        @remove-load="removeLoadOfList"
     />
 
     <div class="card-filters">