Initial commit: Complete NodeJS-native setup

- Migrated from Python pre-commit to NodeJS-native solution
- Reorganized documentation structure
- Set up Husky + lint-staged for efficient pre-commit hooks
- Fixed Dockerfile healthcheck issue
- Added comprehensive documentation index

tests/e2e/ui-navigation.spec.ts

@@ -0,0 +1,100 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('User Interface and Navigation', () => {
+  test.beforeEach(async ({ page }) => {
+    // Login as admin
+    await page.goto('/');
+    await page.fill('input[type="email"]', 'admin@localhost');
+    await page.fill('input[type="password"]', 'admin123!');
+    await page.click('button[type="submit"]');
+    await expect(page.locator('h1')).toContainText('Medication Reminder');
+  });
+
+  test('should display main navigation elements', async ({ page }) => {
+    await expect(
+      page.locator('button:has-text("Add Medication")')
+    ).toBeVisible();
+    await expect(page.locator('button:has-text("Manage")')).toBeVisible();
+    await expect(page.locator('button:has-text("History")')).toBeVisible();
+    await expect(page.locator('button:has-text("Stats")')).toBeVisible();
+  });
+
+  test('should toggle theme', async ({ page }) => {
+    // Click theme switcher
+    await page.click('[data-testid="theme-switcher"]');
+
+    // Check if dark mode is applied
+    await expect(page.locator('html')).toHaveClass(/dark/);
+
+    // Toggle back to light mode
+    await page.click('[data-testid="theme-switcher"]');
+    await expect(page.locator('html')).not.toHaveClass(/dark/);
+  });
+
+  test('should open and close account modal', async ({ page }) => {
+    // Click account button
+    await page.click('button:has-text("Account")');
+
+    // Should show account modal
+    await expect(page.locator('text=Account Settings')).toBeVisible();
+
+    // Close modal
+    await page.click('button:has-text("Close")');
+    await expect(page.locator('text=Account Settings')).not.toBeVisible();
+  });
+
+  test('should open stats modal', async ({ page }) => {
+    await page.click('button:has-text("Stats")');
+
+    await expect(page.locator('text=Medication Statistics')).toBeVisible();
+    await expect(page.locator('text=Weekly Adherence')).toBeVisible();
+
+    await page.click('button:has-text("Close")');
+  });
+
+  test('should show current time and date', async ({ page }) => {
+    // Should display current time somewhere on the page
+    const timeElement = page.locator('[data-testid="current-time"]');
+    await expect(timeElement).toBeVisible();
+  });
+
+  test('should handle responsive design', async ({ page }) => {
+    // Test mobile viewport
+    await page.setViewportSize({ width: 375, height: 667 });
+
+    // Should still show main elements
+    await expect(page.locator('h1')).toBeVisible();
+    await expect(
+      page.locator('button:has-text("Add Medication")')
+    ).toBeVisible();
+
+    // Reset to desktop
+    await page.setViewportSize({ width: 1280, height: 720 });
+  });
+
+  test('should search medications', async ({ page }) => {
+    // Add a test medication first
+    await page.click('button:has-text("Add Medication")');
+    await page.fill('input[name="name"]', 'Searchable Medicine');
+    await page.fill('input[name="dosage"]', '10mg');
+    await page.click('button[type="submit"]');
+
+    // Use search functionality
+    await page.fill('input[placeholder*="search"]', 'Searchable');
+
+    // Should show filtered results
+    await expect(page.locator('text=Searchable Medicine')).toBeVisible();
+
+    // Clear search
+    await page.fill('input[placeholder*="search"]', '');
+  });
+
+  test('should logout user', async ({ page }) => {
+    // Click logout (usually in avatar dropdown)
+    await page.click('[data-testid="avatar-dropdown"]');
+    await page.click('button:has-text("Logout")');
+
+    // Should return to login page
+    await expect(page.locator('h2')).toContainText(['Sign In', 'Login']);
+  });
+});