updates to landing page

src/features/dashboard/components/StatsGrid.vue

@@ -84,7 +84,7 @@ const periodString = toRef(() => {
 </script>
 
 <template>
-  <div class="grid grid-cols-1 gap-5 lg:grid-cols-2">
+  <div class="grid grid-cols-1 gap-5 xl:grid-cols-2 2xl:grid-cols-4">
     <router-link :to="`/org/${route.params.orgId}/sales`">
       <Card>
         <CardHeader
@@ -167,27 +167,6 @@ const periodString = toRef(() => {
       </Card>
     </router-link>
 
-    <router-link :to="`/org/${route.params.orgId}/products`">
-      <Card>
-        <CardHeader
-          class="flex flex-row items-center justify-between space-y-0 pb-2"
-        >
-          <CardTitle class="text-sm font-medium"
-            >Total de productos en stock</CardTitle
-          >
-          <ArchiveBoxIcon class="w-5 h-5" />
-        </CardHeader>
-        <CardContent>
-          <div class="text-2xl font-bold">
-            <template v-if="isDefined(productsInStockCountQuery.data.value)"
-              >{{ productsInStockCountQuery.data.value }}
-            </template>
-            <Skeleton class="h-[32px] w-[64px]" v-else :count="1" />
-          </div>
-        </CardContent>
-      </Card>
-    </router-link>
-
     <router-link :to="`/org/${route.params.orgId}/sales`">
       <Card>
         <CardHeader
@@ -252,5 +231,26 @@ const periodString = toRef(() => {
         </CardContent>
       </Card>
     </router-link>
+
+    <router-link :to="`/org/${route.params.orgId}/products`">
+      <Card>
+        <CardHeader
+          class="flex flex-row items-center justify-between space-y-0 pb-2"
+        >
+          <CardTitle class="text-sm font-medium"
+            >Total de productos en stock</CardTitle
+          >
+          <ArchiveBoxIcon class="w-5 h-5" />
+        </CardHeader>
+        <CardContent>
+          <div class="text-2xl font-bold">
+            <template v-if="isDefined(productsInStockCountQuery.data.value)"
+              >{{ productsInStockCountQuery.data.value }}
+            </template>
+            <Skeleton class="h-[32px] w-[64px]" v-else :count="1" />
+          </div>
+        </CardContent>
+      </Card>
+    </router-link>
   </div>
 </template>

src/features/home/components/NavigationBar.vue

@@ -9,13 +9,15 @@ const organizationStore = useOrganizationStore();
 
 const isDark = useDark();
 const toggleDark = useToggle(isDark);
+
+const HOME_URL = window.location.origin
 </script>
 
 <template>
   <nav
     class="mx-auto max-w-7xl px-4 h-[64px] flex items-center justify-between"
   >
-    <a href="https://flowbite.com">
+    <a :href="HOME_URL">
       <span
         class="self-center text-xl sm:text-2xl whitespace-nowrap dark:text-white"
       >
@@ -28,25 +30,6 @@ const toggleDark = useToggle(isDark);
         <SunIcon class="w-4 h-4 stroke-[2px]" v-else />
       </Button>
       <div v-if="authStore.isLoggedIn" class="flex gap-4">
-        <router-link
-          :to="`/org/${
-            organizationStore.userOrganizations?.find(Boolean)?.org_id
-          }/dashboard`"
-          :class="[
-            'hidden md:block',
-            {
-              'pointer-events-none': !organizationStore.hasUserOrganizations,
-              'opacity-80': !organizationStore.hasUserOrganizations,
-            },
-          ]"
-        >
-          <Button
-            :loading="!organizationStore.hasUserOrganizations"
-            :disabled="!organizationStore.hasUserOrganizations"
-          >
-            Dashboard
-          </Button>
-        </router-link>
         <Button
           variant="outline"
           :loading="!organizationStore.hasUserOrganizations"
@@ -63,9 +46,6 @@ const toggleDark = useToggle(isDark);
         <router-link to="/auth/sign-in">
           <Button variant="outline">Iniciar sesión</Button>
         </router-link>
-        <router-link to="/auth/sign-up">
-          <Button>Regístrate</Button>
-        </router-link>
       </div>
     </div>
   </nav>

src/features/products/composables/useCurrencyFormatter.ts

@@ -1,10 +1,11 @@
 export function useCurrencyFormatter() {
-  function parse(cents: number | null | undefined) {
+  function parse(cents: number | null | undefined, options?: Intl.NumberFormatOptions) {
     if (typeof cents !== 'number') return cents ?? null;
 
     return (cents / 100).toLocaleString("en-US", {
       style: "currency",
       currency: "MXN",
+      ...options,
     });
   }
 

src/features/subscriptions/composables/useSubscriptionQueries.ts

@@ -37,4 +37,40 @@ export function useSubscriptionsQuery(context: {
     },
     enabled: context.options.enabled,
   });
+}
+
+export function usePlansQuery(context: {
+  options: {
+    enabled: MaybeRefOrGetter<boolean | undefined>;
+    search?: MaybeRefOrGetter<string | undefined>;
+    filters?: MaybeRefOrGetter<LoadListOptions["filters"] | undefined>;
+    order?: MaybeRefOrGetter<LoadListOptions["order"] | undefined>;
+  };
+}) {
+  const subscriptionServices = useSubscriptionServices();
+
+  return useInfiniteQuery({
+    queryKey: [
+      "plans",
+      context.options.search,
+      context.options.filters,
+      context.options.order,
+    ],
+    queryFn({ pageParam }) {
+      return subscriptionServices.loadPlanList({
+        offset: pageParam,
+        search: toValue(context.options.search),
+        filters: toValue(context.options.filters),
+        order: toValue(context.options.order),
+      });
+    },
+    initialPageParam: 0,
+    getNextPageParam: (lastPage, _allPages, lastPageParam) => {
+      if (lastPage.data?.length === 0) {
+        return undefined;
+      }
+      return lastPageParam + 1;
+    },
+    enabled: context.options.enabled,
+  });
 }

src/features/subscriptions/composables/useSubscriptionServices.ts

@@ -24,7 +24,28 @@ export function useSubscriptionServices() {
     return await subscriptionQuery;
   }
 
+  async function loadPlanList(options?: LoadListOptions) {
+    const [from, to] = serviceHelpers.getPaginationRange(options?.offset);
+
+    let plansQuery = supabase
+      .from("plans")
+      .select("*")
+      .range(from, to);
+
+    if (options?.search) {
+      plansQuery = plansQuery.ilike(
+        "name",
+        `%${options.search}%`
+      );
+    }
+
+    serviceHelpers.appendFiltersToQuery(plansQuery, options);
+
+    return await plansQuery;
+  }
+
   return {
     loadList,
+    loadPlanList
   };
 }