/ 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 : TeamManager.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 TeamMember {
  id: string;
  name: string;
  role: string;
  department: string;
  email: string;
  phone?: string;
  bio?: string;
  image?: string;
  photo?: string;
  research?: string[];
  publications?: string[];
  title?: string;
  specialization?: string;
  updatedAt?: string;
}

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

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

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

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

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

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

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

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

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

const columns = [
    { key: 'name', label: 'Name', render: (value: string) => (
      <div className="font-semibold text-white">{value}</div>
    )},
    { key: 'role', label: 'Role', render: (value: string) => (
      <div className="max-w-xs truncate">{value}</div>
    )},
    { key: 'department', label: 'Department', render: (value: string) => (
      <span className="px-2 py-1 rounded-full text-xs bg-indigo-900/30 text-indigo-400">
        {value}
      </span>
    )},
    { key: 'email', label: 'Email', render: (value: string) => (
      <a href={`mailto:${value}`} className="text-blue-400 hover:underline text-sm">
        {value}
      </a>
    )}
  ];

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">
          Team Members
        </h1>
        <p className="text-slate-400">Manage faculty, researchers, and staff members</p>
      </div>

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

{/* 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 Team Member' : 'Add Team Member'}
            </DialogTitle>
            <DialogDescription className="text-slate-400">
              {editingItem ? 'Update the team member details' : 'Add a new faculty, researcher, or staff member'}
            </DialogDescription>
          </DialogHeader>

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

<div className="space-y-2">
              <Label htmlFor="name">Full Name</Label>
              <Input
                id="name"
                value={formData.name || ''}
                onChange={(e) => setFormData({ ...formData, name: 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="role">Role/Title</Label>
              <Input
                id="role"
                value={formData.role || ''}
                onChange={(e) => setFormData({ ...formData, role: e.target.value })}
                placeholder="e.g., Professor of Quantum Physics"
                className="bg-slate-800/50 border-slate-700"
                required
              />
            </div>

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

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

<div className="space-y-2">
              <Label htmlFor="department">Department</Label>
              <Input
                id="department"
                value={formData.department || ''}
                onChange={(e) => setFormData({ ...formData, department: e.target.value })}
                placeholder="e.g., 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="email">Email <span className="text-xs text-slate-500">(optional)</span></Label>
                <Input
                  id="email"
                  type="email"
                  value={formData.email || ''}
                  onChange={(e) => setFormData({ ...formData, email: e.target.value })}
                  placeholder="Leave empty to hide"
                  className="bg-slate-800/50 border-slate-700"
                />
              </div>

<div className="space-y-2">
                <Label htmlFor="phone">Phone <span className="text-xs text-slate-500">(optional)</span></Label>
                <Input
                  id="phone"
                  type="tel"
                  value={formData.phone || ''}
                  onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
                  placeholder="Leave empty to hide"
                  className="bg-slate-800/50 border-slate-700"
                />
              </div>
            </div>

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

<div className="space-y-2">
              <Label htmlFor="research">Research Interests (comma-separated)</Label>
              <Textarea
                id="research"
                value={(formData.research || []).join(', ')}
                onChange={(e) => setFormData({ ...formData, research: e.target.value.split(',').map(t => t.trim()) })}
                placeholder="e.g., Quantum Computing, Error Correction"
                className="bg-slate-800/50 border-slate-700 min-h-[60px]"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="publications">Publications (comma-separated)</Label>
              <Textarea
                id="publications"
                value={(formData.publications || []).join(', ')}
                onChange={(e) => setFormData({ ...formData, publications: e.target.value.split(',').map(t => t.trim()) })}
                placeholder="Publication IDs or titles"
                className="bg-slate-800/50 border-slate-700 min-h-[60px]"
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="image">Profile 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?.photo || editingItem?.image) && !imageFile && (
                <p className="text-sm text-slate-400">
                  Current: <a href={editingItem.photo || editingItem.image} target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:underline">{(editingItem.photo || editingItem.image)?.split('/').pop()}</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 TeamManager;

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.