Blame for script.js

// Global State
let state = {
    projects: [],
    clients: [],
    categories: ['Web Development', 'Mobile Apps', 'AI/ML', 'Game Dev', 'Blockchain', 'IoT', 'DevOps', 'Desktop Apps'],
    currentFilter: 'all'
};

// DOM Elements
const recentProjectsTable = document.getElementById('recentProjects');
const projectModal = document.getElementById('projectModal');
let categoryChart = null;
let revenueChart = null;

// Initialize Charts
function initializeCharts() {
    // Category Distribution Chart
    const categoryCtx = document.getElementById('categoryChart').getContext('2d');
    categoryChart = new Chart(categoryCtx, {
        type: 'doughnut',
        data: {
            labels: state.categories,
            datasets: [{
                data: [15, 8, 6, 4, 3, 2, 2, 2],
                backgroundColor: [
                    '#6366f1', '#f59e0b', '#10b981', '#ef4444', '#8b5cf6', '#06b6d4', '#f97316', '#84cc16'
                ],
                borderWidth: 2,
                borderColor: '#0f172a'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'right',
                    labels: {
                        color: '#cbd5e1',
                        padding: 20
                    }
                }
            },
            animation: {
                animateScale: true,
                animateRotate: true
            }
        }
    });

    // Revenue Chart
    const revenueCtx = document.getElementById('revenueChart').getContext('2d');
    revenueChart = new Chart(revenueCtx, {
        type: 'line',
        data: {
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'],
            datasets: [{
                label: 'Revenue',
                data: [4500, 5200, 7800, 9200, 12500, 14800, 16500],
                borderColor: '#f59e0b',
                backgroundColor: 'rgba(245, 158, 11, 0.1)',
                borderWidth: 3,
                fill: true,
                tension: 0.4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    labels: {
                        color: '#cbd5e1'
                    }
                }
            },
            scales: {
                x: {
                    grid: {
                        color: 'rgba(255, 255, 255, 0.1)'
                    },
                    ticks: {
                        color: '#cbd5e1'
                    }
                },
                y: {
                    grid: {
                        color: 'rgba(255, 255, 255, 0.1)'
                    },
                    ticks: {
                        color: '#cbd5e1',
                        callback: function(value) {
                            return '$' + value;
                        }
                    }
                }
            }
        }
    });
}

// Load Recent Projects
function loadRecentProjects() {
    const sampleProjects = [
        {
            id: 1,
            name: 'E-Commerce Platform',
            category: 'Web Development',
            status: 'complete',
            completion: '100%',
            client: 'TechCorp Inc.',
            date: '2024-01-15',
            amount: '$12,500',
            paid: true
        },
        {
            id: 2,
            name: 'Fitness Mobile App',
            category: 'Mobile Apps',
            status: 'in-progress',
            completion: '75%',
            client: 'FitLife LLC',
            date: '2024-02-20',
            amount: '$8,000',
            paid: false
        },
        {
            id: 3,
            name: 'AI Chat Assistant',
            category: 'AI/ML',
            status: 'in-progress',
            completion: '60%',
            client: 'Innovate AI',
            date: '2024-03-10',
            amount: '$15,000',
            paid: true
        },
        {
            id: 4,
            name: 'Blockchain Wallet',
            category: 'Blockchain',
            status: 'pending',
            completion: '30%',
            client: 'CryptoWorks',
            date: '2024-03-25',
            amount: '$20,000',
            paid: false
        },
        {
            id: 5,
            name: 'Game Engine',
            category: 'Game Dev',
            status: 'complete',
            completion: '100%',
            client: 'GameDev Studio',
            date: '2024-01-30',
            amount: '$25,000',
            paid: true
        }
    ];

    recentProjectsTable.innerHTML = '';
    sampleProjects.forEach(project => {
        const row = document.createElement('tr');
        row.className = 'border-b border-gray-700 hover:bg-gray-800/50 transition-colors';
        row.innerHTML = `
            <td class="py-4">
                <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary/20 to-secondary/20 flex items-center justify-center">
                        <i data-feather="folder" class="text-primary"></i>
                    </div>
                    <div>
                        <h4 class="font-medium">${project.name}</h4>
                        <p class="text-sm text-gray-400">Started: ${project.date}</p>
                    </div>
                </div>
            </td>
            <td class="py-4">
                <span class="px-3 py-1 rounded-full text-xs bg-gray-700 text-gray-300">${project.category}</span>
            </td>
            <td class="py-4">
                <span class="status-badge status-${project.status}">${project.status.replace('-', ' ')}</span>
            </td>
            <td class="py-4">
                <div class="flex items-center space-x-2">
                    <div class="w-24 h-2 bg-gray-700 rounded-full overflow-hidden">
                        <div class="h-full bg-gradient-to-r from-primary to-secondary" style="width: ${project.completion}"></div>
                    </div>
                    <span class="text-sm">${project.completion}</span>
                </div>
            </td>
            <td class="py-4">
                <div class="flex items-center space-x-2">
                    <div class="w-8 h-8 rounded-full bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
                        <i data-feather="user" class="text-white text-xs"></i>
                    </div>
                    <span>${project.client}</span>
                </div>
            </td>
            <td class="py-4">
                <div class="flex space-x-2">
                    <button class="w-8 h-8 rounded-lg bg-gray-700 hover:bg-gray-600 flex items-center justify-center transition-colors" onclick="viewProject(${project.id})" title="View Details">
                        <i data-feather="eye"></i>
                    </button>
                    <button class="w-8 h-8 rounded-lg bg-primary/20 hover:bg-primary/30 flex items-center justify-center transition-colors" onclick="editProject(${project.id})" title="Edit">
                        <i data-feather="edit-2"></i>
                    </button>
                    <button class="w-8 h-8 rounded-lg ${project.paid ? 'bg-green-500/20 hover:bg-green-500/30' : 'bg-red-500/20 hover:bg-red-500/30'} flex items-center justify-center transition-colors" onclick="togglePayment(${project.id})" title="${project.paid ? 'Mark as Unpaid' : 'Mark as Paid'}">
                        <i data-feather="${project.paid ? 'check-circle' : 'x-circle'}"></i>
                    </button>
                </div>
            </td>
        `;
        recentProjectsTable.appendChild(row);
    });
    feather.replace();
}

// View Project Details
function viewProject(id) {
    const project = {
        id: id,
        name: 'Sample Project Details',
        description: 'Detailed information about the project including requirements, progress, and client communications.',
        category: 'Web Development',
        status: 'in-progress',
        startDate: '2024-01-15',
        deadline: '2024-04-30',
        client: 'TechCorp Inc.',
        budget: '$12,500',
        paid: '$8,000',
        pending: '$4,500',
        progress: '75%',
        images: [
            'http://static.photos/technology/640x360/1',
            'http://static.photos/technology/640x360/2',
            'http://static.photos/technology/640x360/3'
        ]
    };

    projectModal.innerHTML = `
        <div class="space-y-6">
            <div class="flex justify-between items-start">
                <div>
                    <h3 class="text-2xl font-bold">${project.name}</h3>
                    <p class="text-gray-400 mt-2">${project.category}</p>
                </div>
                <button onclick="closeModal()" class="w-10 h-10 rounded-full bg-gray-700 hover:bg-gray-600 flex items-center justify-center transition-colors">
                    <i data-feather="x"></i>
                </button>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <h4 class="font-semibold mb-2">Project Description</h4>
                    <p class="text-gray-300">${project.description}</p>
                </div>
                <div>
                    <h4 class="font-semibold mb-2">Progress</h4>
                    <div class="space-y-4">
                        <div>
                            <div class="flex justify-between mb-1">
                                <span>Completion</span>
                                <span>${project.progress}</span>
                            </div>
                            <div class="w-full h-3 bg-gray-700 rounded-full overflow-hidden">
                                <div class="h-full bg-gradient-to-r from-primary to-secondary" style="width: ${project.progress}"></div>
                            </div>
                        </div>
                        <div class="flex justify-between">
                            <div>
                                <p class="text-sm text-gray-400">Start Date</p>
                                <p class="font-medium">${project.startDate}</p>
                            </div>
                            <div>
                                <p class="text-sm text-gray-400">Deadline</p>
                                <p class="font-medium">${project.deadline}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div class="bg-gray-700/30 p-4 rounded-xl">
                    <p class="text-sm text-gray-400">Total Budget</p>
                    <p class="text-2xl font-bold">${project.budget}</p>
                </div>
                <div class="bg-green-500/10 p-4 rounded-xl">
                    <p class="text-sm text-gray-400">Amount Paid</p>
                    <p class="text-2xl font-bold text-green-400">${project.paid}</p>
                </div>
                <div class="bg-red-500/10 p-4 rounded-xl">
                    <p class="text-sm text-gray-400">Pending Amount</p>
                    <p class="text-2xl font-bold text-red-400">${project.pending}</p>
                </div>
            </div>
            
            <div>
                <h4 class="font-semibold mb-3">Project Images</h4>
                <div class="grid grid-cols-3 gap-4">
                    ${project.images.map(img => `
                        <div class="aspect-video rounded-lg overflow-hidden">
                            <img src="${img}" alt="Project Screenshot" class="w-full h-full object-cover hover:scale-110 transition-transform duration-300">
                        </div>
                    `).join('')}
                </div>
            </div>
            
            <div class="flex justify-end space-x-4">
                <button onclick="closeModal()" class="px-6 py-3 bg-gray-700 hover:bg-gray-600 rounded-lg font-medium transition-colors">
                    Close
                </button>
                <button onclick="generateReport(${id})" class="px-6 py-3 bg-primary hover:bg-primary/80 rounded-lg font-medium flex items-center space-x-2 transition-colors">
                    <i data-feather="printer"></i>
                    <span>Print Report</span>
                </button>
            </div>
        </div>
    `;
    
    projectModal.classList.remove('hidden');
    projectModal.classList.add('flex');
    feather.replace();
}

