Spaces:

Cezarxil
/

app

Running

app

File size: 22,821 Bytes

ada55c0

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Client Tracker</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        .calendar-day {
            min-height: 100px;
        }
        .calendar-day.today {
            background-color: #f0f9ff;
        }
        .client-event {
            font-size: 0.8rem;
            border-left: 3px solid;
        }
        .client-event:hover {
            transform: scale(1.02);
        }
        #addClientModal {
            transition: all 0.3s ease;
        }
        .modal-open {
            opacity: 1;
            pointer-events: all;
        }
        .modal-closed {
            opacity: 0;
            pointer-events: none;
        }
    </style>
</head>
<body class="bg-gray-50">
    <div class="container mx-auto px-4 py-8">
        <!-- Header -->
        <header class="flex flex-col md:flex-row justify-between items-center mb-8">
            <h1 class="text-3xl font-bold text-blue-600 mb-4 md:mb-0">Client Tracker</h1>
            <div class="flex items-center space-x-4">
                <button id="prevMonth" class="p-2 rounded-full hover:bg-gray-200">
                    <i class="fas fa-chevron-left"></i>
                </button>
                <h2 id="currentMonth" class="text-xl font-semibold">January 2023</h2>
                <button id="nextMonth" class="p-2 rounded-full hover:bg-gray-200">
                    <i class="fas fa-chevron-right"></i>
                </button>
                <button id="todayBtn" class="px-4 py-2 bg-blue-100 text-blue-600 rounded-lg hover:bg-blue-200">
                    Today
                </button>
                <button id="addClientBtn" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                    <i class="fas fa-plus mr-2"></i>Add Client
                </button>
            </div>
        </header>

        <!-- Calendar Grid -->
        <div class="bg-white rounded-lg shadow overflow-hidden">
            <!-- Weekday Headers -->
            <div class="grid grid-cols-7 bg-gray-100">
                <div class="py-2 text-center font-medium text-gray-500">Sun</div>
                <div class="py-2 text-center font-medium text-gray-500">Mon</div>
                <div class="py-2 text-center font-medium text-gray-500">Tue</div>
                <div class="py-2 text-center font-medium text-gray-500">Wed</div>
                <div class="py-2 text-center font-medium text-gray-500">Thu</div>
                <div class="py-2 text-center font-medium text-gray-500">Fri</div>
                <div class="py-2 text-center font-medium text-gray-500">Sat</div>
            </div>
            
            <!-- Calendar Days -->
            <div id="calendarDays" class="grid grid-cols-7 border-t border-l border-gray-200">
                <!-- Days will be populated by JavaScript -->
            </div>
        </div>

        <!-- Stats Section -->
        <div class="mt-8 grid grid-cols-1 md:grid-cols-3 gap-4">
            <div class="bg-white p-4 rounded-lg shadow">
                <h3 class="text-lg font-semibold text-gray-700 mb-2">Upcoming Appointments</h3>
                <p id="upcomingCount" class="text-3xl font-bold text-blue-600">0</p>
            </div>
            <div class="bg-white p-4 rounded-lg shadow">
                <h3 class="text-lg font-semibold text-gray-700 mb-2">Total Clients</h3>
                <p id="totalClients" class="text-3xl font-bold text-green-600">0</p>
            </div>
            <div class="bg-white p-4 rounded-lg shadow">
                <h3 class="text-lg font-semibold text-gray-700 mb-2">Recent Follow-ups</h3>
                <p id="recentFollowups" class="text-3xl font-bold text-purple-600">0</p>
            </div>
        </div>
    </div>

    <!-- Add Client Modal -->
    <div id="addClientModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center modal-closed">
        <div class="bg-white rounded-lg p-6 w-full max-w-md">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-xl font-semibold">Add New Client</h3>
                <button id="closeModal" class="text-gray-500 hover:text-gray-700">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <form id="clientForm" class="space-y-4">
                <div>
                    <label for="clientName" class="block text-sm font-medium text-gray-700">Client Name</label>
                    <input type="text" id="clientName" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label for="appointmentDate" class="block text-sm font-medium text-gray-700">Appointment Date</label>
                    <input type="date" id="appointmentDate" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label for="appointmentTime" class="block text-sm font-medium text-gray-700">Appointment Time</label>
                    <input type="time" id="appointmentTime" required class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label for="clientEmail" class="block text-sm font-medium text-gray-700">Email</label>
                    <input type="email" id="clientEmail" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label for="clientPhone" class="block text-sm font-medium text-gray-700">Phone</label>
                    <input type="tel" id="clientPhone" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500">
                </div>
                <div>
                    <label for="clientNotes" class="block text-sm font-medium text-gray-700">Notes</label>
                    <textarea id="clientNotes" rows="3" class="mt-1 block w-full border border-gray-300 rounded-md shadow-sm py-2 px-3 focus:outline-none focus:ring-blue-500 focus:border-blue-500"></textarea>
                </div>
                <div class="flex justify-end space-x-3">
                    <button type="button" id="cancelAddClient" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">
                        Cancel
                    </button>
                    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
                        Save Client
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Client Details Modal -->
    <div id="clientDetailsModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center modal-closed">
        <div class="bg-white rounded-lg p-6 w-full max-w-md">
            <div class="flex justify-between items-center mb-4">
                <h3 id="clientDetailsTitle" class="text-xl font-semibold">Client Details</h3>
                <button id="closeDetailsModal" class="text-gray-500 hover:text-gray-700">
                    <i class="fas fa-times"></i>
                </button>
            </div>
            <div id="clientDetailsContent" class="space-y-3">
                <!-- Client details will be populated here -->
            </div>
            <div class="mt-6 flex justify-between">
                <button id="deleteClientBtn" class="px-4 py-2 bg-red-100 text-red-600 rounded-md hover:bg-red-200">
                    Delete
                </button>
                <button id="editClientBtn" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
                    Edit
                </button>
            </div>
        </div>
    </div>

    <script>
        // Initialize variables
        let currentDate = new Date();
        let clients = JSON.parse(localStorage.getItem('clients')) || [];
        let selectedClientId = null;

        // DOM Elements
        const calendarDays = document.getElementById('calendarDays');
        const currentMonth = document.getElementById('currentMonth');
        const prevMonthBtn = document.getElementById('prevMonth');
        const nextMonthBtn = document.getElementById('nextMonth');
        const todayBtn = document.getElementById('todayBtn');
        const addClientBtn = document.getElementById('addClientBtn');
        const addClientModal = document.getElementById('addClientModal');
        const closeModal = document.getElementById('closeModal');
        const cancelAddClient = document.getElementById('cancelAddClient');
        const clientForm = document.getElementById('clientForm');
        const clientDetailsModal = document.getElementById('clientDetailsModal');
        const closeDetailsModal = document.getElementById('closeDetailsModal');
        const deleteClientBtn = document.getElementById('deleteClientBtn');
        const editClientBtn = document.getElementById('editClientBtn');
        const upcomingCount = document.getElementById('upcomingCount');
        const totalClients = document.getElementById('totalClients');
        const recentFollowups = document.getElementById('recentFollowups');

        // Event Listeners
        prevMonthBtn.addEventListener('click', () => {
            currentDate.setMonth(currentDate.getMonth() - 1);
            renderCalendar();
        });

        nextMonthBtn.addEventListener('click', () => {
            currentDate.setMonth(currentDate.getMonth() + 1);
            renderCalendar();
        });

        todayBtn.addEventListener('click', () => {
            currentDate = new Date();
            renderCalendar();
        });

        addClientBtn.addEventListener('click', () => {
            // Set default date to today
            const today = new Date();
            const formattedDate = today.toISOString().split('T')[0];
            document.getElementById('appointmentDate').value = formattedDate;
            
            // Set default time to next hour
            const nextHour = today.getHours() + 1;
            document.getElementById('appointmentTime').value = `${nextHour.toString().padStart(2, '0')}:00`;
            
            addClientModal.classList.remove('modal-closed');
            addClientModal.classList.add('modal-open');
        });

        closeModal.addEventListener('click', closeModals);
        cancelAddClient.addEventListener('click', closeModals);
        closeDetailsModal.addEventListener('click', closeModals);

        clientForm.addEventListener('submit', (e) => {
            e.preventDefault();
            addNewClient();
        });

        deleteClientBtn.addEventListener('click', deleteClient);
        editClientBtn.addEventListener('click', editClient);

        // Functions
        function renderCalendar() {
            // Clear previous calendar days
            calendarDays.innerHTML = '';

            // Set current month text
            currentMonth.textContent = new Intl.DateTimeFormat('en-US', { 
                month: 'long', 
                year: 'numeric' 
            }).format(currentDate);

            // Get first day of month and total days in month
            const firstDay = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1);
            const lastDay = new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0);
            const daysInMonth = lastDay.getDate();

            // Get day of week for first day (0 = Sunday, 6 = Saturday)
            const startingDay = firstDay.getDay();

            // Get today's date for comparison
            const today = new Date();
            const isCurrentMonth = today.getFullYear() === currentDate.getFullYear() && 
                                 today.getMonth() === currentDate.getMonth();

            // Add empty cells for days before the first day of the month
            for (let i = 0; i < startingDay; i++) {
                const dayElement = document.createElement('div');
                dayElement.className = 'calendar-day border-r border-b border-gray-200 p-2 bg-gray-50';
                calendarDays.appendChild(dayElement);
            }

            // Add cells for each day of the month
            for (let day = 1; day <= daysInMonth; day++) {
                const dayElement = document.createElement('div');
                dayElement.className = 'calendar-day border-r border-b border-gray-200 p-2';
                
                // Highlight today's date
                if (isCurrentMonth && day === today.getDate()) {
                    dayElement.classList.add('today');
                }

                // Add day number
                const dayNumber = document.createElement('div');
                dayNumber.className = 'text-right font-medium';
                dayNumber.textContent = day;
                dayElement.appendChild(dayNumber);

                // Add client events for this day
                const dayDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), day);
                const clientsForDay = getClientsForDate(dayDate);
                
                clientsForDay.forEach(client => {
                    const eventElement = document.createElement('div');
                    eventElement.className = 'client-event mb-1 p-1 rounded bg-blue-50 border-l-blue-500 cursor-pointer hover:shadow';
                    eventElement.innerHTML = `
                        <div class="font-medium text-blue-700">${client.time}</div>
                        <div class="text-blue-600 truncate">${client.name}</div>
                    `;
                    eventElement.addEventListener('click', () => showClientDetails(client.id));
                    dayElement.appendChild(eventElement);
                });

                calendarDays.appendChild(dayElement);
            }

            updateStats();
        }

        function getClientsForDate(date) {
            return clients.filter(client => {
                const clientDate = new Date(client.date);
                return clientDate.getFullYear() === date.getFullYear() &&
                       clientDate.getMonth() === date.getMonth() &&
                       clientDate.getDate() === date.getDate();
            }).sort((a, b) => a.time.localeCompare(b.time));
        }

        function addNewClient() {
            const name = document.getElementById('clientName').value;
            const date = document.getElementById('appointmentDate').value;
            const time = document.getElementById('appointmentTime').value;
            const email = document.getElementById('clientEmail').value;
            const phone = document.getElementById('clientPhone').value;
            const notes = document.getElementById('clientNotes').value;

            const newClient = {
                id: Date.now().toString(),
                name,
                date,
                time,
                email,
                phone,
                notes,
                createdAt: new Date().toISOString()
            };

            clients.push(newClient);
            saveClients();
            renderCalendar();
            closeModals();
            clientForm.reset();
        }

        function showClientDetails(clientId) {
            selectedClientId = clientId;
            const client = clients.find(c => c.id === clientId);
            
            if (!client) return;

            document.getElementById('clientDetailsTitle').textContent = client.name;
            
            const detailsContent = document.getElementById('clientDetailsContent');
            detailsContent.innerHTML = `
                <div class="flex items-center">
                    <i class="fas fa-calendar-day text-blue-500 mr-2"></i>
                    <div>
                        <div class="text-sm text-gray-500">Date</div>
                        <div>${formatDate(client.date)} at ${client.time}</div>
                    </div>
                </div>
                ${client.email ? `
                <div class="flex items-center">
                    <i class="fas fa-envelope text-blue-500 mr-2"></i>
                    <div>
                        <div class="text-sm text-gray-500">Email</div>
                        <div>${client.email}</div>
                    </div>
                </div>` : ''}
                ${client.phone ? `
                <div class="flex items-center">
                    <i class="fas fa-phone text-blue-500 mr-2"></i>
                    <div>
                        <div class="text-sm text-gray-500">Phone</div>
                        <div>${client.phone}</div>
                    </div>
                </div>` : ''}
                ${client.notes ? `
                <div class="flex items-start">
                    <i class="fas fa-sticky-note text-blue-500 mr-2 mt-1"></i>
                    <div>
                        <div class="text-sm text-gray-500">Notes</div>
                        <div>${client.notes}</div>
                    </div>
                </div>` : ''}
            `;

            clientDetailsModal.classList.remove('modal-closed');
            clientDetailsModal.classList.add('modal-open');
        }

        function deleteClient() {
            clients = clients.filter(client => client.id !== selectedClientId);
            saveClients();
            renderCalendar();
            closeModals();
        }

        function editClient() {
            const client = clients.find(c => c.id === selectedClientId);
            if (!client) return;

            // Fill the form with client data
            document.getElementById('clientName').value = client.name;
            document.getElementById('appointmentDate').value = client.date;
            document.getElementById('appointmentTime').value = client.time;
            document.getElementById('clientEmail').value = client.email || '';
            document.getElementById('clientPhone').value = client.phone || '';
            document.getElementById('clientNotes').value = client.notes || '';

            // Change form to update mode
            clientForm.removeEventListener('submit', addNewClient);
            clientForm.addEventListener('submit', updateClient);

            // Show the add client modal
            closeModals();
            addClientModal.classList.remove('modal-closed');
            addClientModal.classList.add('modal-open');
        }

        function updateClient(e) {
            e.preventDefault();
            
            const name = document.getElementById('clientName').value;
            const date = document.getElementById('appointmentDate').value;
            const time = document.getElementById('appointmentTime').value;
            const email = document.getElementById('clientEmail').value;
            const phone = document.getElementById('clientPhone').value;
            const notes = document.getElementById('clientNotes').value;

            const updatedClient = {
                id: selectedClientId,
                name,
                date,
                time,
                email,
                phone,
                notes,
                createdAt: clients.find(c => c.id === selectedClientId).createdAt
            };

            clients = clients.map(client => 
                client.id === selectedClientId ? updatedClient : client
            );

            saveClients();
            renderCalendar();
            closeModals();
            clientForm.reset();

            // Reset form to add mode
            clientForm.removeEventListener('submit', updateClient);
            clientForm.addEventListener('submit', addNewClient);
        }

        function closeModals() {
            addClientModal.classList.remove('modal-open');
            addClientModal.classList.add('modal-closed');
            clientDetailsModal.classList.remove('modal-open');
            clientDetailsModal.classList.add('modal-closed');
        }

        function saveClients() {
            localStorage.setItem('clients', JSON.stringify(clients));
            updateStats();
        }

        function formatDate(dateString) {
            const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
            return new Date(dateString).toLocaleDateString('en-US', options);
        }

        function updateStats() {
            // Upcoming appointments (next 7 days)
            const today = new Date();
            const nextWeek = new Date(today);
            nextWeek.setDate(today.getDate() + 7);
            
            const upcoming = clients.filter(client => {
                const clientDate = new Date(client.date);
                return clientDate >= today && clientDate <= nextWeek;
            });
            
            upcomingCount.textContent = upcoming.length;
            totalClients.textContent = clients.length;
            
            // Recent follow-ups (last 7 days)
            const lastWeek = new Date(today);
            lastWeek.setDate(today.getDate() - 7);
            
            const recent = clients.filter(client => {
                const clientDate = new Date(client.createdAt);
                return clientDate >= lastWeek && clientDate <= today;
            });
            
            recentFollowups.textContent = recent.length;
        }

        // Initialize the calendar
        renderCalendar();
    </script>
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Cezarxil/app" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>