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

Changed Dashboards

Browse Source
This commit is contained in:
Hannah_Bagga
2026-06-18 15:37:08 +02:00
parent 10b5de7a21 03fbe13938
commit 3d03440ffa
37 changed files with 2004 additions and 495 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/dashboard/lead-status-chart.tsx
+5 -4
View File
@@ -51,15 +51,16 @@ export function LeadStatusChart({ data }: LeadStatusChartProps) {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3, delay: 0.2 }}
className="h-full"
>
<Card>
<Card className="h-full">
<CardHeader>
<CardTitle>Lead Status</CardTitle>
</CardHeader>
<CardContent>
<div className="flex flex-col items-center">
<CardContent className="flex flex-1 flex-col">
<div className="flex flex-1 flex-col items-center justify-center">
{/* Donut */}
<svg width="280" height="280" viewBox="0 0 320 320" className="overflow-visible">
<svg width="100%" height="100%" viewBox="0 0 320 320" className="max-h-full overflow-visible" style={{ maxWidth: "280px" }}>
<defs>
{segs.map((s, i) => (
<radialGradient key={i} id={`chart-grad-${i}`} cx="50%" cy="50%" r="50%">
src/components/dashboard/leads-per-month-chart.tsx
+13 -12
View File
@@ -4,14 +4,14 @@ import { useState, useMemo } from "react"
import { motion } from "framer-motion"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
interface MonthlyData {
month: string
interface IntervalData {
label: string
leads: number
closed: number
}
interface LeadsPerMonthChartProps {
data: MonthlyData[]
data: IntervalData[]
}
const NEW_LEADS = "#0d9488"
@@ -21,8 +21,8 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
const [hovered, setHovered] = useState<number | null>(null)
const width = 880
const height = 380
const padding = { top: 28, right: 24, bottom: 44, left: 44 }
const height = 620
const padding = { top: 128, right: 24, bottom: 48, left: 44 }
const chartW = width - padding.left - padding.right
const chartH = height - padding.top - padding.bottom
@@ -54,8 +54,9 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.3, delay: 0.3 }}
className="h-full"
>
<Card>
<Card className="h-full">
<CardHeader>
<div className="flex items-start justify-between">
<div>
@@ -76,12 +77,12 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
</div>
</div>
</CardHeader>
<CardContent>
<div className="relative">
<CardContent className="flex flex-1 flex-col">
<div className="relative flex-1">
<svg
viewBox={`0 0 ${width} ${height}`}
width="100%"
height="auto"
height="100%"
className="block overflow-visible"
>
<defs>
@@ -136,7 +137,7 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
return (
<g
key={d.month}
key={d.label}
onMouseEnter={() => setHovered(i)}
onMouseLeave={() => setHovered(null)}
style={{ cursor: "pointer" }}
@@ -186,7 +187,7 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
fontWeight={isActive ? 600 : 400}
textAnchor="middle"
>
{d.month}
{d.label}
</text>
</g>
)
@@ -214,7 +215,7 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
}}
>
<div className="mb-1.5 text-xs font-semibold" style={{ color: "hsl(var(--foreground))" }}>
{activeDatum.month}
{activeDatum.label}
</div>
<div className="mb-1 flex items-center justify-between gap-4 text-xs" style={{ color: "hsl(var(--muted-foreground))" }}>
<span className="flex items-center gap-1.5">
src/components/dashboard/stat-card.tsx
+3 -4
View File
@@ -96,10 +96,9 @@ export function StatCard({ title, value, icon: Icon, variant = "default", descri
transition={{ duration: 0.3, delay: index * 0.05 }}
className="relative"
>
<Card className="group rounded-2xl border p-5 overflow-hidden hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200 cursor-default">
<div className={cn("h-[3px] w-full absolute top-0 left-0 bg-gradient-to-r", gradient)} />
<CardContent className="p-0">
<div className="flex items-start justify-between">
<Card className="group hover:shadow-md transition-all duration-200">
<CardContent className="p-6">
<div className="flex items-center justify-between">
<div className="space-y-1">
<p className="text-sm font-medium text-muted-foreground">{title}</p>
<p className="text-3xl font-bold tracking-tight">
src/components/layout/sidebar.tsx
+1
View File
@@ -42,6 +42,7 @@ interface SidebarProps {
export function Sidebar({ collapsed, onToggle, mobileOpen, onMobileClose }: SidebarProps) {
const pathname = usePathname()
const { user } = useUser()
if (!user) return null
const initials = user.name.split(" ").map((n) => n[0]).join("")
const sidebarContent = (
src/components/layout/topbar.tsx
+10 -7
View File
@@ -1,9 +1,8 @@
"use client"
import { useState } from "react"
import { useState, useEffect } from "react"
import { useRouter } from "next/navigation"
import { useTheme } from "next-themes"
import { cn } from "@/lib/utils"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
@@ -35,9 +34,13 @@ interface TopbarProps {
export function Topbar({ onMenuClick }: TopbarProps) {
const router = useRouter()
const { theme, setTheme } = useTheme()
const { user } = useUser()
const { user, logout } = useUser()
const [mounted, setMounted] = useState(false)
const [searchOpen, setSearchOpen] = useState(false)
const initials = user.name.split(" ").map((n) => n[0]).join("")
useEffect(() => { setMounted(true) }, [])
if (!user) return null
const initials = user.name.split(" ").map((n: string) => n[0]).join("").toUpperCase()
return (
<header className="sticky top-0 z-20 flex h-16 items-center gap-4 border-b bg-background px-4 lg:px-6">
@@ -79,7 +82,7 @@ export function Topbar({ onMenuClick }: TopbarProps) {
onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
className="text-muted-foreground"
>
{theme === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />}
{mounted ? (theme === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />) : <div className="h-5 w-5" />}
</Button>
{/* Notifications */}
@@ -142,7 +145,7 @@ export function Topbar({ onMenuClick }: TopbarProps) {
Settings
</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem className="text-destructive">
<DropdownMenuItem className="text-destructive" onClick={logout}>
<LogOut className="mr-2 h-4 w-4" />
Log out
</DropdownMenuItem>
@@ -151,4 +154,4 @@ export function Topbar({ onMenuClick }: TopbarProps) {
</div>
</header>
)
}
}
src/components/leads/lead-form-dialog.tsx
+9 -5
View File
@@ -66,7 +66,7 @@ export function LeadFormDialog({ open, onOpenChange, lead }: LeadFormDialogProps
source: "",
description: "",
status: "open",
assignedUserId: "",
assignedUserId: "none",
},
})
@@ -80,7 +80,7 @@ export function LeadFormDialog({ open, onOpenChange, lead }: LeadFormDialogProps
source: lead.source || "",
description: lead.description || "",
status: lead.status,
assignedUserId: lead.assignedUserId || "",
assignedUserId: lead.assignedUserId || "none",
})
} else {
form.reset({
@@ -91,13 +91,17 @@ export function LeadFormDialog({ open, onOpenChange, lead }: LeadFormDialogProps
source: "",
description: "",
status: "open",
assignedUserId: "",
assignedUserId: "none",
})
}
}, [lead, form])
function onSubmit(values: LeadFormValues) {
console.log(values)
const payload = {
...values,
assignedUserId: values.assignedUserId === "none" ? null : values.assignedUserId,
}
console.log(payload)
onOpenChange(false)
}
@@ -246,7 +250,7 @@ export function LeadFormDialog({ open, onOpenChange, lead }: LeadFormDialogProps
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="">Unassigned</SelectItem>
<SelectItem value="none">Unassigned</SelectItem>
{users.filter(u => u.active).map((user) => (
<SelectItem key={user.id} value={user.id}>
{user.name} ({user.role})
src/components/leads/leads-table-toolbar.tsx
+17 -7
View File
@@ -1,6 +1,5 @@
"use client"
import { useState } from "react"
import { Input } from "@/components/ui/input"
import { Button } from "@/components/ui/button"
import {
@@ -10,14 +9,15 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select"
import { Search, Plus, SlidersHorizontal } from "lucide-react"
import { LeadStatus } from "@/types"
import { Search, Plus } from "lucide-react"
interface LeadsTableToolbarProps {
search: string
onSearchChange: (value: string) => void
statusFilter: string
onStatusFilterChange: (value: string) => void
periodFilter: string
onPeriodFilterChange: (value: string) => void
onCreateClick: () => void
}
@@ -26,6 +26,8 @@ export function LeadsTableToolbar({
onSearchChange,
statusFilter,
onStatusFilterChange,
periodFilter,
onPeriodFilterChange,
onCreateClick,
}: LeadsTableToolbarProps) {
return (
@@ -40,6 +42,18 @@ export function LeadsTableToolbar({
/>
</div>
<div className="flex items-center gap-3">
<Select value={periodFilter} onValueChange={onPeriodFilterChange}>
<SelectTrigger className="h-9 w-[150px]">
<SelectValue placeholder="All Time" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All Time</SelectItem>
<SelectItem value="7days">Last 7 days</SelectItem>
<SelectItem value="30days">Last 30 days</SelectItem>
<SelectItem value="6months">Last 6 months</SelectItem>
<SelectItem value="12months">Last 12 months</SelectItem>
</SelectContent>
</Select>
<Select value={statusFilter} onValueChange={onStatusFilterChange}>
<SelectTrigger className="h-9 w-[140px]">
<SelectValue placeholder="All Statuses" />
@@ -53,10 +67,6 @@ export function LeadsTableToolbar({
<SelectItem value="ignored">Ignored</SelectItem>
</SelectContent>
</Select>
<Button size="sm" variant="outline" className="h-9 gap-2">
<SlidersHorizontal className="h-4 w-4" />
<span className="hidden sm:inline">Filters</span>
</Button>
<Button size="sm" className="h-9 gap-2" onClick={onCreateClick}>
<Plus className="h-4 w-4" />
<span className="hidden sm:inline">Create Lead</span>
src/components/ui/scroll-area.tsx
+4 -4
View File
@@ -14,7 +14,7 @@ const ScrollArea = React.forwardRef<
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
{children}
</ScrollAreaPrimitive.Viewport>
<ScrollBar />
<ScrollBar forceMount />
<ScrollAreaPrimitive.Corner />
</ScrollAreaPrimitive.Root>
))
@@ -28,14 +28,14 @@ const ScrollBar = React.forwardRef<
ref={ref}
orientation={orientation}
className={cn(
"flex touch-none select-none transition-colors",
orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
"flex touch-none select-none transition-opacity",
orientation === "vertical" && "h-full w-3 border-l border-l-transparent p-[1px]",
orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
className
)}
{...props}
>
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-muted-foreground/30" />
</ScrollAreaPrimitive.ScrollAreaScrollbar>
))
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
src/components/users/user-form-dialog.tsx
+5 -3
View File
@@ -55,7 +55,7 @@ export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps
defaultValues: {
name: "",
email: "",
role: "sales",
role: "sales_user",
active: true,
},
})
@@ -69,7 +69,7 @@ export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps
active: user.active,
})
} else {
form.reset({ name: "", email: "", role: "sales", active: true })
form.reset({ name: "", email: "", role: "sales_user", active: true })
}
}, [user, form])
@@ -130,8 +130,10 @@ export function UserFormDialog({ open, onOpenChange, user }: UserFormDialogProps
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="super_admin">Super Admin</SelectItem>
<SelectItem value="admin">Admin</SelectItem>
<SelectItem value="sales">Sales</SelectItem>
<SelectItem value="sales_user">Sales</SelectItem>
<SelectItem value="developer">Developer</SelectItem>
</SelectContent>
</Select>
<FormMessage />