/ 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 : NewsManager.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 News {
  id: string;
  title: string;
  date: string;
  category: string;
  excerpt: string;
  content?: string;
  image?: string;
  author?: string;
  description?: string;
  featured?: boolean;
  tags?: string[];
  relatedNews?: string[];
  externalLinks?: Array<{ title: string; url: string }>;
}

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

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

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

const handleCreate = () => {
    setEditingItem(null);
    setFormData({ date: new Date().toISOString().split('T')[0] });
    setImageFile(null);
    setIsDialogOpen(true);
  };

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

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

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

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

try {
      if (editingItem) {
        await api.news.updateWithFile(editingItem.id, formData, imageFile || undefined);
        toast({
          title: 'Success',
          description: 'News article updated successfully'
        });
      } else {
        await api.news.createWithFile(formData, imageFile || undefined);
        toast({
          title: 'Success',
          description: 'News article created successfully'
        });
      }
      setIsDialogOpen(false);
      fetchData();
    } catch (error: any) {
      toast({
        title: 'Error',
        description: error.message || 'Failed to save news article',
        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: 'category', label: 'Category', render: (value: string) => (
      <span className="px-2 py-1 rounded-full text-xs bg-purple-900/30 text-purple-400">
        {value}
      </span>
    )},
    { key: 'author', label: 'Author' }
  ];

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">
          News & Updates
        </h1>
        <p className="text-slate-400">Manage news articles and announcements</p>
      </div>

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

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

<form onSubmit={handleSubmit} className="space-y-4 mt-4">
            <div className="space-y-2">
              <Label htmlFor="id">Article ID</Label>
              <Input
                id="id"
                value={formData.id || ''}
                onChange={(e) => setFormData({ ...formData, id: e.target.value })}
                placeholder="e.g., news-article-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="News article title"
                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">Date</Label>
                <Input
                  id="date"
                  type="date"
                  value={formData.date || ''}
                  onChange={(e) => setFormData({ ...formData, date: e.target.value })}
                  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., Research, Event"
                  className="bg-slate-800/50 border-slate-700"
                  required
                />
              </div>
            </div>

<div className="space-y-2">
              <Label htmlFor="author">Author</Label>
              <Input
                id="author"
                value={formData.author || ''}
                onChange={(e) => setFormData({ ...formData, author: 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="excerpt">Excerpt</Label>
              <Textarea
                id="excerpt"
                value={formData.excerpt || ''}
                onChange={(e) => setFormData({ ...formData, excerpt: e.target.value })}
                placeholder="Brief summary of the article"
                className="bg-slate-800/50 border-slate-700 min-h-[80px]"
                required
              />
            </div>

<div className="space-y-2">
              <Label htmlFor="content">Full Content</Label>
              <Textarea
                id="content"
                value={formData.content || ''}
                onChange={(e) => setFormData({ ...formData, content: e.target.value })}
                placeholder="Full article content"
                className="bg-slate-800/50 border-slate-700 min-h-[150px]"
              />
            </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, Research, Innovation"
                className="bg-slate-800/50 border-slate-700"
              />
            </div>

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

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

<div className="space-y-2">
              <Label htmlFor="image">Article 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 NewsManager;

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.