Version 1.0 upload

src/widgets/AccountSettingsWidget.ts

@@ -0,0 +1,119 @@
+// widgets/AccountSettingsWidget.ts
+import { Widget } from '../components/Widget';
+import { createElement } from '../utils/utils';
+import { globalAPI, ApiResponse } from '../api/api';
+
+export class AccountSettingsWidget extends Widget {
+    private onSettingsUpdated: () => void;
+
+    constructor(onSettingsUpdated: () => void) {
+        super();
+        this.onSettingsUpdated = onSettingsUpdated;
+    }
+
+    render(): HTMLElement {
+        this.container.innerHTML = '';
+
+        const header = createElement('div');
+        header.classList.add('widget-header');
+        header.textContent = 'Account Settings';
+        this.container.appendChild(header);
+
+        const widgetBody = createElement('div');
+        widgetBody.classList.add('widget-body');
+
+        const form = createElement('form');
+
+        // Profile Picture Section
+        const profilePictureSection = createElement('div');
+        profilePictureSection.classList.add('mb-3');
+        const profilePictureLabel = createElement('label') as HTMLLabelElement; // Cast first
+        profilePictureLabel.classList.add('form-label');
+        profilePictureLabel.htmlFor = 'profilePicture'; // Set htmlFor as property
+        profilePictureLabel.textContent = 'Profile Picture';
+        const profilePictureInput = createElement('input') as HTMLInputElement;
+        profilePictureInput.type = 'file';
+        profilePictureInput.classList.add('form-control');
+        profilePictureInput.id = 'profilePicture';
+        profilePictureSection.appendChild(profilePictureLabel);
+        profilePictureSection.appendChild(profilePictureInput);
+        form.appendChild(profilePictureSection);
+
+        // Student Details Section (Read-only in prototype)
+        const studentDetailsSection = createElement('div');
+        studentDetailsSection.classList.add('mb-3');
+        studentDetailsSection.innerHTML = `
+            <div class="mb-2"><strong>Student Details</strong> <span class="text-muted">(Contact department head for corrections)</span></div>
+            <div class="mb-2">
+                <label for="fullName" class="form-label">Full Name</label>
+                <input type="text" class="form-control" id="fullName" value="John Doe" readonly disabled>
+            </div>
+            <div>
+                <label for="birthdate" class="form-label">Birthdate</label>
+                <input type="text" class="form-control" id="birthdate" value="2000-01-01" readonly disabled>
+            </div>
+        `;
+        form.appendChild(studentDetailsSection);
+
+        // Password Change Section
+        const passwordChangeSection = createElement('div');
+        passwordChangeSection.classList.add('mb-3');
+        passwordChangeSection.innerHTML = `
+            <div class="mb-2"><strong>Change Password</strong></div>
+            <div class="mb-2">
+                <label for="newPassword" class="form-label">New Password</label>
+                <input type="password" class="form-control" id="newPassword" placeholder="New Password">
+            </div>
+            <div>
+                <label for="confirmPassword" class="form-label">Confirm New Password</label>
+                <input type="password" class="form-control" id="confirmPassword" placeholder="Confirm New Password">
+            </div>
+        `;
+        form.appendChild(passwordChangeSection);
+
+        const saveButton = createElement('button');
+        saveButton.type = 'submit';
+        saveButton.classList.add('btn', 'btn-primary');
+        saveButton.textContent = 'Save Changes';
+        form.appendChild(saveButton);
+
+        form.addEventListener('submit', async (event) => {
+            event.preventDefault();
+            // In a real application, you would collect and validate form data,
+            // then send it to the backend API for updateAccountSettings.
+            // For this prototype, we'll just simulate a successful update.
+
+            const newPassword = (document.getElementById('newPassword') as HTMLInputElement).value;
+            const confirmPassword = (document.getElementById('confirmPassword') as HTMLInputElement).value;
+
+            if (newPassword && newPassword !== confirmPassword) {
+                alert('New password and confirm password do not match.');
+                return;
+            }
+
+            const settingsData = {
+                // profilePicture: ..., // Handle profile picture upload in real app
+                password: newPassword || undefined, // Send password only if changed
+                // ... other settings to update
+            };
+
+            try {
+                const response: ApiResponse<void> = await globalAPI.updateAccountSettings('mockUserId', settingsData); // Typed response
+                if (response.success) {
+                    alert('Account settings updated successfully!');
+                    this.onSettingsUpdated(); // Call the callback to hide the modal
+                } else {
+                    alert('Failed to update account settings.');
+                }
+            } catch (error) {
+                console.error('Error updating account settings:', error);
+                alert('Error occurred while updating account settings.');
+            }
+        });
+
+
+        widgetBody.appendChild(form);
+        this.container.appendChild(widgetBody);
+        return this.container;
+    }
+}

