chore: add project files and setup gitignore
This commit is contained in:
164
reserva-mesa-dashboard/app/(dashboard)/equipa/page.tsx
Normal file
164
reserva-mesa-dashboard/app/(dashboard)/equipa/page.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
"use client";
|
||||
|
||||
import React, { useState } from "react";
|
||||
import { useStaff } from "@/hooks/useStaff";
|
||||
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 {
|
||||
Users,
|
||||
UserPlus,
|
||||
Trash2,
|
||||
Mail,
|
||||
Phone,
|
||||
Briefcase,
|
||||
Search,
|
||||
Plus
|
||||
} from "lucide-react";
|
||||
|
||||
export default function EquipaPage() {
|
||||
const { staff, loading, addStaff, deleteStaff } = useStaff();
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const [isAdding, setIsAdding] = useState(false);
|
||||
const [newMember, setNewMember] = useState({
|
||||
name: "",
|
||||
role: "",
|
||||
email: "",
|
||||
phoneNumber: ""
|
||||
});
|
||||
|
||||
const filteredStaff = staff.filter(s =>
|
||||
s.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
||||
s.role.toLowerCase().includes(searchTerm.toLowerCase())
|
||||
);
|
||||
|
||||
const handleAdd = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
const res = await addStaff(newMember);
|
||||
if (res.success) {
|
||||
setIsAdding(false);
|
||||
setNewMember({ name: "", role: "", email: "", phoneNumber: "" });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div className="flex items-center justify-between">
|
||||
<h1 className="text-3xl font-display font-bold text-foreground">Gestão de Equipa</h1>
|
||||
<Button onClick={() => setIsAdding(!isAdding)} className="gap-2">
|
||||
{isAdding ? "Cancelar" : <><UserPlus className="h-4 w-4" /> Adicionar Funcionário</>}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{isAdding && (
|
||||
<Card className="border-primary/20 bg-primary/5">
|
||||
<CardHeader>
|
||||
<CardTitle>Novo Funcionário</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleAdd} className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Nome</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={newMember.name}
|
||||
onChange={e => setNewMember({...newMember, name: e.target.value})}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="role">Cargo</Label>
|
||||
<Input
|
||||
id="role"
|
||||
value={newMember.role}
|
||||
onChange={e => setNewMember({...newMember, role: e.target.value})}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={newMember.email}
|
||||
onChange={e => setNewMember({...newMember, email: e.target.value})}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="phone">Telefone</Label>
|
||||
<div className="flex gap-2">
|
||||
<Input
|
||||
id="phone"
|
||||
value={newMember.phoneNumber}
|
||||
onChange={e => setNewMember({...newMember, phoneNumber: e.target.value})}
|
||||
/>
|
||||
<Button type="submit">Adicionar</Button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Pesquisar por nome ou cargo..."
|
||||
className="pl-10"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{loading ? (
|
||||
<div className="col-span-full flex items-center justify-center py-20">
|
||||
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
|
||||
</div>
|
||||
) : filteredStaff.length > 0 ? (
|
||||
filteredStaff.map((member) => (
|
||||
<Card key={member.id} className="overflow-hidden border-border/50 hover:shadow-md transition-all group">
|
||||
<CardHeader className="pb-2">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="h-12 w-12 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-xl">
|
||||
{member.name.charAt(0)}
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="text-muted-foreground hover:text-destructive opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
onClick={() => deleteStaff(member.id)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<CardTitle className="mt-4">{member.name}</CardTitle>
|
||||
<CardDescription className="flex items-center gap-1">
|
||||
<Briefcase className="h-3 w-3" /> {member.role}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3 pt-4 border-t border-border/50">
|
||||
<div className="flex items-center gap-3 text-sm text-muted-foreground">
|
||||
<Mail className="h-4 w-4" /> {member.email}
|
||||
</div>
|
||||
{member.phoneNumber && (
|
||||
<div className="flex items-center gap-3 text-sm text-muted-foreground">
|
||||
<Phone className="h-4 w-4" /> {member.phoneNumber}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
))
|
||||
) : (
|
||||
<div className="col-span-full flex flex-col items-center justify-center py-20 text-center border-2 border-dashed rounded-xl">
|
||||
<Users className="h-12 w-12 text-muted-foreground/20 mb-4" />
|
||||
<h3 className="text-lg font-medium">Nenhum funcionário encontrado</h3>
|
||||
<p className="text-sm text-muted-foreground">Adicione membros à sua equipa para começar.</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user