CRM_ENVIROMENT/Newbie_CRM
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add client portal themes (Cyberpunk etc.), settings page, semantic Tailwind classes
Build & Auto-Repair / build (push) Has been cancelled
Details

Browse Source
This commit is contained in:
JCBSComputer
2026-07-01 15:47:44 +02:00
parent ef2e12ec5e
commit 6f622b6329
19 changed files with 832 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/client-portal/support/page.tsx
+21 -21
View File
@@ -75,12 +75,12 @@ export default function ClientSupport() {
<div>
<div className="flex items-center justify-between mb-6">
<div>
<h1 className="text-xl font-bold text-white mb-1">Support</h1>
<p className="text-sm text-[#6a6a75]">Submit and track support requests</p>
<h1 className="text-xl font-bold text-foreground mb-1">Support</h1>
<p className="text-sm text-muted-foreground">Submit and track support requests</p>
</div>
<button
onClick={() => setShowForm(!showForm)}
className="bg-[#1BB0CE] hover:bg-[#1BB0CE]/80 text-white text-sm px-4 py-2 rounded-lg transition-all"
className="bg-primary hover:bg-primary/80 text-foreground text-sm px-4 py-2 rounded-lg transition-all"
>
{showForm ? "Cancel" : "New Ticket"}
</button>
@@ -88,34 +88,34 @@ export default function ClientSupport() {
{/* Submit form */}
{showForm && (
<form onSubmit={handleSubmit} className="bg-[#0d1117] border border-[#1a1a24] rounded-xl p-5 mb-6 space-y-4">
<form onSubmit={handleSubmit} className="bg-card border border-border rounded-xl p-5 mb-6 space-y-4">
<div>
<label className="block text-sm text-[#8a8a95] mb-1">Title</label>
<label className="block text-sm text-muted-foreground mb-1">Title</label>
<input
value={title}
onChange={(e) => setTitle(e.target.value)}
className="w-full bg-[#1a1a24] border border-[#2a2a35] rounded-lg px-3 py-2 text-sm text-white placeholder-[#6a6a75] outline-none focus:border-[#1BB0CE]/50"
className="w-full bg-muted border border-border rounded-lg px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-primary/50"
placeholder="Brief summary of the issue"
required
/>
</div>
<div>
<label className="block text-sm text-[#8a8a95] mb-1">Description</label>
<label className="block text-sm text-muted-foreground mb-1">Description</label>
<textarea
value={description}
onChange={(e) => setDescription(e.target.value)}
rows={4}
className="w-full bg-[#1a1a24] border border-[#2a2a35] rounded-lg px-3 py-2 text-sm text-white placeholder-[#6a6a75] outline-none focus:border-[#1BB0CE]/50 resize-none"
className="w-full bg-muted border border-border rounded-lg px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-primary/50 resize-none"
placeholder="Detailed description of your issue"
required
/>
</div>
<div>
<label className="block text-sm text-[#8a8a95] mb-1">Severity</label>
<label className="block text-sm text-muted-foreground mb-1">Severity</label>
<Select value={severity} onValueChange={setSeverity}>
<SelectTrigger className="w-full">
<SelectTrigger className="w-full bg-muted">
<SelectValue />
</SelectTrigger>
<SelectContent>
@@ -128,7 +128,7 @@ export default function ClientSupport() {
</div>
{submitError && (
<div className="text-xs text-red-400 bg-red-400/5 border border-red-400/10 rounded-lg px-3 py-2">
<div className="text-xs text-destructive bg-destructive/5 border border-destructive/10 rounded-lg px-3 py-2">
{submitError}
</div>
)}
@@ -136,7 +136,7 @@ export default function ClientSupport() {
<button
type="submit"
disabled={submitting}
className="flex items-center gap-2 bg-[#1BB0CE] hover:bg-[#1BB0CE]/80 text-white text-sm px-4 py-2 rounded-lg transition-all disabled:opacity-40"
className="flex items-center gap-2 bg-primary hover:bg-primary/80 text-foreground text-sm px-4 py-2 rounded-lg transition-all disabled:opacity-40"
>
<Send className="h-3.5 w-3.5" />
{submitting ? "Submitting..." : "Submit Ticket"}
@@ -147,19 +147,19 @@ export default function ClientSupport() {
{/* Tickets list */}
{loading ? (
<div className="flex items-center justify-center h-32">
<div className="w-6 h-6 border-2 border-[#1BB0CE] border-t-transparent rounded-full animate-spin" />
<div className="w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin" />
</div>
) : tickets.length === 0 ? (
<div className="text-center py-16">
<LifeBuoy className="h-10 w-10 text-[#2a2a35] mx-auto mb-3" />
<p className="text-sm text-[#6a6a75]">No support tickets yet</p>
<LifeBuoy className="h-10 w-10 text-muted-foreground mx-auto mb-3" />
<p className="text-sm text-muted-foreground">No support tickets yet</p>
</div>
) : (
<div className="space-y-2">
{(tickets || []).map((t) => (
<div key={t.id} className="bg-[#0d1117] border border-[#1a1a24] rounded-xl p-4">
<div key={t.id} className="bg-card border border-border rounded-xl p-4">
<div className="flex items-center justify-between mb-1">
<h3 className="text-white text-sm font-medium">{t.title}</h3>
<h3 className="text-foreground text-sm font-medium">{t.title}</h3>
<div className="flex gap-2">
<span className={`text-[10px] px-1.5 py-0.5 rounded ${
t.severity === "critical" ? "bg-red-500/10 text-red-400" :
@@ -179,15 +179,15 @@ export default function ClientSupport() {
</span>
</div>
</div>
<p className="text-sm text-[#8a8a95] line-clamp-2">{t.description}</p>
<p className="text-sm text-muted-foreground line-clamp-2">{t.description}</p>
<div className="flex items-center justify-between mt-2">
<span className="text-[10px] text-[#6a6a75]">
<span className="text-[10px] text-muted-foreground">
{new Date(t.created_at).toLocaleDateString()}
</span>
</div>
{t.resolution_notes && (
<div className="mt-2 text-xs text-[#6a6a75] bg-[#1a1a24] rounded-lg px-3 py-2">
<span className="text-[#8a8a95]">Resolution: </span>{t.resolution_notes}
<div className="mt-2 text-xs text-muted-foreground bg-muted rounded-lg px-3 py-2">
<span className="text-muted-foreground">Resolution: </span>{t.resolution_notes}
</div>
)}
</div>