Iteration 1: Admin Setup & Workshop Management

Create the admin interface for workshop and student management with TypeScript, SQLite database, and server-side JSX.

Val Name: workshopTypes Type: Script Val Purpose: Define all TypeScript interfaces and types for the entire application

// Export all interfaces that will be used across vals
export interface Workshop {
  id: number;
  name: string;
  description: string;
  age_groups: string;
  capacity: number;
  day: 'monday' | 'tuesday';
  time_slot: 1 | 2 | 3;
  created_at: string;
}

export interface Kid {
  id: number;
  name: string;
  grade: string;
  created_at: string;
}

export interface Preference {
  id: number;
  kid_id: number;
  workshop_id: number;
  rank: 1 | 2 | 3;
  day: 'monday' | 'tuesday';
  time_slot: 1 | 2 | 3;
  created_at: string;
}

export type Day = 'monday' | 'tuesday';
export type TimeSlot = 1 | 2 | 3;
export type PreferenceRank = 1 | 2 | 3;

Val Name: workshopDatabase Type: Script Val Purpose: Database initialization, connection utilities, and setup functions

import { sqlite } from "https://esm.sh/@valtown/sdk";

export async function initDatabase() {
  // Create all tables with proper schema
  // Include helper functions for common database operations
}

export async function resetDatabase() {
  // For development - drop and recreate tables
}

export { sqlite };

Tasks:

• Create all four tables (workshops, kids, preferences, assignments)
• Add proper constraints and foreign keys
• Create helper functions for common queries
• Add database reset function for development

Val Name: workshopAuth Type: Script Val Purpose: Simple admin authentication system

const ADMIN_PASSWORD = "workshop2025admin"; // Hardcoded password

export function requireAuth(request: Request): boolean {
  // Check for auth parameter or session
}

export function getAuthUrl(baseUrl: string): string {
  // Return URL with auth parameter
}

export function isAuthenticated(request: Request): boolean {
  // Validate authentication
}

Tasks:

• Implement URL-based authentication
• Create auth checking functions
• Add redirect helpers for protected pages

Val Name: workshopComponents Type: Script Val Purpose: Reusable JSX components and layouts

/** @jsxImportSource https://esm.sh/preact */

export function AdminLayout({ 
  children, 
  title, 
  currentPage 
}: { 
  children: any; 
  title: string; 
  currentPage?: string; 
}) {
  // Main admin layout with navigation
}

export function WorkshopCard({ workshop }: { workshop: Workshop }) {
  // Workshop display component
}

export function ErrorMessage({ message }: { message: string }) {
  // Error display component
}

Tasks:

• Create admin layout with navigation
• Build reusable components for workshops and students
• Add CSS styling within components
• Create consistent form styling

Val Name: workshopManager Type: HTTP Handler Val Purpose: CRUD operations for workshops

/** @jsxImportSource https://esm.sh/preact */
import { render } from "https://esm.sh/preact-render-to-string";

export default async function(req: Request): Promise<Response> {
  // Handle GET: Display workshop management interface
  // Handle POST: Process workshop creation/updates
  // Handle DELETE: Remove workshops
}

Routes to handle:

• GET / - Workshop management dashboard
• GET /?action=new - New workshop form
• GET /?action=edit&id=123 - Edit workshop form
• POST / - Create/update workshop
• POST /?action=delete&id=123 - Delete workshop

Tasks:

• Create workshop listing with day/time slot organization
• Build new workshop form with validation
• Implement edit workshop functionality
• Add delete confirmation
• Handle form validation and errors

Val Name: studentManager Type: HTTP Handler Val Purpose: CRUD operations for students

/** @jsxImportSource https://esm.sh/preact */
import { render } from "https://esm.sh/preact-render-to-string";

export default async function(req: Request): Promise<Response> {
  // Handle GET: Display student management interface
  // Handle POST: Process student creation/updates/bulk import
}

Routes to handle:

