From 937c3a8fe55b3f77b04f974a6017affe76151915 Mon Sep 17 00:00:00 2001
From: Alexandro Uc Santos <alexandro.us@icloud.com>
Date: Tue, 9 Jan 2024 18:49:51 -0600
Subject: [PATCH] add: crud locations

---
 src/assets/main.css                    |   6 +
 src/components/CardBudget.vue          |   4 +-
 src/components/CardLocation.vue        | 116 ++++++++++++
 src/components/CreateLocationModal.vue | 249 +++++++++++++++++++++++++
 src/components/FormLoadModal.vue       |  62 ++++++
 src/services/company.js                |  44 +++++
 src/stores/company.js                  |  66 ++++++-
 src/views/LocationsView.vue            | 133 +++++++++++++
 8 files changed, 678 insertions(+), 2 deletions(-)
 create mode 100644 src/components/CardLocation.vue
 create mode 100644 src/components/CreateLocationModal.vue

diff --git a/src/assets/main.css b/src/assets/main.css
index 2ed5f38..1d9bec4 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -67,6 +67,12 @@ body {
     transition: background-color 300ms ease;
 }
 
+.error-msg {
+    color: red;
+    font-size: 12px;
+    font-weight: 300;
+}
+
 .btn-primary-sm {
     background-color: #FBBA33;
     padding: 8px 16px;
diff --git a/src/components/CardBudget.vue b/src/components/CardBudget.vue
index ca680e6..ae796ba 100644
--- a/src/components/CardBudget.vue
+++ b/src/components/CardBudget.vue
@@ -1,5 +1,6 @@
 <script setup>
-    import { useCompanyStore } from '../stores/company';
+    import Swal from 'sweetalert2';
+import { useCompanyStore } from '../stores/company';
 
     defineProps({
         budget: {
@@ -32,6 +33,7 @@
                     },
                 });
                 const resp = await companyStore.deleteBudgetCompany(props.budget._id);
+                Swal.close();
                 if(resp != null) {
                     Swal.fire({
                         title: "Presupuesto eliminado!",
diff --git a/src/components/CardLocation.vue b/src/components/CardLocation.vue
new file mode 100644
index 0000000..f139d57
--- /dev/null
+++ b/src/components/CardLocation.vue
@@ -0,0 +1,116 @@
+<script setup>
+    import Swal from 'sweetalert2';
+    import { useCompanyStore } from '../stores/company';
+
+    const props = defineProps({
+        location: {
+            type: Object,
+            required: true
+        }
+    })
+
+    defineEmits(['set-location'])
+    
+    const companyStore = useCompanyStore();
+
+    const handleDeleteLocation = async() => {
+        Swal.fire({
+            title: 'Eliminar Locación!',
+            text: '¿Estás seguro de eliminar este locación?',
+            icon: 'warning',
+            showCancelButton: true,
+            cancelButtonColor: "#d33",
+            confirmButtonText: 'Eliminar',
+            cancelButtonText: 'Cancelar',
+        }).then(async(result) => {
+            if(result.isConfirmed) {
+                Swal.fire({
+                    title: 'Por favor espere!',
+                    html: 'Eliminando locación...',// add html attribute if you want or remove
+                    allowOutsideClick: false,
+                    didOpen: () => {
+                        Swal.showLoading()
+                    },
+                });
+
+                const resp = await companyStore.deleteLocationCompany(props.location._id)
+
+                Swal.close();
+                
+                if(resp != null) {
+                    Swal.fire({
+                        title: "Locación eliminado!",
+                        text: "Tu locación ha sido eliminado exitosamente.",
+                        icon: "success"
+                    });
+                } else {
+                    Swal.fire({
+                        title: "No eliminado!",
+                        text: "Tu locación no se pudo eliminar, intente más tarde.",
+                        icon: "error"
+                    });
+                }
+            }
+
+        });
+
+    }
+</script>
+
+<template>
+    <div class="card-fixed card-location">
+        <div>
+            <p><span>Nombre de la locación de carga:</span> {{location.branch_name}}</p>
+            <p><span>Dirección:</span> <template v-if="location.address">{{location.address}}, </template><template v-if="location.city">{{location.city}}, </template><template v-if="location.state">{{location.state}}</template></p>
+            <p><span>Teléfono:</span> {{location.phone}}</p>
+            <p><span>Tipos de camiones que se necesitan:</span> {{location.truck_type?.map((e) => e).join(', ')}}</p>
+            <p><span>Segmento:</span> {{location.categories.map((e) => e.name).join(', ')}}</p>
+            <p v-if="location.description"><span>Información adicional de la locación de carga:</span></p>
+            <div v-if="location.description" class="box-note mb-4">
+                {{ location.description }}
+            </div>
+        </div>
+        <div class="card-footer">
+            <button 
+                class="btn btn-dark radius-sm"
+                @click="handleDeleteLocation"
+            >
+                <i class="fa-solid fa-trash" /> <span class="clear-xsm">Eliminar</span>
+            </button>
+            <button 
+                class="btn-primary-sm radius-sm"
+                @click="$emit('set-location')"
+                data-toggle="modal" data-target="#locationFormModal"
+            >
+                <i class="fa-solid fa-pen-to-square" /> <span class="clear-xsm">Editar</span>
+            </button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+    .card-location {
+        flex-direction: column;
+    }
+
+    .card-footer {
+        display: flex;
+        justify-content: end;
+        gap: 1rem;
+    }
+
+    .box-note {
+        padding: 12px 16px;
+        background-color: aqua;
+        border-radius: 13px;
+    }
+
+    p {
+        font-size: 1rem;
+        font-weight: normal;
+    }
+
+    p span {
+        font-weight: bold;
+    }
+</style>
\ No newline at end of file
diff --git a/src/components/CreateLocationModal.vue b/src/components/CreateLocationModal.vue
new file mode 100644
index 0000000..18a3bc5
--- /dev/null
+++ b/src/components/CreateLocationModal.vue
@@ -0,0 +1,249 @@
+<script setup>
+    import { computed, onMounted, reactive, ref } from 'vue';
+    import CustomInput from './ui/custominput.vue';
+    import Segments from './ui/Segments.vue';
+    import TruckTypes from './ui/TruckTypes.vue';
+    import States from './ui/States.vue';
+    import Cities from './ui/Cities.vue';
+    import Spiner from './ui/Spiner.vue';
+    import { useAuthStore } from '../stores/auth';
+    import { useCompanyStore } from '../stores/company';
+    import Swal from 'sweetalert2';
+
+    const props = defineProps({
+        location: {
+            type: Object,
+            required: false
+        }
+    });
+
+    defineEmits(['reset-location']);
+
+    const authStore = useAuthStore();
+    const companyStore = useCompanyStore()
+    
+    const loading = ref(false);
+
+    const title = computed(() => {
+        return (props.location) ? 'Editar Locación' : 'Crear Locación';
+    });
+
+    const initState = {
+        branch_name: "",
+	    phone: "",
+	    categories: [],
+	    city: "",
+	    state: "",
+	    truck_type: [],
+        address: "",
+        description: "",
+        zipcode: ""
+    }
+
+    const errors = ref({
+        branch_name: null,
+        address: null,
+        city: null,
+        state: null,
+        zipcode: null
+    })
+
+    onMounted(() => {
+        if(props.location) {
+            locationForm.branch_name = props.location.branch_name;
+            locationForm.phone = props.location.phone;
+            locationForm.categories = props.location.categories;
+            locationForm.city = {
+                city_name: props.location.city
+            };
+            locationForm.state = {
+                state_name: props.location.state
+            };
+            locationForm.truck_type = props.location.truck_type?.map((e) => {
+                return {
+                    meta_value: e
+                }
+            });
+            locationForm.address = props.location.address;
+            locationForm.description = props.location.description;
+            locationForm.zipcode = "";
+        } else {
+            Object.assign(locationForm, initState);
+        }
+    })
+
+    const locationForm = reactive({
+        ...initState
+    });
+
+    const saveLocation = async() => {
+        validations();
+        if(errors.value.branch_name || errors.value.address || errors.value.city || errors.value.state || errors.value.zipcode) {
+            return;
+        } else {
+
+            const branchData ={
+				branch_name: locationForm.branch_name,
+				phone: locationForm.phone,
+				categories: locationForm.categories?.length <= 0 ? null : locationForm.categories?.map((e) => e._id),
+				city: locationForm.city.city_name,
+				state: locationForm.state.state_name,
+				address: locationForm.address,
+				truck_type: locationForm.truck_type?.length <= 0 ? null : locationForm.truck_type?.map((e) => e.meta_value),
+				description: locationForm.description,
+				company: authStore.user.company,
+
+			}
+
+            let result = 'error';
+            let action = 'Creado';
+            loading.value = true;
+
+            const localData = {
+                categories: locationForm.categories,
+            }
+
+            if(props.location !== null) {
+                // Se actualiza
+                result = await companyStore.updateLocationCompany(props.location._id, branchData, localData);
+                action = 'actualizada';
+            } else {
+                // Se crea
+                result = await companyStore.createLocationCompany(branchData, localData);
+                action = 'creada';
+            }
+
+            loading.value = false;
+            if(result === 'success') {
+                document.getElementById('btnCloseLocationFormModal').click();
+                Swal.fire({
+                    title: `<strong>Locación ${action} con éxito!</strong>`,
+                    icon: 'success'
+                })
+            } else {
+                Swal.fire({
+                    title: result,
+                    icon: 'error'
+                })
+            }
+            console.log(locationForm);
+        }
+    }
+
+    const validations = () => {
+        errors.value = {
+            branch_name: locationForm.branch_name.length < 2 ? 'Ingrese nombre' : null,
+            address: locationForm.address.length <= 4 ? 'Ingrese dirección valida' : null,
+            city: locationForm.city.length <= 0 ? 'Seleccione municipio' : null,
+            state: locationForm.state.length < 0 ? 'Seleccione estado' : null,
+            zipcode: locationForm.zipcode.length < 5 ? 'Ingrese código postal valido' : null,
+        };
+    }
+</script>
+
+<template>
+   <div class="modal fade" id="locationFormModal" tabindex="-1" role="dialog" aria-labelledby="locationFormModal" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered modal-xl" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h2 class="title mt-2 mb-3">{{ title }}</h2>
+                    <button 
+                        id="btnCloseLocationFormModal" 
+                        type="button" 
+                        @click="$emit('reset-location')"
+                        class="close bg-white" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body form-content">
+                    <form @submit.prevent="saveLocation" autocomplete="off" method="post" ref="formRef">
+                        <CustomInput
+                            label="Nombre de la locación*"
+                            name="name"
+                            v-model:field="locationForm.branch_name"
+                            :filled="false"
+                            :error="errors.branch_name"
+                        />
+                        <CustomInput
+                            label="Dirección(s)*"
+                            name="address"
+                            v-model:field="locationForm.address"
+                            :filled="false"
+                            :error="errors.address"
+                        />
+                        <div class="mb-4 mt-3">
+                            <label class="custom-label">Estado de la locación*</label>
+                            <States
+                                v-model="locationForm.state" 
+                            />
+                            <span class="error-msg" v-if="errors.state">{{ errors.state }}</span>
+                        </div>
+                        <div class="mb-4 mt-3">
+                            <label class="custom-label">Municipio de la locación*</label>
+                            <Cities
+                                v-model="locationForm.city" 
+                            />
+                            <span class="error-msg" v-if="errors.city">{{ errors.city }}</span>
+                        </div>
+                        <CustomInput
+                            label="Código postal"
+                            name="zipcode"
+                            type="number"
+                            v-model:field="locationForm.zipcode"
+                            :filled="false"
+                            :error="errors.zipcode"
+                        />
+                        <CustomInput
+                            label="Teléfono"
+                            name="phone"
+                            type="number"
+                            v-model:field="locationForm.phone"
+                            :filled="false"
+                        />
+                        <div class="mb-4 mt-3">
+                            <label class="custom-label">Segmento</label>
+                            <Segments
+                                v-model="locationForm.categories" 
+                                :multiple="true"
+                            />
+                        </div>
+                        <div class="mb-4 mt-3">
+                            <label class="custom-label">Tipo de transporte que se necesita</label>
+                            <TruckTypes
+                                v-model="locationForm.truck_type" 
+                                :multiple="true"
+                            />
+                        </div>
+                        <div class="d-flex flex-column">
+                            <label class="custom-label" for="description">Información adicional del usuario:</label>
+                            <textarea 
+                                class="custom-input-light"
+                                name="description" 
+                                id="description" 
+                                placeholder="Escribe aqui..."
+                                v-model="locationForm.description"
+                            ></textarea>
+                        </div>
+                        <div class="mt-4 text-center">
+                            <Spiner v-if="loading"/>
+                            <button 
+                                v-else
+                                class="btn btn-dark" type="submit">Guardar</button>
+                        </div> 
+                    </form>
+                </div>
+                <div class="modal-footer">
+                    <button 
+                        type="button" 
+                        class="btn btn-dark" 
+                        @click="$emit('reset-location')"
+                        data-dismiss="modal">Cerrar</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+
+</style>
\ No newline at end of file
diff --git a/src/components/FormLoadModal.vue b/src/components/FormLoadModal.vue
index 1289d8e..5112474 100644
--- a/src/components/FormLoadModal.vue
+++ b/src/components/FormLoadModal.vue
@@ -13,10 +13,12 @@
     import { useAuthStore } from '../stores/auth';
     import Swal from 'sweetalert2';
     import { useNotificationsStore } from '../stores/notifications';
+    import { useCompanyStore } from '../stores/company';
 
     const loadStore = useLoadsStore();
     const notyStore = useNotificationsStore();
     const auth = useAuthStore();
+    const companyStore = useCompanyStore()
     const windowWidth = ref(window.innerWidth);
     const zoom = ref(6);
     const heightMap = ref(768);
@@ -25,9 +27,16 @@
     const startLocation = ref(null);
     const endLocation = ref(null);
     const isLoading = ref(false);
+    const loadingLocations = ref(false);
     const submited = ref(false);
     const { geocodeAddress } = useDirectionsRender();
     const formRef = ref(null);
+    const filterQueryVehicles = ref([]);
+    const checkLocationLoad = ref(false);
+    const checkLocationDownload = ref(false);
+    const locationLoadSelected = ref(null)
+    const locationDownloadSelected = ref(null)
+
     const errors = ref({
         segment: null,
         product: null,
@@ -62,6 +71,9 @@
             zoom.value = 4;
             heightMap.value = 420;
         }
+        if(companyStore.locations.length <= 0) {
+            getLocations();
+        }
         formLoad.owner = auth.user?.first_name + ' ' + auth.user?.last_name;
         //origin_formatted_address
         if(loadStore.currentLoad){
@@ -117,6 +129,13 @@
         })
     })
 
+    const getLocations = async() => {
+        loadingLocations.value = true;
+        filterQueryVehicles.value.company = "company="+ localStorage.getItem('id');
+        await companyStore.getLocationsCompany(filterQueryVehicles.value, false)
+        loadingLocations.value = false;
+    }
+
     const getCoordsMap = async() => {
         if(loadStore.currentLoad.origin_formatted_address) {
             originCoords.value = await geocodeAddress(loadStore.currentLoad.origin_formatted_address);
@@ -397,6 +416,25 @@
                     <div class="form-box">
                         <div class="form-section">
                             <h2>Dirección de origen</h2>
+
+                            <div class="form-check my-4" v-if="loadingLocations === false">
+                                <input class="form-check-input chekmark" type="checkbox" id="flexCheckDefault" v-model="checkLocationLoad">
+                                <label class="form-check-label custom-label" for="flexCheckDefault">
+                                    Usar locaciones registradas 
+                                </label>
+                            </div>
+                            <div class="d-flex flex-column mb-4" v-if="checkLocationLoad">
+                                <label class="custom-label mb-2" for="locationLoad">Locaciones registradas:</label>
+                                <select 
+                                    class="custom-input-light"
+                                    name="locationLoad" 
+                                    id="locationLoad" 
+                                    v-model="locationLoadSelected"
+                                >
+                                    <option disabled value="">-- Seleccionar locación --</option>
+                                    <option v-for="loc in companyStore.locations" :value="loc">{{ loc.branch_name }}</option>
+                                </select>
+                            </div>
                             <Custominput
                                 label="Nombre locación de carga*"
                                 type="text"
@@ -457,6 +495,24 @@
                         </div>
                         <div class="form-section">
                             <h2>Dirección de destino</h2>
+                            <div class="form-check my-4" v-if="loadingLocations === false">
+                                <input class="form-check-input chekmark" type="checkbox" id="flexCheckDefault" v-model="checkLocationDownload">
+                                <label class="form-check-label custom-label" for="flexCheckDefault">
+                                    Usar locaciones registradas 
+                                </label>
+                            </div>
+                            <div class="d-flex flex-column mb-4" v-if="checkLocationDownload">
+                                <label class="custom-label mb-2" for="locationDownload">Locaciones registradas:</label>
+                                <select 
+                                    class="custom-input-light"
+                                    name="locationDownload" 
+                                    id="locationDownload" 
+                                    v-model="locationDownloadSelected"
+                                >
+                                    <option disabled value="">-- Seleccionar locación --</option>
+                                    <option v-for="loc in companyStore.locations" :value="loc">{{ loc.branch_name }}</option>
+                                </select>
+                            </div>
                             <Custominput
                                 label="Nombre locación de descarga*"
                                 type="text"
@@ -608,6 +664,12 @@
         gap: 1rem;
     }
 
+    .chekmark {
+        height: 25px;
+        width: 25px;
+        margin-right: 10px;
+    }
+
     .radius-sm{
         border-radius: 5px;
     }
diff --git a/src/services/company.js b/src/services/company.js
index a223f02..dd4cc6e 100644
--- a/src/services/company.js
+++ b/src/services/company.js
@@ -113,6 +113,50 @@ export const deleteBudget = async(id) => {
     }
 }
 
+export const getLocations = async(filter) => {
+    try {
+        const endpoint = `/branches/${filter}`;
+        const {data} = await api.get(endpoint);
+        return data;
+    } catch (error) {
+        console.log(error);
+        return null;
+    }
+}
+
+export const createLocation = async(formData) => {
+    try {
+        const endpoint = `/branches`;
+        const {data} = await api.post(endpoint, formData);
+        return data;
+    } catch (error) {
+        console.log(error);
+        return null;
+    }
+}
+
+export const updateLocation = async(id, formData) => {
+    try {
+        const endpoint = `/branches/${id}`;
+        const {data} = await api.patch(endpoint, formData);
+        return data;
+    } catch (error) {
+        console.log(error);
+        return null;
+    }
+}
+
+export const deleteLocation = async(id) => {
+    try {
+        const endpoint = `/branches/${id}`;
+        const {data} = await api.delete(endpoint);
+        return data;
+    } catch (error) {
+        console.log(error);
+        return null;
+    }
+}
+
 
 // export const editCompany = async(companyId, formData) => {
 //     try {
diff --git a/src/stores/company.js b/src/stores/company.js
index 7b4adb1..f29939c 100644
--- a/src/stores/company.js
+++ b/src/stores/company.js
@@ -1,6 +1,6 @@
 import { defineStore } from "pinia";
 import { ref } from "vue";
-import { getBudgets,  getCompany, updateBudget, updateCompany, deleteBudget, createBudget, getUsers, updateUser, createUser, deleteUser } from "../services/company";
+import { getBudgets,  getCompany, updateBudget, updateCompany, deleteBudget, createBudget, getUsers, updateUser, createUser, deleteUser, getLocations, createLocation, updateLocation, deleteLocation } from "../services/company";
 import api from "../lib/axios";
 
 export const useCompanyStore = defineStore('company', () => {
@@ -8,6 +8,7 @@ export const useCompanyStore = defineStore('company', () => {
     const company = ref(null)
     const users = ref([]);
     const budgets = ref([]);
+    const locations = ref([]);
     const proposals = ref([])
     const loading = ref(false);
 
@@ -196,6 +197,64 @@ export const useCompanyStore = defineStore('company', () => {
         }
     } 
 
+    const getLocationsCompany = async(filterQuery, reload = false) => {
+        let filterArr = Object.values(filterQuery);
+
+        let cleanfilterArr =  filterArr.filter(n=>n);
+        var filterStr = "";
+        if(cleanfilterArr.length > 0){
+            filterStr ="?"+cleanfilterArr.join("&");
+        }
+        if(locations.value.length <= 0 || reload === true) {
+            const resp = await getLocations(filterStr);
+            console.log(resp);
+            if(resp !== null && resp.total > 0) {
+                locations.value = resp.data;
+            } else {
+                locations.value = [];
+            }
+        }
+    }
+
+    const createLocationCompany = async(formData, localData) => {
+        const data = await createLocation(formData);
+        if(data) {
+            locations.value.push({
+                ...data,
+                ...localData
+            });
+            return 'success';
+        } else {
+            return 'Algo salio mal, intente más tarde';
+        }
+    }
+
+    const updateLocationCompany = async(id, formData, localData) => {
+        const data = await updateLocation(id, formData);
+        if(data) {
+            const index = locations.value.findIndex((loc) => loc._id === id);
+            locations.value[index] = {
+                ...locations.value[index],
+                ...data,
+                ...localData
+            };
+            return 'success';
+        } else {
+            return 'Algo salio mal, intente más tarde';
+        }
+    }
+
+    const deleteLocationCompany = async(id) => {
+        const data = await deleteLocation(id);
+        if(data) {
+            locations.value = locations.value.filter(loc => loc._id !== id);
+
+            return 'success';
+        } else {
+            return 'Algo salio mal, intente más tarde';
+        }
+    }
+
 
    return {
        getCompanyData,
@@ -209,8 +268,13 @@ export const useCompanyStore = defineStore('company', () => {
        updateBudgetCompany,
        createBudgetCompany,
        deleteBudgetCompany,
+       getLocationsCompany,
+       createLocationCompany,
+       updateLocationCompany,
+       deleteLocationCompany,
        budgets,
        users,
+       locations,
        clear,
        $reset,
        loading,
diff --git a/src/views/LocationsView.vue b/src/views/LocationsView.vue
index 5d66486..5fb5675 100644
--- a/src/views/LocationsView.vue
+++ b/src/views/LocationsView.vue
@@ -1,13 +1,146 @@
 <script setup>
+    import { onMounted, ref, watch } from 'vue';
+    import { useCompanyStore } from '../stores/company';
+    import Spiner from '../components/ui/Spiner.vue';
+    import CardEmpty from '../components/CardEmpty.vue';
+    import CreateLocationModal from '../components/CreateLocationModal.vue';
+    import CardLocation from '../components/CardLocation.vue';
+
+    const companyStore = useCompanyStore();
+
+    const loading = ref(false);
+    const filterQuery = ref([]);
+    const query = ref('');
+    const locationCurrent = ref(null);
+    const openModal = ref(false);
+
+    onMounted(() => {
+        getInitData();
+    })
+
+    const getInitData = async() => {
+        loading.value = true;
+        filterQuery.value.company = "company="+ localStorage.getItem('id');
+        await companyStore.getLocationsCompany(filterQuery.value, false)
+        loading.value = false;
+    }
+
+    const getLocationsWithFilters = async(filter) => {
+        loading.value = true;
+        await companyStore.getLocationsCompany(filter, true);
+        loading.value = false;
+    }
+
+    watch(query, () => {
+        if(query.value.length === 0){
+            filterQuery.value.search = "";
+            getLocationsWithFilters(filterQuery.value);
+        }
+    });
+
+    const search = () => {
+        if(query.value.length >= 2){
+            // filterQuery.value = "company_name[$regex]=" + query.value + "&company_name[$options]=i";
+            filterQuery.value.search = "branch_name[$regex]="+ query.value +"&branch_name[$options]=i";;
+            getLocationsWithFilters(filterQuery.value);
+        } 
+    
+    }
+
+    const clearFilter = () => {
+        filterQuery.value.search = "";
+        filterQuery.value.company = "company="+ localStorage.getItem('id');
+
+        if(query.value == ''){
+            getInitData();
+        } else {
+            query.value = '';
+        }
+    }
+
+    const handleSetCurrentLocation = (location) => {
+        openModal.value = true;
+        locationCurrent.value = location;
+    }
+
+    const handleResetCurrentBudget = () => {
+        openModal.value = false;
+        locationCurrent.value = null;
+        console.log('clear location');
+    }
 
 </script>
 
 <template>
     <div>
+        <CreateLocationModal 
+            v-if="openModal === true"
+            :location="locationCurrent"
+            @reset-location="handleResetCurrentBudget"
+        />
         <h2 class="title">Ubicaciones</h2>
+        <div class="box-filters">
+            <div class="box-search">
+                <input class="form-control custom-search" type="search" name="" placeholder="Buscar por nombre de locación" id="" @:input="search()" v-model="query" aria-label="Search">
+            </div>
+            <button 
+                class="btn btn-danger bg-dark" type="button" @click="clearFilter">
+                <i class="fa-solid fa-arrow-rotate-right"></i>
+                <span class="clear-sm"> Reset</span><span class="clear-md"> filtros</span>
+            </button>
+            <button
+                class="btn-primary-sm radius-sm"
+                data-toggle="modal" data-target="#locationFormModal"
+                @click="handleSetCurrentLocation(null)"
+            ><i class="fa-solid fa-plus"></i> <span class="clear-sm"> Agregar</span><span class="clear-md"> locación</span></button>
+        </div>
+        <Spiner v-if="loading"/>
+        <div v-else>
+            <CardLocation
+                v-if="companyStore.locations.length > 0"
+                v-for="location in companyStore.locations"
+                :key="location._id"
+                :location="location" 
+                @set-location="handleSetCurrentLocation(location)"
+            />
+            <CardEmpty v-else text="No hay ubicaciones agregadas"/>
+        </div>
     </div>
 </template>
 
 <style scoped>
+    .box-filters {
+        display: flex;
+        flex-direction: row;
+        justify-content: end;
+        gap: 1rem;
+        margin: 1.5rem 0px;
+    }
 
+    .box-search {
+        width: 60%;
+    }
+    .custom-search {
+        width: 100%;
+        padding: 12px 20px;
+    }
+
+    @media (max-width: 1024px) {
+        .box-search {
+            width: 60%;
+        }
+        .box-filters {
+            gap: .4rem;
+        }
+    }
+
+    @media (max-width: 768px) {
+
+        .box-search {
+            width: 100%;
+        }
+        .box-filters {
+            gap: .3rem;
+        }
+    }
 </style>
\ No newline at end of file