mirror of
https://github.com/harivansh-afk/Saas-Teamspace.git
synced 2026-04-22 01:02:23 +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>
|
||||
)
|
||||
}
|
||||
9
app/(root)/(routes)/dashboard/layout.tsx
Normal file
9
app/(root)/(routes)/dashboard/layout.tsx
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
const DashboardLayout = ({ children }: { children: React.ReactNode }) => {
|
||||
return (
|
||||
<main className="max-w-6xl w-full flex items-center justify-center px-6">
|
||||
{children}
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
export default DashboardLayout
|
||||
300
app/(root)/(routes)/dashboard/page.tsx
Normal file
300
app/(root)/(routes)/dashboard/page.tsx
Normal file
|
|
@ -0,0 +1,300 @@
|
|||
import { Metadata } from 'next'
|
||||
import {
|
||||
Calendar,
|
||||
CheckCircle2,
|
||||
Clock,
|
||||
ListTodo,
|
||||
Plus,
|
||||
UserRoundCheck
|
||||
} from 'lucide-react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Card } from '@/components/ui/card'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
|
||||
import { auth } from '@/auth'
|
||||
import { redirect } from 'next/navigation'
|
||||
import { db } from '@/lib/db'
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Dashboard',
|
||||
description: 'Task management and team collaboration dashboard'
|
||||
}
|
||||
|
||||
export default async function DashboardPage() {
|
||||
const session = await auth()
|
||||
|
||||
if (!session) {
|
||||
redirect('/login')
|
||||
}
|
||||
|
||||
// Fetch tasks (placeholder - implement actual DB queries)
|
||||
const tasks = [
|
||||
{ id: 1, title: 'Design new landing page', status: 'In Progress', dueDate: '2023-12-01', progress: 60 },
|
||||
{ id: 2, title: 'Implement authentication', status: 'Todo', dueDate: '2023-12-05', progress: 0 },
|
||||
{ id: 3, title: 'Write documentation', status: 'Done', dueDate: '2023-11-30', progress: 100 }
|
||||
]
|
||||
|
||||
return (
|
||||
<div className="flex-1 space-y-4 p-4 md:p-8 pt-6">
|
||||
<div className="flex items-center justify-between space-y-2">
|
||||
<h2 className="text-3xl font-bold tracking-tight">Dashboard</h2>
|
||||
<div className="flex items-center space-x-2">
|
||||
<Button>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Add New Task
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Tabs defaultValue="overview" className="space-y-4">
|
||||
<TabsList>
|
||||
<TabsTrigger value="overview">Overview</TabsTrigger>
|
||||
<TabsTrigger value="tasks">Tasks</TabsTrigger>
|
||||
<TabsTrigger value="calendar">Calendar</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="overview" className="space-y-4">
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
||||
<Card className="p-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<ListTodo className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">Total Tasks</span>
|
||||
</div>
|
||||
<div className="text-2xl font-bold">12</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card className="p-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<Clock className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">In Progress</span>
|
||||
</div>
|
||||
<div className="text-2xl font-bold">4</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card className="p-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<CheckCircle2 className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">Completed</span>
|
||||
</div>
|
||||
<div className="text-2xl font-bold">8</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Card className="p-4">
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center space-x-2">
|
||||
<UserRoundCheck className="h-4 w-4 text-muted-foreground" />
|
||||
<span className="text-sm font-medium">Team Members</span>
|
||||
</div>
|
||||
<div className="text-2xl font-bold">6</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-7">
|
||||
<Card className="col-span-4">
|
||||
<div className="p-6">
|
||||
<h3 className="text-lg font-medium">Recent Tasks</h3>
|
||||
<div className="mt-4 space-y-4">
|
||||
{tasks.map(task => (
|
||||
<div key={task.id} className="flex items-center justify-between border-b pb-4">
|
||||
<div>
|
||||
<h4 className="font-medium">{task.title}</h4>
|
||||
<p className="text-sm text-muted-foreground">Due: {task.dueDate}</p>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<span className="text-sm">{task.status}</span>
|
||||
<div className="h-2 w-24 bg-gray-200 rounded-full">
|
||||
<div
|
||||
className="h-full bg-blue-500 rounded-full"
|
||||
style={{ width: `${task.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<Card className="col-span-3">
|
||||
<div className="p-6">
|
||||
<h3 className="text-lg font-medium">Upcoming Deadlines</h3>
|
||||
<div className="mt-4 space-y-4">
|
||||
<div className="flex items-center space-x-4">
|
||||
<Calendar className="h-4 w-4 text-muted-foreground" />
|
||||
<div>
|
||||
<p className="font-medium">Design Review</p>
|
||||
<p className="text-sm text-muted-foreground">Tomorrow at 2:00 PM</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<Calendar className="h-4 w-4 text-muted-foreground" />
|
||||
<div>
|
||||
<p className="font-medium">Team Meeting</p>
|
||||
<p className="text-sm text-muted-foreground">Friday at 10:00 AM</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="tasks" className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h3 className="text-lg font-medium">All Tasks</h3>
|
||||
<Button>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
New Task
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
||||
{/* Todo Column */}
|
||||
<Card className="p-4">
|
||||
<h4 className="font-medium mb-4 flex items-center">
|
||||
<ListTodo className="h-4 w-4 mr-2" />
|
||||
Todo
|
||||
</h4>
|
||||
<div className="space-y-4">
|
||||
{tasks.filter(t => t.status === 'Todo').map(task => (
|
||||
<Card key={task.id} className="p-3">
|
||||
<h5 className="font-medium">{task.title}</h5>
|
||||
<p className="text-sm text-muted-foreground mt-1">Due: {task.dueDate}</p>
|
||||
<div className="mt-3 h-1.5 w-full bg-gray-100 rounded-full">
|
||||
<div
|
||||
className="h-full bg-blue-500 rounded-full"
|
||||
style={{ width: `${task.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* In Progress Column */}
|
||||
<Card className="p-4">
|
||||
<h4 className="font-medium mb-4 flex items-center">
|
||||
<Clock className="h-4 w-4 mr-2" />
|
||||
In Progress
|
||||
</h4>
|
||||
<div className="space-y-4">
|
||||
{tasks.filter(t => t.status === 'In Progress').map(task => (
|
||||
<Card key={task.id} className="p-3">
|
||||
<h5 className="font-medium">{task.title}</h5>
|
||||
<p className="text-sm text-muted-foreground mt-1">Due: {task.dueDate}</p>
|
||||
<div className="mt-3 h-1.5 w-full bg-gray-100 rounded-full">
|
||||
<div
|
||||
className="h-full bg-blue-500 rounded-full"
|
||||
style={{ width: `${task.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* Done Column */}
|
||||
<Card className="p-4">
|
||||
<h4 className="font-medium mb-4 flex items-center">
|
||||
<CheckCircle2 className="h-4 w-4 mr-2" />
|
||||
Done
|
||||
</h4>
|
||||
<div className="space-y-4">
|
||||
{tasks.filter(t => t.status === 'Done').map(task => (
|
||||
<Card key={task.id} className="p-3">
|
||||
<h5 className="font-medium">{task.title}</h5>
|
||||
<p className="text-sm text-muted-foreground mt-1">Due: {task.dueDate}</p>
|
||||
<div className="mt-3 h-1.5 w-full bg-gray-100 rounded-full">
|
||||
<div
|
||||
className="h-full bg-blue-500 rounded-full"
|
||||
style={{ width: `${task.progress}%` }}
|
||||
/>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="calendar" className="space-y-4">
|
||||
<div className="flex justify-between items-center">
|
||||
<h3 className="text-lg font-medium">Calendar</h3>
|
||||
<Button variant="outline">
|
||||
<Calendar className="mr-2 h-4 w-4" />
|
||||
Select Date
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid gap-4">
|
||||
<Card className="p-6">
|
||||
<div className="space-y-6">
|
||||
{/* Today's Schedule */}
|
||||
<div>
|
||||
<h4 className="font-medium mb-4">Today's Schedule</h4>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-14 text-sm text-muted-foreground">09:00 AM</div>
|
||||
<div className="flex-1">
|
||||
<Card className="p-3">
|
||||
<h5 className="font-medium">Team Standup</h5>
|
||||
<p className="text-sm text-muted-foreground">Daily team sync meeting</p>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-14 text-sm text-muted-foreground">02:00 PM</div>
|
||||
<div className="flex-1">
|
||||
<Card className="p-3">
|
||||
<h5 className="font-medium">Design Review</h5>
|
||||
<p className="text-sm text-muted-foreground">Review new landing page design</p>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-14 text-sm text-muted-foreground">04:30 PM</div>
|
||||
<div className="flex-1">
|
||||
<Card className="p-3">
|
||||
<h5 className="font-medium">Sprint Planning</h5>
|
||||
<p className="text-sm text-muted-foreground">Plan next sprint tasks</p>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Upcoming Events */}
|
||||
<div>
|
||||
<h4 className="font-medium mb-4">Upcoming Events</h4>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-20 text-sm text-muted-foreground">Tomorrow</div>
|
||||
<div className="flex-1">
|
||||
<Card className="p-3">
|
||||
<h5 className="font-medium">Client Meeting</h5>
|
||||
<p className="text-sm text-muted-foreground">10:00 AM - Project update discussion</p>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div className="w-20 text-sm text-muted-foreground">Friday</div>
|
||||
<div className="flex-1">
|
||||
<Card className="p-3">
|
||||
<h5 className="font-medium">Team Building</h5>
|
||||
<p className="text-sm text-muted-foreground">02:00 PM - Virtual team activity</p>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue