mirror of
https://github.com/kjanat/livedash-node.git
synced 2026-01-16 06:32:10 +01:00
feat: comprehensive UI improvements and new logo design
- Replace old logo with modern dashboard tiles design - Improve text selection styling using Tailwind selection variant - Fix session ID display with proper truncation classes - Clean up temporary logo files and showcase page - Enhance dark mode support across company settings and sessions pages - Remove obsolete Alert Configuration from company settings - Add collapsible filters and mobile-optimized view details buttons
This commit is contained in:
@ -8,7 +8,7 @@ import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Alert, AlertDescription } from "@/components/ui/alert";
|
||||
import { ShieldX, Settings, Save, Database, Bell } from "lucide-react";
|
||||
import { ShieldX, Settings, Save, Database } from "lucide-react";
|
||||
|
||||
export default function CompanySettingsPage() {
|
||||
const { data: session, status } = useSession();
|
||||
@ -18,7 +18,6 @@ export default function CompanySettingsPage() {
|
||||
const [csvUrl, setCsvUrl] = useState<string>("");
|
||||
const [csvUsername, setCsvUsername] = useState<string>("");
|
||||
const [csvPassword, setCsvPassword] = useState<string>("");
|
||||
const [sentimentThreshold, setSentimentThreshold] = useState<string>("");
|
||||
const [message, setMessage] = useState<string>("");
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
@ -32,7 +31,6 @@ export default function CompanySettingsPage() {
|
||||
setCompany(data.company);
|
||||
setCsvUrl(data.company.csvUrl || "");
|
||||
setCsvUsername(data.company.csvUsername || "");
|
||||
setSentimentThreshold(data.company.sentimentAlert?.toString() || "");
|
||||
if (data.company.csvPassword) {
|
||||
setCsvPassword(data.company.csvPassword);
|
||||
}
|
||||
@ -57,7 +55,6 @@ export default function CompanySettingsPage() {
|
||||
csvUrl,
|
||||
csvUsername,
|
||||
csvPassword,
|
||||
sentimentThreshold,
|
||||
}),
|
||||
});
|
||||
|
||||
@ -146,7 +143,6 @@ export default function CompanySettingsPage() {
|
||||
}}
|
||||
autoComplete="off"
|
||||
>
|
||||
<div className="grid gap-6 md:grid-cols-2">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
@ -196,36 +192,6 @@ export default function CompanySettingsPage() {
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<div className="flex items-center gap-2">
|
||||
<Bell className="h-5 w-5" />
|
||||
<CardTitle className="text-lg">Alert Configuration</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-2">
|
||||
<Label htmlFor="sentimentThreshold">
|
||||
Sentiment Alert Threshold
|
||||
</Label>
|
||||
<Input
|
||||
id="sentimentThreshold"
|
||||
type="number"
|
||||
value={sentimentThreshold}
|
||||
onChange={(e) => setSentimentThreshold(e.target.value)}
|
||||
placeholder="Threshold value (0-100)"
|
||||
min="0"
|
||||
max="100"
|
||||
autoComplete="off"
|
||||
/>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Percentage of negative sentiment sessions to trigger alert (0-100)
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit" className="gap-2">
|
||||
<Save className="h-4 w-4" />
|
||||
|
||||
@ -339,19 +339,24 @@ export default function SessionsPage() {
|
||||
<Badge variant="outline" className="font-mono text-xs">
|
||||
ID
|
||||
</Badge>
|
||||
<code className="text-sm text-muted-foreground font-mono">
|
||||
{(session.sessionId || session.id).slice(0, 8)}...
|
||||
<code className="text-sm text-muted-foreground font-mono truncate max-w-24">
|
||||
{session.sessionId || session.id}
|
||||
</code>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-muted-foreground">
|
||||
<Clock className="h-4 w-4" />
|
||||
{new Date(session.startTime).toLocaleString()}
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="outline" className="text-xs">
|
||||
<Clock className="h-3 w-3 mr-1" />
|
||||
{new Date(session.startTime).toLocaleDateString()}
|
||||
</Badge>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{new Date(session.startTime).toLocaleTimeString()}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<Link href={`/dashboard/sessions/${session.id}`}>
|
||||
<Button variant="outline" size="sm" className="gap-2">
|
||||
<Eye className="h-4 w-4" />
|
||||
View Details
|
||||
<span className="hidden sm:inline">View Details</span>
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
@ -163,23 +163,12 @@
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-ring/50;
|
||||
@apply border-border outline-ring/50 selection:bg-primary/30 selection:text-primary-foreground;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
|
||||
/* Custom text selection colors */
|
||||
::selection {
|
||||
background-color: hsl(var(--primary) / 0.3);
|
||||
color: hsl(var(--primary-foreground));
|
||||
}
|
||||
|
||||
::-moz-selection {
|
||||
background-color: hsl(var(--primary) / 0.3);
|
||||
color: hsl(var(--primary-foreground));
|
||||
}
|
||||
|
||||
/* Line clamp utility */
|
||||
.line-clamp-2 {
|
||||
display: -webkit-box;
|
||||
|
||||
@ -1,50 +1,36 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
|
||||
<style>
|
||||
path,
|
||||
circle {
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
<defs>
|
||||
<linearGradient id="primaryGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#6366f1;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#3730a3;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
<linearGradient id="accentGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" style="stop-color:#10b981;stop-opacity:1" />
|
||||
<stop offset="100%" style="stop-color:#059669;stop-opacity:1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
|
||||
.bg {
|
||||
fill: #ffffff;
|
||||
stroke: #3b82f6;
|
||||
}
|
||||
<!-- Background -->
|
||||
<rect x="2" y="2" width="28" height="28" rx="6" fill="url(#primaryGradient)" />
|
||||
|
||||
.icon {
|
||||
fill: #3b82f6;
|
||||
stroke: #3b82f6;
|
||||
}
|
||||
<!-- Dashboard tiles grid -->
|
||||
<!-- Top row -->
|
||||
<rect x="6" y="7" width="6" height="6" rx="2" fill="white" opacity="0.9" />
|
||||
<rect x="14" y="7" width="6" height="6" rx="2" fill="url(#accentGradient)" />
|
||||
<rect x="22" y="7" width="4" height="6" rx="2" fill="white" opacity="0.7" />
|
||||
|
||||
.text {
|
||||
fill: #3b82f6;
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
}
|
||||
<!-- Middle row -->
|
||||
<rect x="6" y="15" width="4" height="4" rx="1.5" fill="white" opacity="0.7" />
|
||||
<rect x="12" y="15" width="8" height="4" rx="1.5" fill="white" opacity="0.8" />
|
||||
<rect x="22" y="15" width="4" height="4" rx="1.5" fill="white" opacity="0.9" />
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.bg {
|
||||
fill: #1e3a8a;
|
||||
stroke: #93c5fd;
|
||||
}
|
||||
<!-- Bottom row -->
|
||||
<rect x="6" y="21" width="6" height="4" rx="1.5" fill="white" opacity="0.8" />
|
||||
<rect x="14" y="21" width="4" height="4" rx="1.5" fill="white" opacity="0.7" />
|
||||
<rect x="20" y="21" width="6" height="4" rx="1.5" fill="white" opacity="0.9" />
|
||||
|
||||
.icon {
|
||||
fill: #93c5fd;
|
||||
stroke: #93c5fd;
|
||||
}
|
||||
|
||||
.text {
|
||||
fill: #93c5fd;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Background circle -->
|
||||
<circle cx="16" cy="16" r="14" class="bg" />
|
||||
|
||||
<!-- Dashboard chart-like icon -->
|
||||
<path d="M10,22 L10,16 L13,16 L13,22 Z M15,22 L15,12 L18,12 L18,22 Z M20,22 L20,14 L23,14 L23,22 Z" class="icon" />
|
||||
|
||||
<!-- Text "LD" for LiveDash -->
|
||||
<text x="9.5" y="10" class="text">LD</text>
|
||||
<!-- Small data dots inside tiles -->
|
||||
<circle cx="9" cy="10" r="1" fill="url(#primaryGradient)" opacity="0.8" />
|
||||
<circle cx="17" cy="10" r="1" fill="white" opacity="0.9" />
|
||||
<circle cx="9" cy="23" r="0.8" fill="url(#accentGradient)" opacity="0.8" />
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.8 KiB |
Reference in New Issue
Block a user