### Run Maternix Frontend Locally Source: https://github.com/dreiiiiim/maternix-frontend-backend/blob/main/README.md Commands to navigate to the frontend directory, install dependencies, and start the development server. ```bash cd frontend npm install npm run dev ``` -------------------------------- ### Configure Project Environment Source: https://context7.com/dreiiiiim/maternix-frontend-backend/llms.txt Commands for installing dependencies and managing the development and production lifecycle of the Next.js application. ```bash # Navigate to frontend directory cd frontend # Install dependencies npm install # Start development server npm run dev # Build for production npm run build # Start production server npm start ``` -------------------------------- ### Implement Root Layout Source: https://context7.com/dreiiiiim/maternix-frontend-backend/llms.txt The main layout wrapper providing global styling and the navigation header for the application. ```tsx // frontend/src/app/layout.tsx import type { Metadata } from "next"; import "./globals.css"; import { Header } from "@/components/Header"; export const metadata: Metadata = { title: "Maternix Track", description: "Advanced clinical tracking for nursing students and instructors in maternal health education.", }; export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode; }>) { return (

{children} ); } ``` -------------------------------- ### Create Header Component Source: https://context7.com/dreiiiiim/maternix-frontend-backend/llms.txt Responsive navigation header that conditionally renders based on the current route using Framer Motion for animations. ```tsx // frontend/src/components/Header.tsx 'use client'; import Link from 'next/link'; import { usePathname } from 'next/navigation'; import { motion } from 'framer-motion'; import Image from 'next/image'; export function Header() { const pathname = usePathname(); const isAuthPage = pathname === '/login' || pathname === '/signup'; const isDashboardPage = pathname.startsWith('/student') || pathname.startsWith('/instructor') || pathname.startsWith('/admin'); // Hide header on auth and dashboard pages (they have their own headers) if (isAuthPage || isDashboardPage) return null; return (

About Us Login Sign Up

); } ``` -------------------------------- ### Implement Instructor Dashboard Component Source: https://context7.com/dreiiiiim/maternix-frontend-backend/llms.txt Provides a tabbed interface for navigating between announcements, procedure management, and student masterlist views. ```tsx // frontend/src/components/InstructorDashboard.tsx 'use client'; import { useState } from 'react'; import { Bell, FileText, Users } from 'lucide-react'; import { AnnouncementForm } from './instructor/AnnouncementForm'; import { ProcedureManagement } from './instructor/ProcedureManagement'; import { StudentMasterlist } from './instructor/StudentMasterlist'; type TabType = 'announcements' | 'procedures' | 'students'; export function InstructorDashboard() { const [activeTab, setActiveTab] = useState('announcements'); const tabs = [ { id: 'announcements', label: 'Announcements', icon: Bell }, { id: 'procedures', label: 'Procedures', icon: FileText }, { id: 'students', label: 'Student Masterlist', icon: Users }, ]; return (

{/* Tab Navigation */}

{tabs.map((tab) => ( ))}

{/* Tab Content */} {activeTab === 'announcements' && } {activeTab === 'procedures' && } {activeTab === 'students' && }

); } ``` -------------------------------- ### Define Application Routes Source: https://context7.com/dreiiiiim/maternix-frontend-backend/llms.txt Overview of the Next.js App Router structure for public, authentication, and dashboard pages. ```typescript // Route structure (frontend/src/app/*) / // Landing page - public marketing page /about // About Us page /login // User login with role selection /signup // User registration (student/instructor) /student/dashboard // Student dashboard with procedures and announcements /student/profile // Student profile settings /instructor/dashboard // Instructor dashboard with tabs /admin/dashboard // Admin dashboard for system management /announcements // Announcements listing page ``` -------------------------------- ### Login Page Component with Role Selection Source: https://context7.com/dreiiiiim/maternix-frontend-backend/llms.txt Handles user login with email and password, and allows selection of user type (student, instructor, admin) before routing to the appropriate dashboard. Clears session storage for announcements on submit. ```tsx // frontend/src/components/LoginPage.tsx 'use client'; import { useState } from 'react'; import { useRouter } from 'next/navigation'; export function LoginPage() { const router = useRouter(); const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [userType, setUserType] = useState<'student' | 'instructor' | 'admin'>('student'); const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); sessionStorage.removeItem('announcementPopupShown'); // Route to appropriate dashboard based on user type if (userType === 'instructor') { router.push('/instructor/dashboard'); } else if (userType === 'admin') { router.push('/admin/dashboard'); } else { router.push('/student/dashboard'); } }; return ( ); } ``` -------------------------------- ### Implement Announcement Form Component Source: https://context7.com/dreiiiiim/maternix-frontend-backend/llms.txt Handles the creation and deletion of announcements with category selection and local state management. ```tsx // frontend/src/components/instructor/AnnouncementForm.tsx 'use client'; import { useState } from 'react'; export function AnnouncementForm() { const [formData, setFormData] = useState({ title: '', content: '', category: 'Academic' }); const [announcements, setAnnouncements] = useState([ { id: 1, title: 'New Clinical Modules Available', category: 'Academic', date: 'April 12, 2026' }, ]); const categories = ['Academic', 'Schedule', 'Assessment', 'Event', 'Policy']; const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); const newAnnouncement = { id: Math.max(...announcements.map((a) => a.id), 0) + 1, title: formData.title, category: formData.category, date: new Date().toLocaleDateString('en-US', { year: 'numeric', month: 'long', day: 'numeric' }), }; setAnnouncements([newAnnouncement, ...announcements]); setFormData({ title: '', content: '', category: 'Academic' }); }; const handleDelete = (id: number) => { if (confirm('Are you sure you want to delete this announcement?')) { setAnnouncements(announcements.filter((a) => a.id !== id)); } }; return (

