Feature/basic asset reminders

app/components/asset-reminder/actions-dropdown.tsx

@@ -0,0 +1,80 @@
+import { useState } from "react";
+import type { Prisma } from "@prisma/client";
+import { PencilIcon } from "lucide-react";
+import { VerticalDotsIcon } from "~/components/icons/library";
+import { Button } from "~/components/shared/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "~/components/shared/dropdown";
+import type { ASSET_REMINDER_INCLUDE_FIELDS } from "~/modules/asset-reminder/fields";
+import DeleteReminder from "./delete-reminder";
+import SetOrEditReminderDialog from "./set-or-edit-reminder-dialog";
+import When from "../when/when";
+
+type ActionsDropdownProps = {
+  reminder: Prisma.AssetReminderGetPayload<{
+    include: typeof ASSET_REMINDER_INCLUDE_FIELDS;
+  }>;
+};
+
+export default function ActionsDropdown({ reminder }: ActionsDropdownProps) {
+  const [isDropdownOpem, setIsDropdownOpen] = useState(false);
+  const [isEditDialogOpen, setIsEditDialogOpen] = useState(false);
+
+  const now = new Date();
+  const isPending = now < new Date(reminder.alertDateTime);
+
+  return (
+    <DropdownMenu
+      open={isDropdownOpem}
+      onOpenChange={setIsDropdownOpen}
+      modal={false}
+    >
+      <DropdownMenuTrigger className="px-2">
+        <VerticalDotsIcon />
+      </DropdownMenuTrigger>
+
+      <DropdownMenuContent align="end" className="order p-1.5   ">
+        <When truthy={isPending}>
+          <DropdownMenuItem asChild>
+            <Button
+              role="button"
+              variant="link"
+              className="cursor-pointer justify-start text-gray-700 hover:text-gray-700"
+              width="full"
+              onClick={() => {
+                setIsDropdownOpen(false);
+                setIsEditDialogOpen(true);
+              }}
+              aria-label="Edit Reminder"
+            >
+              <span className="flex items-center gap-2">
+                <PencilIcon className="size-4" /> Edit
+              </span>
+            </Button>
+          </DropdownMenuItem>
+        </When>
+        <DropdownMenuItem asChild>
+          <DeleteReminder reminder={reminder} />
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+
+      <SetOrEditReminderDialog
+        reminder={{
+          id: reminder.id,
+          name: reminder.name,
+          message: reminder.message,
+          alertDateTime: reminder.alertDateTime,
+          teamMembers: reminder.teamMembers.map((tm) => tm.id),
+        }}
+        open={isEditDialogOpen}
+        onClose={() => {
+          setIsEditDialogOpen(false);
+        }}
+      />
+    </DropdownMenu>
+  );
+}

app/components/asset-reminder/delete-reminder.tsx

@@ -0,0 +1,78 @@
+import { forwardRef } from "react";
+import type { Prisma } from "@prisma/client";
+import { Form, useNavigation } from "@remix-run/react";
+import { TrashIcon } from "lucide-react";
+import { Button } from "~/components/shared/button";
+import {
+  AlertDialog,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "~/components/shared/modal";
+import type { ASSET_REMINDER_INCLUDE_FIELDS } from "~/modules/asset-reminder/fields";
+import { isFormProcessing } from "~/utils/form";
+
+type DeleteReminderProps = {
+  reminder: Prisma.AssetReminderGetPayload<{
+    include: typeof ASSET_REMINDER_INCLUDE_FIELDS;
+  }>;
+};
+
+const DeleteReminder = forwardRef<HTMLButtonElement, DeleteReminderProps>(
+  function ({ reminder }, ref) {
+    const navigation = useNavigation();
+    const disabled = isFormProcessing(navigation.state);
+
+    return (
+      <AlertDialog>
+        <AlertDialogTrigger
+          ref={ref}
+          className="flex w-full items-center gap-2 rounded px-2 py-1.5 font-medium text-gray-700 hover:bg-gray-100 hover:text-gray-700"
+        >
+          <TrashIcon className="size-4" /> Delete
+        </AlertDialogTrigger>
+
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <div className="mx-auto md:m-0">
+              <span className="flex size-12 items-center justify-center rounded-full bg-error-50 p-2 text-error-600">
+                <TrashIcon />
+              </span>
+            </div>
+            <AlertDialogTitle>Delete {reminder.name}</AlertDialogTitle>
+            <AlertDialogDescription>
+              Are you sure you want to delete this reminder? This action cannot
+              be undone.
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <div className="flex justify-center gap-2">
+              <AlertDialogCancel disabled={disabled} asChild>
+                <Button variant="secondary">Cancel</Button>
+              </AlertDialogCancel>
+
+              <Form method="delete">
+                <input type="hidden" value={reminder.id} name="id" />
+                <input type="hidden" value="delete-reminder" name="intent" />
+
+                <Button
+                  disabled={disabled}
+                  className="border-error-600 bg-error-600 hover:border-error-800 hover:!bg-error-800"
+                >
+                  Delete
+                </Button>
+              </Form>
+            </div>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    );
+  }
+);
+
+DeleteReminder.displayName = "DeleteReminder";
+export default DeleteReminder;

app/components/asset-reminder/reminder-team-members.tsx

@@ -0,0 +1,90 @@
+import type { Prisma } from "@prisma/client";
+import { Link } from "@remix-run/react";
+import { tw } from "~/utils/tw";
+import { resolveTeamMemberName } from "~/utils/user";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../shared/tooltip";
+import When from "../when/when";
+
+type ReminderTeamMembersProps = {
+  className?: string;
+  style?: React.CSSProperties;
+  teamMembers: Prisma.TeamMemberGetPayload<{
+    select: {
+      id: true;
+      name: true;
+      user: {
+        select: {
+          id: true;
+          firstName: true;
+          lastName: true;
+          profilePicture: true;
+        };
+      };
+    };
+  }>[];
+  imgClassName?: string;
+  extraContent?: React.ReactNode;
+  isAlreadySent?: boolean;
+};
+
+export default function ReminderTeamMembers({
+  className,
+  style,
+  teamMembers,
+  imgClassName,
+  extraContent,
+  isAlreadySent = false,
+}: ReminderTeamMembersProps) {
+  return (
+    <div className={tw("flex items-center", className)} style={style}>
+      {teamMembers.map((teamMember) => {
+        const isAccessRevoed = !teamMember.user;
+
+        return (
+          <TooltipProvider key={teamMember.id}>
+            <Tooltip>
+              <TooltipTrigger>
+                <Link
+                  to={`/settings/team/users/${teamMember?.user?.id}/assets`}
+                  className={tw(
+                    "-ml-1 flex size-6 shrink-0 items-center justify-center overflow-hidden rounded border border-white",
+                    imgClassName,
+                    isAccessRevoed && "border-error-500"
+                  )}
+                >
+                  <img
+                    alt={teamMember.name}
+                    className="size-full object-cover"
+                    src={
+                      teamMember?.user?.profilePicture ??
+                      "/static/images/default_pfp.jpg"
+                    }
+                  />
+                </Link>
+              </TooltipTrigger>
+              <TooltipContent side="top" className="max-w-72">
+                <p>{resolveTeamMemberName(teamMember, true)}</p>
+
+                <When truthy={isAccessRevoed && !isAlreadySent}>
+                  <p className="mt-2 text-error-500">
+                    This team member has been removed from the workspace. As a
+                    fallback the reminder email will be sent to the workspace
+                    Owner. You can always edit the reminder to assign it to a
+                    different user.
+                  </p>
+                </When>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        );
+      })}
+
+      {extraContent}
+    </div>
+  );
+}

app/components/asset-reminder/reminders-table.tsx

@@ -0,0 +1,148 @@
+import { useState } from "react";
+import type { Prisma } from "@prisma/client";
+import colors from "tailwindcss/colors";
+import type { ASSET_REMINDER_INCLUDE_FIELDS } from "~/modules/asset-reminder/fields";
+import { List } from "../list";
+import ReminderTeamMembers from "./reminder-team-members";
+import SetOrEditReminderDialog from "./set-or-edit-reminder-dialog";
+import { ListContentWrapper } from "../list/content-wrapper";
+import { Filters } from "../list/filters";
+import { SortBy } from "../list/filters/sort-by";
+import { Badge } from "../shared/badge";
+import { Button } from "../shared/button";
+import { Td, Th } from "../table";
+import ActionsDropdown from "./actions-dropdown";
+import When from "../when/when";
+
+type RemindersTableProps = {
+  isAssetReminderPage?: boolean;
+};
+
+export const REMINDERS_SORTING_OPTIONS = {
+  name: "Name",
+  alertDateTime: "Alert Time",
+  createdAt: "Date Created",
+  updatedAt: "Date Updated",
+} as const;
+
+export default function RemindersTable({
+  isAssetReminderPage,
+}: RemindersTableProps) {
+  const [isReminderDialogOpen, setIsReminderDialogOpen] = useState(false);
+
+  const emptyStateTitle = isAssetReminderPage
+    ? "No reminders for this asset"
+    : "No reminders created yet.";
+
+  return (
+    <ListContentWrapper className="mb-4">
+      <Filters
+        slots={{
+          "right-of-search": (
+            <SortBy
+              sortingOptions={REMINDERS_SORTING_OPTIONS}
+              defaultSortingBy="alertDateTime"
+            />
+          ),
+        }}
+      />
+
+      <List
+        className="overflow-x-hidden"
+        ItemComponent={ListContent}
+        customEmptyStateContent={{
+          title: emptyStateTitle,
+          text: (
+            <p>
+              What are you waiting for? Create your first{" "}
+              {isAssetReminderPage ? (
+                <Button
+                  variant="link"
+                  onClick={() => {
+                    setIsReminderDialogOpen(true);
+                  }}
+                >
+                  reminder
+                </Button>
+              ) : (
+                "reminder"
+              )}{" "}
+              now!
+            </p>
+          ),
+        }}
+        headerChildren={
+          <>
+            <Th>Message</Th>
+            <When truthy={!isAssetReminderPage}>
+              <Td>Asset</Td>
+            </When>
+            <Th>Alert Date</Th>
+            <Th>Status</Th>
+            <Th>Users</Th>
+          </>
+        }
+        extraItemComponentProps={{ isAssetReminderPage }}
+      />
+
+      <SetOrEditReminderDialog
+        open={isReminderDialogOpen}
+        onClose={() => {
+          setIsReminderDialogOpen(false);
+        }}
+      />
+    </ListContentWrapper>
+  );
+}
+
+function ListContent({
+  item,
+  extraProps,
+}: {
+  item: Prisma.AssetReminderGetPayload<{
+    include: typeof ASSET_REMINDER_INCLUDE_FIELDS;
+  }> & { displayDate: string };
+  extraProps: { isAssetReminderPage: boolean };
+}) {
+  const now = new Date();
+  const status =
+    now < new Date(item.alertDateTime) ? "Pending" : "Reminder sent";
+
+  return (
+    <>
+      <Td className="md:min-w-60">{item.name}</Td>
+      <Td className="max-w-62 md:max-w-96">{item.message}</Td>
+      <When truthy={!extraProps.isAssetReminderPage}>
+        <Td>
+          <Button
+            className="hover:underline"
+            to={`/assets/${item.asset.id}/overview`}
+            target="_blank"
+            variant={"link-gray"}
+          >
+            {item.asset.title}
+          </Button>
+        </Td>
+      </When>
+      <Td>{item.displayDate}</Td>
+      <Td>
+        <Badge
+          color={
+            status === "Pending" ? colors.yellow["500"] : colors.green["500"]
+          }
+        >
+          {status}
+        </Badge>
+      </Td>
+      <Td>
+        <ReminderTeamMembers
+          teamMembers={item.teamMembers}
+          isAlreadySent={status === "Reminder sent"}
+        />
+      </Td>
+      <Td>
+        <ActionsDropdown reminder={item} />
+      </Td>
+    </>
+  );
+}