Aplikasi desktop timer untuk layanan fotocopy dengan sistem billing otomatis. Dibangun menggunakan Tauri + React + TypeScript.

• 🆓 10 Menit Gratis - Waktu fotocopy gratis untuk 10 menit pertama
• � Sistem Billing Otomatis - Rp 5.000 per 10 menit setelah waktu gratis habis
• 🎨 Tampilan Modern - UI yang indah dengan gradient dan animasi halus
• ⏸️ Kontrol Lengkap - Start, Pause, Stop, dan Reset timer
• 📱 Responsive Design - Tampilan yang baik di berbagai ukuran layar
• 🔄 Real-time Updates - Update biaya dan waktu secara real-time
• 🖥️ Fullscreen Mode - Aplikasi berjalan dalam mode fullscreen tanpa minimizecopy Center - Professional Photocopy & Print Services

Aplikasi desktop timer untuk layanan fotocopy dengan sistem billing otomatis. Dibangun menggunakan Tauri + React + TypeScript.

• 🆓 10 Menit Gratis - Waktu tracking gratis untuk 10 menit pertama
• 💰 Sistem Billing Otomatis - Rp 5.000 per 10 menit setelah waktu gratis habis
• 🎨 Tampilan Modern - UI yang indah dengan gradient dan animasi halus
• ⏸️ Kontrol Lengkap - Start, Pause, Stop, dan Reset timer
• 📱 Responsive Design - Tampilan yang baik di berbagai ukuran layar
• 🔄 Real-time Updates - Update biaya dan waktu secara real-time

1. 10 menit pertama: GRATIS
2. Setelahnya: Rp 5.000 per 10 menit (atau bagian dari 10 menit)
3. Contoh:
   • 15 menit = Rp 5.000 (10 menit gratis + 5 menit billing)
   • 25 menit = Rp 10.000 (10 menit gratis + 15 menit billing = 2 periode)

# Install dependencies
npm install

# Run development server
npm run dev

# Run Tauri app
npm run tauri dev

# Build for production
npm run build

# Build Tauri app
npm run tauri build

Untuk melihat tampilan aplikasi tanpa setup development:

# Run simple HTTP server
python -m http.server 8000

# Buka browser ke: http://localhost:8000/demo.html

• Framework: Tauri - Cross-platform desktop apps
• Frontend: React + TypeScript
• Build Tool: Vite
• Styling: CSS3 dengan Custom Properties dan Animations

• Gradient Background: Purple to blue gradient yang memukau
• Glass Morphism: Container dengan backdrop blur effect
• Smooth Animations: Hover effects dan pulse animations
• Modern Typography: Inter font family
• Color-coded Status: Visual indicators untuk status timer
• Responsive Layout: Grid dan flexbox untuk tata letak yang rapi

├── src/
│   ├── App.tsx          # Komponen utama aplikasi
│   ├── App.css          # Styling utama
│   ├── main.tsx         # Entry point React
│   └── assets/
├── src-tauri/           # Konfigurasi Tauri
├── public/              # Asset publik
├── demo.html            # Demo standalone HTML
├── index.html           # HTML template
└── package.json         # Dependencies dan scripts

Konstanta yang dapat diubah di App.tsx:

const FREE_TIME_LIMIT = 600;        // 10 menit gratis (detik)
const COST_PER_10_MINUTES = 5000;   // Biaya per 10 menit
const BILLING_INTERVAL = 600;       // Interval billing (detik)

Warna utama dapat diubah di App.css:

:root {
  --primary: #667eea;      /* Warna utama */
  --secondary: #764ba2;    /* Warna sekunder */
  --success: #48bb78;      /* Warna sukses */
  --warning: #ed8936;      /* Warna warning */
  --danger: #f56565;       /* Warna bahaya */
}

Jika mendapat error tentang versi Node.js:

# Upgrade Node.js ke versi 20.19+ atau 22.12+
# Atau gunakan nvm untuk management versi Node.js

Jika port 1420 sudah digunakan:

# Gunakan port berbeda
npm run dev -- --port 3000

Jika ada error CSS, coba:

# Hapus node_modules dan install ulang
rm -rf node_modules package-lock.json
npm install

MIT License - Silakan gunakan dan modifikasi sesuai kebutuhan.

Pull requests dan suggestions sangat welcome! Untuk perubahan besar, silakan buka issue terlebih dahulu.

Built with ❤️ using modern web technologies