setFormData({ ...formData, title: e.target.value })} placeholder="Announcement Title" required />

setFormData({ ...formData, content: e.target.value })}
        placeholder="Write your announcement..."
        required
      />
      <button type="submit">Post Announcement</button>
    </form>
  );
}
```

--------------------------------

### CSS Class Merging Utility

Source: https://context7.com/dreiiiiim/maternix-frontend-backend/llms.txt

Combines CSS class names using clsx and tailwind-merge for efficient conditional styling. Import and use the `cn` function.

```typescript
// frontend/src/lib/utils.ts
import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

// Usage example:
// cn("base-class", isActive && "active-class", { "conditional-class": condition })

```

--------------------------------

### Admin Dashboard Component

Source: https://context7.com/dreiiiiim/maternix-frontend-backend/llms.txt

Manages sections, instructors, and user approvals. Uses React state for tab management and data display. Handles user approval actions.

```tsx
// frontend/src/components/AdminDashboard.tsx
'use client';

import { useState } from 'react';

type Section = {
  id: number; name: string; semester: string; schedule: string;
  instructor: string | null; studentCount: number;
};

type Instructor = {
  id: number; name: string; email: string;
  specialization: string; assignedSections: number[];
};

type PendingUser = {
  id: number; name: string; email: string;
  role: 'instructor' | 'student'; requestedDate: string; section?: string;
};

export function AdminDashboard() {
  const [activeTab, setActiveTab] = useState<'sections' | 'instructors' | 'approvals'>('sections');
  const [sections, setSections] = useState<Section[]>([
    { id: 1, name: 'BSN 2A', semester: 'Spring 2026', schedule: 'Mon/Wed 8:00 AM', instructor: 'Dr. Sarah Mitchell', studentCount: 6 },
  ]);
  const [pendingApprovals, setPendingApprovals] = useState<PendingUser[]>([
    { id: 1, name: 'Dr. Maria Santos', email: 'maria@nursing.edu', role: 'instructor', requestedDate: 'April 10, 2026' },
  ]);

const handleApprove = (userId: number) => {
    const user = pendingApprovals.find((u) => u.id === userId);
    // Add user to appropriate list based on role
    setPendingApprovals(pendingApprovals.filter((u) => u.id !== userId));
  };

const handleReject = (userId: number) => {
    setPendingApprovals(pendingApprovals.filter((u) => u.id !== userId));
  };

const handleAddSection = (sectionData) => {
    const newSection = { id: sections.length + 1, ...sectionData, studentCount: 0 };
    setSections([...sections, newSection]);
  };

return (
    <div>
      {/* Tab buttons */}
      <button onClick={() => setActiveTab('sections')}>Section Management</button>
      <button onClick={() => setActiveTab('instructors')}>Instructor Management</button>
      <button onClick={() => setActiveTab('approvals')}> 
        User Approvals {pendingApprovals.length > 0 && `(${pendingApprovals.length})`}
      </button>

{activeTab === 'approvals' && pendingApprovals.map((user) => (
        <div key={user.id}>
          <h3>{user.name}</h3>
          <span>{user.role}</span>
          <button onClick={() => handleApprove(user.id)}>Approve</button>
          <button onClick={() => handleReject(user.id)}>Reject</button>
        </div>
      ))}
    </div>
  );
}
```

--------------------------------

### Announcement Popup Component

Source: https://context7.com/dreiiiiim/maternix-frontend-backend/llms.txt

Displays a modal popup for announcements on dashboard load, shown only once per session. Uses framer-motion for animations.

```tsx
// frontend/src/components/AnnouncementPopup.tsx
'use client';

