MYND/stuonboarding.html at main · AmyLuSunshine/MYND · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Student Document Tracking</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-50">
<nav class="bg-blue-600 text-white p-4 shadow-lg">
    <div class="container mx-auto">
        <h1 class="text-xl font-bold">Document Tracking & Holds</h1>
    </div>
</nav>

<main class="container mx-auto p-4 space-y-6">
    <!-- Debug Info (temporary) -->
    <div id="debugInfo" class="bg-gray-100 p-4 rounded-lg mb-4 font-mono text-sm">
        Waiting for data...
    </div>

    <!-- Not Started View -->
    <div id="notStartedView" class="hidden">
        <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
            <div class="flex">
                <div class="ml-3">
                    <h3 class="text-lg font-medium text-yellow-800">
                        Onboarding Not Started
                    </h3>
                    <p class="mt-2 text-yellow-700">
                        Please apply for a position first. Once HR approves your application,
                        you will be able to start the onboarding process.
                    </p>
                    <div class="mt-4">
                        <button
                            onclick="window.location.href='job-landing.html'"
                            class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition">
                            View Available Positions
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Onboarding View -->
    <div id="onboardingView" class="hidden">
        <div class="bg-white rounded-lg shadow-md p-6">
            <h2 class="text-2xl font-bold mb-4">Document Status Overview</h2>
            <div class="grid md:grid-cols-3 gap-4">
                <div class="bg-orange-100 p-4 rounded-lg">
                    <h3 class="font-semibold text-orange-800">Documents Pending</h3>
                    <p id="pendingCount" class="text-3xl font-bold text-orange-600">0</p>
                </div>
                <div class="bg-green-100 p-4 rounded-lg">
                    <h3 class="font-semibold text-green-800">Documents Completed</h3>
                    <p id="completedCount" class="text-3xl font-bold text-green-600">0</p>
                </div>
                <div class="bg-blue-100 p-4 rounded-lg">
                    <h3 class="font-semibold text-blue-800">In Processing</h3>
                    <p id="processingCount" class="text-3xl font-bold text-blue-600">0</p>
                </div>
            </div>
        </div>

        <!-- Document Sections -->
        <div class="grid md:grid-cols-2 gap-6 mt-6">
            <div class="bg-white rounded-lg shadow-md p-6">
                <h2 class="text-2xl font-bold mb-4 text-red-600">In-Person Document Holds</h2>
                <div id="inPersonDocs" class="space-y-4">
                    <!-- Will be populated by JavaScript -->
                </div>
            </div>

            <div class="bg-white rounded-lg shadow-md p-6">
                <h2 class="text-2xl font-bold mb-4 text-orange-600">Online Submit Holds</h2>
                <div id="onlineDocs" class="space-y-4">
                    <!-- Will be populated by JavaScript -->
                </div>
            </div>
        </div>
    </div>
</main>

<script>
// Debug function to display raw data
function updateDebugInfo(data) {
    const debugInfo = document.getElementById('debugInfo');
    debugInfo.textContent = JSON.stringify(data, null, 2);
}

async function fetchDocumentStatus() {
    try {
        const userId = localStorage.getItem('userId');
        if (!userId) {
            console.error('No user ID found');
            return;
        }

        console.log('Fetching status for userId:', userId);
        const response = await fetch(`/api/document-status/${userId}`);
        const data = await response.json();

        // Debug display
        updateDebugInfo(data);

        console.log('Received data:', data);

        if (data.success) {
            updateUI(data);
        } else {
            console.error('Error in response:', data);
        }
    } catch (error) {
        console.error('Fetch error:', error);
        updateDebugInfo({ error: error.message });
    }
}

function updateUI(data) {
    console.log('Updating UI with status:', data.onboardingStatus);

    const notStartedView = document.getElementById('notStartedView');
    const onboardingView = document.getElementById('onboardingView');

    if (data.onboardingStatus === 'not-started') {
        notStartedView.classList.remove('hidden');
        onboardingView.classList.add('hidden');
    } else {
        notStartedView.classList.add('hidden');
        onboardingView.classList.remove('hidden');

        // Update counts
        document.getElementById('pendingCount').textContent = data.documentCounts.pending;
        document.getElementById('completedCount').textContent = data.documentCounts.completed;
        document.getElementById('processingCount').textContent = data.documentCounts.processing;

        // Update documents
        updateDocuments(data.documents);
    }
}


async function handleDocumentUpload(documentId) {
    const fileInput = document.createElement('input');
    fileInput.type = 'file';
    fileInput.accept = '.pdf,.doc,.docx,.jpg,.jpeg,.png';

    fileInput.onchange = async (e) => {
        const file = e.target.files[0];
        if (!file) return;

        try {
            const formData = new FormData();
            formData.append('file', file);
            formData.append('emplId', localStorage.getItem('userId'));
            formData.append('documentId', documentId);

            // Show upload status
            const statusEl = document.getElementById(`status-${documentId}`);
            if (statusEl) {
                statusEl.textContent = 'Uploading...';
                statusEl.className = 'text-blue-600';
            }

            const response = await fetch('/api/upload-document', {
                method: 'POST',
                body: formData
            });

            const data = await response.json();

            if (data.success) {
                console.log('Upload successful:', data);
                // Refresh the document status display
                fetchDocumentStatus();
            } else {
                console.error('Upload failed:', data.message);
                if (statusEl) {
                    statusEl.textContent = 'Upload failed: ' + data.message;
                    statusEl.className = 'text-red-600';
                }
            }
        } catch (error) {
            console.error('Upload error:', error);
            alert('Error uploading document: ' + error.message);
        }
    };

    fileInput.click();
}

function updateDocuments(documents) {
    const inPersonDocs = documents.filter(doc => doc.submitInPerson);
    const onlineDocs = documents.filter(doc => !doc.submitInPerson);

    // Update in-person documents
    document.getElementById('inPersonDocs').innerHTML = inPersonDocs.map(doc => `
        <div class="border-l-4 border-red-500 pl-4 py-2">
            <h3 class="font-semibold">${doc.name}</h3>
            <p class="text-sm text-gray-600">Submit to: HR Office (Room S-701)</p>
            <p class="text-sm text-gray-600">Deadline: ${doc.deadline}</p>
            <span class="inline-block mt-2 px-3 py-1 bg-red-100 text-red-800 rounded-full text-sm">
                Required In-Person
            </span>
        </div>
    `).join('');

    // Update online documents
    document.getElementById('onlineDocs').innerHTML = onlineDocs.map(doc => `
        <div class="border-l-4 border-orange-500 pl-4 py-2">
            <h3 class="font-semibold">${doc.name}</h3>
            <p class="text-sm text-gray-600">Status: ${doc.status.charAt(0).toUpperCase() + doc.status.slice(1)}</p>
            <div class="mt-2 flex gap-2">
                ${doc.status === 'pending' ? `
                    <button onclick="handleDocumentUpload('${doc.id}')"
                            class="px-3 py-1 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
                        Upload
                    </button>
                ` : ''}
                <a href="#" class="px-3 py-1 bg-gray-500 text-white rounded hover:bg-gray-600 transition">
                    Download Form
                </a>
            </div>
        </div>
    `).join('');
}

// Initialize page
document.addEventListener('DOMContentLoaded', () => {
    const userId = localStorage.getItem('userId');
    if (!userId) {
        window.location.href = 'index.html';
        return;
    }

    // Initial fetch
    fetchDocumentStatus();

    // Poll for updates
    setInterval(fetchDocumentStatus, 5000);
});
</script>
</body>
</html>