• GET / - Student management interface
• GET /?action=new - New student form
• GET /?action=edit&id=123 - Edit student form
• GET /?action=bulk - Bulk import form
• POST / - Create/update student
• POST /?action=bulk - Bulk import students

Tasks:

• Create student listing with search/filter
• Build individual student forms
• Implement bulk import (paste list of names)
• Add grade/class assignment
• Handle duplicate name detection

Val Name: adminDashboard Type: HTTP Handler Val Purpose: Main admin landing page with overview

/** @jsxImportSource https://esm.sh/preact */
import { render } from "https://esm.sh/preact-render-to-string";

export default async function(req: Request): Promise<Response> {
  // Show overview statistics
  // Display workshop grid by day/time
  // Show student count
  // Navigation to other admin functions
}

Tasks:

• Create dashboard with key statistics
• Show workshop overview grid (6 time slots total)
• Display student count and recent additions
• Add quick action buttons
• Show system status and data validation

Val Name: workshopAdmin Type: HTTP Handler Val Purpose: Main admin entry point with authentication

/** @jsxImportSource https://esm.sh/preact */
import { render } from "https://esm.sh/preact-render-to-string";

export default async function(req: Request): Promise<Response> {
  // Check authentication
  // Show login form if not authenticated
  // Redirect to dashboard if authenticated
}

Tasks:

• Create login form
• Handle authentication check
• Redirect to appropriate admin sections
• Handle logout functionality

Val Name: setupDatabase Type: Script Val Purpose: One-time database setup

import { initDatabase } from "./workshopDatabase";

// Run this once to set up the database
export default async function() {
  await initDatabase();
  return "Database initialized successfully";
}

Tasks:

• Create tables if they don't exist
• Add any seed data if needed
• Validate database setup

Val Name: workshopStyles Type: Script Val Purpose: Centralized CSS styles

export const adminStyles = `
  /* Complete CSS for admin interface */
  /* Grid layouts for workshop overview */
  /* Form styling */
  /* Navigation styling */
  /* Responsive design */
`;

Tasks:

• Create consistent styling system
• Design workshop grid layout
• Style forms and buttons
• Add responsive design
• Ensure accessibility

1. Setup Phase (Steps 1-3): Types, database, authentication
2. Core Components (Step 4): Shared layouts and components
3. Main Features (Steps 5-6): Workshop and student management
4. Integration (Steps 7-8): Dashboard and main admin interface
5. Finalization (Steps 9-10): Database setup and styling

• Can create new workshop with all fields
• Workshop appears in correct day/time slot
• Can edit existing workshop
• Can delete workshop
• Form validation works correctly
• Age groups and capacity are properly stored

• Can add individual students
• Can edit student information
• Can delete students
• Bulk import works with pasted list
• Duplicate name handling works
• Grade assignment works correctly

• Admin login works with correct password
• Invalid password is rejected
• All admin pages require authentication
• Navigation between sections works
• Logout functionality works

• Workshop grid shows all 6 time slots
• Statistics are accurate
• Quick actions work correctly
• Page loads quickly with sample data

• All tables created correctly
• Foreign key constraints work
• Data persists between requests
• No data corruption occurs

• Admin can successfully log in
• Admin can create, edit, and delete workshops for all 6 time slots
• Admin can manage student list (add, edit, delete, bulk import)
• All data persists correctly in SQLite database
• Interface is intuitive and responsive
• Ready to move to Iteration 2 (student preferences)

After completion, the admin interface will be accessible at:

• https://username-workshopAdmin.web.val.run/?auth=workshop2025admin
• Workshop management: https://username-workshopManager.web.val.run/?auth=workshop2025admin
• Student management: https://username-studentManager.web.val.run/?auth=workshop2025admin

• Setup & Database: 4-6 hours
• Core Management Features: 8-10 hours
• Dashboard & Integration: 4-6 hours
• Testing & Polish: 2-4 hours
• Total: 18-26 hours (2-3 development days)