/ var / www / html / cqt / src / pages / [ HOME SHELL ]

Name	Size	Permission	Action
AboutPage.tsx	464 B	-rw-r--r--
AdminDashboard.tsx	6.63 KB	-rw-r--r--
AdminLogin.tsx	4.9 KB	-rw-r--r--
ContactPage.tsx	403 B	-rw-r--r--
CourseDetailPage.tsx	17.14 KB	-rw-r--r--
CoursesManager.tsx	15.6 KB	-rw-r--r--
EducationPage.tsx	23.77 KB	-rw-r--r--
Index.tsx	1.25 KB	-rw-r--r--
LabsManager.tsx	13.28 KB	-rw-r--r--
LabsPage.tsx	12.33 KB	-rw-r--r--
NewsDetailPage.tsx	10.51 KB	-rw-r--r--
NewsManager.tsx	11.66 KB	-rw-r--r--
NewsPage.tsx	11.77 KB	-rw-r--r--
NotFound.tsx	727 B	-rw-r--r--
PersonPage.tsx	1.67 KB	-rw-r--r--
PublicationsManager.tsx	12.17 KB	-rw-r--r--
PublicationsPage.tsx	15.17 KB	-rw-r--r--
ResearchDetailPage.tsx	16.93 KB	-rw-r--r--
ResearchManager.tsx	15.75 KB	-rw-r--r--
ResearchPage.tsx	14.3 KB	-rw-r--r--
TeamManager.tsx	12.4 KB	-rw-r--r--
TeamPage.tsx	781 B	-rw-r--r--
WorkshopDetailPage.tsx	19.23 KB	-rw-r--r--
WorkshopsManager.tsx	16.05 KB	-rw-r--r--
WorkshopsPage.tsx	7.63 KB	-rw-r--r--

Code Editor : CoursesManager.tsx

import { useEffect, useState } from 'react';
import { useAPI } from '../hooks/useAPI';
import DataTable from '../components/DataTable';
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../components/ui/dialog';
import { Button } from '../components/ui/button';
import { Input } from '../components/ui/input';
import { Label } from '../components/ui/label';
import { Textarea } from '../components/ui/textarea';
import { useToast } from '../hooks/use-toast';
import { Loader2 } from 'lucide-react';

interface Course {
  id: string;
  title: string;
  code: string;
  level: string;
  credits: number;
  instructor: string;
  description: string;
  duration?: string;
  schedule?: string;
  prerequisites?: string[] | string;
  coInstructors?: string[];
  image?: string;
  featured?: boolean;
  semester?: string;
  location?: string;
  capacity?: number;
  enrolled?: number;
  tags?: string[];
  objectives?: string[];
}

