panel/components/cards/ReportCard.tsx

import { Card, CardDescription, CardHeader, CardTitle } from "../ui/card";
import { Badge } from "../ui/badge";
import dayjs from "dayjs";
import { decodeTime } from "ulid";

import relativeTime from "dayjs/plugin/relativeTime";
import { ReportDocument } from "@/lib/db";
dayjs.extend(relativeTime);

const lastWeek = new Date();
lastWeek.setDate(lastWeek.getDate() - 7);

const yesterday = new Date();
yesterday.setDate(yesterday.getDate() - 1);

export function ReportCard({ report }: { report: ReportDocument }) {
  const dueDate = +(report.content.report_reason.includes("Illegal")
    ? yesterday
    : lastWeek);

  return (
    <Card>
      <CardHeader>
        <CardTitle
          className={`overflow-ellipsis whitespace-nowrap overflow-x-clip ${
            report.status !== "Created" ? "text-gray-500" : ""
          }`}
        >
          {report.status === "Resolved" ? (
            <Badge className="align-middle">Resolved</Badge>
          ) : report.status === "Rejected" ? (
            <Badge className="align-middle">
              Closed for {report.rejection_reason}
            </Badge>
          ) : (
            report.content.report_reason.includes("Illegal") && (
              <Badge className="align-middle" variant="destructive">
                Urgent
              </Badge>
            )
          )}{" "}
          {report.additional_context || "No reason specified"}
        </CardTitle>
        <CardDescription>
          {report._id.toString().substring(20, 26)} &middot;{" "}
          {report.content.report_reason} &middot; {report.content.type} &middot;{" "}
          {dayjs(decodeTime(report._id)).fromNow()}{" "}
          {report.status !== "Created" && report.closed_at && (
            <>&middot; Closed {dayjs(report.closed_at).fromNow()}</>
          )}{" "}
          {report.case_id && (
            <>
              &middot;{" "}
              <Badge className="align-middle" variant="secondary">
                Assigned
              </Badge>
            </>
          )}{" "}
          {report.status === "Created" && decodeTime(report._id) < dueDate && (
            <>
              &middot;{" "}
              <Badge className="align-middle" variant="relatively-destructive">
                Due{" "}
                {dayjs()
                  .add(dayjs(decodeTime(report._id)).diff(dueDate))
                  .fromNow()}
              </Badge>
            </>
          )}
        </CardDescription>
      </CardHeader>
    </Card>
  );
}