/ 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 : WorkshopsManager.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 Workshop {
  id: string;
  title: string;
  date?: string;
  time?: string;
  startDate?: string;
  endDate?: string;
  location?: string;
  venue?: string;
  instructor?: string;
  description: string;
  capacity?: number;
  registered?: number;
  status?: string;
  duration?: string;
  topics?: string[];
  type?: string;
  format?: string;
  registrationFee?: any;
  registrationDeadline?: string;
  tags?: string[];
  organizers?: string[];
  speakers?: Array<{ name: string; affiliation?: string; title?: string }>;
  image?: string;
  featured?: boolean;
}

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

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

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

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

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

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

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

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

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

const columns = [
    { key: 'title', label: 'Title', render: (value: string) => (
      <div className="max-w-xs truncate">{value}</div>
    )},
    { key: 'date', label: 'Date' },
    { key: 'location', label: 'Location' },
    { key: 'status', label: 'Status', render: (value: string) => (
      <span className={`px-2 py-1 rounded-full text-xs ${
        value === 'Upcoming' ? 'bg-blue-900/30 text-blue-400' :
        value === 'Ongoing' ? 'bg-green-900/30 text-green-400' :
        value === 'Completed' ? 'bg-slate-700 text-slate-400' :
        'bg-orange-900/30 text-orange-400'
      }`}>
        {value || 'N/A'}
      </span>
    )},
    { 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">
          Workshops & Seminars
        </h1>
        <p className="text-slate-400">Manage workshops, seminars, and training events</p>
      </div>

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

{/* 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 Workshop' : 'Create Workshop'}
            </DialogTitle>
            <DialogDescription className="text-slate-400">
              {editingItem ? 'Update the workshop details' : 'Add a new workshop or seminar event'}
            </DialogDescription>
          </DialogHeader>

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

<div className="space-y-2">
              <Label htmlFor="title">Workshop Title</Label>
              <Input
                id="title"
                value={formData.title || ''}
                onChange={(e) => setFormData({ ...formData, title: e.target.value })}
                placeholder="e.g., Quantum Programming Workshop"
                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="date">Start Date</Label>
                <Input
                  id="date"
                  type="date"
                  value={formData.startDate || formData.date || ''}
                  onChange={(e) => setFormData({ ...formData, startDate: e.target.value, date: e.target.value })}
                  className="bg-slate-800/50 border-slate-700"
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="endDate">End Date</Label>
                <Input
                  id="endDate"
                  type="date"
                  value={formData.endDate || ''}
                  onChange={(e) => setFormData({ ...formData, endDate: e.target.value })}
                  className="bg-slate-800/50 border-slate-700"
                />
              </div>
            </div>

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

<div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="location">Location</Label>
                <Input
                  id="location"
                  value={formData.location || formData.venue || ''}
                  onChange={(e) => setFormData({ ...formData, location: e.target.value, venue: e.target.value })}
                  placeholder="e.g., Quantum Lab, Building A"
                  className="bg-slate-800/50 border-slate-700"
                />
              </div>

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

<div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="format">Format</Label>
                <Input
                  id="format"
                  value={formData.format || ''}
                  onChange={(e) => setFormData({ ...formData, format: e.target.value })}
                  placeholder="e.g., In-person, Online, Hybrid"
                  className="bg-slate-800/50 border-slate-700"
                />
              </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., 6 hours, 1 day"
                  className="bg-slate-800/50 border-slate-700"
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="instructor">Instructor/Organizer</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"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="organizers">Organizers (comma-separated)</Label>
              <Input
                id="organizers"
                value={(formData.organizers || []).join(', ')}
                onChange={(e) => setFormData({ ...formData, organizers: e.target.value.split(',').map(t => t.trim()) })}
                placeholder="e.g., CQT, Department of Physics"
                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="registered">Registered <span className="text-xs text-slate-500">(optional)</span></Label>
                <Input
                  id="registered"
                  type="number"
                  value={formData.registered ?? ''}
                  onChange={(e) => {
                    const val = e.target.value.trim();
                    setFormData({ ...formData, registered: val === '' ? null : parseInt(val) });
                  }}
                  placeholder="Leave empty to hide"
                  className="bg-slate-800/50 border-slate-700"
                />
              </div>
            </div>

<div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label htmlFor="status">Status</Label>
                <Input
                  id="status"
                  value={formData.status || ''}
                  onChange={(e) => setFormData({ ...formData, status: e.target.value })}
                  placeholder="e.g., Upcoming, Ongoing, Completed, Past Event"
                  className="bg-slate-800/50 border-slate-700"
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="registrationDeadline">Registration Deadline</Label>
                <Input
                  id="registrationDeadline"
                  type="date"
                  value={formData.registrationDeadline || ''}
                  onChange={(e) => setFormData({ ...formData, registrationDeadline: e.target.value })}
                  className="bg-slate-800/50 border-slate-700"
                />
              </div>
            </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="Workshop description and objectives"
                className="bg-slate-800/50 border-slate-700 min-h-[100px]"
                required
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="topics">Topics Covered (one per line)</Label>
              <Textarea
                id="topics"
                value={(formData.topics || []).join('\n')}
                onChange={(e) => setFormData({ ...formData, topics: e.target.value.split('\n').map(t => t.trim()).filter(t => t) })}
                placeholder="Enter each topic 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, Programming, Hands-on"
                className="bg-slate-800/50 border-slate-700"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="featured">Featured Workshop</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 workshop 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 WorkshopsManager;

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.