LifeTracker Dashboard

A personal dashboard inspired by SAP SuccessFactors to track custom life events, quotas (like gym off days, leave), and habits (medicine, chores).

Features

• Dual Calendar View: View current and upcoming months simultaneously.
• Balance Tracking: Set quotas (e.g., 20 days leave) and see them deplete.
• Progress Tracking: Visualize category usage with charts.
• Categories Included: Annual Leave, Gym Off Days, Maid Absence, Medicine Tracker, WFH.
• Data Persistence: Uses Browser localStorage so your data is saved on your device.

Tech Stack

• React 18 + TypeScript
• Tailwind CSS for styling
• Recharts for data visualization
• Lucide React for icons

How to Run Locally

1. Clone the repository.
2. Install dependencies:

   npm install

3. Start development server:

   npm start

How to Host on GitHub Pages (Static Hosting)

Since this app uses create-react-app (or similar build tools), follow these steps to host it for free on GitHub:

1. Create a GitHub Repository and push this code to it.
2. Update package.json: Add a homepage field at the top level of your package.json:

   "homepage": "https://<your-username>.github.io/<repo-name>",

3. Install gh-pages:

   npm install --save-dev gh-pages

4. Add Scripts: Add these two lines to the scripts section in package.json:

   "predeploy": "npm run build",
   "deploy": "gh-pages -d build"

5. Deploy: Run the following command in your terminal:

   npm run deploy

This will create a gh-pages branch and publish your static app there.

Configuration

To customize categories (e.g., change "Gym Offs" to "Cheat Meals"), edit constants.tsx. You can change labels, colors, and quota limits there.