[IMP][REF] tasks table and calendar

Author: fres-sudo

Diff for: bun.lockb

@@ -32,6 +32,7 @@
 		"@radix-ui/react-avatar": "^1.1.2",
 		"@radix-ui/react-checkbox": "^1.1.3",
 		"@radix-ui/react-collapsible": "^1.1.2",
+		"@radix-ui/react-context-menu": "^2.2.4",
 		"@radix-ui/react-dialog": "^1.1.4",
 		"@radix-ui/react-dropdown-menu": "^2.1.4",
 		"@radix-ui/react-icons": "^1.3.2",
@@ -46,6 +47,8 @@
 		"@radix-ui/react-switch": "^1.1.2",
 		"@radix-ui/react-tabs": "^1.1.2",
 		"@radix-ui/react-toast": "^1.2.4",
+		"@radix-ui/react-toggle": "^1.1.1",
+		"@radix-ui/react-toggle-group": "^1.1.1",
 		"@radix-ui/react-tooltip": "^1.1.6",
 		"@t3-oss/env-nextjs": "^0.11.1",
 		"@tanstack/react-query": "^5.60.5",
@@ -55,6 +58,7 @@
 		"@trpc/react-query": "^11.0.0-rc.638",
 		"@trpc/server": "^11.0.0-rc.638",
 		"@types/bcryptjs": "^2.4.6",
+		"@uidotdev/usehooks": "^2.4.1",
 		"@uploadthing/react": "^7.1.3",
 		"bcryptjs": "^2.4.3",
 		"better-auth": "^1.1.3",
@@ -65,6 +69,7 @@
 		"drizzle-orm": "^0.38.2",
 		"drizzle-zod": "^0.6.1",
 		"framer-motion": "^11.15.0",
+		"lodash.throttle": "^4.1.1",
 		"lucide-react": "^0.469.0",
 		"next": "15.1.2",
 		"next-auth": "4.24.11",
@@ -84,7 +89,8 @@
 		"trpc": "^0.11.3",
 		"uploadthing": "^7.4.1",
 		"vaul": "^1.1.2",
-		"zod": "^3.24.1"
+		"zod": "^3.24.1",
+		"zustand": "^5.0.2"
 	},
 	"devDependencies": {
 		"@types/node": "^22.10.2",

Diff for: package.json

@@ -2,7 +2,7 @@
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Icons } from "@/components/icons";
+// Removed unused import
 import { useState, useEffect } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -20,8 +20,9 @@ import { AlertCircle } from "lucide-react";
 import ProvidersComponent from "./providers";
 import { signIn, useSession } from "@/lib/api/auth/auth-client";
 import { useSearchParams } from "next/navigation";
-import { se } from "date-fns/locale";
+// Removed unused import
 import LoadingIcon from "@/components/loading-icon";
