HERE WE GO, HERE WE GO, HERE WE GO

1 files changed, 765 insertions, 0 deletions

diff --git a/jb-ui/src/pages/Work.tsx b/jb-ui/src/pages/Work.tsx
new file mode 100644
index 0000000..c54732f
--- /dev/null
+++ b/jb-ui/src/pages/Work.tsx
@@ -0,0 +1,765 @@
+import {
+    BucketTask,
+    OfferwallApi,
+    OfferwallReason,
+    ReportApi, ReportTask, ReportValue, StatusApi,
+    TasksStatusResponse, TaskStatusResponse, TopNPlusBlockOfferWall
+} from "@/api_fsb";
+
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+    Field,
+    FieldDescription,
+    FieldGroup,
+    FieldLabel,
+    FieldLegend,
+    FieldSet,
+} from "@/components/ui/field";
+import { useAppDispatch, useAppSelector } from "@/hooks";
+import { bpid, formatCentsToUSD, formatSource, truncate } from "@/lib/utils";
+import {
+    getAvailabilityCount, getLOIText,
+    isLowBalance,
+    selectBucket,
+    setAttemptedLiveEligibleCount,
+    setAvailabilityCount,
+    setCurrentBuckets,
+    setEnteredTimestamp, setLOI,
+    setOfferwallReasons,
+    setTaskStatus
+} from "@/models/appSlice";
+import {
+    createColumnHelper, flexRender, getCoreRowModel,
+    useReactTable
+} from "@tanstack/react-table";
+import { XIcon } from "lucide-react";
+import moment from "moment/moment";
+import { useEffect, useRef, useState } from "react";
+import Markdown from 'react-markdown';
+
+const Report = ({ onClose }: { onClose: () => void }) => {
+    const [showComplete, setShowComplete] = useState(false);
+    const [selectedValues, setSelectedValues] = useState<ReportValue[]>([]);
+
+    const bpuid = useAppSelector(state => state.app.bpuid)
+    const ts = useAppSelector(state => state.app.taskStatus)
+
+    const handleCheckboxChange = (value: ReportValue, checked: boolean) => {
+        setSelectedValues(prev =>
+            checked
+                ? [...prev, value]
+                : prev.filter(v => v !== value)
+        );
+    };
+
+    const clicked_submit = () => {
+        if (!bpuid) return;
+        // ReportValue.NUMBER_0
+        console.log("selectedValues:", selectedValues);
+
+        const rt: ReportTask = {
+            'bpuid': bpuid,
+            'reasons': selectedValues,
+            'notes': ""
+        };
+
+        new ReportApi().reportTaskProductIdReportPost(
+            bpid, // productId
+            rt, // reportTask
+        ).then(res => {
+            console.log("Response:", res); // Check what's actually here
+
+            if (res.status === 400) {
+                // Handle error here instead
+            } else {
+                setShowComplete(true);
+            }
+        })
+    }
+
+    const reportReasons = [
+        { id: 'TECHNICAL_ERROR', label: 'Technical Error', value: ReportValue.NUMBER_1 },
+        { id: 'NO_REDIRECT', label: 'No Redirect', value: ReportValue.NUMBER_2 },
+        { id: 'PRIVACY_INVASION', label: 'Privacy Invasion', value: ReportValue.NUMBER_3 },
+        { id: 'UNCOMFORTABLE_TOPICS', label: 'Uncomfortable Topics', value: ReportValue.NUMBER_4 },
+        { id: 'ASKED_FOR_NOT_ALLOWED_ACTION', label: 'Asked for Not Allowed Action', value: ReportValue.NUMBER_5 },
+        { id: 'BAD_ON_MOBILE', label: 'Bad on Mobile', value: ReportValue.NUMBER_6 },
+        { id: 'DIDNT_LIKE', label: "Didn't Like", value: ReportValue.NUMBER_7 },
+    ];
+
+    if (!ts?.finished) {
+        return <p>Please finish a Task to report its status.</p>
+    }
+
+    if (showComplete) {
+        return <SubimtAMT />
+    }
+
+    return (
+        <div className="border-2 border-rose-200 rounded">
+            <div className="flex justify-center">
+                <FieldSet className="mt-2">
+                    <FieldLegend variant="label" className="my-0 text-rose-950">
+                        Please select all reasons why you are reporting this Task:
+                    </FieldLegend>
+                    <FieldDescription className="my-0 text-rose-950">
+                        You must provide at least one reason to report a Task.
+                    </FieldDescription>
+                    <FieldGroup className="gap-2 my-0 py-0">
+
+                        {reportReasons.map((reason) => (
+                            <Field key={reason.id} orientation="horizontal" className="
+                            hover:cursor-pointer">
+                                <Checkbox
+                                    id={reason.id}
+                                    name={reason.id}
+                                    onCheckedChange={(checked) =>
+                                        handleCheckboxChange(reason.value, checked as boolean)
+                                    }
+                                />
+                                <FieldLabel
+                                    htmlFor={reason.id}
+                                    className="font-medium text-rose-950
+                                    hover:cursor-pointer hover:font-semibold"
+                                >
+                                    {reason.label}
+                                </FieldLabel>
+                            </Field>
+                        ))}
+
+                    </FieldGroup>
+                </FieldSet>
+            </div>
+            <div className="flex justify-center my-2 space-x-5">
+                <Button variant="outline" size="icon" aria-label="Submit"
+                    className="
+                    border-2 rounded border-zinc-800 text-zinc-800
+                    hover:cursor-pointer hover:bg-zinc-800 hover:text-zinc-50"
+                    onClick={onClose}>
+                    <XIcon />
+                </Button>
+                <Button variant="outline"
+                    className="
+                    border-2 rounded border-rose-400 text-rose-950
+                    hover:cursor-pointer hover:bg-rose-400 hover:text-rose-50"
+                    onClick={clicked_submit}>Submit and Complete HIT</Button>
+            </div>
+        </div>
+    )
+}
+
+const SubimtAMT = () => {
+    const bpuid = useAppSelector(state => state.app.bpuid)
+    const assignment_id = useAppSelector(state => state.app.assignment_id)
+    const ts = useAppSelector(state => state.app.taskStatus)
+    const turkSubmitTo = useAppSelector(state => state.app.turkSubmitTo)
+
+    const formRef = useRef<HTMLFormElement>(null);
+
+    useEffect(() => {
+        if (!ts) return;
+        if (!bpuid) return;
+        if (!assignment_id) return;
+        if (!turkSubmitTo) return;
+
+        if (formRef.current) {
+            formRef.current.submit();
+        }
+    }, [ts?.tsid, bpuid, assignment_id, turkSubmitTo]);
+
+    return (
+        <>
+            <form
+                ref={formRef}
+                action={`${turkSubmitTo}/mturk/externalSubmit`}
+                method="POST"
+                style={{ display: 'none' }}>
+                <input type="hidden" name="assignmentId" value={assignment_id} />
+                <input type="hidden" name="tsid" value={ts?.tsid} />
+                <input type="hidden" name="amt_assignment_id" value={assignment_id} />
+                <input type="hidden" name="amt_worker_id" value={bpuid} />
+                <button type="submit">Submit HIT</button>
+            </form>
+        </>
+    )
+}
+
+
+const SurveyMonitor = () => {
+    const dispatch = useAppDispatch()
+
+    const [isPolling, setIsPolling] = useState(true);
+    // const [timeAgo, setTimeAgo] = useState("");
+
+    const [showComplete, setShowComplete] = useState(false);
+    const [showReport, setShowReport] = useState(false);
+
+    const bpuid = useAppSelector(state => state.app.bpuid)
+    const entered = useAppSelector(state => state.app.currentBucketEntered)
+    const isLow = useAppSelector(state => isLowBalance(state))
+
+    const ts = useAppSelector(state => state.app.taskStatus)
+    const isBaddie = ts?.status_code_1 === "SESSION_START_FAIL" || ts?.status_code_1 === "SESSION_START_QUALITY_FAIL" || ts?.status_code_1 === "SESSION_CONTINUE_QUALITY_FAIL";
+
+    // useEffect(() => {
+    //     if (!ts) return;
+
+    //     const updateTimeAgo = () => {
+    //         const time_ago = moment(ts.started).fromNow();
+    //         setTimeAgo(time_ago);
+    //     };
+
+    //     // Update immediately
+    //     updateTimeAgo();
+
+    //     // Then update every minute
+    //     const intervalId = setInterval(updateTimeAgo, 60 * 1000);
+
+    //     return () => clearInterval(intervalId);
+    // }, [ts]);
+
+    useEffect(() => {
+        if (!bpuid) return;
+        if (!entered) return;
+        if (!isPolling) return;
+
+        const pollApi = async () => {
+            new StatusApi().listTaskStatusesProductIdStatusGet(
+                bpid,  // productId
+                bpuid,  // Worker ID
+                entered,  // startedAfter
+                moment.utc().unix() // startedBefore    
+            ).then(res => {
+                const d = res.data as TasksStatusResponse;
+
+                if (!d.tasks_status || d.tasks_status.length === 0) {
+                    // Likely still in a GRS survey
+                    return;
+                }
+
+                // if (d_len >= 2) Sentry.captureMessage("Results returned back multiple")
+                const ts = d.tasks_status![0] as TaskStatusResponse;
+                dispatch(setTaskStatus(ts))
+
+                if (ts.status == 2 || ts.status == 3) {
+                    // INCOMPLETE + COMPLETE
+                    setIsPolling(false);
+                }
+            });
+
+            // If there is already a TaskStatus, update the time ago
+            // if (ts) {
+            //     const time_ago = moment(ts.started).fromNow();
+            //     setTimeAgo(time_ago);
+            // }
+        };
+
+        // Call immediately on mount, then set up interval
+        pollApi();
+        const intervalId = setInterval(pollApi, 4 * 1000);
+
+        // Cleanup: stop interval when component unmounts or isPolling changes
+        return () => clearInterval(intervalId);
+    }, [isPolling, entered]);
+
+    if (!ts) {
+        return (
+            <p>Loading</p>
+        )
+    }
+
+    // This is if they are actively in a survey or we can't determine the 
+    // status yet. We want to show the timer and keep them on this page to 
+    // monitor for completion. This gets shown no matter what regardless of 
+    // balance.
+    //
+    // 0 - UNKNOWN, 1 - ENTER
+    if (ts.status === 0 || ts.status === 1) {
+        return (
+            <>
+                <div>
+                    <h2 className="
+                    bg-blue-500 rounded py-2
+                    text-white text-2xl font-semibold text-center">
+                        In Progress
+                    </h2>
+                    <p className="
+                    py-4
+                    text-zinc-500 text-2xl font-semibold text-center">
+                        We're actively monitoring your Task status.
+                    </p>
+                </div>
+            </>
+        )
+    }
+
+    // This is if they have finished a survey complete and it resulted in a 
+    // COMPLETE or a INCOMPLETE (doesn't matter). They can now submit the HIT.
+    //
+    // 2 - INCOMPLETE, 3 - COMPLETE
+    return (
+        <>
+            <div>
+                <h2 className="
+                    bg-blue-500 rounded py-2
+                    text-white text-2xl font-semibold text-center">
+                    {ts.status === 3 ? "Survey Complete!" : "Survey Terminated."}
+                </h2>
+
+                {((ts.status === 3 || !isLow) && !isBaddie) && (
+                    <p className="
+                    py-2
+                    text-zinc-500 text-md font-medium text-center">
+                        You may now submit the HIT.
+                    </p>
+                )}
+            </div>
+
+            {(isBaddie) ? (
+                <>
+                    <div className="
+                    border-2 border-rose-500 rounded py-2
+                    bg-rose-400 text-rose-700">
+                        <h2 className="text-center text-xl font-bold text-white">
+                            Quality Check Failed.
+                        </h2>
+                        <p className="px-4 py-2 text-center text-sm font-medium text-white">
+                            Unfortunately, it looks like you did not pass the quality check for this survey.
+                        </p>
+
+                        <p className="
+                    pt-0 pb-4
+                    text-red-950 text-sm font-semibold text-center">
+                            Please return the HIT to avoid having your assignment rejected.
+                        </p>
+                    </div>
+                </>
+
+            ) : (
+                <>
+                    {(ts.status === 3 || !isLow) ? (
+                        <>
+                            <div className="flex justify-center my-4 space-x-5">
+
+                                <button type="button" className="
+                border-4 rounded border-emerald-400 py-1 px-3
+                text-xl font-bold text-emerald-950
+                hover:cursor-pointer hover:bg-emerald-400 hover:text-emerald-50"
+                                    onClick={() => setShowComplete(true)}
+                                >Submit HIT</button>
+
+                                <button type="button" className="
+                border-4 rounded border-rose-200 py-1 px-3
+                text-xl font-bold text-rose-200
+                hover:cursor-pointer hover:border-rose-500 hover:bg-rose-400 hover:text-rose-50"
+                                    onClick={() => setShowReport(!showReport)}
+                                >Report Survey</button>
+                            </div>
+
+                            {showComplete && <SubimtAMT />}
+                            {showReport && <Report onClose={() => setShowReport(false)} />}
+                        </>
+                    ) : (
+                        <div>
+                            <p className="
+                    text-red-600 text-lg font-semibold text-center">
+                                Your balance is low. You cannot submit the HIT at this time.
+                            </p>
+
+                            <p className="
+                    pt-0 pb-4
+                    text-red-950 text-sm font-semibold text-center">
+                                Please return the HIT to avoid having your assignment rejected.
+                            </p>
+                        </div>
+                    )}
+                </>
+
+            )}
+
+
+        </>
+    )
+}
+
+
+const LOISelect = () => {
+    // This is what's responsible for being able to click on the text 
+    //  we set the global LOI times.
+
+    const dispatch = useAppDispatch()
+    const loi: number = useAppSelector(state => state.app.loi)
+    const bucket = useAppSelector(state => selectBucket(state))
+
+    const toggle_loi = function () {
+        dispatch(setLOI(loi >= 1800 ? 600 : loi + 600))
+    }
+
+    const time_f = useAppSelector(state => getLOIText(state))
+
+    const avg_time_f = ((bucket?.duration.q2 ?? 0) / 60).toLocaleString(
+        'en-US', { minimumFractionDigits: 0, maximumFractionDigits: 1 })
+
+    const formatter = new Intl.NumberFormat('en-US', {
+        style: 'currency',
+        currency: 'USD',
+    });
+    const avg_pay_f: string = formatter.format((bucket?.payout.q2 ?? 0) / 100)
+
+    return (
+        <div className="bg-zinc-100 rounded py-2 m-0">
+            <p className="text-zinc-700 text-2xl text-center font-bold m-0">
+                I have <span
+                    className="cursor-pointer text-emerald-600 italic hover:text-emerald-700 hover:underline"
+                    onClick={toggle_loi}>{time_f}</span> minutes
+            </p>
+            <p
+                className="text-center text-xs font-thin m-0 text-zinc-500">
+                The average time spent is {avg_time_f} minutes and pays {avg_pay_f}</p>
+        </div>
+    )
+
+};
+
+const SurveyLoading = () => {
+    return (
+        <div className="
+            border-8 border-emerald-400 rounded py-0 my-2
+            text-center text-3xl 
+            hover:cursor-pointer hover:bg-green-500 hover:text-white">
+            <p className="py-2 text-center text-3xl font-semibold">
+                Survey Loading…
+            </p>
+        </div>
+    )
+}
+
+
+const NoSurveys = () => {
+    const offerwall_reasons = useAppSelector(state => state.app.offerwall_reasons)
+
+    const REASON_DISPLAY: Record<OfferwallReason, { label: string; description: string }> = {
+        [OfferwallReason.UserBlocked]: {
+            label: "Account Restricted",
+            description: "Your account has been restricted.",
+        },
+        [OfferwallReason.HighReconRate]: {
+            label: "High Reconciliation Rate",
+            description: "Your account has an unusually high reconciliation rate.",
+        },
+        [OfferwallReason.UncommonDemographics]: {
+            label: "Demographic Mismatch",
+            description: "No surveys require your current demographics.",
+        },
+        [OfferwallReason.UnderMinimumAge]: {
+            label: "Age Requirement Not Met",
+            description: "You must meet the minimum age requirement to participate.",
+        },
+        [OfferwallReason.ExhaustedHighValueSupply]: {
+            label: "No Premium Offers Available",
+            description: "You've attempted all premium surveys.",
+        },
+        [OfferwallReason.AllEligibleAttempted]: {
+            label: "All Offers Attempted",
+            description: "You've attempted all available surveys.",
+        },
+        [OfferwallReason.LowCurrentSupply]: {
+            label: "Limited Availability",
+            description: "There are currently limited opportunities available.",
+        },
+    };
+
+    function formatReasons(reasons: OfferwallReason[]): { label: string; description: string }[] {
+        return reasons.map((r) => REASON_DISPLAY[r]);
+    }
+
+    return (
+        <>
+            <div className="
+            border-8 border-emerald-400 rounded py-0 my-2
+            text-center text-3xl 
+            hover:cursor-pointer hover:bg-green-500 hover:text-white">
+                <p className="py-2 text-center text-3xl font-semibold">
+                    No Surveys available…
+                </p>
+            </div>
+
+            {formatReasons(offerwall_reasons).map(r => {
+                return (
+                    <div className="
+                    border-6 border-rose-200 rounded py-0 my-2
+                    text-center 
+                    hover:cursor-pointer hover:bg-rose-200 hover:text-rose-950  ">
+                        <p className="py-2 text-center text-md font-semibold text-rose-600">
+                            {r.description}
+                        </p>
+                    </div>
+                )
+            })}
+        </>
+    )
+}
+
+const BucketDetails = () => {
+    const bucket = useAppSelector(state => selectBucket(state))
+    if (!bucket) return null;
+    const [showDetails, setShowDetails] = useState(false);
+
+    const columnHelper = createColumnHelper<BucketTask>()
+    const columns = [
+        columnHelper.display({
+            id: 'index',
+            header: '#',
+            cell: ({ row }) => row.index + 1,
+            size: 25,
+            meta: {
+                align: 'center'
+            }
+        }),
+        columnHelper.accessor('source', {
+            header: () => 'Marketplace',
+            cell: (props) => {
+                const s = props.getValue()
+                return formatSource(s)
+            },
+            size: 85,
+            meta: {
+                align: 'left'
+            }
+        }),
+        columnHelper.accessor('id', {
+            header: () => 'Survey ID',
+            cell: props => {
+                return truncate(props.getValue(), 6, "*****").toUpperCase()
+            },
+            size: 70,
+            meta: {
+                align: 'left'
+            }
+        }),
+        columnHelper.accessor('payout', {
+            header: () => 'Amount',
+            cell: (props) => {
+                const val = props.renderValue() as number;
+                return formatCentsToUSD(val)
+            },
+            size: 50,
+            meta: {
+                align: 'center'
+            }
+        }),
+        columnHelper.accessor('loi', {
+            header: () => 'Duration',
+            cell: (props) => {
+                const val = props.renderValue() as number;
+                return `${Math.round(val / 60)} min`
+            },
+            size: 50,
+            meta: {
+                align: 'center'
+            }
+        }),
+    ]
+
+    const table = useReactTable({
+        'data': bucket.contents,
+        'columns': columns,
+        getCoreRowModel: getCoreRowModel(),
+    });
+
+    return (
+        <>
+            <div className="w-full text-center text-[8px] text-emerald-600
+            rounded py-2 my-1
+            hover:cursor-pointer hover:text-emerald-700 hover:underline hover:bg-emerald-200 
+            "
+                onClick={() => setShowDetails(!showDetails)}
+            >
+                ({showDetails ? 'Hide' : 'Show'} details of surveys in this bucket)
+            </div>
+
+            {showDetails && (
+                <div className="w-full border-t-1 border-emerald-200 py-1 my-0 flex justify-center">
+                    <table className="text-[10px] text-emerald-900 table-fixed border-collapse">
+                        <thead className="font-bold">
+                            {table.getHeaderGroups().map((headerGroup) => (
+
+                                <tr key={headerGroup.id}>
+                                    {headerGroup.headers.map((header) => {
+                                        const align = header.column.columnDef.meta?.align || 'left';
+                                        const alignClass = align === 'center' ? 'text-center' : align === 'right' ? 'text-right' : 'text-left';
+
+                                        return (
+                                            <th
+                                                key={header.id}
+                                                className={`p-0 m-0 ${alignClass}`}
+                                                style={{
+                                                    width: `${header.column.getSize()}px`,
+                                                }}
+                                            >
+                                                {flexRender(
+                                                    header.column.columnDef.header,
+                                                    header.getContext(),
+                                                )}
+                                            </th>
+                                        )
+                                    })}
+                                </tr>
+                            ))}
+                        </thead>
+                        <tbody>
+                            {table.getRowModel().rows.map((row) => (
+                                <tr key={row.id}>
+                                    {row.getVisibleCells().map((cell) => {
+                                        const align = cell.column.columnDef.meta?.align || 'left';
+                                        const alignClass = align === 'center' ? 'text-center' :
+                                            align === 'right' ? 'text-right' : 'text-left';
+
+                                        return (
+                                            <td key={cell.id}
+                                                className={`p-0 ${alignClass}`}
+                                                style={{
+                                                    width: `${cell.column.getSize()}px`,
+                                                }}
+                                            >
+                                                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                                            </td>
+                                        )
+                                    })}
+                                </tr>
+                            ))}
+                        </tbody>
+
+                    </table>
+                </div>
+            )}
+        </>
+    )
+};
+
+const SurveyEnter = () => {
+    const dispatch = useAppDispatch()
+    const loi = useAppSelector(state => state.app.loi)
+    const bpuid = useAppSelector(state => state.app.bpuid)
+
+    const available_cnt = useAppSelector(state => getAvailabilityCount(state))
+    const buckets = useAppSelector(state => state.app.currentBuckets)
+    const bucket = useAppSelector(state => selectBucket(state))
+    const isLow = useAppSelector(state => isLowBalance(state))
+
+    useEffect(() => {
+        if (!bpuid) return;
+
+        new OfferwallApi().topNPlusBlockOfferwallProductIdOfferwallD48cce47Get(
+            bpid,  // productId
+            bpuid, // bpuid
+            undefined,  // ip
+            undefined,  // countryIso
+            undefined,  // languages
+            undefined,  // behavior
+            undefined,  // minPayout
+            loi,  //duration
+            1  // nBins
+        ).then(res => {
+            const top_n_res = res.data.offerwall as TopNPlusBlockOfferWall;
+            dispatch(setAvailabilityCount(top_n_res.availability_count))
+            if (top_n_res.attempted_live_eligible_count) {
+                dispatch(setAttemptedLiveEligibleCount(top_n_res.attempted_live_eligible_count))
+            }
+            dispatch(setCurrentBuckets(top_n_res.buckets))
+            dispatch(setOfferwallReasons(top_n_res.offerwall_reasons ?? []))
+        });
+    }, [loi, bpuid]);
+
+
+    const start_survey = () => {
+        if (!bucket?.uri) return;
+
+        dispatch(setEnteredTimestamp());
+        window.open(bucket.uri, '_blank');
+    }
+
+    if (buckets === undefined) {
+        return <SurveyLoading />
+    }
+
+    if (available_cnt === 0 || buckets.length === 0 || !bucket) {
+        return <NoSurveys />
+    }
+
+    return (
+        <>
+            {isLow && (
+                <div className="
+                border-8 border-rose-500 rounded py-2
+                bg-rose-400 text-rose-700">
+                    <h2 className="text-center text-xl font-bold text-white">
+                        Your balance is low.
+                    </h2>
+                    <p className="px-4 py-2 text-center text-sm font-medium text-white">
+                        You may continue to attempt surveys, but you will be
+                        advised to return the HIT if your survey attempt does
+                        not result in a complete.
+                    </p>
+                    <p className="px-4 py-2 text-center text-sm font-bold text-white">
+                        HIT submissions with a balance exceeding -$1.00 will
+                        return in rejected assignments.
+                    </p>
+                </div>
+            )}
+
+            <LOISelect />
+            <div
+                onClick={start_survey}
+                className="
+                border-8 border-emerald-400 rounded py-0 my-2
+                hover:cursor-pointer hover:bg-emerald-400 hover:text-emerald-50">
+                <p className="py-2 text-center text-3xl font-semibold">
+                    <a
+                        target="_blank"
+                        rel="noopener noreferrer">
+                        Start Task
+                    </a>
+                </p>
+            </div>
+            <BucketDetails />
+
+            <div className="border-2 border-emerald-200 rounded py-2 m-0">
+                <p className="text-emerald-700 text-sm text-center font-medium px-2 m-0">
+                    <Markdown>
+                        {bucket.eligibility_explanation}
+                    </Markdown>
+                </p>
+            </div>
+        </>
+    )
+};
+
+
+const Work = () => {
+    const entered = useAppSelector(state => state.app.currentBucketEntered)
+    const assignment_id = useAppSelector(state => state.app.assignment_id)
+
+    if (!assignment_id) {
+        return (
+            <p className="text-center text-2xl py-3 text-red-800 font-semibold">
+                No Assignment ID found. Please access this page through
+                the Amazon Mechanical Turk platform.
+            </p>
+        )
+    }
+
+    return (
+        <>
+            {entered ? (
+                <SurveyMonitor />
+            ) : (
+                <SurveyEnter />
+            )}
+        </>
+    )
+};
+
+
+export default Work;
\ No newline at end of file