Skip to content

feat!: Migrate dashboard to frappe-ui v1 (and Vite 8) #272

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.

Sign up for GitHub

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

Merged
harshtandiya merged 13 commits into from
Jul 23, 2026
Merged

feat!: Migrate dashboard to frappe-ui v1 (and Vite 8) #272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
5cd520c
chore(dashboard): upgrade frappe-ui to v1 and drop dev submodule
harshtandiya Jul 22, 2026
d0cc4ff
refactor(dashboard): adopt frappe-ui v1 Dialog props and lucide icons
harshtandiya Jul 22, 2026
d0ea5c2
fix(dashboard): restore Zoom button hover color under frappe-ui v1
harshtandiya Jul 22, 2026
becb2b8
refactor(dashboard): drop unused legacy Input global component
harshtandiya Jul 22, 2026
0ffd66e
fix(dashboard): pre-bundle nested feather-icons so the dev app mounts
harshtandiya Jul 22, 2026
8e78e75
fix(dashboard): migrate to frappe-ui v1 design tokens and fix theming
harshtandiya Jul 22, 2026
830d736
refactor(dashboard): migrate proposal editor to frappe-ui v1 Editor
harshtandiya Jul 22, 2026
4a90e41
build(dashboard): upgrade to Vite 8 and drop dead auto-import dep
harshtandiya Jul 22, 2026
b394359
chore: change green shade for better visiblity
harshtandiya Jul 22, 2026
46187db
test(e2e): drive proposal category through the listbox
harshtandiya Jul 22, 2026
5d46e48
fix(dashboard): inline add-on dialog props and drop e2e regex matcher
harshtandiya Jul 22, 2026
97c0167
Merge branch 'develop' into feat/frappe-ui-v1
harshtandiya Jul 23, 2026
b345d41
style(dashboard): bump success green to ink-green-6 for readability
harshtandiya Jul 23, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 0 additions & 3 deletions .gitmodules
View file
Open in desktop

This file was deleted.

8 changes: 4 additions & 4 deletions dashboard/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
/* eslint-disable */
// @ts-nocheck
// biome-ignore lint: disable
// oxlint-disable
// ------
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
// biome-ignore lint: disable

export {}

/* prettier-ignore */
Expand All @@ -29,9 +32,6 @@ declare module 'vue' {
LanguageSwitcher: typeof import('./src/components/LanguageSwitcher.vue')['default']
LoginDialog: typeof import('./src/components/LoginDialog.vue')['default']
LoginRequired: typeof import('./src/components/LoginRequired.vue')['default']
LucideCheckCircle: typeof import('~icons/lucide/check-circle')['default']
LucideClock: typeof import('~icons/lucide/clock')['default']
LucideXCircle: typeof import('~icons/lucide/x-circle')['default']
Navbar: typeof import('./src/components/Navbar.vue')['default']
OfflinePaymentDialog: typeof import('./src/components/OfflinePaymentDialog.vue')['default']
PaymentGatewayDialog: typeof import('./src/components/PaymentGatewayDialog.vue')['default']
Expand Down
1 change: 0 additions & 1 deletion dashboard/frappe-ui
Open in desktop
Submodule frappe-ui deleted from a43be7
16 changes: 11 additions & 5 deletions dashboard/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,23 +17,29 @@
"@vueuse/router": "^13.6.0",
"canvas-confetti": "^1.9.3",
"feather-icons": "^4.29.2",
"frappe-ui": "^0.1.257",
"frappe-ui": "1.0.0-beta.25",
"socket.io-client": "^4.7.2",
"vue": "^3.5.13",
"vue-router": "^4.5.0"
},
"resolutions": {
"prosemirror-keymap": "^1.2.3",
"prosemirror-model": "^1.25.11",
"prosemirror-state": "^1.4.4",
"prosemirror-transform": "^1.12.0",
"prosemirror-view": "^1.42.1"
},
"devDependencies": {
"@biomejs/biome": "1.9.4",
"@types/canvas-confetti": "^1.9.0",
"@types/node": "^25.2.0",
"@vitejs/plugin-vue": "^5.1.4",
"@vitejs/plugin-vue": "^6.0.8",
"autoprefixer": "^10.4.2",
"html5-qrcode": "^2.3.8",
"postcss": "^8.4.5",
"tailwindcss": "^3.4.15",
"typescript": "^5.9.3",
"unplugin-auto-import": "0.18.6",
"vite": "^5.4.10",
"vue-tsc": "^3.2.4"
"vite": "^8.1.5",
"vue-tsc": "^3.3.7"
}
}
51 changes: 22 additions & 29 deletions dashboard/src/components/AddOnPreferenceDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,29 @@
<template>
<Dialog v-model="show" :options="dialogOptions">
<template #body-content>
<div class="space-y-4">
<p class="text-ink-gray-8">
Update your add-on preferences for <strong>{{ ticket.attendee_name }}</strong>
</p>