src/widgets/BackButtonWidget.ts

@@ -0,0 +1,28 @@
+// widgets/BackButtonWidget.ts
+import { Widget } from '../components/Widget';
+import { createElement, navigateTo } from '../utils/utils';
+
+export class BackButtonWidget extends Widget {
+    private buttonText: string;
+    private navigatePath: string;
+
+    constructor(buttonText: string, navigatePath: string) {
+        super();
+        this.buttonText = buttonText;
+        this.navigatePath = navigatePath;
+    }
+
+    render(): HTMLElement {
+        this.container.innerHTML = ''; // Clear previous content
+
+        const button = createElement('button');
+        button.classList.add('btn', 'btn-secondary');
+        button.textContent = this.buttonText;
+        button.addEventListener('click', () => {
+            navigateTo(this.navigatePath);
+        });
+
+        this.container.appendChild(button);
+        return this.container;
+    }
+}

src/widgets/LoginWidget.ts

@@ -0,0 +1,78 @@
+// widgets/LoginWidget.ts
+import { Widget } from '../components/Widget';
+import { createElement, navigateTo } from '../utils/utils';
+import { globalAPI, ApiResponse, LoginResponseData } from '../api/api';
+
+export class LoginWidget extends Widget {
+    constructor() {
+        super();
+    }
+
+    render(): HTMLElement {
+        this.container.innerHTML = '';
+
+        const header = createElement('h2');
+        header.classList.add('widget-header');
+        header.textContent = 'Login';
+
+        const form = createElement('form');
+        const userIdInputGroup = createElement('div');
+        userIdInputGroup.classList.add('mb-3');
+        const userIdLabel = createElement('label') as HTMLLabelElement; // Cast first
+        userIdLabel.classList.add('form-label');
+        userIdLabel.htmlFor = 'userId'; // Set htmlFor as property
+        userIdLabel.textContent = 'Student ID';
+        const userIdInput = createElement('input') as HTMLInputElement;
+        userIdInput.type = 'text';
+        userIdInput.classList.add('form-control');
+        userIdInput.id = 'userId';
+        userIdInput.placeholder = '123456';
+        userIdInputGroup.appendChild(userIdLabel);
+        userIdInputGroup.appendChild(userIdInput);
+
+        const passwordInputGroup = createElement('div');
+        passwordInputGroup.classList.add('mb-3');
+        const passwordLabel = createElement('label') as HTMLLabelElement; // Cast first
+        passwordLabel.classList.add('form-label');
+        passwordLabel.htmlFor = 'password'; // Set htmlFor as property
+        passwordLabel.textContent = 'Password';
+        const passwordInput = createElement('input') as HTMLInputElement;
+        passwordInput.type = 'password';
+        passwordInput.classList.add('form-control');
+        passwordInput.id = 'password';
+        passwordInput.placeholder = 'Password';
+        passwordInputGroup.appendChild(passwordLabel);
+        passwordInputGroup.appendChild(passwordInput);
+
+        const loginButton = createElement('button');
+        loginButton.type = 'submit';
+        loginButton.classList.add('btn', 'btn-primary');
+        loginButton.textContent = 'Login';
+
+        form.appendChild(userIdInputGroup);
+        form.appendChild(passwordInputGroup);
+        form.appendChild(loginButton);
+
+        form.addEventListener('submit', async (event) => {
+            event.preventDefault();
+            const userId = userIdInput.value;
+            const password = passwordInput.value;
+
+            try {
+                const response: ApiResponse<LoginResponseData> = await globalAPI.login({ userId, password });
+                if (response.success) {
+                    navigateTo('/dashboard');
+                } else {
+                    alert('Login failed: ' + response.message);
+                }
+            } catch (error) {
+                console.error('Login error:', error);
+                alert('Login error occurred.');
+            }
+        });
+
+        this.container.appendChild(header);
+        this.container.appendChild(form);
+        return this.container;
+    }
+}

src/widgets/PostFeedWidget.ts

@@ -0,0 +1,53 @@
+// widgets/PostFeedWidget.ts
+import { Widget } from '../components/Widget';
+import { createElement } from '../utils/utils';
+import { globalAPI, ApiResponse, ProfileResponseData } from '../api/api'; // Import API and types (now exported)
+
+export class PostFeedWidget extends Widget {
+    private posts: { id: number; content: string }[] = [];
+
+    constructor() {
+        super();
+        this.fetchPosts();
+    }
+
+    async fetchPosts() {
+        try {
+            const response: ApiResponse<ProfileResponseData> = await globalAPI.getProfile('mockUserId');
+            if (response.success && response.data && response.data.posts) {
+                this.posts = response.data.posts;
+                this.render();
+            } else {
+                console.error("Failed to fetch posts");
+            }
+        } catch (error) {
+            console.error("Error fetching posts:", error);
+        }
+    }
+
+    render(): HTMLElement {
+        this.container.innerHTML = '';
+
+        const header = createElement('div');
+        header.classList.add('widget-header');
+        header.textContent = 'Post Feed';
+        this.container.appendChild(header);
+
+        const widgetBody = createElement('div');
+        widgetBody.classList.add('widget-body');
+
+        if (this.posts.length === 0) {
+            widgetBody.textContent = 'No posts yet.';
+        } else {
+            this.posts.forEach(post => {
+                const postDiv = createElement('div');
+                postDiv.classList.add('mb-2', 'p-2', 'border', 'rounded');
+                postDiv.textContent = post.content;
+                widgetBody.appendChild(postDiv);
+            });
+        }
+
+        this.container.appendChild(widgetBody);
+        return this.container;
+    }
+}

src/widgets/ProfileWidget.ts

