Generate a fully functional, multi-page Next.js MVP application for 'Space Potty Pro' using the App Router, Tailwind CSS, and Drizzle ORM. The application will provide advanced waste management tracking and comfort monitoring for astronauts on space missions, aiming to improve hygiene, efficiency, and psychological well-being.
**1. PROJECT OVERVIEW:**
Space Potty Pro is a sophisticated SaaS platform designed to revolutionize waste management and enhance astronaut comfort during space missions. It addresses the critical need for efficient, hygienic, and user-friendly waste disposal solutions in microgravity environments, as highlighted by the challenges faced in past lunar missions (e.g., Apollo). Beyond basic waste management, the platform integrates comfort monitoring (sleep, nutrition, personal care) to support astronaut well-being on long-duration missions. The core value proposition is to provide space agencies and private companies with a robust system that ensures astronaut health, mission success, and a more 'terrestrial' bathroom experience in space.
**2. TECH STACK:**
- **Framework:** Next.js (App Router)
- **UI Library:** shadcn/ui (for pre-built, accessible components)
- **Styling:** Tailwind CSS
- **ORM:** Drizzle ORM (PostgreSQL compatible, e.g., with Vercel Postgres or Neon)
- **Authentication:** NextAuth.js (or Clerk for a simpler managed solution)
- **Database:** PostgreSQL
- **State Management:** React Context API / Zustand (for global state if needed)
- **Forms:** React Hook Form + Zod for validation
- **API Layer:** Next.js API Routes or Server Actions
- **Deployment:** Vercel (recommended for Next.js)
- **Other:** TypeScript, ESLint, Prettier
**3. DATABASE SCHEMA (PostgreSQL with Drizzle ORM):**
```typescript
// schema.ts
import { pgTable, serial, timestamp, text, integer, boolean, pgEnum, jsonb, uuid } from 'drizzle-orm/pg-core';
import { relations } from 'drizzle-orm';
// Enums
export const wasteTypeEnum = pgEnum('waste_type', ['urine', 'feces', 'vomit', 'other']);
export const comfortMetricEnum = pgEnum('comfort_metric', ['sleep', 'nutrition', 'hygiene', 'recreation', 'mood']);
// Users Table (for Astronauts and Admins)
export const users = pgTable('users', {
id: uuid('id').primaryKey().defaultRandom(),
email: text('email').notNull().unique(),
name: text('name'),
role: text('role').notNull().default('astronaut'), // 'astronaut', 'admin', 'mission_control'
createdAt: timestamp('created_at').defaultNow()
});
// Missions Table
export const missions = pgTable('missions', {
id: uuid('id').primaryKey().defaultRandom(),
name: text('name').notNull(),
startDate: timestamp('start_date').notNull(),
endDate: timestamp('end_date'),
isOngoing: boolean('is_ongoing').default(true),
createdAt: timestamp('created_at').defaultNow()
});
// Mission Assignments (Many-to-Many: Users <-> Missions)
export const missionAssignments = pgTable('mission_assignments', {
userId: uuid('user_id').notNull().references(() => users.id, { onDelete: 'cascade' }),
missionId: uuid('mission_id').notNull().references(() => missions.id, { onDelete: 'cascade' }),
assignedAt: timestamp('assigned_at').defaultNow(),
primaryAstronaut: boolean('primary_astronaut').default(false)
});
// Waste Log Entries
export const wasteEntries = pgTable('waste_entries', {
id: uuid('id').primaryKey().defaultRandom(),
userId: uuid('user_id').notNull().references(() => users.id, { onDelete: 'set null' }), // Can be null if anonymous logging is allowed or system generated
missionId: uuid('mission_id').notNull().references(() => missions.id, { onDelete: 'cascade' }),
type: wasteTypeEnum('type').notNull(),
quantityMl: integer('quantity_ml'), // Approximate quantity in milliliters
timestamp: timestamp('timestamp').notNull().defaultNow(),
notes: text('notes'),
// Metadata for analysis
density: integer('density'), // e.g., 1-5 scale
color: text('color'), // e.g., hex code or descriptive
consistency: integer('consistency') // e.g., 1-5 scale (liquid to solid)
});
// Comfort Log Entries
export const comfortEntries = pgTable('comfort_entries', {
id: uuid('id').primaryKey().defaultRandom(),
userId: uuid('user_id').notNull().references(() => users.id, { onDelete: 'cascade' }),
missionId: uuid('mission_id').notNull().references(() => missions.id, { onDelete: 'cascade' }),
metric: comfortMetricEnum('metric').notNull(),
value: integer('value').notNull(), // e.g., hours slept, rating 1-10, activity level
timestamp: timestamp('timestamp').notNull().defaultNow(),
notes: text('notes'),
// For specific metrics like sleep, could add start/end times
startTime: timestamp('start_time'),
endTime: timestamp('end_time')
});
// System Settings (for Admins)
export const systemSettings = pgTable('system_settings', {
id: serial('id').primaryKey(),
settingName: text('setting_name').notNull().unique(),
settingValue: text('setting_value'),
description: text('description')
});
// Relations (Define relationships for easier querying)
export const usersRelations = relations(users, ({ many }) => ({
assignments: many(missionAssignments),
wasteEntries: many(wasteEntries),
comfortEntries: many(comfortEntries)
}));
export const missionsRelations = relations(missions, ({ many }) => ({
assignments: many(missionAssignments),
wasteEntries: many(wasteEntries),
comfortEntries: many(comfortEntries)
}));
export const missionAssignmentsRelations = relations(missionAssignments, ({ one }) => ({
user: one(users, {
fields: [missionAssignments.userId],
references: [users.id]
}),
mission: one(missions, {
fields: [missionAssignments.missionId],
references: [missions.id]
})
}));
export const wasteEntriesRelations = relations(wasteEntries, ({ one }) => ({
user: one(users, {
fields: [wasteEntries.userId],
references: [users.id]
}),
mission: one(missions, {
fields: [wasteEntries.missionId],
references: [missions.id]
})
}));
export const comfortEntriesRelations = relations(comfortEntries, ({ one }) => ({
user: one(users, {
fields: [comfortEntries.userId],
references: [users.id]
}),
mission: one(missions, {
fields: [comfortEntries.missionId],
references: [missions.id]
})
}));
```
**4. CORE FEATURES & USER FLOW:**
**A. Authentication:**
- **Flow:** Users (astronauts, mission control, admins) access the platform via a login page. Authentication is handled by NextAuth.js/Clerk. Options include email/password, SSO (if applicable for corporate clients).
- **Roles:** Astronauts can log their waste and comfort data. Mission Control can view real-time data, receive alerts, and manage missions. Admins can manage users, system settings, and view all data.
- **Edge Case:** Password reset, invalid credentials, unauthorized access attempts.
**B. Waste Management Logging (Astronaut View):**
- **User Flow:**
1. Astronaut navigates to 'Log Waste' page/modal.
2. Selects waste type (Urine, Feces, Vomit, Other) from a dropdown/buttons.
3. Optionally inputs quantity (ml), consistency, density, color (using color picker or predefined options), and adds notes.
4. Clicks 'Submit Entry'.
5. System confirms entry and updates the astronaut's dashboard.
- **Backend:** API route/Server Action receives data, validates it (using Zod), and saves it to the `waste_entries` table, associating it with the logged-in user and the current mission.
- **Edge Cases:** Incomplete form submission, network errors during submission, logging for a non-assigned mission (should be prevented or flagged).
**C. Comfort Monitoring Logging (Astronaut View):**
- **User Flow:**
1. Astronaut navigates to 'Log Comfort' page/modal.
2. Selects comfort metric (Sleep, Nutrition, Hygiene, Recreation, Mood).
3. Inputs relevant value (e.g., hours slept, rating 1-10, duration of activity).
4. For Sleep, optionally inputs start/end times.
5. Adds notes if desired.
6. Clicks 'Submit Entry'.
7. System confirms and updates the dashboard.
- **Backend:** Similar to waste logging, data is validated and saved to `comfort_entries`.
- **Edge Cases:** Missing required fields, inconsistent time entries (e.g., end time before start time).
**D. Dashboard (Astronaut View):**
- **Content:** Displays a summary of recent waste logs (types, counts), comfort metrics (e.g., average sleep hours, mood trends), and mission status. Visualizations (charts) showing trends over time.
- **Data Fetching:** Fetches aggregated data from `waste_entries` and `comfort_entries` for the current mission and user. Uses Server Components for initial load and Client Components with state management for interactive elements or real-time updates (polling/WebSockets if needed).
- **UI Components:** Summary cards, line/bar charts (using a charting library like Chart.js or Recharts), progress indicators.
**E. Real-time Monitoring (Mission Control View):**
- **User Flow:** Mission Control logs in, selects a mission, and views a dashboard with real-time data feeds from all astronauts on that mission.
- **Features:** Aggregated waste output, critical comfort metric alerts (e.g., low sleep hours, low mood scores), individual astronaut drill-down.
- **Data Fetching:** Utilizes Server-Sent Events (SSE) or WebSockets for real-time updates, or frequent polling for MVP.
- **UI Components:** Live data tables, alert notifications, status indicators (e.g., green/yellow/red for health parameters).
**F. Mission Management (Admin/Mission Control View):**
- **User Flow:** Admins/Mission Control can create new missions, assign astronauts, set mission dates, and mark missions as ongoing or completed.
- **Backend:** CRUD operations on the `missions` and `mission_assignments` tables via API Routes or Server Actions.
- **UI Components:** Forms for creating/editing missions, user assignment interface (e.g., multi-select dropdowns), mission status toggles.
**5. API & DATA FETCHING:**
- **API Routes/Server Actions:** Will handle all data mutations (POST, PUT, DELETE) and complex queries.
- `POST /api/waste`: Log new waste entry.
- `POST /api/comfort`: Log new comfort entry.
- `GET /api/dashboard-data`: Fetch aggregated data for astronaut dashboard.
- `GET /api/mission-control-feed`: Fetch real-time or near-real-time data for mission control.
- `GET /api/missions`, `POST /api/missions`, `PUT /api/missions/:id` etc. for mission management.
- **Data Fetching Strategy:**
- **Server Components:** Fetch initial data required for the page directly from the database (e.g., user profile, mission list).
- **Client Components:** Fetch dynamic data, handle user interactions, and update UI using `fetch` API calls to the backend endpoints or directly using Server Actions.
- **Data Structure:** Responses will be in JSON format. Use consistent naming conventions.
- **Example Request Body (`POST /api/waste`):**
```json
{
"type": "urine",
"quantityMl": 300,
"consistency": 1,
"notes": "Routine log"
}
```
- **Example Response Body (Success):**
```json
{
"success": true,
"message": "Waste entry logged successfully.",
"entryId": "uuid-string"
}
```
**6. COMPONENT BREAKDOWN (Next.js App Router Structure):**
- **`app/`**
- **`layout.tsx`:** Root layout (includes Providers for auth, theme, global styles).
- **`page.tsx`:** Public landing page (will be basic for MVP).
- **`auth/`:** Authentication pages (Login, Signup, Password Reset).
- `login/page.tsx`
- **`(app)/`:** Authenticated application routes (protected).
- **`layout.tsx`:** App layout (sidebar/header).
- `components/Sidebar.tsx` (Navigation for Astronaut/Mission Control)
- `components/Header.tsx` (User info, logout button)
- **`dashboard/page.tsx`:** (Astronaut) Main dashboard.
- `components/Dashboard/WasteSummaryCard.tsx`
- `components/Dashboard/ComfortSummaryCard.tsx`
- `components/Dashboard/MissionStatus.tsx`
- `components/Charts/WasteTrendChart.tsx`
- `components/Charts/SleepTrendChart.tsx`
- **`log/`:** Logging forms.
- `log/waste/page.tsx`
- `components/Forms/WasteLogForm.tsx` (using React Hook Form, Zod, shadcn/ui components like Input, Select, Textarea)
- `log/comfort/page.tsx`
- `components/Forms/ComfortLogForm.tsx` (similar structure)
- **`mission-control/`:** (Mission Control Role)
- `page.tsx`: Real-time monitoring overview.
- `components/MissionControl/LiveDataTable.tsx` (displays astronaut data)
- `components/MissionControl/AlertsFeed.tsx`
- `manage/page.tsx`: Mission management.
- `components/MissionControl/MissionList.tsx`
- `components/MissionControl/MissionForm.tsx`
- `components/MissionControl/UserAssignment.tsx`
- **`settings/page.tsx`:** (Admin/User Profile)
- `components/Settings/ProfileForm.tsx`
- `components/Settings/SystemSettingsForm.tsx` (Admin only)
- **`users/page.tsx`:** (Admin) User management.
- `components/Admin/UserList.tsx`
- `components/Admin/UserForm.tsx`
- **`components/`:** Shared UI components (Buttons, Modals, Cards, Charts, etc. from shadcn/ui and custom ones).
- **`lib/`:** Utility functions, database connection (Drizzle), date formatting.
- **`hooks/`:** Custom React hooks.
- **`styles/`:** Global CSS (Tailwind base, config).
- **`types/`:** TypeScript interfaces and types.
**7. UI/UX DESIGN & VISUAL IDENTITY:**
- **Style:** 'Minimalist Clean' with futuristic, space-themed accents.
- **Color Palette:**
- Primary: Deep Space Blue (`#0B132B`)
- Secondary: Cosmic Gray (`#3A506B`)
- Accent 1: Starlight White (`#FFFFFF`)
- Accent 2: Nebula Purple (`#8338EC`)
- Accent 3: Signal Orange (`#FB8500`)
- Success: `emerald-500`
- Warning: `amber-500`
- Error: `red-500`
- **Typography:** A clean, modern sans-serif font like 'Inter' or 'Manrope'. Headings should be clear and legible.
- **Layout:**
- **Mobile:** Single column, clear navigation (bottom tab bar or hamburger menu).
- **Desktop:** Sidebar navigation on the left, main content area on the right. Use a dashboard layout with cards and clear visual hierarchy.
- **Interactivity:** Subtle hover effects on buttons and interactive elements. Smooth transitions between pages and states.
- **Responsiveness:** Fully responsive design adhering to common breakpoints (mobile, tablet, desktop).
**8. SAMPLE/MOCK DATA:**
**`users` Table:**
1. `{"id": "uuid-astronaut-1", "email": "cdr.hudson@artemis.nasa.gov", "name": "Ripley Hudson", "role": "astronaut"}`
2. `{"id": "uuid-astro-2", "email": "commander.shaver@artemis.nasa.gov", "name": "Alex Shaver", "role": "astronaut"}`
3. `{"id": "uuid-mc-1", "email": "control@spacex.com", "name": "Mission Control", "role": "mission_control"}`
4. `{"id": "uuid-admin-1", "email": "admin@spacepotty.pro", "name": "System Admin", "role": "admin"}`
**`missions` Table:**
1. `{"id": "uuid-mission-artemis2", "name": "Artemis II Lunar Orbit", "startDate": "2026-04-01T10:00:00Z", "endDate": null, "isOngoing": true}`
**`mission_assignments` Table:**
1. `{"userId": "uuid-astronaut-1", "missionId": "uuid-mission-artemis2", "primaryAstronaut": true}`
2. `{"userId": "uuid-astro-2", "missionId": "uuid-mission-artemis2", "primaryAstronaut": false}`
**`waste_entries` Table:**
1. `{"id": "uuid-waste-1", "userId": "uuid-astronaut-1", "missionId": "uuid-mission-artemis2", "type": "urine", "quantityMl": 450, "timestamp": "2026-04-02T08:30:00Z", "density": 2, "consistency": 1}`
2. `{"id": "uuid-waste-2", "userId": "uuid-astronaut-1", "missionId": "uuid-mission-artemis2", "type": "feces", "quantityMl": 150, "timestamp": "2026-04-02T15:00:00Z", "density": 4, "consistency": 4, "notes": "Slightly harder than usual."}`
3. `{"id": "uuid-waste-3", "userId": "uuid-astro-2", "missionId": "uuid-mission-artemis2", "type": "urine", "quantityMl": 320, "timestamp": "2026-04-02T09:15:00Z"}`
**`comfort_entries` Table:**
1. `{"id": "uuid-comfort-1", "userId": "uuid-astronaut-1", "missionId": "uuid-mission-artemis2", "metric": "sleep", "value": 7, "startTime": "2026-04-01T23:00:00Z", "endTime": "2026-04-02T06:00:00Z", "timestamp": "2026-04-02T06:05:00Z"}`
2. `{"id": "uuid-comfort-2", "userId": "uuid-astronaut-1", "missionId": "uuid-mission-artemis2", "metric": "mood", "value": 8, "notes": "Feeling good, scenery is amazing.", "timestamp": "2026-04-02T10:00:00Z"}`
3. `{"id": "uuid-comfort-3", "userId": "uuid-astro-2", "missionId": "uuid-mission-artemis2", "metric": "nutrition", "value": 9, "notes": "Rehydrated food pack was surprisingly tasty.", "timestamp": "2026-04-02T12:00:00Z"}`
4. `{"id": "uuid-comfort-4", "userId": "uuid-astronaut-1", "missionId": "uuid-mission-artemis2", "metric": "hygiene", "value": 10, "timestamp": "2026-04-02T14:00:00Z"}`
**9. ANIMATIONS:**
- **Page Transitions:** Use `Framer Motion` for smooth, staggered page transitions (e.g., slide-in or fade-in effects).
- **Component Mount/Unmount:** Animate elements appearing/disappearing (e.g., list items fading in, modals sliding up).
- **Loading States:** Use spinners or skeleton loaders (from shadcn/ui or custom) with subtle fade-in/out for data fetching.
- **Hover Effects:** Slight scale or background color change on interactive elements like buttons and cards.
- **Micro-interactions:** Subtle animations on form submission confirmations or status changes.
**10. EDGE CASES:**
- **Authentication:** Redirect unauthenticated users to login. Handle expired sessions. Implement role-based access control (RBAC) for different pages/features.
- **Data Validation:** Comprehensive client-side (Zod) and server-side (Zod within API routes/Server Actions) validation for all inputs. Provide clear error messages.
- **Empty States:** Design informative and visually appealing empty states for dashboards, data tables, etc., when no data is available (e.g., "No waste logs yet. Start logging your first entry!").
- **Error Handling:** Graceful error handling for API calls (display user-friendly messages). Implement `try...catch` blocks in data fetching and mutations. Log errors to a monitoring service.
- **Network Failures:** Provide feedback to the user if an action fails due to network issues. Allow retries where appropriate.
- **Offline Support (Future Consideration):** For critical functions, consider PWA features for basic offline logging that syncs when connectivity is restored.
- **Timezones:** Ensure all timestamps are stored in UTC and handled appropriately for display based on user or mission context.
**11. TURKISH TRANSLATIONS (Examples):**
- **App Title:** Space Potty Pro
- **Login Button:** Giriş Yap
- **Sign Up Button:** Kayıt Ol
- **Dashboard Title:** Kontrol Paneli
- **Log Waste Button:** Atık Kaydet
- **Log Comfort Button:** Konfor Kaydet
- **Waste Type:** Atık Türü
- **Urine:** İdrar
- **Feces:** Dışkı
- **Quantity (ml):** Miktar (ml)
- **Timestamp:** Zaman Damgası
- **Notes:** Notlar
- **Submit:** Gönder
- **Success Message:** Kayıt başarıyla oluşturuldu.
- **Error Message:** Bir hata oluştu. Lütfen tekrar deneyin.
- **Mission Control:** Görev Kontrol
- **Astronaut:** Astronot
- **Settings:** Ayarlar
- **User Profile:** Kullanıcı Profili
- **Real-time Monitoring:** Gerçek Zamanlı İzleme
- **Mission Management:** Görev Yönetimi