@7365admin1/layer-common 3.2.2-staging.106 → 3.2.2-staging.107

package/components/CreateSubsciptionPlan.vue

@@ -1,22 +1,12 @@
 <template>
-  <v-card class="pa-2">
+  <v-card class="pa-2 pb-0">
     <!-- Header -->
-    <v-card-title class="d-flex align-center justify-space-between pb-2">
+    <v-card-title class="pb-2">
       <span class="text-h6 font-weight-bold">
         {{ isEditing ? "Edit Plan" : "Create New Plan" }}
       </span>
-
-      <v-btn
-        icon="mdi-close"
-        variant="text"
-        density="comfortable"
-        aria-label="Close"
-        @click="$emit('cancel')"
-      />
     </v-card-title>
 
-    <v-divider />
-
     <!-- Form Content -->
     <v-form ref="formRef" class="my-4" @submit.prevent="submit">
       <v-card-text class="pa-2 max-h-70vh overflow-y-auto">
@@ -68,8 +58,6 @@
           </template>
         </v-text-field>
 
-        <v-divider class="my-4" />
-
         <!-- Pricing Section -->
         <div class="text-subtitle-2 font-weight-bold mb-3 text-grey-darken-3">
           Pricing
@@ -116,14 +104,14 @@
             selected-class="bg-grey-darken-3 text-white"
           >
             <v-chip
-              v-for="app in AVAILABLE_APPLICATIONS"
-              :key="app.id"
-              :value="app.id"
+              v-for="app in APP_LIST"
+              :key="app.value"
+              :value="app.value"
               filter
               variant="outlined"
               size="small"
             >
-              {{ app.name }}
+              {{ app.title }}
             </v-chip>
           </v-chip-group>
         </div>
@@ -155,26 +143,37 @@
           <v-card variant="outlined" class="pa-1 mb-3">
             <v-list density="compact" class="py-0">
               <v-list-item
-                v-for="app in AVAILABLE_APPLICATIONS"
-                :key="app.id"
+                v-for="app in APP_LIST"
+                :key="app.value"
                 class="px-2"
               >
                 <template #prepend>
                   <v-checkbox-btn
-                    :model-value="form.customApps.includes(app.id)"
+                    :model-value="form.customApps.includes(app.value)"
                     density="compact"
-                    @update:model-value="toggleApp(form.customApps, app.id)"
+                    @update:model-value="toggleApp(form.customApps, app.value)"
                   />
                 </template>
 
                 <v-list-item-title class="text-body-2">
-                  {{ app.name }}
+                  {{ app.title }}
                 </v-list-item-title>
 
                 <template #append>
-                  <span class="text-caption text-grey">
-                    ${{ form.billingCycle === 'annually' ? app.yearlyPrice : app.monthlyPrice }}/{{ form.billingCycle === 'annually' ? 'yr' : 'mo' }}
-                  </span>
+                  <div class="d-flex align-center" style="gap: 4px">
+                    <span class="text-caption text-grey">$</span>
+                    <v-text-field
+                      v-model.number="form.customAppPrices[app.value]"
+                      type="number"
+                      min="0"
+                      density="compact"
+                      variant="outlined"
+                      hide-details
+                      style="width: 84px"
+                      :disabled="!form.customApps.includes(app.value)"
+                    />
+                    <span class="text-caption text-grey">/{{ form.billingCycle === 'annually' ? 'yr' : 'mo' }}</span>
+                  </div>
                 </template>
               </v-list-item>
             </v-list>
@@ -211,28 +210,21 @@
         </v-alert>
       </v-card-text>
 
-      <v-divider />
-
       <!-- Footer Buttons -->
-      <v-card-actions class="pt-3 px-2">
-        <v-btn
-          variant="outlined"
-          color="grey-darken-1"
-          class="flex-1 text-none"
-          @click="$emit('cancel')"
-        >
-          Cancel
-        </v-btn>
-
-        <v-btn
-          type="submit"
-          color="grey-darken-4"
-          variant="flat"
-          class="flex-1 text-none"
-        >
-          {{ isEditing ? "Save Changes" : "Create Plan" }}
-        </v-btn>
-      </v-card-actions>
+      <v-toolbar density="compact">
+        <v-row no-gutters>
+          <v-col cols="6">
+            <v-btn tile block variant="text" class="text-none" size="48" @click="$emit('cancel')">
+              Cancel
+            </v-btn>
+          </v-col>
+          <v-col cols="6">
+            <v-btn tile block type="submit" variant="flat" color="primary" class="text-none" size="48">
+              {{ isEditing ? "Save Changes" : "Create Plan" }}
+            </v-btn>
+          </v-col>
+        </v-row>
+      </v-toolbar>
     </v-form>
   </v-card>
 </template>
@@ -241,7 +233,9 @@
 import { reactive, computed, watch } from "vue";
 
 import {
-  AVAILABLE_APPLICATIONS,
+  APP_LIST,
+  STATIC_APP_MONTHLY_PRICE,
+  STATIC_APP_YEARLY_PRICE,
   type PlanFormState,
   type SubscriptionPlan,
 } from "../types/subscription";
@@ -284,6 +278,14 @@ const form = reactive<PlanFormState>({
     props.initialPlan?.planType === "custom_apps"
       ? [...(props.initialPlan?.applicationIds ?? [])]
       : [],
+  customAppPrices: Object.fromEntries(
+    APP_LIST.map((app) => [
+      app.value,
+      props.initialPlan?.billingCycle === "annually"
+        ? STATIC_APP_YEARLY_PRICE
+        : STATIC_APP_MONTHLY_PRICE,
+    ])
+  ),
 });
 
 const errors = reactive({
@@ -304,6 +306,29 @@ watch(
   }
 );
 
+function staticPriceForCycle(cycle: typeof form.billingCycle) {
+  return cycle === "annually" ? STATIC_APP_YEARLY_PRICE : STATIC_APP_MONTHLY_PRICE;
+}
+
+/*
+ * Keep custom app prices in sync with the billing cycle, but only for
+ * apps still sitting at the previous cycle's default (leave manual edits alone)
+ */
+watch(
+  () => form.billingCycle,
+  (newCycle, oldCycle) => {
+    const oldDefault = staticPriceForCycle(oldCycle);
+    const newDefault = staticPriceForCycle(newCycle);
+    if (oldDefault === newDefault) return;
+
+    for (const app of APP_LIST) {
+      if (form.customAppPrices[app.value] === oldDefault) {
+        form.customAppPrices[app.value] = newDefault;
+      }
+    }
+  }
+);
+
 /*
  * Toggle application selection helper
  */
@@ -320,15 +345,10 @@ function toggleApp(list: string[], id: string) {
  * Custom app total price calculation
  */
 const customTotalPrice = computed(() => {
-  return form.customApps.reduce((total, id) => {
-    const app = AVAILABLE_APPLICATIONS.find((item) => item.id === id);
-    if (!app) return total;
-
-    return (
-      total +
-      (form.billingCycle === "annually" ? app.yearlyPrice : app.monthlyPrice)
-    );
-  }, 0);
+  return form.customApps.reduce(
+    (total, value) => total + (form.customAppPrices[value] ?? 0),
+    0
+  );
 });
 
 /*
@@ -340,6 +360,11 @@ function validate(): boolean {
 
   if (form.planType !== "free_bundle" && !form.billingCycle) {
     errors.pricing = "Please select a billing cycle.";
+  } else if (
+    (form.planType === "free_bundle" || form.planType === "paid_bundle") &&
+    form.bundleApps.length === 0
+  ) {
+    errors.pricing = "Select at least one application.";
   } else if (
     form.planType === "paid_bundle" &&
     (!form.bundlePrice || form.bundlePrice <= 0)

package/components/SubscriptionPlanTable.vue

@@ -1,10 +1,8 @@
 <template>
   <v-container fluid class="pa-6">
     <!--
-      THE DESIGN'S TITLE ROW. Was a hand-rolled flex row with a `text-h5`
-      heading and a pill button; it is the same title and the same button on
-      the same line, drawn by the shared `PageHeader` at 22px/800 so this
-      screen's heading matches every other screen's.
+      THE DESIGN'S TITLE ROW. Drawn by the shared `PageHeader` at 22px/800 so
+      this screen's heading matches every other screen's.
     -->
     <PageHeader title="Subscription Plans">
       <template #actions>
@@ -19,13 +17,6 @@
     </PageHeader>
 
     <!-- Search & Filters Bar -->
-    <!--
-      The primitives carry these exactly: the search is a string ref, and both
-      filters are string refs over `{ title, value }` options whose values are
-      already strings, so `AppSelect`'s native branch emits the same string
-      this screen has always stored ("all", "monthly", ...). No filter's
-      meaning, order or default changed.
-    -->
     <v-row class="mb-2" density="compact">
       <!-- Search Input -->
       <v-col cols="12" sm="4" md="3">
@@ -54,16 +45,15 @@
     <!-- Main Table Card -->
     <AppCard class="table-card mt-4">
       <!--
-        The tabs and the refresh were a hand-built `bg-grey-lighten-4` strip -
-        a hard-coded light grey that stayed light in the dark theme. They are
-        the card's own toolbar row now, which is where the design draws tabs,
-        and it follows the theme because it is tokenised.
+        The tabs and the refresh/pagination are the card's own toolbar row,
+        which is where the design draws tabs - it follows the theme because
+        it is tokenised, unlike the old hard-coded `bg-grey-lighten-4` strip.
       -->
-      <CardToolbar>
+      <CardToolbar :count="pageRange">
         <template #tabs>
           <v-tabs v-model="activeTab" color="primary" density="compact">
             <v-tab value="active" class="text-none font-weight-bold">Active</v-tab>
-            <v-tab value="deactive" class="text-none font-weight-bold">Deactive</v-tab>
+            <v-tab value="deactive" class="text-none font-weight-bold">Deactivated</v-tab>
           </v-tabs>
         </template>
 
@@ -75,15 +65,22 @@
             aria-label="Refresh"
             @click="refresh"
           />
+          <local-pagination
+            v-model="page"
+            :length="pages"
+            @update:value="getSubscriptionPlans"
+          />
         </template>
       </CardToolbar>
 
       <!-- Table View -->
       <v-data-table
         :headers="headers"
-        :items="filteredPlans"
-        :page="page"
-        :items-per-page="pageSize"
+        :items="items"
+        :loading="loading"
+        item-value="id"
+        items-per-page="20"
+        hide-default-footer
         class="elevation-0"
       >
         <!-- Plan Name -->
@@ -93,7 +90,7 @@
 
         <!-- Plan Type -->
         <template #item.planType="{ item }">
-          {{ item.planType === 'free_bundle' ? 'Free' : 'Paid' }}
+          {{ item.planType === "free_bundle" ? "Free" : "Paid" }}
         </template>
 
         <!-- Billing Cycle -->
@@ -113,17 +110,18 @@
              shape (no leading dot) rather than a colour it has not earned. -->
         <template #item.applicationIds="{ item }">
           <StatusChip tone="neutral" :dot="false">
-            {{ item.applicationIds.length }} Application{{ item.applicationIds.length > 1 ? 's' : '' }}
+            {{ item.applicationIds.length }} Application{{
+              item.applicationIds.length > 1 ? "s" : ""
+            }}
           </StatusChip>
         </template>
 
         <!-- Status Badge -->
         <!-- The shared word -> tone map: "Active" is `ok` (was Vuetify
-             `success`) and "Deactive" is unmapped, so it comes out neutral -
-             which is the grey it already was. Same two words, same two
-             meanings. -->
+             `success`) and "Deactivated" is unmapped, so it comes out
+             neutral - which is the grey it already was. -->
         <template #item.status="{ item }">
-          <StatusChip :status="item.status === 'active' ? 'Active' : 'Deactive'" />
+          <StatusChip :status="item.status === 'active' ? 'Active' : 'Deactivated'" />
         </template>
 
         <!-- Actions -->
@@ -154,9 +152,15 @@
 
                 <!-- Toggle Status (Deactivate / Activate) -->
                 <v-list-item
-                  :prepend-icon="item.status === 'active' ? 'mdi-trash-can-outline' : 'mdi-check-circle-outline'"
+                  :prepend-icon="
+                    item.status === 'active'
+                      ? 'mdi-trash-can-outline'
+                      : 'mdi-check-circle-outline'
+                  "
                   :title="item.status === 'active' ? 'Deactivate' : 'Activate'"
-                  :class="item.status === 'active' ? 'text-error' : 'text-success'"
+                  :class="
+                    item.status === 'active' ? 'text-error' : 'text-success'
+                  "
                   value="toggle-status"
                   class="text-body-2"
                   @click="togglePlanStatus(item)"
@@ -187,12 +191,15 @@
         />
       </v-card>
     </v-dialog>
+
+    <Snackbar v-model="messageSnackbar" :text="message" :color="messageColor" />
   </v-container>
 </template>
 
 <script setup lang="ts">
-import { ref, reactive, computed, watch } from "vue";
+import { ref, computed, watch, watchEffect } from "vue";
 import CreateSubscriptionPlan from "./CreateSubsciptionPlan.vue";
+import useSubscriptionPlan from "../composables/useSubscriptionPlan";
 
 import type {
   SubscriptionPlan,
@@ -208,7 +215,12 @@ const headers = [
   { title: "Price", key: "price", align: "start" as const },
   { title: "Applications", key: "applicationIds", align: "center" as const },
   { title: "Status", key: "status", align: "center" as const },
-  { title: "Actions", key: "actions", align: "center" as const, sortable: false },
+  {
+    title: "Actions",
+    key: "actions",
+    align: "center" as const,
+    sortable: false,
+  },
 ];
 
 // Select Options
@@ -225,30 +237,12 @@ const billingOptions = [
   { title: "Yearly", value: "annually" },
 ];
 
-const plans = reactive<SubscriptionPlan[]>([
-  {
-    id: "1",
-    name: "Standard",
-    description: "",
-    maxSeats: 10,
-    planType: "paid_bundle",
-    billingCycle: "monthly",
-    price: 299,
-    applicationIds: ["crm"],
-    status: "active",
-  },
-  {
-    id: "2",
-    name: "Premium",
-    description: "",
-    maxSeats: 25,
-    planType: "paid_bundle",
-    billingCycle: "annually",
-    price: 299,
-    applicationIds: ["crm", "hrm"],
-    status: "active",
-  },
-]);
+const {
+  getAll: _getAll,
+  add: _add,
+  updateById: _updateById,
+  updateStatusById: _updateStatusById,
+} = useSubscriptionPlan();
 
 const search = ref("");
 const categoryFilter = ref("all");
@@ -256,38 +250,79 @@ const billingFilter = ref<"all" | BillingCycle>("all");
 const activeTab = ref<"active" | "deactive">("active");
 
 const page = ref(1);
-const pageSize = 20;
+const pages = ref(0);
+const pageRange = ref("-- - -- of --");
+
+const message = ref("");
+const messageSnackbar = ref(false);
+const messageColor = ref("");
 
 const showModal = ref(false);
 const editingPlan = ref<SubscriptionPlan | null>(null);
+const items = ref<SubscriptionPlan[]>([]);
+
+function normalizePlan(raw: Record<string, any>): SubscriptionPlan {
+  return {
+    id: String(raw._id ?? raw.id),
+    name: raw.name,
+    description: raw.description ?? "",
+    maxSeats: raw.maxSeats,
+    planType: raw.planType,
+    billingCycle: raw.billingCycle ?? null,
+    price: raw.price ?? null,
+    applicationIds: (raw.applications ?? []).map(
+      (app: Record<string, any>) => app.applicationId
+    ),
+    status: raw.status === "active" ? "active" : "deactive",
+  };
+}
 
-const filteredPlans = computed(() =>
-  plans.filter((plan) => {
-    if (plan.status !== activeTab.value) return false;
-
-    if (
-      search.value &&
-      !plan.name.toLowerCase().includes(search.value.toLowerCase())
-    ) {
-      return false;
-    }
+const {
+  data: getSubscriptionPlansReq,
+  refresh: getSubscriptionPlans,
+  status: getAllReqStatus,
+} = useLazyAsyncData("get-all-subscription-plans", () =>
+  _getAll({
+    page: page.value,
+    search: search.value,
+    status: activeTab.value,
+    planType: categoryFilter.value === "all" ? "" : categoryFilter.value,
+    billingCycle: billingFilter.value === "all" ? "" : billingFilter.value,
+  })
+);
 
-    if (categoryFilter.value !== "all" && plan.planType !== categoryFilter.value) {
-      return false;
-    }
+const loading = computed(() => getAllReqStatus.value === "pending");
 
-    if (billingFilter.value !== "all" && plan.billingCycle !== billingFilter.value) {
-      return false;
-    }
+watchEffect(() => {
+  if (getSubscriptionPlansReq.value) {
+    items.value = (getSubscriptionPlansReq.value.items ?? []).map(
+      normalizePlan
+    );
+    pages.value = getSubscriptionPlansReq.value.pages;
+    pageRange.value = getSubscriptionPlansReq.value.pageRange;
+  }
+});
 
-    return true;
-  })
-);
+let searchDebounce: ReturnType<typeof setTimeout> | null = null;
+watch(search, () => {
+  if (searchDebounce) clearTimeout(searchDebounce);
+  searchDebounce = setTimeout(() => {
+    page.value = 1;
+    getSubscriptionPlans();
+  }, 400);
+});
 
-watch([search, categoryFilter, billingFilter, activeTab], () => {
+watch([categoryFilter, billingFilter, activeTab], () => {
   page.value = 1;
+  getSubscriptionPlans();
 });
 
+function showMessage(msg: string, color: string) {
+  message.value = msg;
+  messageColor.value = color;
+  messageSnackbar.value = true;
+}
+
 function formatBillingCycle(cycle?: string) {
   if (!cycle) return "—";
   if (cycle === "annually" || cycle === "yearly") return "Yearly";
@@ -306,6 +341,7 @@ function refresh() {
   search.value = "";
   categoryFilter.value = "all";
   billingFilter.value = "all";
+  getSubscriptionPlans();
 }
 
 function openCreateModal() {
@@ -323,43 +359,71 @@ function closeModal() {
   editingPlan.value = null;
 }
 
-function handleSubmit(payload: PlanFormState) {
-  const applicationIds =
-    payload.planType === "custom_apps"
-      ? payload.customApps
-      : payload.bundleApps;
+function buildApplications(payload: PlanFormState) {
+  if (payload.planType === "custom_apps") {
+    return payload.customApps.map((applicationId) => ({
+      applicationId,
+      price: payload.customAppPrices[applicationId] ?? 0,
+    }));
+  }
+
+  return payload.bundleApps.map((applicationId) => ({ applicationId }));
+}
+
+async function handleSubmit(payload: PlanFormState) {
+  const applications = buildApplications(payload);
 
   const price =
     payload.planType === "custom_apps"
-      ? null
+      ? payload.customApps.reduce(
+          (total, value) => total + (payload.customAppPrices[value] ?? 0),
+          0
+        )
       : payload.planType === "paid_bundle"
       ? payload.bundlePrice
       : null;
 
-  if (editingPlan.value) {
-    Object.assign(editingPlan.value, {
-      name: payload.name,
-      description: payload.description,
-      maxSeats: payload.maxSeats,
-      planType: payload.planType,
-      billingCycle: payload.billingCycle,
-      price,
-      applicationIds,
-    });
-  } else {
-    plans.push({
-      id: crypto.randomUUID(),
-      name: payload.name,
-      description: payload.description,
-      maxSeats: payload.maxSeats,
-      planType: payload.planType,
-      billingCycle: payload.billingCycle,
-      price,
-      applicationIds,
-      status: "active",
-    });
+  const body = {
+    name: payload.name,
+    description: payload.description,
+    maxSeats: payload.maxSeats,
+    planType: payload.planType,
+    billingCycle: payload.billingCycle,
+    price,
+    applications,
+  };
+
+  try {
+    if (editingPlan.value) {
+      await _updateById(editingPlan.value.id, body);
+      showMessage("Subscription plan updated successfully!", "success");
+    } else {
+      await _add(body);
+      showMessage("Subscription plan created successfully!", "success");
+    }
+
+    await getSubscriptionPlans();
+    closeModal();
+  } catch (error: any) {
+    showMessage(
+      error?.response?._data?.message || "Failed to save subscription plan.",
+      "error"
+    );
   }
+}
 
-  closeModal();
+async function togglePlanStatus(plan: SubscriptionPlan) {
+  const nextStatus = plan.status === "active" ? "deactive" : "active";
+
+  try {
+    await _updateStatusById(plan.id, nextStatus);
+    await getSubscriptionPlans();
+    showMessage("Subscription plan status updated successfully!", "success");
+  } catch (error: any) {
+    showMessage(
+      error?.response?._data?.message || "Failed to update plan status.",
+      "error"
+    );
+  }
 }
 </script>

package/composables/useSubscriptionPlan.ts

@@ -0,0 +1,62 @@
+export default function useSubscriptionPlan() {
+  function getAll({
+    page = 1,
+    search = "",
+    limit = 10,
+    status = "active",
+    planType = "",
+    billingCycle = "",
+  } = {}) {
+    return useNuxtApp().$api<Record<string, any>>(`/api/subscription-plans`, {
+      method: "GET",
+      query: {
+        page,
+        search,
+        limit,
+        status,
+        planType,
+        billingCycle,
+      },
+    });
+  }
+  function add(value: any) {
+    return useNuxtApp().$api<Record<string, any>>("/api/subscription-plans", {
+      method: "POST",
+      body: value,
+    });
+  }
+  function getById(id: string) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/subscription-plans/id/${id}`,
+      {
+        method: "GET",
+      }
+    );
+  }
+  function updateById(id: string, value: any) {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/subscription-plans/${id}`,
+      {
+        method: "PUT",
+        body: value,
+      }
+    );
+  }
+  function updateStatusById(id: string, status: "active" | "deactive") {
+    return useNuxtApp().$api<Record<string, any>>(
+      `/api/subscription-plans/${id}/status`,
+      {
+        method: "PATCH",
+        body: { status },
+      }
+    );
+  }
+
+  return {
+    getAll,
+    add,
+    getById,
+    updateById,
+    updateStatusById,
+  };
+}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@7365admin1/layer-common",
   "license": "MIT",
   "type": "module",
-  "version": "3.2.2-staging.106",
+  "version": "3.2.2-staging.107",
   "author": "7365admin1",
   "main": "./nuxt.config.ts",
   "publishConfig": {

package/types/subscription.ts

@@ -5,10 +5,8 @@ export type PlanType = "free_bundle" | "paid_bundle" | "custom_apps";
 export type BillingCycle = "monthly" | "annually";
 
 export interface AppOption {
-  id: string;
-  name: string;
-  monthlyPrice: number;
-  yearlyPrice: number;
+  title: string;
+  value: string;
 }
 
 export interface SubscriptionPlan {
@@ -32,6 +30,7 @@ export interface PlanFormState {
   bundleApps: string[];
   bundlePrice: number | null;
   customApps: string[];
+  customAppPrices: Record<string, number>;
 }
 
 export const PLAN_TYPE_LABEL: Record<PlanType, string> = {
@@ -40,12 +39,20 @@ export const PLAN_TYPE_LABEL: Record<PlanType, string> = {
   custom_apps: "Paid (Custom Apps)",
 };
 
-// Mock catalogue of applications that can be bundled into a plan.
+// Catalogue of applications that can be bundled into a plan.
 // Replace with data fetched from your backend.
-export const AVAILABLE_APPLICATIONS: AppOption[] = [
-  { id: "crm", name: "CRM", monthlyPrice: 49, yearlyPrice: 490 },
-  { id: "hrm", name: "HRM", monthlyPrice: 39, yearlyPrice: 390 },
-  { id: "accounting", name: "Accounting", monthlyPrice: 59, yearlyPrice: 590 },
-  { id: "inventory", name: "Inventory", monthlyPrice: 45, yearlyPrice: 450 },
-  { id: "pos", name: "POS", monthlyPrice: 69, yearlyPrice: 690 },
+export const APP_LIST: AppOption[] = [
+  { title: "Organization", value: "organization" },
+  { title: "Security Agency", value: "security_agency" },
+  { title: "Cleaning Services", value: "cleaning_services" },
+  { title: "Property Management Agency", value: "property_management_agency" },
+  { title: "Mechanical & Electrical Services", value: "mechanical_electrical_services" },
+  { title: "Pest Control Services", value: "pest_control_services" },
+  { title: "Landscaping Services", value: "landscaping_services" },
+  { title: "Pool Maintenance Services", value: "pool_maintenance_services" },
 ];
+
+// Static placeholder price applied to every app, for now.
+// Replace with real per-app pricing once that's available.
+export const STATIC_APP_MONTHLY_PRICE = 49;
+export const STATIC_APP_YEARLY_PRICE = 490;