@@ -0,0 +1,110 @@
+// widgets/ProfileWidget.ts
+import { Widget } from '../components/Widget';
+import { createElement } from '../utils/utils';
+import { globalAPI, ApiResponse, ProfileResponseData } from '../api/api';
+
+export class ProfileWidget extends Widget {
+    private profileData: ProfileResponseData | null = null;
+
+    constructor() {
+        super();
+        this.fetchProfileData();
+    }
+
+    async fetchProfileData() {
+        try {
+            const response: ApiResponse<ProfileResponseData> = await globalAPI.getProfile('mockUserId');
+            if (response.success && response.data) {
+                this.profileData = response.data;
+                this.render();
+            } else {
+                console.error("Failed to fetch profile data");
+            }
+        } catch (error) {
+            console.error("Error fetching profile data:", error);
+        }
+    }
+
+
+    render(): HTMLElement {
+        this.container.innerHTML = '';
+
+        if (!this.profileData) { // Null check here
+            this.container.textContent = 'Loading profile...';
+            return this.container;
+        }
+
+        const header = createElement('div');
+        header.classList.add('widget-header', 'd-flex', 'justify-content-between', 'align-items-center');
+        const headerText = createElement('div');
+        headerText.classList.add('widget-title');
+        headerText.textContent = 'Profile Information';
+        header.appendChild(headerText);
+
+        const kebabMenuButton = createElement('button');
+        kebabMenuButton.classList.add('btn', 'btn-outline-secondary', 'btn-sm', 'dropdown-toggle');
+        kebabMenuButton.type = 'button';
+        kebabMenuButton.id = 'profileKebabMenu';
+        kebabMenuButton.setAttribute('data-bs-toggle', 'dropdown');
+        kebabMenuButton.setAttribute('aria-expanded', 'false');
+        kebabMenuButton.innerHTML = '⋮'; // Kebab menu icon (vertical ellipsis)
+        header.appendChild(kebabMenuButton);
+
+        const dropdownMenu = createElement('ul');
+        dropdownMenu.classList.add('dropdown-menu', 'dropdown-menu-end');
+        dropdownMenu.setAttribute('aria-labelledby', 'profileKebabMenu');
+
+        const accountSettingsMenuItem = createElement('li');
+        const accountSettingsLink = createElement('a');
+        accountSettingsLink.classList.add('dropdown-item');
+        accountSettingsLink.href = '#/profile';
+        accountSettingsLink.setAttribute('data-action', 'open-account-settings');
+        accountSettingsLink.textContent = 'Account settings';
+        accountSettingsMenuItem.appendChild(accountSettingsLink);
+        dropdownMenu.appendChild(accountSettingsMenuItem);
+        header.appendChild(dropdownMenu);
+
+
+        this.container.appendChild(header);
+
+        const widgetBody = createElement('div');
+        widgetBody.classList.add('widget-body', 'row', 'g-3');
+
+        const profileImageCol = createElement('div');
+        profileImageCol.classList.add('col-md-4');
+        const profileImage = createElement('img');
+        if (this.profileData.profilePicture) { // Null check before accessing properties
+            profileImage.src = this.profileData.profilePicture;
+        } else {
+            profileImage.src = 'src/assets/vite.svg'; // Default image if no profile picture
+        }
+        profileImage.alt = 'Profile Picture';
+        profileImage.classList.add('img-fluid', 'rounded-circle');
+        profileImageCol.appendChild(profileImage);
+        widgetBody.appendChild(profileImageCol);
+
+        const detailsCol = createElement('div');
+        detailsCol.classList.add('col-md-8');
+        const fullNamePara = createElement('p');
+        if (this.profileData.fullName) { // Null check before accessing properties
+            fullNamePara.innerHTML = `${this.profileData.fullName}`;
+        } else {
+            fullNamePara.innerHTML = `<small>Full Name:</small><br>N/A`; // Or some default text
+        }
+        const schoolIdPara = createElement('p');
+        if (this.profileData.schoolId) { // Null check before accessing properties
+            schoolIdPara.innerHTML = `<small><strong>School ID:</small></strong><br>${this.profileData.schoolId}`;
+        } else {
+            schoolIdPara.innerHTML = `<small><strong>School ID:</strong></small><br>N/A`;
+        }
+        const birthdatePara = createElement('p');
+        birthdatePara.innerHTML = `<small><strong>Birthdate:</strong></small><br><span class="text-muted">(Hidden from others)</span>`;
+        detailsCol.appendChild(fullNamePara);
+        detailsCol.appendChild(schoolIdPara);
+        detailsCol.appendChild(birthdatePara);
+        widgetBody.appendChild(detailsCol);
+
+        this.container.appendChild(widgetBody);
+        return this.container;
+    }
+}

src/widgets/RegisterWidget.ts

@@ -0,0 +1,37 @@
+// widgets/RegisterMessageWidget.ts
+import { Widget } from '../components/Widget';
+import { createElement, navigateTo } from '../utils/utils';
+
+export class RegisterWidget extends Widget {
+    private message: string;
+
+    constructor(message?: string) {
+        super();
+        this.message = message || "For registration, please contact your department head for further instructions.";
+    }
+
+    render(): HTMLElement {
+        this.container.innerHTML = ''; // Clear previous content
+
+        const header = createElement('h2');
+        header.classList.add('widget-header');
+        header.textContent = 'Register';
+
+        const messageParagraph = createElement('p');
+        messageParagraph.classList.add('widget-body');
+        messageParagraph.textContent = this.message;
+
+        const button = createElement('button');
+        button.classList.add('btn', 'btn-secondary');
+        button.textContent = 'Register';
+        button.disabled = true;
+        button.addEventListener('click', () => {
+            navigateTo('/register');
+        });
+
+        this.container.appendChild(header);
+        this.container.appendChild(messageParagraph);
+        this.container.appendChild(button);
+        return this.container;
+    }
+}

src/widgets/StudentFinancialWidget.ts