+import { api } from "@/trpc/react";
 
 const loginSchema = z.object({
 	email: z.string().email(),
@@ -63,7 +64,7 @@ export function LoginForm() {
 	async function onSubmit(input: LoginScheme) {
 		setIsLoading(true);
 		setError(null);
-		const { data, error } = await signIn.email(
+		const { error } = await signIn.email(
 			{
 				email: input.email,
 				password: input.password,
@@ -99,7 +100,8 @@ export function LoginForm() {
 								<FormControl>
 									<Input
 										placeholder="[email protected]"
-										{...field}
+										value={field.value || ""}
+										onChange={field.onChange}
 									/>
 								</FormControl>
 								<FormMessage />
@@ -116,7 +118,8 @@ export function LoginForm() {
 									<Input
 										type="password"
 										placeholder="••••••••"
-										{...field}
+										value={field.value || ""}
+										onChange={field.onChange}
 									/>
 								</FormControl>
 								<FormMessage />

Diff for: src/app/(auth)/_components/login.form.tsx

@@ -2,6 +2,7 @@
 import { Icons } from "@/components/icons";
 import { Button } from "@/components/ui/button";
 import { signIn, signUp } from "@/lib/api/auth/auth-client";
+import { api } from "@/trpc/react";
 
 const ProvidersComponent = () => {
 	return (

Diff for: src/app/(auth)/_components/providers.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { useWorkspace } from "@/hooks/use-workspace";
+
+export const PageTitle = () => {
+	const { currentWorkspace } = useWorkspace();
+	return (
+		<h2 className="text-2xl font-bold tracking-tight">
+			<span className="font-normal">Analytics for:</span>{" "}
+			{currentWorkspace?.name} 📊
+			<p className="text-sm text-muted-foreground font-thin">
+				Get comprehensive insights into your workspace performance with
+				real-time analytics, project progress tracking, and team productivity
+				metrics at a glance.
+			</p>
+		</h2>
+	);
+};

Diff for: src/app/(dashboard)/analytics/components/title.tsx

@@ -10,18 +10,18 @@ import TimeSpentChart from "./components/TimeSpentChart";
 import { api } from "@/trpc/server";
 import { TaskDistributionChart } from "./components/TaskDistributionChart";
 import PageContainer from "@/components/layout/page-container";
+import { a } from "node_modules/better-auth/dist/auth-CfxMSdnJ";
+import { PageTitle } from "./components/title";
 
 export default async function AnalyticsPage() {
 	const [
-		currentWorkspace,
 		projectCompletionData,
 		memberProductivityData,
 		upcomingDeadlinesData,
 		taskPriorityData,
 		taskDistributionData,
 		timeSpentData,
 	] = await Promise.all([
-		api.workspaces.getCurrent(),
 		api.analytics.getProjectCompletion(),
 		api.analytics.getMemberProductivity(),
 		api.analytics.getUpcomingDeadlines(),
@@ -34,17 +34,8 @@ export default async function AnalyticsPage() {
 		<PageContainer>
 			<div className="flex flex-col space-y-4">
 				<Suspense fallback={<Skeleton className="h-8 w-[300px]" />}>
-					<h2 className="text-2xl font-bold tracking-tight">
-						<span className="font-normal">Analytics for:</span>{" "}
-						{currentWorkspace?.name} 📊
-						<p className="text-sm text-muted-foreground font-thin">
-							Get comprehensive insights into your workspace performance with
-							real-time analytics, project progress tracking, and team
-							productivity metrics at a glance.
-						</p>
-					</h2>
+					<PageTitle />
 				</Suspense>
-
 				<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
 					<Suspense fallback={<ChartSkeleton />}>
 						<ProjectCompletionChart data={projectCompletionData} />

Diff for: src/app/(dashboard)/analytics/page.tsx

@@ -112,7 +112,7 @@ const MembersTable: React.FC<MembersTableProps> = ({
 	};
 
 	return (
-		<div className="space-y-4">
+		<div className="space-y-4 mb-2">
 			<div className="flex flex-col sm:flex-row justify-between gap-4">
 				<div className="flex items-center gap-2 flex-1">
 					<Search className="h-4 w-4 text-muted-foreground" />

Diff for: src/app/(dashboard)/projects/[projectId]/_components/members/members-table.tsx

@@ -33,7 +33,7 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "@/components/ui/select";
-import { Loader2, Settings } from "lucide-react";
+import { Settings } from "lucide-react";
 import { api } from "@/trpc/react";
 import { toast } from "sonner";
 import DeleteEntityDialog from "@/components/delete-entity-confirmation-dialog";

Diff for: src/app/(dashboard)/projects/[projectId]/_components/project-settings-dialog.tsx

@@ -1,5 +1,35 @@
-const CalendarProjectsTask = () => {
-	return <>Calendar</>;
+"use client";
+import Calendar from "@/components/calendar/calendar";
+import { CalendarEvent, Mode } from "@/components/calendar/calendar-types";
+import { api } from "@/trpc/react";
+import { useParams } from "next/navigation";
+import { useState } from "react";
+import { TasksProps } from "./projects-tasks";
+
+const CalendarProjectsTask = ({ tasks }: { tasks: TasksProps }) => {
+	const { projectId } = useParams<{ projectId: string }>();
+
+	const [mode, setMode] = useState<Mode>("month");
+	const [date, setDate] = useState<Date>(new Date());
+
+	const { data } = api.tasks.listCalendar.useQuery({
+		projectId: projectId,
+		mode: mode,
+		from: date,
+		to: date,
+	});
+	const [events, setEvents] = useState<CalendarEvent[]>(data || []);
+
+	return (
+		<Calendar
+			events={events}
+			setEvents={setEvents}
+			mode={mode}
+			setMode={setMode}
+			date={date}
+			setDate={setDate}
+		/>
+	);
 };
 
 export default CalendarProjectsTask;

Diff for: src/app/(dashboard)/projects/[projectId]/_components/tasks/calendar-projects-task.tsx

@@ -37,6 +37,9 @@ import SelectMultipleMembersDropdown from "@/components/select-multiple-members-
 import SelectOrCreateLabel from "@/components/select-or-create-label";
 import SelectSingleMemberDropdown from "@/components/select-single-member-dropdown";
 import LoadingIcon from "@/components/loading-icon";
+import { CalendarDateRangePicker } from "@/components/ui/calendar-date-range-picker";
+import { DateRange } from "react-day-picker";
+import { addDays } from "date-fns";
 
 interface UpdateTaskSheetProps
 	extends React.ComponentPropsWithRef<typeof Sheet> {}
@@ -51,12 +54,20 @@ export function CreateTaskSheet({ ...props }: UpdateTaskSheetProps) {
 	const [assignee, setAssignee] = React.useState<string | null>();
 	const [reviewer, setReviewer] = React.useState<string>();
 	const [labels, setLabels] = React.useState<LabelType[]>([]);
+	const [date, setDate] = React.useState<DateRange | undefined>({
+		from: addDays(new Date(), -30),
+		to: new Date(),
+	});
 
 	const [isUpdatePending, startUpdateTransition] = React.useTransition();
 
 	async function onSubmit(input: NewTask) {
 		startUpdateTransition(async () => {
-			const newTodo = await createTaskMutation.mutateAsync(input);
+			const newTodo = await createTaskMutation.mutateAsync({
+				assigneeId: assignee,
+				reviewerId: reviewer,
+				...input,
+			});
 			form.reset();
 			props.onOpenChange?.(false);
 			if (newTodo) {
@@ -133,13 +144,22 @@ export function CreateTaskSheet({ ...props }: UpdateTaskSheetProps) {
 								</FormItem>
 							)}
 						/>
+						<FormLabel>From - To</FormLabel>
+						<CalendarDateRangePicker
+							date={date}
+							setDate={setDate}
+						/>
 						<SelectOrCreateLabel
 							onLabelSelect={(labels) => setLabels(labels)}
 						/>
 						<SelectSingleMemberDropdown
-							title="Select Assignee"
+							title="Assignee"
 							onMemberChange={(member) => setAssignee(member?.id)}
 						/>
+						<SelectSingleMemberDropdown
+							title="Select Reviewer"
+							onMemberChange={(member) => setReviewer(member?.id)}
+						/>
 						<SheetFooter className="gap-2 pt-2 sm:space-x-0">
 							<SheetClose asChild>
 								<Button

Diff for: src/app/(dashboard)/projects/[projectId]/_components/tasks/create-task-sheet.tsx

@@ -10,8 +10,13 @@ import { useState } from "react";
 import { addDays } from "date-fns";
 import { DateRange } from "react-day-picker";
 import { CreateTaskSheet } from "./create-task-sheet";
+import { RouterOutputs } from "@/trpc/react";
 
-const ProjectTasks = () => {
+export type TasksProps = NonNullable<
+	Awaited<RouterOutputs["projects"]["get"]>
+>["tasks"];
+
+const ProjectTasks = ({ tasks }: { tasks: TasksProps }) => {
 	const [date, setDate] = useState<DateRange | undefined>({
 		from: addDays(new Date(), -30),
 		to: new Date(),
@@ -20,14 +25,13 @@ const ProjectTasks = () => {
 		<>
 			<Tabs defaultValue="table">
 				<div className="flex justify-between w-full">
-					<TabsList className="grid  grid-cols-3 w-56">
+					<TabsList className="grid grid-cols-3 w-56">
 						<TabsTrigger value="table">Table</TabsTrigger>
 						<TabsTrigger value="kanban">Kanban</TabsTrigger>
 						<TabsTrigger value="calendar">Calendar</TabsTrigger>
 					</TabsList>
 					<div className="flex gap-x-2">
 						<CalendarDateRangePicker
-							className="w-56 "
 							date={date}
 							setDate={setDate}
 						/>
@@ -36,13 +40,13 @@ const ProjectTasks = () => {
 				</div>
 
 				<TabsContent value="table">
-					<TableProjectsTask />
+					<TableProjectsTask tasks={tasks} />
 				</TabsContent>
 				<TabsContent value="kanban">
 					<KanbanProjectsTask />
 				</TabsContent>
 				<TabsContent value="calendar">
-					<CalendarProjectsTask />
+					<CalendarProjectsTask tasks={tasks} />
 				</TabsContent>
 			</Tabs>
 		</>

Diff for: src/app/(dashboard)/projects/[projectId]/_components/tasks/projects-tasks.tsx

@@ -1,5 +1,14 @@
-const TableProjectsTask = () => {
-	return <>table</>;
-};
+import { TasksProps } from "./projects-tasks";
+import { TaskTable } from "./table/TaskTable";
+import { columns } from "./table/TaskTableColumns";
 
-export default TableProjectsTask;
+export default function TasksPage({ tasks }: { tasks: TasksProps }) {
+	return (
+		<div className="mx-auto py-10">
+			<TaskTable
+				data={tasks}
+				columns={columns}
+			/>
+		</div>
+	);
+}