📊 NGITUNG

Kelola Usaha Dengan Mudah

A modern, beautiful mobile application for managing business costs and calculating product pricing. Built with React Native and Expo, NGITUNG helps small business owners and entrepreneurs easily calculate Cost of Goods Sold (COGS/BPP) and determine optimal selling prices.

---

✨ Features

• 📝 Create Multiple Business Notes - Organize different products or business ventures separately
• 💰 Fixed Costs Management - Track monthly overhead costs like rent, utilities, salaries
• 📦 Variable Costs Calculation - Manage per-unit costs with quantities (materials, packaging, etc.)
• 📊 Automatic BPP Calculation - Real-time Cost of Goods Sold calculation
• 💵 Profit Margin Control - Set custom profit margins to determine selling prices
• 🎨 Customizable Note Colors - Color-code your business notes for easy identification
• 🔍 Search Functionality - Quickly find specific business notes
• 💾 Persistent Storage - All data is saved locally on your device
• 🌙 Beautiful Dark UI - Modern glassmorphism design with smooth animations
• 📱 Cross-Platform - Works on iOS, Android, and Web

---

📱 Screenshots

Home Screen

Main Dashboard Welcome screen to show all your notes!

Cost Management & Calculations

Fixed Cost Something like tools and stuff

Variable Cost Something like ingredients and such

Calculation Results View BPP and selling price

Results & Settings

Optimal Selling Price Highlight of the Calculations	Cost Composition Calculation Details
Risk Simulation Predict your risks!	Export to PDF Share your Calculations

---

🚀 Getting Started

Prerequisites

• Node.js (v18 or newer)
• npm or yarn
• Expo CLI (optional, can use npx)

Installation

1. Clone the repository

   git clone https://github.com/HHHAAAANNNNN/ngitung-app.git
   cd ngitung-app

2. Install dependencies

   npm install

3. Start the development server

   npx expo start

4. Run the app

   • iOS Simulator: Press i in the terminal
   • Android Emulator: Press a in the terminal
   • Web Browser: Press w in the terminal
   • Physical Device: Scan the QR code with the Expo Go app (iOS | Android)

---

📖 How to Use

1. Create a Business Note

• Tap the "+" floating action button on the home screen
• Enter a name for your business calculation (e.g., "Bakso Ayam", "Kue Brownies")
• Tap "Buat Catatan" to create the note

2. Add Fixed Costs

Fixed costs are monthly expenses that don't change with production volume:

• Tap on your created note
• Navigate to the "Biaya Tetap" section
• Click "+ Tambah Biaya Tetap"
• Enter cost name (e.g., "Sewa Kios", "Gaji Karyawan")
• Enter monthly amount
• Add as many fixed costs as needed

3. Add Variable Costs

Variable costs are per-unit expenses:

• Scroll to the "Biaya Variabel" section
• Click "+ Tambah Biaya Variabel"
• Enter cost name (e.g., "Daging Ayam", "Tepung")
• Enter unit price
• Enter quantity per product
• Add all your variable costs

4. Set Sales Projection & Profit Margin

• Enter "Estimasi Penjualan" (estimated monthly sales units)
• Enter "Margin Keuntungan" (profit margin percentage, e.g., 30 for 30%)

5. Calculate & View Results

• Tap "Hitung" to calculate
• The app will automatically calculate:
  • BPP (Biaya Pokok Produksi) - Cost of Goods Sold per unit
  • Harga Jual - Recommended selling price
• Tap "Lihat Hasil Lengkap" to see detailed breakdown
• Export results as PDF or share them

6. Customize & Manage Notes

• Tap the three-dot menu on any note card
• Choose a custom color for the note badge
• Delete notes you no longer need

---

🛠️ Technology Stack

• React Native 0.81.5 - Cross-platform mobile framework
• Expo ~54.0.30 - Development platform and tools
• TypeScript ~5.9.2 - Type-safe JavaScript
• Expo Router ~6.0.21 - File-based routing
• React Native Reanimated - Smooth animations
• React Native Paper - UI components
• Expo Vector Icons - Icon library
• AsyncStorage - Local data persistence
• Expo Print - PDF export functionality

---

📁 Project Structure

ngitung-app/
├── app/                      # Main application code (Expo Router)
│   ├── (tabs)/              # Tab-based navigation
│   │   ├── detail/          # Cost calculation detail pages
│   │   ├── result.tsx       # Results display page
│   │   └── _layout.tsx      # Tab layout configuration
│   ├── index.tsx            # Home page with notes list
│   └── _layout.tsx          # Root layout
├── src/
│   ├── context/             # React Context providers
│   │   └── NoteContext.tsx  # Note state management
│   └── utils/               # Utility functions
├── assets/                  # Images, fonts, and static files
├── components/              # Reusable UI components
├── constants/               # App constants and configuration
├── screenshots/             # App screenshots for documentation
├── app.json                 # Expo configuration
├── package.json             # Dependencies and scripts
└── tsconfig.json            # TypeScript configuration

---

📜 Available Scripts

• npm start - Start the Expo development server
• npm run android - Open app in Android emulator
• npm run ios - Open app in iOS simulator
• npm run web - Open app in web browser
• npm run lint - Run ESLint to check code quality

---

🤝 Contributing

Contributions are welcome! If you'd like to improve NGITUNG:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

---

📄 License

This project is private. All rights reserved.

---

👨‍💻 Author

HHHAAAANNNNN

• GitHub: @HHHAAAANNNNN

---

🙏 Acknowledgments

• Built with Expo
• UI design inspired by modern glassmorphism trends
• Icons from Expo Vector Icons

---

Made with ❤️ for small business owners and entrepreneurs

If you find this project helpful, please consider giving it a ⭐!