# Daily Notification Test App - Vue 3

A modern Vue 3 + Vite + Capacitor test application for the Daily Notification Plugin, built with vue-facing-decorator for TypeScript class-based components.

## 🚀 Features

- **Vue 3** with Composition API and TypeScript
- **Vite** for fast development and building
- **vue-facing-decorator** for class-based components
- **Pinia** for state management
- **Vue Router** for navigation
- **Capacitor** for native Android functionality
- **Modern UI** with glassmorphism design
- **Responsive** design for mobile and desktop

## 📱 App Structure

```
src/
├── components/          # Reusable Vue components
│   ├── cards/          # Card components (ActionCard, StatusCard, etc.)
│   ├── items/          # List item components
│   ├── layout/         # Layout components (Header, Footer)
│   └── ui/             # UI components (Loading, Error, etc.)
├── stores/             # Pinia stores
│   ├── app.ts         # Global app state
│   └── notifications.ts # Notification management
├── views/              # Page components
│   ├── HomeView.vue   # Dashboard
│   ├── ScheduleView.vue # Schedule notifications
│   ├── NotificationsView.vue # Manage notifications
│   ├── StatusView.vue # System status
│   ├── HistoryView.vue # Notification history
│   └── SettingsView.vue # App settings
├── router/             # Vue Router configuration
├── types/              # TypeScript type definitions
└── utils/              # Utility functions
```

## 🛠️ Development

### Prerequisites

- Node.js 18+ 
- npm or yarn
- Android Studio (for Android development)
- Capacitor CLI

### Installation

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Type checking
npm run type-check

# Linting
npm run lint
```

### Android Development

```bash
# Sync with Capacitor
npm run sync

# Open Android Studio
npm run open

# Run on Android device/emulator
npm run android
```

## 🎨 UI Components

### Class-Based Components

All components use vue-facing-decorator for TypeScript class-based syntax:

```typescript
@Component({
  components: {
    ChildComponent
  }
})
export default class MyComponent extends Vue {
  @Prop() title!: string
  
  private data = ref('')
  
  get computedValue(): string {
    return this.data.value.toUpperCase()
  }
  
  private handleClick(): void {
    // Handle click
  }
}
```

### State Management

Uses Pinia stores for reactive state management:

```typescript
// stores/notifications.ts
export const useNotificationsStore = defineStore('notifications', () => {
  const scheduledNotifications = ref<ScheduledNotification[]>([])
  
  async function scheduleNotification(options: ScheduleOptions): Promise<void> {
    // Schedule logic
  }
  
  return {
    scheduledNotifications,
    scheduleNotification
  }
})
```

## 📊 Features

### Dashboard (Home)
- Quick action cards
- System status overview
- Next scheduled notification
- Recent activity feed

### Schedule Notifications
- Time picker
- Title and message inputs
- Sound and priority options
- URL support for deep linking
- Quick schedule presets

### Notification Management
- View all scheduled notifications
- Cancel notifications
- Status indicators

### System Status
- Permission checks
- Channel status
- Exact alarm settings
- Platform information
- Test notification functionality

### History
- Delivered notification history
- Click and dismiss tracking
- Time-based filtering

## 🔧 Configuration

### Capacitor Config

```typescript
// capacitor.config.ts
const config: CapacitorConfig = {
  appId: 'com.timesafari.dailynotification.androidtest',
  appName: 'Daily Notification Test - Vue 3',
  webDir: 'dist',
  plugins: {
    DailyNotification: {
      storage: 'shared',
      ttlSeconds: 1800,
      prefetchLeadMinutes: 15,
      enableETagSupport: true,
      enableErrorHandling: true,
      enablePerformanceOptimization: true
    }
  }
}
```

### Vite Config

```typescript
// vite.config.ts
export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'dist',
    sourcemap: true
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
})
```

## 🎯 Testing the Plugin

1. **Start Development Server**
   ```bash
   npm run dev
   ```

2. **Build and Sync**
   ```bash
   npm run build
   npm run sync
   ```

3. **Run on Android**
   ```bash
   npm run android
   ```

4. **Test Features**
   - Schedule notifications
   - Check system status
   - View notification history
   - Test clickable notifications

## 📱 Native Features

- **Notification Scheduling** - Schedule daily notifications
- **Permission Management** - Check and request permissions
- **Status Monitoring** - Real-time system status
- **Deep Linking** - URL support in notifications
- **Background Processing** - WorkManager integration

## 🎨 Design System

### Colors
- Primary: Linear gradient (purple to blue)
- Success: #4caf50
- Warning: #ff9800
- Error: #f44336
- Info: #2196f3

### Typography
- Headers: Bold, white with text-shadow
- Body: Regular, rgba white
- Code: Courier New monospace

### Components
- Glassmorphism design with backdrop-filter
- Rounded corners (8px, 12px, 16px)
- Smooth transitions and hover effects
- Responsive grid layouts

## 🚀 Production Build

```bash
# Build for production
npm run build

# Preview production build
npm run preview

# Sync with Capacitor
npm run sync

# Build Android APK
npm run android
```

## 📝 Scripts

- `npm run dev` - Start development server
- `npm run build` - Build for production
- `npm run preview` - Preview production build
- `npm run android` - Run on Android
- `npm run sync` - Sync with Capacitor
- `npm run open` - Open Android Studio
- `npm run lint` - Run ESLint
- `npm run type-check` - TypeScript type checking

## 🔍 Debugging

### Vue DevTools
Install Vue DevTools browser extension for component inspection.

### Capacitor Logs
```bash
# Android logs
adb logcat | grep -i "daily\|notification"

# Capacitor logs
npx cap run android --livereload --external
```

### TypeScript
Enable strict mode in `tsconfig.json` for better type checking.

## 📚 Dependencies

### Core
- Vue 3.4+
- Vite 5.0+
- TypeScript 5.3+
- Capacitor 5.0+

### UI & State
- vue-facing-decorator 3.0+
- Pinia 2.1+
- Vue Router 4.2+

### Development
- ESLint + TypeScript configs
- Vue TSC for type checking
- Modern module resolution

## 🤝 Contributing

1. Follow Vue 3 + TypeScript best practices
2. Use vue-facing-decorator for class components
3. Maintain responsive design
4. Add proper TypeScript types
5. Test on both web and Android

## 📄 License

MIT License - see LICENSE file for details.

---

**Built with ❤️ using Vue 3 + Vite + Capacitor**