# Kitchen & Wardrobe Calculator System

A comprehensive modular system for managing kitchen and wardrobe products with separate Admin and Customer dashboards.

## 📁 Project Structure

```
Cost Calculator/
├── login.html                          # Login page for Admin & Customer
├── shared-styles.css                   # Shared CSS for all pages
├── shared-utils.js                     # Shared JavaScript utilities
│
├── Admin Panel/
│   ├── index.html                      # Admin Dashboard
│   ├── css/
│   │   └── admin-styles.css            # Admin-specific styles
│   ├── js/
│   │   └── admin-main.js               # Admin functionality
│   └── images/                         # Admin images/logos folder
│
└── Modular Kitchen Calculator/
    ├── index.html                      # Customer Dashboard
    ├── css/
    │   └── customer-styles.css         # Customer-specific styles
    ├── js/
    │   └── customer-main.js            # Customer functionality
    └── images/                         # Customer images/logos folder
```

## 🚀 Getting Started

### 1. Login Page Access
- Navigate to `login.html` to access the system
- Two separate login forms:
  - **Customer**: Name, Phone, Email, Location
  - **Admin**: Name, Phone, Email

### 2. Demo Credentials

**Customer Demo:**
- Name: John Doe
- Phone: 9876543210
- Email: customer@demo.com
- Location: New Delhi

**Admin Demo:**
- Name: Admin User
- Phone: 9123456789
- Email: admin@demo.com

**Quick Login:** Use Ctrl+1 for customer demo or Ctrl+2 for admin demo

### 3. Data Storage

Currently, the system uses **Local Storage** for data persistence:
- Products, Brands, Categories stored locally
- Customer & Admin login data stored locally
- Cart and costing sheets stored locally

## 🔄 Google Sheets Integration (Setup Required)

To integrate with Google Sheets for permanent data storage:

### Step 1: Create Google Sheet
1. Go to [Google Sheets](https://sheets.google.com)
2. Create a new spreadsheet with these sheets:
   - **Customers** (for both admin & customer logins)
   - **AdminData** (for admin information)
   - **Products** (for product master data)
   - **Orders** (for customer cart/quotes)

### Step 2: Enable Google Sheets API
1. Go to [Google Cloud Console](https://console.cloud.google.com)
2. Create a new project
3. Enable the Google Sheets API
4. Create an API key (Public key)

### Step 3: Get Spreadsheet ID
1. Open your Google Sheet
2. Copy the ID from the URL:
   ```
   https://docs.google.com/spreadsheets/d/{SPREADSHEET_ID}/edit
   ```

### Step 4: Update Configuration
In `shared-utils.js`, update the GoogleSheetsManager class usage:

```javascript
// Example in login.html
const sheetsManager = new GoogleSheetsManager(
  'YOUR_SPREADSHEET_ID_HERE',
  'YOUR_API_KEY_HERE'
);

// Append customer data
await sheetsManager.appendData('Customers', [
  name, phone, email, location, type, timestamp
]);
```

### Step 5: Sheet Column Structure

**Customers Sheet:**
```
Name | Phone | Email | Location | Type | LoginTime
```

**AdminData Sheet:**
```
Name | Phone | Email | LoginTime
```

**Products Sheet:**
```
ProductID | ProductName | Category | Description | ImageURL | Variants
```

**Orders Sheet:**
```
CustomerName | Email | Products | Quantity | Total | ProjectType | Status
```

## 🎯 Admin Panel Features

1. **Product Master**
   - Add/Edit/Delete Products
   - Manage Categories
   - Manage Brands

2. **Variant Management**
   - Add product variants with:
     - Brand
     - Size
     - Rate
     - Image URL

3. **Costing Sheet**
   - Select products and variants
   - Calculate costs
   - Export to CSV

4. **Statistics**
   - Total products count
   - Total variants count
   - Total brands count
   - Total categories count

## 🛍️ Customer Dashboard Features

1. **Product Browsing**
   - Search products
   - Filter by category
   - Filter by brand
   - View product details with images

2. **Shopping Cart**
   - Add items with quantity
   - Update quantities
   - Remove items
   - View cart total

3. **Quote Generation**
   - Select project type
   - Enter room size
   - Choose preferred material
   - Set budget range
   - Specify timeline
   - Get estimated cost
   - Send quote via WhatsApp

## 🔐 Authentication

The system uses Local Storage for session management:
- User type stored in `currentUser` object
- Admin redirected to `/Admin Panel/index.html`
- Customer redirected to `/Modular Kitchen Calculator/index.html`
- Logout clears session and returns to login

## 📱 WhatsApp Integration

Quote requests can be sent via WhatsApp with:
- Customer details
- Project specifications
- Selected products
- Estimated cost
- Additional notes

Configure the WhatsApp number in `customer-main.js`:
```javascript
const whatsappNumber = '919876543210'; // Update with your number
```

## 💾 Data Persistence

### Local Storage Keys
- `currentUser` - Current logged-in user
- `products` - Product master data
- `brands` - Brand data
- `categories` - Category data
- `customers` - Customer login records
- `customerCart` - Customer's shopping cart
- `adminCostingItems` - Admin's costing sheet items

## 🎨 Customization

### Change Color Scheme
Edit `shared-styles.css`:
```css
:root {
  --primary-color: #4f46e5;  /* Main color */
  --success-color: #10b981;  /* Success color */
  --danger-color: #ef4444;   /* Danger color */
}
```

### Add Logo Images
Place logo files in:
- `Admin Panel/images/` for admin logos
- `Modular Kitchen Calculator/images/` for customer logos

Reference in HTML:
```html
<img src="images/logo.png" alt="Logo">
```

## 🐛 Troubleshooting

### User keeps getting logged out
- Check browser's Local Storage is enabled
- Clear cache and try again
- Check console for any JavaScript errors

### Products not showing
- Make sure admin added products first
- Check if data is in Local Storage
- Refresh the page

### WhatsApp not opening
- Update the WhatsApp number in `customer-main.js`
- Make sure phone number is valid international format
- Check browser popup settings

## 📞 Support

For issues or feature requests:
1. Check console for error messages (F12)
2. Verify all files are in correct locations
3. Ensure JavaScript is enabled in browser
4. Check Local Storage usage (should be under 5MB for demo)

## 🔄 Future Enhancements

- [ ] Complete Google Sheets API integration
- [ ] User authentication with Google/Email verification
- [ ] Payment gateway integration
- [ ] Email notifications
- [ ] SMS notifications
- [ ] Order tracking system
- [ ] PDF quote generation
- [ ] Multi-user support with roles
- [ ] Product image upload functionality
- [ ] Inventory management

## 📄 License

This project is provided as-is for demonstration and educational purposes.

## 🎉 Version

**Version 1.0** - Initial Release (Nov 2025)

---

**Note:** Replace demo WhatsApp number, Google Sheets ID, and API key with your actual credentials before production deployment.