DEMOS-975: Minimal centralized date picker, and seeder stuff

client/src/components/input/date/DatePicker.tsx

@@ -0,0 +1,34 @@
+import React from "react";
+import { Input } from "components/input/Input";
+
+export interface DatePickerProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "onChange"> {
+  label: string;
+  required?: boolean;
+  value?: string;
+  onValueChange?: (newDate: string) => void;
+}
+
+export const DatePicker: React.FC<DatePickerProps> = ({
+  label,
+  name,
+  id,
+  required,
+  value,
+  onValueChange,
+}) => {
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    onValueChange?.(e.target.value);
+  };
+
+  return (
+    <Input
+      type="date"
+      label={label}
+      name={name ?? id ?? ""}
+      isRequired={required ?? false}
+      value={value}
+      onChange={handleChange}
+    />
+  );
+};

client/src/components/table/ColumnFilter.tsx

@@ -3,7 +3,8 @@ import { Table } from "@tanstack/react-table";
 import { TextInput } from "components/input";
 import { AutoCompleteMultiselect } from "components/input/select/AutoCompleteMultiselect";
 import { Option, Select } from "components/input/select/Select";
-import { parseISO } from "date-fns";
+import { parseISO, format } from "date-fns";
+import { DatePicker } from "components/input/date/DatePicker";
 
 export interface ColumnMetaFilterConfig {
   filterConfig?:
@@ -97,32 +98,27 @@ export function ColumnFilter<T>({ table }: { table: Table<T> }) {
         return (
           <>
             <div>
-              <label
-                className="block text-sm font-bold mb-1"
-                htmlFor="date-filter-start"
-              >{`${columnDisplayName} Start`}</label>
-              <input
+              <DatePicker
+                label={`${columnDisplayName} Start`}
                 id="date-filter-start"
                 name="date-filter-start"
-                type="date"
-                className="w-full border border-border-fields px-1 py-1 text-sm rounded"
-                onChange={(e) => {
-                  const value = e.target.value;
-                  onRangeChange(parseISO(value), filterRangeValue.end);
-                }}
+                placeholder="Start date"
+                value={filterRangeValue.start ? format(filterRangeValue.start, "yyyy-MM-dd") : ""}
+                onValueChange={(val) =>
+                  onRangeChange(val ? parseISO(val) : null, filterRangeValue.end)
+                }
               />
             </div>
             <div>
-              <label
-                className="block text-sm font-bold mb-1"
-                htmlFor="date-filter-end"
-              >{`${columnDisplayName} End`}</label>
-              <input
+              <DatePicker
+                label={`${columnDisplayName} End`}
                 id="date-filter-end"
                 name="date-filter-end"
-                type="date"
-                onChange={(e) => onRangeChange(filterRangeValue.start, parseISO(e.target.value))}
-                className="w-full border border-border-fields px-1 py-1 text-sm rounded"
+                placeholder="End date"
+                value={filterRangeValue.end ? format(filterRangeValue.end, "yyyy-MM-dd") : ""}
+                onValueChange={(val) =>
+                  onRangeChange(filterRangeValue.start, val ? parseISO(val) : null)
+                }
               />
             </div>
           </>

server/src/seeder.ts

@@ -80,6 +80,7 @@ async function seedDocuments() {
             documentTypeId: documentType,
             applicationId: application.id,
             phaseId: phaseName,
+            createdAt: randomBackdatedDate(),
           },
         });
         const s3Path = `${application.id}/${document.id}`;
@@ -122,6 +123,11 @@ function randomDateRange() {
   return { start: randomEasternStart, end: randomEasternEnd };
 }
 
+function randomBackdatedDate() {
+  // choose a random date within the last year
+  return faker.date.recent({ days: 365 });
+}
+
 function checkIfAllowed() {
   if (process.env.ALLOW_SEED !== "true") {
     throw new Error("Database seeding is not allowed. Set ALLOW_SEED=true to use this feature.");
@@ -273,6 +279,42 @@ async function seedDatabase() {
   }
   // need to add a project officer to each demonstration, so creating a new user from a matching state
   console.log("🌱 Seeding demonstrations...");
+  const healthFocusTitles = [
+    "Beneficiary Engagement",
+    "PHE-COVID-19", "Aggregate Cap", "Annual Limits",
+    "Basic Health Plan (BHP)", "Behavioral Health",
+    "Children's Health Insurance Program (CHIP)",
+    "CMMI - AHEAD", "CMMI - Integrated Care for Kids (IncK)",
+    "CMMI - Maternal Opioid Misuse (MOM)",
+    "Community Engagement", "Contingency Management",
+    "Continuous Eligibility",
+    "Delivery System Reform Incentive Payment (DSRIP)",
+    "Dental", "Designated State Health Programs (DSHP)",
+    "Employment Supports", "Enrollment Cap",
+    "End-Stage Renal Disease (ESRD)", "Expenditure Cap",
+    "Former Foster Care Youth (FFCY)",
+    "Global Payment Program (GPP)", "Health Equity",
+    "Health-Related Social Needs (HRSN)",
+    "Healthy Behavior Incentives",
+    "HIV", "Home Community Based Services (HCBS)",
+    "Lead Exposure", "Lifetime Limits",
+    "Long-Term Services and Supports (LTSS)",
+    "Managed Care", "Marketplace Coverage/Premium Assistance Wrap",
+    "New Adult Group Expansion", "Non-Eligibility Period",
+    "Non-Emergency Medical Transportation (NEMT)",
+    "Partial Expansion of the New Adult Group", "Pharmacy", "PHE-Appendix K",
+    "PHE-Reasonable Opportunity Period (ROP)", "PHE-Risk Mitigation",
+    "PHE-Vaccine Coverage", "Premiums/Cost-Sharing",
+    "Provider Cap", "Provider Restriction", "ReEntry",
+    "Reproductive Health: Family Planning", "Reproductive Health: Fertility",
+    "Reproductive Health: Hyde", "Reproductive Health: Maternal Health",
+    "Reproductive Health: Post-Partum Extension", "Reproductive Health: RAD",
+    "Retroactive Eligibility", "Serious Mental Illness (SMI)", "Special Needs",
+    "Substance Use Disorder (SUD)", "Targeted Population Expansion", "Tribal",
+    "Uncompensated Care","Value Based Care (VBC)", "Vision",
+  ];
+  const demonstrationTypes = ["Section 1115", "Section 1915(b)", "Section 1915(c)"];
+
   for (let i = 0; i < demonstrationCount; i++) {
     // get a random cms-user
     const person = await prisma().person.findRandom({
@@ -288,12 +330,26 @@ async function seedDatabase() {
       throw new Error("No cms users found to assign as project officers");
     }
 
+    let stateSelection = sampleFromArray(person.personStates, 1)[0];
+    if (!stateSelection) {
+      const fallbackState = await prisma().state.findRandom();
+      if (!fallbackState) {
+        throw new Error("No states available to assign to demonstration");
+      }
+      stateSelection = { stateId: fallbackState.id, state: fallbackState, personId: person.id };
+    }
+
+    const stateName = stateSelection.state?.name ?? stateSelection.stateId;
+    const waiverType = sampleFromArray(demonstrationTypes, 1)[0];
+    const focusArea = sampleFromArray(healthFocusTitles, 1)[0];
+    const demoName = `${stateName} ${waiverType} Waiver: ${focusArea}`;
+
     const createInput: CreateDemonstrationInput = {
-      name: faker.lorem.words(3),
+      name: demoName,
       description: faker.lorem.sentence(),
       sdgDivision: sampleFromArray([...SDG_DIVISIONS, undefined], 1)[0],
       signatureLevel: sampleFromArray([...SIGNATURE_LEVEL, undefined], 1)[0],
-      stateId: sampleFromArray(person.personStates, 1)[0].stateId,
+      stateId: stateSelection.stateId,
       projectOfficerUserId: person.id,
     };
     await __createDemonstration(undefined, { input: createInput });
@@ -531,7 +587,6 @@ async function seedDatabase() {
   }
 
   await seedDocuments();
-
   console.log("🌱 Seeding events (with and without applicationIds)...");
 
   // Grab some applications for association