ilia/Jobber
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

settings header and destructive fix

Browse Source
This commit is contained in:
DaKheera47 2026-01-15 14:30:10 +00:00
parent 717987c5cc
commit 55852171a1
2 changed files with 26 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
orchestrator/src/client/pages/SettingsPage.tsx
View File

@ -3,9 +3,10 @@
*/ */
import React, { useEffect, useMemo, useState } from "react" import React, { useEffect, useMemo, useState } from "react"
import { Trash2 } from "lucide-react" import { AlertTriangle, ArrowLeft, Settings, Trash2 } from "lucide-react"
import { toast } from "sonner" import { toast } from "sonner"
import { PageHeader } from "../components/layout"
import { import {
AlertDialog, AlertDialog,
AlertDialogAction, AlertDialogAction,
@ -354,14 +355,17 @@ export const SettingsPage: React.FC = () => {
} }
return ( return (
<main className="container mx-auto max-w-3xl space-y-6 px-4 py-6 pb-12"> <>
<div className="space-y-1"> <PageHeader
<h1 className="text-xl font-semibold tracking-tight">Settings</h1> icon={Settings}
<p className="text-sm text-muted-foreground">Configure runtime behavior for this app.</p> title="Settings"
</div> subtitle="Configure runtime behavior for this app."
nav={[{ icon: ArrowLeft, label: "Back to Orchestrator", to: "/" }]}
/>
<Accordion type="multiple" className="w-full space-y-4"> <main className="container mx-auto max-w-3xl space-y-6 px-4 py-6 pb-12">
<AccordionItem value="model" className="border rounded-lg px-4"> <Accordion type="multiple" className="w-full space-y-4">
<AccordionItem value="model" className="border rounded-lg px-4">
<AccordionTrigger className="hover:no-underline py-4"> <AccordionTrigger className="hover:no-underline py-4">
<span className="text-base font-semibold">Model</span> <span className="text-base font-semibold">Model</span>
</AccordionTrigger> </AccordionTrigger>
@ -896,15 +900,18 @@ export const SettingsPage: React.FC = () => {
</AccordionContent> </AccordionContent>
</AccordionItem> </AccordionItem>
<AccordionItem value="danger-zone" className="border rounded-lg px-4 border-destructive/20 bg-destructive/5"> <AccordionItem value="danger-zone" className="border rounded-lg px-4 border-red-500/30 bg-red-500/5 mt-4">
<AccordionTrigger className="hover:no-underline py-4"> <AccordionTrigger className="hover:no-underline py-4">
<span className="text-base font-semibold text-destructive">Danger Zone</span> <div className="flex items-center gap-2 text-red-500">
<AlertTriangle className="h-4 w-4" />
<span className="text-base font-semibold tracking-wider">Danger Zone</span>
</div>
</AccordionTrigger> </AccordionTrigger>
<AccordionContent className="pb-4"> <AccordionContent className="pb-4">
<div className="space-y-4"> <div className="space-y-4 pt-2">
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"> <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between p-3 rounded-md">
<div className="space-y-0.5"> <div className="space-y-0.5">
<div className="text-sm font-medium">Clear Discovered Jobs</div> <div className="text-sm font-semibold text-red-500">Clear Discovered Jobs</div>
<div className="text-xs text-muted-foreground"> <div className="text-xs text-muted-foreground">
Delete all jobs with the status "discovered". Ready, applied, and skipped jobs are kept. Delete all jobs with the status "discovered". Ready, applied, and skipped jobs are kept.
</div> </div>
@ -925,7 +932,7 @@ export const SettingsPage: React.FC = () => {
</AlertDialogHeader> </AlertDialogHeader>
<AlertDialogFooter> <AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel> <AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction onClick={handleClearDiscovered} className="bg-destructive text-destructive-foreground hover:bg-destructive/90"> <AlertDialogAction onClick={handleClearDiscovered} className="bg-red-500 text-red-500-foreground hover:bg-red-500/90">
Clear discovered Clear discovered
</AlertDialogAction> </AlertDialogAction>
</AlertDialogFooter> </AlertDialogFooter>
@ -933,11 +940,9 @@ export const SettingsPage: React.FC = () => {
</AlertDialog> </AlertDialog>
</div> </div>
<Separator className="bg-destructive/10" /> <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between p-3 rounded-md">
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div className="space-y-0.5"> <div className="space-y-0.5">
<div className="text-sm font-medium">Clear Database</div> <div className="text-sm font-semibold text-red-500">Clear Database</div>
<div className="text-xs text-muted-foreground"> <div className="text-xs text-muted-foreground">
Delete all jobs and pipeline runs from the database. Delete all jobs and pipeline runs from the database.
</div> </div>
@ -958,7 +963,7 @@ export const SettingsPage: React.FC = () => {
</AlertDialogHeader> </AlertDialogHeader>
<AlertDialogFooter> <AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel> <AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction onClick={handleClearDatabase} className="bg-destructive text-destructive-foreground hover:bg-destructive/90"> <AlertDialogAction onClick={handleClearDatabase} className="bg-red-500 text-red-500 hover:bg-red-500/90">
Clear database Clear database
</AlertDialogAction> </AlertDialogAction>
</AlertDialogFooter> </AlertDialogFooter>
@ -979,5 +984,6 @@ export const SettingsPage: React.FC = () => {
</Button> </Button>
</div> </div>
</main> </main>
</>
) )
} }

2
orchestrator/src/components/ui/button.tsx
View File

@ -12,7 +12,7 @@ const buttonVariants = cva(
default: default:
"bg-primary text-primary-foreground shadow hover:bg-primary/90", "bg-primary text-primary-foreground shadow hover:bg-primary/90",
destructive: destructive:
"bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", "bg-red-900 text-red-200 shadow-sm hover:bg-red-600/90",
outline: outline:
"border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground", "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
secondary: secondary: