✨ New and Improved Screens (#1151)

packages/backend/package.json

@@ -10,6 +10,7 @@
   "types": "src/index.ts",
   "dependencies": {
     "@rallly/database": "*",
+    "@rallly/features": "*",
     "@rallly/emails": "*",
     "@rallly/utils": "*",
     "@trpc/server": "^10.13.0",

packages/backend/trpc/routers/dashboard.ts

@@ -0,0 +1,17 @@
+import { prisma } from "@rallly/database";
+
+import { possiblyPublicProcedure, router } from "../trpc";
+
+export const dashboard = router({
+  info: possiblyPublicProcedure.query(async ({ ctx }) => {
+    const activePollCount = await prisma.poll.count({
+      where: {
+        userId: ctx.user.id,
+        status: "live",
+        deleted: false, // TODO (Luke Vella) [2024-06-16]: We should add deleted/cancelled to the status enum
+      },
+    });
+
+    return { activePollCount };
+  }),
+});

packages/backend/trpc/routers/index.ts

@@ -1,13 +1,26 @@
+import dayjs from "dayjs";
+import timezone from "dayjs/plugin/timezone";
+import toArray from "dayjs/plugin/toArray";
+import utc from "dayjs/plugin/utc";
+
 import { mergeRouters, router } from "../trpc";
 import { auth } from "./auth";
+import { dashboard } from "./dashboard";
 import { polls } from "./polls";
+import { scheduledEvents } from "./scheduled-events";
 import { user } from "./user";
 
+dayjs.extend(toArray); // used for creating ics
+dayjs.extend(timezone);
+dayjs.extend(utc);
+
 export const appRouter = mergeRouters(
   router({
+    scheduledEvents,
     auth,
     polls,
     user,
+    dashboard,
   }),
 );
 

packages/backend/trpc/routers/polls.ts

@@ -1,10 +1,7 @@
-import { prisma } from "@rallly/database";
+import { PollStatus, prisma } from "@rallly/database";
 import { TRPCError } from "@trpc/server";
 import { waitUntil } from "@vercel/functions";
 import dayjs from "dayjs";
-import timezone from "dayjs/plugin/timezone";
-import toArray from "dayjs/plugin/toArray";
-import utc from "dayjs/plugin/utc";
 import * as ics from "ics";
 import { z } from "zod";
 
@@ -19,10 +16,6 @@ import {
 import { comments } from "./polls/comments";
 import { participants } from "./polls/participants";
 
-dayjs.extend(toArray);
-dayjs.extend(timezone);
-dayjs.extend(utc);
-
 const getPollIdFromAdminUrlId = async (urlId: string) => {
   const res = await prisma.poll.findUnique({
     select: {
@@ -43,6 +36,64 @@ const getPollIdFromAdminUrlId = async (urlId: string) => {
 export const polls = router({
   participants,
   comments,
+  getCountByStatus: possiblyPublicProcedure.query(async ({ ctx }) => {
+    const res = await prisma.poll.groupBy({
+      by: ["status"],
+      where: {
+        userId: ctx.user.id,
+        deleted: false,
+      },
+      _count: {
+        status: true,
+      },
+    });
+
+    return res.reduce(
+      (acc, { status, _count }) => {
+        acc[status] = _count.status;
+        return acc;
+      },
+      {} as Record<PollStatus, number>,
+    );
+  }),
+  list: possiblyPublicProcedure
+    .input(
+      z.object({
+        status: z.enum(["all", "live", "paused", "finalized"]),
+      }),
+    )
+    .query(async ({ ctx, input }) => {
+      return await prisma.poll.findMany({
+        where: {
+          userId: ctx.user.id,
+          status: input.status === "all" ? undefined : input.status,
+        },
+        orderBy: [
+          {
+            createdAt: "desc",
+          },
+          {
+            title: "asc",
+          },
+        ],
+        select: {
+          id: true,
+          title: true,
+          location: true,
+          timeZone: true,
+          createdAt: true,
+          status: true,
+          userId: true,
+          participants: {
+            select: {
+              id: true,
+              name: true,
+            },
+          },
+        },
+      });
+    }),
+
   // START LEGACY ROUTES
   create: possiblyPublicProcedure
     .input(

packages/backend/trpc/routers/scheduled-events.ts

@@ -0,0 +1,33 @@
+import { listScheduledEvents } from "@rallly/features/scheduled-events/api";
+import dayjs from "dayjs";
+import timezone from "dayjs/plugin/timezone";
+import toArray from "dayjs/plugin/toArray";
+import utc from "dayjs/plugin/utc";
+import { z } from "zod";
+
+import { possiblyPublicProcedure, router } from "../trpc";
+
+dayjs.extend(toArray);
+dayjs.extend(timezone);
+dayjs.extend(utc);
+
+export const scheduledEvents = router({
+  list: possiblyPublicProcedure
+    .input(
+      z.object({
+        period: z.enum(["upcoming", "past"]).default("upcoming"),
+      }),
+    )
+    .query(async ({ input, ctx }) => {
+      const events = await listScheduledEvents({
+        userId: ctx.user.id,
+        period: input.period,
+      });
+
+      return events.map(({ poll, ...event }) => ({
+        ...event,
+        timeZone: poll?.timeZone || null,
+        participants: poll?.participants ?? [],
+      }));
+    }),
+});

packages/database/index.ts

@@ -1,13 +1,31 @@
-import { PrismaClient } from "@rallly/database";
+import { PrismaClient } from "@prisma/client";
 
-export * from "@prisma/client";
+export type * from "@prisma/client";
 
-declare global {
-  // allow global `var` declarations
-  // eslint-disable-next-line no-var
-  var prisma: PrismaClient | undefined;
-}
+const prismaClientSingleton = () => {
+  return new PrismaClient().$extends({
+    query: {
+      poll: {
+        findMany: ({ args, query }) => {
+          if (!args.where?.deleted) {
+            args.where = { ...args.where, deleted: false };
+          }
 
-export const prisma = global.prisma || new PrismaClient();
+          return query(args);
+        },
+      },
+    },
+  });
+};
 
-if (process.env.NODE_ENV !== "production") global.prisma = prisma;
+export type ExtendedPrismaClient = ReturnType<typeof prismaClientSingleton>;
+
+declare const globalThis: {
+  prismaGlobal: ExtendedPrismaClient;
+} & typeof global;
+
+const prisma = globalThis.prismaGlobal ?? prismaClientSingleton();
+
+export { prisma };
+
+if (process.env.NODE_ENV !== "production") globalThis.prismaGlobal = prisma;

packages/database/package.json

@@ -9,13 +9,12 @@
     "db:migrate": "prisma migrate dev",
     "db:seed": "tsx prisma/seed.ts"
   },
-  "main": "./index.ts",
-  "types": "./index.ts",
+  "exports": "./index.ts",
   "devDependencies": {
     "@faker-js/faker": "^7.6.0",
     "@rallly/tsconfig": "*",
     "@types/node": "^18.15.10",
-    "prisma": "^5.3.1",
+    "prisma": "^5.15.0",
     "tsx": "^4.6.2"
   }
 }

packages/database/prisma/schema.prisma

@@ -159,7 +159,7 @@ model Event {
   duration  Int      @default(0) @map("duration_minutes")
   createdAt DateTime @default(now()) @map("created_at")
 
-  Poll      Poll?
+  poll      Poll?
 
   @@index([userId], type: Hash)
   @@map("events")

packages/database/prisma/seed.ts

@@ -11,7 +11,7 @@ const randInt = (max = 1, floor = 0) => {
 async function createPollsForUser(userId: string) {
   // Create some polls
   const polls = await Promise.all(
-    Array.from({ length: 20 }).map(async (_, i) => {
+    Array.from({ length: 5 }).map(async (_, i) => {
       // create some polls with no duration (all day) and some with a random duration.
       const duration = i % 2 === 0 ? 60 * randInt(8, 1) : 0;
       let cursor = dayjs().add(randInt(30), "day").second(0).minute(0);
@@ -25,7 +25,7 @@ async function createPollsForUser(userId: string) {
         },
         data: {
           id: faker.random.alpha(10),
-          title: `${faker.animal.cat()} meetup - ${faker.date.month()}`,
+          title: `${faker.animal.cat()} Meetup ${faker.date.month()}`,
           description: faker.lorem.paragraph(),
           location: faker.address.streetAddress(),
           deadline: faker.date.future(),
@@ -34,7 +34,7 @@ async function createPollsForUser(userId: string) {
               id: userId,
             },
           },
-          timeZone: duration !== 0 ? "America/New_York" : undefined,
+          timeZone: duration !== 0 ? "Europe/London" : undefined,
           options: {
             create: Array.from({ length: numberOfOptions }).map(() => {
               const startTime = cursor.toDate();

packages/features/index.ts

@@ -0,0 +1,3 @@
+export default function () {
+  return null;
+}

packages/features/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@rallly/features",
+  "private": true,
+  "main": "index.ts",
+  "version": "0.0.0"
+}

packages/features/scheduled-events/api.ts

@@ -0,0 +1,49 @@
+import { prisma } from "@rallly/database";
+
+export type EventPeriod = "upcoming" | "past";
+
+/**
+ * List upcoming events for a user grouped by day
+ * @param userId
+ */
+export async function listScheduledEvents({
+  userId,
+  period,
+}: {
+  userId: string;
+  period: EventPeriod;
+}) {
+  const events = await prisma.event.findMany({
+    select: {
+      id: true,
+      title: true,
+      start: true,
+      duration: true,
+      poll: {
+        select: {
+          timeZone: true,
+          participants: {
+            select: {
+              id: true,
+              name: true,
+            },
+          },
+        },
+      },
+    },
+    where: {
+      userId,
+      start: period === "upcoming" ? { gte: new Date() } : { lt: new Date() },
+    },
+    orderBy: [
+      {
+        start: "desc",
+      },
+      {
+        title: "asc",
+      },
+    ],
+  });
+
+  return events;
+}

packages/features/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@rallly/tsconfig/next.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"],
+}

packages/icons/package.json

@@ -6,6 +6,6 @@
   "types": "src/index.ts",
   "dependencies": {
     "@heroicons/react": "^1.0.6",
-    "lucide-react": "^0.338.0"
+    "lucide-react": "^0.387.0"
   }
 }

packages/tailwind-config/tailwind.config.js

@@ -27,14 +27,14 @@ module.exports = {
         secondary: {
           background: colors.gray["100"],
           DEFAULT: colors.gray["100"],
-          foreground: colors.gray["800"],
+          foreground: colors.gray["700"],
         },
         gray: colors.gray,
         border: colors.gray["200"],
         input: {
           DEFAULT: colors.gray["200"],
           background: colors.white,
-          foreground: colors.gray["800"],
+          foreground: colors.gray["700"],
         },
         ring: {
           DEFAULT: colors.gray["300"],
@@ -45,7 +45,7 @@ module.exports = {
           foreground: colors.rose["50"],
         },
         background: colors.white,
-        foreground: colors.gray["800"],
+        foreground: colors.gray["700"],
         accent: {
           DEFAULT: colors.gray["100"],
         },
@@ -56,12 +56,12 @@ module.exports = {
         },
         popover: {
           DEFAULT: colors.white,
-          foreground: colors.gray["800"],
+          foreground: colors.gray["700"],
         },
         card: {
           DEFAULT: colors.white,
           background: colors.white,
-          foreground: colors.gray["800"],
+          foreground: colors.gray["700"],
         },
       },
       keyframes: {

packages/ui/src/badge.tsx

@@ -16,7 +16,7 @@ const badgeVariants = cva(
         green: "border-transparent bg-green-500 text-green-50",
       },
       size: {
-        md: "h-5 min-w-5 text-xs px-1.5",
+        md: "h-6 min-w-5 text-xs px-2",
         lg: "h-7 text-sm min-w-7 px-2.5",
       },
     },

packages/ui/src/button.tsx

@@ -7,27 +7,27 @@ import { cn } from "./lib/utils";
 
 const buttonVariants = cva(
   cn(
-    "inline-flex border font-medium disabled:pointer-events-none select-none disabled:opacity-50 items-center justify-center whitespace-nowrap rounded-md border",
-    "focus-visible:ring-offset-input-background focus-visible:ring-offset-1 focus-visible:ring-2 focus-visible:ring-gray-200",
-    "active:shadow-none",
+    "inline-flex border font-medium disabled:pointer-events-none select-none disabled:opacity-50 items-center justify-center whitespace-nowrap border",
+    "focus-visible:ring-offset-input-background",
+    "focus:shadow-none",
   ),
   {
     variants: {
       variant: {
         primary:
-          "border-primary-700 shadow-sm bg-primary disabled:bg-gray-400 disabled:border-transparent text-primary-foreground shadow-sm hover:bg-primary-500 active:bg-primary-700",
+          "border-primary-700 bg-primary disabled:bg-gray-400 disabled:border-transparent text-primary-foreground shadow-sm focus:bg-primary-500",
         destructive:
           "bg-destructive shadow-sm text-destructive-foreground focus-visible:ring-offset-1 active:bg-destructive border-destructive hover:bg-destructive/90",
         default:
-          "rounded-md px-3.5 py-2.5 data-[state=open]:shadow-none data-[state=open]:bg-gray-100 active:bg-gray-200 hover:bg-gray-100 bg-gray-50",
+          "ring-1 ring-inset ring-white/25 data-[state=open]:bg-gray-100 focus:border-gray-300 focus:bg-gray-200 hover:bg-gray-100 bg-gray-50",
         secondary:
           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost:
-          "border-transparent bg-transparent hover:bg-gray-200 active:bg-gray-300",
+          "border-transparent bg-transparent text-gray-800 focus:border-gray-300 focus:bg-gray-200",
         link: "underline-offset-4 border-transparent hover:underline text-primary",
       },
       size: {
-        default: "h-9 px-2.5 gap-x-2.5 text-sm",
+        default: "h-9 px-2.5 pr-3 gap-x-2 text-sm rounded-md",
         sm: "h-7 text-sm px-1.5 gap-x-1.5 rounded-md",
         lg: "h-11 text-base gap-x-3 px-4 rounded-md",
       },

packages/ui/src/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "bg-card text-card-foreground overflow-hidden rounded-lg border shadow-sm",
+      "bg-card text-card-foreground overflow-hidden rounded-lg border-x border-y shadow-sm",
       className,
     )}
     {...props}
@@ -39,7 +39,7 @@ const CardTitle = React.forwardRef<
   <h3
     ref={ref}
     className={cn(
-      "flex items-center gap-x-2.5 text-sm font-semibold sm:text-base",
+      "flex items-center gap-x-2.5 text-base font-semibold",
       className,
     )}
     {...props}
@@ -53,7 +53,7 @@ const CardDescription = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-muted-foreground mt-1 text-sm", className)}
+    className={cn("text-muted-foreground mt-0.5 text-sm", className)}
     {...props}
   />
 ));

packages/ui/src/checkbox.tsx

@@ -12,9 +12,8 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "data-[state=checked]:bg-primary data-[state=checked]:border-primary-600 data-[state=checked]:focus:ring-primary-200 data-[state=checked]:focus:ring-2",
-      "focus-visible:ring-gray-100",
-      "peer inline-flex h-5 w-5 shrink-0 items-center justify-center rounded border border-gray-200 bg-gray-50 ring-0 disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=checked]:bg-primary data-[state=checked]:border-primary-600",
+      "peer inline-flex size-5 shrink-0 items-center justify-center rounded border border-gray-200 bg-gray-50 ring-0 disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
     {...props}

packages/ui/src/icon.tsx

@@ -33,7 +33,7 @@ export function Icon({ children, size, variant }: IconProps) {
     <Slot
       className={cn(
         iconVariants({ size, variant }),
-        "group-[.bg-primary]:text-primary-100 group-[.bg-destructive]:text-destructive-foreground group shrink-0",
+        "group-[.bg-primary]:text-primary-50 group-[.bg-destructive]:text-destructive-foreground group shrink-0",
       )}
     >
       {children}

packages/ui/src/input.tsx

@@ -14,7 +14,7 @@ export type InputProps = Omit<
 const inputVariants = cva(
   cn(
     "w-full focus-visible:border-primary-400 focus-visible:ring-offset-1 focus-visible:outline-none focus-visible:ring-primary-200 focus-visible:ring-1",
-    "border-input placeholder:text-muted-foreground h-9 rounded border bg-gray-50 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50",
+    "border-input placeholder:text-muted-foreground h-9 rounded-md border bg-white file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50",
   ),
   {
     variants: {
@@ -43,8 +43,8 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         className={cn(
           inputVariants({ size }),
           error
-            ? "focus-visible:border-rose-400  focus-visible:ring-rose-100"
-            : "focus-visible:border-primary-400  focus-visible:ring-primary-100",
+            ? "focus-visible:border-rose-400 focus-visible:ring-rose-100"
+            : "focus-visible:border-primary-400 focus-visible:ring-primary-100",
           className,
         )}
         ref={ref}

packages/ui/src/radio-pills.tsx

@@ -0,0 +1,34 @@
+"use client";
+
+import * as Primitive from "@radix-ui/react-radio-group";
+import * as React from "react";
+
+import { cn } from "./lib/utils";
+
+const RadioPills = React.forwardRef<
+  React.ElementRef<typeof Primitive.Root>,
+  React.ComponentPropsWithoutRef<typeof Primitive.Root>
+>(({ className, ...props }, ref) => (
+  <Primitive.Root
+    ref={ref}
+    className={cn("display flex items-center gap-x-2", className)}
+    {...props}
+  />
+));
+
+const RadioPillsItem = React.forwardRef<
+  React.ElementRef<typeof Primitive.Item>,
+  React.ComponentPropsWithoutRef<typeof Primitive.Item>
+>(({ className, ...props }, ref) => (
+  <Primitive.Item
+    ref={ref}
+    className={cn(
+      "text-muted-foreground data-[state=checked]:text-primary data-[state=checked]:border-primary data-[state=unchecked]:hover:text-foreground h-8 rounded-full border px-3 text-sm font-medium",
+      className,
+    )}
+    {...props}
+  />
+));
+RadioPillsItem.displayName = Primitive.Item.displayName;
+
+export { RadioPills as RadioCards, RadioPillsItem as RadioCardsItem };

packages/ui/src/tabs.tsx

@@ -14,7 +14,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "bg-muted text-muted-foreground inline-flex items-center justify-center rounded-md border",
+      "bg-muted text-muted-foreground inline-flex h-9 items-center justify-center rounded-md border",
       className,
     )}
     {...props}
@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex items-center justify-center whitespace-nowrap rounded px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:ring-1 data-[state=active]:ring-gray-200",
+      "ring-offset-background focus-visible:ring-ring data-[state=active]:bg-background data-[state=active]:text-foreground inline-flex h-full items-center justify-center whitespace-nowrap rounded px-3 text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:ring-1 data-[state=active]:ring-gray-200",
       className,
     )}
     {...props}

packages/ui/src/textarea.tsx

@@ -9,7 +9,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
     return (
       <textarea
         className={cn(
-          "border-input placeholder:text-muted-foreground flex min-h-[80px] rounded border bg-gray-50 px-2 py-2 text-sm disabled:cursor-not-allowed disabled:opacity-50",
+          "border-input placeholder:text-muted-foreground flex min-h-[80px] rounded-md border bg-white px-2 py-2 text-sm disabled:cursor-not-allowed disabled:opacity-50",
           "focus-visible:ring-offset-input-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-offset-1",
           "focus-visible:border-primary-400  focus-visible:ring-primary-100",
           className,

packages/ui/tsconfig.json

@@ -2,9 +2,6 @@
   "extends": "@rallly/tsconfig/next.json",
   "compilerOptions": {
     "baseUrl": ".",
-    "paths": {
-      "@rallly/ui/*": ["./src/*"],
-    },
   },
   "include": ["**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"],