<div v-if="addOnsWithOptions.length === 0" class="text-center py-4">
<p class="text-ink-gray-6">No customizable add-ons found for this ticket.</p>
</div>
<Dialog v-model="show" :title="__('Update Add-on Preferences')" size="lg">
<div class="space-y-4">
<p class="text-ink-gray-8">
Update your add-on preferences for <strong>{{ ticket.attendee_name }}</strong>
</p>

<div v-if="addOnsWithOptions.length === 0" class="text-center py-4">
<p class="text-ink-gray-6">No customizable add-ons found for this ticket.</p>
</div>

<div v-else class="space-y-4">
<div v-for="addon in addOnsWithOptions" :key="addon.id" class="space-y-2">
<label class="block text-sm font-medium text-ink-gray-8">
{{ __(addon.title ?? "") }}
</label>
<p class="text-xs text-ink-gray-6 mb-2">Current: {{ addon.value }}</p>
<FormControl
type="select"
:options="addon.selectOptions"
v-model="preferences[addon.id ?? '']"
:placeholder="`Select ${(addon.title ?? '').toLowerCase()}`"
/>
</div>
<div v-else class="space-y-4">
<div v-for="addon in addOnsWithOptions" :key="addon.id" class="space-y-2">
<label class="block text-sm-medium text-ink-gray-8">
{{ __(addon.title ?? "") }}
</label>
<p class="text-xs text-ink-gray-6 mb-2">Current: {{ addon.value }}</p>
<FormControl
type="select"
:options="addon.selectOptions"
v-model="preferences[addon.id ?? '']"
:placeholder="`Select ${(addon.title ?? '').toLowerCase()}`"
/>
</div>
</div>
</template>
</div>

<template #actions="{ close }">
<div class="flex space-x-2">
Expand Down Expand Up @@ -91,11 +89,6 @@ const hasChanges = computed(() => {
});
});

const dialogOptions = {
title: "Update Add-on Preferences",
size: "lg" as const,
};

