mirror of
https://github.com/harivansh-afk/Saas-Teamspace.git
synced 2026-04-21 19:00:48 +00:00
initial commit
This commit is contained in:
commit
ef9ccf22d3
133 changed files with 20802 additions and 0 deletions
81
app/(root)/(routes)/dashboard/_components/barchart.tsx
Normal file
81
app/(root)/(routes)/dashboard/_components/barchart.tsx
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
'use client'
|
||||
import { useTheme } from 'next-themes'
|
||||
import {
|
||||
BarChart as BarGraph,
|
||||
ResponsiveContainer,
|
||||
XAxis,
|
||||
YAxis,
|
||||
Bar,
|
||||
CartesianGrid,
|
||||
Tooltip,
|
||||
Legend
|
||||
} from 'recharts'
|
||||
import { ChartConfig, ChartContainer } from "@/components/ui/chart"
|
||||
import { light_theme } from '@/lib/theme-constant'
|
||||
import { CandlestickChart } from 'lucide-react'
|
||||
import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
|
||||
|
||||
const chartConfig = {
|
||||
desktop: {
|
||||
label: "Desktop",
|
||||
color: "hsl(var(--primary))",
|
||||
},
|
||||
mobile: {
|
||||
label: "Mobile",
|
||||
color: "hsl(var(--primary))",
|
||||
},
|
||||
} satisfies ChartConfig
|
||||
|
||||
export type BarChartProps = {
|
||||
data: { month: string; total: number }[]
|
||||
}
|
||||
|
||||
export default function BarChart({ data }: BarChartProps) {
|
||||
const { theme } = useTheme()
|
||||
|
||||
return (
|
||||
<div className="bg-secondary dark:bg-secondary/50 shadow flex w-full flex-col gap-3 rounded-lg p-5">
|
||||
<section className="flex justify-between gap-2 pb-2">
|
||||
<p>Sales Data</p>
|
||||
<CandlestickChart className="h-4 w-4" />
|
||||
</section>
|
||||
<ChartContainer config={chartConfig} >
|
||||
<ResponsiveContainer width="100%" height={500}>
|
||||
<BarGraph
|
||||
data={data}
|
||||
margin={{ top: 20, left: -10, right: 10, bottom: 0 }}
|
||||
>
|
||||
<CartesianGrid
|
||||
vertical={false}
|
||||
/>
|
||||
<XAxis
|
||||
dataKey={'month'}
|
||||
tickLine={false}
|
||||
axisLine={true}
|
||||
stroke={`${theme === light_theme ? '#000' : '#fff'}`}
|
||||
fontSize={13}
|
||||
padding={{ left: 0, right: 0 }}
|
||||
/>
|
||||
<ChartTooltip content={<ChartTooltipContent />} />
|
||||
<YAxis
|
||||
tickLine={false}
|
||||
axisLine={true}
|
||||
stroke={`${theme === light_theme ? '#000' : '#fff'}`}
|
||||
fontSize={13}
|
||||
padding={{ top: 0, bottom: 0 }}
|
||||
allowDecimals={false}
|
||||
tickFormatter={(value) => `$${value}`}
|
||||
/>
|
||||
|
||||
<Bar
|
||||
dataKey={'total'}
|
||||
radius={[5, 5, 0, 0]}
|
||||
stroke="hsl(var(--primary))"
|
||||
fill="hsl(var(--primary))"
|
||||
/>
|
||||
</BarGraph>
|
||||
</ResponsiveContainer>
|
||||
</ChartContainer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
44
app/(root)/(routes)/dashboard/_components/dashboard-card.tsx
Normal file
44
app/(root)/(routes)/dashboard/_components/dashboard-card.tsx
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
import { cn } from '@/lib/utils'
|
||||
import { LucideIcon } from 'lucide-react'
|
||||
interface DashboardCardProps {
|
||||
label: string
|
||||
Icon: LucideIcon
|
||||
amount: any
|
||||
description: string
|
||||
}
|
||||
|
||||
export const DashboardCard = ({
|
||||
label,
|
||||
Icon,
|
||||
amount,
|
||||
description
|
||||
}: DashboardCardProps) => {
|
||||
return (
|
||||
<div className="bg-secondary dark:bg-secondary/50 shadow flex w-full flex-col gap-3 rounded-lg p-5">
|
||||
{/* Label & Icon */}
|
||||
<section className="flex justify-between gap-2 text-black dark:text-white">
|
||||
<p className="text-sm">{label}</p>
|
||||
<Icon className="h-4 w-4" />
|
||||
</section>
|
||||
{/* Amount & Description */}
|
||||
<section className="flex flex-col gap-1">
|
||||
<h2 className="text-2lg font-semibold">{amount}</h2>
|
||||
<p className="text-xs">{description}</p>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function DashboardCardContent(
|
||||
props: React.HTMLAttributes<HTMLDivElement>
|
||||
) {
|
||||
return (
|
||||
<div
|
||||
{...props}
|
||||
className={cn(
|
||||
'flex w-full flex-col gap-3 rounded-lg p-5 shadow bg-secondary dark:bg-secondary/50',
|
||||
props.className
|
||||
)}
|
||||
/>
|
||||
)
|
||||
}
|
||||
32
app/(root)/(routes)/dashboard/_components/goal.tsx
Normal file
32
app/(root)/(routes)/dashboard/_components/goal.tsx
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
import { Progress } from '@/components/ui/progress'
|
||||
import { Target } from 'lucide-react'
|
||||
|
||||
export type GoalDataProps = {
|
||||
value: number
|
||||
goal: number
|
||||
}
|
||||
|
||||
export default function GoalDataCard(props: GoalDataProps) {
|
||||
return (
|
||||
<div className="rounded-lg p-5 bg-secondary dark:bg-secondary/50">
|
||||
<section className="flex justify-between gap-2 text-black dark:text-white pb-2">
|
||||
<p>Goal Progress</p>
|
||||
<Target className="h-4 w-4" />
|
||||
</section>
|
||||
<div className="gap-3 pt-2">
|
||||
<section className="flex justify-between gap-3 ">
|
||||
<div className=" w-full rounded-full">
|
||||
<Progress
|
||||
value={props.value}
|
||||
className="border border-primary/20 bg-primary/20 h-2"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
<div className="flex justify-between text-sm opacity-75 pt-3">
|
||||
<p>Goal: ${props.goal}</p>
|
||||
<p className="">${Math.round(props.value)} made</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
93
app/(root)/(routes)/dashboard/_components/line-graph.tsx
Normal file
93
app/(root)/(routes)/dashboard/_components/line-graph.tsx
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
'use client'
|
||||
import { useTheme } from 'next-themes'
|
||||
import {
|
||||
LineChart,
|
||||
Line,
|
||||
XAxis,
|
||||
YAxis,
|
||||
CartesianGrid,
|
||||
ResponsiveContainer,
|
||||
LabelList
|
||||
} from 'recharts'
|
||||
import { light_theme } from '@/lib/theme-constant'
|
||||
import { User } from 'lucide-react'
|
||||
|
||||
import {
|
||||
Card,
|
||||
CardHeader,
|
||||
CardTitle,
|
||||
CardDescription,
|
||||
CardContent,
|
||||
CardFooter
|
||||
} from '@/components/ui/card'
|
||||
import {
|
||||
ChartContainer,
|
||||
ChartTooltip,
|
||||
ChartTooltipContent
|
||||
} from '@/components/ui/chart'
|
||||
|
||||
export type LineGraphProps = {
|
||||
data: { month: string; users: number }[]
|
||||
}
|
||||
|
||||
export default function LineGraph({ data }: LineGraphProps) {
|
||||
const { theme } = useTheme()
|
||||
const chartConfig = {
|
||||
desktop: {
|
||||
label: 'Desktop',
|
||||
color: 'hsl(var(--primary))'
|
||||
},
|
||||
mobile: {
|
||||
label: 'Mobile',
|
||||
color: 'hsl(var(--primary))'
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="border-none bg-secondary dark:bg-secondary/50 shadow">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-md font-normal">Number Of Users</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<ChartContainer config={chartConfig}>
|
||||
<ResponsiveContainer width="100%" height={500}>
|
||||
<LineChart
|
||||
data={data}
|
||||
margin={{ top: 20, left: 12, right: 12, bottom: 0 }}
|
||||
accessibilityLayer
|
||||
>
|
||||
<CartesianGrid vertical={false} />
|
||||
<XAxis
|
||||
dataKey={'month'}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
stroke={`${theme === light_theme ? '#000' : '#fff'}`}
|
||||
tickMargin={8}
|
||||
tickFormatter={(value) => value.slice(0, 3)}
|
||||
/>
|
||||
<ChartTooltip
|
||||
cursor={false}
|
||||
content={<ChartTooltipContent indicator="line" />}
|
||||
/>
|
||||
<Line
|
||||
dataKey="users"
|
||||
type="natural"
|
||||
stroke="hsl(var(--primary))"
|
||||
strokeWidth={2}
|
||||
dot={{ fill: 'hsl(var(--primary))' }}
|
||||
activeDot={{ r: 6 }}
|
||||
>
|
||||
<LabelList
|
||||
position="top"
|
||||
offset={12}
|
||||
className="fill-foreground"
|
||||
fontSize={12}
|
||||
/>
|
||||
</Line>
|
||||
</LineChart>
|
||||
</ResponsiveContainer>
|
||||
</ChartContainer>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
30
app/(root)/(routes)/dashboard/_components/user-data-card.tsx
Normal file
30
app/(root)/(routes)/dashboard/_components/user-data-card.tsx
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
export type UserDataProps = {
|
||||
name: string
|
||||
email: string
|
||||
image: any
|
||||
time: string
|
||||
}
|
||||
|
||||
export default function UserDataCard(props: UserDataProps) {
|
||||
const defaultImage = '/mesh.avif'
|
||||
return (
|
||||
<section className="flex justify-between gap-2 text-foreground">
|
||||
<div className="flex gap-3 h-12 w-12 rounded-full bg-secondary/30">
|
||||
<img
|
||||
width={300}
|
||||
height={300}
|
||||
src={props.image || defaultImage}
|
||||
alt="avatar"
|
||||
className="rounded-full h-12 w-12"
|
||||
/>
|
||||
<div className="text-sm">
|
||||
<p>{props.name}</p>
|
||||
<div className="text-ellipsis overflow-hidden whitespace-nowrap max-w-1/2 sm:w-auto opacity-50">
|
||||
{props.email}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm">{props.time}</p>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
import { CreditCard } from 'lucide-react'
|
||||
|
||||
export type UserPurchaseDataProps = {
|
||||
name: string
|
||||
email: string
|
||||
image: string
|
||||
saleAmount: string
|
||||
}
|
||||
|
||||
export default function UserPurchaseDataCard(props: UserPurchaseDataProps) {
|
||||
const defaultImage = '/mesh.avif'
|
||||
return (
|
||||
<section className="flex justify-between gap-2 text-foreground">
|
||||
<div className="flex gap-3 h-12 w-12 rounded-full bg-secondary/30">
|
||||
<img
|
||||
width={300}
|
||||
height={300}
|
||||
src={props.image || defaultImage}
|
||||
alt="avatar"
|
||||
className="rounded-full h-12 w-12"
|
||||
/>
|
||||
<div className="text-sm">
|
||||
<p>{props.name}</p>
|
||||
<div className="text-ellipsis overflow-hidden whitespace-nowrap max-w-1/2 sm:w-auto opacity-50">
|
||||
{props.email}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm">{props.saleAmount}</p>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue