Version 1.0 upload

src/pages/AdminPage.ts

@@ -0,0 +1,17 @@
+// pages/AdminPage.ts
+import { ThreeColumnLayout } from '../layouts/ThreeColumnLayout';
+import { StudentsWidget } from '../widgets/StudentsWidget';
+import { TeachersWidget } from '../widgets/TeachersWidget';
+
+export const renderAdminPage = () => {
+    const layout = new ThreeColumnLayout();
+    const studentsWidget = new StudentsWidget();
+    const teachersWidget = new TeachersWidget();
+    // Column 3 is optional for future features as per requirements
+
+    layout.setColumn1Content(studentsWidget.render());
+    layout.setColumn2Content(teachersWidget.render());
+    // Column 3 is intentionally left empty in this prototype
+
+    document.querySelector<HTMLDivElement>('#app')?.appendChild(layout.render());
+};

src/pages/ClassroomsPage.ts

@@ -0,0 +1,12 @@
+// pages/ClassroomsPage.ts
+import { CenteredLayout } from '../layouts/CenteredLayout';
+import { UnderConstructionWidget } from '../widgets/UnderConstructionWidget';
+
+export const renderClassroomsPage = () => {
+    const layout = new CenteredLayout();
+    const underConstructionWidget = new UnderConstructionWidget("Classrooms is currently not yet ready for production.");
+
+    layout.addContent(underConstructionWidget.render());
+
+    document.querySelector<HTMLDivElement>('#app')?.appendChild(layout.render());
+};

src/pages/DashboardPage.ts

@@ -0,0 +1,60 @@
+// pages/DashboardPage.ts
+import { ThreeColumnLayout } from '../layouts/ThreeColumnLayout';
+import { Widget } from '../components/Widget';
+import { createElement } from '../utils/utils';
+
+// Dummy Widgets for Dashboard
+class WelcomeWidget extends Widget {
+    render(): HTMLElement {
+        const widgetDiv = createElement('div');
+        widgetDiv.classList.add('widget');
+        widgetDiv.innerHTML = `
+            <div class="widget-header">Welcome to the Dashboard</div>
+            <div class="widget-body">
+                This is your dashboard. More widgets will be added here.
+            </div>
+        `;
+        return widgetDiv;
+    }
+}
+
+class QuickLinksWidget extends Widget {
+    render(): HTMLElement {
+        const widgetDiv = createElement('div');
+        widgetDiv.classList.add('widget');
+        widgetDiv.innerHTML = `
+            <div class="widget-header">Quick Links</div>
+            <div class="widget-body">
+                <ul class="list-unstyled">
+                    <li><a href="#/profile">View Profile</a></li>
+                    <li><a href="#/classrooms">Go to Classrooms</a></li>
+                    <li><a href="#/admin">Admin Panel</a></li>
+                </ul>
+            </div>
+        `;
+        return widgetDiv;
+    }
+}
+
+class PlaceholderWidget extends Widget { // Corrected placeholder widget definition
+    render(): HTMLElement {
+        const div = createElement('div');
+        div.classList.add('widget');
+        div.textContent = 'Placeholder Widget';
+        return div;
+    }
+}
+
+
+export const renderDashboardPage = () => {
+    const layout = new ThreeColumnLayout();
+    const welcomeWidget = new WelcomeWidget();
+    const quickLinksWidget = new QuickLinksWidget();
+    const placeholderWidget = new PlaceholderWidget(); // Use the corrected PlaceholderWidget class
+
+    layout.setColumn1Content(welcomeWidget.render());
+    layout.setColumn2Content(quickLinksWidget.render());
+    layout.setColumn3Content(placeholderWidget.render());
+
+    document.querySelector<HTMLDivElement>('#app')?.appendChild(layout.render());
+};

src/pages/LoginPage.ts

@@ -0,0 +1,21 @@
+// pages/LoginPage.ts
+import { CenteredLayout } from '../layouts/CenteredLayout';
+import { LoginWidget } from '../widgets/LoginWidget';
+import { RegisterWidget } from '../widgets/RegisterWidget';
+import { createElement } from '../utils/utils';
+
+export const renderLoginPage = () => {
+    const layout = new CenteredLayout();
+    const loginWidget = new LoginWidget();
+    const registerWidget = new RegisterWidget();
+
+    const container = createElement('div');
+    container.classList.add('d-flex', 'flex-column', 'gap-3', 'p-4', 'rounded', 'shadow', 'blur'); // Bootstrap flex and styling
+
+    container.appendChild(loginWidget.render());
+    container.appendChild(registerWidget.render());
+
+    layout.addContent(container);
+
+    document.querySelector<HTMLDivElement>('#app')?.appendChild(layout.render());
+};

