Debt Tracking System သည် အရောင်းဆိုင်များ၊ ဆိုင်ငယ်များအတွက် ဖောက်သည်များ၏ ကြွေးစာရင်းများကို လွယ်ကူစွာ မှတ်တမ်းတင်ပြီး စီမံခန့်ခွဲနိုင်ရန် ဖန်တီးထားသော Web Application တစ်ခုဖြစ်ပါတယ်။ Neo-Brutalist Design Style ဖြင့် ဒီဇိုင်းထုတ်ထားပြီး Mobile-First Responsive ဖြစ်ပါတယ်။
- 👥 ဖောက်သည် စီမံခန့်ခွဲမှု - ဖောက်သည်များကို ထည့်သွင်း၊ ပြင်ဆင်၊ ဖျက်ပစ်နိုင်ပါတယ်
- 📝 ကြွေးမှတ်တမ်း - ကြွေးယူမှုများကို အသေးစိတ် မှတ်တမ်းတင်နိုင်ပါတယ်
- 💰 ငွေရှင်းစာရင်း - ငွေပေးချေမှုများကို လွယ်ကူစွာ မှတ်သားနိုင်ပါတယ်
- 📊 Dashboard - အကြွေးစုစုပေါင်း၊ ဒီနေ့ရငွေ၊ လစဉ်အကြွေး စသည့် Metrics များ
- 🔐 PIN Security - App ကို PIN နံပါတ်ဖြင့် လုံခြုံစွာ ပိတ်ထားနိုင်ပါတယ်
- 💾 Backup & Restore - ဒေတာများကို JSON ဖိုင်အဖြစ် သိမ်းဆည်းပြီး ပြန်လည်ရယူနိုင်ပါတယ်
- 📱 Mobile Responsive - မိုဘိုင်းဖုန်းများတွင် အသုံးပြုရန် အထူးပြုလုပ်ထားပါတယ်
- ⚡ PWA Capable - အင်တာနက်မရှိဘဲ အသုံးပြုနိုင်ပြီး ဖုန်းတွင် Install လုပ်နိုင်ပါတယ်
- 🎨 Neo-Brutalist Design - ခေတ်မီပြီး အသုံးပြုရလွယ်ကူသော UI/UX
- 💾 LocalStorage - Browser တွင် ဒေတာများကို သိမ်းဆည်းထားပါတယ် (Server မလိုပါ)
- 🔍 Search & Filter - ဖောက်သည်များ၊ ကြွေးစာရင်းများကို လွယ်ကူစွာ ရှာဖွေနိုင်ပါတယ်
- Modern web browser (Chrome, Firefox, Safari, Edge)
- No server or installation required!
Browser ၏ menu မှ "Add to Home Screen" သို့မဟုတ် "Install App" ကို နှိပ်ပြီး ဖုန်းတွင် Application တစ်ခုကဲ့သို့ အသုံးပြုနိုင်ပါသည်။
- Clone the repository
git clone https://github.com/RyanWezLive/debt-tracking-system.git- Navigate to the project directory
cd debt-tracking-system- Open
index.htmlin your browser
# Or simply double-click index.html- ဖောက်သည်များ ထည့်ရန် - "ဖောက်သည်များ" tab သို့သွားပြီး အသစ်ထည့်ပါ
- ကြွေးမှတ်ရန် - "ကြွေးမှတ်ရန်" tab တွင် ဖောက်သည်ရွေးပြီး ကြွေးအသေးစိတ်ထည့်ပါ
- ငွေရှင်းရန် - "ငွေရှင်းရန်" tab တွင် ဖောက်သည်ရွေးပြီး ပေးချေမှုမှတ်ပါ
- Dashboard ကြည့်ရန် - "ပင်မစာမျက်နှာ" တွင် အကြွေးစာရင်းများကို အနှစ်ချုပ်ကြည့်ပါ
- Backup လုပ်ရန် - "Settings" tab တွင် Backup လုပ်နိုင်ပါတယ်
debt-tracking-system/
├── index.html # Main HTML file
├── sw.js # Service Worker (PWA)
├── site.webmanifest # PWA Manifest
├── styles/ # CSS files
│ ├── fonts.css # Typography
│ ├── animations.css # Animations
│ ├── brutalist.css # Neo-brutalist styles
│ ├── gradients.css # Color gradients
│ ├── scrollbar.css # Custom scrollbar
│ ├── toast.css # Toast notifications
│ ├── dropdown.css # Dropdown components
│ ├── datepicker.css # Date picker styles
│ ├── pin.css # PIN lock styles
│ └── responsive.css # Mobile responsive
├── scripts/ # JavaScript files
│ ├── utils.js # Utility functions
│ ├── storage.js # Data management
│ ├── customers.js # Customer operations
│ ├── debts.js # Debt tracking
│ ├── payments.js # Payment handling
│ ├── dashboard.js # Dashboard metrics
│ ├── modals.js # Modal dialogs
│ ├── dropdown.js # Dropdown logic
│ ├── settings.js # Backup/restore
│ ├── pin.js # PIN logic
│ ├── pin-ui.js # PIN UI handling
│ └── app.js # Main app
├── LICENSE # MIT License
└── README.md # This file
- HTML5 - Markup structure
- CSS3 - Styling and animations
- JavaScript (Vanilla) - Application logic
- TailwindCSS CDN - Utility-first CSS framework
- LocalStorage API - Client-side data storage
- Service Worker - Offline functionality
- Flatpickr - Date picker component
ဒီ project သည် Neo-Brutalism Design style ကို အသုံးပြုထားပါတယ်:
- ✅ Bold borders and shadows
- ✅ Vibrant color gradients
- ✅ Clear typography
- ✅ Smooth animations
- ✅ Intuitive user interactions
မျက်နှာပြင် ပင်မတွင် အကြွေးစုစုပေါင်း၊ ဒီနေ့ရငွေ၊ ဖောက်သည်ဦးရေ၊ လစဉ်အကြွေး စသည့် အချက်အလက်များကို တွေ့ရမှာဖြစ်ပါတယ်။
ဖောက်သည်များကို ထည့်သွင်း၊ ပြင်ဆင်၊ ဖျက်ပစ်နိုင်ပြီး တစ်ဦးချင်းစီ၏ ကြွေးစာရင်းအသေးစိတ်ကို ကြည့်ရှုနိုင်ပါတယ်။
ကြွေးယူမှုများနှင့် ငွေပေးချေမှုများကို အချိန်နှင့်တစ်ပြေးညီ မှတ်တမ်းတင်နိုင်ပါတယ်။
PIN Lock စနစ်ပါဝင်သောကြောင့် သင့်ဒေတာများကို လုံခြုံစွာ သိမ်းဆည်းထားနိုင်ပါတယ်။
Contributions are what make the open source community amazing! Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE file for more information.
Ryan Wez
- GitHub: @RyanWez
- Website: Debt Tracker
- TailwindCSS - For the utility-first CSS framework
- Google Fonts - For the Inter font family
- Myanmar Unicode community - For Myanmar language support
If you have any questions or need help, please open an issue on GitHub.
Made with ❤️ by Ryan Wez
⭐ Star this repo if you find it helpful!