diff --git a/src/features/customers/components/CreateCustomerSidebar.vue b/src/features/customers/components/CreateCustomerSidebar.vue
new file mode 100644
index 0000000..10a3847
--- /dev/null
+++ b/src/features/customers/components/CreateCustomerSidebar.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import {
+  Sheet,
+  Button,
+  SheetFooter,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from "@/components/ui";
+import { watch } from "vue";
+import { z } from "zod";
+import {
+  CreateCustomer,
+  TRUST_STATUS,
+  useCustomerServices,
+} from "../composables";
+import { useForm } from "vee-validate";
+import { toTypedSchema } from "@vee-validate/zod";
+import { notifyIfHasError } from "@/features/global";
+import { useMutation, useQueryClient } from "@tanstack/vue-query";
+import { useRoute } from "vue-router";
+import { analytics } from "@/config/analytics";
+import SharedCustomerFormValues from "./SharedCustomerFormValues.vue";
+
+const openModel = defineModel<boolean>("open");
+
+const initialForm: CreateCustomer = {
+  name: "",
+  phone: "",
+  email: "",
+  address: "",
+  map_url: "",
+  trust_status: "trusted",
+  notes: "",
+};
+const formSchema = toTypedSchema(
+  z.object({
+    name: z.string().min(1, "Nombre de cliente es requerido"),
+    phone: z.coerce.string().length(10, "Teléfono debe tener 10 digitos"),
+    email: z.string().email("Debe ser un correo valido").or(z.literal("")),
+    address: z.string().or(z.literal("")),
+    map_url: z.string().url("Debe ser un url valido").or(z.literal("")),
+    notes: z.string().or(z.literal("")),
+    trust_status: z.enum(TRUST_STATUS),
+    customer_id: z.string().uuid().optional(),
+  })
+);
+
+const route = useRoute();
+const queryClient = useQueryClient();
+const customerServices = useCustomerServices();
+const createCustomerMutation = useMutation({
+  mutationFn: async (formValues: CreateCustomer) => {
+    const { error } = await customerServices.createCustomer(
+      route.params.orgId.toString(),
+      formValues
+    );
+    notifyIfHasError(error);
+    await queryClient.invalidateQueries({ queryKey: ["customers"] });
+    openModel.value = false;
+    analytics.event("create-customer", formValues);
+  },
+});
+const formInstance = useForm<CreateCustomer>({
+  initialValues: initialForm,
+  validationSchema: formSchema,
+});
+
+const onSubmit = formInstance.handleSubmit(async (formValues) => {
+  createCustomerMutation.mutate(formValues);
+});
+
+watch(openModel, (nextOpenValue) => {
+  if (!nextOpenValue) return;
+  formInstance.resetForm({ values: initialForm }, { force: true });
+});
+</script>
+
+<template>
+  <Sheet v-model:open="openModel">
+    <SheetContent side="right" class="overflow-y-auto w-full">
+      <SheetHeader>
+        <SheetTitle>Crear cliente</SheetTitle>
+        <SheetDescription
+          >Crea rápidamente un nuevo cliente para tu
+          inventario.</SheetDescription
+        >
+      </SheetHeader>
+      <div class="space-y-6 pb-16">
+        <form @submit="onSubmit" class="flex flex-col gap-6 mt-6 mb-6">
+          <SharedCustomerFormValues />
+
+          <SheetFooter class="gap-4 sm:gap-0">
+            <Button
+              :disabled="createCustomerMutation.isPending.value"
+              type="submit"
+              class="w-full"
+              >Guardar</Button
+            >
+            <Button
+              type="button"
+              :disabled="createCustomerMutation.isPending.value"
+              @click="openModel = false"
+              variant="outline"
+              >Cancelar</Button
+            >
+          </SheetFooter>
+        </form>
+      </div>
+    </SheetContent>
+  </Sheet>
+</template>
diff --git a/src/features/customers/components/CreateOrEditSidebar.vue b/src/features/customers/components/CreateOrEditSidebar.vue
deleted file mode 100644
index 1edf290..0000000
--- a/src/features/customers/components/CreateOrEditSidebar.vue
+++ /dev/null
@@ -1,238 +0,0 @@
-<script setup lang="ts">
-import {
-  Sheet,
-  Button,
-  Input,
-  Select,
-  FormMessage,
-  FormControl,
-  FormLabel,
-  FormItem,
-  FormField,
-  Textarea,
-  SelectTrigger,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectValue,
-  SheetFooter,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetDescription,
-} from "@/components/ui";
-import { toRef, watch } from "vue";
-import { z } from "zod";
-import {
-  CreateCustomer,
-  Customer,
-  TRUST_STATUS,
-  UpdateCustomer,
-} from "../composables";
-import { useForm } from "vee-validate";
-import { toTypedSchema } from "@vee-validate/zod";
-
-type CreateOrEditSidebarProps = {
-  isLoading?: boolean;
-  customer?: Customer | null;
-};
-
-const openModel = defineModel<boolean>("open");
-const props = withDefaults(defineProps<CreateOrEditSidebarProps>(), {
-  isLoading: false,
-  customer: null,
-});
-const emit = defineEmits<{
-  (e: "save", formValues: CreateCustomer | UpdateCustomer): void;
-}>();
-
-const locale = {
-  create: {
-    title: "Crear cliente",
-    subtitle: "Crea rápidamente un nuevo cliente para tu inventario.",
-  },
-  update: {
-    title: "Actualizar cliente",
-    subtitle: "Actualiza rápidamente un cliente de tu inventario.",
-  },
-};
-
-const initialForm: CreateCustomer | UpdateCustomer = {
-  name: "",
-  phone: "",
-  email: "",
-  address: "",
-  map_url: "",
-  trust_status: "trusted",
-  notes: "",
-};
-
-const formSchema = toTypedSchema(
-  z.object({
-    name: z.string().min(1, "Nombre de cliente es requerido"),
-    phone: z.coerce.string().length(10, "Teléfono debe tener 10 digitos"),
-    email: z.string().email("Debe ser un correo valido").or(z.literal("")),
-    address: z.string().or(z.literal("")),
-    map_url: z.string().url("Debe ser un url valido").or(z.literal("")),
-    notes: z.string().or(z.literal("")),
-    trust_status: z.enum(TRUST_STATUS),
-    customer_id: z.string().uuid().optional(),
-  })
-);
-
-const formInstance = useForm<CreateCustomer | UpdateCustomer>({
-  initialValues: initialForm,
-  validationSchema: formSchema,
-});
-
-const formMode = toRef(() => (props.customer ? "update" : "create"));
-
-const onSubmit = formInstance.handleSubmit(async (formValues) => {
-  emit("save", formValues);
-});
-
-watch(
-  openModel,
-  (nextOpenValue) => {
-    if (nextOpenValue && props.customer) {
-      formInstance.resetForm({
-        values: {
-          name: props.customer.name ?? "",
-          phone: props.customer.phone ?? "",
-          email: props.customer.email ?? "",
-          address: props.customer.address ?? "",
-          map_url: props.customer.map_url ?? "",
-          customer_id: props.customer.id,
-          trust_status: props.customer.trust_status ?? "trusted",
-          notes: props.customer.notes ?? "",
-        },
-      });
-    } else {
-      formInstance.resetForm({ values: initialForm }, { force: true });
-    }
-  }
-);
-</script>
-
-<template>
-  <Sheet v-model:open="openModel">
-    <SheetContent side="right" class="overflow-y-auto w-full">
-      <SheetHeader>
-        <SheetTitle>{{ locale[formMode].title }}</SheetTitle>
-        <SheetDescription>{{ locale[formMode].subtitle }}</SheetDescription>
-      </SheetHeader>
-      <div class="space-y-6 pb-16">
-        <form @submit="onSubmit" class="flex flex-col gap-6 mt-6 mb-6">
-          <FormField v-slot="{ componentField }" name="name">
-            <FormItem v-auto-animate>
-              <FormLabel>Nombre de cliente</FormLabel>
-              <FormControl>
-                <Input
-                  type="text"
-                  placeholder="Ingresa el nombre de cliente"
-                  v-bind="componentField"
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-          <FormField v-slot="{ componentField }" name="phone">
-            <FormItem v-auto-animate>
-              <FormLabel>Teléfono de cliente</FormLabel>
-              <FormControl>
-                <Input
-                  type="number"
-                  placeholder="Ingresa el telefono del cliente"
-                  v-bind="componentField"
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-          <FormField v-slot="{ componentField }" name="email">
-            <FormItem v-auto-animate>
-              <FormLabel>Correo de cliente</FormLabel>
-              <FormControl>
-                <Input
-                  type="email"
-                  placeholder="Ingresa el correo del cliente"
-                  v-bind="componentField"
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-          <FormField v-slot="{ componentField }" name="address">
-            <FormItem v-auto-animate>
-              <FormLabel>Dirección de cliente</FormLabel>
-              <FormControl>
-                <Textarea
-                  placeholder="Ingresa la dirección del cliente"
-                  v-bind="componentField"
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-          <FormField v-slot="{ componentField }" name="map_url">
-            <FormItem v-auto-animate>
-              <FormLabel>URL de mapa</FormLabel>
-              <FormControl>
-                <Input
-                  placeholder="Ingresa el link de mapa del cliente"
-                  v-bind="componentField"
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-          <FormField v-slot="{ componentField }" name="notes">
-            <FormItem v-auto-animate>
-              <FormLabel>Notas</FormLabel>
-              <FormControl>
-                <Textarea
-                  placeholder="Notas de cliente"
-                  v-bind="componentField"
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-          <FormField v-slot="{ componentField }" name="trust_status">
-            <FormItem v-auto-animate>
-              <FormLabel>Estado de confianza</FormLabel>
-              <Select v-bind="componentField">
-                <FormControl>
-                  <SelectTrigger>
-                    <SelectValue
-                      placeholder="Escoge un estado de confiabilidad"
-                    />
-                  </SelectTrigger>
-                </FormControl>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectItem value="trusted">Confiable</SelectItem>
-                    <SelectItem value="not_trusted"> No confiable </SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-          <SheetFooter class="gap-4 sm:gap-0">
-            <Button :disabled="isLoading" type="submit" class="w-full"
-              >Guardar</Button
-            >
-            <Button
-              type="button"
-              :disabled="isLoading"
-              @click="openModel = false"
-              variant="outline"
-              >Cancelar</Button
-            >
-          </SheetFooter>
-        </form>
-      </div>
-    </SheetContent>
-  </Sheet>
-</template>
diff --git a/src/features/customers/components/DeleteCustomerDialog.vue b/src/features/customers/components/DeleteCustomerDialog.vue
index 621b142..8dd68c1 100644
--- a/src/features/customers/components/DeleteCustomerDialog.vue
+++ b/src/features/customers/components/DeleteCustomerDialog.vue
@@ -14,21 +14,33 @@ import {
   DrawerTitle,
   DrawerDescription,
 } from "@/components/ui";
-import { Customer } from "../composables";
+import { Customer, useCustomerServices } from "../composables";
 import { useMediaQuery } from "@vueuse/core";
+import { useMutation, useQueryClient } from "@tanstack/vue-query";
+import { analytics } from "@/config/analytics";
+import { notifyIfHasError } from "@/features/global";
 
-type DeleteCustomerDialogProps = {
-  isLoading?: boolean;
+type Props = {
   customer: Customer | null;
 };
 
 const openModel = defineModel<boolean>("open");
-defineProps<DeleteCustomerDialogProps>();
-const emit = defineEmits<{
-  (e: "confirmDelete", formValues: Customer | null): void;
-}>();
+const props = defineProps<Props>();
 
 const isDesktop = useMediaQuery("(min-width: 768px)");
+const queryClient = useQueryClient();
+const customerServices = useCustomerServices();
+const deleteCustomerMutation = useMutation({
+  mutationFn: async () => {
+    const customerId = props.customer?.id;
+    if (!customerId) throw new Error("Customer id required to perform delete");
+    const { error } = await customerServices.deleteCustomer(customerId);
+    notifyIfHasError(error);
+    openModel.value = false;
+    await queryClient.invalidateQueries({ queryKey: ["customers"] });
+    analytics.event("delete-customer", props.customer);
+  },
+});
 </script>
 
 <template>
@@ -43,15 +55,15 @@ const isDesktop = useMediaQuery("(min-width: 768px)");
       </DialogHeader>
       <DialogFooter>
         <Button
-          :disabled="isLoading"
+          :disabled="deleteCustomerMutation.isPending.value"
           type="button"
           variant="destructive"
-          @click="$emit('confirmDelete', customer)"
+          @click="deleteCustomerMutation.mutate"
         >
           Si, eliminar
         </Button>
         <Button
-          :disabled="isLoading"
+          :disabled="deleteCustomerMutation.isPending.value"
           type="button"
           variant="secondary"
           @click="openModel = false"
@@ -74,15 +86,15 @@ const isDesktop = useMediaQuery("(min-width: 768px)");
         </DrawerHeader>
         <DrawerFooter>
           <Button
-            :disabled="isLoading"
+            :disabled="deleteCustomerMutation.isPending.value"
             type="button"
             variant="destructive"
-            @click="$emit('confirmDelete', customer)"
+            @click="deleteCustomerMutation.mutate"
           >
             Si, eliminar
           </Button>
           <Button
-            :disabled="isLoading"
+            :disabled="deleteCustomerMutation.isPending.value"
             type="button"
             variant="secondary"
             @click="openModel = false"
diff --git a/src/features/customers/components/SharedCustomerFormValues.vue b/src/features/customers/components/SharedCustomerFormValues.vue
new file mode 100644
index 0000000..36e4a0e
--- /dev/null
+++ b/src/features/customers/components/SharedCustomerFormValues.vue
@@ -0,0 +1,111 @@
+<script setup lang="ts">
+import {
+  Input,
+  Select,
+  FormMessage,
+  FormControl,
+  FormLabel,
+  FormItem,
+  FormField,
+  Textarea,
+  SelectTrigger,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectValue,
+} from "@/components/ui";
+</script>
+
+<template>
+  <FormField v-slot="{ componentField }" name="name">
+    <FormItem v-auto-animate>
+      <FormLabel>Nombre de cliente</FormLabel>
+      <FormControl>
+        <Input
+          type="text"
+          placeholder="Ingresa el nombre de cliente"
+          v-bind="componentField"
+        />
+      </FormControl>
+      <FormMessage />
+    </FormItem>
+  </FormField>
+  <FormField v-slot="{ componentField }" name="phone">
+    <FormItem v-auto-animate>
+      <FormLabel>Teléfono de cliente</FormLabel>
+      <FormControl>
+        <Input
+          type="number"
+          placeholder="Ingresa el telefono del cliente"
+          v-bind="componentField"
+        />
+      </FormControl>
+      <FormMessage />
+    </FormItem>
+  </FormField>
+  <FormField v-slot="{ componentField }" name="email">
+    <FormItem v-auto-animate>
+      <FormLabel>Correo de cliente</FormLabel>
+      <FormControl>
+        <Input
+          type="email"
+          placeholder="Ingresa el correo del cliente"
+          v-bind="componentField"
+        />
+      </FormControl>
+      <FormMessage />
+    </FormItem>
+  </FormField>
+  <FormField v-slot="{ componentField }" name="address">
+    <FormItem v-auto-animate>
+      <FormLabel>Dirección de cliente</FormLabel>
+      <FormControl>
+        <Textarea
+          placeholder="Ingresa la dirección del cliente"
+          v-bind="componentField"
+        />
+      </FormControl>
+      <FormMessage />
+    </FormItem>
+  </FormField>
+  <FormField v-slot="{ componentField }" name="map_url">
+    <FormItem v-auto-animate>
+      <FormLabel>URL de mapa</FormLabel>
+      <FormControl>
+        <Input
+          placeholder="Ingresa el link de mapa del cliente"
+          v-bind="componentField"
+        />
+      </FormControl>
+      <FormMessage />
+    </FormItem>
+  </FormField>
+  <FormField v-slot="{ componentField }" name="notes">
+    <FormItem v-auto-animate>
+      <FormLabel>Notas</FormLabel>
+      <FormControl>
+        <Textarea placeholder="Notas de cliente" v-bind="componentField" />
+      </FormControl>
+      <FormMessage />
+    </FormItem>
+  </FormField>
+  <FormField v-slot="{ componentField }" name="trust_status">
+    <FormItem v-auto-animate>
+      <FormLabel>Estado de confianza</FormLabel>
+      <Select v-bind="componentField">
+        <FormControl>
+          <SelectTrigger>
+            <SelectValue placeholder="Escoge un estado de confiabilidad" />
+          </SelectTrigger>
+        </FormControl>
+        <SelectContent>
+          <SelectGroup>
+            <SelectItem value="trusted">Confiable</SelectItem>
+            <SelectItem value="not_trusted"> No confiable </SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <FormMessage />
+    </FormItem>
+  </FormField>
+</template>
diff --git a/src/features/customers/components/UpdateCustomerSidebar.vue b/src/features/customers/components/UpdateCustomerSidebar.vue
new file mode 100644
index 0000000..976e14e
--- /dev/null
+++ b/src/features/customers/components/UpdateCustomerSidebar.vue
@@ -0,0 +1,135 @@
+<script setup lang="ts">
+import {
+  Sheet,
+  Button,
+  SheetFooter,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+} from "@/components/ui";
+import { watch } from "vue";
+import { z } from "zod";
+import {
+  Customer,
+  TRUST_STATUS,
+  UpdateCustomer,
+  useCustomerServices,
+} from "../composables";
+import { useForm } from "vee-validate";
+import { toTypedSchema } from "@vee-validate/zod";
+import { analytics } from "@/config/analytics";
+import { notifyIfHasError } from "@/features/global";
+import { useMutation, useQueryClient } from "@tanstack/vue-query";
+import { useRoute } from "vue-router";
+import SharedCustomerFormValues from "./SharedCustomerFormValues.vue";
+
+type Props = {
+  customer?: Customer | null;
+};
+
+const openModel = defineModel<boolean>("open");
+const props = withDefaults(defineProps<Props>(), {
+  customer: null,
+});
+
+const initialForm: UpdateCustomer = {
+  customer_id: "",
+  name: "",
+  phone: "",
+  email: "",
+  address: "",
+  map_url: "",
+  trust_status: "trusted",
+  notes: "",
+};
+const formSchema = toTypedSchema(
+  z.object({
+    name: z.string().min(1, "Nombre de cliente es requerido"),
+    phone: z.coerce.string().length(10, "Teléfono debe tener 10 digitos"),
+    email: z.string().email("Debe ser un correo valido").or(z.literal("")),
+    address: z.string().or(z.literal("")),
+    map_url: z.string().url("Debe ser un url valido").or(z.literal("")),
+    notes: z.string().or(z.literal("")),
+    trust_status: z.enum(TRUST_STATUS),
+    customer_id: z.string().uuid().optional(),
+  })
+);
+
+const route = useRoute();
+const queryClient = useQueryClient();
+const customerServices = useCustomerServices();
+const updateCustomerMutation = useMutation({
+  mutationFn: async (formValues: UpdateCustomer) => {
+    const customerId = formValues.customer_id;
+    if (!customerId) throw new Error("Customer id required to perform update");
+    const { error } = await customerServices.updateCustomer(
+      route.params.orgId.toString(),
+      formValues
+    );
+    notifyIfHasError(error);
+    await queryClient.invalidateQueries({ queryKey: ["customers"] });
+    openModel.value = false;
+    analytics.event("update-customer", formValues);
+  },
+});
+const formInstance = useForm<UpdateCustomer>({
+  initialValues: initialForm,
+  validationSchema: formSchema,
+});
+
+const onSubmit = formInstance.handleSubmit(async (formValues) => {
+  updateCustomerMutation.mutate(formValues);
+});
+
+watch(openModel, (nextOpenValue) => {
+  if (nextOpenValue && props.customer) {
+    formInstance.resetForm({
+      values: {
+        name: props.customer.name ?? "",
+        phone: props.customer.phone ?? "",
+        email: props.customer.email ?? "",
+        address: props.customer.address ?? "",
+        map_url: props.customer.map_url ?? "",
+        customer_id: props.customer.id,
+        trust_status: props.customer.trust_status ?? "trusted",
+        notes: props.customer.notes ?? "",
+      },
+    });
+  }
+});
+</script>
+
+<template>
+  <Sheet v-model:open="openModel">
+    <SheetContent side="right" class="overflow-y-auto w-full">
+      <SheetHeader>
+        <SheetTitle>Actualizar cliente</SheetTitle>
+        <SheetDescription
+          >Actualiza rápidamente un cliente de tu inventario.</SheetDescription
+        >
+      </SheetHeader>
+      <div class="space-y-6 pb-16">
+        <form @submit="onSubmit" class="flex flex-col gap-6 mt-6 mb-6">
+          <SharedCustomerFormValues />
+
+          <SheetFooter class="gap-4 sm:gap-0">
+            <Button
+              :disabled="updateCustomerMutation.isPending.value"
+              type="submit"
+              class="w-full"
+              >Guardar</Button
+            >
+            <Button
+              type="button"
+              :disabled="updateCustomerMutation.isPending.value"
+              @click="openModel = false"
+              variant="outline"
+              >Cancelar</Button
+            >
+          </SheetFooter>
+        </form>
+      </div>
+    </SheetContent>
+  </Sheet>
+</template>
diff --git a/src/features/customers/components/index.ts b/src/features/customers/components/index.ts
index 587c19f..6bb55bc 100644
--- a/src/features/customers/components/index.ts
+++ b/src/features/customers/components/index.ts
@@ -1,2 +1,3 @@
-export { default as CreateOrEditSidebar } from "./CreateOrEditSidebar.vue";
-export { default as DeleteCustomerDialog } from "./DeleteCustomerDialog.vue";
+export { default as CreateCustomerSidebar } from "./CreateCustomerSidebar.vue";
+export { default as UpdateCustomerSidebar } from "./UpdateCustomerSidebar.vue";
+export { default as DeleteCustomerDialog } from "./DeleteCustomerDialog.vue";
\ No newline at end of file
diff --git a/src/features/global/composables/index.ts b/src/features/global/composables/index.ts
index 17d7e68..6f531b1 100644
--- a/src/features/global/composables/index.ts
+++ b/src/features/global/composables/index.ts
@@ -3,3 +3,4 @@ export * from "./useServiceHelpers";
 export * from "./useRoleServices";
 export * from "./useRoleQueries";
 export * from "./useTableStates";
+export * from "./useSidebarManager";
diff --git a/src/features/global/composables/useSidebarManager.ts b/src/features/global/composables/useSidebarManager.ts
new file mode 100644
index 0000000..01697c9
--- /dev/null
+++ b/src/features/global/composables/useSidebarManager.ts
@@ -0,0 +1,29 @@
+import { computed, ref } from 'vue';
+
+interface SidebarState {
+  id: string;
+  state: Record<string, unknown>;
+}
+
+export function useSidebarManager(initialState?: SidebarState[]) {
+  const sidebars = ref<SidebarState[]>(initialState ?? []);
+
+  const currentSidebar = computed(() => sidebars.value[sidebars.value.length - 1])
+  const hasAnySidebarOpen = computed(() => sidebars.value.length)
+
+  function openSidebar(sidebarId: string, state?: SidebarState['state']) {
+    sidebars.value.push({ id: sidebarId, state: state ?? {} });
+  };
+
+  function closeSidebar() {
+    sidebars.value.pop();
+  };
+
+  return {
+    sidebars,
+    currentSidebar,
+    hasAnySidebarOpen,
+    openSidebar,
+    closeSidebar,
+  };
+}
diff --git a/src/features/organizations/components/DeleteOrganizationDialog.vue b/src/features/organizations/components/DeleteOrganizationDialog.vue
index 050e69c..67eb169 100644
--- a/src/features/organizations/components/DeleteOrganizationDialog.vue
+++ b/src/features/organizations/components/DeleteOrganizationDialog.vue
@@ -21,6 +21,7 @@ import { useMutation, useQueryClient } from "@tanstack/vue-query";
 import { useMediaQuery } from "@vueuse/core";
 import { useOrganizationServices } from "../composables";
 import { ref } from "vue";
+import { notifyIfHasError } from "@/features/global";
 
 type DeleteUserOrganizationDialogProps = {
   userOrganization: UserOrganization | null;
@@ -38,9 +39,10 @@ const deleteUserOrganizationMutation = useMutation({
   mutationFn: async () => {
     if (!props.userOrganization?.org_id)
       throw new Error("Cannot delete since organization id was not provided");
-    await organizationServices.deleteOrganization(
+    const { error } = await organizationServices.deleteOrganization(
       props.userOrganization?.org_id
     );
+    notifyIfHasError(error);
     await queryClient.invalidateQueries({ queryKey: ["organization"] });
     await queryClient.invalidateQueries({ queryKey: ["user"] });
     openModel.value = false;
@@ -66,12 +68,17 @@ const deleteUserOrganizationMutation = useMutation({
         >Escribe el nombre de tu organizacion para poder eliminar:
         <b>{{ userOrganization?.i_organizations?.name }}</b></Label
       >
-      <Input v-model="organizationName" placeholder="Los nombres deben coincidir" />
+      <Input
+        v-model="organizationName"
+        placeholder="Los nombres deben coincidir"
+      />
 
       <DialogFooter>
         <Button
-          :disabled="deleteUserOrganizationMutation.isPending.value ||
-              organizationName !== userOrganization?.i_organizations?.name"
+          :disabled="
+            deleteUserOrganizationMutation.isPending.value ||
+            organizationName !== userOrganization?.i_organizations?.name
+          "
           type="button"
           variant="destructive"
           @click="deleteUserOrganizationMutation.mutate"
@@ -108,7 +115,10 @@ const deleteUserOrganizationMutation = useMutation({
           >Escribe el nombre de tu organizacion para poder eliminar:
           <b>{{ userOrganization?.i_organizations?.name }}</b></Label
         >
-        <Input v-model="organizationName" placeholder="Los nombres deben coincidir" />
+        <Input
+          v-model="organizationName"
+          placeholder="Los nombres deben coincidir"
+        />
 
         <DrawerFooter>
           <Button
diff --git a/src/features/organizations/components/UpdateOrganizationDialog.vue b/src/features/organizations/components/UpdateOrganizationDialog.vue
index 6a725f7..acc11a8 100644
--- a/src/features/organizations/components/UpdateOrganizationDialog.vue
+++ b/src/features/organizations/components/UpdateOrganizationDialog.vue
@@ -66,7 +66,7 @@ watchEffect(() => {
       <DialogHeader>
         <DialogTitle>Actualiza el nombre de tu organizacion</DialogTitle>
         <DialogDescription>
-          Escribe el nuevo nombre. MALANDRO {{ userOrganization?.i_organizations?.name }}
+          Escribe el nuevo nombre.
         </DialogDescription>
       </DialogHeader>
       <div>
diff --git a/src/features/products/components/AddStockDialog.vue b/src/features/products/components/AddStockDialog.vue
index 2553764..297be13 100644
--- a/src/features/products/components/AddStockDialog.vue
+++ b/src/features/products/components/AddStockDialog.vue
@@ -19,25 +19,40 @@ import {
   MinusIcon,
   PlusIcon,
 } from "@heroicons/vue/24/outline";
-import { Product, UpdateProduct } from "../composables";
+import { Product, UpdateProduct, useProductServices } from "../composables";
 import { ref, toRef, watch } from "vue";
 import { createReusableTemplate, useMediaQuery } from "@vueuse/core";
+import { useMutation, useQueryClient } from "@tanstack/vue-query";
+import { analytics } from "@/config/analytics";
+import { notifyIfHasError } from "@/features/global";
 
 type AddStockDialogProps = {
-  isLoading?: boolean;
   product: Product | null;
 };
 
 const openModel = defineModel<boolean>("open");
 const props = defineProps<AddStockDialogProps>();
-const emit = defineEmits<{
-  (e: "save", formValues: UpdateProduct): void;
-}>();
 
+const stockAmount = ref(0);
+
+const queryClient = useQueryClient();
+const productServices = useProductServices();
 const [ModalBodyTemplate, ModalBody] = createReusableTemplate();
 const isDesktop = useMediaQuery("(min-width: 768px)");
-
-const stockAmount = ref(0);
+const updateProductMutation = useMutation({
+  mutationFn: async (formValues: UpdateProduct) => {
+    const productId = formValues.product_id;
+    if (!productId) throw new Error("Product id required to perform update");
+    const { error } = await productServices.updateProduct({
+      ...formValues,
+      product_id: productId,
+    });
+    notifyIfHasError(error);
+    await queryClient.invalidateQueries({ queryKey: ["products"] });
+    openModel.value = false;
+    analytics.event("update-product-stock", formValues);
+  },
+});
 
 const originalStockAmount = toRef(() => props.product?.current_stock ?? 0);
 const stockDifference = toRef(
@@ -53,7 +68,7 @@ function updateStock(nextStockAmount: number) {
 function saveStock() {
   if (!props.product?.id)
     throw new Error("Product id is required to add to stock");
-  emit("save", {
+  updateProductMutation.mutate({
     current_stock: stockAmount.value,
     product_id: props.product.id,
   });
@@ -122,7 +137,7 @@ watch(
       <ModalBody />
       <DialogFooter>
         <Button
-          :disabled="isLoading"
+          :disabled="updateProductMutation.isPending.value"
           @click="saveStock"
           type="button"
           class="w-full"
@@ -130,7 +145,7 @@ watch(
           Guardar
         </Button>
         <Button
-          :disabled="isLoading"
+          :disabled="updateProductMutation.isPending.value"
           @click="openModel = false"
           type="button"
           variant="outline"
@@ -163,7 +178,7 @@ watch(
         <ModalBody />
         <DrawerFooter>
           <Button
-            :disabled="isLoading"
+            :disabled="updateProductMutation.isPending.value"
             @click="saveStock"
             type="button"
             class="w-full"
@@ -171,7 +186,7 @@ watch(
             Guardar
           </Button>
           <Button
-            :disabled="isLoading"
+            :disabled="updateProductMutation.isPending.value"
             @click="openModel = false"
             type="button"
             variant="outline"
diff --git a/src/features/products/components/CreateOrEditSidebar.vue b/src/features/products/components/CreateOrEditSidebar.vue
deleted file mode 100644
index 4c22d4d..0000000
--- a/src/features/products/components/CreateOrEditSidebar.vue
+++ /dev/null
@@ -1,224 +0,0 @@
-<script setup lang="ts">
-import {
-  Sheet,
-  Button,
-  Input,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetDescription,
-  FormField,
-  FormItem,
-  FormControl,
-  FormMessage,
-  FormLabel,
-  Textarea,
-  SheetFooter,
-} from '@/components/ui';
-import { toRef, watch } from 'vue';
-import { z } from 'zod';
-import {
-  CreateProduct,
-  Product,
-  UpdateProduct,
-  useCurrencyFormatter,
-} from '../composables';
-import { useForm } from 'vee-validate';
-import { toTypedSchema } from '@vee-validate/zod';
-
-type CreateOrEditSidebarProps = {
-  isLoading?: boolean;
-  product?: Product | null;
-};
-
-const openModel = defineModel<boolean>('open');
-const props = withDefaults(defineProps<CreateOrEditSidebarProps>(), {
-  isLoading: false,
-  product: null,
-});
-const emit = defineEmits<{
-  (e: 'save', formValues: CreateProduct | UpdateProduct): void;
-}>();
-
-const locale = {
-  create: {
-    title: 'Crear producto',
-    subtitle: 'Crea rápidamente un nuevo producto para tu inventario.',
-  },
-  update: {
-    title: 'Actualizar producto',
-    subtitle: 'Actualiza rápidamente un producto de tu inventario.',
-  },
-};
-const initialForm = {
-  name: '',
-  description: '',
-  current_stock: null,
-  unit_price: null,
-  retail_price: null,
-};
-
-const currencyFormatter = useCurrencyFormatter();
-const formSchema = toTypedSchema(
-  z.object({
-    name: z.string().min(1, 'Nombre de producto es requerido'),
-    description: z.string().optional(),
-    current_stock: z
-      .number({ invalid_type_error: 'Ingresa un número válido' })
-      .nonnegative({ message: 'Ingrese un número mayor o igual a cero' })
-      .finite()
-      .safe(),
-    unit_price: z.coerce
-      .number({ invalid_type_error: 'Ingresa un número válido' })
-      .positive({ message: 'Ingrese un número positivo' })
-      .finite()
-      .safe(),
-    retail_price: z.coerce
-      .number({ invalid_type_error: 'Ingresa un número válido' })
-      .positive({ message: 'Ingrese un número positivo' })
-      .finite()
-      .safe(),
-    product_id: z.string().uuid().optional(),
-  }).refine((data)=> data.unit_price < data.retail_price, {
-    message: 'Precio de venta debe de ser mayor al precio unitario',
-    path: ['retail_price']
-  })
-);
-const formInstance = useForm<CreateProduct | UpdateProduct>({
-  validationSchema: formSchema,
-});
-
-const formMode = toRef(() => (props.product ? 'update' : 'create'));
-
-const onSubmit = formInstance.handleSubmit(async (formValues) => {
-  if (typeof formValues.product_id === 'undefined') {
-    delete formValues.product_id;
-  }
-
-  const nextUnitPrice = currencyFormatter.toCents(formValues?.unit_price ?? 0);
-  const nextRetailPrice = currencyFormatter.toCents(
-    formValues?.retail_price ?? 0
-  );
-
-  const modifiedFormValues = {
-    ...formValues,
-    unit_price: nextUnitPrice,
-    retail_price: nextRetailPrice,
-  };
-
-  emit('save', modifiedFormValues);
-});
-
-watch(openModel, (nextOpenValue) => {
-  if (nextOpenValue && props.product) {
-    formInstance.resetForm({
-      values: {
-        name: props.product.name ?? '',
-        description: props.product.description ?? '',
-        current_stock: props.product.current_stock ?? 0,
-        product_id: props.product.id,
-        unit_price: currencyFormatter.parseRaw(props.product.unit_price) ?? 0,
-        retail_price:
-          currencyFormatter.parseRaw(props.product.retail_price) ?? 0,
-      },
-    });
-  } else {
-    formInstance.resetForm({ values: initialForm }, { force: true });
-  }
-});
-</script>
-
-<template>
-  <Sheet v-model:open="openModel">
-    <SheetContent side="right" class="overflow-y-auto w-full">
-      <SheetHeader>
-        <SheetTitle>
-          {{ locale[formMode].title }}
-        </SheetTitle>
-        <SheetDescription>
-          {{ locale[formMode].subtitle }}
-        </SheetDescription>
-      </SheetHeader>
-      <form @submit="onSubmit" class="flex flex-col gap-6 mt-6 mb-6">
-        <FormField v-slot="{ componentField }" name="name">
-          <FormItem v-auto-animate>
-            <FormLabel>Nombre de producto</FormLabel>
-            <FormControl>
-              <Input
-                type="text"
-                placeholder="Ingresa el nombre de producto"
-                v-bind="componentField"
-              />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        </FormField>
-        <FormField v-slot="{ componentField }" name="description">
-          <FormItem v-auto-animate>
-            <FormLabel>Descripción de producto</FormLabel>
-            <FormControl>
-              <Textarea
-                type="text"
-                placeholder="Ingresa la descripción de producto"
-                v-bind="componentField"
-              />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        </FormField>
-        <FormField v-slot="{ componentField }" name="current_stock">
-          <FormItem v-auto-animate>
-            <FormLabel>Unidades disponibles</FormLabel>
-            <FormControl>
-              <Input
-                inputmode="numeric"
-                type="number"
-                placeholder="Ingresa las unidades disponibles de producto"
-                v-bind="componentField"
-              />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        </FormField>
-        <FormField v-slot="{ componentField }" name="unit_price">
-          <FormItem v-auto-animate>
-            <FormLabel>Precio unitario</FormLabel>
-            <FormControl>
-              <Input
-                inputmode="numeric"
-                placeholder="Ingresa el costo unitario de producto"
-                v-bind="componentField"
-              />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        </FormField>
-        <FormField v-slot="{ componentField }" name="retail_price">
-          <FormItem v-auto-animate>
-            <FormLabel>Precio de venta</FormLabel>
-            <FormControl>
-              <Input
-                inputmode="numeric"
-                placeholder="Ingresa el precio de venta del producto"
-                v-bind="componentField"
-              />
-            </FormControl>
-            <FormMessage />
-          </FormItem>
-        </FormField>
-        <SheetFooter class="gap-4 sm:gap-0">
-          <Button :disabled="isLoading" type="submit" class="w-full"
-            >Guardar</Button
-          >
-          <Button
-            :disabled="isLoading"
-            @click="openModel = false"
-            variant="outline"
-            type="button"
-            >Cancelar</Button
-          >
-        </SheetFooter>
-      </form>
-    </SheetContent>
-  </Sheet>
-</template>
diff --git a/src/features/products/components/CreateProductSidebar.vue b/src/features/products/components/CreateProductSidebar.vue
new file mode 100644
index 0000000..c5f9a67
--- /dev/null
+++ b/src/features/products/components/CreateProductSidebar.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import {
+  Sheet,
+  Button,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  SheetFooter,
+} from "@/components/ui";
+import { watch } from "vue";
+import { z } from "zod";
+import {
+  CreateProduct,
+  useCurrencyFormatter,
+  useProductServices,
+} from "../composables";
+import { useForm } from "vee-validate";
+import { toTypedSchema } from "@vee-validate/zod";
+import { analytics } from "@/config/analytics";
+import { notifyIfHasError } from "@/features/global";
+import { useRoute } from "vue-router";
+import { useMutation, useQueryClient } from "@tanstack/vue-query";
+import SharedProductFormValues from "./SharedProductFormValues.vue";
+
+const openModel = defineModel<boolean>("open");
+
+const initialForm: CreateProduct = {
+  name: "",
+  description: "",
+  current_stock: null,
+  unit_price: null,
+  retail_price: null,
+  image_url: null,
+};
+
+const formSchema = toTypedSchema(
+  z
+    .object({
+      name: z.string().min(1, "Nombre de producto es requerido"),
+      description: z.string().optional(),
+      current_stock: z
+        .number({ invalid_type_error: "Ingresa un número válido" })
+        .nonnegative({ message: "Ingrese un número mayor o igual a cero" })
+        .finite()
+        .safe(),
+      unit_price: z.coerce
+        .number({ invalid_type_error: "Ingresa un número válido" })
+        .positive({ message: "Ingrese un número positivo" })
+        .finite()
+        .safe(),
+      retail_price: z.coerce
+        .number({ invalid_type_error: "Ingresa un número válido" })
+        .positive({ message: "Ingrese un número positivo" })
+        .finite()
+        .safe(),
+    })
+    .refine((data) => data.unit_price < data.retail_price, {
+      message: "Precio de venta debe de ser mayor al precio unitario",
+      path: ["retail_price"],
+    })
+);
+
+const route = useRoute();
+const queryClient = useQueryClient();
+const productServices = useProductServices();
+const createProductMutation = useMutation({
+  mutationFn: async (formValues: CreateProduct) => {
+    const { error } = await productServices.createProduct(
+      route.params.orgId.toString(),
+      formValues
+    );
+    notifyIfHasError(error);
+    await queryClient.invalidateQueries({ queryKey: ["products"] });
+    openModel.value = false;
+    analytics.event("create-product", formValues);
+  },
+});
+const currencyFormatter = useCurrencyFormatter();
+const formInstance = useForm<CreateProduct>({
+  initialValues: initialForm,
+  validationSchema: formSchema,
+});
+
+const onSubmit = formInstance.handleSubmit(async (formValues) => {
+  const nextUnitPrice = currencyFormatter.toCents(formValues?.unit_price ?? 0);
+  const nextRetailPrice = currencyFormatter.toCents(
+    formValues?.retail_price ?? 0
+  );
+
+  const modifiedFormValues = {
+    ...formValues,
+    unit_price: nextUnitPrice,
+    retail_price: nextRetailPrice,
+  };
+
+  createProductMutation.mutate(modifiedFormValues);
+});
+
+watch(openModel, (nextOpenValue) => {
+  if (!nextOpenValue) return;
+  formInstance.resetForm({ values: initialForm }, { force: true });
+});
+</script>
+
+<template>
+  <Sheet v-model:open="openModel">
+    <SheetContent side="right" class="overflow-y-auto w-full">
+      <SheetHeader>
+        <SheetTitle> Crear producto </SheetTitle>
+        <SheetDescription>
+          Crea rápidamente un nuevo producto para tu inventario.
+        </SheetDescription>
+      </SheetHeader>
+      <form @submit="onSubmit" class="flex flex-col gap-6 mt-6 mb-6">
+        <SharedProductFormValues />
+
+        <SheetFooter class="gap-4 sm:gap-0">
+          <Button
+            :disabled="createProductMutation.isPending.value"
+            type="submit"
+            class="w-full"
+            >Guardar</Button
+          >
+          <Button
+            :disabled="createProductMutation.isPending.value"
+            @click="openModel = false"
+            variant="outline"
+            type="button"
+            >Cancelar</Button
+          >
+        </SheetFooter>
+      </form>
+    </SheetContent>
+  </Sheet>
+</template>
diff --git a/src/features/products/components/DeleteProductDialog.vue b/src/features/products/components/DeleteProductDialog.vue
index 607c6a4..b02d84c 100644
--- a/src/features/products/components/DeleteProductDialog.vue
+++ b/src/features/products/components/DeleteProductDialog.vue
@@ -14,21 +14,33 @@ import {
   DrawerHeader,
   DrawerTitle,
 } from "@/components/ui";
-import { Product } from "../composables";
+import { Product, useProductServices } from "../composables";
 import { useMediaQuery } from "@vueuse/core";
+import { useMutation, useQueryClient } from "@tanstack/vue-query";
+import { analytics } from "@/config/analytics";
+import { notifyIfHasError } from "@/features/global";
 
 type DeleteProductDialogProps = {
-  isLoading?: boolean;
   product: Product | null;
 };
 
 const openModel = defineModel<boolean>("open");
-defineProps<DeleteProductDialogProps>();
-const emit = defineEmits<{
-  (e: "confirmDelete", formValues: Product | null): void;
-}>();
+const props = defineProps<DeleteProductDialogProps>();
 
+const queryClient = useQueryClient();
+const productServices = useProductServices();
 const isDesktop = useMediaQuery("(min-width: 768px)");
+const deleteProductMutation = useMutation({
+  mutationFn: async () => {
+    const productId = props.product?.id;
+    if (!productId) throw new Error("Product id required to perform delete");
+    const { error } = await productServices.deleteProduct(productId);
+    notifyIfHasError(error);
+    openModel.value = false;
+    await queryClient.invalidateQueries({ queryKey: ["products"] });
+    analytics.event("delete-product", props.product);
+  },
+});
 </script>
 
 <template>
@@ -43,15 +55,15 @@ const isDesktop = useMediaQuery("(min-width: 768px)");
       </DialogHeader>
       <DialogFooter>
         <Button
-          :disabled="isLoading"
+          :disabled="deleteProductMutation.isPending.value"
           type="button"
           variant="destructive"
-          @click="$emit('confirmDelete', product)"
+          @click="deleteProductMutation.mutate"
         >
           Si, eliminar
         </Button>
         <Button
-          :disabled="isLoading"
+          :disabled="deleteProductMutation.isPending.value"
           type="button"
           variant="secondary"
           @click="openModel = false"
@@ -74,15 +86,15 @@ const isDesktop = useMediaQuery("(min-width: 768px)");
         </DrawerHeader>
         <DrawerFooter>
           <Button
-            :disabled="isLoading"
+            :disabled="deleteProductMutation.isPending.value"
             type="button"
             variant="destructive"
-            @click="$emit('confirmDelete', product)"
+            @click="deleteProductMutation.mutate"
           >
             Si, eliminar
           </Button>
           <Button
-            :disabled="isLoading"
+            :disabled="deleteProductMutation.isPending.value"
             type="button"
             variant="secondary"
             @click="openModel = false"
diff --git a/src/features/products/components/SharedProductFormValues.vue b/src/features/products/components/SharedProductFormValues.vue
new file mode 100644
index 0000000..3dbf851
--- /dev/null
+++ b/src/features/products/components/SharedProductFormValues.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import {
+  Input,
+  FormField,
+  FormItem,
+  FormControl,
+  FormMessage,
+  FormLabel,
+  Textarea,
+} from "@/components/ui";
+</script>
+
+<template>
+  <FormField v-slot="{ componentField }" name="name">
+    <FormItem v-auto-animate>
+      <FormLabel>Nombre de producto</FormLabel>
+      <FormControl>
+        <Input
+          type="text"
+          placeholder="Ingresa el nombre de producto"
+          v-bind="componentField"
+        />
+      </FormControl>
+      <FormMessage />
+    </FormItem>
+  </FormField>
+  <FormField v-slot="{ componentField }" name="description">
+    <FormItem v-auto-animate>
+      <FormLabel>Descripción de producto</FormLabel>
+      <FormControl>
+        <Textarea
+          type="text"
+          placeholder="Ingresa la descripción de producto"
+          v-bind="componentField"
+        />
+      </FormControl>
+      <FormMessage />
+    </FormItem>
+  </FormField>
+  <FormField v-slot="{ componentField }" name="current_stock">
+    <FormItem v-auto-animate>
+      <FormLabel>Unidades disponibles</FormLabel>
+      <FormControl>
+        <Input
+          inputmode="numeric"
+          type="number"
+          placeholder="Ingresa las unidades disponibles de producto"
+          v-bind="componentField"
+        />
+      </FormControl>
+      <FormMessage />
+    </FormItem>
+  </FormField>
+  <FormField v-slot="{ componentField }" name="unit_price">
+    <FormItem v-auto-animate>
+      <FormLabel>Precio unitario</FormLabel>
+      <FormControl>
+        <Input
+          inputmode="numeric"
+          placeholder="Ingresa el costo unitario de producto"
+          v-bind="componentField"
+        />
+      </FormControl>
+      <FormMessage />
+    </FormItem>
+  </FormField>
+  <FormField v-slot="{ componentField }" name="retail_price">
+    <FormItem v-auto-animate>
+      <FormLabel>Precio de venta</FormLabel>
+      <FormControl>
+        <Input
+          inputmode="numeric"
+          placeholder="Ingresa el precio de venta del producto"
+          v-bind="componentField"
+        />
+      </FormControl>
+      <FormMessage />
+    </FormItem>
+  </FormField>
+</template>
diff --git a/src/features/products/components/UpdateProductSidebar.vue b/src/features/products/components/UpdateProductSidebar.vue
new file mode 100644
index 0000000..71e3f6f
--- /dev/null
+++ b/src/features/products/components/UpdateProductSidebar.vue
@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import {
+  Sheet,
+  Button,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  SheetFooter,
+} from "@/components/ui";
+import { watch } from "vue";
+import { z } from "zod";
+import {
+  Product,
+  UpdateProduct,
+  useCurrencyFormatter,
+  useProductServices,
+} from "../composables";
+import { useForm } from "vee-validate";
+import { toTypedSchema } from "@vee-validate/zod";
+import { analytics } from "@/config/analytics";
+import { useMutation, useQueryClient } from "@tanstack/vue-query";
+import SharedProductFormValues from "./SharedProductFormValues.vue";
+import { notifyIfHasError } from "@/features/global";
+
+type UpdateProductSidebarProps = {
+  product?: Product | null;
+};
+
+const openModel = defineModel<boolean>("open");
+const props = withDefaults(defineProps<UpdateProductSidebarProps>(), {
+  product: null,
+});
+
+const initialForm: UpdateProduct = {
+  product_id: "",
+  name: "",
+  description: "",
+  current_stock: null,
+  unit_price: null,
+  retail_price: null,
+};
+
+const currencyFormatter = useCurrencyFormatter();
+const formSchema = toTypedSchema(
+  z
+    .object({
+      name: z.string().min(1, "Nombre de producto es requerido"),
+      description: z.string().optional(),
+      current_stock: z
+        .number({ invalid_type_error: "Ingresa un número válido" })
+        .nonnegative({ message: "Ingrese un número mayor o igual a cero" })
+        .finite()
+        .safe(),
+      unit_price: z.coerce
+        .number({ invalid_type_error: "Ingresa un número válido" })
+        .positive({ message: "Ingrese un número positivo" })
+        .finite()
+        .safe(),
+      retail_price: z.coerce
+        .number({ invalid_type_error: "Ingresa un número válido" })
+        .positive({ message: "Ingrese un número positivo" })
+        .finite()
+        .safe(),
+      product_id: z.string().uuid(),
+    })
+    .refine((data) => data.unit_price < data.retail_price, {
+      message: "Precio de venta debe de ser mayor al precio unitario",
+      path: ["retail_price"],
+    })
+);
+
+const queryClient = useQueryClient();
+const productServices = useProductServices();
+const updateProductMutation = useMutation({
+  mutationFn: async (formValues: UpdateProduct) => {
+    const productId = formValues.product_id;
+    if (!productId) throw new Error("Product id required to perform update");
+    const { error } = await productServices.updateProduct({
+      ...formValues,
+      product_id: productId,
+    });
+    notifyIfHasError(error);
+    await queryClient.invalidateQueries({ queryKey: ["products"] });
+    openModel.value = false;
+    analytics.event("update-product-stock", formValues);
+  },
+});
+const formInstance = useForm<UpdateProduct>({
+  initialValues: initialForm,
+  validationSchema: formSchema,
+});
+
+const onSubmit = formInstance.handleSubmit(async (formValues) => {
+  const nextUnitPrice = currencyFormatter.toCents(formValues?.unit_price ?? 0);
+  const nextRetailPrice = currencyFormatter.toCents(
+    formValues?.retail_price ?? 0
+  );
+
+  const modifiedFormValues = {
+    ...formValues,
+    unit_price: nextUnitPrice,
+    retail_price: nextRetailPrice,
+  };
+
+  updateProductMutation.mutate(modifiedFormValues);
+});
+
+watch(openModel, (nextOpenValue) => {
+  if (nextOpenValue && props.product) {
+    formInstance.resetForm({
+      values: {
+        name: props.product.name ?? "",
+        description: props.product.description ?? "",
+        current_stock: props.product.current_stock ?? 0,
+        product_id: props.product.id,
+        unit_price: currencyFormatter.parseRaw(props.product.unit_price) ?? 0,
+        retail_price:
+          currencyFormatter.parseRaw(props.product.retail_price) ?? 0,
+      },
+    });
+  }
+});
+</script>
+
+<template>
+  <Sheet v-model:open="openModel">
+    <SheetContent side="right" class="overflow-y-auto w-full">
+      <SheetHeader>
+        <SheetTitle> Actualizar producto </SheetTitle>
+        <SheetDescription>
+          Actualiza rápidamente un producto de tu inventario.
+        </SheetDescription>
+      </SheetHeader>
+      <form @submit="onSubmit" class="flex flex-col gap-6 mt-6 mb-6">
+        <SharedProductFormValues />
+
+        <SheetFooter class="gap-4 sm:gap-0">
+          <Button
+            :disabled="updateProductMutation.isPending.value"
+            type="submit"
+            class="w-full"
+            >Guardar</Button
+          >
+          <Button
+            :disabled="updateProductMutation.isPending.value"
+            @click="openModel = false"
+            variant="outline"
+            type="button"
+            >Cancelar</Button
+          >
+        </SheetFooter>
+      </form>
+    </SheetContent>
+  </Sheet>
+</template>
diff --git a/src/features/products/components/index.ts b/src/features/products/components/index.ts
index d330cb3..fa79b81 100644
--- a/src/features/products/components/index.ts
+++ b/src/features/products/components/index.ts
@@ -1,4 +1,5 @@
-export { default as CreateOrEditSidebar } from "./CreateOrEditSidebar.vue";
+export { default as CreateProductSidebar } from "./CreateProductSidebar.vue";
+export { default as UpdateProductSidebar } from "./UpdateProductSidebar.vue";
 export { default as AddStockDialog } from "./AddStockDialog.vue";
 export { default as DeleteProductDialog } from "./DeleteProductDialog.vue";
 export { default as ShareStockDialog } from "./ShareStockDialog.vue";
diff --git a/src/features/products/composables/useProductServices.ts b/src/features/products/composables/useProductServices.ts
index 8704814..42ec38f 100644
--- a/src/features/products/composables/useProductServices.ts
+++ b/src/features/products/composables/useProductServices.ts
@@ -3,13 +3,12 @@ import { LoadListOptions, useServiceHelpers } from "@/features/global";
 import { Tables } from "../../../../types_db";
 
 export type CreateProduct = {
-  product_id?: Product["id"];
   name: Product["name"];
   description: Product["description"];
-  image_url: Product["image_url"];
   current_stock: Product["current_stock"];
   retail_price: Product["retail_price"];
   unit_price: Product["unit_price"];
+  image_url: Product["image_url"];
 };
 export type UpdateProduct = {
   product_id: Product["id"];
@@ -101,10 +100,9 @@ export function useProductServices() {
   async function createProduct(orgId: string, formValues: CreateProduct) {
     if (!orgId) throw new Error("Organization is required to create a product");
 
-    const { product_id, ...otherFormValues } = formValues;
-    await supabase.from("i_products").insert([
+    return await supabase.from("i_products").insert([
       {
-        ...otherFormValues,
+        ...formValues,
         org_id: orgId,
       },
     ]);
@@ -112,7 +110,7 @@ export function useProductServices() {
 
   async function updateProduct(formValues: UpdateProduct) {
     const { product_id, ...otherFormValues } = formValues;
-    await supabase
+    return await supabase
       .from("i_products")
       .update({
         ...otherFormValues,
@@ -124,7 +122,7 @@ export function useProductServices() {
     if (!productId)
       throw new Error("Product id is required to delete a product");
 
-    await supabase.from("i_products").delete().eq("id", productId);
+    return await supabase.from("i_products").delete().eq("id", productId);
   }
 
   async function getProductCount(options: {
diff --git a/src/features/sales/components/CreateOrEditSidebar.vue b/src/features/sales/components/CreateOrEditSidebar.vue
deleted file mode 100644
index 3b36497..0000000
--- a/src/features/sales/components/CreateOrEditSidebar.vue
+++ /dev/null
@@ -1,926 +0,0 @@
-<script setup lang="ts">
-import {
-  Sheet,
-  Button,
-  Input,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetDescription,
-  SheetFooter,
-  FormField,
-  FormItem,
-  FormLabel,
-  FormControl,
-  FormMessage,
-  Textarea,
-  Card,
-  CardContent,
-  CardFooter,
-  Avatar,
-  AvatarImage,
-  AvatarFallback,
-  Table,
-  TableHeader,
-  TableRow,
-  TableHead,
-  TableBody,
-  TableCell,
-  Select,
-  SelectTrigger,
-  SelectValue,
-  SelectItem,
-  SelectContent,
-  SelectGroup,
-  Badge,
-} from "@/components/ui";
-import { computed, ref, toRef, watch } from "vue";
-import { z } from "zod";
-import { CreateSale, SALE_STATUS, Sale, UpdateSale } from "../composables";
-import { refDebounced, useInfiniteScroll } from "@vueuse/core";
-import { Customer, useCustomersQuery } from "@/features/customers";
-import { PlusCircleIcon } from "@heroicons/vue/24/outline";
-import {
-  Product,
-  useCurrencyFormatter,
-  useProductsQuery,
-} from "@/features/products";
-import { toTypedSchema } from "@vee-validate/zod";
-import { useFieldArray, useForm } from "vee-validate";
-import { useOrganizationStore } from "@/stores";
-import { useRoute } from "vue-router";
-import {
-  MinusIcon,
-  PlusIcon,
-  ShoppingBagIcon,
-  UsersIcon,
-} from "lucide-vue-next";
-import { FeedbackCard, useTableStates } from "@/features/global";
-
-type CreateOrEditSidebarProps = {
-  viewOnly?: boolean;
-  isLoading?: boolean;
-  sale?: Sale | null;
-};
-
-const openModel = defineModel<boolean>("open");
-const props = withDefaults(defineProps<CreateOrEditSidebarProps>(), {
-  viewOnly: false,
-  isLoading: false,
-  sale: null,
-});
-const emit = defineEmits<{
-  (e: "save", formValues: CreateSale): void;
-}>();
-
-const WHATSAPP_URL = import.meta.env.VITE_WHATSAPP_URL;
-const LOCALE = {
-  CREATE: {
-    TITLE: "Crear venta",
-    SUBTITLE: "Crea rápidamente una nueva venta para tu inventario.",
-  },
-  UPDATE: {
-    TITLE: "Actualizar venta",
-    SUBTITLE: "Actualiza rápidamente una venta de tu inventario.",
-  },
-  VIEW: {
-    TITLE: "Detalle de venta",
-    SUBTITLE: "Ve más a detalle tu venta",
-  },
-  SELECT_PRODUCTS: {
-    TITLE: "Selecciona productos",
-    SUBTITLE: "Selecciona facilmente productos para agregar a tu venta",
-  },
-  SELECT_CUSTOMERS: {
-    TITLE: "Selecciona cliente",
-    SUBTITLE: "Selecciona facilmente un cliente para tu venta",
-  },
-};
-const statusOptions = [
-  {
-    value: "in_progress",
-    text: "En progreso",
-    description:
-      "La venta se está procesando activamente, se están seleccionando o empaquetando los artículos.",
-    status: "blue",
-  },
-  {
-    value: "completed",
-    text: "Completada",
-    description: "La venta se ha procesado y completado con éxito.",
-    status: "green",
-  },
-  {
-    value: "cancelled",
-    text: "Cancelada",
-    description:
-      "La venta fue anulada antes de completarse, posiblemente a solicitud del cliente u otras razones.",
-    status: "red",
-  },
-];
-const initialForm: CreateSale = {
-  status: "in_progress",
-  sale_date: new Date().toISOString(),
-  products: [],
-  shipping_cost: 0,
-  notes: "",
-  cancellation_notes: "",
-};
-
-const saleSidebarMode = ref<"sales" | "products" | "customers">("sales");
-const activeCustomer = ref<Customer | null>(null);
-const productsRef = ref<HTMLElement | null>(null);
-const customersRef = ref<HTMLElement | null>(null);
-const customerSearch = ref("");
-const productSearch = ref("");
-const customerSearchDebounced = refDebounced(customerSearch, 400);
-const productSearchDebounced = refDebounced(productSearch, 400);
-const route = useRoute();
-
-const organizationStore = useOrganizationStore();
-const currencyFormatter = useCurrencyFormatter();
-const customersQuery = useCustomersQuery({
-  options: {
-    enabled: toRef(
-      () =>
-        organizationStore.hasUserOrganizations &&
-        saleSidebarMode.value === "customers"
-    ),
-    orgId: toRef(() => route.params.orgId.toString()),
-    search: customerSearchDebounced,
-    filters: [{ column: "trust_status", operator: "eq", value: "trusted" }],
-    order: ["name", "asc"],
-  },
-});
-const customersLoadingStates = useTableStates(customersQuery, customerSearch);
-useInfiniteScroll(
-  customersRef,
-  () => {
-    if (customersQuery.isFetching.value) return;
-    customersQuery.fetchNextPage();
-  },
-  { distance: 10, canLoadMore: () => customersQuery.hasNextPage.value }
-);
-useInfiniteScroll(
-  productsRef,
-  () => {
-    if (productsQuery.isFetching.value) return;
-    productsQuery.fetchNextPage();
-  },
-  { distance: 10, canLoadMore: () => productsQuery.hasNextPage.value }
-);
-
-const sidebarMode = toRef(() => (props.sale ? "UPDATE" : "CREATE"));
-
-const formSchema = toTypedSchema(
-  z.object({
-    sale_id: z.string().uuid().optional(),
-    status: z.enum(SALE_STATUS),
-    sale_date: z.string().datetime(),
-    customer_id: z.string().uuid().optional(),
-    shipping_cost: z.coerce
-      .number({ invalid_type_error: "Ingresa un número válido" })
-      .nonnegative({ message: "Ingrese un número mayor o igual a cero" })
-      .finite()
-      .safe(),
-    notes: z.string().optional(),
-    cancellation_notes: z.string().optional(),
-    products: z
-      .array(
-        z
-          .object({
-            sale_detail_id: z.string().uuid().optional(),
-            product_id: z.string().uuid(),
-            price: z.coerce
-              .number({ message: "Ingrese un número válido" })
-              .positive({ message: "Ingrese un número positivo" })
-              .finite()
-              .safe(),
-            unit_price: z.coerce
-              .number({ message: "Ingrese un número válido" })
-              .positive({ message: "Ingrese un número positivo" })
-              .finite()
-              .safe(),
-            qty: z.coerce
-              .number({ message: "Ingrese un número válido" })
-              .int("Cantidad debe ser número entero")
-              .positive({ message: "Ingrese un número positivo" })
-              .finite()
-              .safe(),
-            name: z.string(),
-            image_url: z.string().nullish().optional(),
-          })
-          .refine(
-            (data) => {
-              return (
-                data.unit_price < (currencyFormatter.toCents(data.price) ?? 0)
-              );
-            },
-            {
-              message: "Precio de venta debe de ser mayor al precio unitario",
-              path: ["price"],
-            }
-          )
-      )
-      .min(1, "Por favor seleccione al menos un producto"),
-  })
-);
-
-const formInstance = useForm<CreateSale | UpdateSale>({
-  initialValues: initialForm,
-  validationSchema: formSchema,
-});
-
-const filtersWithSelectedProductIds = computed(
-  () =>
-    props.sale?.i_sale_products
-      .filter((product) => Boolean(product?.product_id))
-      .map((product) => ({
-        column: "id",
-        operator: "eq",
-        value: product.product_id ?? "Unknown",
-        filterType: "or",
-      })) ?? []
-);
-
-const productsQuery = useProductsQuery({
-  options: {
-    enabled: toRef(
-      () =>
-        organizationStore.hasUserOrganizations &&
-        saleSidebarMode.value === "products"
-    ),
-    orgId: toRef(() => route.params?.orgId?.toString()),
-    search: productSearchDebounced,
-    filters: toRef(() => {
-      return [
-        ...filtersWithSelectedProductIds.value,
-        {
-          column: "current_stock",
-          operator: "gt",
-          value: 0,
-          filterType: "or",
-        },
-      ];
-    }),
-    order: ["name", "asc"],
-  },
-});
-const productsFormFieldArray = useFieldArray("products");
-const productsLoadingStates = useTableStates(productsQuery, productSearch);
-
-const onSubmit = formInstance.handleSubmit(async (formValues) => {
-  const modifiedProducts = formValues.products.map((formProduct) => ({
-    ...formProduct,
-    price: currencyFormatter.toCents(formProduct.price),
-  }));
-  const nextShippingCost = currencyFormatter.toCents(formValues.shipping_cost);
-
-  const modifiedFormValues = {
-    ...formValues,
-    shipping_cost: nextShippingCost ?? 0,
-    products: modifiedProducts,
-  };
-  emit("save", modifiedFormValues);
-});
-
-function formatProductToSaleDetail(
-  product: Product | null,
-  quantity = 0
-): CreateSale["products"][number] {
-  if (!product) throw new Error("Cannot add product to sale missing data");
-
-  return {
-    product_id: product.id,
-    name: product.name,
-    image_url: product.image_url,
-    price: currencyFormatter.parseRaw(product.retail_price),
-    unit_price: product.unit_price,
-    qty: quantity,
-  };
-}
-
-function hasProductInFieldList(product: Product | null) {
-  return productsFormFieldArray.fields.value.some(
-    (productField) =>
-      (productField.value as CreateSale["products"][number])?.product_id ===
-      product?.id
-  );
-}
-
-function findIndexProductInFieldList(product: Product | null) {
-  return productsFormFieldArray.fields.value.findIndex(
-    (productField) =>
-      (productField.value as CreateSale["products"][number])?.product_id ===
-      product?.id
-  );
-}
-
-function getProductQuantityFromForm(product: Product | null) {
-  const productFieldIdx = findIndexProductInFieldList(product);
-  return formInstance.values.products?.[productFieldIdx]?.qty ?? 0;
-}
-
-function getMaxIncrementValue(product: Product | null) {
-  const matchingProduct = props.sale?.i_sale_products.find(
-    (saleProduct) => saleProduct.product_id === product?.id
-  );
-  const initialFormQty = matchingProduct?.qty ?? 0;
-  const currentStock = product?.current_stock ?? 0;
-
-  if (initialFormQty > 0) return currentStock + initialFormQty;
-
-  return currentStock;
-}
-
-function updateProductFormQuantity(product: Product | null, quantity: number) {
-  const productFieldIdx = findIndexProductInFieldList(product);
-  const formProduct = formInstance.values.products[productFieldIdx];
-
-  if (quantity > getMaxIncrementValue(product)) return;
-  if (quantity < 0) return;
-
-  if (hasProductInFieldList(product) && quantity === 0) {
-    productsFormFieldArray.remove(productFieldIdx);
-  } else if (hasProductInFieldList(product) && quantity > 0) {
-    productsFormFieldArray.update(productFieldIdx, {
-      ...formProduct,
-      qty: quantity,
-    });
-  } else {
-    productsFormFieldArray.push(formatProductToSaleDetail(product, quantity));
-  }
-}
-
-function decrementProductQuantity(product: Product | null) {
-  const productFieldIdx = findIndexProductInFieldList(product);
-  const currentFormQty =
-    formInstance.values.products[productFieldIdx]?.qty ?? 0;
-
-  return updateProductFormQuantity(product, currentFormQty - 1);
-}
-
-function incrementProductQuantity(product: Product | null) {
-  const productFieldIdx = findIndexProductInFieldList(product);
-  const currentFormQty =
-    formInstance.values.products[productFieldIdx]?.qty ?? 0;
-
-  return updateProductFormQuantity(product, currentFormQty + 1);
-}
-
-function isDecrementDisabled(product: Product | null) {
-  const productFieldIdx = findIndexProductInFieldList(product);
-  const maxDecrementValue = 0;
-
-  const currentFormQty =
-    formInstance.values.products[productFieldIdx]?.qty ?? 0;
-
-  return currentFormQty <= maxDecrementValue;
-}
-
-function isIncrementDisabled(product: Product | null) {
-  const productFieldIdx = findIndexProductInFieldList(product);
-  const maxIncrementValue = getMaxIncrementValue(product);
-
-  const currentFormQty =
-    formInstance.values.products[productFieldIdx]?.qty ?? 0;
-
-  return currentFormQty >= maxIncrementValue;
-}
-
-function handleCloseSidebar() {
-  if (saleSidebarMode.value !== "sales") {
-    return (saleSidebarMode.value = "sales");
-  }
-  openModel.value = false;
-}
-
-watch(openModel, (nextOpenValue) => {
-  if (nextOpenValue && props.sale) {
-    formInstance.resetForm({
-      values: {
-        sale_id: props.sale?.id,
-        notes: props.sale?.notes ?? "",
-        products:
-          props.sale?.i_sale_products.map((saleProduct) => ({
-            sale_detail_id: saleProduct.id,
-            image_url: saleProduct.image_url ?? "",
-            product_id: saleProduct.product_id ?? "",
-            name: saleProduct.name ?? "",
-            price: currencyFormatter.parseRaw(saleProduct?.price ?? 0),
-            unit_price: saleProduct?.unit_price ?? 0,
-            qty: saleProduct.qty,
-          })) ?? [],
-        customer_id: props.sale?.customer_id ?? undefined,
-        sale_date: props.sale?.sale_date
-          ? new Date(props.sale.sale_date).toISOString()
-          : new Date().toISOString(),
-        shipping_cost:
-          currencyFormatter.parseRaw(props.sale?.shipping_cost) ?? 0,
-        status: props.sale?.status ?? "in_progress",
-      },
-    });
-  } else {
-    formInstance.resetForm({ values: initialForm }, { force: true });
-  }
-});
-</script>
-
-<template>
-  <Sheet :open="openModel" @update:open="handleCloseSidebar">
-    <SheetContent v-if="!viewOnly" side="right" class="overflow-y-auto w-100">
-      <div v-show="saleSidebarMode === 'sales'">
-        <SheetHeader>
-          <SheetTitle>
-            {{ LOCALE[sidebarMode].TITLE }}
-          </SheetTitle>
-          <SheetDescription>
-            {{ LOCALE[sidebarMode].SUBTITLE }}
-          </SheetDescription>
-        </SheetHeader>
-        <form @submit="onSubmit" class="flex flex-col gap-6 mt-6 mb-6">
-          <FormField v-if="sale?.id" v-slot="{ componentField }" name="status">
-            <FormItem v-auto-animate>
-              <FormLabel>Status de venta</FormLabel>
-              <Select v-bind="componentField">
-                <FormControl>
-                  <SelectTrigger>
-                    <SelectValue placeholder="Seleccione status de venta" />
-                  </SelectTrigger>
-                </FormControl>
-                <SelectContent>
-                  <SelectGroup>
-                    <SelectItem
-                      v-for="(status, index) in statusOptions"
-                      :value="status.value"
-                      :key="index"
-                    >
-                      {{ status.text }}
-                    </SelectItem>
-                  </SelectGroup>
-                </SelectContent>
-              </Select>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-          <FormField v-if="!sale?.id" name="customer_id">
-            <FormItem class="flex flex-col">
-              <FormLabel>Cliente</FormLabel>
-              <Button
-                class="h-12"
-                variant="outline"
-                type="button"
-                @click="saleSidebarMode = 'customers'"
-              >
-                <span v-if="formInstance.values.customer_id">
-                  {{ activeCustomer?.name }} <br />
-                  <span class="text-xs">
-                    {{ activeCustomer?.phone }}
-                  </span>
-                </span>
-                <span v-else>Seleccionar cliente</span>
-              </Button>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-          <FormField v-slot="{ componentField }" name="notes">
-            <FormItem v-auto-animate>
-              <FormLabel>Notas de venta</FormLabel>
-              <FormControl>
-                <Textarea
-                  placeholder="Ingresa notas de la venta"
-                  v-bind="componentField"
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-
-          <FormField v-slot="{ componentField }" name="shipping_cost">
-            <FormItem v-auto-animate>
-              <FormLabel>Costo de envio</FormLabel>
-              <FormControl>
-                <Input
-                  placeholder="Ingresa el costo de envio"
-                  inputmode="numeric"
-                  v-bind="componentField"
-                />
-              </FormControl>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-
-          <FormField name="products">
-            <FormItem class="flex flex-col">
-              <FormLabel>Productos</FormLabel>
-
-              <Table v-if="formInstance.values.products?.length">
-                <TableHeader>
-                  <TableRow>
-                    <TableHead class="w-[100px]"> Producto </TableHead>
-                    <TableHead class="text-center">Cantidad</TableHead>
-                    <TableHead class="text-center">Precio</TableHead>
-                  </TableRow>
-                </TableHeader>
-                <TableBody>
-                  <TableRow
-                    v-for="(productField, idx) in formInstance.values.products"
-                    :key="productField?.product_id ?? idx"
-                  >
-                    <TableCell class="font-medium min-w-[80px]">
-                      {{ productField?.name }}
-                    </TableCell>
-                    <TableCell class="text-center">
-                      {{ productField?.qty }}
-                    </TableCell>
-                    <TableCell class="flex justify-center">
-                      <FormField
-                        v-slot="{ componentField }"
-                        :name="`products.${idx}.price`"
-                      >
-                        <FormItem v-auto-animate>
-                          <FormControl>
-                            <Input
-                              inputmode="numeric"
-                              placeholder="Precio"
-                              v-bind="componentField"
-                              class="w-20"
-                            />
-                          </FormControl>
-                          <FormMessage />
-                        </FormItem>
-                      </FormField>
-                    </TableCell>
-                  </TableRow>
-                  <TableRow>
-                    <TableCell class="font-medium min-w-[80px]"> </TableCell>
-                    <TableCell class="text-center flex justify-center">
-                      {{
-                        formInstance.values.products.reduce(
-                          (acc, formProduct) =>
-                            acc + Number(formProduct.qty ?? 0),
-                          0
-                        )
-                      }}
-                    </TableCell>
-                    <TableCell class="text-center">
-                      {{
-                        currencyFormatter.parse(
-                          formInstance.values.products.reduce(
-                            (acc, formProduct) =>
-                              acc +
-                              (formProduct.qty ?? 0) *
-                                (currencyFormatter.toCents(formProduct.price) ??
-                                  0),
-                            0
-                          ) ?? 0
-                        )
-                      }}
-                    </TableCell>
-                  </TableRow>
-                </TableBody>
-              </Table>
-
-              <Button
-                v-if="formInstance.values.status === 'in_progress'"
-                type="button"
-                @click="saleSidebarMode = 'products'"
-                variant="outline"
-              >
-                <PlusCircleIcon class="w-5 h-5 mr-2" /> Agregar productos
-              </Button>
-              <FormMessage />
-            </FormItem>
-          </FormField>
-          <SheetFooter class="gap-4 sm:gap-0">
-            <Button :disabled="isLoading" type="submit" class="w-full"
-              >Guardar</Button
-            >
-            <Button
-              :disabled="isLoading"
-              @click="
-                openModel = false;
-                saleSidebarMode = 'sales';
-              "
-              variant="outline"
-              type="button"
-              >Cancelar</Button
-            >
-          </SheetFooter>
-        </form>
-      </div>
-      <div ref="productsRef" v-show="saleSidebarMode === 'products'">
-        <SheetHeader class="mb-6">
-          <SheetTitle>{{ LOCALE.SELECT_PRODUCTS.TITLE }}</SheetTitle>
-          <SheetDescription>
-            {{ LOCALE.SELECT_PRODUCTS.SUBTITLE }}
-          </SheetDescription>
-        </SheetHeader>
-        <Input
-          v-model="productSearch"
-          type="search"
-          placeholder="Busca productos..."
-        />
-
-        <FeedbackCard
-          v-if="productsLoadingStates.showEmptyState.value"
-          class="my-24"
-        >
-          <template #icon>
-            <ShoppingBagIcon class="size-10" />
-          </template>
-          <template #title>No tienes productos en stock</template>
-          <template #description
-            >Cuando tengas productos en stock se mostraran aqui.
-          </template>
-        </FeedbackCard>
-
-        <div v-else class="grid grid-cols-2 gap-3 mt-4 mb-10">
-          <Card
-            v-for="product in productsQuery.data.value?.pages.flatMap(
-              (page) => page.data
-            )"
-            :key="product?.id"
-            :class="`flex flex-col ${
-              hasProductInFieldList(product) && 'border-black dark:border-white'
-            }`"
-          >
-            <CardContent class="p-4 text-center">
-              <div class="relative">
-                <Avatar>
-                  <AvatarImage :src="product?.image_url ?? ''" />
-                  <AvatarFallback>{{
-                    `${product?.name?.substring(0, 1).toLocaleUpperCase()}`
-                  }}</AvatarFallback>
-                </Avatar>
-                <Badge class="absolute -top-1 -left-1 text-xs">
-                  {{ product?.current_stock }}
-                </Badge>
-              </div>
-              <div class="text-sm font-semibold line-clamp-2">
-                {{ product?.name }}
-              </div>
-            </CardContent>
-            <CardFooter class="px-2 pb-2 mt-auto">
-              <div class="flex gap-1">
-                <Button
-                  :disabled="isDecrementDisabled(product)"
-                  @click="decrementProductQuantity(product)"
-                  class="shrink-0"
-                  variant="outline"
-                  size="icon"
-                >
-                  <MinusIcon class="size-4" />
-                </Button>
-                <Input
-                  class="numeric-input"
-                  :default-value="getProductQuantityFromForm(product)"
-                  :value="getProductQuantityFromForm(product)"
-                  type="number"
-                  @update:model-value="
-                    updateProductFormQuantity(product, Number($event))
-                  "
-                />
-                <Button
-                  :disabled="isIncrementDisabled(product)"
-                  @click="incrementProductQuantity(product)"
-                  class="shrink-0"
-                  variant="outline"
-                  size="icon"
-                >
-                  <PlusIcon class="size-4" />
-                </Button>
-              </div>
-            </CardFooter>
-          </Card>
-        </div>
-
-        <SheetFooter>
-          <Button
-            @click="saleSidebarMode = 'sales'"
-            class="w-full"
-            type="button"
-          >
-            Aceptar
-          </Button>
-        </SheetFooter>
-      </div>
-      <div ref="customersRef" v-show="saleSidebarMode === 'customers'">
-        <SheetHeader class="mb-6">
-          <SheetTitle>{{ LOCALE.SELECT_CUSTOMERS.TITLE }}</SheetTitle>
-          <SheetDescription>
-            {{ LOCALE.SELECT_CUSTOMERS.SUBTITLE }}
-          </SheetDescription>
-        </SheetHeader>
-        <Input
-          v-model="customerSearch"
-          type="search"
-          placeholder="Busca clientes..."
-        />
-
-        <FeedbackCard
-          v-if="customersLoadingStates.showEmptyState.value"
-          class="my-24"
-        >
-          <template #icon>
-            <UsersIcon class="size-10" />
-          </template>
-          <template #title>No tienes clientes aun</template>
-          <template #description
-            >Cuando tengas clientes agregados se mostraran aqui.
-          </template>
-        </FeedbackCard>
-
-        <div v-else class="grid grid-cols-2 gap-3 mt-4 mb-10">
-          <Card
-            v-for="customer in customersQuery.data.value?.pages.flatMap(
-              (page) => page.data
-            )"
-            :key="customer?.id"
-            class="flex flex-col"
-          >
-            <CardContent class="p-4 text-center">
-              <Avatar>
-                <AvatarFallback>{{
-                  `${customer?.name?.substring(0, 1).toLocaleUpperCase()}`
-                }}</AvatarFallback>
-              </Avatar>
-              <div>
-                <div class="text-sm font-semibold line-clamp-2">
-                  {{ customer?.name ?? "-" }}
-                </div>
-                <div class="text-sm font-normal text-slate-500">
-                  {{ customer?.phone ?? "-" }}
-                </div>
-              </div>
-            </CardContent>
-            <CardFooter class="px-2 pb-2 mt-auto">
-              <Button
-                @click="
-                  formInstance.setFieldValue('customer_id', customer?.id ?? '');
-                  activeCustomer = customer;
-                  saleSidebarMode = 'sales';
-                "
-                class="w-full text-left"
-                type="button"
-                :variant="
-                  formInstance.values.customer_id === customer?.id
-                    ? 'default'
-                    : 'outline'
-                "
-                >{{
-                  formInstance.values.customer_id === customer?.id
-                    ? "Seleccionado"
-                    : "Seleccionar"
-                }}</Button
-              >
-            </CardFooter>
-          </Card>
-        </div>
-      </div>
-    </SheetContent>
-    <SheetContent v-else slide="right" class="overflow-y-auto w-100">
-      <SheetHeader>
-        <SheetTitle>
-          {{ LOCALE.VIEW.TITLE }}
-          <Badge>{{ sale?.status?.toUpperCase() }}</Badge>
-        </SheetTitle>
-        <SheetDescription>
-          {{ LOCALE.VIEW.SUBTITLE }}
-        </SheetDescription>
-      </SheetHeader>
-
-      <div class="flex flex-col gap-6 mt-6">
-        <div>
-          <div class="font-medium text-sm tracking-tight text-foreground">
-            Cliente
-          </div>
-          <div class="flex items-center text-slate-900 dark:text-white">
-            <Avatar>
-              <AvatarFallback>{{
-                `${sale?.i_customers?.name
-                  ?.substring(0, 1)
-                  .toLocaleUpperCase()}`
-              }}</AvatarFallback>
-            </Avatar>
-            <div class="ps-3">
-              <div class="text-base font-semibold">
-                {{ sale?.i_customers?.name }}
-              </div>
-              <div
-                v-if="sale?.i_customers?.phone"
-                class="font-normal text-slate-500"
-              >
-                <a
-                  :href="`${WHATSAPP_URL}/${sale.i_customers.phone}`"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="block"
-                >
-                  {{ sale.i_customers.phone }}
-                </a>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div v-if="sale?.notes">
-          <div class="font-medium text-sm tracking-tight text-foreground">
-            Notas
-          </div>
-          <div class="flex items-center text-slate-900 dark:text-white">
-            {{ sale?.notes }}
-          </div>
-        </div>
-        <div v-if="sale?.shipping_cost">
-          <div class="font-medium text-sm tracking-tight text-foreground">
-            Costo de envio
-          </div>
-          <div class="flex items-center text-slate-900 dark:text-white">
-            {{ currencyFormatter.parse(sale?.shipping_cost) }}
-          </div>
-        </div>
-        <div>
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead class="w-[100px]"> Producto </TableHead>
-                <TableHead class="text-center">Cantidad</TableHead>
-                <TableHead class="text-center">Precio</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
-              <TableRow
-                v-for="(saleProduct, idx) in sale?.i_sale_products"
-                :key="saleProduct?.id ?? idx"
-              >
-                <TableCell class="font-medium min-w-[80px]">
-                  {{ saleProduct?.name }}
-                </TableCell>
-                <TableCell class="text-center flex justify-center">
-                  {{ saleProduct.qty }}
-                </TableCell>
-                <TableCell class="text-center">
-                  {{
-                    currencyFormatter.parse(
-                      (saleProduct.price ?? 0) * (saleProduct.qty ?? 0)
-                    )
-                  }}
-                </TableCell>
-              </TableRow>
-              <TableRow>
-                <TableCell class="font-medium min-w-[80px]"> </TableCell>
-                <TableCell class="text-center flex justify-center">
-                  {{
-                    sale?.i_sale_products.reduce(
-                      (acc, saleProduct) => acc + (saleProduct.qty ?? 0),
-                      0
-                    )
-                  }}
-                </TableCell>
-                <TableCell class="text-center">
-                  {{
-                    currencyFormatter.parse(
-                      sale?.i_sale_products.reduce(
-                        (acc, saleProduct) =>
-                          acc +
-                          (saleProduct.qty ?? 0) * (saleProduct.price ?? 0),
-                        0
-                      ) ?? 0
-                    )
-                  }}
-                </TableCell>
-              </TableRow>
-            </TableBody>
-          </Table>
-          <div
-            v-if="sale?.created_at"
-            class="text-muted-foreground text-xs mt-4"
-          >
-            Creado el
-            {{
-              new Date(sale.created_at).toLocaleDateString("es-MX", {
-                year: "numeric",
-                month: "long",
-                day: "numeric",
-              })
-            }}
-          </div>
-        </div>
-      </div>
-    </SheetContent>
-  </Sheet>
-</template>
-
-<style scoped>
-.numeric-input {
-  text-align: center;
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-  &[type="number"] {
-    -moz-appearance: textfield;
-  }
-}
-</style>
diff --git a/src/features/sales/components/CreateSaleSidebar.vue b/src/features/sales/components/CreateSaleSidebar.vue
new file mode 100644
index 0000000..73fff07
--- /dev/null
+++ b/src/features/sales/components/CreateSaleSidebar.vue
@@ -0,0 +1,332 @@
+<script setup lang="ts">
+import {
+  Sheet,
+  Button,
+  Input,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  SheetFooter,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+  Textarea,
+  Table,
+  TableHeader,
+  TableRow,
+  TableHead,
+  TableBody,
+  TableCell,
+} from "@/components/ui";
+import { watch } from "vue";
+import { z } from "zod";
+import { CreateSale, SALE_STATUS, Sale, useSaleServices } from "../composables";
+import { Customer } from "@/features/customers";
+import { PlusCircleIcon } from "@heroicons/vue/24/outline";
+import { useCurrencyFormatter } from "@/features/products";
+import { toTypedSchema } from "@vee-validate/zod";
+import { useForm } from "vee-validate";
+import { useRoute } from "vue-router";
+import { useMutation, useQueryClient } from "@tanstack/vue-query";
+import { analytics } from "@/config/analytics";
+import { notifyIfHasError, useSidebarManager } from "@/features/global";
+
+type Props = {
+  sidebarManager: ReturnType<typeof useSidebarManager>;
+  activeCustomer: Customer | null;
+  activeProducts: Map<
+    string,
+    Pick<
+      Sale["i_sale_products"][number],
+      "product_id" | "price" | "unit_price" | "qty" | "name" | "image_url"
+    >
+  >;
+};
+
+const openModel = defineModel<boolean>("open");
+const props = defineProps<Props>();
+
+const initialForm: CreateSale = {
+  status: "in_progress",
+  sale_date: new Date().toISOString(),
+  products: [],
+  shipping_cost: 0,
+  notes: "",
+  cancellation_notes: "",
+};
+
+const route = useRoute();
+const queryClient = useQueryClient();
+const saleServices = useSaleServices();
+const currencyFormatter = useCurrencyFormatter();
+const createSaleMutation = useMutation({
+  mutationFn: async (formValues: CreateSale) => {
+    const { error } = await saleServices.createSale(
+      route.params.orgId.toString(),
+      formValues
+    );
+    notifyIfHasError(error);
+    await queryClient.invalidateQueries({ queryKey: ["sales"] });
+    await queryClient.invalidateQueries({ queryKey: ["products"] });
+    openModel.value = false;
+    analytics.event("create-sale", formValues);
+  },
+});
+
+const formSchema = toTypedSchema(
+  z.object({
+    status: z.enum(SALE_STATUS),
+    sale_date: z.string().datetime(),
+    customer_id: z.string().uuid().optional(),
+    shipping_cost: z.coerce
+      .number({ invalid_type_error: "Ingresa un número válido" })
+      .nonnegative({ message: "Ingrese un número mayor o igual a cero" })
+      .finite()
+      .safe(),
+    notes: z.string().optional(),
+    cancellation_notes: z.string().optional(),
+    products: z
+      .array(
+        z
+          .object({
+            product_id: z.string().uuid(),
+            price: z.coerce
+              .number({ message: "Ingrese un número válido" })
+              .positive({ message: "Ingrese un número positivo" })
+              .finite()
+              .safe(),
+            unit_price: z.coerce
+              .number({ message: "Ingrese un número válido" })
+              .positive({ message: "Ingrese un número positivo" })
+              .finite()
+              .safe(),
+            qty: z.coerce
+              .number({ message: "Ingrese un número válido" })
+              .int("Cantidad debe ser número entero")
+              .positive({ message: "Ingrese un número positivo" })
+              .finite()
+              .safe(),
+            name: z.string(),
+            image_url: z.string().nullish().optional(),
+          })
+          .refine(
+            (data) => {
+              return (
+                data.unit_price < (currencyFormatter.toCents(data.price) ?? 0)
+              );
+            },
+            {
+              message: "Precio de venta debe de ser mayor al precio unitario",
+              path: ["price"],
+            }
+          )
+      )
+      .min(1, "Por favor seleccione al menos un producto"),
+  })
+);
+
+const formInstance = useForm<CreateSale>({
+  initialValues: initialForm,
+  validationSchema: formSchema,
+});
+
+const onSubmit = formInstance.handleSubmit(async (formValues) => {
+  const modifiedProducts = formValues.products.map((formProduct) => ({
+    ...formProduct,
+    price: currencyFormatter.toCents(formProduct.price),
+  }));
+  const nextShippingCost = currencyFormatter.toCents(formValues.shipping_cost);
+
+  const modifiedFormValues = {
+    ...formValues,
+    shipping_cost: nextShippingCost ?? 0,
+    products: modifiedProducts,
+  };
+  createSaleMutation.mutate(modifiedFormValues);
+});
+
+watch(openModel, (nextOpenValue) => {
+  if (!nextOpenValue) return;
+  formInstance.resetForm(
+    {
+      values: {
+        ...initialForm,
+        customer_id: props.activeCustomer?.id,
+        products: props.activeProducts
+          ? Array.from(props.activeProducts.values()).map((product) => ({
+              ...product,
+              price: currencyFormatter.parseRaw(product.price ?? 0),
+            }))
+          : [],
+      },
+    },
+    { force: true }
+  );
+});
+</script>
+
+<template>
+  <Sheet v-model:open="openModel">
+    <SheetContent side="right" class="overflow-y-auto w-100">
+      <SheetHeader>
+        <SheetTitle> Crear venta </SheetTitle>
+        <SheetDescription>
+          Crea rápidamente una nueva venta para tu inventario.
+        </SheetDescription>
+      </SheetHeader>
+      <form @submit="onSubmit" class="flex flex-col gap-6 mt-6 mb-6">
+        <FormField name="customer_id">
+          <FormItem class="flex flex-col">
+            <FormLabel>Cliente</FormLabel>
+            <Button
+              class="h-12"
+              variant="outline"
+              type="button"
+              @click="
+                sidebarManager.openSidebar('customer-picker', { formInstance })
+              "
+            >
+              <span v-if="formInstance.values.customer_id">
+                {{ activeCustomer?.name }} <br />
+                <span class="text-xs">
+                  {{ activeCustomer?.phone }}
+                </span>
+              </span>
+              <span v-else>Seleccionar cliente</span>
+            </Button>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+        <FormField v-slot="{ componentField }" name="notes">
+          <FormItem v-auto-animate>
+            <FormLabel>Notas de venta</FormLabel>
+            <FormControl>
+              <Textarea
+                placeholder="Ingresa notas de la venta"
+                v-bind="componentField"
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="shipping_cost">
+          <FormItem v-auto-animate>
+            <FormLabel>Costo de envio</FormLabel>
+            <FormControl>
+              <Input
+                placeholder="Ingresa el costo de envio"
+                inputmode="numeric"
+                v-bind="componentField"
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField name="products">
+          <FormItem class="flex flex-col">
+            <FormLabel>Productos</FormLabel>
+
+            <Table v-if="formInstance.values.products?.length">
+              <TableHeader>
+                <TableRow>
+                  <TableHead class="w-[100px]"> Producto </TableHead>
+                  <TableHead class="text-center">Cantidad</TableHead>
+                  <TableHead class="text-center">Precio</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                <TableRow
+                  v-for="(productField, idx) in formInstance.values.products"
+                  :key="productField?.product_id ?? idx"
+                >
+                  <TableCell class="font-medium min-w-[80px]">
+                    {{ productField?.name }}
+                  </TableCell>
+                  <TableCell class="text-center">
+                    {{ productField?.qty }}
+                  </TableCell>
+                  <TableCell class="flex justify-center">
+                    <FormField
+                      v-slot="{ componentField }"
+                      :name="`products.${idx}.price`"
+                    >
+                      <FormItem v-auto-animate>
+                        <FormControl>
+                          <Input
+                            inputmode="numeric"
+                            placeholder="Precio"
+                            v-bind="componentField"
+                            class="w-20"
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    </FormField>
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell class="font-medium min-w-[80px]"> </TableCell>
+                  <TableCell class="text-center flex justify-center">
+                    {{
+                      formInstance.values.products.reduce(
+                        (acc, formProduct) =>
+                          acc + Number(formProduct.qty ?? 0),
+                        0
+                      )
+                    }}
+                  </TableCell>
+                  <TableCell class="text-center">
+                    {{
+                      currencyFormatter.parse(
+                        formInstance.values.products.reduce(
+                          (acc, formProduct) =>
+                            acc +
+                            (formProduct.qty ?? 0) *
+                              (currencyFormatter.toCents(formProduct.price) ??
+                                0),
+                          0
+                        ) ?? 0
+                      )
+                    }}
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+
+            <Button
+              v-if="formInstance.values.status === 'in_progress'"
+              type="button"
+              @click="
+                sidebarManager.openSidebar('product-picker', { formInstance })
+              "
+              variant="outline"
+            >
+              <PlusCircleIcon class="w-5 h-5 mr-2" /> Agregar productos
+            </Button>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+        <SheetFooter class="gap-4 sm:gap-0">
+          <Button
+            :disabled="createSaleMutation.isPending.value"
+            type="submit"
+            class="w-full"
+            >Guardar</Button
+          >
+          <Button
+            :disabled="createSaleMutation.isPending.value"
+            @click="openModel = false"
+            variant="outline"
+            type="button"
+            >Cancelar</Button
+          >
+        </SheetFooter>
+      </form>
+    </SheetContent>
+  </Sheet>
+</template>
diff --git a/src/features/sales/components/CustomerPickerSidebar.vue b/src/features/sales/components/CustomerPickerSidebar.vue
new file mode 100644
index 0000000..72c7a49
--- /dev/null
+++ b/src/features/sales/components/CustomerPickerSidebar.vue
@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  Avatar,
+  AvatarFallback,
+  Input,
+  Card,
+  CardContent,
+  Button,
+  CardFooter,
+} from "@/components/ui";
+import { FeedbackCard, useTableStates } from "@/features/global";
+import { UsersIcon } from "lucide-vue-next";
+import { Customer, useCustomersQuery } from "@/features/customers";
+import { ref, toRef } from "vue";
+import { refDebounced, useInfiniteScroll } from "@vueuse/core";
+import { useRoute } from "vue-router";
+
+type Props = {
+  activeCustomer: Customer | null;
+};
+type Emits = {
+  (e: "select", customer: Customer | null): void;
+};
+
+const openModel = defineModel<boolean>("open");
+defineProps<Props>();
+defineEmits<Emits>();
+
+const customersRef = ref<HTMLElement | null>(null);
+const customerSearch = ref("");
+const customerSearchDebounced = refDebounced(customerSearch, 400);
+
+const route = useRoute();
+const customersQuery = useCustomersQuery({
+  options: {
+    enabled: toRef(() => openModel.value),
+    orgId: toRef(() => route.params.orgId.toString()),
+    search: customerSearchDebounced,
+    filters: [{ column: "trust_status", operator: "eq", value: "trusted" }],
+    order: ["name", "asc"],
+  },
+});
+const customersLoadingStates = useTableStates(customersQuery, customerSearch);
+useInfiniteScroll(
+  customersRef,
+  () => {
+    if (customersQuery.isFetching.value) return;
+    customersQuery.fetchNextPage();
+  },
+  { distance: 10, canLoadMore: () => customersQuery.hasNextPage.value }
+);
+</script>
+
+<template>
+  <Sheet v-model:open="openModel">
+    <SheetContent side="right" class="overflow-y-auto w-100">
+      <div ref="customersRef">
+        <SheetHeader class="mb-6">
+          <SheetTitle>Selecciona cliente</SheetTitle>
+          <SheetDescription>
+            Selecciona facilmente un cliente para tu venta
+          </SheetDescription>
+        </SheetHeader>
+        <Input
+          v-model="customerSearch"
+          type="search"
+          placeholder="Busca clientes..."
+        />
+
+        <FeedbackCard
+          v-if="customersLoadingStates.showEmptyState.value"
+          class="my-24"
+        >
+          <template #icon>
+            <UsersIcon class="size-10" />
+          </template>
+          <template #title>No tienes clientes aun</template>
+          <template #description
+            >Cuando tengas clientes agregados se mostraran aqui.
+          </template>
+        </FeedbackCard>
+
+        <div v-else class="grid grid-cols-2 gap-3 mt-4 mb-10">
+          <Card
+            v-for="customer in customersQuery.data.value?.pages.flatMap(
+              (page) => page.data
+            )"
+            :key="customer?.id"
+            class="flex flex-col"
+          >
+            <CardContent class="p-4 text-center">
+              <Avatar>
+                <AvatarFallback>{{
+                  `${customer?.name?.substring(0, 1).toLocaleUpperCase()}`
+                }}</AvatarFallback>
+              </Avatar>
+              <div>
+                <div class="text-sm font-semibold line-clamp-2">
+                  {{ customer?.name ?? "-" }}
+                </div>
+                <div class="text-sm font-normal text-slate-500">
+                  {{ customer?.phone ?? "-" }}
+                </div>
+              </div>
+            </CardContent>
+            <CardFooter class="px-2 pb-2 mt-auto">
+              <Button
+                @click="
+                  $emit('select', customer);
+                  openModel = false;
+                "
+                class="w-full text-left"
+                type="button"
+                :variant="
+                  activeCustomer?.id === customer?.id ? 'default' : 'outline'
+                "
+                >{{
+                  activeCustomer?.id === customer?.id
+                    ? "Seleccionado"
+                    : "Seleccionar"
+                }}</Button
+              >
+            </CardFooter>
+          </Card>
+        </div>
+      </div>
+    </SheetContent>
+  </Sheet>
+</template>
diff --git a/src/features/sales/components/DeleteSaleDialog.vue b/src/features/sales/components/DeleteSaleDialog.vue
index dd6c044..8167836 100644
--- a/src/features/sales/components/DeleteSaleDialog.vue
+++ b/src/features/sales/components/DeleteSaleDialog.vue
@@ -14,21 +14,30 @@ import {
   DrawerHeader,
   DrawerTitle,
 } from "@/components/ui";
-import { Sale } from "../composables";
+import { Sale, useSaleServices } from "../composables";
 import { useMediaQuery } from "@vueuse/core";
+import { useMutation, useQueryClient } from "@tanstack/vue-query";
+import { analytics } from "@/config/analytics";
 
 type DeleteSaleDialogProps = {
-  isLoading?: boolean;
   sale: Sale | null;
 };
 
 const openModel = defineModel<boolean>("open");
-defineProps<DeleteSaleDialogProps>();
-const emit = defineEmits<{
-  (e: "confirmDelete", formValues: Sale | null): void;
-}>();
+const props = defineProps<DeleteSaleDialogProps>();
 
+const queryClient = useQueryClient();
+const saleServices = useSaleServices();
 const isDesktop = useMediaQuery("(min-width: 768px)");
+const deleteSaleMutation = useMutation({ mutationFn: async () => {
+  const saleId = props.sale?.id;
+  if (!saleId) throw new Error('Sale id required to perform delete');
+  await saleServices.deleteSale(saleId);
+  openModel.value = false;
+  await queryClient.invalidateQueries({ queryKey: ['sales'] });
+  await queryClient.invalidateQueries({ queryKey: ['products'] });
+  analytics.event('delete-sale', props.sale);
+} });
 </script>
 
 <template>
@@ -43,15 +52,15 @@ const isDesktop = useMediaQuery("(min-width: 768px)");
       </DialogHeader>
       <DialogFooter>
         <Button
-          :disabled="isLoading"
+          :disabled="deleteSaleMutation.isPending.value"
           type="button"
           variant="destructive"
-          @click="$emit('confirmDelete', sale)"
+          @click="deleteSaleMutation.mutate"
         >
           Si, eliminar
         </Button>
         <Button
-          :disabled="isLoading"
+          :disabled="deleteSaleMutation.isPending.value"
           type="button"
           variant="secondary"
           @click="openModel = false"
@@ -74,15 +83,15 @@ const isDesktop = useMediaQuery("(min-width: 768px)");
         </DrawerHeader>
         <DrawerFooter>
           <Button
-            :disabled="isLoading"
+            :disabled="deleteSaleMutation.isPending.value"
             type="button"
             variant="destructive"
-            @click="$emit('confirmDelete', sale)"
+            @click="deleteSaleMutation.mutate"
           >
             Si, eliminar
           </Button>
           <Button
-            :disabled="isLoading"
+            :disabled="deleteSaleMutation.isPending.value"
             type="button"
             variant="secondary"
             @click="openModel = false"
diff --git a/src/features/sales/components/ProductPickerSidebar.vue b/src/features/sales/components/ProductPickerSidebar.vue
new file mode 100644
index 0000000..7ca206f
--- /dev/null
+++ b/src/features/sales/components/ProductPickerSidebar.vue
@@ -0,0 +1,270 @@
+<script setup lang="ts">
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  Avatar,
+  AvatarFallback,
+  Input,
+  Card,
+  CardContent,
+  Button,
+  CardFooter,
+  AvatarImage,
+  Badge,
+  SheetFooter,
+} from "@/components/ui";
+import { FeedbackCard, useTableStates } from "@/features/global";
+import { MinusIcon, PlusIcon, ShoppingBagIcon } from "lucide-vue-next";
+import { computed, ref, toRef } from "vue";
+import { refDebounced, useInfiniteScroll } from "@vueuse/core";
+import { useRoute } from "vue-router";
+import { Sale } from "../composables";
+import { Product, useProductsQuery } from "@/features/products";
+
+type Props = {
+  sale: Sale | null;
+  activeProducts: Map<
+    string,
+    Pick<
+      Sale["i_sale_products"][number],
+      "product_id" | "price" | "unit_price" | "qty" | "name" | "image_url"
+    >
+  >;
+};
+type Emits = {
+  (e: "select", customer: Props["activeProducts"] | null): void;
+};
+
+const openModel = defineModel<boolean>("open");
+const props = defineProps<Props>();
+defineEmits<Emits>();
+
+const productsRef = ref<HTMLElement | null>(null);
+const productSearch = ref("");
+const productSearchDebounced = refDebounced(productSearch, 400);
+
+const filtersWithSelectedProductIds = computed(
+  () =>
+    props.sale?.i_sale_products
+      .filter((product) => Boolean(product?.product_id))
+      .map((product) => ({
+        column: "id",
+        operator: "eq",
+        value: product.product_id ?? "Unknown",
+        filterType: "or",
+      })) ?? []
+);
+
+const route = useRoute();
+const productsQuery = useProductsQuery({
+  options: {
+    enabled: toRef(() => openModel.value),
+    orgId: toRef(() => route.params?.orgId?.toString()),
+    search: productSearchDebounced,
+    filters: toRef(() => {
+      return [
+        ...filtersWithSelectedProductIds.value,
+        {
+          column: "current_stock",
+          operator: "gt",
+          value: 0,
+          filterType: "or",
+        },
+      ];
+    }),
+    order: ["name", "asc"],
+  },
+});
+const productsLoadingStates = useTableStates(productsQuery, productSearch);
+useInfiniteScroll(
+  productsRef,
+  () => {
+    if (productsQuery.isFetching.value) return;
+    productsQuery.fetchNextPage();
+  },
+  { distance: 10, canLoadMore: () => productsQuery.hasNextPage.value }
+);
+
+function updateProductFormQuantity(product: Product | null, quantity: number) {
+  if (!product) return;
+
+  if (quantity > getMaxIncrementValue(product)) return;
+  if (quantity < 0) return;
+
+  if (quantity === 0) {
+    props.activeProducts?.delete(product.id);
+  } else {
+    props.activeProducts?.set(product.id, {
+      image_url: product.image_url,
+      name: product.name,
+      price:
+        props.activeProducts.get(product.id)?.price ?? product.retail_price,
+      unit_price: product.unit_price,
+      product_id: product.id,
+      qty: quantity,
+    });
+  }
+}
+
+function decrementProductQuantity(product: Product | null) {
+  if (!product) return;
+  const currentQty = getProductQuantityFromForm(product);
+
+  return updateProductFormQuantity(product, currentQty - 1);
+}
+
+function incrementProductQuantity(product: Product | null) {
+  const currentQty = getProductQuantityFromForm(product);
+
+  return updateProductFormQuantity(product, currentQty + 1);
+}
+
+function isDecrementDisabled(product: Product | null) {
+  const maxDecrementValue = 0;
+  const currentQty = getProductQuantityFromForm(product);
+
+  return currentQty <= maxDecrementValue;
+}
+
+function isIncrementDisabled(product: Product | null) {
+  const maxIncrementValue = getMaxIncrementValue(product);
+  const currentQty = getProductQuantityFromForm(product);
+
+  return currentQty >= maxIncrementValue;
+}
+
+function getProductQuantityFromForm(product: Product | null) {
+  if (!product) return 0;
+
+  return props.activeProducts?.get(product.id)?.qty ?? 0;
+}
+
+function getMaxIncrementValue(product: Product | null) {
+  const matchingProduct = props.sale?.i_sale_products.find(
+    (saleProduct) => saleProduct.product_id === product?.id
+  );
+  const initialFormQty = matchingProduct?.qty ?? 0;
+  const currentStock = product?.current_stock ?? 0;
+
+  if (initialFormQty > 0) return currentStock + initialFormQty;
+
+  return currentStock;
+}
+</script>
+
+<template>
+  <Sheet v-model:open="openModel">
+    <SheetContent side="right" class="overflow-y-auto w-100">
+      <div ref="productsRef">
+        <SheetHeader class="mb-6">
+          <SheetTitle>Selecciona productos</SheetTitle>
+          <SheetDescription>
+            Selecciona facilmente productos para agregar a tu venta
+          </SheetDescription>
+        </SheetHeader>
+        <Input
+          v-model="productSearch"
+          type="search"
+          placeholder="Busca productos..."
+        />
+
+        <FeedbackCard
+          v-if="productsLoadingStates.showEmptyState.value"
+          class="my-24"
+        >
+          <template #icon>
+            <ShoppingBagIcon class="size-10" />
+          </template>
+          <template #title>No tienes productos en stock</template>
+          <template #description
+            >Cuando tengas productos en stock se mostraran aqui.
+          </template>
+        </FeedbackCard>
+
+        <div v-else class="grid grid-cols-2 gap-3 mt-4 mb-10">
+          <Card
+            v-for="product in productsQuery.data.value?.pages.flatMap(
+              (page) => page.data
+            )"
+            :key="product?.id"
+            :class="`flex flex-col ${
+              activeProducts?.has(product?.id ?? '') &&
+              'border-black dark:border-white'
+            }`"
+          >
+            <CardContent class="p-4 text-center">
+              <div class="relative">
+                <Avatar>
+                  <AvatarImage :src="product?.image_url ?? ''" />
+                  <AvatarFallback>{{
+                    `${product?.name?.substring(0, 1).toLocaleUpperCase()}`
+                  }}</AvatarFallback>
+                </Avatar>
+                <Badge class="absolute -top-1 -left-1 text-xs">
+                  {{ product?.current_stock }}
+                </Badge>
+              </div>
+              <div class="text-sm font-semibold line-clamp-2">
+                {{ product?.name }}
+              </div>
+            </CardContent>
+            <CardFooter class="px-2 pb-2 mt-auto">
+              <div class="flex gap-1">
+                <Button
+                  :disabled="isDecrementDisabled(product)"
+                  @click="decrementProductQuantity(product)"
+                  class="shrink-0"
+                  variant="outline"
+                  size="icon"
+                >
+                  <MinusIcon class="size-4" />
+                </Button>
+                <Input
+                  class="numeric-input"
+                  :default-value="getProductQuantityFromForm(product)"
+                  :value="getProductQuantityFromForm(product)"
+                  type="number"
+                  @update:model-value="
+                    updateProductFormQuantity(product, Number($event))
+                  "
+                />
+                <Button
+                  :disabled="isIncrementDisabled(product)"
+                  @click="incrementProductQuantity(product)"
+                  class="shrink-0"
+                  variant="outline"
+                  size="icon"
+                >
+                  <PlusIcon class="size-4" />
+                </Button>
+              </div>
+            </CardFooter>
+          </Card>
+        </div>
+
+        <SheetFooter>
+          <Button @click="openModel = false" class="w-full" type="button">
+            Aceptar
+          </Button>
+        </SheetFooter>
+      </div>
+    </SheetContent>
+  </Sheet>
+</template>
+
+<style scoped>
+.numeric-input {
+  text-align: center;
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+  &[type="number"] {
+    -moz-appearance: textfield;
+  }
+}
+</style>
diff --git a/src/features/sales/components/UpdateSaleSidebar.vue b/src/features/sales/components/UpdateSaleSidebar.vue
new file mode 100644
index 0000000..9e1577d
--- /dev/null
+++ b/src/features/sales/components/UpdateSaleSidebar.vue
@@ -0,0 +1,404 @@
+<script setup lang="ts">
+import {
+  Sheet,
+  Button,
+  Input,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  SheetFooter,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormMessage,
+  Textarea,
+  Table,
+  TableHeader,
+  TableRow,
+  TableHead,
+  TableBody,
+  TableCell,
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectItem,
+  SelectContent,
+  SelectGroup,
+} from "@/components/ui";
+import { watch } from "vue";
+import { z } from "zod";
+import { SALE_STATUS, Sale, UpdateSale, useSaleServices } from "../composables";
+import { PlusCircleIcon } from "@heroicons/vue/24/outline";
+import { useCurrencyFormatter } from "@/features/products";
+import { toTypedSchema } from "@vee-validate/zod";
+import { useForm } from "vee-validate";
+import { useMutation, useQueryClient } from "@tanstack/vue-query";
+import { notifyIfHasError, useSidebarManager } from "@/features/global";
+import { analytics } from "@/config/analytics";
+import { useRoute } from "vue-router";
+
+type Props = {
+  sidebarManager: ReturnType<typeof useSidebarManager>;
+  sale?: Sale | null;
+  activeProducts: Map<
+    string,
+    Pick<
+      Sale["i_sale_products"][number],
+      "product_id" | "price" | "unit_price" | "qty" | "name" | "image_url"
+    >
+  >;
+};
+
+const openModel = defineModel<boolean>("open");
+const props = withDefaults(defineProps<Props>(), {
+  sale: null,
+});
+
+const STATUS_OPTIONS = [
+  {
+    value: "in_progress",
+    text: "En progreso",
+    description:
+      "La venta se está procesando activamente, se están seleccionando o empaquetando los artículos.",
+    status: "blue",
+  },
+  {
+    value: "completed",
+    text: "Completada",
+    description: "La venta se ha procesado y completado con éxito.",
+    status: "green",
+  },
+  {
+    value: "cancelled",
+    text: "Cancelada",
+    description:
+      "La venta fue anulada antes de completarse, posiblemente a solicitud del cliente u otras razones.",
+    status: "red",
+  },
+];
+
+const initialForm: UpdateSale = {
+  sale_id: "",
+  status: "in_progress",
+  sale_date: new Date().toISOString(),
+  products: [],
+  shipping_cost: 0,
+  notes: "",
+  cancellation_notes: "",
+};
+
+const route = useRoute();
+const queryClient = useQueryClient();
+const saleServices = useSaleServices();
+const currencyFormatter = useCurrencyFormatter();
+const updateSaleMutation = useMutation({
+  mutationFn: async (formValues: UpdateSale) => {
+    const saleId = formValues.sale_id;
+    if (!saleId) throw new Error("Sale id required to perform update");
+    const { error } = await saleServices.updateSale(
+      route.params.orgId.toString(),
+      formValues
+    );
+    notifyIfHasError(error);
+    await queryClient.invalidateQueries({ queryKey: ["sales"] });
+    await queryClient.invalidateQueries({ queryKey: ["products"] });
+    openModel.value = false;
+    analytics.event("update-sale", formValues);
+  },
+});
+
+const formSchema = toTypedSchema(
+  z.object({
+    sale_id: z.string().uuid(),
+    status: z.enum(SALE_STATUS),
+    sale_date: z.string().datetime(),
+    customer_id: z.string().uuid().optional(),
+    shipping_cost: z.coerce
+      .number({ invalid_type_error: "Ingresa un número válido" })
+      .nonnegative({ message: "Ingrese un número mayor o igual a cero" })
+      .finite()
+      .safe(),
+    notes: z.string().optional(),
+    cancellation_notes: z.string().optional(),
+    products: z
+      .array(
+        z
+          .object({
+            product_id: z.string().uuid(),
+            price: z.coerce
+              .number({ message: "Ingrese un número válido" })
+              .positive({ message: "Ingrese un número positivo" })
+              .finite()
+              .safe(),
+            unit_price: z.coerce
+              .number({ message: "Ingrese un número válido" })
+              .positive({ message: "Ingrese un número positivo" })
+              .finite()
+              .safe(),
+            qty: z.coerce
+              .number({ message: "Ingrese un número válido" })
+              .int("Cantidad debe ser número entero")
+              .positive({ message: "Ingrese un número positivo" })
+              .finite()
+              .safe(),
+            name: z.string(),
+            image_url: z.string().nullish().optional(),
+          })
+          .refine(
+            (data) => {
+              return (
+                data.unit_price < (currencyFormatter.toCents(data.price) ?? 0)
+              );
+            },
+            {
+              message: "Precio de venta debe de ser mayor al precio unitario",
+              path: ["price"],
+            }
+          )
+      )
+      .min(1, "Por favor seleccione al menos un producto"),
+  })
+);
+
+const formInstance = useForm<UpdateSale>({
+  initialValues: initialForm,
+  validationSchema: formSchema,
+});
+
+const onSubmit = formInstance.handleSubmit(async (formValues) => {
+  const modifiedProducts = formValues.products.map((formProduct) => ({
+    ...formProduct,
+    price: currencyFormatter.toCents(formProduct.price),
+  }));
+  const nextShippingCost = currencyFormatter.toCents(formValues.shipping_cost);
+
+  const modifiedFormValues = {
+    ...formValues,
+    shipping_cost: nextShippingCost ?? 0,
+    products: (() => {
+      if (formValues.status === "cancelled") {
+        return props.sale?.i_sale_products ?? [];
+      }
+
+      return modifiedProducts;
+    })(),
+  };
+  updateSaleMutation.mutate(modifiedFormValues);
+});
+
+watch(openModel, (nextOpenValue) => {
+  if (nextOpenValue && props.sale) {
+    if (!props.activeProducts.size) {
+      props.sale?.i_sale_products.forEach((saleProduct) => {
+        if (!saleProduct.product_id) return;
+
+        props.activeProducts.set(saleProduct.product_id, {
+          image_url: saleProduct.image_url,
+          name: saleProduct.name,
+          price: saleProduct.price,
+          product_id: saleProduct.product_id,
+          qty: saleProduct.qty,
+          unit_price: saleProduct.unit_price,
+        });
+      });
+    }
+
+    formInstance.resetForm(
+      {
+        values: {
+          sale_id: props.sale?.id,
+          notes: props.sale?.notes ?? "",
+          products: props.activeProducts
+            ? Array.from(props.activeProducts.values()).map((product) => ({
+                ...product,
+                price: currencyFormatter.parseRaw(product.price ?? 0),
+              }))
+            : [],
+          customer_id: props.sale?.customer_id ?? undefined,
+          sale_date: props.sale?.sale_date
+            ? new Date(props.sale.sale_date).toISOString()
+            : new Date().toISOString(),
+          shipping_cost:
+            currencyFormatter.parseRaw(props.sale?.shipping_cost) ?? 0,
+          status: props.sale?.status ?? "in_progress",
+        },
+      },
+      { force: true }
+    );
+  }
+});
+</script>
+
+<template>
+  <Sheet v-model:open="openModel">
+    <SheetContent side="right" class="overflow-y-auto w-100">
+      <SheetHeader>
+        <SheetTitle> Actualizar venta </SheetTitle>
+        <SheetDescription>
+          Actualiza rápidamente una venta de tu inventario.
+        </SheetDescription>
+      </SheetHeader>
+      <form @submit="onSubmit" class="flex flex-col gap-6 mt-6 mb-6">
+        <FormField v-slot="{ componentField }" name="status">
+          <FormItem v-auto-animate>
+            <FormLabel>Status de venta</FormLabel>
+            <Select v-bind="componentField">
+              <FormControl>
+                <SelectTrigger>
+                  <SelectValue placeholder="Seleccione status de venta" />
+                </SelectTrigger>
+              </FormControl>
+              <SelectContent>
+                <SelectGroup>
+                  <SelectItem
+                    v-for="(status, index) in STATUS_OPTIONS"
+                    :value="status.value"
+                    :key="index"
+                  >
+                    {{ status.text }}
+                  </SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+        <FormField v-slot="{ componentField }" name="notes">
+          <FormItem v-auto-animate>
+            <FormLabel>Notas de venta</FormLabel>
+            <FormControl>
+              <Textarea
+                placeholder="Ingresa notas de la venta"
+                v-bind="componentField"
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField v-slot="{ componentField }" name="shipping_cost">
+          <FormItem v-auto-animate>
+            <FormLabel>Costo de envio</FormLabel>
+            <FormControl>
+              <Input
+                placeholder="Ingresa el costo de envio"
+                inputmode="numeric"
+                v-bind="componentField"
+              />
+            </FormControl>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+
+        <FormField name="products">
+          <FormItem class="flex flex-col">
+            <FormLabel>Productos</FormLabel>
+
+            <Table v-if="formInstance.values.products?.length">
+              <TableHeader>
+                <TableRow>
+                  <TableHead class="w-[100px]"> Producto </TableHead>
+                  <TableHead class="text-center">Cantidad</TableHead>
+                  <TableHead class="text-center">Precio</TableHead>
+                </TableRow>
+              </TableHeader>
+              <TableBody>
+                <TableRow
+                  v-for="(productField, idx) in formInstance.values.products"
+                  :key="productField?.product_id ?? idx"
+                >
+                  <TableCell class="font-medium min-w-[80px]">
+                    {{ productField?.name }}
+                  </TableCell>
+                  <TableCell class="text-center">
+                    {{ productField?.qty }}
+                  </TableCell>
+                  <TableCell class="flex justify-center">
+                    <FormField
+                      v-slot="{ componentField }"
+                      :name="`products.${idx}.price`"
+                    >
+                      <FormItem v-auto-animate>
+                        <FormControl>
+                          <Input
+                            inputmode="numeric"
+                            placeholder="Precio"
+                            v-bind="componentField"
+                            class="w-20"
+                            @input="
+                              productField.product_id &&
+                                activeProducts.set(productField.product_id, {
+                                  ...productField,
+                                  price: currencyFormatter.toCents(
+                                    productField.price
+                                  ),
+                                })
+                            "
+                          />
+                        </FormControl>
+                        <FormMessage />
+                      </FormItem>
+                    </FormField>
+                  </TableCell>
+                </TableRow>
+                <TableRow>
+                  <TableCell class="font-medium min-w-[80px]"> </TableCell>
+                  <TableCell class="text-center flex justify-center">
+                    {{
+                      formInstance.values.products.reduce(
+                        (acc, formProduct) =>
+                          acc + Number(formProduct.qty ?? 0),
+                        0
+                      )
+                    }}
+                  </TableCell>
+                  <TableCell class="text-center">
+                    {{
+                      currencyFormatter.parse(
+                        formInstance.values.products.reduce(
+                          (acc, formProduct) =>
+                            acc +
+                            (formProduct.qty ?? 0) *
+                              (currencyFormatter.toCents(formProduct.price) ??
+                                0),
+                          0
+                        ) ?? 0
+                      )
+                    }}
+                  </TableCell>
+                </TableRow>
+              </TableBody>
+            </Table>
+
+            <Button
+              v-if="formInstance.values.status === 'in_progress'"
+              type="button"
+              @click="sidebarManager.openSidebar('product-picker')"
+              variant="outline"
+            >
+              <PlusCircleIcon class="w-5 h-5 mr-2" /> Agregar productos
+            </Button>
+            <FormMessage />
+          </FormItem>
+        </FormField>
+        <SheetFooter class="gap-4 sm:gap-0">
+          <Button
+            :disabled="updateSaleMutation.isPending.value"
+            type="submit"
+            class="w-full"
+            >Guardar</Button
+          >
+          <Button
+            :disabled="updateSaleMutation.isPending.value"
+            @click="openModel = false"
+            variant="outline"
+            type="button"
+            >Cancelar</Button
+          >
+        </SheetFooter>
+      </form>
+    </SheetContent>
+  </Sheet>
+</template>
diff --git a/src/features/sales/components/ViewSaleSidebar.vue b/src/features/sales/components/ViewSaleSidebar.vue
new file mode 100644
index 0000000..d70e1bb
--- /dev/null
+++ b/src/features/sales/components/ViewSaleSidebar.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetDescription,
+  Avatar,
+  AvatarFallback,
+  Table,
+  TableHeader,
+  TableRow,
+  TableHead,
+  TableBody,
+  TableCell,
+  Badge,
+} from "@/components/ui";
+import { Sale } from "../composables";
+import { useCurrencyFormatter } from "@/features/products";
+
+type ViewSaleSidebarProps = {
+  sale?: Sale | null;
+};
+
+const openModel = defineModel<boolean>("open");
+withDefaults(defineProps<ViewSaleSidebarProps>(), {
+  sale: null,
+});
+
+const WHATSAPP_URL = import.meta.env.VITE_WHATSAPP_URL;
+
+const currencyFormatter = useCurrencyFormatter();
+</script>
+
+<template>
+  <Sheet v-model:open="openModel">
+    <SheetContent side="right" class="overflow-y-auto w-100">
+      <SheetHeader>
+        <SheetTitle>
+          Detalle de venta
+          <Badge>{{ sale?.status?.toUpperCase() }}</Badge>
+        </SheetTitle>
+        <SheetDescription> Ve más a detalle tu venta </SheetDescription>
+      </SheetHeader>
+
+      <div class="flex flex-col gap-6 mt-6">
+        <div>
+          <div class="font-medium text-sm tracking-tight text-foreground">
+            Cliente
+          </div>
+          <div class="flex items-center text-slate-900 dark:text-white">
+            <Avatar>
+              <AvatarFallback>{{
+                `${sale?.i_customers?.name
+                  ?.substring(0, 1)
+                  .toLocaleUpperCase()}`
+              }}</AvatarFallback>
+            </Avatar>
+            <div class="ps-3">
+              <div class="text-base font-semibold">
+                {{ sale?.i_customers?.name }}
+              </div>
+              <div
+                v-if="sale?.i_customers?.phone"
+                class="font-normal text-slate-500"
+              >
+                <a
+                  :href="`${WHATSAPP_URL}/${sale.i_customers.phone}`"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  class="block"
+                >
+                  {{ sale.i_customers.phone }}
+                </a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-if="sale?.notes">
+          <div class="font-medium text-sm tracking-tight text-foreground">
+            Notas
+          </div>
+          <div class="flex items-center text-slate-900 dark:text-white">
+            {{ sale?.notes }}
+          </div>
+        </div>
+        <div v-if="sale?.shipping_cost">
+          <div class="font-medium text-sm tracking-tight text-foreground">
+            Costo de envio
+          </div>
+          <div class="flex items-center text-slate-900 dark:text-white">
+            {{ currencyFormatter.parse(sale?.shipping_cost) }}
+          </div>
+        </div>
+        <div>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead class="w-[100px]"> Producto </TableHead>
+                <TableHead class="text-center">Cantidad</TableHead>
+                <TableHead class="text-center">Precio</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <TableRow
+                v-for="(saleProduct, idx) in sale?.i_sale_products"
+                :key="saleProduct?.id ?? idx"
+              >
+                <TableCell class="font-medium min-w-[80px]">
+                  {{ saleProduct?.name }}
+                </TableCell>
+                <TableCell class="text-center flex justify-center">
+                  {{ saleProduct.qty }}
+                </TableCell>
+                <TableCell class="text-center">
+                  {{
+                    currencyFormatter.parse(
+                      (saleProduct.price ?? 0) * (saleProduct.qty ?? 0)
+                    )
+                  }}
+                </TableCell>
+              </TableRow>
+              <TableRow>
+                <TableCell class="font-medium min-w-[80px]"> </TableCell>
+                <TableCell class="text-center flex justify-center">
+                  {{
+                    sale?.i_sale_products.reduce(
+                      (acc, saleProduct) => acc + (saleProduct.qty ?? 0),
+                      0
+                    )
+                  }}
+                </TableCell>
+                <TableCell class="text-center">
+                  {{
+                    currencyFormatter.parse(
+                      sale?.i_sale_products.reduce(
+                        (acc, saleProduct) =>
+                          acc +
+                          (saleProduct.qty ?? 0) * (saleProduct.price ?? 0),
+                        0
+                      ) ?? 0
+                    )
+                  }}
+                </TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+          <div
+            v-if="sale?.created_at"
+            class="text-muted-foreground text-xs mt-4"
+          >
+            Creado el
+            {{
+              new Date(sale.created_at).toLocaleDateString("es-MX", {
+                year: "numeric",
+                month: "long",
+                day: "numeric",
+              })
+            }}
+          </div>
+        </div>
+      </div>
+    </SheetContent>
+  </Sheet>
+</template>
diff --git a/src/features/sales/components/index.ts b/src/features/sales/components/index.ts
index 4dea633..7001bb4 100644
--- a/src/features/sales/components/index.ts
+++ b/src/features/sales/components/index.ts
@@ -1,3 +1,5 @@
-export { default as CreateOrEditSidebar } from "./CreateOrEditSidebar.vue";
 export { default as DeleteSaleDialog } from "./DeleteSaleDialog.vue";
 export { default as TodaySalesSidebar } from "./TodaySalesSidebar.vue";
+export { default as ViewSaleSidebar } from "./ViewSaleSidebar.vue";
+export { default as CreateSaleSidebar } from "./CreateSaleSidebar.vue";
+export { default as UpdateSaleSidebar } from "./UpdateSaleSidebar.vue";
diff --git a/src/features/sales/composables/useSaleServices.ts b/src/features/sales/composables/useSaleServices.ts
index f371263..fe29be9 100644
--- a/src/features/sales/composables/useSaleServices.ts
+++ b/src/features/sales/composables/useSaleServices.ts
@@ -74,7 +74,7 @@ export function useSaleServices() {
     if (!orgId)
       throw new Error('Organization is required to create a sale'); 
 
-    await supabase.rpc('create_sale', {
+    return await supabase.rpc('create_sale', {
       ...formValues,
       organization_id: orgId,
     });
@@ -84,7 +84,7 @@ export function useSaleServices() {
     if (!orgId)
       throw new Error('Organization is required to update a sale');
 
-    await supabase.rpc('update_sale', {
+    return await supabase.rpc('update_sale', {
       cancellation_notes_input: formValues.cancellation_notes,
       notes_input: formValues.notes,
       customer_id_input: formValues.customer_id,
diff --git a/src/pages/org/customers.vue b/src/pages/org/customers.vue
index 3c936ea..6665f38 100644
--- a/src/pages/org/customers.vue
+++ b/src/pages/org/customers.vue
@@ -1,12 +1,10 @@
 <script setup lang="ts">
 import {
-  CreateOrEditSidebar,
-  CreateCustomer,
   Customer,
-  UpdateCustomer,
-  customerServicesTypeguards,
-  useCustomerServices,
   DeleteCustomerDialog,
+  CreateCustomerSidebar,
+  useCustomersQuery,
+  UpdateCustomerSidebar,
 } from "@/features/customers";
 import { ref, toRef, watchEffect } from "vue";
 import { FeedbackCard, useTableOrder, useTableStates } from "@/features/global";
@@ -39,17 +37,14 @@ import {
 } from "@heroicons/vue/24/outline";
 import { refDebounced, useInfiniteScroll } from "@vueuse/core";
 import { useOrganizationStore } from "@/stores";
-import { useCustomersQuery } from "@/features/customers/composables/useCustomerQueries";
-import { useMutation, useQueryClient } from "@tanstack/vue-query";
-import { analytics } from "@/config/analytics";
-import { notifyIfHasError } from "@/features/global/utils";
 import { useRoute } from "vue-router";
 
 const WHATSAPP_URL = import.meta.env.VITE_WHATSAPP_URL;
 const tableRef = ref<HTMLElement | null>(null);
 const customerSearch = ref("");
 const customerSearchDebounced = refDebounced(customerSearch, 400);
-const isCreateOrUpdateSidebarOpen = ref(false);
+const isCreateSidebarOpen = ref(false);
+const isUpdateSidebarOpen = ref(false);
 const isDeleteCustomerDialogOpen = ref(false);
 const activeCustomer = ref<Customer | null>(null);
 
@@ -59,18 +54,8 @@ const customersTableOrder = useTableOrder({
   },
 });
 const route = useRoute();
-const queryClient = useQueryClient();
 const organizationStore = useOrganizationStore();
-const customerServices = useCustomerServices();
-const createCustomerMutation = useMutation({
-  mutationFn: createCustomerMutationFn,
-});
-const updateCustomerMutation = useMutation({
-  mutationFn: updateCustomerMutationFn,
-});
-const deleteCustomerMutation = useMutation({
-  mutationFn: deleteCustomerMutationFn,
-});
+
 const customersQuery = useCustomersQuery({
   options: {
     orgId: toRef(() => route.params.orgId.toString()),
@@ -94,48 +79,9 @@ function openDeleteCustomerDialog(customer: Customer) {
   isDeleteCustomerDialogOpen.value = true;
 }
 
-function handleSaveSidebar(formValues: CreateCustomer | UpdateCustomer) {
-  if (customerServicesTypeguards.isCreateCustomer(formValues)) {
-    createCustomerMutation.mutate(formValues);
-  } else {
-    updateCustomerMutation.mutate(formValues);
-  }
-  isCreateOrUpdateSidebarOpen.value = false;
-}
-
 function openUpdateCustomerSidebar(customer: Customer) {
   activeCustomer.value = customer;
-  isCreateOrUpdateSidebarOpen.value = true;
-}
-
-async function createCustomerMutationFn(formValues: CreateCustomer) {
-  const { error } = await customerServices.createCustomer(
-    route.params.orgId.toString(),
-    formValues
-  );
-  notifyIfHasError(error);
-  await queryClient.invalidateQueries({ queryKey: ["customers"] });
-  analytics.event("create-customer", formValues);
-}
-async function updateCustomerMutationFn(formValues: UpdateCustomer) {
-  const customerId = formValues.customer_id;
-  if (!customerId) throw new Error("Customer id required to perform update");
-  const { error } = await customerServices.updateCustomer(
-    route.params.orgId.toString(),
-    formValues
-  );
-  notifyIfHasError(error);
-  await queryClient.invalidateQueries({ queryKey: ["customers"] });
-  analytics.event("update-customer", formValues);
-}
-async function deleteCustomerMutationFn() {
-  const customerId = activeCustomer.value?.id;
-  if (!customerId) throw new Error("Customer id required to perform delete");
-  const { error } = await customerServices.deleteCustomer(customerId);
-  notifyIfHasError(error);
-  isDeleteCustomerDialogOpen.value = false;
-  await queryClient.invalidateQueries({ queryKey: ["customers"] });
-  analytics.event("delete-customer", activeCustomer.value ?? {});
+  isUpdateSidebarOpen.value = true;
 }
 
 function getBadgeColorFromStatus(status: Customer["trust_status"]) {
@@ -150,8 +96,9 @@ function getBadgeColorFromStatus(status: Customer["trust_status"]) {
 }
 
 watchEffect(() => {
+  if (isCreateSidebarOpen.value) return;
+  if (isUpdateSidebarOpen.value) return;
   if (isDeleteCustomerDialogOpen.value) return;
-  if (isCreateOrUpdateSidebarOpen.value) return;
 
   activeCustomer.value = null;
 });
@@ -176,7 +123,7 @@ watchEffect(() => {
       <div class="hidden lg:flex gap-2">
         <Button
           :disabled="!organizationStore.canAddCustomers"
-          @click="isCreateOrUpdateSidebarOpen = true"
+          @click="isCreateSidebarOpen = true"
           label=""
         >
           <PlusIcon class="w-5 h-5 stroke-[2px] mr-2" /> Crear cliente
@@ -195,7 +142,7 @@ watchEffect(() => {
       <div class="flex lg:hidden gap-2">
         <Button
           :disabled="!organizationStore.canAddCustomers"
-          @click="isCreateOrUpdateSidebarOpen = true"
+          @click="isCreateSidebarOpen = true"
           label=""
           size="icon"
         >
@@ -391,7 +338,10 @@ watchEffect(() => {
           Comienza creando la primera cliente.
         </template>
         <template #action
-          ><Button @click="isCreateOrUpdateSidebarOpen = true">
+          ><Button
+            :disabled="!organizationStore.canAddCustomers"
+            @click="isCreateSidebarOpen = true"
+          >
             <PlusIcon class="w-5 h-5 stroke-[2px] mr-2" /> Crear cliente
           </Button>
         </template>
@@ -416,7 +366,7 @@ watchEffect(() => {
             </Button>
             <Button
               :disabled="!organizationStore.canAddCustomers"
-              @click="isCreateOrUpdateSidebarOpen = true"
+              @click="isCreateSidebarOpen = true"
             >
               <PlusIcon class="w-5 h-5 stroke-[2px] mr-2" /> Crear cliente
             </Button>
@@ -425,21 +375,14 @@ watchEffect(() => {
       </FeedbackCard>
     </div>
 
-    <DeleteCustomerDialog
-      v-model:open="isDeleteCustomerDialogOpen"
+    <CreateCustomerSidebar v-model:open="isCreateSidebarOpen" />
+    <UpdateCustomerSidebar
+      v-model:open="isUpdateSidebarOpen"
       :customer="activeCustomer"
-      :isLoading="deleteCustomerMutation.isPending.value"
-      @confirmDelete="deleteCustomerMutation.mutate"
     />
-
-    <CreateOrEditSidebar
-      v-model:open="isCreateOrUpdateSidebarOpen"
+    <DeleteCustomerDialog
+      v-model:open="isDeleteCustomerDialogOpen"
       :customer="activeCustomer"
-      :isLoading="
-        updateCustomerMutation.isPending.value ||
-        createCustomerMutation.isPending.value
-      "
-      @save="handleSaveSidebar"
     />
   </div>
 </template>
diff --git a/src/pages/org/products.vue b/src/pages/org/products.vue
index f89f87f..ecbb989 100644
--- a/src/pages/org/products.vue
+++ b/src/pages/org/products.vue
@@ -1,17 +1,14 @@
 <script setup lang="ts">
 import {
   AddStockDialog,
-  CreateOrEditSidebar,
-  CreateProduct,
+  CreateProductSidebar,
   DeleteProductDialog,
   Product,
   ProductImageDialog,
   ProductStockHistorySidebar,
   ShareStockDialog,
-  UpdateProduct,
-  productServicesTypeguards,
+  UpdateProductSidebar,
   useCurrencyFormatter,
-  useProductServices,
 } from "@/features/products";
 import { ref, toRef, watchEffect } from "vue";
 import {
@@ -53,9 +50,7 @@ import {
 import { refDebounced, useInfiniteScroll, useStorage } from "@vueuse/core";
 import { useOrganizationStore } from "@/stores";
 import { useProductsQuery } from "@/features/products/composables/useProductQueries";
-import { useMutation, useQueryClient } from "@tanstack/vue-query";
 import { FeedbackCard, useTableOrder, useTableStates } from "@/features/global";
-import { analytics } from "@/config/analytics";
 import { useRoute } from "vue-router";
 import { HistoryIcon } from "lucide-vue-next";
 
@@ -66,7 +61,8 @@ const productSearchDebounced = refDebounced(productSearch, 400);
 const tableFiltersRef = useStorage<{
   status: "in_stock" | "out_of_stock" | "all";
 }>("products-table-filters", { status: "all" });
-const isCreateOrUpdateSidebarOpen = ref(false);
+const isCreateProductSidebarOpen = ref(false);
+const isUpdateProductSidebarOpen = ref(false);
 const isDeleteProductDialogOpen = ref(false);
 const isShareStockDialogOpen = ref(false);
 const isAddStockDialogOpen = ref(false);
@@ -79,18 +75,7 @@ const productsTableOrder = useTableOrder({
   },
 });
 const route = useRoute();
-const queryClient = useQueryClient();
 const organizationStore = useOrganizationStore();
-const productServices = useProductServices();
-const createProductMutation = useMutation({
-  mutationFn: createProductMutationFn,
-});
-const updateProductMutation = useMutation({
-  mutationFn: updateProductMutationFn,
-});
-const deleteProductMutation = useMutation({
-  mutationFn: deleteProductMutationFn,
-});
 
 const currencyFormatter = useCurrencyFormatter();
 const productsQuery = useProductsQuery({
@@ -137,19 +122,9 @@ function openDeleteProductDialog(product: Product) {
   isDeleteProductDialogOpen.value = true;
 }
 
-function handleSaveModal(formValues: CreateProduct | UpdateProduct) {
-  if (productServicesTypeguards.isCreateProduct(formValues)) {
-    createProductMutation.mutate(formValues);
-  } else {
-    updateProductMutation.mutate(formValues);
-  }
-  isCreateOrUpdateSidebarOpen.value = false;
-  isAddStockDialogOpen.value = false;
-}
-
 function openUpdateProductSidebar(product: Product) {
   activeProduct.value = product;
-  isCreateOrUpdateSidebarOpen.value = true;
+  isUpdateProductSidebarOpen.value = true;
 }
 
 function openAddStockDialog(product: Product) {
@@ -157,37 +132,11 @@ function openAddStockDialog(product: Product) {
   isAddStockDialogOpen.value = true;
 }
 
-async function createProductMutationFn(formValues: CreateProduct) {
-  await productServices.createProduct(
-    route.params.orgId.toString(),
-    formValues
-  );
-  await queryClient.invalidateQueries({ queryKey: ["products"] });
-  analytics.event("create-product", formValues);
-}
-async function updateProductMutationFn(formValues: UpdateProduct) {
-  const productId = formValues.product_id;
-  if (!productId) throw new Error("Product id required to perform update");
-  await productServices.updateProduct({
-    ...formValues,
-    product_id: productId,
-  });
-  await queryClient.invalidateQueries({ queryKey: ["products"] });
-  analytics.event("update-product", formValues);
-}
-async function deleteProductMutationFn(product: Product | null) {
-  const productId = product?.id;
-  if (!productId) throw new Error("Product id required to perform delete");
-  await productServices.deleteProduct(productId);
-  isDeleteProductDialogOpen.value = false;
-  await queryClient.invalidateQueries({ queryKey: ["products"] });
-  analytics.event("delete-product", product);
-}
-
 watchEffect(() => {
   if (isDeleteProductDialogOpen.value) return;
   if (isAddStockDialogOpen.value) return;
-  if (isCreateOrUpdateSidebarOpen.value) return;
+  if (isCreateProductSidebarOpen.value) return;
+  if (isUpdateProductSidebarOpen.value) return;
   if (isProductImageDialogOpen.value) return;
   if (isProductStockHistorySidebarOpen.value) return;
 
@@ -214,7 +163,7 @@ watchEffect(() => {
       <div class="hidden lg:flex gap-2">
         <Button
           :disabled="!organizationStore.canAddProducts"
-          @click="isCreateOrUpdateSidebarOpen = true"
+          @click="isCreateProductSidebarOpen = true"
         >
           <PlusIcon class="w-5 h-5 stroke-[2px] mr-2" /> Crear producto
         </Button>
@@ -267,7 +216,7 @@ watchEffect(() => {
       <div class="flex lg:hidden gap-2">
         <Button
           :disabled="!organizationStore.canAddProducts"
-          @click="isCreateOrUpdateSidebarOpen = true"
+          @click="isCreateProductSidebarOpen = true"
           size="icon"
         >
           <PlusIcon class="w-5 h-5 stroke-[2px]" />
@@ -495,7 +444,7 @@ watchEffect(() => {
         <template #action
           ><Button
             :disabled="!organizationStore.canAddProducts"
-            @click="isCreateOrUpdateSidebarOpen = true"
+            @click="isCreateProductSidebarOpen = true"
           >
             <PlusIcon class="w-5 h-5 stroke-[2px] mr-2" /> Crear producto
           </Button>
@@ -519,7 +468,10 @@ watchEffect(() => {
             <Button @click="productSearch = ''" variant="outline">
               Clear search
             </Button>
-            <Button @click="isCreateOrUpdateSidebarOpen = true">
+            <Button
+              :disabled="!organizationStore.canAddProducts"
+              @click="isCreateProductSidebarOpen = true"
+            >
               <PlusIcon class="w-5 h-5 stroke-[2px] mr-2" /> Crear producto
             </Button>
           </div>
@@ -530,28 +482,20 @@ watchEffect(() => {
     <DeleteProductDialog
       v-model:open="isDeleteProductDialogOpen"
       :product="activeProduct"
-      :isLoading="deleteProductMutation.isPending.value"
-      @confirmDelete="deleteProductMutation.mutate"
     />
     <ShareStockDialog v-model:open="isShareStockDialogOpen" />
     <ProductStockHistorySidebar
       v-model:open="isProductStockHistorySidebarOpen"
       :product="activeProduct"
     />
-    <CreateOrEditSidebar
-      v-model:open="isCreateOrUpdateSidebarOpen"
+    <CreateProductSidebar v-model:open="isCreateProductSidebarOpen" />
+    <UpdateProductSidebar
+      v-model:open="isUpdateProductSidebarOpen"
       :product="activeProduct"
-      :isLoading="
-        updateProductMutation.isPending.value ||
-        createProductMutation.isPending.value
-      "
-      @save="handleSaveModal"
     />
     <AddStockDialog
       v-model:open="isAddStockDialogOpen"
       :product="activeProduct"
-      :isLoading="updateProductMutation.isPending.value"
-      @save="handleSaveModal"
     />
     <ProductImageDialog
       v-model:open="isProductImageDialogOpen"
diff --git a/src/pages/org/sales.vue b/src/pages/org/sales.vue
index b468b58..ac5e80f 100644
--- a/src/pages/org/sales.vue
+++ b/src/pages/org/sales.vue
@@ -1,15 +1,13 @@
 <script setup lang="ts">
 import {
-  CreateOrEditSidebar,
-  CreateSale,
+  CreateSaleSidebar,
   DeleteSaleDialog,
   Sale,
   TodaySalesSidebar,
-  UpdateSale,
-  saleServicesTypeguards,
-  useSaleServices,
-} from '@/features/sales';
-import { ref, toRef, watchEffect } from 'vue';
+  UpdateSaleSidebar,
+  ViewSaleSidebar,
+} from "@/features/sales";
+import { ref, toRef, watchEffect } from "vue";
 import {
   Button,
   Input,
@@ -35,7 +33,7 @@ import {
   TooltipTrigger,
   TooltipContent,
   Badge,
-} from '@/components/ui';
+} from "@/components/ui";
 import {
   BanknotesIcon,
   EyeIcon,
@@ -44,42 +42,55 @@ import {
   TrashIcon,
   FunnelIcon,
   ShoppingBagIcon,
-} from '@heroicons/vue/24/outline';
-import { refDebounced, useInfiniteScroll, useStorage } from '@vueuse/core';
-import { useOrganizationStore } from '@/stores';
-import { useSalesQuery } from '@/features/sales/composables/useSaleQueries';
-import { useMutation, useQueryClient } from '@tanstack/vue-query';
-import { useCurrencyFormatter } from '@/features/products';
-import { FeedbackCard, useTableStates } from '@/features/global';
-import { Tables } from '../../../types_db';
-import { useDashboardDates } from '@/features/dashboard';
-import { analytics } from '@/config/analytics';
-import { useRoute } from 'vue-router';
+} from "@heroicons/vue/24/outline";
+import { refDebounced, useInfiniteScroll, useStorage } from "@vueuse/core";
+import { useOrganizationStore } from "@/stores";
+import { useSalesQuery } from "@/features/sales/composables/useSaleQueries";
+import { useCurrencyFormatter } from "@/features/products";
+import {
+  FeedbackCard,
+  useSidebarManager,
+  useTableStates,
+} from "@/features/global";
+import { Tables } from "../../../types_db";
+import { useDashboardDates } from "@/features/dashboard";
+import { useRoute } from "vue-router";
+import CustomerPickerSidebar from "@/features/sales/components/CustomerPickerSidebar.vue";
+import { Customer } from "@/features/customers";
+import ProductPickerSidebar from "@/features/sales/components/ProductPickerSidebar.vue";
 
 const WHATSAPP_URL = import.meta.env.VITE_WHATSAPP_URL;
 const tableFiltersRef = useStorage<{
-  status: NonNullable<Tables<'i_sales'>['status']> | 'all';
-  period?: 'daily' | 'weekly' | 'monthly';
-}>('sales-table-filters', { status: 'all' });
+  status: NonNullable<Tables<"i_sales">["status"]> | "all";
+  period?: "daily" | "weekly" | "monthly";
+}>("sales-table-filters", { status: "all" });
 const dashboardDates = useDashboardDates({
   period: toRef(() => tableFiltersRef.value.period),
 });
 const tableRef = ref<HTMLElement | null>(null);
-const saleSearch = ref('');
+const saleSearch = ref("");
 const saleSearchDebounced = refDebounced(saleSearch, 400);
+const isViewSaleSidebarOpen = ref(false);
 const isTodaySalesSidebarOpen = ref(false);
-const isCreateOrUpdateSidebarOpen = ref(false);
-const isSaleSidebarViewOnly = ref(false);
+const isCreateSaleSidebarOpen = ref(false);
+const isUpdateSaleSidebarOpen = ref(false);
 const isDeleteSaleDialogOpen = ref(false);
 const activeSale = ref<Sale | null>(null);
+const activeCustomer = ref<Customer | null>(null);
+const activeProducts = ref<
+  Map<
+    string,
+    Pick<
+      Sale["i_sale_products"][number],
+      "product_id" | "price" | "unit_price" | "qty" | "name" | "image_url"
+    >
+  >
+>(new Map());
 
+const sidebarManager = useSidebarManager();
 const route = useRoute();
-const queryClient = useQueryClient();
 const organizationStore = useOrganizationStore();
-const saleServices = useSaleServices();
-const createSaleMutation = useMutation({ mutationFn: createSaleMutationFn });
-const updateSaleMutation = useMutation({ mutationFn: updateSaleMutationFn });
-const deleteSaleMutation = useMutation({ mutationFn: deleteSaleMutationFn });
+
 const currencyFormatter = useCurrencyFormatter();
 const salesQuery = useSalesQuery({
   options: {
@@ -89,25 +100,25 @@ const salesQuery = useSalesQuery({
     filters: toRef(() => {
       const filters = [];
 
-      if ('status' in tableFiltersRef.value) {
-        if (tableFiltersRef.value.status !== 'all') {
+      if ("status" in tableFiltersRef.value) {
+        if (tableFiltersRef.value.status !== "all") {
           filters.push({
-            column: 'status',
-            operator: 'eq',
+            column: "status",
+            operator: "eq",
             value: tableFiltersRef.value.status,
           });
         }
       }
-      if ('period' in tableFiltersRef.value) {
+      if ("period" in tableFiltersRef.value) {
         if (tableFiltersRef.value.period) {
           filters.push({
-            column: 'created_at',
-            operator: 'gte',
+            column: "created_at",
+            operator: "gte",
             value: dashboardDates.dateRangeFromPeriod.value?.from.toISOString(),
           });
           filters.push({
-            column: 'created_at',
-            operator: 'lte',
+            column: "created_at",
+            operator: "lte",
             value: dashboardDates.dateRangeFromPeriod.value?.to.toISOString(),
           });
         }
@@ -132,72 +143,51 @@ function openDeleteSaleDialog(sale: Sale) {
   isDeleteSaleDialogOpen.value = true;
 }
 
-function handleSaveSidebar(formValues: CreateSale | UpdateSale) {
-  if (saleServicesTypeguards.isCreateSale(formValues)) {
-    delete formValues.sale_id;
-    createSaleMutation.mutate(formValues);
-  } else {
-    updateSaleMutation.mutate(formValues);
-  }
-  isCreateOrUpdateSidebarOpen.value = false;
+function openViewSaleSidebar(sale: Sale) {
+  activeSale.value = sale;
+  isViewSaleSidebarOpen.value = true;
 }
 
-function handleSaleSidebar(options: {
-  sale?: Sale | null;
-  viewOnly?: boolean;
-}) {
-  activeSale.value = options.sale ?? null;
-  isCreateOrUpdateSidebarOpen.value = true;
-  isSaleSidebarViewOnly.value = Boolean(options.viewOnly);
-}
+// function handleSaveSidebar(formValues: CreateSale | UpdateSale) {
+//   if (saleServicesTypeguards.isCreateSale(formValues)) {
+//   } else {
+//     updateSaleMutation.mutate(formValues);
+//   }
+//   isCreateOrUpdateSidebarOpen.value = false;
+// }
 
-async function createSaleMutationFn(formValues: CreateSale) {
-  await saleServices.createSale(route.params.orgId.toString(), formValues);
-  await queryClient.invalidateQueries({ queryKey: ['sales'] });
-  await queryClient.invalidateQueries({ queryKey: ['products'] });
-  analytics.event('create-sale', formValues);
-}
-async function updateSaleMutationFn(formValues: UpdateSale) {
-  const saleId = formValues.sale_id;
-  if (!saleId) throw new Error('Sale id required to perform update');
-  await saleServices.updateSale(route.params.orgId.toString(), formValues);
-  await queryClient.invalidateQueries({ queryKey: ['sales'] });
-  await queryClient.invalidateQueries({ queryKey: ['products'] });
-  analytics.event('update-sale', formValues);
-}
-async function deleteSaleMutationFn() {
-  const saleId = activeSale.value?.id;
-  if (!saleId) throw new Error('Sale id required to perform delete');
-  await saleServices.deleteSale(saleId);
-  isDeleteSaleDialogOpen.value = false;
-  await queryClient.invalidateQueries({ queryKey: ['sales'] });
-  await queryClient.invalidateQueries({ queryKey: ['products'] });
-  analytics.event('delete-sale', activeSale.value ?? {});
+function openUpdateSaleSidebar(sale?: Sale | null) {
+  activeSale.value = sale ?? null;
+  sidebarManager.openSidebar("update-sale");
 }
 
-function getBadgeColorFromStatus(status: Sale['status']) {
+function getBadgeColorFromStatus(status: Sale["status"]) {
   switch (status) {
-    case 'cancelled':
-      return 'destructive';
-    case 'in_progress':
-      return 'outline';
-    case 'completed':
-      return 'default';
+    case "cancelled":
+      return "destructive";
+    case "in_progress":
+      return "outline";
+    case "completed":
+      return "default";
     default:
-      return 'outline';
+      return "outline";
   }
 }
 
 function resetFilters() {
-  tableFiltersRef.value = { status: 'all' };
+  tableFiltersRef.value = { status: "all" };
 }
 
 watchEffect(() => {
   if (isDeleteSaleDialogOpen.value) return;
-  if (isCreateOrUpdateSidebarOpen.value) return;
+  if (isCreateSaleSidebarOpen.value) return;
+  if (isUpdateSaleSidebarOpen.value) return;
+  if (isViewSaleSidebarOpen.value) return;
+  if (sidebarManager.hasAnySidebarOpen.value) return;
 
   activeSale.value = null;
-  isSaleSidebarViewOnly.value = false;
+  activeCustomer.value = null;
+  activeProducts.value.clear();
 });
 </script>
 
@@ -221,7 +211,7 @@ watchEffect(() => {
         <Button variant="outline" @click="isTodaySalesSidebarOpen = true">
           <ShoppingBagIcon class="w-5 h-5 stroke-[2px] mr-2" /> Ventas de hoy
         </Button>
-        <Button @click="isCreateOrUpdateSidebarOpen = true">
+        <Button @click="sidebarManager.openSidebar('create-sale')">
           <PlusIcon class="w-5 h-5 stroke-[2px] mr-2" /> Crear venta
         </Button>
       </div>
@@ -291,7 +281,7 @@ watchEffect(() => {
         >
           <ShoppingBagIcon class="w-5 h-5 stroke-[2px]" />
         </Button>
-        <Button @click="isCreateOrUpdateSidebarOpen = true" size="icon">
+        <Button @click="sidebarManager.openSidebar('create-sale')" size="icon">
           <PlusIcon class="w-5 h-5 stroke-[2px]" />
         </Button>
       </div>
@@ -365,19 +355,21 @@ watchEffect(() => {
                   <AvatarFallback>{{
                     (sale.i_customers?.name ?? sale.customer_name)
                       ?.substring(0, 1)
-                      .toLocaleUpperCase() ?? '?'
+                      .toLocaleUpperCase() ?? "?"
                   }}</AvatarFallback>
                 </Avatar>
                 <div class="ps-3">
                   <div class="text-base font-semibold">
-                    {{ sale.i_customers?.name ?? sale.customer_name ?? '-' }}
+                    {{ sale.i_customers?.name ?? sale.customer_name ?? "-" }}
                   </div>
                   <div
                     v-if="sale.i_customers?.phone || sale.customer_phone"
                     class="font-normal text-slate-500"
                   >
                     <a
-                      :href="`${WHATSAPP_URL}/${sale.i_customers?.phone ?? sale.customer_phone}`"
+                      :href="`${WHATSAPP_URL}/${
+                        sale.i_customers?.phone ?? sale.customer_phone
+                      }`"
                       target="_blank"
                       rel="noopener noreferrer"
                       class="block"
@@ -390,7 +382,7 @@ watchEffect(() => {
               <TableCell class="text-center"
                 ><div
                   class="flex -space-x-4 rtl:space-x-reverse w-fit mx-auto cursor-pointer"
-                  @click="handleSaleSidebar({ sale, viewOnly: true })"
+                  @click="openViewSaleSidebar(sale)"
                 >
                   <Avatar
                     v-for="saleProduct in sale.i_sale_products.slice(0, 3)"
@@ -442,7 +434,7 @@ watchEffect(() => {
                       <Button
                         size="icon"
                         variant="outline"
-                        @click="handleSaleSidebar({ sale, viewOnly: true })"
+                        @click="openViewSaleSidebar(sale)"
                       >
                         <EyeIcon class="w-4 h-4" />
                       </Button>
@@ -459,7 +451,7 @@ watchEffect(() => {
                         size="icon"
                         variant="outline"
                         v-if="sale.status === 'in_progress'"
-                        @click="handleSaleSidebar({ sale })"
+                        @click="openUpdateSaleSidebar(sale)"
                       >
                         <PencilIcon class="w-4 h-4" />
                       </Button>
@@ -492,7 +484,12 @@ watchEffect(() => {
           </template>
         </TableBody>
       </Table>
-      <div v-if="salesQuery.isFetchingNextPage.value" class="w-full flex justify-center">CARGANDO MAS...</div>
+      <div
+        v-if="salesQuery.isFetchingNextPage.value"
+        class="w-full flex justify-center"
+      >
+        CARGANDO MAS...
+      </div>
 
       <FeedbackCard
         v-if="tableLoadingStates.showEmptyState.value"
@@ -507,7 +504,7 @@ watchEffect(() => {
           Comienza creando tu primera venta.
         </template>
         <template #action
-          ><Button @click="isCreateOrUpdateSidebarOpen = true">
+          ><Button @click="sidebarManager.openSidebar('create-sale')">
             <PlusIcon class="w-5 h-5 stroke-[2px] mr-2" /> Crear venta
           </Button>
         </template>
@@ -530,7 +527,7 @@ watchEffect(() => {
             <Button @click="saleSearch = ''" variant="outline">
               Clear search
             </Button>
-            <Button @click="isCreateOrUpdateSidebarOpen = true">
+            <Button @click="sidebarManager.openSidebar('create-sale')">
               <PlusIcon class="w-5 h-5 stroke-[2px] mr-2" /> Crear venta
             </Button>
           </div>
@@ -541,19 +538,34 @@ watchEffect(() => {
     <DeleteSaleDialog
       v-model:open="isDeleteSaleDialogOpen"
       :sale="activeSale"
-      :isLoading="deleteSaleMutation.isPending.value"
-      @confirmDelete="deleteSaleMutation.mutate"
     />
-
-    <CreateOrEditSidebar
-      v-model:open="isCreateOrUpdateSidebarOpen"
-      :viewOnly="isSaleSidebarViewOnly"
-      :isLoading="
-        createSaleMutation.isPending.value || updateSaleMutation.isPending.value
-      "
+    <CreateSaleSidebar
+      :activeCustomer="activeCustomer"
+      :activeProducts="activeProducts"
+      :sidebarManager="sidebarManager"
+      :open="sidebarManager.currentSidebar.value?.id === 'create-sale'"
+      @update:open="(open) => open === false && sidebarManager.closeSidebar()"
+    />
+    <UpdateSaleSidebar
+      :sale="activeSale"
+      :activeProducts="activeProducts"
+      :sidebarManager="sidebarManager"
+      :open="sidebarManager.currentSidebar.value?.id === 'update-sale'"
+      @update:open="(open) => open === false && sidebarManager.closeSidebar()"
+    />
+    <CustomerPickerSidebar
+      :activeCustomer="activeCustomer"
+      :open="sidebarManager.currentSidebar.value?.id === 'customer-picker'"
+      @update:open="(open) => open === false && sidebarManager.closeSidebar()"
+      @select="activeCustomer = $event"
+    />
+    <ProductPickerSidebar
+      :activeProducts="activeProducts"
       :sale="activeSale"
-      @save="handleSaveSidebar"
+      :open="sidebarManager.currentSidebar.value?.id === 'product-picker'"
+      @update:open="(open) => open === false && sidebarManager.closeSidebar()"
     />
+    <ViewSaleSidebar v-model:open="isViewSaleSidebarOpen" :sale="activeSale" />
 
     <TodaySalesSidebar v-model:open="isTodaySalesSidebarOpen" />
   </div>