Phase 1: Critical Fixes

Week 1 - Production Blockers

38 Hours Total

Sprint Progress

Track your Phase 1 completion status

0 / 5 Tasks

Fix Broken Imports (5 Pages)

CRITICAL

8 hours

Replace broken entity/integration imports with correct base44 SDK calls

pages/CompanyManagement.js

Issue: Broken Company entity imports

Fix: Replace import statements with: import { base44 } from '@/api/base44Client'

CODE EXAMPLE:

// BEFORE:
import { Company } from '@/entities/Company';

// AFTER:
import { base44 } from '@/api/base44Client';
// Use: base44.entities.Company.list()

pages/ClientMessages.js

Issue: Broken ClientMessage entity imports

Fix: Use base44.entities.ClientMessage for all operations

CODE EXAMPLE:

// AFTER:
const messages = await base44.entities.ClientMessage.filter({ company_id: id });

pages/ProjectKanban.js

Issue: Broken ProjectTask entity imports

Fix: Use base44.entities.ProjectTask for CRUD operations

CODE EXAMPLE:

// AFTER:
const tasks = await base44.entities.ProjectTask.filter({ company_id: id });

pages/AdminAnalytics.js

Issue: Broken Company entity imports

Fix: Use base44.entities.Company.list() properly

CODE EXAMPLE:

// AFTER:
const companies = await base44.entities.Company.list('-created_date');

pages/Contracts.js

Issue: Broken Contract entity imports

Fix: Use base44.entities.Contract for all contract operations

CODE EXAMPLE:

// AFTER:
const contracts = await base44.entities.Contract.list('-created_date');

Implement Input Sanitization

CRITICAL

12 hours

Apply sanitization utilities to all form inputs to prevent XSS attacks

pages/Landing.js - Contact Form

Issue: No input sanitization on contact form

Fix: Import and use sanitizeContactForm before submission

CODE EXAMPLE:

import { sanitizeContactForm } from '@/components/utils/sanitize';

const handleSubmit = async (e) => {
  e.preventDefault();
  const sanitized = sanitizeContactForm(formData);
  // Use sanitized data
};

pages/ClientManager.js

Issue: Lead form accepts raw user input

Fix: Sanitize all text inputs before creating leads

CODE EXAMPLE:

import { sanitizeText, sanitizeEmail, sanitizePhone } from '@/components/utils/sanitize';

const sanitizedData = {
  name: sanitizeText(leadFormData.name),
  email: sanitizeEmail(leadFormData.email),
  phone: sanitizePhone(leadFormData.phone)
};

pages/CompanyManagement.js

Issue: Company form has no input validation

Fix: Sanitize company name, email, and all text fields

CODE EXAMPLE:

const sanitizedCompany = {
  company_name: sanitizeText(formData.company_name),
  company_email: sanitizeEmail(formData.company_email),
  notes: sanitizeText(formData.notes)
};

pages/MarketingCenter.js

Issue: AI prompt inputs not sanitized

Fix: Sanitize all prompts before sending to LLM

CODE EXAMPLE:

const sanitizedPrompt = sanitizeText(promptData.content);
const response = await base44.integrations.Core.InvokeLLM({
  prompt: sanitizedPrompt
});

components/ChatWidget.js

Issue: Chat messages not sanitized

Fix: Sanitize user messages before sending

CODE EXAMPLE:

const sanitizedMessage = sanitizeText(message.content);
await base44.agents.addMessage(conversation, {
  role: 'user',
  content: sanitizedMessage
});

Add Error Boundaries

HIGH

6 hours

Wrap all pages in ErrorBoundary to prevent white screen crashes

Layout.js

Issue: No error boundary wrapper for pages

Fix: Wrap {children} with ErrorBoundary component

CODE EXAMPLE:

import ErrorBoundary from '@/components/ErrorBoundary';

return (
  <div className="main-layout">
    {/* ... header ... */}
    <ErrorBoundary>
      {children}
    </ErrorBoundary>
  </div>
);

pages/DevelopersDashboard.js

Issue: No error handling for failed data loads

Fix: Add try-catch and error state

CODE EXAMPLE:

const [error, setError] = useState(null);

const loadData = async () => {
  try {
    const data = await base44.entities.Company.list();
    setCompanies(data);
  } catch (err) {
    setError(err.message);
    console.error('Load failed:', err);
  }
};

pages/MarketingCenter.js

Issue: LLM calls can fail without handling

Fix: Add error boundary and user-friendly error messages

CODE EXAMPLE:

try {
  const result = await base44.integrations.Core.InvokeLLM({...});
  setGenerated(result);
} catch (error) {
  setError('Failed to generate content. Please try again.');
}

pages/WebsiteAnalytics.js

Issue: Analytics load can crash page

Fix: Wrap chart rendering in error boundary

CODE EXAMPLE:

<ErrorBoundary>
  <ResponsiveContainer width="100%" height={300}>
    <LineChart data={trafficData}>
      {/* chart config */}
    </LineChart>
  </ResponsiveContainer>
</ErrorBoundary>

Global Implementation

Issue: 28 pages without error handling

Fix: Ensure every page export is wrapped

CODE EXAMPLE:

// Pattern for all pages:
export default function PageName() {
  return <ErrorBoundary><PageContent /></ErrorBoundary>;
}

function PageContent() {
  // actual page logic
}

Apply Rate Limiting

HIGH

8 hours

Prevent spam and cost explosion on forms and API calls

pages/Landing.js - Contact Form

Issue: No rate limiting on email submissions

Fix: Apply email rate limiter (3 per 5 minutes)

CODE EXAMPLE:

import { checkEmailRateLimit, recordEmailAttempt } from '@/components/utils/rateLimiter';

const handleSubmit = async (e) => {
  const { allowed, remainingTime } = checkEmailRateLimit(formData.email);
  if (!allowed) {
    setError(`Please wait ${remainingTime}s before submitting again`);
    return;
  }
  recordEmailAttempt(formData.email);
  // proceed with submission
};

pages/MarketingCenter.js

Issue: Unlimited LLM calls (cost explosion risk)

Fix: Rate limit to 10 calls per hour per user

CODE EXAMPLE:

import { checkApiRateLimit, recordApiAttempt } from '@/components/utils/rateLimiter';

const generateContent = async () => {
  const user = await base44.auth.me();
  const { allowed, remainingTime } = checkApiRateLimit('llm', user.email);
  if (!allowed) {
    setError(`Rate limit exceeded. Try again in ${Math.ceil(remainingTime/60)} minutes`);
    return;
  }
  recordApiAttempt('llm', user.email);
  // proceed with LLM call
};

pages/ClientManager.js

Issue: Form submissions not rate limited

Fix: Limit lead creation to 5 per minute

CODE EXAMPLE:

const { allowed } = checkFormRateLimit('lead-creation', user.id);
if (!allowed) {
  setError('Too many submissions. Please slow down.');
  return;
}
recordFormAttempt('lead-creation', user.id);

components/ChatWidget.js

Issue: Chat messages not rate limited

Fix: Limit to 20 messages per minute

CODE EXAMPLE:

const { allowed, remainingTime } = checkApiRateLimit('chat', conversation.id);
if (!allowed) {
  setError(`Slow down! Wait ${remainingTime}s`);
  return;
}
recordApiAttempt('chat', conversation.id);

pages/FinancialProjections.js

Issue: Expensive LLM calls unlimited

Fix: Rate limit financial projections (3 per hour)

CODE EXAMPLE:

const { allowed } = checkApiRateLimit('financial-llm', user.email, 3, 3600000);
if (!allowed) {
  setError('Rate limit: 3 projections per hour');
  return;
}

Replace alert() with Proper Dialogs

MEDIUM

4 hours

Replace all alert() calls with Toast notifications or Dialog components

Global Pattern

Issue: Multiple pages use alert() for notifications

Fix: Use shadcn Toast component (sonner)

CODE EXAMPLE:

// Install sonner (already in project):
import { toast } from 'sonner';

// BEFORE:
alert('Success!');

// AFTER:
toast.success('Operation completed successfully!');
toast.error('Something went wrong');
toast.info('Processing your request...');

pages/CompanyManagement.js

Issue: Uses alert() for success messages

Fix: Replace with toast notifications

CODE EXAMPLE:

// After company creation:
toast.success('Company created successfully!');

// After update:
toast.success('Company updated successfully!');

pages/ClientManager.js

Issue: alert() for lead creation

Fix: Use toast for feedback

CODE EXAMPLE:

try {
  await base44.entities.CRMLead.create(leadData);
  toast.success('Lead added successfully!');
  setShowForm(false);
} catch (error) {
  toast.error('Failed to create lead');
}

Delete Confirmations

Issue: Need confirm dialogs for destructive actions

Fix: Use shadcn AlertDialog component

CODE EXAMPLE:

import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '@/components/ui/alert-dialog';

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Delete</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction onClick={handleDelete}>Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Add Toaster Provider

Issue: Need to add Toaster component to root

Fix: Add Sonner Toaster to Layout.js

CODE EXAMPLE:

import { Toaster } from 'sonner';

export default function Layout({ children }) {
  return (
    <div>
      <Toaster position="top-right" richColors />
      {/* rest of layout */}
    </div>
  );
}