aik aesi app bnao jis mein mein apny sary coding projects ko category wise save kr skon, aur har category mein kitny codes hain aur kon se complete ho chuky Hain, kis date ko, kitny bajy, project ki pics, aur baki kch zrori cheezain bhi honi chahiyen, jo project complete ho jay us py tick lgany ka option, jo abhi nae huy wo sb untick hon aur us mein bhi jo zrori cheezain rakhna hon to rakh dena, project complete krny py client se kitny paisy liye, kitny baki hain ye bhi manage krna he aur accounts ki alag alag reports bhi bnani hain jin ko easyly print bhi kia ja sky, ye aik professional look app hona chahiye, jis mein advance technology ko use krty huy advance interface hona chahiye. App bht bhari na ho loading mein bht ziada time na ly. Aesa zbrdast design ho aur futuristic animations honi chahiye. Jb bhi kisi client ko add krna ho to us ki each and everything details save krni hon. Kisi bhi professional app ka look hona lazmi he
b3cd563 verified | // 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!`); | |
| } |