/ 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 : LabsManager.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 Lab {
  id: string;
  name: string;
  description: string;
  area: string;
  location: string;
  established: string;
  head: string;
  equipment: string[] | string;
  capabilities: string[] | string;
  image: string;
  category: string;
  status: string;
  features?: Array<{ name: string; description: string }>;
  research?: string[] | string;
  contact?: string;
  director?: string;
  email?: string;
  website?: string;
  researchFocus?: string[] | string;
}

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

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

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

const handleCreate = () => {
    setEditingItem(null);
    setFormData({ status: 'Operational', features: [] });
    setImageFile(null);
    setIsDialogOpen(true);
  };

const handleEdit = (item: Lab) => {
    setEditingItem(item);
    setFormData({
      ...item,
      equipment: Array.isArray(item.equipment) ? item.equipment.join('\n') : item.equipment,
      capabilities: Array.isArray(item.capabilities) ? item.capabilities.join('\n') : item.capabilities
    });
    setImageFile(null);
    setIsDialogOpen(true);
  };

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

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

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

try {
      // Process equipment and capabilities (convert newline-separated string to array)
      const equipmentArray = typeof formData.equipment === 'string'
        ? formData.equipment.split('\n').map(e => e.trim()).filter(e => e)
        : Array.isArray(formData.equipment) ? formData.equipment : [];
      
      const capabilitiesArray = typeof formData.capabilities === 'string'
        ? formData.capabilities.split('\n').map(c => c.trim()).filter(c => c)
        : Array.isArray(formData.capabilities) ? formData.capabilities : [];

const processedData = {
        ...formData,
        equipment: equipmentArray,
        capabilities: capabilitiesArray,
        features: formData.features || []
      };

if (editingItem) {
        await api.labs.updateWithFile(editingItem.id, processedData, imageFile || undefined);
        toast({
          title: 'Success',
          description: 'Lab updated successfully'
        });
      } else {
        await api.labs.createWithFile(processedData, imageFile || undefined);
        toast({
          title: 'Success',
          description: 'Lab created successfully'
        });
      }

setIsDialogOpen(false);
      fetchData();
    } catch (error: any) {
      toast({
        title: 'Error',
        description: error.message || 'Failed to save lab',
        variant: 'destructive'
      });
    } finally {
      setIsSaving(false);
    }
  };

const columns = [
    { key: 'name', label: 'Name' },
    { key: 'category', label: 'Category' },
    { key: 'area', label: 'Area' },
    { key: 'head', label: 'Lab Head' },
    { key: 'status', label: 'Status' },
  ];

