-
Notifications
You must be signed in to change notification settings - Fork 0
BSL-26 org application UI #23
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
This file was deleted.
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| "use client"; | ||
|
|
||
| import { useState } from "react"; | ||
| import PublicLayout from "@/components/layout/PublicLayout"; | ||
|
|
||
| type ProjectFormState = { | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. add: the application DB model requires submitterName and submitterEmail as top-level fields on every application record. and add the corresponding form fields for submitterName and submitterEmail |
||
| companyName: string; | ||
| projectTitle: string; | ||
| budget: string; | ||
| description: string; | ||
| }; | ||
|
|
||
| export default function CompanyProjectPage() { | ||
| const [form, setForm] = useState<ProjectFormState>({ | ||
| companyName: "", | ||
| projectTitle: "", | ||
| budget: "", | ||
| description: "", | ||
| }); | ||
|
|
||
| function updateField<K extends keyof ProjectFormState>( | ||
| key: K, | ||
| value: string, | ||
| ) { | ||
| setForm((prev) => ({ ...prev, [key]: value })); | ||
| } | ||
|
|
||
| function handleSubmit(e: React.FormEvent) { | ||
| e.preventDefault(); | ||
| console.log("Submitting Company Project:", form); | ||
| alert("Project details logged to console!"); | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. remove the alert() |
||
| } | ||
|
|
||
| return ( | ||
| <PublicLayout> | ||
| <div className="mx-auto max-w-2xl px-6 py-12"> | ||
| <header className="mb-10"> | ||
| <h1 className="text-3xl font-bold text-gray-900"> | ||
| New Company Project | ||
| </h1> | ||
| <p className="mt-2 text-gray-600"> | ||
| Submit your project proposal for review. All fields are required. | ||
| </p> | ||
| </header> | ||
|
|
||
| <form onSubmit={handleSubmit} className="space-y-6"> | ||
| {/* Company Name Field */} | ||
| <div className="flex flex-col gap-2"> | ||
| <label htmlFor="companyName" className="text-sm font-semibold"> | ||
| Company / Organization Name | ||
| </label> | ||
| <input | ||
| id="companyName" | ||
| type="text" | ||
| required | ||
| value={form.companyName} | ||
| onChange={(e) => updateField("companyName", e.target.value)} | ||
| className="rounded-md border border-gray-300 px-3 py-2 focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500" | ||
| placeholder="Acme Corp" | ||
| /> | ||
| </div> | ||
|
|
||
| <div className="grid grid-cols-1 gap-6 md:grid-cols-2"> | ||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. This grid has only one child.. projectTitle is rendering at half-width on desktop with nothing next to it. So either remove the grid wrapper and use the same flex flex-col gap-2 as your other fields, or place the skillsNeeded field which I recommended as the second column here if that layout makes sense. Would probably just remove the grid, but you can experiment. |
||
| {/* Project Title Field */} | ||
| <div className="flex flex-col gap-2"> | ||
| <label htmlFor="projectTitle" className="text-sm font-semibold"> | ||
| Project Title | ||
| </label> | ||
| <input | ||
| id="projectTitle" | ||
| type="text" | ||
| required | ||
| value={form.projectTitle} | ||
| onChange={(e) => updateField("projectTitle", e.target.value)} | ||
| className="rounded-md border border-gray-300 px-3 py-2" | ||
| placeholder="Internal CRM Redesign" | ||
| /> | ||
| </div> | ||
| </div> | ||
|
|
||
| {/* Budget Field */} | ||
| <div className="flex flex-col gap-2"> | ||
| <label htmlFor="budget" className="text-sm font-semibold"> | ||
| Estimated Budget | ||
| </label> | ||
| <input | ||
| id="budget" | ||
| type="text" | ||
| required | ||
| value={form.budget} | ||
| onChange={(e) => updateField("budget", e.target.value)} | ||
| className="rounded-md border border-gray-300 px-3 py-2" | ||
| placeholder="e.g. $25,000" | ||
| /> | ||
| </div> | ||
|
|
||
| {/* Description Field */} | ||
| <div className="flex flex-col gap-2"> | ||
| <label htmlFor="description" className="text-sm font-semibold"> | ||
| Project Description | ||
| </label> | ||
| <textarea | ||
| id="description" | ||
| required | ||
| rows={4} | ||
| value={form.description} | ||
| onChange={(e) => updateField("description", e.target.value)} | ||
| className="rounded-md border border-gray-300 px-3 py-2" | ||
| placeholder="Outline the main objectives and deliverables..." | ||
| /> | ||
| </div> | ||
|
|
||
|
Collaborator
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Let's also add a skills needed part as part of the org application... something like this would do: (also I made the comment above to add the skillsNeeded: string to ProjectFormState |
||
| {/* Form Actions */} | ||
| <div className="pt-4"> | ||
| <button | ||
| type="submit" | ||
| className="w-full rounded-md bg-blue-600 px-4 py-2 text-white font-medium hover:bg-blue-700 transition-colors" | ||
| > | ||
| Submit | ||
| </button> | ||
| </div> | ||
| </form> | ||
| </div> | ||
| </PublicLayout> | ||
| ); | ||
| } | ||
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
(FIX THIS LATER ONCE BSL-24 MERGED IN)
For lines 49–51, 52–60, 66–68, 69–77, 83–85, 86–94, 99–101, 102–110, 115–120:
use shared UI components that were created in BSL-24, once that is merged in...
Currently every form element in the file is a raw HTML element with inline Tailwind instead of the , , <textarea>, and components built in BSL-24.. so once that is merged in use that instead
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Once BSL-24 is merged in, you will have to rebase on main to be able to use the shared components