const CoursesManager = () => {
  const api = useAPI();
  const { toast } = useToast();
  const [data, setData] = useState<Course[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [isDialogOpen, setIsDialogOpen] = useState(false);
  const [isSaving, setIsSaving] = useState(false);
  const [editingItem, setEditingItem] = useState<Course | null>(null);
  const [formData, setFormData] = useState<Partial<Course>>({});

useEffect(() => {
    fetchData();
  }, []);

const fetchData = async () => {
    try {
      const result = await api.courses.getAll();
      setData(result);
    } catch (error: any) {
      toast({
        title: 'Error',
        description: error.message || 'Failed to fetch courses',
        variant: 'destructive'
      });
    } finally {
      setIsLoading(false);
    }
  };

const handleCreate = () => {
    setEditingItem(null);
    setFormData({});
    setIsDialogOpen(true);
  };

const handleEdit = (item: Course) => {
    setEditingItem(item);
    setFormData(item);
    setIsDialogOpen(true);
  };

const handleDelete = async (id: string) => {
    if (!confirm('Are you sure you want to delete this course?')) return;

try {
      await api.courses.delete(id);
      toast({
        title: 'Success',
        description: 'Course deleted successfully'
      });
      fetchData();
    } catch (error: any) {
      toast({
        title: 'Error',
        description: error.message || 'Failed to delete course',
        variant: 'destructive'
      });
    }
  };

const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSaving(true);

try {
      if (editingItem) {
        await api.courses.update(editingItem.id, formData);
        toast({
          title: 'Success',
          description: 'Course updated successfully'
        });
      } else {
        await api.courses.create(formData);
        toast({
          title: 'Success',
          description: 'Course created successfully'
        });
      }
      setIsDialogOpen(false);
      fetchData();
    } catch (error: any) {
      toast({
        title: 'Error',
        description: error.message || 'Failed to save course',
        variant: 'destructive'
      });
    } finally {
      setIsSaving(false);
    }
  };

const columns = [
    { key: 'code', label: 'Code', render: (value: string) => (
      <span className="font-mono text-sm text-blue-400">{value}</span>
    )},
    { key: 'title', label: 'Title', render: (value: string) => (
      <div className="max-w-xs truncate">{value}</div>
    )},
    { key: 'level', label: 'Level', render: (value: string) => (
      <span className={`px-2 py-1 rounded-full text-xs ${
        value === 'Advanced' ? 'bg-red-900/30 text-red-400' :
        value === 'Intermediate' ? 'bg-orange-900/30 text-orange-400' :
        'bg-green-900/30 text-green-400'
      }`}>
        {value}
      </span>
    )},
    { key: 'credits', label: 'Credits' },
    { key: 'instructor', label: 'Instructor' }
  ];

return (
    <div className="space-y-6">
      <div>
        <h1 className="text-4xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent mb-2">
          Courses
        </h1>
        <p className="text-slate-400">Manage educational courses and programs</p>
      </div>

<DataTable
        data={data}
        columns={columns}
        onEdit={handleEdit}
        onDelete={handleDelete}
        onCreate={handleCreate}
        isLoading={isLoading}
        searchKeys={['title', 'code', 'instructor', 'level']}
      />

{/* Create/Edit Dialog */}
      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="bg-slate-900 border-slate-700 text-white max-w-2xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle className="text-2xl bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
              {editingItem ? 'Edit Course' : 'Create Course'}
            </DialogTitle>
            <DialogDescription className="text-slate-400">
              {editingItem ? 'Update the course details' : 'Add a new course to your educational programs'}
            </DialogDescription>
          </DialogHeader>

<form onSubmit={handleSubmit} className="space-y-4 mt-4">
            <div className="space-y-2">
              <Label htmlFor="id">Course ID</Label>
              <Input
                id="id"
                value={formData.id || ''}
                onChange={(e) => setFormData({ ...formData, id: e.target.value })}
                placeholder="e.g., course-1"
                className="bg-slate-800/50 border-slate-700"
                required
                disabled={!!editingItem}
              />
            </div>

<div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="code">Course Code</Label>
                <Input
                  id="code"
                  value={formData.code || ''}
                  onChange={(e) => setFormData({ ...formData, code: e.target.value })}
                  placeholder="e.g., QC101"
                  className="bg-slate-800/50 border-slate-700"
                  required
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="credits">Credits</Label>
                <Input
                  id="credits"
                  type="number"
                  value={formData.credits || ''}
                  onChange={(e) => setFormData({ ...formData, credits: parseInt(e.target.value) })}
                  placeholder="e.g., 3"
                  className="bg-slate-800/50 border-slate-700"
                  required
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="title">Course Title</Label>
              <Input
                id="title"
                value={formData.title || ''}
                onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                placeholder="e.g., Introduction to Quantum Computing"
                className="bg-slate-800/50 border-slate-700"
                required
              />
            </div>

<div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="level">Level</Label>
                <Input
                  id="level"
                  value={formData.level || ''}
                  onChange={(e) => setFormData({ ...formData, level: e.target.value })}
                  placeholder="e.g., Beginner, Intermediate, Advanced"
                  className="bg-slate-800/50 border-slate-700"
                  required
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="duration">Duration</Label>
                <Input
                  id="duration"
                  value={formData.duration || ''}
                  onChange={(e) => setFormData({ ...formData, duration: e.target.value })}
                  placeholder="e.g., 12 weeks"
                  className="bg-slate-800/50 border-slate-700"
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="instructor">Instructor</Label>
              <Input
                id="instructor"
                value={formData.instructor || ''}
                onChange={(e) => setFormData({ ...formData, instructor: e.target.value })}
                placeholder="e.g., Dr. Jane Smith"
                className="bg-slate-800/50 border-slate-700"
                required
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="schedule">Schedule</Label>
              <Input
                id="schedule"
                value={formData.schedule || ''}
                onChange={(e) => setFormData({ ...formData, schedule: e.target.value })}
                placeholder="e.g., Mon/Wed 10:00 AM - 12:00 PM"
                className="bg-slate-800/50 border-slate-700"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="semester">Semester</Label>
              <Input
                id="semester"
                value={formData.semester || ''}
                onChange={(e) => setFormData({ ...formData, semester: e.target.value })}
                placeholder="e.g., Monsoon 2025"
                className="bg-slate-800/50 border-slate-700"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="location">Location</Label>
              <Input
                id="location"
                value={formData.location || ''}
                onChange={(e) => setFormData({ ...formData, location: e.target.value })}
                placeholder="e.g., Academic Block, IIIT-Delhi"
                className="bg-slate-800/50 border-slate-700"
              />
            </div>

<div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="capacity">Capacity <span className="text-xs text-slate-500">(optional)</span></Label>
                <Input
                  id="capacity"
                  type="number"
                  value={formData.capacity ?? ''}
                  onChange={(e) => {
                    const val = e.target.value.trim();
                    setFormData({ ...formData, capacity: val === '' ? null : parseInt(val) });
                  }}
                  placeholder="Leave empty to hide"
                  className="bg-slate-800/50 border-slate-700"
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="enrolled">Enrolled <span className="text-xs text-slate-500">(optional)</span></Label>
                <Input
                  id="enrolled"
                  type="number"
                  value={formData.enrolled ?? ''}
                  onChange={(e) => {
                    const val = e.target.value.trim();
                    setFormData({ ...formData, enrolled: val === '' ? null : parseInt(val) });
                  }}
                  placeholder="Leave empty to hide"
                  className="bg-slate-800/50 border-slate-700"
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="coInstructors">Co-Instructors (comma-separated)</Label>
              <Input
                id="coInstructors"
                value={(formData.coInstructors || []).join(', ')}
                onChange={(e) => setFormData({ ...formData, coInstructors: e.target.value.split(',').map(t => t.trim()) })}
                placeholder="e.g., Dr. John Smith, Dr. Jane Doe"
                className="bg-slate-800/50 border-slate-700"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="description">Description</Label>
              <Textarea
                id="description"
                value={formData.description || ''}
                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                placeholder="Course description and objectives"
                className="bg-slate-800/50 border-slate-700 min-h-[100px]"
                required
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="prerequisites">Prerequisites (one per line)</Label>
              <Textarea
                id="prerequisites"
                value={
                  Array.isArray(formData.prerequisites)
                    ? (formData.prerequisites as string[]).join('\n')
                    : (formData.prerequisites || '')
                }
                onChange={(e) => setFormData({ ...formData, prerequisites: e.target.value.split('\n').map(t => t.trim()).filter(t => t) })}
                placeholder="Enter each prerequisite on a new line"
                className="bg-slate-800/50 border-slate-700 min-h-[60px]"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="objectives">Course Objectives (one per line)</Label>
              <Textarea
                id="objectives"
                value={(formData.objectives || []).join('\n')}
                onChange={(e) => setFormData({ ...formData, objectives: e.target.value.split('\n').map(t => t.trim()).filter(t => t) })}
                placeholder="Enter each objective on a new line"
                className="bg-slate-800/50 border-slate-700 min-h-[80px]"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="tags">Tags (comma-separated)</Label>
              <Input
                id="tags"
                value={(formData.tags || []).join(', ')}
                onChange={(e) => setFormData({ ...formData, tags: e.target.value.split(',').map(t => t.trim()) })}
                placeholder="e.g., Quantum Computing, Mathematics"
                className="bg-slate-800/50 border-slate-700"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="featured">Featured Course</Label>
              <div className="flex items-center gap-2">
                <input
                  id="featured"
                  type="checkbox"
                  checked={formData.featured || false}
                  onChange={(e) => setFormData({ ...formData, featured: e.target.checked })}
                  className="w-4 h-4 bg-slate-800/50 border-slate-700 rounded"
                />
                <label htmlFor="featured" className="text-sm text-slate-300">
                  Show this course as featured on the website
                </label>
              </div>
            </div>

<div className="flex gap-3 pt-4">
              <Button
                type="submit"
                className="flex-1 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700"
                disabled={isSaving}
              >
                {isSaving ? (
                  <>
                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                    Saving...
                  </>
                ) : (
                  editingItem ? 'Update' : 'Create'
                )}
              </Button>
              <Button
                type="button"
                variant="outline"
                onClick={() => setIsDialogOpen(false)}
                className="flex-1 border-slate-700 text-slate-300 hover:text-white"
                disabled={isSaving}
              >
                Cancel
              </Button>
            </div>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  );
};

export default CoursesManager;

Urban Research Lab

Urban Research Lab

The Urban Research Lab (URL) at IIIT-Delhi was established in 2020, during a time when the pandemic brought the complexities of urban life more visible than ever. What started as an initiative by faculty and students has grown into a collaborative space for critically exploring and reimagining the urban questions through research, dialogue, and interdisciplinary engagement.