chore: upload parte 1 - logica
DevSecOps Enterprise Pipeline / security-gate-and-deploy (push) Failing after 41s
DevSecOps Enterprise Pipeline / security-gate-and-deploy (push) Failing after 41s
This commit is contained in:
@@ -0,0 +1,586 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import useSWR from "swr";
|
||||
import { useAuth } from "@/contexts/auth-context";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||||
import { Checkbox } from "@/components/ui/checkbox";
|
||||
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
|
||||
import { Plus, Pencil, Trash2, KeyRound, Shield, Users } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
|
||||
const fetcher = (url: string) => fetch(url).then((r) => r.json());
|
||||
|
||||
const SECTIONS = [
|
||||
{ id: "dashboard", label: "Dashboard" },
|
||||
{ id: "components", label: "Components" },
|
||||
{ id: "products", label: "Products" },
|
||||
{ id: "production", label: "Production" },
|
||||
{ id: "supplier-pos", label: "Supplier POs" },
|
||||
{ id: "customer-orders", label: "Customer Orders" },
|
||||
{ id: "stock-history", label: "Stock History" },
|
||||
{ id: "stock-take", label: "Stock Take" },
|
||||
{ id: "logistics", label: "Logistics" },
|
||||
{ id: "suppliers", label: "Suppliers" },
|
||||
{ id: "customers", label: "Customers" },
|
||||
];
|
||||
|
||||
interface UserData {
|
||||
id: number;
|
||||
email: string;
|
||||
name: string;
|
||||
role: "admin" | "user";
|
||||
is_active: boolean;
|
||||
permissions: {
|
||||
sections: string[];
|
||||
can_view_financial: boolean;
|
||||
can_edit: boolean;
|
||||
can_create: boolean;
|
||||
can_delete: boolean;
|
||||
can_download: boolean;
|
||||
};
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
const defaultPermissions = {
|
||||
sections: [] as string[],
|
||||
can_view_financial: false,
|
||||
can_edit: false,
|
||||
can_create: false,
|
||||
can_delete: false,
|
||||
can_download: false,
|
||||
};
|
||||
|
||||
export default function SettingsPage() {
|
||||
const { user: currentUser } = useAuth();
|
||||
const { data: users = [], mutate } = useSWR<UserData[]>("/api/users", fetcher);
|
||||
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [editingUser, setEditingUser] = useState<UserData | null>(null);
|
||||
const [passwordDialogOpen, setPasswordDialogOpen] = useState(false);
|
||||
const [passwordUserId, setPasswordUserId] = useState<number | null>(null);
|
||||
const [newPassword, setNewPassword] = useState("");
|
||||
const [saving, setSaving] = useState(false);
|
||||
|
||||
const [form, setForm] = useState({
|
||||
email: "",
|
||||
name: "",
|
||||
password: "",
|
||||
role: "user" as "admin" | "user",
|
||||
permissions: { ...defaultPermissions },
|
||||
});
|
||||
|
||||
// Check if current user is admin
|
||||
if (currentUser?.role !== "admin") {
|
||||
return (
|
||||
<div className="p-8">
|
||||
<Card>
|
||||
<CardContent className="py-12 text-center">
|
||||
<Shield className="h-12 w-12 mx-auto text-muted-foreground mb-4" />
|
||||
<h2 className="text-xl font-semibold mb-2">Access Denied</h2>
|
||||
<p className="text-muted-foreground">
|
||||
You don't have permission to access user settings.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function openCreateDialog() {
|
||||
setEditingUser(null);
|
||||
setForm({
|
||||
email: "",
|
||||
name: "",
|
||||
password: "",
|
||||
role: "user",
|
||||
permissions: { ...defaultPermissions },
|
||||
});
|
||||
setDialogOpen(true);
|
||||
}
|
||||
|
||||
function openEditDialog(user: UserData) {
|
||||
setEditingUser(user);
|
||||
setForm({
|
||||
email: user.email,
|
||||
name: user.name,
|
||||
password: "",
|
||||
role: user.role,
|
||||
permissions: {
|
||||
...defaultPermissions,
|
||||
...(user.permissions || {}),
|
||||
sections: user.permissions?.sections || [],
|
||||
},
|
||||
});
|
||||
setDialogOpen(true);
|
||||
}
|
||||
|
||||
function toggleSection(sectionId: string) {
|
||||
setForm((prev) => {
|
||||
const sections = prev.permissions.sections.includes(sectionId)
|
||||
? prev.permissions.sections.filter((s) => s !== sectionId)
|
||||
: [...prev.permissions.sections, sectionId];
|
||||
return {
|
||||
...prev,
|
||||
permissions: { ...prev.permissions, sections },
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
function togglePermission(key: keyof typeof defaultPermissions) {
|
||||
if (key === "sections") return;
|
||||
setForm((prev) => ({
|
||||
...prev,
|
||||
permissions: {
|
||||
...prev.permissions,
|
||||
[key]: !prev.permissions[key],
|
||||
},
|
||||
}));
|
||||
}
|
||||
|
||||
async function handleSave() {
|
||||
if (!form.email || !form.name) {
|
||||
toast.error("Email and name are required");
|
||||
return;
|
||||
}
|
||||
if (!editingUser && !form.password) {
|
||||
toast.error("Password is required for new users");
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
try {
|
||||
const url = editingUser ? `/api/users/${editingUser.id}` : "/api/users";
|
||||
const method = editingUser ? "PUT" : "POST";
|
||||
|
||||
const payload: Record<string, unknown> = {
|
||||
email: form.email,
|
||||
name: form.name,
|
||||
role: form.role,
|
||||
permissions: form.permissions,
|
||||
};
|
||||
if (form.password) {
|
||||
payload.password = form.password;
|
||||
}
|
||||
|
||||
const res = await fetch(url, {
|
||||
method,
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json();
|
||||
throw new Error(data.error || "Failed to save");
|
||||
}
|
||||
|
||||
toast.success(editingUser ? "User updated" : "User created");
|
||||
setDialogOpen(false);
|
||||
mutate();
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : "Failed to save");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleDelete(userId: number) {
|
||||
if (userId === currentUser?.id) {
|
||||
toast.error("You cannot delete your own account");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!confirm("Are you sure you want to delete this user?")) return;
|
||||
|
||||
try {
|
||||
const res = await fetch(`/api/users/${userId}`, { method: "DELETE" });
|
||||
if (!res.ok) {
|
||||
const data = await res.json();
|
||||
throw new Error(data.error || "Failed to delete");
|
||||
}
|
||||
toast.success("User deleted");
|
||||
mutate();
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : "Failed to delete");
|
||||
}
|
||||
}
|
||||
|
||||
function openPasswordDialog(userId: number) {
|
||||
setPasswordUserId(userId);
|
||||
setNewPassword("");
|
||||
setPasswordDialogOpen(true);
|
||||
}
|
||||
|
||||
async function handleResetPassword() {
|
||||
if (!newPassword || newPassword.length < 6) {
|
||||
toast.error("Password must be at least 6 characters");
|
||||
return;
|
||||
}
|
||||
|
||||
setSaving(true);
|
||||
try {
|
||||
const res = await fetch(`/api/users/${passwordUserId}`, {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ password: newPassword }),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const data = await res.json();
|
||||
throw new Error(data.error || "Failed to reset password");
|
||||
}
|
||||
|
||||
toast.success("Password updated");
|
||||
setPasswordDialogOpen(false);
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : "Failed to reset password");
|
||||
} finally {
|
||||
setSaving(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="p-8 space-y-6">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold flex items-center gap-2">
|
||||
<Users className="h-6 w-6" />
|
||||
User Management
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Manage users, roles, and permissions
|
||||
</p>
|
||||
</div>
|
||||
<Button onClick={openCreateDialog} className="gap-2">
|
||||
<Plus className="h-4 w-4" />
|
||||
Add User
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Users Table */}
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Users</CardTitle>
|
||||
<CardDescription>
|
||||
{users.length} user{users.length !== 1 ? "s" : ""} registered
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Email</TableHead>
|
||||
<TableHead>Role</TableHead>
|
||||
<TableHead>Sections</TableHead>
|
||||
<TableHead>Permissions</TableHead>
|
||||
<TableHead className="text-right">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{users.map((user) => (
|
||||
<TableRow key={user.id}>
|
||||
<TableCell className="font-medium">{user.name}</TableCell>
|
||||
<TableCell className="text-muted-foreground">{user.email}</TableCell>
|
||||
<TableCell>
|
||||
<Badge variant={user.role === "admin" ? "default" : "secondary"}>
|
||||
{user.role}
|
||||
</Badge>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{user.role === "admin" ? (
|
||||
<span className="text-xs text-muted-foreground">All</span>
|
||||
) : (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{user.permissions?.sections?.length || 0} section{(user.permissions?.sections?.length || 0) !== 1 ? "s" : ""}
|
||||
</span>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{user.role === "admin" ? (
|
||||
<Badge variant="outline" className="text-xs">Full Access</Badge>
|
||||
) : (
|
||||
<>
|
||||
{user.permissions?.can_view_financial && <Badge variant="outline" className="text-xs">Financial</Badge>}
|
||||
{user.permissions?.can_edit && <Badge variant="outline" className="text-xs">Edit</Badge>}
|
||||
{user.permissions?.can_create && <Badge variant="outline" className="text-xs">Create</Badge>}
|
||||
{user.permissions?.can_delete && <Badge variant="outline" className="text-xs">Delete</Badge>}
|
||||
{user.permissions?.can_download && <Badge variant="outline" className="text-xs">Download</Badge>}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex items-center justify-end gap-1">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => openPasswordDialog(user.id)}
|
||||
title="Reset Password"
|
||||
>
|
||||
<KeyRound className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => openEditDialog(user)}
|
||||
title="Edit User"
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
{user.id !== currentUser?.id && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => handleDelete(user.id)}
|
||||
title="Delete User"
|
||||
className="text-destructive hover:text-destructive"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* User Dialog */}
|
||||
<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
|
||||
<DialogContent className="sm:max-w-[600px] max-h-[85vh] overflow-y-auto">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{editingUser ? "Edit User" : "Create User"}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-6 py-4">
|
||||
{/* Basic Info */}
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="name">Name *</Label>
|
||||
<Input
|
||||
id="name"
|
||||
value={form.name}
|
||||
onChange={(e) => setForm({ ...form, name: e.target.value })}
|
||||
placeholder="Full name"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="email">Email *</Label>
|
||||
<Input
|
||||
id="email"
|
||||
type="email"
|
||||
value={form.email}
|
||||
onChange={(e) => setForm({ ...form, email: e.target.value })}
|
||||
placeholder="user@company.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="password">
|
||||
{editingUser ? "New Password (leave blank to keep)" : "Password *"}
|
||||
</Label>
|
||||
<Input
|
||||
id="password"
|
||||
type="password"
|
||||
value={form.password}
|
||||
onChange={(e) => setForm({ ...form, password: e.target.value })}
|
||||
placeholder={editingUser ? "Leave blank to keep current" : "Min 6 characters"}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="role">Role</Label>
|
||||
<Select
|
||||
value={form.role}
|
||||
onValueChange={(val) => setForm({ ...form, role: val as "admin" | "user" })}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="user">User</SelectItem>
|
||||
<SelectItem value="admin">Admin</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{form.role === "user" && (
|
||||
<>
|
||||
{/* Section Access */}
|
||||
<div className="space-y-3">
|
||||
<Label>Section Access</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Select which sections this user can access
|
||||
</p>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{SECTIONS.map((section) => (
|
||||
<div
|
||||
key={section.id}
|
||||
className="flex items-center gap-2 p-2 rounded border"
|
||||
>
|
||||
<Checkbox
|
||||
id={`section-${section.id}`}
|
||||
checked={form.permissions.sections.includes(section.id)}
|
||||
onCheckedChange={() => toggleSection(section.id)}
|
||||
/>
|
||||
<Label
|
||||
htmlFor={`section-${section.id}`}
|
||||
className="text-sm cursor-pointer"
|
||||
>
|
||||
{section.label}
|
||||
</Label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Permissions */}
|
||||
<div className="space-y-3">
|
||||
<Label>Permissions</Label>
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<div className="flex items-center gap-2 p-3 rounded border">
|
||||
<Checkbox
|
||||
id="perm-financial"
|
||||
checked={form.permissions.can_view_financial}
|
||||
onCheckedChange={() => togglePermission("can_view_financial")}
|
||||
/>
|
||||
<div>
|
||||
<Label htmlFor="perm-financial" className="cursor-pointer">
|
||||
View Financial Info
|
||||
</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
See prices, costs, and financial data
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 p-3 rounded border">
|
||||
<Checkbox
|
||||
id="perm-edit"
|
||||
checked={form.permissions.can_edit}
|
||||
onCheckedChange={() => togglePermission("can_edit")}
|
||||
/>
|
||||
<div>
|
||||
<Label htmlFor="perm-edit" className="cursor-pointer">
|
||||
Edit Records
|
||||
</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Modify existing data
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 p-3 rounded border">
|
||||
<Checkbox
|
||||
id="perm-create"
|
||||
checked={form.permissions.can_create}
|
||||
onCheckedChange={() => togglePermission("can_create")}
|
||||
/>
|
||||
<div>
|
||||
<Label htmlFor="perm-create" className="cursor-pointer">
|
||||
Create Records
|
||||
</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Add new components, products, etc.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 p-3 rounded border">
|
||||
<Checkbox
|
||||
id="perm-delete"
|
||||
checked={form.permissions.can_delete}
|
||||
onCheckedChange={() => togglePermission("can_delete")}
|
||||
/>
|
||||
<div>
|
||||
<Label htmlFor="perm-delete" className="cursor-pointer">
|
||||
Delete Records
|
||||
</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Remove data permanently
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 p-3 rounded border col-span-2">
|
||||
<Checkbox
|
||||
id="perm-download"
|
||||
checked={form.permissions.can_download}
|
||||
onCheckedChange={() => togglePermission("can_download")}
|
||||
/>
|
||||
<div>
|
||||
<Label htmlFor="perm-download" className="cursor-pointer">
|
||||
Download Files
|
||||
</Label>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Export CSVs and download reports (view only if disabled)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{form.role === "admin" && (
|
||||
<div className="rounded-lg border p-4 bg-muted/30">
|
||||
<p className="text-sm font-medium">Admin users have full access</p>
|
||||
<p className="text-xs text-muted-foreground mt-1">
|
||||
Admins can access all sections, view financial data, and perform all actions including user management.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setDialogOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleSave} disabled={saving}>
|
||||
{saving ? "Saving..." : editingUser ? "Update User" : "Create User"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Password Reset Dialog */}
|
||||
<Dialog open={passwordDialogOpen} onOpenChange={setPasswordDialogOpen}>
|
||||
<DialogContent className="sm:max-w-[400px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Reset Password</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="py-4">
|
||||
<Label htmlFor="new-password">New Password</Label>
|
||||
<Input
|
||||
id="new-password"
|
||||
type="password"
|
||||
value={newPassword}
|
||||
onChange={(e) => setNewPassword(e.target.value)}
|
||||
placeholder="Min 6 characters"
|
||||
className="mt-2"
|
||||
/>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setPasswordDialogOpen(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button onClick={handleResetPassword} disabled={saving}>
|
||||
{saving ? "Saving..." : "Reset Password"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user