Rodrigo Rodriguez (Pragmatismo)
d4082b612a
- CRM: Pipeline view with Lead → Opportunity → Account flow (Dynamics nomenclature) - Kanban pipeline with stages: Lead, Qualified, Proposal, Negotiation, Won, Lost - List views for Leads, Opportunities, Accounts, Contacts - Summary stats: Pipeline value, Conversion rate, Avg deal, Won this month - Billing: Invoices, Payments, Quotes management - Summary cards: Pending, Overdue, Paid this month, Revenue - Invoice list with status filters (draft, sent, paid, overdue, cancelled) - Payments tracking with method filters - Quotes with status workflow (draft → sent → accepted/rejected) - Products: Product & Service catalog - Grid and List views with category/status filters - Services tab with type filters (hourly, fixed, recurring) - Price Lists management with currency support - Tickets: AI-assisted support cases - Case management with priority/category filters - AI suggestion banner and auto-suggestions on description - List + Detail split view - Summary stats: Open, Urgent, Resolved today, AI resolved % - Forms: Redirect to Tasks with AI prompt - Quick example chips for common form types - Redirects to Tasks with 'Create a form for me about [topic]' - Menu: Added all 5 apps to dropdown menu after People - i18n: Added nav labels in English and Portuguese
350 lines
10 KiB
HTML
350 lines
10 KiB
HTML
<!-- Forms - Redirect to Tasks with AI Form Generation -->
|
|
<!-- This page redirects to Tasks with a pre-filled AI prompt to create forms -->
|
|
|
|
<link rel="stylesheet" href="/suite/forms/forms.css" />
|
|
|
|
<div class="forms-container">
|
|
<div class="forms-redirect-card">
|
|
<div class="forms-icon">
|
|
<svg
|
|
width="64"
|
|
height="64"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="1.5"
|
|
>
|
|
<path
|
|
d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"
|
|
/>
|
|
<polyline points="14 2 14 8 20 8" />
|
|
<line x1="16" y1="13" x2="8" y2="13" />
|
|
<line x1="16" y1="17" x2="8" y2="17" />
|
|
<line x1="10" y1="9" x2="8" y2="9" />
|
|
</svg>
|
|
</div>
|
|
|
|
<h1 class="forms-title" data-i18n="forms-title">Create a Form</h1>
|
|
|
|
<p class="forms-description" data-i18n="forms-description">
|
|
Use AI to generate custom forms, surveys, and questionnaires.
|
|
Describe what you need and let the assistant build it for you.
|
|
</p>
|
|
|
|
<div class="forms-input-group">
|
|
<label class="forms-label" data-i18n="forms-what-form">
|
|
What kind of form do you need?
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="forms-topic"
|
|
class="forms-input"
|
|
placeholder="e.g., Customer feedback survey, Event registration, Contact form..."
|
|
data-i18n-placeholder="forms-topic-placeholder"
|
|
autofocus
|
|
/>
|
|
</div>
|
|
|
|
<div class="forms-examples">
|
|
<span class="forms-examples-label" data-i18n="forms-examples"
|
|
>Quick examples:</span
|
|
>
|
|
<div class="forms-example-chips">
|
|
<button
|
|
class="forms-chip"
|
|
data-topic="customer satisfaction survey"
|
|
>
|
|
Customer Survey
|
|
</button>
|
|
<button class="forms-chip" data-topic="event registration form">
|
|
Event Registration
|
|
</button>
|
|
<button class="forms-chip" data-topic="job application form">
|
|
Job Application
|
|
</button>
|
|
<button
|
|
class="forms-chip"
|
|
data-topic="contact form with name, email and message"
|
|
>
|
|
Contact Form
|
|
</button>
|
|
<button class="forms-chip" data-topic="product feedback form">
|
|
Product Feedback
|
|
</button>
|
|
<button
|
|
class="forms-chip"
|
|
data-topic="newsletter subscription form"
|
|
>
|
|
Newsletter Signup
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<button class="forms-submit-btn" id="forms-create-btn">
|
|
<svg
|
|
width="20"
|
|
height="20"
|
|
viewBox="0 0 24 24"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path
|
|
d="M12 2a2 2 0 0 1 2 2c0 .74-.4 1.39-1 1.73V7h1a7 7 0 0 1 7 7h1a1 1 0 0 1 1 1v3a1 1 0 0 1-1 1h-1v1a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-1H2a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a7 7 0 0 1 7-7h1V5.73c-.6-.34-1-.99-1-1.73a2 2 0 0 1 2-2z"
|
|
/>
|
|
<circle cx="7.5" cy="14.5" r="1.5" />
|
|
<circle cx="16.5" cy="14.5" r="1.5" />
|
|
</svg>
|
|
<span data-i18n="forms-create">Create Form with AI</span>
|
|
</button>
|
|
|
|
<p class="forms-hint" data-i18n="forms-hint">
|
|
You'll be redirected to Tasks where AI will generate your form
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function () {
|
|
const topicInput = document.getElementById("forms-topic");
|
|
const createBtn = document.getElementById("forms-create-btn");
|
|
const chips = document.querySelectorAll(".forms-chip");
|
|
|
|
// Handle chip clicks
|
|
chips.forEach((chip) => {
|
|
chip.addEventListener("click", function () {
|
|
topicInput.value = this.dataset.topic;
|
|
topicInput.focus();
|
|
});
|
|
});
|
|
|
|
// Handle create button
|
|
createBtn.addEventListener("click", function () {
|
|
redirectToTasks();
|
|
});
|
|
|
|
// Handle Enter key
|
|
topicInput.addEventListener("keydown", function (e) {
|
|
if (e.key === "Enter") {
|
|
redirectToTasks();
|
|
}
|
|
});
|
|
|
|
function redirectToTasks() {
|
|
const topic = topicInput.value.trim();
|
|
if (!topic) {
|
|
topicInput.focus();
|
|
topicInput.classList.add("error");
|
|
setTimeout(() => topicInput.classList.remove("error"), 1000);
|
|
return;
|
|
}
|
|
|
|
const prompt = `Create a form for me about: ${topic}`;
|
|
|
|
// Navigate to tasks with the AI prompt
|
|
// The prompt will be passed as a query parameter or stored in sessionStorage
|
|
sessionStorage.setItem("ai-task-prompt", prompt);
|
|
|
|
// Use HTMX to navigate to tasks
|
|
window.location.hash = "#tasks";
|
|
htmx.ajax("GET", "/suite/tasks/tasks.html", "#main-content").then(
|
|
() => {
|
|
// After tasks loads, trigger the AI prompt
|
|
setTimeout(() => {
|
|
const taskInput = document.querySelector(
|
|
"#task-ai-input, .task-input, [data-ai-input]",
|
|
);
|
|
if (taskInput) {
|
|
taskInput.value = prompt;
|
|
taskInput.focus();
|
|
// Trigger input event for any listeners
|
|
taskInput.dispatchEvent(
|
|
new Event("input", { bubbles: true }),
|
|
);
|
|
}
|
|
}, 300);
|
|
},
|
|
);
|
|
}
|
|
|
|
// Initialize i18n if available
|
|
if (window.i18n && window.i18n.translatePage) {
|
|
window.i18n.translatePage();
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
<style>
|
|
.forms-container {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100%;
|
|
padding: 40px 24px;
|
|
background: var(--bg-primary, #0a0a0a);
|
|
}
|
|
|
|
.forms-redirect-card {
|
|
max-width: 560px;
|
|
width: 100%;
|
|
padding: 48px;
|
|
background: var(--surface, rgba(255, 255, 255, 0.02));
|
|
border: 1px solid var(--border, #2a2a2a);
|
|
border-radius: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
.forms-icon {
|
|
margin-bottom: 24px;
|
|
color: var(--accent, #d4f505);
|
|
}
|
|
|
|
.forms-title {
|
|
font-size: 28px;
|
|
font-weight: 700;
|
|
color: var(--text, #f8fafc);
|
|
margin: 0 0 12px 0;
|
|
}
|
|
|
|
.forms-description {
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
color: var(--text-secondary, #888);
|
|
margin: 0 0 32px 0;
|
|
}
|
|
|
|
.forms-input-group {
|
|
text-align: left;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.forms-label {
|
|
display: block;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--text, #f8fafc);
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.forms-input {
|
|
width: 100%;
|
|
padding: 14px 16px;
|
|
background: var(--bg-primary, #0a0a0a);
|
|
border: 2px solid var(--border, #2a2a2a);
|
|
border-radius: 10px;
|
|
color: var(--text, #f8fafc);
|
|
font-size: 15px;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.forms-input:focus {
|
|
outline: none;
|
|
border-color: var(--accent, #d4f505);
|
|
box-shadow: 0 0 0 4px rgba(212, 245, 5, 0.1);
|
|
}
|
|
|
|
.forms-input.error {
|
|
border-color: var(--error, #ef4444);
|
|
animation: shake 0.3s ease;
|
|
}
|
|
|
|
.forms-input::placeholder {
|
|
color: var(--text-secondary, #666);
|
|
}
|
|
|
|
@keyframes shake {
|
|
0%,
|
|
100% {
|
|
transform: translateX(0);
|
|
}
|
|
25% {
|
|
transform: translateX(-4px);
|
|
}
|
|
75% {
|
|
transform: translateX(4px);
|
|
}
|
|
}
|
|
|
|
.forms-examples {
|
|
text-align: left;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.forms-examples-label {
|
|
display: block;
|
|
font-size: 12px;
|
|
color: var(--text-secondary, #888);
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.forms-example-chips {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 8px;
|
|
}
|
|
|
|
.forms-chip {
|
|
padding: 8px 14px;
|
|
background: transparent;
|
|
border: 1px solid var(--border, #2a2a2a);
|
|
border-radius: 20px;
|
|
color: var(--text-secondary, #888);
|
|
font-size: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.forms-chip:hover {
|
|
border-color: var(--accent, #d4f505);
|
|
color: var(--accent, #d4f505);
|
|
background: rgba(212, 245, 5, 0.05);
|
|
}
|
|
|
|
.forms-submit-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
width: 100%;
|
|
padding: 16px 24px;
|
|
background: var(--accent, #d4f505);
|
|
color: #000;
|
|
border: none;
|
|
border-radius: 10px;
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.forms-submit-btn:hover {
|
|
background: var(--accent-hover, #c4e505);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 8px 24px rgba(212, 245, 5, 0.2);
|
|
}
|
|
|
|
.forms-submit-btn:active {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.forms-hint {
|
|
font-size: 12px;
|
|
color: var(--text-secondary, #666);
|
|
margin: 16px 0 0 0;
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
.forms-redirect-card {
|
|
padding: 32px 24px;
|
|
}
|
|
|
|
.forms-title {
|
|
font-size: 24px;
|
|
}
|
|
|
|
.forms-icon svg {
|
|
width: 48px;
|
|
height: 48px;
|
|
}
|
|
}
|
|
</style>
|