/ 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 : ResearchManager.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 Research {
  id: string;
  title: string;
  category: string;
  description: string;
  image?: string;
  leader?: string;
  team?: string[];
  status?: string;
  featured?: boolean;
  startDate?: string;
  fundingAgency?: string;
  fundingAmount?: string;
  teamLead?: string;
  teamMembers?: string[];
  collaborators?: string[];
  publications?: string[];
  objectives?: string[];
  achievements?: string[];
  fullDescription?: string;
  impact?: string;
  tags?: string[];
}

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

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

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

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

const handleEdit = (item: Research) => {
    setEditingItem(item);
    setFormData(item);
    setImageFile(null);
    setIsDialogOpen(true);
  };

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

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

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

try {
      if (editingItem) {
        await api.research.updateWithFile(editingItem.id, formData, imageFile || undefined);
        toast({
          title: 'Success',
          description: 'Research project updated successfully'
        });
      } else {
        await api.research.createWithFile(formData, imageFile || undefined);
        toast({
          title: 'Success',
          description: 'Research project created successfully'
        });
      }
      setIsDialogOpen(false);
      fetchData();
    } catch (error: any) {
      toast({
        title: 'Error',
        description: error.message || 'Failed to save research project',
        variant: 'destructive'
      });
    } finally {
      setIsSaving(false);
    }
  };

const columns = [
    { key: 'title', label: 'Title' },
    { key: 'category', label: 'Category' },
    { key: 'status', label: 'Status', render: (value: string) => (
      <span className={`px-2 py-1 rounded-full text-xs ${
        value === 'Active' ? 'bg-green-900/30 text-green-400' : 'bg-slate-700 text-slate-400'
      }`}>
        {value || 'N/A'}
      </span>
    )},
    { key: 'leader', label: 'Leader' }
  ];

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">
          Research Projects
        </h1>
        <p className="text-slate-400">Manage your research projects and publications</p>
      </div>

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

{/* 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 Research Project' : 'Create Research Project'}
            </DialogTitle>
            <DialogDescription className="text-slate-400">
              {editingItem ? 'Update the research project details' : 'Add a new research project to your website'}
            </DialogDescription>
          </DialogHeader>

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

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

<div className="space-y-2">
              <Label htmlFor="category">Category</Label>
              <Input
                id="category"
                value={formData.category || ''}
                onChange={(e) => setFormData({ ...formData, category: e.target.value })}
                placeholder="e.g., Quantum Computing"
                className="bg-slate-800/50 border-slate-700"
                required
              />
            </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="Brief description of the research project"
                className="bg-slate-800/50 border-slate-700 min-h-[100px]"
                required
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="leader">Project Leader</Label>
              <Input
                id="leader"
                value={formData.leader || ''}
                onChange={(e) => setFormData({ ...formData, leader: 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="status">Status</Label>
              <Input
                id="status"
                value={formData.status || ''}
                onChange={(e) => setFormData({ ...formData, status: e.target.value })}
                placeholder="e.g., Active, Completed"
                className="bg-slate-800/50 border-slate-700"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="teamLead">Team Lead</Label>
              <Input
                id="teamLead"
                value={formData.teamLead || ''}
                onChange={(e) => setFormData({ ...formData, teamLead: e.target.value })}
                placeholder="e.g., Dr. John Doe"
                className="bg-slate-800/50 border-slate-700"
              />
            </div>

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

<div className="space-y-2">
              <Label htmlFor="fundingAgency">Funding Agency</Label>
              <Input
                id="fundingAgency"
                value={formData.fundingAgency || ''}
                onChange={(e) => setFormData({ ...formData, fundingAgency: e.target.value })}
                placeholder="e.g., National Science Foundation"
                className="bg-slate-800/50 border-slate-700"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="fundingAmount">Funding Amount</Label>
              <Input
                id="fundingAmount"
                value={formData.fundingAmount || ''}
                onChange={(e) => setFormData({ ...formData, fundingAmount: e.target.value })}
                placeholder="e.g., $500,000"
                className="bg-slate-800/50 border-slate-700"
              />
            </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, Error Correction, Mathematics"
                className="bg-slate-800/50 border-slate-700"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="teamMembers">Team Members (comma-separated)</Label>
              <Textarea
                id="teamMembers"
                value={(formData.teamMembers || []).join(', ')}
                onChange={(e) => setFormData({ ...formData, teamMembers: e.target.value.split(',').map(t => t.trim()) })}
                placeholder="e.g., Dr. Jane Smith, Prof. Robert Johnson"
                className="bg-slate-800/50 border-slate-700 min-h-[60px]"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="collaborators">Collaborators (comma-separated)</Label>
              <Textarea
                id="collaborators"
                value={(formData.collaborators || []).join(', ')}
                onChange={(e) => setFormData({ ...formData, collaborators: e.target.value.split(',').map(t => t.trim()) })}
                placeholder="e.g., MIT, Stanford University, CERN"
                className="bg-slate-800/50 border-slate-700 min-h-[60px]"
              />
            </div>

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

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

<div className="space-y-2">
              <Label htmlFor="impact">Research Impact</Label>
              <Textarea
                id="impact"
                value={formData.impact || ''}
                onChange={(e) => setFormData({ ...formData, impact: e.target.value })}
                placeholder="Description of the research impact and significance"
                className="bg-slate-800/50 border-slate-700 min-h-[80px]"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="featured">Featured Project</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 project as featured on the website
                </label>
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="image">Project Image</Label>
              <Input
                id="image"
                type="file"
                accept="image/*"
                onChange={(e) => setImageFile(e.target.files?.[0] || null)}
                className="bg-slate-800/50 border-slate-700"
              />
              {editingItem?.image && !imageFile && (
                <p className="text-sm text-slate-400">
                  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">New file selected: {imageFile.name}</p>
              )}
            </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 ResearchManager;

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.