Enhance API token management and role display. Improved token expiration options and made role cards collapsible.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9111ef36-26c8-4085-84ca-a35dc1fec1b5
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7083d608-d6d3-4a6a-9a27-6286c5109627/ce8616db-dc72-462d-9d34-1ac938bbce4c.jpg
This commit is contained in:
alphaeusmote
2025-04-11 17:10:34 +00:00
2 changed files with 85 additions and 57 deletions
+2
View File
@@ -76,6 +76,8 @@ const tokenFormSchema = z.object({
name: z.string().min(1, "Token name is required"), name: z.string().min(1, "Token name is required"),
role: z.string().min(1, "Role is required"), role: z.string().min(1, "Role is required"),
expiresIn: z.string().optional(), expiresIn: z.string().optional(),
customDate: z.date().optional(),
customTime: z.string().optional(),
}); });
export default function ApiTokensPage() { export default function ApiTokensPage() {
+83 -57
View File
@@ -18,6 +18,11 @@ import {
CardHeader, CardHeader,
CardTitle, CardTitle,
} from "@/components/ui/card"; } from "@/components/ui/card";
import {
Collapsible,
CollapsibleContent,
CollapsibleTrigger,
} from "@/components/ui/collapsible";
import { import {
Dialog, Dialog,
DialogContent, DialogContent,
@@ -141,30 +146,38 @@ type RoleFormValues = z.infer<typeof roleFormSchema>;
// System role card component // System role card component
const SystemRoleCard = ({ roleName }: { roleName: SystemRole }) => { const SystemRoleCard = ({ roleName }: { roleName: SystemRole }) => {
const [isOpen, setIsOpen] = useState(false);
return ( return (
<Card className="mb-4"> <Card className="mb-4">
<CardHeader> <Collapsible open={isOpen} onOpenChange={setIsOpen}>
<CardTitle className="flex items-center gap-2"> <CardHeader className="pb-2">
<ShieldAlert className="h-5 w-5 text-primary" /> <CollapsibleTrigger className="w-full text-left">
{roleName.charAt(0).toUpperCase() + roleName.slice(1)} <CardTitle className="flex items-center gap-2">
<Badge variant="outline" className="ml-2">System</Badge> <ShieldAlert className="h-5 w-5 text-primary" />
</CardTitle> {roleName.charAt(0).toUpperCase() + roleName.slice(1)}
<CardDescription> <Badge variant="outline" className="ml-2">System</Badge>
{roleName === "admin" && "Full access to all system features and settings"} </CardTitle>
{roleName === "manager" && "Manage domains, records, and access to organizational resources"} <CardDescription>
{roleName === "user" && "Standard user with ability to view and modify specific resources"} {roleName === "admin" && "Full access to all system features and settings"}
{roleName === "readonly" && "View-only access to resources without modification permissions"} {roleName === "manager" && "Manage domains, records, and access to organizational resources"}
</CardDescription> {roleName === "user" && "Standard user with ability to view and modify specific resources"}
</CardHeader> {roleName === "readonly" && "View-only access to resources without modification permissions"}
<CardContent> </CardDescription>
<div className="flex flex-wrap gap-2"> </CollapsibleTrigger>
{systemRolePermissions[roleName].map((permission) => ( </CardHeader>
<Badge key={permission} variant="secondary" className="mb-1"> <CollapsibleContent>
{availablePermissions.find(p => p.id === permission)?.label || permission} <CardContent>
</Badge> <div className="flex flex-wrap gap-2">
))} {systemRolePermissions[roleName].map((permission) => (
</div> <Badge key={permission} variant="secondary" className="mb-1">
</CardContent> {availablePermissions.find(p => p.id === permission)?.label || permission}
</Badge>
))}
</div>
</CardContent>
</CollapsibleContent>
</Collapsible>
</Card> </Card>
); );
}; };
@@ -350,41 +363,54 @@ export default function RolesPage() {
</Card> </Card>
) : ( ) : (
<div className="grid grid-cols-1 md:grid-cols-2 gap-4"> <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
{customRoles.map((role: CustomRole) => ( {customRoles.map((role: CustomRole) => {
<Card key={role.id} className="mb-4"> const [isOpen, setIsOpen] = useState(false);
<CardHeader> return (
<div className="flex justify-between items-start"> <Card key={role.id} className="mb-4">
<div> <Collapsible open={isOpen} onOpenChange={setIsOpen}>
<CardTitle className="flex items-center gap-2"> <CardHeader className="pb-2">
<ShieldCheck className="h-5 w-5 text-primary" /> <div className="flex justify-between items-start">
{role.name} <CollapsibleTrigger className="text-left flex-1">
<Badge variant="secondary" className="ml-2">Custom</Badge> <CardTitle className="flex items-center gap-2">
</CardTitle> <ShieldCheck className="h-5 w-5 text-primary" />
{role.description && ( {role.name}
<CardDescription>{role.description}</CardDescription> <Badge variant="secondary" className="ml-2">Custom</Badge>
)} </CardTitle>
</div> {role.description && (
<div className="flex space-x-2"> <CardDescription>{role.description}</CardDescription>
<Button variant="ghost" size="icon" onClick={() => handleEditRole(role)}> )}
<Edit className="h-4 w-4" /> </CollapsibleTrigger>
</Button> <div className="flex space-x-2">
<Button variant="ghost" size="icon" onClick={() => handleDeleteRole(role)}> <Button variant="ghost" size="icon" onClick={(e) => {
<Trash2 className="h-4 w-4 text-destructive" /> e.stopPropagation();
</Button> handleEditRole(role);
</div> }}>
</div> <Edit className="h-4 w-4" />
</CardHeader> </Button>
<CardContent> <Button variant="ghost" size="icon" onClick={(e) => {
<div className="flex flex-wrap gap-2"> e.stopPropagation();
{role.permissions.map((permission) => ( handleDeleteRole(role);
<Badge key={permission} variant="secondary" className="mb-1"> }}>
{availablePermissions.find(p => p.id === permission)?.label || permission} <Trash2 className="h-4 w-4 text-destructive" />
</Badge> </Button>
))} </div>
</div> </div>
</CardContent> </CardHeader>
</Card> <CollapsibleContent>
))} <CardContent>
<div className="flex flex-wrap gap-2">
{role.permissions.map((permission) => (
<Badge key={permission} variant="secondary" className="mb-1">
{availablePermissions.find(p => p.id === permission)?.label || permission}
</Badge>
))}
</div>
</CardContent>
</CollapsibleContent>
</Collapsible>
</Card>
);
})}
</div> </div>
)} )}
</div> </div>