@@ -0,0 +1,99 @@
+// widgets/StudentFinancialWidget.ts
+import { Widget } from '../components/Widget';
+import { createElement } from '../utils/utils';
+import { globalAPI, ApiResponse, StudentFinancialData } from '../api/api'; // Import API and types
+
+export class StudentFinancialWidget extends Widget {
+    private studentId: string;
+    private financialData: StudentFinancialData | null = null;
+    private isLoading: boolean = true;
+    private hasError: boolean = false;
+
+    constructor(studentId: string) {
+        super();
+        this.studentId = studentId;
+        this.fetchFinancialData();
+    }
+
+    async fetchFinancialData() {
+        this.isLoading = true;
+        this.hasError = false;
+        this.render(); // Re-render to show loading state
+
+        try {
+            const response: ApiResponse<StudentFinancialData> = await globalAPI.getStudentFinancialData(this.studentId);
+            if (response.success && response.data) {
+                this.financialData = response.data;
+            } else {
+                this.hasError = true;
+                console.error("Failed to fetch student financial data:", response.message);
+            }
+        } catch (error) {
+            this.hasError = true;
+            console.error("Error fetching student financial data:", error);
+        } finally {
+            this.isLoading = false;
+            this.render(); // Re-render with fetched data or error state
+        }
+    }
+
+    render(): HTMLElement {
+        this.container.innerHTML = ''; // Clear previous content
+
+        const widgetBody = createElement('div');
+        widgetBody.classList.add('widget-body');
+
+        if (this.isLoading) {
+            widgetBody.textContent = 'Loading financial data...';
+        } else if (this.hasError) {
+            widgetBody.textContent = 'Failed to load financial data.';
+        } else if (this.financialData) {
+            const header = createElement('div');
+            header.classList.add('widget-header');
+            header.textContent = 'Payment Information';
+            this.container.appendChild(header);
+
+            this.container.appendChild(header);
+
+            widgetBody.innerHTML = `
+                <div class="row mb-2">
+                    <div class="col-sm-6">Tuition Fee:</div>
+                    <div class="col-sm-6">₱ ${this.financialData.tuitionFee}</div>
+                </div>
+                <div class="row mb-2">
+                    <div class="col-sm-6">Miscellaneous:</div>
+                    <div class="col-sm-6">₱ ${this.financialData.miscellaneousFee}</div>
+                </div>
+                <div class="row mb-2">
+                    <div class="col-sm-6">Lab Fee:</div>
+                    <div class="col-sm-6">₱ ${this.financialData.labFee}</div>
+                </div>
+                <div class="row mb-2">
+                    <div class="col-sm-6">Current:</div>
+                    <div class="col-sm-6">₱ ${this.financialData.currentAccount}</div>
+                </div>
+                <div class="row mb-2">
+                    <div class="col-sm-6">Down:</div>
+                    <div class="col-sm-6">₱ ${this.financialData.downPayment}</div>
+                </div>
+                <div class="row mb-2">
+                    <div class="col-sm-6">Midterms:</div>
+                    <div class="col-sm-6">₱ ${this.financialData.midtermPayment}</div>
+                </div>
+                <div class="row mb-2">
+                    <div class="col-sm-6">Prefinals:</div>
+                    <div class="col-sm-6">₱ ${this.financialData.prefinalPayment}</div>
+                </div>
+                <div class="row mb-2">
+                    <div class="col-sm-6">Finals:</div>
+                    <div class="col-sm-6">₱ ${this.financialData.finalPayment}</div>
+                </div>
+            `;
+        } else {
+            widgetBody.textContent = 'No financial data available.'; // Should not usually reach here if no error but no data
+        }
+
+        this.container.appendChild(widgetBody);
+        return this.container;
+    }
+}

src/widgets/StudentTableWidget.ts

@@ -0,0 +1,191 @@
+// widgets/StudentTableWidget.ts
+import { Widget } from '../components/Widget';
+import { createElement, navigateTo } from '../utils/utils';
+import { globalAPI, ApiResponse, StudentListData } from '../api/api';
+
+export class StudentTableWidget extends Widget {
+    private students: StudentListData[] = [];
+    private yearFilter: string = 'all';
+    private courseFilter: string = 'all';
+    private availableYears: string[] = ['all', '1', '2', '3', '4'];
+    private availableCourses: string[] = ['all', 'Math', 'Science', 'History', 'English'];
+
+    constructor() {
+        super();
+        this.fetchStudentData();
+    }
+
+    async fetchStudentData() {
+        try {
+            const response: ApiResponse<StudentListData[]> = await globalAPI.getStudentList();
+            if (response.success && response.data) {
+                this.students = response.data;
+                this.render();
+            } else {
+                console.error("Failed to fetch student list");
+            }
+        } catch (error) {
+            console.error("Error fetching student list:", error);
+        }
+    }
+
+    render(): HTMLElement {
+        this.container.innerHTML = '';
+
+        const header = createElement('div');
+        header.classList.add('widget-header');
+        header.textContent = 'Manage Students';
+        this.container.appendChild(header);
+
+        const widgetBody = createElement('div');
+        widgetBody.classList.add('widget-body');
+
+        // Filters
+        const filtersRow = createElement('div');
+        filtersRow.classList.add('row', 'mb-3', 'g-3', 'align-items-center');
+
+        // Year Level Filter
+        const yearFilterCol = createElement('div');
+        yearFilterCol.classList.add('col-auto');
+        const yearFilterLabel = createElement('label') as HTMLLabelElement; // Cast first
+        yearFilterLabel.classList.add('col-form-label', 'me-2');
+        yearFilterLabel.htmlFor = 'yearLevelFilter'; // Set htmlFor as property
+        yearFilterLabel.textContent = 'Year Level:';
+        const yearFilterSelect = createElement('select') as HTMLSelectElement;
+        yearFilterSelect.classList.add('form-select');
+        yearFilterSelect.id = 'yearLevelFilter';
+        this.availableYears.forEach(year => {
+            const option = createElement('option');
+            option.value = year;
+            option.textContent = year === 'all' ? 'All Years' : `Year ${year}`;
+            yearFilterSelect.appendChild(option);
+        });
+        yearFilterSelect.value = this.yearFilter;
+        yearFilterSelect.addEventListener('change', (e) => {
+            this.yearFilter = (e.target as HTMLSelectElement).value;
+            this.renderTable(widgetBody);
+        });
+        yearFilterCol.appendChild(yearFilterLabel);
+        yearFilterCol.appendChild(yearFilterSelect);
+        filtersRow.appendChild(yearFilterCol);
+
+        // Course Filter
+        const courseFilterCol = createElement('div');
+        courseFilterCol.classList.add('col-auto');
+        const courseFilterLabel = createElement('label') as HTMLLabelElement; // Cast first
+        courseFilterLabel.classList.add('col-form-label', 'me-2');
+        courseFilterLabel.htmlFor = 'courseFilter'; // Set htmlFor as property
+        courseFilterLabel.textContent = 'Course:';
+        const courseFilterSelect = createElement('select') as HTMLSelectElement;
+        courseFilterSelect.classList.add('form-select');
+        courseFilterSelect.id = 'courseFilter';
+        this.availableCourses.forEach(course => {
+            const option = createElement('option');
+            option.value = course;
+            option.textContent = course === 'all' ? 'All Courses' : course;
+            courseFilterSelect.appendChild(option);
+        });
+        courseFilterSelect.value = this.courseFilter;
+        courseFilterSelect.addEventListener('change', (e) => {
+            this.courseFilter = (e.target as HTMLSelectElement).value;
+            this.renderTable(widgetBody);
+        });
+        courseFilterCol.appendChild(courseFilterLabel);
+        courseFilterCol.appendChild(courseFilterSelect);
+        filtersRow.appendChild(courseFilterCol);
+
+        widgetBody.appendChild(filtersRow);
+
+        // Table Container
+        const tableContainer = createElement('div');
+        widgetBody.appendChild(tableContainer);
+        this.renderTable(tableContainer);
+
+        // "Add" button and Batch Add
+        const addButtonRow = createElement('div');
+        addButtonRow.classList.add('row', 'mt-3', 'justify-content-between', 'align-items-center');
+        const addButtonCol = createElement('div');
+        addButtonCol.classList.add('col-auto');
+        const addButton = createElement('button');
+        addButton.classList.add('btn', 'btn-success', 'btn-sm', 'me-2');
+        addButton.textContent = 'Add Student';
+        addButtonCol.appendChild(addButton);
+        addButtonRow.appendChild(addButtonCol);
+
+        const batchAddCol = createElement('div');
+        batchAddCol.classList.add('col-auto');
+        const batchAddLink = createElement('a');
+        batchAddLink.href = '#/batch-add-students';
+        batchAddLink.textContent = 'Batch Add Students';
+        batchAddCol.appendChild(batchAddLink);
+        addButtonRow.appendChild(batchAddCol);
+
+        widgetBody.appendChild(addButtonRow);
+
+        this.container.appendChild(widgetBody);
+        return this.container;
+    }
+
+    private renderTable(container: HTMLElement) {
+        container.innerHTML = '';
+
+        const table = createElement('table');
+        table.classList.add('table', 'table-striped', 'table-bordered');
+        const thead = createElement('thead');
+        thead.innerHTML = `
+            <tr>
+                <th>ID</th>
+                <th>Name</th>
+                <th>Year Level</th>
+                <th>Courses</th>
+                <th>Actions</th>
+            </tr>
+        `;
+        table.appendChild(thead);
+        const tbody = createElement('tbody');
+
+        const filteredStudents = this.students.filter(student => {
+            const yearMatch = this.yearFilter === 'all' || student.yearLevel === this.yearFilter;
+            const courseMatch = this.courseFilter === 'all' || student.courses.includes(this.courseFilter);
+            return yearMatch && courseMatch;
+        });
+
+        filteredStudents.forEach(student => {
+            const row = createElement('tr');
+            row.innerHTML = `
+                <td>${student.id}</td>
+                <td>${student.name}</td>
+                <td>${student.yearLevel}</td>
+                <td>${student.courses.join(', ')}</td>
+                <td>
+                    <button class="btn btn-info btn-sm view-profile-btn" data-student-id="${student.id}">View Profile</button>
+                    <button class="btn btn-secondary btn-sm enroll-btn" data-student-id="${student.id}">Enroll</button>
+                </td>
+            `;
+            tbody.appendChild(row);
+        });
+        table.appendChild(tbody);
+        container.appendChild(table);
+
+        this.attachTableEventListeners(table);
+    }
+
+    private attachTableEventListeners(table: HTMLTableElement) {
+        table.querySelectorAll('.view-profile-btn').forEach(button => {
+            button.addEventListener('click', (event) => {
+                const studentId = (event.target as HTMLElement).dataset.studentId;
+                if (studentId) {
+                    navigateTo(`/profile?studentId=${studentId}`);
+                }
+            });
+        });
+        table.querySelectorAll('.enroll-btn').forEach(button => {
+            button.addEventListener('click', (event) => {
+                const studentId = (event.target as HTMLElement).dataset.studentId;
+                if (studentId) {
+                    alert(`Enroll functionality for student ID ${studentId} - Not fully implemented in prototype.`);
+                }
+            });
+        });
+    }
+}

src/widgets/StudentsWidget.ts

@@ -0,0 +1,54 @@
+// widgets/StudentsWidget.ts
+import { Widget } from '../components/Widget';
+import { createElement, navigateTo } from '../utils/utils';
+import { globalAPI, ApiResponse, AdminDashboardData } from '../api/api'; // Import API and types (now exported)
+
+export class StudentsWidget extends Widget {
+    private studentCount: number = 0;
+
+    constructor() {
+        super();
+        this.fetchStudentCount();
+    }
+
+    async fetchStudentCount() {
+        try {
+            const response: ApiResponse<AdminDashboardData> = await globalAPI.getAdminDashboardData();
+            if (response.success && response.data) {
+                this.studentCount = response.data.studentsCount || 0;
+                this.render();
+            } else {
+                console.error("Failed to fetch admin dashboard data");
+            }
+        } catch (error) {
+            console.error("Error fetching admin dashboard data:", error);
+        }
+    }
+
+    render(): HTMLElement {
+        this.container.innerHTML = '';
+
+        const header = createElement('div');
+        header.classList.add('widget-header');
+        header.textContent = 'Students';
+        this.container.appendChild(header);
+
+        const widgetBody = createElement('div');
+        widgetBody.classList.add('widget-body', 'text-center');
+
+        const countDisplay = createElement('h3');
+        countDisplay.textContent = String(this.studentCount);
+        widgetBody.appendChild(countDisplay);
+
+        const manageButton = createElement('button');
+        manageButton.classList.add('btn', 'btn-primary', 'btn-sm');
+        manageButton.textContent = 'Manage Students';
+        manageButton.addEventListener('click', () => {
+            navigateTo('/manage-students');
+        });
+        widgetBody.appendChild(manageButton);
+
+        this.container.appendChild(widgetBody);
+        return this.container;
+    }
+}