import { useState, useEffect } from 'react';
import { AnimatePresence, motion } from 'framer-motion';

interface AnnouncementPopupProps {
  onViewAll: () => void;
}

export function AnnouncementPopup({ onViewAll }: AnnouncementPopupProps) {
  const [isOpen, setIsOpen] = useState(false);

useEffect(() => {
    // Show popup only once per session
    const hasShownPopup = sessionStorage.getItem('announcementPopupShown');
    if (!hasShownPopup) {
      const timer = setTimeout(() => {
        setIsOpen(true);
        sessionellStorage.setItem('announcementPopupShown', 'true');
      }, 500);
      return () => clearTimeout(timer);
    }
  }, []);

return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0, scale: 0.9 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0, scale: 0.9 }}
        >
          <h2>New Announcements</h2>
          {/* Announcement list */}
          <button onClick={() => setIsOpen(false)}>Close</button>
          <button onClick={() => { setIsOpen(false); onViewAll(); }}>View All</button>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

```

--------------------------------

### Student Dashboard Component

Source: https://context7.com/dreiiiiim/maternix-frontend-backend/llms.txt

Displays student's allowed procedures, completion status, and announcements. Includes navigation to procedure details and visual indicators for status.

```tsx
// frontend/src/components/StudentDashboard.tsx
'use client';

import { useState } from 'react';
import { motion } from 'framer-motion';
import { CheckCircle, Clock, FileText } from 'lucide-react';

// Procedure data structure
const allowedProcedures = [
  {
    id: 1,
    name: "Leopold's Maneuver",
    category: 'Clinical Procedure',
    allowedBy: 'Dr. Sarah Mitchell',
    status: 'evaluated',  // 'evaluated' | 'completed' | 'pending' | 'locked'
    evaluation: {
      overallScore: 95,
      maxScore: 100,
      competencyStatus: 'Competent',
      rubric: [
        { criterion: 'Preparation & Setup', score: 24, maxScore: 24 },
        { criterion: 'Procedural Accuracy', score: 35, maxScore: 40 },
      ],
    },
    resources: [
      { type: 'file', name: "Leopold's Maneuver Guide.pdf", url: '#' },
      { type: 'link', name: 'Video Tutorial', url: '#' },
    ],
  },
  // ... more procedures
];

export function StudentDashboard() {
  const [selectedProcedure, setSelectedProcedure] = useState(null);
  const [showAnnouncements, setShowAnnouncements] = useState(false);

return (
    <div className="min-h-screen bg-background">
      {/* Stats Grid */}
      <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
        <div className="bg-white border rounded-2xl p-6">
          <CheckCircle /> Total Procedures Allowed: 3
        </div>
        <div className="bg-white border rounded-2xl p-6">
          <CheckCircle /> Evaluated: 1
        </div>
        <div className="bg-white border rounded-2xl p-6">
          <Clock /> In Progress: 2
        </div>
      </div>

{/* Procedures List */}
      {allowedProcedures.map((procedure) => (
        <div
          key={procedure.id}
          onClick={() => procedure.status !== 'locked' && setSelectedProcedure(procedure)}
          style={{
            borderLeftColor: procedure.status === 'locked' ? '#9CA3AF' :
              procedure.status === 'completed' || procedure.status === 'evaluated'
                ? 'var(--brand-green-dark)' : 'var(--brand-pink-dark)',
          }}
        >
          <h4>{procedure.name}</h4>
          <span>{procedure.category}</span>
          <span>{procedure.status}</span>
        </div>
      ))}
    </div>
  );
}

```

--------------------------------

### Student Evaluation Form Component Implementation

Source: https://context7.com/dreiiiiim/maternix-frontend-backend/llms.txt

A React component that manages evaluation state, calculates scores dynamically based on a rubric, and provides an interface for feedback.

```tsx
// frontend/src/components/instructor/StudentEvaluationForm.tsx
'use client';

