@aglyn/plugins-inbox 1.0.0-beta.143

package/src/lib/components/submissions-card.component.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The Submissions section of the Inbox (AGL-77/104/109 → AGL-395): the form
+ * messages a site collected, newest first, and the reader that opens one.
+ *
+ * Its own component since AGL-2501, when the Inbox's tabs became routes. The
+ * split is what makes "mount only the section being read" structural: hooks
+ * cannot be conditional, so a page holding every section's reads pays for all
+ * of them whichever one the URL names.
+ */
+export interface SubmissionsCardProps {
+    hostId: string;
+    /**
+     * Narrow this card to ONE form, permanently.
+     *
+     * What the forms plugin's detail surface renders instead of a second
+     * submissions table. The reader has already chosen the subject by being on
+     * that page, so scoping here does three things a copy would have had to
+     * re-derive: the form picker is not rendered (there is nothing to pick),
+     * the site's `forms` collection is not read at all (the picker was its only
+     * consumer), and the empty state names the form rather than the site.
+     *
+     * Everything else — the paged walk, the reader dialog, read/unread,
+     * delete, reply, list assignment, attribution — is the same code answering
+     * a narrower query. That is the reason this is a prop rather than a second
+     * component: a per-form table written separately would be a second reader
+     * to keep in step, and it would have been the one to reintroduce the
+     * unordered `limit()` this card's own comment exists to warn about.
+     */
+    formId?: string;
+}
+export declare function SubmissionsCard({ hostId, formId }: SubmissionsCardProps): import("react").JSX.Element;
+export declare namespace SubmissionsCard {
+    var displayName: string;
+}
+export default SubmissionsCard;

package/src/lib/components/submissions-card.component.js

@@ -0,0 +1,577 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { FORMS_MAX_PER_HOST, INBOX_SUBMISSION_PARAM, pluginDocsHelp } from "@aglyn/aglyn";
+// A deep import, NOT the plugin barrel (AGL-1151): the barrel is the entry
+// point the tenant's loader dynamically imports to activate the marketing
+// plugin's SITE half, so a console card named there ships to every published
+// page. The component path reaches the same module without crossing it.
+import { InboxRecordAttributionZone } from "./inbox-attribution-zone.js";
+// The CRM's route builder by its leaf path, for the reason above: the barrel
+// is the plugin's site entry point.
+import { pluginRecordByEmailHref, pluginRecordListHref } from "@aglyn/aglyn/plugin-manager/plugin-record-routes";
+import { mdiAccountArrowRight, mdiDeleteOutline, mdiEmailOpenOutline, mdiEmailOutline } from "@aglyn/shared-data-mdi";
+import { CardDisplay, MdiIcon, useConfirmationContext } from "@aglyn/shared-ui-jsx";
+import { ListPagination } from "@aglyn/shared-ui-jsx/components/list-pagination.component";
+import { ListRowActions, ListTable, listActionsColumn } from "@aglyn/shared-ui-jsx/components/list-table.component";
+import { TABLE_ROW_HEIGHT } from "@aglyn/shared-ui-jsx/const/table-pagination";
+import { useSnackbar } from "@aglyn/shared-ui-snackstack";
+import { useFirestore, useFirestoreCollection, usePagedCollection } from "@aglyn/tenant-feature-instance";
+import { Avatar, Box, Button, Chip, Dialog, DialogActions, DialogContent, DialogTitle, Divider, MenuItem, Stack, TextField, Tooltip, Typography } from "@mui/material";
+import { collection, deleteDoc, doc, getDoc, limit, orderBy, query, updateDoc, where } from "firebase/firestore";
+import { useSearchParams } from "next/navigation";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { relativeTime, routingChips, senderHue, submissionSender } from "../model/submission-presenter.js";
+import SubmissionListAssignment from "./submission-list-assignment.component.js";
+import SubmissionReply from "./submission-reply.component.js";
+import { useRecordRouteContext } from "./use-record-route-context.js";
+export function SubmissionsCard({ hostId, formId }) {
+    var _ref, _ref1, _ref2, _ref3, _ref4;
+    var _reader_createdAt_toDate, _reader_createdAt;
+    const firestore = useFirestore();
+    const { enqueueSnackbar } = useSnackbar();
+    const { confirm } = useConfirmationContext();
+    /** Scoped to one form: the subject is fixed and nothing may widen it. */ const scoped = Boolean(formId);
+    /*
+   * Where the sender's CONTACT is (AGL-2612). A submission that carried an
+   * address updated a contact in the CRM at stage Lead; the row links to
+   * it by that address, and the Contacts list — which holds the id nothing
+   * here does — opens the record. The same hub path the Members & leads
+   * rows use to open a lead.
+   */ const routeContext = useRecordRouteContext();
+    /*
+   * The site's forms, for the Submissions filter.
+   *
+   * `FORMS_MAX_PER_HOST` is a read WINDOW, not a cap on the collection — how
+   * many forms a site may hold is `formsPerHost`, enforced at the create in
+   * `/api/hosts/resources`, and a staff-set per-org override can raise it
+   * past this window. So the window can be smaller than the catalog, and one
+   * more document than fits is read on purpose: a filter that quietly listed
+   * the first N would report "this form does not exist" and "this form is
+   * past the window" as the same empty answer.
+   *
+   * Ordered by `__name__`. `displayName` would be the nicer order and is the
+   * wrong instrument: `orderBy` on a data field DROPS every document missing
+   * it, invisibly, so a form saved without a name would vanish from its own
+   * filter. The list is sorted for display below, where a missing name is
+   * merely ugly.
+   */ const { data: formDocs } = useFirestoreCollection(()=>scoped ? null : query(collection(firestore, 'hosts', hostId, 'forms'), orderBy('__name__'), limit(FORMS_MAX_PER_HOST + 1)), [
+        firestore,
+        hostId,
+        scoped
+    ], {
+        idField: '$id'
+    });
+    /** More forms exist than the window shows; the filter has to say so. */ const formsTruncated = ((_ref = formDocs == null ? void 0 : formDocs.length) != null ? _ref : 0) > FORMS_MAX_PER_HOST;
+    const forms = useMemo(()=>[
+            ...formDocs != null ? formDocs : []
+        ].slice(0, FORMS_MAX_PER_HOST).sort((left, right)=>{
+            var _left_displayName, _right_displayName;
+            return String((_left_displayName = left.displayName) != null ? _left_displayName : left.$id).localeCompare(String((_right_displayName = right.displayName) != null ? _right_displayName : right.$id));
+        }), [
+        formDocs
+    ]);
+    /*
+   * `null` is "All forms"; a form id narrows to one form's submissions.
+   *
+   * A PRIMITIVE, deliberately: `usePagedCollection` reopens its listener when
+   * a dep changes, and an object identity would tear down and reopen on every
+   * render. It also resets the reader to page 1, which is what switching
+   * subjects should do.
+   */ const [formFilter, setFormFilter] = useState(null);
+    /**
+   * The form the query is actually narrowed to.
+   *
+   * The scope wins over the picker rather than seeding it. A scoped card
+   * renders no picker, so a `formFilter` that could outrank `formId` would be
+   * a filter with no control — reachable only by a state change nothing on
+   * screen can cause, and unclearable if one ever could.
+   */ const activeForm = formId != null ? formId : formFilter;
+    /*
+   * The inbox WALKS its submissions instead of sampling them (AGL-2501,
+   * AGL-2292).
+   *
+   * `limit(200)` carried no `orderBy`, so Firestore answered it in
+   * DOCUMENT-ID order over ids `add()` generates — an arbitrary two hundred
+   * of the site's messages, which the client sort then arranged newest-first
+   * so the result looked like a feed. A site past two hundred submissions
+   * could not reach the rest, and the messages missing left no gap: the row
+   * dates on screen simply skipped, which reads as a quiet week rather than
+   * as an unreachable inbox.
+   *
+   * `createdAt` is safe to order on, checked against the writer rather than
+   * assumed: `apps/tenant/app/api/forms/submit/route.ts` is the only path
+   * that creates one and stamps `createdAt: serverTimestamp()` on every add,
+   * the v1 API only ever reads and deletes, and `formSubmissions` is absent
+   * from `IMPORTABLE_FIELDS`, so no restore path can make one without it.
+   */ const { rows: submissions, hasMore: hasMoreSubmissions, page: submissionPage, setPage: setSubmissionPage, pageSize: submissionPageSize, setPageSize: setSubmissionPageSize } = usePagedCollection((pageLimit)=>query(collection(firestore, 'hosts', hostId, 'formSubmissions'), // Served by the `formId ASC, createdAt DESC` composite index in
+        // `cloud/firebase-firestore.indexes.json`, which must be deployed
+        // before this ships — without it Firestore refuses the query rather
+        // than answering it slowly.
+        ...activeForm ? [
+            where('formId', '==', activeForm)
+        ] : [], orderBy('createdAt', 'desc'), limit(pageLimit)), [
+        firestore,
+        hostId,
+        activeForm
+    ], {
+        idField: '$id'
+    });
+    // Mail reader (AGL-104): opening a submission shows the full message and
+    // marks it read.
+    const [reader, setReader] = useState(null);
+    const handleOpenReader = useCallback((submission)=>()=>{
+            setReader(submission);
+            if (!submission.read) {
+                void updateDoc(doc(firestore, 'hosts', hostId, 'formSubmissions', submission.$id), {
+                    read: true
+                });
+            }
+        }, [
+        firestore,
+        hostId
+    ]);
+    const handleToggleRead = useCallback((submission)=>()=>{
+            void updateDoc(doc(firestore, 'hosts', hostId, 'formSubmissions', submission.$id), {
+                read: !submission.read
+            });
+        }, [
+        firestore,
+        hostId
+    ]);
+    /*
+   * A submission named in the URL opens in the reader on arrival (AGL-2622).
+   *
+   * A contact's timeline names the submission that captured the person, and
+   * the address it links to is this tab with `?submission={id}`. The
+   * document is read once, by id, rather than looked for in the paged
+   * window: the window is the newest page of a walk that may not reach a
+   * submission from months back, and one document read is what the URL
+   * asked for. Opening it marks it read, as a click on the row would. A
+   * submission that is gone says so, because a reader that silently stays
+   * shut reads as the link having done nothing.
+   *
+   * Once per id: the ref keeps a re-render — and the same URL re-settling —
+   * from reopening a reader the person has since closed. The landing read
+   * is judged against that ref rather than an effect cleanup: a listener
+   * settling while the read is in flight re-renders this card, and a
+   * cleanup keyed on any dep would cancel the answer to the question the
+   * URL just asked.
+   */ const searchParams = useSearchParams();
+    const seededSubmissionId = (_ref1 = searchParams == null ? void 0 : searchParams.get(INBOX_SUBMISSION_PARAM)) != null ? _ref1 : null;
+    const seededOpened = useRef(null);
+    useEffect(()=>{
+        if (!seededSubmissionId || seededOpened.current === seededSubmissionId) return;
+        seededOpened.current = seededSubmissionId;
+        void getDoc(doc(firestore, 'hosts', hostId, 'formSubmissions', seededSubmissionId)).then((snapshot)=>{
+            if (seededOpened.current !== snapshot.id) return;
+            if (!snapshot.exists()) {
+                enqueueSnackbar('That submission is no longer in the Inbox.', {
+                    variant: 'warning',
+                    persist: false
+                });
+                return;
+            }
+            handleOpenReader(_extends({}, snapshot.data(), {
+                $id: snapshot.id
+            }))();
+        }).catch(()=>undefined);
+    }, [
+        seededSubmissionId,
+        firestore,
+        hostId,
+        handleOpenReader,
+        enqueueSnackbar
+    ]);
+    const handleDelete = useCallback((submission)=>async ()=>{
+            const confirmed = await confirm({
+                title: 'Delete this submission?',
+                description: 'The submission is removed permanently.',
+                confirmationText: 'Delete',
+                confirmationButtonProps: {
+                    color: 'error'
+                }
+            }).then(()=>true).catch(()=>false);
+            if (!confirmed) return;
+            await deleteDoc(doc(firestore, 'hosts', hostId, 'formSubmissions', submission.$id));
+            enqueueSnackbar('Submission deleted', {
+                variant: 'success',
+                persist: false
+            });
+        }, [
+        confirm,
+        firestore,
+        hostId,
+        enqueueSnackbar
+    ]);
+    /*
+   * One row per submission, newest first: who sent it, what it said and how
+   * long ago. The row opens the reader, which also marks it read.
+   */ const submissionActions = (submission)=>{
+        var _pluginRecordByEmailHref;
+        const senderEmail = submissionSender(submission.fields).email;
+        // Where the sender's contact is read, asked of whichever plugin keeps
+        // people; with none loaded there is no such page, and no menu item.
+        const contactsHref = routeContext ? pluginRecordListHref('contact', routeContext) : null;
+        return [
+            ...routeContext && contactsHref ? [
+                _extends({
+                    key: 'crm',
+                    label: 'Open contact in CRM',
+                    icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                        path: mdiAccountArrowRight.path,
+                        size: 0.8
+                    })
+                }, senderEmail ? {
+                    href: (_pluginRecordByEmailHref = pluginRecordByEmailHref('contact', routeContext, senderEmail)) != null ? _pluginRecordByEmailHref : contactsHref
+                } : {
+                    disabled: true,
+                    disabledReason: 'This submission carried no email address, so no contact was updated.'
+                })
+            ] : [],
+            {
+                key: 'read',
+                label: submission.read ? 'Mark unread' : 'Mark read',
+                icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: submission.read ? mdiEmailOutline.path : mdiEmailOpenOutline.path,
+                    size: 0.8
+                }),
+                onClick: handleToggleRead(submission)
+            },
+            {
+                key: 'delete',
+                label: 'Delete',
+                icon: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: mdiDeleteOutline.path,
+                    size: 0.8
+                }),
+                destructive: true,
+                onClick: handleDelete(submission)
+            }
+        ];
+    };
+    const submissionColumns = [
+        {
+            /*
+        The mockup's list is people, not forms (AGL-2168): an initials avatar,
+        the sender, and the form name beneath it. The unread DOT replaces the
+        `New` chip — the row is already bold, and a chip that says "New" beside
+        bold text is the same fact twice.
+       */ field: 'from',
+            headerName: 'From',
+            flex: 1,
+            minWidth: 220,
+            valueGetter: (_value, submission)=>submissionSender(submission.fields).label,
+            renderCell: ({ row: submission })=>{
+                var _submission_formName;
+                const sender = submissionSender(submission.fields);
+                const hue = senderHue(sender.label);
+                return /*#__PURE__*/ _jsxs(Stack, {
+                    direction: "row",
+                    spacing: 1,
+                    sx: {
+                        alignItems: 'center',
+                        minWidth: 0
+                    },
+                    children: [
+                        !submission.read ? /*#__PURE__*/ _jsx(Box, {
+                            "aria-label": "Unread",
+                            sx: {
+                                width: 8,
+                                height: 8,
+                                borderRadius: '50%',
+                                bgcolor: 'primary.main',
+                                flexShrink: 0
+                            }
+                        }) : /*#__PURE__*/ _jsx(Box, {
+                            sx: {
+                                width: 8,
+                                flexShrink: 0
+                            }
+                        }),
+                        /*#__PURE__*/ _jsx(Avatar, {
+                            sx: {
+                                width: 28,
+                                height: 28,
+                                fontSize: 13,
+                                bgcolor: `hsl(${hue} 55% 45%)`
+                            },
+                            children: sender.initials
+                        }),
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            sx: {
+                                minWidth: 0
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "body2",
+                                    noWrap: true,
+                                    children: sender.label
+                                }),
+                                /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    color: "text.secondary",
+                                    noWrap: true,
+                                    children: (_submission_formName = submission.formName) != null ? _submission_formName : 'Form'
+                                })
+                            ]
+                        })
+                    ]
+                });
+            }
+        },
+        {
+            field: 'message',
+            headerName: 'Message',
+            flex: 2,
+            minWidth: 260,
+            valueGetter: (_value, submission)=>{
+                var _submission_fields;
+                return Object.entries((_submission_fields = submission.fields) != null ? _submission_fields : {}).map(([key, value])=>`${key}: ${value}`).join(' · ');
+            },
+            renderCell: ({ value })=>/*#__PURE__*/ _jsx(Typography, {
+                    variant: "body2",
+                    noWrap: true,
+                    children: value
+                })
+        },
+        {
+            /*
+        Relative, as the mockup shows it — an inbox is scanned for recency and a
+        locale timestamp makes the reader do the subtraction. The absolute time
+        stays on the detail dialog, where it is the fact you actually want.
+       */ field: 'createdAt',
+            headerName: 'Received',
+            width: 130,
+            valueGetter: (_value, submission)=>{
+                var _ref;
+                var _submission_createdAt_toDate_getTime, _submission_createdAt_toDate, _submission_createdAt_toDate1, _submission_createdAt;
+                return (_ref = (_submission_createdAt = submission.createdAt) == null ? void 0 : (_submission_createdAt_toDate1 = _submission_createdAt.toDate) == null ? void 0 : (_submission_createdAt_toDate = _submission_createdAt_toDate1.call(_submission_createdAt)) == null ? void 0 : (_submission_createdAt_toDate_getTime = _submission_createdAt_toDate.getTime) == null ? void 0 : _submission_createdAt_toDate_getTime.call(_submission_createdAt_toDate)) != null ? _ref : 0;
+            },
+            renderCell: ({ row: submission })=>{
+                var _ref;
+                var _submission_createdAt_toDate, _submission_createdAt, _submission_createdAt_toDate1, _submission_createdAt1;
+                return /*#__PURE__*/ _jsx(Tooltip, {
+                    title: (_ref = (_submission_createdAt = submission.createdAt) == null ? void 0 : (_submission_createdAt_toDate = _submission_createdAt.toDate) == null ? void 0 : _submission_createdAt_toDate.call(_submission_createdAt).toLocaleString()) != null ? _ref : '',
+                    children: /*#__PURE__*/ _jsx("span", {
+                        children: relativeTime((_submission_createdAt1 = submission.createdAt) == null ? void 0 : (_submission_createdAt_toDate1 = _submission_createdAt1.toDate) == null ? void 0 : _submission_createdAt_toDate1.call(_submission_createdAt1).getTime())
+                    })
+                });
+            }
+        },
+        /*
+      One overflow menu, as the Members & leads rows have: two inline buttons
+      had no room for a third, and the contact link is the one a reader
+      reaches for after reading. Present but disabled for a submission with no
+      address, with the reason — a row that simply lacked the item would read
+      as the contact not existing.
+     */ listActionsColumn((submission)=>{
+            var _submissionSender_email;
+            return /*#__PURE__*/ _jsx(ListRowActions, {
+                label: String((_submissionSender_email = submissionSender(submission.fields).email) != null ? _submissionSender_email : submission.$id),
+                items: submissionActions(submission)
+            });
+        }, {
+            width: 72
+        })
+    ];
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs(CardDisplay, {
+                header: scoped ? 'Submissions to this form' : 'Form Submissions',
+                help: pluginDocsHelp('forms', {
+                    anchor: '#the-inbox',
+                    excerpt: 'Messages your forms collected, newest first, showing who sent ' + 'each one and where it was routed.'
+                }),
+                contentGutterX: true,
+                contentGutterY: true,
+                contentBordered: "all",
+                children: [
+                    !scoped && forms.length > 0 ? /*#__PURE__*/ _jsxs(TextField, {
+                        select: true,
+                        size: "small",
+                        label: 'Form',
+                        value: formFilter != null ? formFilter : '',
+                        onChange: (event)=>setFormFilter(event.target.value || null),
+                        helperText: formsTruncated ? `Showing the first ${FORMS_MAX_PER_HOST.toLocaleString()} ` + 'forms. Narrow by form is incomplete; All forms still ' + 'covers every submission.' : undefined,
+                        sx: {
+                            mb: 2,
+                            minWidth: 240
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(MenuItem, {
+                                value: "",
+                                children: 'All forms'
+                            }),
+                            forms.map((form)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                    value: form.$id,
+                                    children: form.displayName || form.$id
+                                }, form.$id))
+                        ]
+                    }) : null,
+                    submissions.length === 0 ? /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body2",
+                        color: "text.secondary",
+                        children: scoped ? 'No submissions carry this form’s id yet. Messages this ' + 'form’s design collected before it became a form entity are ' + 'in the Inbox, filed under the name they were sent with.' : activeForm ? 'No submissions for this form yet. Submissions sent before ' + 'the form was created stay under All forms.' : 'No form submissions yet. Add a Contact Form element to a ' + 'screen — visitor messages arrive here.'
+                    }) : /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(ListTable, {
+                                "aria-label": scoped ? 'Submissions to this form' : 'Form submissions',
+                                rows: submissions,
+                                columns: submissionColumns,
+                                rowHeight: TABLE_ROW_HEIGHT,
+                                onOpen: (_id, submission)=>handleOpenReader(submission)(),
+                                // An unread submission reads bold across its row, which is why
+                                // the list needs no `New` chip.
+                                getRowClassName: ({ row })=>row.read ? '' : 'submission-unread',
+                                sx: {
+                                    '& .submission-unread .MuiDataGrid-cell, & .submission-unread .MuiTypography-root': {
+                                        fontWeight: 'fontWeightBold'
+                                    }
+                                },
+                                // Paged by the footer below, so the grid must not also slice.
+                                hideFooter: true
+                            }),
+                            /*#__PURE__*/ _jsx(ListPagination, {
+                                page: submissionPage,
+                                pageSize: submissionPageSize,
+                                rowCount: submissions.length,
+                                hasMore: hasMoreSubmissions,
+                                onPageChange: setSubmissionPage,
+                                onPageSizeChange: setSubmissionPageSize
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Dialog, {
+                open: Boolean(reader),
+                onClose: ()=>setReader(null),
+                maxWidth: "sm",
+                fullWidth: true,
+                children: [
+                    /*#__PURE__*/ _jsx(DialogTitle, {
+                        children: (_ref2 = reader == null ? void 0 : reader.formName) != null ? _ref2 : 'Form submission'
+                    }),
+                    /*#__PURE__*/ _jsxs(DialogContent, {
+                        children: [
+                            /*#__PURE__*/ _jsxs(Typography, {
+                                variant: "caption",
+                                color: "text.secondary",
+                                children: [
+                                    `Received ${(_ref3 = reader == null ? void 0 : (_reader_createdAt = reader.createdAt) == null ? void 0 : (_reader_createdAt_toDate = _reader_createdAt.toDate) == null ? void 0 : _reader_createdAt_toDate.call(_reader_createdAt).toLocaleString()) != null ? _ref3 : ''}` + ((reader == null ? void 0 : reader.screenId) ? ` · screen ${reader.screenId}` : ''),
+                                    (reader == null ? void 0 : reader.path) ? ` · ${String(reader.path)}` : ''
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(Divider, {
+                                sx: {
+                                    my: 1.5
+                                }
+                            }),
+                            /*#__PURE__*/ _jsx(Stack, {
+                                spacing: 1.5,
+                                children: Object.entries((_ref4 = reader == null ? void 0 : reader.fields) != null ? _ref4 : {}).map(([key, value])=>/*#__PURE__*/ _jsxs(Stack, {
+                                        spacing: 0.25,
+                                        children: [
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "caption",
+                                                color: "text.secondary",
+                                                children: key
+                                            }),
+                                            /*#__PURE__*/ _jsx(Typography, {
+                                                variant: "body2",
+                                                sx: {
+                                                    whiteSpace: 'pre-wrap',
+                                                    wordBreak: 'break-word'
+                                                },
+                                                children: String(value)
+                                            })
+                                        ]
+                                    }, key))
+                            }),
+                            /*#__PURE__*/ _jsx(Stack, {
+                                direction: "row",
+                                spacing: 1,
+                                sx: {
+                                    mt: 2,
+                                    flexWrap: 'wrap',
+                                    rowGap: 1
+                                },
+                                children: routingChips(reader == null ? void 0 : reader.routing).map((chip)=>/*#__PURE__*/ _jsx(Chip, {
+                                        size: "small",
+                                        label: chip.label,
+                                        color: chip.color,
+                                        variant: "outlined"
+                                    }, chip.label))
+                            }),
+                            (reader == null ? void 0 : reader.$id) ? /*#__PURE__*/ _jsx(Box, {
+                                sx: {
+                                    mt: 2
+                                },
+                                children: /*#__PURE__*/ _jsx(InboxRecordAttributionZone, {
+                                    hostId: hostId,
+                                    recordKind: "form",
+                                    recordId: String(reader.$id)
+                                })
+                            }) : null,
+                            reader ? /*#__PURE__*/ _jsx(SubmissionReply, {
+                                hostId: hostId,
+                                submission: reader
+                            }) : null,
+                            reader ? /*#__PURE__*/ _jsx(SubmissionListAssignment, {
+                                hostId: hostId,
+                                submission: reader
+                            }) : null
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(DialogActions, {
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                color: "error",
+                                onClick: async ()=>{
+                                    const target = reader;
+                                    setReader(null);
+                                    if (target) await handleDelete(target)();
+                                },
+                                children: 'Delete'
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                onClick: ()=>{
+                                    if (reader) void handleToggleRead(_extends({}, reader, {
+                                        read: true
+                                    }))();
+                                    setReader(null);
+                                },
+                                children: 'Mark unread'
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "contained",
+                                onClick: ()=>setReader(null),
+                                children: 'Close'
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+SubmissionsCard.displayName = 'SubmissionsCard';
+export default SubmissionsCard;
+
+//# sourceMappingURL=submissions-card.component.js.map