From c5f0831a81250c19c1f9492b2edff9373d1daf4f Mon Sep 17 00:00:00 2001
From: Alexandro Uc Santos <alexandro.us@icloud.com>
Date: Sat, 7 Sep 2024 18:44:57 -0600
Subject: [PATCH] feature  notifications

---
 src/components/CardBudget.vue          |  20 ++--
 src/components/CardUser.vue            |  14 +--
 src/components/CreateBudgetModal.vue   |  24 ++---
 src/components/CreateLocationModal.vue |   8 +-
 src/components/CreateUserModal.vue     | Bin 11579 -> 11663 bytes
 src/components/FormLoadModal.vue       |   2 +-
 src/components/MakeProposalModal.vue   |  11 +-
 src/components/NavBar.vue              |  53 +++++++++-
 src/components/NotificationCard.vue    | 136 +++++++++++++++++++++++++
 src/components/NotificationsPopup.vue  | 126 +++++++++++++++++++++++
 src/components/ProfilePopup.vue        |   9 +-
 src/components/ui/EditCompanyModal.vue |  24 +++--
 src/data/loadsType.json                |  10 +-
 src/helpers/format_currency.js         |   4 +
 src/i18n/en.js                         |  20 +++-
 src/i18n/es.js                         |  66 +++++++-----
 src/layouts/AdminLayout.vue            |   3 +-
 src/router/index.js                    |   2 +-
 src/services/company.js                |  40 ++++++--
 src/stores/auth.js                     |   6 ++
 src/stores/notifications.js            |  16 +++
 src/views/LocationsView.vue            |   9 +-
 src/views/SearchLoadsView.vue          |   7 +-
 23 files changed, 514 insertions(+), 96 deletions(-)
 create mode 100644 src/components/NotificationCard.vue
 create mode 100644 src/components/NotificationsPopup.vue
 create mode 100644 src/helpers/format_currency.js

diff --git a/src/components/CardBudget.vue b/src/components/CardBudget.vue
index 5e70d02..28d8755 100644
--- 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: {
@@ -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.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>
diff --git a/src/components/CardUser.vue b/src/components/CardUser.vue
index 8861273..63239a3 100644
--- 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,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="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>
                 <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.memberSince') }}: </span>{{getDateMonthDay(user.createdAt)}}</p>
-                <p v-if="readonly" ><span>Tipo de afiliación: </span> {{user.company.membership}}</p>
+                <p><span>{{ t('labels.userInfo') }}: </span> {{user.user_description}}</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')">
diff --git a/src/components/CreateBudgetModal.vue b/src/components/CreateBudgetModal.vue
index 24d3229..c0d11d4 100644
--- 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">
diff --git a/src/components/CreateLocationModal.vue b/src/components/CreateLocationModal.vue
index be82cee..fe128c9 100644
--- 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>
diff --git a/src/components/CreateUserModal.vue b/src/components/CreateUserModal.vue
index 809b6cf5ece255fa54a331fdf372ff65e9bfb5b1..bed28dca6f9ec23d129d083d3fac508798e7891a 100644
GIT binary patch
literal 11663
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

literal 11579
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
a-r9l#`|QG9M2jn|sCVG6gSbONzx*EzEw(2B

diff --git a/src/components/FormLoadModal.vue b/src/components/FormLoadModal.vue
index a331b0d..40c1d0c 100644
--- 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();
diff --git a/src/components/MakeProposalModal.vue b/src/components/MakeProposalModal.vue
index 7bc20ca..ffe94a5 100644
--- 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,
diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 666f346..5a5a003 100644
--- 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>
\ No newline at end of file
diff --git a/src/components/NotificationCard.vue b/src/components/NotificationCard.vue
new file mode 100644
index 0000000..f1f0ea4
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/components/NotificationsPopup.vue b/src/components/NotificationsPopup.vue
new file mode 100644
index 0000000..7c1885e
--- /dev/null
+++ 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>
\ No newline at end of file
diff --git a/src/components/ProfilePopup.vue b/src/components/ProfilePopup.vue
index e0c37c6..96b2953 100644
--- a/src/components/ProfilePopup.vue
+++ b/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 CustomRadioInput from './ui/CustomRadioInput.vue';
-import { watch } from 'vue';
+    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(() => {
diff --git a/src/components/ui/EditCompanyModal.vue b/src/components/ui/EditCompanyModal.vue
index 46468a8..31da78b 100644
--- 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>
-                        <Cities 
+                        <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 
diff --git a/src/data/loadsType.json b/src/data/loadsType.json
index 7b381cd..33a2078 100644
--- 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",
diff --git a/src/helpers/format_currency.js b/src/helpers/format_currency.js
new file mode 100644
index 0000000..216d9a1
--- /dev/null
+++ b/src/helpers/format_currency.js
@@ -0,0 +1,4 @@
+export const formatCurrency = amount => Number(amount).toLocaleString('es-MX', {
+    style: 'currency',
+    currency: 'MXN'
+})
\ No newline at end of file
diff --git a/src/i18n/en.js b/src/i18n/en.js
index 6eb5633..481e8b8 100644
--- 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;
\ No newline at end of file
diff --git a/src/i18n/es.js b/src/i18n/es.js
index 2a0d2bc..63cb5cf 100644
--- 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;
\ No newline at end of file
diff --git a/src/layouts/AdminLayout.vue b/src/layouts/AdminLayout.vue
index c8da110..572ea48 100644
--- 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>
diff --git a/src/router/index.js b/src/router/index.js
index 43414aa..f7b14ef 100644
--- 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'),
         },
diff --git a/src/services/company.js b/src/services/company.js
index 9795bdf..9fb1414 100644
--- 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;
-//     }
-// }
\ No newline at end of file
+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",
+        };
+    }
+}
diff --git a/src/stores/auth.js b/src/stores/auth.js
index 06f0e93..56e1093 100644
--- 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();
diff --git a/src/stores/notifications.js b/src/stores/notifications.js
index 6271c23..a190601 100644
--- 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
     }
 });
\ No newline at end of file
diff --git a/src/views/LocationsView.vue b/src/views/LocationsView.vue
index 281512b..1faf583 100644
--- 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')}
         ]
     })
 
diff --git a/src/views/SearchLoadsView.vue b/src/views/SearchLoadsView.vue
index 3ebe976..5fc2f8b 100644
--- 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">