src/widgets/TeachersWidget.ts

@@ -0,0 +1,52 @@
+// widgets/TeachersWidget.ts
+import { Widget } from '../components/Widget';
+import { createElement } from '../utils/utils';
+import { globalAPI, ApiResponse, AdminDashboardData } from '../api/api'; // Import API and types (now exported)
+
+export class TeachersWidget extends Widget {
+    private teacherCount: number = 0;
+
+    constructor() {
+        super();
+        this.fetchTeacherCount();
+    }
+
+    async fetchTeacherCount() {
+        try {
+            const response: ApiResponse<AdminDashboardData> = await globalAPI.getAdminDashboardData();
+            if (response.success && response.data) {
+                this.teacherCount = response.data.teachersCount || 0;
+                this.render();
+            } else {
+                console.error("Failed to fetch admin dashboard data");
+            }
+        } catch (error) {
+            console.error("Error fetching admin dashboard data:", error);
+        }
+    }
+
+    render(): HTMLElement {
+        this.container.innerHTML = '';
+
+        const header = createElement('div');
+        header.classList.add('widget-header');
+        header.textContent = 'Teachers';
+        this.container.appendChild(header);
+
+        const widgetBody = createElement('div');
+        widgetBody.classList.add('widget-body', 'text-center');
+
+        const countDisplay = createElement('h3');
+        countDisplay.textContent = String(this.teacherCount);
+        widgetBody.appendChild(countDisplay);
+
+        // In this prototype, teacher management page is not specified, so button is disabled or can link to a placeholder page.
+        const manageButton = createElement('button');
+        manageButton.classList.add('btn', 'btn-secondary', 'btn-sm', 'disabled'); // Disabled for prototype
+        manageButton.textContent = 'Manage Teachers (Coming Soon)';
+        widgetBody.appendChild(manageButton);
+
+        this.container.appendChild(widgetBody);
+        return this.container;
+    }
+}

src/widgets/UnderConstructionWidget.ts

@@ -0,0 +1,38 @@
+// widgets/UnderConstructionWidget.ts
+import { Widget } from '../components/Widget';
+import { createElement } from '../utils/utils';
+
+export class UnderConstructionWidget extends Widget {
+    private message: string;
+
+    constructor(message: string) {
+        super();
+        this.message = message;
+    }
+
+    render(): HTMLElement {
+        this.container.innerHTML = ''; // Clear previous content
+
+        const header = createElement('div');
+        header.classList.add('widget-header', 'text-center');
+        header.textContent = 'Under Construction';
+        this.container.appendChild(header);
+
+        const widgetBody = createElement('div');
+        widgetBody.classList.add('widget-body', 'text-center');
+        widgetBody.textContent = this.message;
+        this.container.appendChild(widgetBody);
+
+        const icon = createElement('i');
+        icon.classList.add('bi', 'bi-tools', 'd-block', 'mx-auto', 'my-3'); // Bootstrap Icons class, needs Bootstrap Icons CSS if you want to use icons.
+        icon.style.fontSize = '2em'; // Example icon style, can be customized.
+        // Note: Bootstrap Icons would need to be included in index.html if used.
+        // For prototype simplicity, we'll skip including Bootstrap Icons CSS.
+        // If you want to add Bootstrap Icons, include this in index.html <head>:
+        // <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+        // widgetBody.appendChild(icon); // Uncomment if you decide to include Bootstrap Icons.
+
+
+        return this.container;
+    }
+}