return (
    <div className="container mx-auto py-8">
      <div className="mb-6 flex justify-between items-center">
        <h1 className="text-3xl font-bold">Labs & Facilities Manager</h1>
        <Button onClick={handleCreate}>Add Lab/Facility</Button>
      </div>

<DataTable
        columns={columns}
        data={data}
        onEdit={handleEdit}
        onDelete={handleDelete}
        onCreate={handleCreate}
        isLoading={isLoading}
        searchKeys={['name', 'category', 'head']}
      />

<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
          <DialogHeader>
            <DialogTitle>{editingItem ? 'Edit Lab/Facility' : 'Add Lab/Facility'}</DialogTitle>
            <DialogDescription>
              {editingItem ? 'Update lab/facility details' : 'Create a new lab or facility entry'}
            </DialogDescription>
          </DialogHeader>

<form onSubmit={handleSubmit} className="space-y-4">
            <div className="grid grid-cols-2 gap-4">
              <div className="col-span-2">
                <Label htmlFor="name">Name *</Label>
                <Input
                  id="name"
                  value={formData.name || ''}
                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
                  required
                />
              </div>

<div className="col-span-2">
                <Label htmlFor="description">Description *</Label>
                <Textarea
                  id="description"
                  value={formData.description || ''}
                  onChange={(e) => setFormData({ ...formData, description: e.target.value })}
                  rows={3}
                  required
                />
              </div>

<div>
                <Label htmlFor="area">Area *</Label>
                <Input
                  id="area"
                  value={formData.area || ''}
                  onChange={(e) => setFormData({ ...formData, area: e.target.value })}
                  placeholder="500 sq ft"
                  required
                />
              </div>

<div>
                <Label htmlFor="location">Location *</Label>
                <Input
                  id="location"
                  value={formData.location || ''}
                  onChange={(e) => setFormData({ ...formData, location: e.target.value })}
                  placeholder="Building A, 2nd Floor"
                  required
                />
              </div>

<div>
                <Label htmlFor="established">Established *</Label>
                <Input
                  id="established"
                  value={formData.established || ''}
                  onChange={(e) => setFormData({ ...formData, established: e.target.value })}
                  placeholder="2020"
                  required
                />
              </div>

<div>
                <Label htmlFor="head">Lab Head *</Label>
                <Input
                  id="head"
                  value={formData.head || ''}
                  onChange={(e) => setFormData({ ...formData, head: e.target.value })}
                  placeholder="Dr. John Doe"
                  required
                />
              </div>

<div>
                <Label htmlFor="director">Director</Label>
                <Input
                  id="director"
                  value={formData.director || ''}
                  onChange={(e) => setFormData({ ...formData, director: e.target.value })}
                  placeholder="Dr. Jane Smith"
                />
              </div>

<div>
                <Label htmlFor="email">Contact Email</Label>
                <Input
                  id="email"
                  type="email"
                  value={formData.email || ''}
                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                  placeholder="lab@example.com"
                />
              </div>

<div>
                <Label htmlFor="website">Website</Label>
                <Input
                  id="website"
                  value={formData.website || ''}
                  onChange={(e) => setFormData({ ...formData, website: e.target.value })}
                  placeholder="https://example.com"
                />
              </div>

<div>
                <Label htmlFor="category">Category *</Label>
                <Input
                  id="category"
                  value={formData.category || ''}
                  onChange={(e) => setFormData({ ...formData, category: e.target.value })}
                  placeholder="e.g., Quantum Computing"
                  required
                />
              </div>

<div>
                <Label htmlFor="status">Status *</Label>
                <select
                  id="status"
                  className="w-full h-10 px-3 border border-gray-300 rounded-md"
                  value={formData.status || ''}
                  onChange={(e) => setFormData({ ...formData, status: e.target.value })}
                  required
                >
                  <option value="Operational">Operational</option>
                  <option value="Under Construction">Under Construction</option>
                  <option value="Maintenance">Maintenance</option>
                  <option value="Planning">Planning</option>
                </select>
              </div>

<div className="col-span-2">
                <Label htmlFor="image">Lab Image</Label>
                <Input
                  id="image"
                  type="file"
                  accept="image/*"
                  onChange={(e) => setImageFile(e.target.files?.[0] || null)}
                />
                {editingItem?.image && !imageFile && (
                  <p className="text-sm text-slate-400 mt-1">
                    Current: <a href={editingItem.image} target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:underline">{editingItem.image}</a>
                  </p>
                )}
                {imageFile && (
                  <p className="text-sm text-green-400 mt-1">New file selected: {imageFile.name}</p>
                )}
              </div>

<div className="col-span-2">
                <Label htmlFor="equipment">Equipment * (one per line)</Label>
                <Textarea
                  id="equipment"
                  value={formData.equipment || ''}
                  onChange={(e) => setFormData({ ...formData, equipment: e.target.value })}
                  rows={5}
                  placeholder="Dilution Refrigerator&#10;Superconducting Qubit System&#10;Quantum Control Electronics"
                  required
                />
                <p className="text-sm text-gray-500 mt-1">Enter each equipment item on a new line</p>
              </div>

<div className="col-span-2">
                <Label htmlFor="capabilities">Research Capabilities * (one per line)</Label>
                <Textarea
                  id="capabilities"
                  value={formData.capabilities || ''}
                  onChange={(e) => setFormData({ ...formData, capabilities: e.target.value })}
                  rows={5}
                  placeholder="Quantum Circuit Design&#10;Gate Optimization&#10;Error Correction"
                  required
                />
                <p className="text-sm text-gray-500 mt-1">Enter each capability on a new line</p>
              </div>

<div className="col-span-2">
                <Label htmlFor="researchFocus">Research Focus Areas (one per line)</Label>
                <Textarea
                  id="researchFocus"
                  value={typeof formData.researchFocus === 'string' ? formData.researchFocus : (formData.researchFocus || []).join('\n')}
                  onChange={(e) => setFormData({ ...formData, researchFocus: e.target.value })}
                  rows={4}
                  placeholder="Qubit design&#10;Error mitigation&#10;Algorithm optimization"
                />
                <p className="text-sm text-gray-500 mt-1">Enter each research focus area on a new line</p>
              </div>
            </div>

<div className="flex justify-end gap-2 pt-4">
              <Button type="button" variant="outline" onClick={() => setIsDialogOpen(false)}>
                Cancel
              </Button>
              <Button type="submit" disabled={isSaving}>
                {isSaving && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
                {editingItem ? 'Update' : 'Create'}
              </Button>
            </div>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  );
};

export default LabsManager;

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.