add stub for create model page

resources/js/Layouts/AppLayout.jsx

@@ -92,6 +92,12 @@ const navigationAboveLine = [
         icon: DocumentDuplicateIcon,
         visibility_type: VisibilityType.DATAKIND_ONLY,
       },
+      {
+        name: 'Create Model',
+        href: route('create-model'),
+        icon: ChartPieIcon,
+        visibility_type: VisibilityType.DATAKIND_ONLY,
+      },
     ],
   },
   {

resources/js/Pages/CreateModel.jsx

@@ -0,0 +1,147 @@
+import React, { useState } from 'react';
+import AppLayout from '@/Layouts/AppLayout';
+import { TrashIcon } from '@heroicons/react/24/outline';
+import axios from 'axios';
+import HeaderLabel from '@/Components/HeaderLabel';
+import {
+  Cog8ToothIcon,
+} from '@heroicons/react/24/outline';
+
+
+// Can be used to create new models or enable webapp access to existing models only created in databricks.
+export default function CreateModel() {
+     const schemas = [
+  { name: 'Custom', selected: false },
+  { name: 'PDP', selected: false },
+];
+  const handleSubmit = (event) => {
+    event.preventDefault();
+// API call here
+    return null;
+  };
+
+  return (
+    <AppLayout
+      title="Create Model"
+      renderHeader={() => (
+        <h2 className="font-semibold text-xl text-gray-800 leading-tight">
+          Create Model
+        </h2>
+      )}
+    >
+      <div className="flex w-full flex-col items-center">
+            <HeaderLabel
+          className="pl-12"
+          iconObj={
+            <Cog8ToothIcon aria-hidden="true" className="size-6 shrink-0" />
+          }
+          majorTitle="Admin Actions"
+          minorTitle="Create Model (Currently NOOP)"
+        ></HeaderLabel>
+        <form className="w-full max-w-full pl-36 pr-36 pt-24" onSubmit={handleSubmit}>
+          <div id="form_contents" className="flex flex-col gap-y-6">
+            <div className="flex flex-row w-full gap-x-6">
+              <div className="flex flex-col w-full">
+                <label
+                  className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
+                  id="model_name"
+                >
+                  Model Name
+                </label>
+                <input
+                  name="model_name"
+                  className="appearance-none block w-full bg-gray-200 text-gray-700 border border-red-500 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white"
+                  type="text"
+                  placeholder="Model Name (corresponding to the Databricks model name)"
+                ></input>
+                <p className="text-red-500 text-xs italic">Required field.</p>
+              </div>
+            </div>
+<div className="flex flex-row w-full gap-x-6">
+              <div className="flex flex-col w-1/2">
+                 <fieldset>
+      <legend className="text-base font-semibold text-gray-900">Batch schema configs accepted by this model</legend>
+      <div className="mt-4 divide-y divide-gray-200 border-b border-t border-gray-200">
+        {schemas.map((schem, idx) => (
+          <div key={idx} className=" flex gap-3">
+            <div className="min-w-0 flex-1 text-sm/6 ">
+            <input
+                  defaultChecked={schem.selected}
+                  id={`${schem.name}`}
+                  name={`${schem.name}`}
+                  type="checkbox"
+                  className="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-blue-600 checked:bg-blue-600 indeterminate:border-blue-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto"
+                />
+              <label htmlFor={`${schem.name}`} className="m-2 select-none font-medium text-gray-900">
+                {schem.name}
+              </label>
+            </div>
+            <div className="flex h-6 shrink-0 items-center">
+              <div className="group grid size-4 grid-cols-1">
+                <svg
+                  fill="none"
+                  viewBox="0 0 14 14"
+                  className="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25"
+                >
+                  <path
+                    d="M3 8L6 11L11 3.5"
+                    strokeWidth={2}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    className="opacity-0 group-has-[:checked]:opacity-100"
+                  />
+                  <path
+                    d="M3 7H11"
+                    strokeWidth={2}
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    className="opacity-0 group-has-[:indeterminate]:opacity-100"
+                  />
+                </svg>
+
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </fieldset>
+              </div>
+        <div className="flex flex-col w-1/2 hidden">
+                <label
+                  className="block uppercase tracking-wide text-gray-700 text-xs font-bold mb-2"
+                  id="pdp_id"
+                >
+                  PDP Institution ID
+                </label>
+                <input
+                  name="pdp_id"
+                  className="appearance-none block w-full bg-gray-200 text-gray-700 border border-gray-200 rounded py-3 px-4 mb-3 leading-tight focus:outline-none focus:bg-white focus:border-gray-500"
+                  type="number" min="1" max="100000"
+                ></input>
+                <p className="text-gray-600 text-xs italic">
+                  For PDP schools, please add the PDP_INST id of the institution.
+                </p>
+              </div>
+         </div>
+          </div>
+<div className="flex w-full justify-center pt-12 gap-x-6">
+ <button
+            type="reset"
+            className="flex bg-white text-[#f79222] border border-[#f79222] py-2 px-3 rounded-lg mb-4 justify-center items-center w-1/3"
+          >
+            Reset
+          </button>
+          <button
+            type="submit"
+            className="flex bg-[#f79222] text-white py-2 px-3 rounded-lg mb-4 justify-center items-center w-1/3"
+          >
+            Submit
+          </button>
+
+          </div>
+        </form>
+        <div id="result_area" className="flex pb-24 pt-12"></div>
+      </div>
+    </AppLayout>
+  );
+}

routes/web.php

@@ -112,6 +112,10 @@ function () {
         return Inertia::render('CreateInst');
     })->name('create-inst');
 
+    Route::get('/create-model', function () {
+        return Inertia::render('CreateModel');
+    })->name('create-model');
+
     Route::get('/set-inst', function () {
         return Inertia::render('SetInst');
     })->name('set-inst');