List Files | Just Commands | Repo | Logs

← back | Copy

<template>
  <BaseLayout title="Home">
    <div class="home-container">
      <h1 class="page-title">Welcome to TNFR</h1>

      <div class="home-grid">
        <!-- Available Books -->
        <div
          v-for="book in availableBooks"
          :key="book.id"
          class="home-card book-card"
          @click="navigateTo(book.path)"
        >
          <span class="home-card-name">{{ book.name }}</span>
          <button
            class="home-card-button"
            @click.stop="navigateTo(book.path)"
          >
            Access Menu Pricing
          </button>
        </div>

        <!-- Menu Items -->
        <div
          v-for="item in menuItems"
          :key="item.id"
          :class="['home-card', { 'home-card-disabled': !item.enabled }]"
          @click="item.enabled && navigateTo(item.path)"
        >
          <ion-icon :icon="item.icon" class="home-card-icon"></ion-icon>
          <span class="home-card-name">{{ item.name }}</span>
          <button
            class="home-card-button"
            :disabled="!item.enabled"
            @click.stop="item.enabled && navigateTo(item.path)"
          >
            {{ item.buttonText }}
          </button>
        </div>
      </div>
    </div>
  </BaseLayout>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRouter } from "vue-router";
import { IonIcon } from "@ionic/vue";
import BaseLayout from "@/components/BaseLayout.vue";
import {
  briefcaseOutline,
  schoolOutline,
  documentTextOutline,
  bookOutline,
  personOutline,
  settingsOutline,
} from "ionicons/icons";

const router = useRouter();

// Available books (same as Directory TOP_LEVEL_CATEGORIES, filtered to enabled only)
const ALL_BOOKS = [
  { id: '_plumbing', name: 'Plumbing', path: '/directory?top=_plumbing', enabled: true },
  { id: '_electrical', name: 'Electrical', path: '/directory?top=_electrical', enabled: false },
  { id: '_hvac_service', name: 'HVAC Service', path: '/directory?top=_hvac_service', enabled: false },
  { id: '_hvac_equipment', name: 'HVAC Equipment', path: '/directory?top=_hvac_equipment', enabled: false },
];

const availableBooks = computed(() => ALL_BOOKS.filter(book => book.enabled));

const menuItems = [
  { id: 'work-orders', name: 'Work Orders', path: '/review', icon: briefcaseOutline, buttonText: 'View Work Orders', enabled: true },
  { id: 'training-lab', name: 'Training Lab', path: '/training-lab', icon: schoolOutline, buttonText: 'Enter Training Lab', enabled: true },
  { id: 'presentation-scripts', name: 'Presentation Scripts', path: '/presentation-scripts', icon: documentTextOutline, buttonText: 'View Scripts', enabled: true },
  { id: 'terminology-guides', name: 'Terminology Guides', path: '/terminology-guides', icon: bookOutline, buttonText: 'View Guides', enabled: true },
  { id: 'profile', name: 'Profile', path: '/profile', icon: personOutline, buttonText: 'View Profile', enabled: true },
  { id: 'settings', name: 'Settings', path: '/settings', icon: settingsOutline, buttonText: 'Open Settings', enabled: true },
];

const navigateTo = (path: string) => {
  router.push(path);
};
</script>

<style scoped>
.home-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.page-title {
  margin: 0 0 24px 0;
  color: var(--ion-text-color);
  font-size: 48px;
  font-weight: 700;
  text-align: center;
  font-variant: small-caps;
}

/* Home grid - matches Directory top-level grid */
.home-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  max-width: 1000px;
  margin: 0 auto;
}

.home-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 24px;
  background: var(--ion-color-light);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
  min-height: 180px;
}

.home-card:hover:not(.home-card-disabled) {
  background: rgba(var(--ion-color-primary-rgb), 0.1);
  border-color: var(--ion-color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.home-card-disabled {
  background: var(--ion-color-light-shade);
  cursor: default;
  opacity: 0.6;
}

.home-card-disabled .home-card-name {
  color: var(--ion-color-medium);
}

.home-card-disabled .home-card-button {
  background: var(--ion-color-medium);
  cursor: default;
}

.home-card-icon {
  font-size: 48px;
  color: var(--ion-color-primary);
}

.home-card-disabled .home-card-icon {
  color: var(--ion-color-medium);
}

.home-card-name {
  font-size: 22px;
  font-weight: 600;
  color: var(--ion-text-color);
  text-align: center;
}

.home-card-button {
  padding: 10px 20px;
  background: var(--ion-color-success);
  color: var(--ion-color-success-contrast);
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.home-card-button:hover:not(:disabled) {
  opacity: 0.85;
}

/* Book cards */
.book-card {
  /* Same background as other tiles for now */
}

.book-card:hover {
  background: rgba(var(--ion-color-primary-rgb), 0.1);
  border-color: var(--ion-color-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Mobile adjustments */
@media (max-width: 767px) {
  .home-container {
    padding: 16px;
  }

  .page-title {
    font-size: 36px;
  }

  .home-grid {
    gap: 12px;
    max-width: 100%;
  }

  .home-card {
    padding: 24px 16px;
    min-height: 160px;
  }

  .home-card-icon {
    font-size: 36px;
  }

  .home-card-name {
    font-size: 18px;
  }

  .home-card-button {
    padding: 8px 16px;
    font-size: 13px;
  }
}
</style>