// 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 = `
${project.name}
Started: ${project.date}
|
${project.category}
|
${project.status.replace('-', ' ')}
|
|
|
|
`;
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 = `
${project.name}
${project.category}
Project Description
${project.description}
Progress
Completion
${project.progress}
Start Date
${project.startDate}
Deadline
${project.deadline}
Total Budget
${project.budget}
Amount Paid
${project.paid}
Pending Amount
${project.pending}
Project Images
${project.images.map(img => `
`).join('')}
`;
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(`
Project Report #${id}
CodeVault Pro - Project Report
Generated on: ${new Date().toLocaleDateString()}
Project Summary
Complete project report including timeline, budget, and progress details.
Financial Summary
| Item |
Amount |
| Total Budget |
$12,500.00 |
| Amount Received |
$8,000.00 |
| Pending Amount |
$4,500.00 |
Project Timeline
| Phase |
Status |
Completion Date |
| Planning |
Completed |
2024-01-20 |
| Development |
In Progress |
2024-04-15 |
| Testing |
Pending |
2024-04-30 |
`);
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!`);
} 
`).join('')}