Add high priority production improvements

## Security
- Add Firestore security rules for user data protection
- Fix XSS vulnerability in Notes.jsx (use DOMPurify)
- Add input validation utilities with sanitization

## User Experience
- Add 404 NotFound component for unknown routes
- Add reusable Skeleton loading components

## Testing
- Add validation utility tests
- Add AddTodo component tests
- Add NotFound component tests
- Add @testing-library/user-event dependency

## Input Validation
- Validate todo text (required, max length)
- Validate notes (title/content length limits)
- Validate URLs, emails, numbers, dates
- Validate expenses and IP addresses

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

Author: Raushan kumar

firestore.rules

@@ -0,0 +1,48 @@
+rules_version = '2';
+
+service cloud.firestore {
+  match /databases/{database}/documents {
+    // Helper functions
+    function isAuthenticated() {
+      return request.auth != null;
+    }
+
+    function isOwner(userId) {
+      return isAuthenticated() && request.auth.uid == userId;
+    }
+
+    function isValidString(field, maxLength) {
+      return field is string && field.size() <= maxLength;
+    }
+
+    function isValidTimestamp(field) {
+      return field is timestamp || field is string;
+    }
+
+    // Users collection - each user can only access their own data
+    match /users/{userId} {
+      // Allow read/write only to the owner
+      allow read, write: if isOwner(userId);
+
+      // User data subcollection (todos, attendance, notes, etc.)
+      match /data/{document} {
+        allow read: if isOwner(userId);
+
+        // Validate writes based on document type
+        allow write: if isOwner(userId) && validateDocument(document);
+      }
+    }
+
+    // Document validation function
+    function validateDocument(docType) {
+      return docType in ['todos', 'attendance', 'notes', 'officeConfig',
+                          'gamification', 'leaves', 'trips', 'expenses',
+                          'salary', 'links', 'meetings', 'pomodoro'];
+    }
+
+    // Deny all other access by default
+    match /{document=**} {
+      allow read, write: if false;
+    }
+  }
+}

package.json

@@ -23,6 +23,7 @@
     "@eslint/js": "^9.39.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
+    "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",

src/App.jsx

@@ -5,8 +5,10 @@ import { GamificationProvider } from './contexts/GamificationContext';
 import { ErrorBoundary } from './components/ErrorBoundary';
 import { SkipLink } from './components/SkipLink';
 import { OfflineIndicator } from './components/OfflineIndicator';
+import { NotFound } from './components/NotFound';
 import { useTodos } from './hooks/useFirestore';
 import { formatDateKey, formatDisplayDate, generateId } from './utils/dateUtils';
+import { validateTodo } from './utils/validation';
 
 // Navigation components (always needed)
 import { Sidebar } from './components/Navigation/Sidebar';
@@ -66,7 +68,13 @@ function MainContent() {
   const isToday = formatDateKey(today) === dateKey;
 
   const addTodo = (text) => {
-    const newTodo = { id: generateId(), text, completed: false };
+    // Validate todo text
+    const validation = validateTodo(text);
+    if (!validation.valid) {
+      console.warn('Invalid todo:', validation.error);
+      return;
+    }
+    const newTodo = { id: generateId(), text: validation.value, completed: false };
     setTodos({ ...todos, [dateKey]: [...currentTodos, newTodo] });
   };
 
@@ -247,7 +255,8 @@ function MainContent() {
         return <Notes />;
 
       default:
-        return <Dashboard onNavigate={navigate} />;
+        // Show 404 page for unknown views
+        return <NotFound onNavigate={navigate} />;
     }
   };
 

src/components/AddTodo.test.jsx

@@ -0,0 +1,87 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { AddTodo } from './AddTodo';
+
+describe('AddTodo', () => {
+  it('should render input and button', () => {
+    render(<AddTodo onAdd={vi.fn()} />);
+
+    expect(screen.getByPlaceholderText('Add a new task...')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /add task/i })).toBeInTheDocument();
+  });
+
+  it('should disable button when input is empty', () => {
+    render(<AddTodo onAdd={vi.fn()} />);
+
+    const button = screen.getByRole('button', { name: /add task/i });
+    expect(button).toBeDisabled();
+  });
+
+  it('should enable button when input has text', async () => {
+    const user = userEvent.setup();
+    render(<AddTodo onAdd={vi.fn()} />);
+
+    const input = screen.getByPlaceholderText('Add a new task...');
+    await user.type(input, 'New task');
+
+    const button = screen.getByRole('button', { name: /add task: new task/i });
+    expect(button).not.toBeDisabled();
+  });
+
+  it('should call onAdd with trimmed text on submit', async () => {
+    const user = userEvent.setup();
+    const onAdd = vi.fn();
+    render(<AddTodo onAdd={onAdd} />);
+
+    const input = screen.getByPlaceholderText('Add a new task...');
+    await user.type(input, '  Buy groceries  ');
+    await user.keyboard('{Enter}');
+
+    expect(onAdd).toHaveBeenCalledWith('Buy groceries');
+  });
+
+  it('should clear input after submission', async () => {
+    const user = userEvent.setup();
+    render(<AddTodo onAdd={vi.fn()} />);
+
+    const input = screen.getByPlaceholderText('Add a new task...');
+    await user.type(input, 'New task');
+    await user.keyboard('{Enter}');
+
+    expect(input).toHaveValue('');
+  });
+
+  it('should not submit empty input', async () => {
+    const user = userEvent.setup();
+    const onAdd = vi.fn();
+    render(<AddTodo onAdd={onAdd} />);
+
+    const input = screen.getByPlaceholderText('Add a new task...');
+    await user.type(input, '   ');
+    await user.keyboard('{Enter}');
+
+    expect(onAdd).not.toHaveBeenCalled();
+  });
+
+  it('should show keyboard hint when focused with text', async () => {
+    const user = userEvent.setup();
+    render(<AddTodo onAdd={vi.fn()} />);
+
+    const input = screen.getByPlaceholderText('Add a new task...');
+    await user.type(input, 'Task');
+
+    expect(screen.getByText(/press/i)).toBeInTheDocument();
+    expect(screen.getByText('Enter')).toBeInTheDocument();
+  });
+
+  it('should have proper accessibility attributes', () => {
+    render(<AddTodo onAdd={vi.fn()} />);
+
+    const form = screen.getByRole('search', { name: /add new task/i });
+    expect(form).toBeInTheDocument();
+
+    const input = screen.getByLabelText(/add a new task/i);
+    expect(input).toBeInTheDocument();
+  });
+});

src/components/NotFound.jsx

@@ -0,0 +1,80 @@
+/**
+ * 404 Not Found component for unknown views/routes
+ */
+export function NotFound({ onNavigate }) {
+  return (
+    <div className="min-h-[60vh] flex items-center justify-center">
+      <div className="text-center max-w-md mx-auto px-4">
+        {/* 404 Illustration */}
+        <div className="relative mb-8">
+          <div className="text-[120px] font-bold text-white/10 leading-none select-none">
+            404
+          </div>
+          <div className="absolute inset-0 flex items-center justify-center">
+            <div className="w-24 h-24 rounded-3xl bg-white/20 backdrop-blur-sm flex items-center justify-center shadow-xl">
+              <svg
+                className="w-12 h-12 text-white"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={1.5}
+                  d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+                />
+              </svg>
+            </div>
+          </div>
+        </div>
+
+        {/* Message */}
+        <h1 className="text-2xl font-bold text-white mb-3">
+          Page Not Found
+        </h1>
+        <p className="text-white/60 mb-8">
+          Oops! The page you're looking for doesn't exist or has been moved.
+          Let's get you back on track.
+        </p>
+
+        {/* Actions */}
+        <div className="flex flex-col sm:flex-row gap-3 justify-center">
+          <button
+            onClick={() => onNavigate('dashboard')}
+            className="px-6 py-3 rounded-xl font-medium bg-white text-slate-800 shadow-lg hover:shadow-xl hover:-translate-y-0.5 transition-all"
+          >
+            Go to Dashboard
+          </button>
+          <button
+            onClick={() => onNavigate('tasks')}
+            className="px-6 py-3 rounded-xl font-medium bg-white/20 text-white hover:bg-white/30 transition-all"
+          >
+            View Tasks
+          </button>
+        </div>
+
+        {/* Quick Links */}
+        <div className="mt-12 pt-8 border-t border-white/10">
+          <p className="text-white/40 text-sm mb-4">Quick Links</p>
+          <div className="flex flex-wrap justify-center gap-2">
+            {[
+              { id: 'attendance', label: 'Attendance' },
+              { id: 'focus', label: 'Focus Timer' },
+              { id: 'notes', label: 'Notes' },
+              { id: 'expenses', label: 'Expenses' },
+            ].map((link) => (
+              <button
+                key={link.id}
+                onClick={() => onNavigate(link.id)}
+                className="px-3 py-1.5 rounded-lg text-sm text-white/60 hover:text-white hover:bg-white/10 transition-colors"
+              >
+                {link.label}
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/NotFound.test.jsx

@@ -0,0 +1,62 @@
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { NotFound } from './NotFound';
+
+describe('NotFound', () => {
+  it('should render 404 message', () => {
+    render(<NotFound onNavigate={vi.fn()} />);
+
+    expect(screen.getByText('404')).toBeInTheDocument();
+    expect(screen.getByText('Page Not Found')).toBeInTheDocument();
+  });
+
+  it('should have navigation buttons', () => {
+    render(<NotFound onNavigate={vi.fn()} />);
+
+    expect(screen.getByRole('button', { name: /go to dashboard/i })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: /view tasks/i })).toBeInTheDocument();
+  });
+
+  it('should call onNavigate with dashboard when clicking Go to Dashboard', async () => {
+    const user = userEvent.setup();
+    const onNavigate = vi.fn();
+    render(<NotFound onNavigate={onNavigate} />);
+
+    await user.click(screen.getByRole('button', { name: /go to dashboard/i }));
+
+    expect(onNavigate).toHaveBeenCalledWith('dashboard');
+  });
+
+  it('should call onNavigate with tasks when clicking View Tasks', async () => {
+    const user = userEvent.setup();
+    const onNavigate = vi.fn();
+    render(<NotFound onNavigate={onNavigate} />);
+
+    await user.click(screen.getByRole('button', { name: /view tasks/i }));
+
+    expect(onNavigate).toHaveBeenCalledWith('tasks');
+  });
+
+  it('should have quick links section', () => {
+    render(<NotFound onNavigate={vi.fn()} />);
+
+    expect(screen.getByText('Quick Links')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Attendance' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Focus Timer' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Notes' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Expenses' })).toBeInTheDocument();
+  });
+
+  it('should navigate to correct view when clicking quick links', async () => {
+    const user = userEvent.setup();
+    const onNavigate = vi.fn();
+    render(<NotFound onNavigate={onNavigate} />);
+
+    await user.click(screen.getByRole('button', { name: 'Notes' }));
+    expect(onNavigate).toHaveBeenCalledWith('notes');
+
+    await user.click(screen.getByRole('button', { name: 'Expenses' }));
+    expect(onNavigate).toHaveBeenCalledWith('expenses');
+  });
+});