feat: clean up new project page

Author: sifferhans

frontend/app/components/admin/DateRangeField.vue

@@ -1,19 +1,23 @@
 <script setup lang="ts">
 import { parseDate, type DateValue } from '@internationalized/date'
 
+const props = defineProps<{
+  placeholder?: string
+}>()
+
 const start = defineModel<string>('start')
 const end = defineModel<string>('end')
 
 const isOpen = ref(false)
 
 function toDateString(dateStr: string | undefined): string | undefined {
-  if (!dateStr) return undefined
+  if (!dateStr || dateStr.trim() === '') return undefined
   // Handle both ISO timestamps and date-only strings
   return dateStr.split('T')[0]
 }
 
 function toCalendarDate(dateStr: string | undefined): DateValue | undefined {
-  if (!dateStr) return undefined
+  if (!dateStr || dateStr.trim() === '') return undefined
   const dateOnly = toDateString(dateStr)
   if (!dateOnly) return undefined
   try {
@@ -76,9 +80,9 @@ const range = computed<{ start: DateValue; end: DateValue } | undefined>({
 })
 
 function formatDate(dateStr: string | undefined) {
-  if (!dateStr) return ''
+  if (!dateStr || dateStr.trim() === '') return undefined
   const dateOnly = toDateString(dateStr)
-  if (!dateOnly) return ''
+  if (!dateOnly) return undefined
   const date = new Date(dateOnly + 'T00:00:00')
   return date.toLocaleDateString('en-US', {
     month: 'short',
@@ -100,19 +104,14 @@ const displayValue = computed(() => {
   if (endFormatted) {
     return endFormatted
   }
-  return ''
+  return props.placeholder || 'Select a date range'
 })
 </script>
 
 <template>
   <UFormField label="Project duration">
     <UPopover v-model:open="isOpen" :ui="{ content: 'p-1' }">
-      <UInput
-        :model-value="displayValue"
-        placeholder="Select date range"
-        readonly
-        icon="lucide:calendar"
-      />
+      <UInput :model-value="displayValue" readonly icon="lucide:calendar" />
       <template #content>
         <UCalendar v-model="range" range />
       </template>

frontend/app/pages/admin/projects/[projectId]/edit.vue

@@ -173,7 +173,6 @@ async function updateProject(event: FormSubmitEvent<Schema>) {
         </UFormField>
         <UButton type="submit" size="lg" block>Save changes</UButton>
       </UForm>
-      <pre>{{ state }}</pre>
     </UContainer>
   </div>
 </template>

frontend/app/pages/admin/projects/new.vue

@@ -90,38 +90,32 @@ async function createProject(event: FormSubmitEvent<Schema>) {
         />
       </UContainer>
     </div>
-    <UContainer>
+    <UContainer class="py-12">
       <UForm
         :state
         :schema="schema"
-        class="space-y-6 py-12"
+        class="flex max-w-md flex-col gap-6"
         @submit.prevent="createProject"
       >
-        <UFormField name="name" label="Name" required>
-          <UInput
-            v-model="state.name"
-            placeholder="New project"
-            size="xl"
-            type="text"
-            autofocus
-            required
-          />
+        <UFormField name="name" label="Name">
+          <UInput v-model="state.name" size="xl" required class="w-full" />
         </UFormField>
-        <UFormField name="description" label="Description">
-          <UTextarea v-model="state.description" class="w-sm" autoresize />
+        <UFormField
+          name="description"
+          label="Description"
+          hint="(optional)"
+          help="This is only for admins to have better context"
+        >
+          <UTextarea v-model="state.description" class="w-full" autoresize />
         </UFormField>
-        <div class="flex gap-4">
-          <UFormField name="startDate" label="Starts at" required>
-            <UInput v-model="state.startDate" type="date" required />
-          </UFormField>
-          <UFormField name="endDate" label="Ends at" required>
-            <UInput v-model="state.endDate" type="date" required />
-          </UFormField>
-        </div>
+        <DateRangeField
+          v-model:start="state.startDate"
+          v-model:end="state.endDate"
+        />
         <UFormField label="Accent color">
           <ColorPickerInput v-model="state.branding.colors.primary" />
         </UFormField>
-        <UButton type="submit">Create project</UButton>
+        <UButton type="submit" size="lg" block>Create project</UButton>
       </UForm>
     </UContainer>
   </div>