// Edit Project
function editProject(id) {
    alert(`Editing project #${id} - Feature coming soon!`);
}

// Toggle Payment Status
function togglePayment(id) {
    alert(`Toggling payment status for project #${id} - Feature coming soon!`);
}

// Generate Report
function generateReport(id) {
    const printWindow = window.open('', '_blank');
    printWindow.document.write(`
        <html>
        <head>
            <title>Project Report #${id}</title>
            <style>
                body { font-family: Arial, sans-serif; margin: 40px; }
                h1 { color: #333; }
                .section { margin: 30px 0; }
                table { width: 100%; border-collapse: collapse; }
                th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
                th { background-color: #f5f5f5; }
                .total { font-weight: bold; font-size: 1.2em; }
                @media print {
                    .no-print { display: none; }
                }
            </style>
        </head>
        <body>
            <h1>CodeVault Pro - Project Report</h1>
            <p>Generated on: ${new Date().toLocaleDateString()}</p>
            
            <div class="section">
                <h2>Project Summary</h2>
                <p>Complete project report including timeline, budget, and progress details.</p>
            </div>
            
            <div class="section">
                <h2>Financial Summary</h2>
                <table>
                    <tr>
                        <th>Item</th>
                        <th>Amount</th>
                    </tr>
                    <tr>
                        <td>Total Budget</td>
                        <td>$12,500.00</td>
                    </tr>
                    <tr>
                        <td>Amount Received</td>
                        <td>$8,000.00</td>
                    </tr>
                    <tr class="total">
                        <td>Pending Amount</td>
                        <td>$4,500.00</td>
                    </tr>
                </table>
            </div>
            
            <div class="section">
                <h2>Project Timeline</h2>
                <table>
                    <tr>
                        <th>Phase</th>
                        <th>Status</th>
                        <th>Completion Date</th>
                    </tr>
                    <tr>
                        <td>Planning</td>
                        <td>Completed</td>
                        <td>2024-01-20</td>
                    </tr>
                    <tr>
                        <td>Development</td>
                        <td>In Progress</td>
                        <td>2024-04-15</td>
                    </tr>
                    <tr>
                        <td>Testing</td>
                        <td>Pending</td>
                        <td>2024-04-30</td>
                    </tr>
                </table>
            </div>
            
            <div class="section no-print">
                <button onclick="window.print()">Print Report</button>
            </div>
        </body>
        </html>
    `);
    printWindow.document.close();
}

// Close Modal
function closeModal() {
    projectModal.classList.add('hidden');
    projectModal.classList.remove('flex');
}

// Print Report
window.printReport = function() {
    window.print();
}

// Filter Projects
function filterProjects(category) {
    state.currentFilter = category;
    alert(`Filtering projects by: ${category === 'all' ? 'All Categories' : category}`);
}

// Add New Project
function addNewProject() {
    alert('Add New Project feature coming soon!');
}

// Add New Client
function addNewClient() {
    alert('Add New Client feature coming soon!');
}

// Initialize app
document.addEventListener('DOMContentLoaded', function() {
    // Load initial data
    loadRecentProjects();
    
    // Add event listeners for navigation
    document.addEventListener('click', function(e) {
        if (e.target.closest('[data-nav]')) {
            const page = e.target.closest('[data-nav]').getAttribute('data-nav');
            navigateTo(page);
        }
    });
});

// Navigation function
function navigateTo(page) {
    // In a real app, this would load different pages
    alert(`Navigating to ${page} - Feature coming soon!`);
}