src/pages/ManageStudentPage.ts

@@ -0,0 +1,16 @@
+// pages/ManageStudentPage.ts
+import { SplitColumnLayout } from '../layouts/SplitColumnLayout'; // Or ThreeColumnLayout or full width, depending on desired layout
+import { StudentTableWidget } from '../widgets/StudentTableWidget';
+import { createElement } from '../utils/utils';
+
+export const renderManageStudentPage = () => {
+    const layout = new SplitColumnLayout(); // Using SplitColumnLayout, can be changed to ThreeColumnLayout or full width
+    const studentTableWidget = new StudentTableWidget();
+
+    layout.setContentAreaContent(studentTableWidget.render());
+    // Sidebar can be used for filters or additional admin options if needed
+    layout.setSidebarContent(createElement('div')); // Empty sidebar for now, or add sidebar widgets
+
+
+    document.querySelector<HTMLDivElement>('#app')?.appendChild(layout.render());
+};

src/pages/ProfilePage.ts

@@ -0,0 +1,47 @@
+// pages/ProfilePage.ts
+import { SplitColumnLayout } from '../layouts/SplitColumnLayout';
+import { ProfileWidget } from '../widgets/ProfileWidget';
+import { StudentFinancialWidget } from '../widgets/StudentFinancialWidget';
+import { PostFeedWidget } from '../widgets/PostFeedWidget';
+import { AccountSettingsWidget } from '../widgets/AccountSettingsWidget';
+import { Modal } from '../components/Modal';
+import { createElement } from '../utils/utils';
+
+let accountSettingsModalInstance: Modal | null = null; // Keep track of modal instance
+
+export const renderProfilePage = () => {
+    const layout = new SplitColumnLayout();
+    const sidebar = createElement('div');
+
+    const profileWidget = new ProfileWidget();
+    const financesWidget = new StudentFinancialWidget('mockUserId');
+    const postFeedWidget = new PostFeedWidget();
+
+    sidebar.appendChild(profileWidget.render());
+    sidebar.appendChild(financesWidget.render());
+
+    layout.setSidebarContent(sidebar);
+    layout.setContentAreaContent(postFeedWidget.render());
+
+    const appElement = document.querySelector<HTMLDivElement>('#app');
+    if (appElement) {
+        appElement.innerHTML = ''; // Clear existing content
+        appElement.appendChild(layout.render());
+
+        // Handle 'Account settings' link click from TopBar or ProfileWidget
+        const accountSettingsLinks = document.querySelectorAll('[data-action="open-account-settings"]');
+        accountSettingsLinks.forEach(link => {
+            link.addEventListener('click', (event) => {
+                event.preventDefault(); // Prevent default link behavior
+                if (!accountSettingsModalInstance) {
+                    accountSettingsModalInstance = new Modal();
+                    const settingsWidget = new AccountSettingsWidget(() => {
+                        accountSettingsModalInstance?.hide(); // Callback to hide modal after settings update
+                    });
+                    accountSettingsModalInstance.setWidget(settingsWidget);
+                }
+                accountSettingsModalInstance.show();
+            });
+        });
+    }
+};

src/pages/RegisterPage.ts

@@ -0,0 +1,21 @@
+// pages/RegisterPage.ts
+import { CenteredLayout } from '../layouts/CenteredLayout';
+import { RegisterWidget } from '../widgets/RegisterWidget';
+import { BackButtonWidget } from '../widgets/BackButtonWidget';
+import { createElement } from '../utils/utils';
+
+export const renderRegisterPage = () => {
+    const layout = new CenteredLayout();
+    const registerMessageWidget = new RegisterWidget("Please contact your department head to register.");
+    const backButtonWidget = new BackButtonWidget('Back to Login', '#/login');
+
+    const container = createElement('div');
+    container.classList.add('d-flex', 'flex-column', 'gap-3', 'p-4', 'rounded', 'shadow'); // Bootstrap flex and styling
+
+    container.appendChild(registerMessageWidget.render());
+    container.appendChild(backButtonWidget.render());
+
+    layout.addContent(container);
+
+    document.querySelector<HTMLDivElement>('#app')?.appendChild(layout.render());
+};