Changes
This commit is contained in:
gpt-engineer-app[bot]
193
src/pages/admin/AdminSettings.tsx
Normal file
193
src/pages/admin/AdminSettings.tsx
Normal file
@@ -0,0 +1,193 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { supabase } from '@/integrations/supabase/client';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { AppLayout } from '@/components/AppLayout';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { toast } from '@/hooks/use-toast';
|
||||
import { Plus, Pencil, Trash2, Clock } from 'lucide-react';
|
||||
|
||||
interface Workhour {
|
||||
id: string;
|
||||
weekday: number;
|
||||
start_time: string;
|
||||
end_time: string;
|
||||
}
|
||||
|
||||
const WEEKDAYS = ['Minggu', 'Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat', 'Sabtu'];
|
||||
|
||||
const emptyWorkhour = { weekday: 1, start_time: '09:00', end_time: '17:00' };
|
||||
|
||||
export default function AdminSettings() {
|
||||
const { user, isAdmin, loading: authLoading } = useAuth();
|
||||
const navigate = useNavigate();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [workhours, setWorkhours] = useState<Workhour[]>([]);
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [editingWorkhour, setEditingWorkhour] = useState<Workhour | null>(null);
|
||||
const [form, setForm] = useState(emptyWorkhour);
|
||||
|
||||
useEffect(() => {
|
||||
if (!authLoading) {
|
||||
if (!user) navigate('/auth');
|
||||
else if (!isAdmin) navigate('/dashboard');
|
||||
else fetchWorkhours();
|
||||
}
|
||||
}, [user, isAdmin, authLoading]);
|
||||
|
||||
const fetchWorkhours = async () => {
|
||||
const { data, error } = await supabase.from('workhours').select('*').order('weekday');
|
||||
if (!error && data) setWorkhours(data);
|
||||
setLoading(false);
|
||||
};
|
||||
|
||||
const handleNew = () => {
|
||||
setEditingWorkhour(null);
|
||||
setForm(emptyWorkhour);
|
||||
setDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleEdit = (wh: Workhour) => {
|
||||
setEditingWorkhour(wh);
|
||||
setForm({ weekday: wh.weekday, start_time: wh.start_time, end_time: wh.end_time });
|
||||
setDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
const workhourData = {
|
||||
weekday: form.weekday,
|
||||
start_time: form.start_time,
|
||||
end_time: form.end_time,
|
||||
};
|
||||
|
||||
if (editingWorkhour) {
|
||||
const { error } = await supabase.from('workhours').update(workhourData).eq('id', editingWorkhour.id);
|
||||
if (error) toast({ title: 'Error', description: 'Gagal mengupdate', variant: 'destructive' });
|
||||
else { toast({ title: 'Berhasil', description: 'Jam kerja diupdate' }); setDialogOpen(false); fetchWorkhours(); }
|
||||
} else {
|
||||
const { error } = await supabase.from('workhours').insert(workhourData);
|
||||
if (error) toast({ title: 'Error', description: error.message, variant: 'destructive' });
|
||||
else { toast({ title: 'Berhasil', description: 'Jam kerja ditambahkan' }); setDialogOpen(false); fetchWorkhours(); }
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (id: string) => {
|
||||
if (!confirm('Hapus jam kerja ini?')) return;
|
||||
const { error } = await supabase.from('workhours').delete().eq('id', id);
|
||||
if (error) toast({ title: 'Error', description: 'Gagal menghapus', variant: 'destructive' });
|
||||
else { toast({ title: 'Berhasil', description: 'Jam kerja dihapus' }); fetchWorkhours(); }
|
||||
};
|
||||
|
||||
if (authLoading || loading) {
|
||||
return (
|
||||
<AppLayout>
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<Skeleton className="h-10 w-1/3 mb-8" />
|
||||
<Skeleton className="h-64 w-full" />
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<AppLayout>
|
||||
<div className="container mx-auto px-4 py-8">
|
||||
<h1 className="text-4xl font-bold mb-2">Pengaturan</h1>
|
||||
<p className="text-muted-foreground mb-8">Konfigurasi platform</p>
|
||||
|
||||
<div className="space-y-8">
|
||||
<Card className="border-2 border-border">
|
||||
<CardHeader className="flex flex-row items-center justify-between">
|
||||
<div>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Clock className="w-5 h-5" />
|
||||
Jam Kerja
|
||||
</CardTitle>
|
||||
<CardDescription>Atur jadwal ketersediaan untuk konsultasi</CardDescription>
|
||||
</div>
|
||||
<Button onClick={handleNew} className="shadow-sm">
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
Tambah Jam Kerja
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Hari</TableHead>
|
||||
<TableHead>Mulai</TableHead>
|
||||
<TableHead>Selesai</TableHead>
|
||||
<TableHead className="text-right">Aksi</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{workhours.map((wh) => (
|
||||
<TableRow key={wh.id}>
|
||||
<TableCell className="font-medium">{WEEKDAYS[wh.weekday]}</TableCell>
|
||||
<TableCell>{wh.start_time}</TableCell>
|
||||
<TableCell>{wh.end_time}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<Button variant="ghost" size="sm" onClick={() => handleEdit(wh)}>
|
||||
<Pencil className="w-4 h-4" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" onClick={() => handleDelete(wh.id)}>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
{workhours.length === 0 && (
|
||||
<TableRow>
|
||||
<TableCell colSpan={4} className="text-center py-8 text-muted-foreground">
|
||||
Belum ada jam kerja
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogContent className="max-w-md border-2 border-border">
|
||||
<DialogHeader>
|
||||
<DialogTitle>{editingWorkhour ? 'Edit Jam Kerja' : 'Tambah Jam Kerja'}</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="space-y-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Hari</Label>
|
||||
<Select value={form.weekday.toString()} onValueChange={(v) => setForm({ ...form, weekday: parseInt(v) })}>
|
||||
<SelectTrigger className="border-2"><SelectValue /></SelectTrigger>
|
||||
<SelectContent>
|
||||
{WEEKDAYS.map((day, i) => (
|
||||
<SelectItem key={i} value={i.toString()}>{day}</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Mulai</Label>
|
||||
<Input type="time" value={form.start_time} onChange={(e) => setForm({ ...form, start_time: e.target.value })} className="border-2" />
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label>Selesai</Label>
|
||||
<Input type="time" value={form.end_time} onChange={(e) => setForm({ ...form, end_time: e.target.value })} className="border-2" />
|
||||
</div>
|
||||
</div>
|
||||
<Button onClick={handleSave} className="w-full shadow-sm">Simpan</Button>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user