# Canaccom Project Structure

## 🎯 **Project Overview**
This is the Canaccom Travel Group Platform - a modern SaaS dashboard for managing group bookings and hotel partnerships.

## 📁 **Core Files**

### **Main Dashboard**
- `dashboard-tailwind-fixed.html` - **Primary dashboard template** (Tailwind CSS + Alpine.js)
- `design-system-tailwind.html` - **Component library** (All UI components and patterns)

### **Assets**
```
assets/
├── css/
│   └── global.css          # Global styles and CSS variables
└── js/
    ├── global.js           # Global JavaScript utilities
    └── dashboard-tailwind.js # Dashboard-specific functionality
```

### **Documentation**
- `README.md` - **Project overview and setup**
- `PRD.md` - **Product requirements document**
- `SYNC-README.md` - **Deployment and sync instructions**

### **Server Configuration**
- `canaccom-key.pem` - **SSH key for server access**
- `sync-to-server.sh` - **Main sync script (Linux/Mac)**
- `sync-to-server-windows.bat` - **Main sync script (Windows)**
- `quick-sync.bat` - **Quick file sync (Windows)**
- `sync-files.bat` - **Comprehensive file sync (Windows)**
- `watch-and-sync.bat` - **Auto-sync with file watching (Windows)**

### **Directories**
```
config/          # Database and server configuration
docs/            # Logo and brand assets
includes/        # PHP includes and components
logs/            # Application logs
admin/           # Admin panel (future)
client/          # Client portal (future)
hotel/           # Hotel management (future)
files/           # Document templates
```

## 🚀 **Quick Start**

### **Development**
1. Open `dashboard-tailwind-fixed.html` in your browser
2. Use `design-system-tailwind.html` as component reference
3. Edit files locally and sync to server

### **Deployment**
- **Windows**: Use `sync-to-server-windows.bat` or `quick-sync.bat`
- **Linux/Mac**: Use `sync-to-server.sh`
- **Auto-sync**: Use `watch-and-sync.bat` for continuous deployment

## 🎨 **Technology Stack**
- **Frontend**: HTML5, Tailwind CSS, Alpine.js
- **Icons**: Font Awesome
- **Charts**: Chart.js
- **Date Picker**: Flatpickr
- **Editor**: Quill.js
- **Backend**: PHP 8.0+
- **Database**: MySQL
- **Server**: AWS EC2

## 📋 **Features**
- ✅ Modern responsive dashboard
- ✅ Dark mode support
- ✅ Interactive components
- ✅ Real-time data updates
- ✅ Form validation
- ✅ Toast notifications
- ✅ File upload
- ✅ Data tables with pagination
- ✅ Kanban boards
- ✅ Calendar widgets
- ✅ User management
- ✅ Settings panels

## 🔧 **Development Workflow**
1. **Local Development**: Edit files in your IDE
2. **Testing**: View changes in browser
3. **Sync**: Use sync scripts to deploy to server
4. **Review**: Check live version at server URL

## 🌐 **Live URLs**
- **Dashboard**: http://52.60.53.55/canaccom/dashboard-tailwind-fixed.html
- **Design System**: http://52.60.53.55/canaccom/design-system-tailwind.html

---

*Last updated: January 2024*