feature notifications

2024-09-07 18:44:57 -06:00
parent 84c0595f5b
commit c5f0831a81
23 changed files with 514 additions and 96 deletions
--- a/src/components/CardBudget.vue
+++ b/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: {
@@ -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.totalBeforeIva') }}:</span> ${{budget.total_before_tax}}</p>
-                    <p><span>{{ t('calculator.totalUtityByKm') }}:</span> {{"$" + parseFloat( budget.total_utility_per_km).toFixed(2)}}</p>
-                    <p><span>{{ t('calculator.totalUtity') }}:</span> {{"$" + parseFloat( budget.total_profit).toFixed(2)}}</p>
+                    <p><span>{{ t('calculator.totalcostDiesel') }}:</span> {{ formatCurrency( budget.total_cost_fuel) }}</p> 
+                    <p><span>{{ t('calculator.totalBeforeIva') }}:</span> {{ formatCurrency(budget.total_before_tax) }}</p>
+                    <p><span>{{ t('calculator.totalUtityByKm') }}:</span> {{ formatCurrency( budget.total_utility_per_km) }}</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>
--- a/src/components/CardUser.vue
+++ b/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,9 +84,9 @@
                <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="readonly" ><span>Tipo de afiliación: </span> {{user.company.membership}}</p>
-                <p><span>{{ t('labels.userRole') }}: </span>{{user.job_role}}</p>
+                <p v-if="user.createAt"><span>{{ t('labels.memberSince') }}: </span>{{getDateOnly(user.createAt)}}</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> -->
            </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>
@@ -94,8 +94,8 @@
                <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.memberSince') }}: </span>{{getDateMonthDay(user.createdAt)}}</p>
-                <p v-if="readonly" ><span>Tipo de afiliación: </span> {{user.company.membership}}</p>
+                <p v-if="user.createAt"><span>{{ t('labels.memberSince') }}: </span>{{getDateOnly(user.createAt)}}</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')">
--- a/src/components/CreateBudgetModal.vue
+++ b/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);
-			return "$" + (isNaN(budgetForm.total_utility_per_km) ? '0.0' : parseFloat(budgetForm.total_utility_per_km).toFixed(2));
+			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);
 		});

 		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">
--- a/src/components/CreateLocationModal.vue
+++ b/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="download">{{ t('labels.download')}}</option>
+                                <option value="loading">{{ t('labels.load')}}</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>
--- a/src/components/CreateUserModal.vue
+++ b/src/components/CreateUserModal.vue
--- a/src/components/FormLoadModal.vue
+++ b/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();
--- a/src/components/MakeProposalModal.vue
+++ b/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,
--- a/src/components/NavBar.vue
+++ b/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>
--- a/src/components/NotificationCard.vue
+++ b/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>
--- a/src/components/NotificationsPopup.vue
+++ b/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>
--- a/src/components/ProfilePopup.vue
+++ b/src/components/ProfilePopup.vue
@@ -8,10 +8,11 @@ import { onMounted } from 'vue';
    import CustomRadioInput from './ui/CustomRadioInput.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(() => {
--- a/src/components/ui/EditCompanyModal.vue
+++ b/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_state: company.states.map((e) => e.state_name),
+                company_city: company.cities.map((e) => e.city_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) {
-        //     return t('errors.states');
-        // } else if( company.cities.length === 0) {
-        //     msgError.value = t('errors.cities');
+        }else if(company.states.length === 0) {
+            return t('errors.states');
+        } else if( company.cities.length === 0) {
+            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">
-                        <label class="custom-label">Ubicaciones de carga por estado</label>
+                    <div class="mb-4">
+                        <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
                            v-model="company.cities"
                            :multiple="true"
                        />
-                    </div> -->
+                    </div>
                    <div class="mb-4">
                        <label class="custom-label">{{  t('labels.truckUsed') }}</label>
                        <TruckTypes 
--- a/src/data/loadsType.json
+++ b/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",
--- a/src/helpers/format_currency.js
+++ b/src/helpers/format_currency.js
@@ -0,0 +1,4 @@
+export const formatCurrency = amount => Number(amount).toLocaleString('es-MX', {
+    style: 'currency',
+    currency: 'MXN'
+})
--- a/src/i18n/en.js
+++ b/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;
--- a/src/i18n/es.js
+++ b/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?',
-        questionCities: '¿Cuáles son las locaciones de carga de la empresa por municipio?',
+        questionSates: '¿Cuáles son las ubicaciones de carga de la empresa por estado?',
+        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',
-        locationLoadCity: 'Locaciones de carga por municipio',
+        locationLoadState: 'Ubicaciones de carga por estado',
+        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',
-        createLocation: 'Crear Locación',
-        name: 'Nombre de la locación',
+        editLocation: 'Editar ubicación',
+        createLocation: 'Crear ubicación',
+        name: 'Nombre de la ubicación',
        address: 'Dirección',
-        state: 'Estado de la locación',
-        city: 'Municipio de la locación',
+        state: 'Estado de la ubicació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!',
-        textDel: '¿Estás seguro de eliminar este locación?',
-        loadingDel: 'Eliminando locación',
-        msgTitleDel: 'Locación eliminado!',
-        msgDel: 'Tu locación ha sido eliminado exitosamente.',
-        msgNotDel: 'Tu locación no se pudo eliminar, intente más tarde.',
+        titleDel: 'Eliminar ubicación!',
+        textDel: '¿Estás seguro de eliminar este ubicación?',
+        loadingDel: 'Eliminando ubicación',
+        msgTitleDel: 'Ubicación eliminado!',
+        msgDel: 'Tu ubicación ha sido eliminado exitosamente.',
+        msgNotDel: 'Tu ubicación no se pudo eliminar, intente más tarde.',
        msgEmpty: 'No hay ubicaciones agregadas',
-        msgLocationUpdate: 'Locación actualizada con éxito!',
-        msgLocationCreated: 'Locación creada con éxito!'
+        msgLocationUpdate: 'Ubicación actualizada 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',
-        addressNameDownload: 'Nombre locación de descarga',
+        addressNameLoad: 'Nombre ubicación de carga',
+        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;
--- a/src/layouts/AdminLayout.vue
+++ b/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>
--- a/src/router/index.js
+++ b/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'),
        },
--- a/src/services/company.js
+++ b/src/services/company.js
@@ -194,13 +194,33 @@ export const getCalendar = async(startDate, endDate, global) => {
 }


-// export const editCompany = async(companyId, formData) => {
-//     try {
-//         const endpoint = `/companies/${companyId}`;
-//         const {data} = await api.patch(endpoint, formData);
-//         return data;
-//     } catch (error) {
-//         console.log(error);
-//         return null;
-//     }
-// }
+export const getNotificationsCompany = async() => {
+    try {
+        const endpoint = `/v1/notifications`;
+        const {data} = await api.get(endpoint);
+        console.log(data)
+        return {
+            msg: "success",
+            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",
+        };
+    }
+}
--- a/src/stores/auth.js
+++ b/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();
--- a/src/stores/notifications.js
+++ b/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
    }
 });
--- a/src/views/LocationsView.vue
+++ b/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: 'download',label: t('labels.download')}
+            {value: 'loading',label: t('labels.load')},
+            {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: 'download',label: t('labels.download')}
+            {value: 'loading',label: t('labels.load')},
+            {value: 'unloading',label: t('labels.download')}
        ]
    })

--- a/src/views/SearchLoadsView.vue
+++ b/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">