// Initialize preferences when dialog opens
watch(
() => props.modelValue,
Expand Down
8 changes: 3 additions & 5 deletions dashboard/src/components/AttendeeFormControl.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,20 @@
<!-- AttendeeCard.vue -->
<template>
<div
class="bg-surface-white border border-outline-gray-3 rounded-xl p-4 md:p-6 mb-6 shadow-sm relative"
class="bg-surface-base border border-outline-gray-3 rounded-xl p-4 md:p-6 mb-6 shadow-sm relative"
>
<!-- Remove Button -->

<div class="flex justify-between items-start mb-4 border-b pb-2">
<h4 class="text-lg font-semibold text-ink-gray-9">
{{ __("Attendee") }} #{{ index + 1 }}
</h4>
<h4 class="text-lg-semibold text-ink-gray-9">{{ __("Attendee") }} #{{ index + 1 }}</h4>

<Tooltip :text="__('Remove Attendee')" :hover-delay="0.5">
<Button
v-if="showRemove"
@click="$emit('remove')"
type="button"
theme="red"
icon="x"
icon="lucide-x"
/>
</Tooltip>
</div>
Expand Down
63 changes: 29 additions & 34 deletions dashboard/src/components/BaseCustomEventForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,16 @@

<div v-else-if="submitted" class="text-center">
<div class="bg-surface-green-1 border border-outline-green-1 rounded-lg p-8">
<LucideCheckCircle class="w-16 h-16 text-ink-green-2 mx-auto mb-4" />
<h2 class="text-ink-green-3 font-semibold text-xl mb-2">
<LucideCheckCircle class="w-16 h-16 text-ink-green-6 mx-auto mb-4" />
<h2 class="text-ink-green-6 text-2xl-semibold mb-2">
{{ formData?.success_title }}
</h2>
<div
v-if="renderedSuccessMessage"
class="prose prose-sm max-w-none text-ink-green-2"
class="prose prose-sm max-w-none text-ink-green-6"
v-html="renderedSuccessMessage"
></div>
<p v-else class="text-ink-green-2">
<p v-else class="text-ink-green-6">
{{ __("Your submission has been received.") }}
</p>
</div>
Expand All @@ -28,11 +28,11 @@

<div v-else-if="formData?.closed" class="text-center">
<div class="bg-surface-amber-1 border border-outline-amber-1 rounded-lg p-8">
<LucideAlertCircle class="w-16 h-16 text-ink-amber-3 mx-auto mb-4" />
<h2 class="text-ink-amber-3 font-semibold text-xl mb-2">
<LucideAlertCircle class="w-16 h-16 text-ink-amber-6 mx-auto mb-4" />
<h2 class="text-ink-amber-6 text-2xl-semibold mb-2">
{{ formData.closed_title }}
</h2>
<p class="text-ink-amber-2">
<p class="text-ink-amber-5">
{{ formData.closed_message }}
</p>
</div>
Expand All @@ -42,10 +42,10 @@
<EventDetailsHeader :event-details="formData.event" />

<form
class="bg-surface-white border border-outline-gray-1 rounded-lg p-6"
class="bg-surface-base border border-outline-gray-1 rounded-lg p-6"
@submit.prevent="handleSubmit"
>
<h1 class="text-ink-gray-9 font-bold text-2xl mb-6">
<h1 class="text-ink-gray-9 text-3xl-bold mb-6">
{{ formData.form_title }}
</h1>

Expand Down Expand Up @@ -119,38 +119,33 @@

<div v-else-if="loadError" class="text-center">
<div class="bg-surface-amber-1 border border-outline-amber-1 rounded-lg p-8">
<LucideAlertCircle class="w-16 h-16 text-ink-amber-3 mx-auto mb-4" />
<h2 class="text-ink-amber-3 font-semibold text-xl mb-2">
<LucideAlertCircle class="w-16 h-16 text-ink-amber-6 mx-auto mb-4" />
<h2 class="text-ink-amber-6 text-2xl-semibold mb-2">
{{ __("Not Found") }}
</h2>
<p class="text-ink-amber-2">
<p class="text-ink-amber-5">
{{ loadError }}
</p>
</div>
</div>

<Dialog v-model="tableDialog.open" :options="{ title: tableDialog.title }">
<template #body-content>
<form @submit.prevent="saveTableRow">
<div class="space-y-4">
<template
v-for="childField in tableDialog.fields"
:key="childField.fieldname"
>
<CustomFieldInput
:field="normalizeField(childField)"
:model-value="tableDialog.rowData[childField.fieldname]"
@update:model-value="
tableDialog.rowData[childField.fieldname] = $event
"
/>
</template>
</div>
<Button variant="solid" type="submit" class="mt-4">
{{ tableDialog.editIndex !== null ? __("Update") : __("Add") }}
</Button>
</form>
</template>
<Dialog v-model="tableDialog.open" :title="tableDialog.title">
<form @submit.prevent="saveTableRow">
<div class="space-y-4">
<template v-for="childField in tableDialog.fields" :key="childField.fieldname">
<CustomFieldInput
:field="normalizeField(childField)"
:model-value="tableDialog.rowData[childField.fieldname]"
@update:model-value="
tableDialog.rowData[childField.fieldname] = $event
"
/>
</template>
</div>
<Button variant="solid" type="submit" class="mt-4">
{{ tableDialog.editIndex !== null ? __("Update") : __("Add") }}
</Button>
</form>
</Dialog>
</div>
</template>
Expand Down
8 changes: 3 additions & 5 deletions dashboard/src/components/BillingDetails.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
<template>
<div
class="bg-surface-white border border-outline-gray-3 rounded-xl p-4 md:p-6 mb-6 shadow-sm"
>
<h3 class="text-base font-medium text-ink-gray-8 border-b pb-2 mb-4">
<div class="bg-surface-base border border-outline-gray-3 rounded-xl p-4 md:p-6 mb-6 shadow-sm">
<h3 class="text-base-medium text-ink-gray-8 border-b pb-2 mb-4">
{{ __("Billing Details") }}
</h3>
<div class="flex flex-col gap-4">
Expand All @@ -23,7 +21,7 @@
<div class="space-y-1.5">
<label class="text-xs text-ink-gray-5 block">
{{ __("Billing Address") }}
<span class="text-ink-red-4">*</span>
<span class="text-ink-red-8">*</span>
</label>
<Textarea
:model-value="billingAddress"
Expand Down
10 changes: 5 additions & 5 deletions dashboard/src/components/BookingEventInfo.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="bg-surface-cards border border-outline-gray-1 rounded-lg p-6">
<div class="bg-surface-elevation-1 border border-outline-gray-1 rounded-lg p-6">
<div class="mb-8 flex items-center justify-between">
<h3 class="text-lg font-semibold text-ink-gray-9">{{ event.title }}</h3>
<h3 class="text-lg-semibold text-ink-gray-9">{{ event.title }}</h3>

<Button
:link="`/events/${event.route}`"
Expand All @@ -17,7 +17,7 @@
<div>
<div class="flex items-center text-ink-gray-6 mb-1">
<LucideCalendarDays class="w-4 h-4 mr-2 flex-shrink-0" />
<span class="text-sm font-medium">{{ __("Start Date") }}</span>
<span class="text-sm-medium">{{ __("Start Date") }}</span>
</div>
<p class="text-ink-gray-9 font-medium">
{{ formatEventDateTime(event.start_date, event.start_time) }}
Expand All @@ -28,7 +28,7 @@
<div v-if="event.end_date">
<div class="flex items-center text-ink-gray-6 mb-1">
<LucideCalendarDays class="w-4 h-4 mr-2 flex-shrink-0" />
<span class="text-sm font-medium">{{ __("End Date") }}</span>
<span class="text-sm-medium">{{ __("End Date") }}</span>
</div>
<p class="text-ink-gray-9 font-medium">
{{ formatEventDateTime(event.end_date, event.end_time) }}
Expand All @@ -39,7 +39,7 @@
<div v-if="venue">
<div class="flex items-center text-ink-gray-6 mb-1">
<LucideMapPin class="w-4 h-4 mr-2 flex-shrink-0" />
<span class="text-sm font-medium">{{ __("Venue") }}</span>
<span class="text-sm-medium">{{ __("Venue") }}</span>
</div>
<p class="text-ink-gray-9 font-medium">{{ venue.name }}</p>
<p v-if="venue.address" class="text-sm text-ink-gray-6 mt-1">
Expand Down
8 changes: 4 additions & 4 deletions dashboard/src/components/BookingFinancialSummary.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="bg-surface-cards border border-outline-gray-1 rounded-lg p-6">
<div class="bg-surface-elevation-1 border border-outline-gray-1 rounded-lg p-6">
<div class="flex items-center justify-between mb-4">
<h3 class="text-lg font-semibold text-ink-gray-9">{{ __("Payment Summary") }}</h3>
<h3 class="text-lg-semibold text-ink-gray-9">{{ __("Payment Summary") }}</h3>
<Badge
v-if="(booking.total_amount || 0) > 0"
variant="subtle"
Expand Down Expand Up @@ -63,9 +63,9 @@
<hr class="border-outline-gray-1" />

<!-- Total Amount -->
<div class="flex justify-between items-center text-lg font-semibold text-ink-gray-9">
<div class="flex justify-between items-center text-lg-semibold text-ink-gray-9">
<span>{{ isPaid ? __("Total Paid") : __("Total") }}</span>
<span :class="isPaid ? 'text-ink-green-2' : 'text-ink-gray-9'">{{
<span :class="isPaid ? 'text-ink-green-6' : 'text-ink-gray-9'">{{
formatPrice(booking.total_amount || 0, booking.currency || "INR")
}}</span>
</div>
Expand Down
Loading
Loading