sea-dev 1.0.0

package/apps/main/src/routes/_authed/_app/deals/$dealId/index.tsx

@@ -0,0 +1,259 @@
+import { Container } from "@/components/header/container";
+import { ConfirmationModal } from "@/components/modals/modals";
+import { NewSubmissionModal } from "@/components/modals/new-submission";
+import { ViewReportModal } from "@/components/modals/view-report";
+import { catchNotFound } from "@/lib/not-found";
+import { membershipMiddleware } from "@/middleware";
+import { updateDeal } from "@sea/dal/deal";
+import { db, schema } from "@sea/db";
+import type { Deal } from "@sea/db/types";
+import { Button } from "@sea/ui/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@sea/ui/components/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItemDumb,
+  DropdownMenuTrigger,
+} from "@sea/ui/components/ui/dropdown-menu";
+import { Input } from "@sea/ui/components/ui/input";
+import { Textarea } from "@sea/ui/components/ui/textarea";
+import { H1 } from "@sea/ui/components/ui/typography";
+import { invariant } from "@sea/util/invariant";
+import { createFileRoute, useNavigate, useRouter } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { and, desc, eq, isNull } from "drizzle-orm";
+import { EllipsisIcon, TrashIcon } from "lucide-react";
+import * as z from "zod/v4";
+import {
+  SubmissionFilter,
+  getGroupedSubmissions,
+  groupingSchema,
+  statusSchema,
+  typeFilterSchema,
+  type Grouping,
+  type Status,
+  type TypeFilter,
+} from "./-components/submission-filter";
+import { SubmissionsDisplay } from "./-components/submissions";
+
+const getDealHydratedFn = createServerFn()
+  .middleware([membershipMiddleware])
+  .validator((data: { dealId: string }) => data)
+  .handler(async ({ context: { member }, data: { dealId } }) => {
+    const deal = await db.query.deal.findFirst({
+      where: and(
+        eq(schema.deal.organizationId, member.organizationId),
+        eq(schema.deal.id, dealId),
+        isNull(schema.deal.deletedAt),
+      ),
+      with: {
+        organization: true,
+        submissions: {
+          where: isNull(schema.submission.deletedAt),
+          with: { form: { with: { workflow: true } } },
+          orderBy: desc(schema.submission.updatedAt),
+        },
+      },
+    });
+    if (deal === undefined) {
+      throw catchNotFound({ dealId });
+    }
+
+    invariant(deal, `Deal with ID ${dealId} not found`);
+
+    const submissions = deal.submissions
+      .map((s) => ({
+        ...s,
+        dealId: deal.id,
+        workflowName: s.form.workflow.name,
+        workflowSlug: s.form.workflow.slug,
+      }))
+      .sort((a, b) => b.updatedAt.getTime() - a.updatedAt.getTime());
+
+    return { deal, submissions };
+  });
+
+const deleteDealFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((data: { dealId: string }) => data)
+  .handler(async ({ context: { member }, data: { dealId } }) => {
+    await db.transaction(async (tx) => {
+      const [deal] = await tx
+        .update(schema.deal)
+        .set({ deletedAt: new Date() })
+        .where(
+          and(eq(schema.deal.organizationId, member.organizationId), eq(schema.deal.id, dealId)),
+        )
+        .returning();
+      // validate access before continuing
+      invariant(deal);
+
+      await tx
+        .update(schema.submission)
+        .set({ deletedAt: new Date() })
+        .where(eq(schema.submission.dealId, dealId));
+    });
+  });
+
+const updateDealFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator(z.object({ dealId: z.string(), hint: z.string(), name: z.string() }))
+  .handler(async ({ context: { member }, data: { dealId, hint, name } }) => {
+    await updateDeal({ member, dealId, hint, name });
+  });
+
+function DealContextModal({ deal }: { deal: Deal }) {
+  const router = useRouter();
+  return (
+    <Dialog>
+      <DialogTrigger className="w-fit">
+        <H1 className="w-fit cursor-pointer hover:underline">{deal.name}</H1>
+      </DialogTrigger>
+      <DialogContent>
+        <form
+          onSubmit={async (event) => {
+            event.preventDefault();
+            const formData = new FormData(event.currentTarget);
+            const hint = formData.get("hint") as string;
+            const name = formData.get("name") as string;
+            await updateDealFn({ data: { dealId: deal.id, hint, name } });
+            router.invalidate();
+          }}
+          className="grid gap-4"
+        >
+          <DialogHeader>
+            <DialogTitle>Edit deal</DialogTitle>
+          </DialogHeader>
+          <Input name="name" placeholder="Name" defaultValue={deal.name} />
+          <Textarea
+            name="hint"
+            placeholder="Edit deal Hint"
+            defaultValue={deal.hint ?? undefined}
+          />
+          <DialogFooter>
+            <DialogClose>Cancel</DialogClose>
+            <DialogClose asChild>
+              <Button type="submit" variant="secondary">
+                Save
+              </Button>
+            </DialogClose>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export const Route = createFileRoute("/_authed/_app/deals/$dealId/")({
+  loader: ({ params: { dealId } }) => getDealHydratedFn({ data: { dealId } }),
+  validateSearch: z.object({
+    grouping: groupingSchema,
+    status: statusSchema,
+    type: typeFilterSchema,
+  }),
+  component: RouteComponent,
+});
+
+function RouteComponent() {
+  const router = useRouter();
+  const params = Route.useParams();
+  const navigate = useNavigate();
+  const { dealId } = Route.useParams();
+  const { deal, submissions } = Route.useLoaderData();
+  const { grouping, status, type } = Route.useSearch();
+
+  const setGrouping = (grouping: Grouping) => {
+    navigate({ to: Route.to, params, search: { status, grouping, type } });
+  };
+
+  const setStatusFilter = (status: Status) => {
+    navigate({ to: Route.to, params, search: { status, grouping, type } });
+  };
+
+  const setTypeFilter = (type: TypeFilter) => {
+    navigate({ to: Route.to, params, search: { status, grouping, type } });
+  };
+
+  const filteredSubmissions = submissions
+    .filter((s) => status === "all" || s.status === status)
+    .filter((s) => type === "all" || s.type === type);
+  const groupedSubmissions = getGroupedSubmissions({ grouping, submissions: filteredSubmissions });
+
+  const CRUMBS = [
+    { href: "deals", label: "Deals" },
+    { href: dealId, label: deal.name },
+  ];
+
+  const deleteDeal = async () => {
+    await deleteDealFn({ data: { dealId: deal.id } });
+    router.navigate({ to: "/deals" });
+  };
+
+  return (
+    <Container crumbs={CRUMBS}>
+      <div className="space-y-6">
+        <div className="flex items-center justify-between">
+          <div>
+            <DealContextModal deal={deal} />
+            <p className="text-muted-foreground text-xs">{deal.hint ?? " "}</p>
+          </div>
+          <div className="flex items-center gap-2">
+            <ViewReportModal dealId={deal.id} />
+            <NewSubmissionModal dealId={deal.id} />
+            <DropdownMenu modal={true}>
+              <DropdownMenuTrigger asChild>
+                <Button
+                  type="button"
+                  size="icon"
+                  variant="ghost"
+                  aria-label="More actions"
+                  aria-haspopup="menu"
+                >
+                  <EllipsisIcon />
+                </Button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent>
+                <DropdownMenuGroup>
+                  <DropdownMenuItemDumb>
+                    <ConfirmationModal
+                      title="Confirmation"
+                      message={`Are you sure you want to delete the ${deal.name} deal?`}
+                      action={deleteDeal}
+                    >
+                      <div className="flex w-full items-center gap-2">
+                        <TrashIcon /> Delete deal
+                      </div>
+                    </ConfirmationModal>
+                  </DropdownMenuItemDumb>
+                </DropdownMenuGroup>
+              </DropdownMenuContent>
+            </DropdownMenu>
+          </div>
+        </div>
+
+        <div className="space-y-4">
+          <div className="flex items-center justify-end">
+            <SubmissionFilter
+              grouping={grouping}
+              setGrouping={setGrouping}
+              statusFilter={status}
+              setStatusFilter={setStatusFilter}
+              typeFilter={type}
+              setTypeFilter={setTypeFilter}
+            />
+          </div>
+          <SubmissionsDisplay groupedSubmissions={groupedSubmissions} />
+        </div>
+      </div>
+    </Container>
+  );
+}

package/apps/main/src/routes/_authed/_app/deals/$dealId/route.tsx

@@ -0,0 +1,29 @@
+import { membershipMiddleware } from "@/middleware";
+import { db, schema } from "@sea/db";
+import { createFileRoute } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { and, eq, isNull } from "drizzle-orm";
+
+const getDealNameFn = createServerFn()
+  .middleware([membershipMiddleware])
+  .validator((dealId: string): string => dealId)
+  .handler(async ({ context: { member }, data: dealId }) => {
+    const deal = await db.query.deal.findFirst({
+      columns: { name: true },
+      where: and(
+        eq(schema.deal.organizationId, member.organizationId),
+        eq(schema.deal.id, dealId),
+        isNull(schema.deal.deletedAt),
+      ),
+    });
+
+    return { deal };
+  });
+
+export const Route = createFileRoute("/_authed/_app/deals/$dealId")({
+  beforeLoad: async ({ params: { dealId } }) => getDealNameFn({ data: dealId }),
+  loader: async ({ context: { deal } }) => ({ deal }),
+  head: async ({ loaderData: { deal } = {} }) => ({
+    meta: [{ title: `sea.dev | ${deal?.name}` }],
+  }),
+});

package/apps/main/src/routes/_authed/_app/deals/index.tsx

@@ -0,0 +1,104 @@
+import { Grid } from "@/components/grid";
+import { Container } from "@/components/header/container";
+import { NewDealModal } from "@/components/modals/new-deal";
+import { membershipMiddleware } from "@/middleware";
+import { getDeals } from "@sea/dal/deal";
+import { RelDate } from "@sea/ui/components/misc/rel-date";
+import { Badge } from "@sea/ui/components/ui/badge";
+import { Input } from "@sea/ui/components/ui/input";
+import { H1, H2, H3 } from "@sea/ui/components/ui/typography";
+import { Link, createFileRoute } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { useMemo, useState } from "react";
+
+const getDealsFn = createServerFn()
+  .middleware([membershipMiddleware])
+  .handler(async ({ context: { member } }) => {
+    const deals = await getDeals({ member });
+    return { deals };
+  });
+
+export const Route = createFileRoute("/_authed/_app/deals/")({
+  component: RouteComponent,
+  loader: () => getDealsFn(),
+});
+
+const CRUMBS = [{ href: "deals", label: "Deals" }];
+
+function RouteComponent() {
+  const { deals } = Route.useLoaderData();
+  const [searchQuery, setSearchQuery] = useState("");
+
+  const filteredDeals = useMemo(() => {
+    if (!searchQuery.trim()) return deals;
+    const query = searchQuery.toLowerCase();
+    return deals.filter(
+      (deal) =>
+        deal.name.toLowerCase().includes(query) ||
+        deal.refId?.toLowerCase().includes(query) ||
+        deal.hint?.toLowerCase().includes(query),
+    );
+  }, [deals, searchQuery]);
+
+  return (
+    <Container crumbs={CRUMBS}>
+      <div className="flex items-center justify-between">
+        <H1>Deals</H1>
+        {deals.length > 0 && <NewDealModal />}
+      </div>
+
+      {deals.length === 0 ? (
+        <div className="rounded-lg border border-dashed p-8 text-center">
+          <H3>No deals yet</H3>
+          <p className="text-muted-foreground mt-1 text-sm">
+            Get started by creating your first deal
+          </p>
+          <div className="mt-4">
+            <NewDealModal />
+          </div>
+        </div>
+      ) : (
+        <>
+          <div className="my-4">
+            <Input
+              placeholder="Filter deals by name, reference ID, or hint..."
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="max-w-sm"
+            />
+          </div>
+          {filteredDeals.length === 0 ? (
+            <div className="rounded-lg border border-dashed p-8 text-center">
+              <H3>No deals found</H3>
+              <p className="text-muted-foreground mt-1 text-sm">
+                Try adjusting your search criteria
+              </p>
+            </div>
+          ) : (
+            <Grid>
+              {filteredDeals.map((deal) => (
+                <Link
+                  key={deal.id}
+                  to="/deals/$dealId"
+                  params={{ dealId: deal.id }}
+                  className="hover:bg-muted/50 rounded-lg border p-4 transition-colors"
+                >
+                  <div className="flex flex-wrap items-start justify-start gap-2">
+                    <H2 className="min-w-0 flex-1 text-balance break-words">{deal.name}</H2>
+                    <Badge variant="brandsec" className="ml-auto shrink-0">
+                      {deal.submissions.length}{" "}
+                      {deal.submissions.length === 1 ? "submission" : "submissions"} started
+                    </Badge>
+                  </div>
+                  <p className="text-muted-foreground mt-1 text-xs">
+                    Updated <RelDate date={deal.updatedAt} />
+                  </p>
+                </Link>
+              ))}
+            </Grid>
+          )}
+        </>
+      )}
+    </Container>
+  );
+}