import { useState } from 'react';

type PerformanceCriterion = {
  id: number;
  text: string;
  points: number;
  subCriteria?: { id: string; text: string }[];
};

// Example rubric for Leopold's Maneuver (24 total points)
const leopoldsManeuverCriteria: PerformanceCriterion[] = [
  { id: 1, text: "Defines Leopold's Maneuver", points: 1 },
  { id: 2, text: "States the Rationale for Performing Leopold's Maneuver", points: 1 },
  { id: 15, text: "Perform the 1st Leopold's Maneuver (Fundal Grip)", points: 3,
    subCriteria: [
      { id: '15a', text: "Stand at woman's side and palpate the fundus" },
      { id: '15b', text: 'Curve fingers around the top of the uterus' },
      { id: '15c', text: 'Palpate size, shape, consistency of fetal part' },
    ],
  },
  // ... additional criteria
];

export function StudentEvaluationForm({ studentName, procedureName, onSave, onClose }) {
  const [evaluations, setEvaluations] = useState<Record<string, 'performed' | 'not-performed' | null>>({});
  const [feedback, setFeedback] = useState('');

const handleCheckboxChange = (criterionId: string, value: 'performed' | 'not-performed') => {
    setEvaluations((prev) => ({
      ...prev,
      [criterionId]: prev[criterionId] === value ? null : value,
    }));
  };

return (
    <div>
      <h2>{procedureName} Evaluation - {studentName}</h2>
      <p>Current Score: {calculateScore().toFixed(1)} / 24</p>

{leopoldsManeuverCriteria.map((criterion) => (
        <div key={criterion.id}>
          <p>{criterion.id}. {criterion.text} ({criterion.points} points)</p>
          <label>
            <input type="checkbox" checked={evaluations[criterion.id] === 'performed'}
              onChange={() => handleCheckboxChange(criterion.id.toString(), 'performed')} />
            Performed
          </label>
          <label>
            <input type="checkbox" checked={evaluations[criterion.id] === 'not-performed'}
              onChange={() => handleCheckboxChange(criterion.id.toString(), 'not-performed')} />
            Not Performed
          </label>
        </div>
      ))}

<textarea value={feedback} onChange={(e) => setFeedback(e.target.value)}
        placeholder="Enter evaluator feedback..." />
      <button onClick={() => onSave({ evaluations, feedback })}>Save Evaluation</button>
    </div>
  );
}
```

--------------------------------

### Instructor Procedure Management Component

Source: https://context7.com/dreiiiiim/maternix-frontend-backend/llms.txt

Manages clinical procedures and controls section access. Uses React state to manage procedures and their allowed sections. Imports icons for lock and unlock functionality.

```tsx
'use client';

import { useState } from 'react';
import { Lock, Unlock, Plus } from 'lucide-react';

type Procedure = {
  id: number;
  name: string;
  category: string;
  description: string;
  allowedSections: number[];
  resources?: { type: 'file' | 'link'; name: string; url: string }[];
};

const classSections = [
  { id: 1, name: 'BSN 2A', studentCount: 6 },
  { id: 2, name: 'BSN 2B', studentCount: 5 },
  { id: 3, name: 'BSN 2C', studentCount: 4 },
];

export function ProcedureManagement() {
  const [procedures, setProcedures] = useState<Procedure[]>([
    {
      id: 1,
      name: "Leopold's Maneuver",
      category: 'Clinical Procedure',
      description: 'Abdominal palpation technique to determine fetal position',
      allowedSections: [1, 2, 3],
      resources: [{ type: 'file', name: "Leopold's Maneuver Guide.pdf", url: '#' }],
    },
  ]);

return (
    <div>
      {procedures.map((procedure) => (
        <div key={procedure.id}>
          <h4>{procedure.name}</h4>
          <p>{procedure.description}</p>
          {/* Section Toggle Buttons */}
          <div className="flex gap-2">
            {classSections.map((section) => {
              const hasAccess = procedure.allowedSections.includes(section.id);
              return (
                <button
                  key={section.id}
                  onClick={() => toggleSectionAccess(procedure.id, section.id)}
                  style={{ backgroundColor: hasAccess ? 'var(--brand-green-dark)' : '#E5E7EB' }}
                >
                  {hasAccess ? <Unlock /> : <Lock />} {section.name}
                </button>
              );
            })}
          </div>
        </div>
      ))}
    </div>
  );
}

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.