75 lines
4.4 KiB
Text
75 lines
4.4 KiB
Text
<%= form_with(model: credit_card_bill, class: "space-y-6") do |form| %>
|
|
<% if credit_card_bill.errors.any? %>
|
|
<div id="error_explanation" class="bg-red-50 border border-red-200 text-red-600 px-4 py-3 rounded-lg">
|
|
<div class="flex">
|
|
<div class="flex-shrink-0">
|
|
<svg class="h-5 w-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-3">
|
|
<h3 class="text-sm font-medium"><%= pluralize(credit_card_bill.errors.count, "error") %> prohibited this credit card bill from being saved:</h3>
|
|
<div class="mt-2 text-sm">
|
|
<ul class="list-disc list-inside space-y-1">
|
|
<% credit_card_bill.errors.each do |error| %>
|
|
<li><%= error.full_message %></li>
|
|
<% end %>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4 sm:p-6 lg:p-8">
|
|
<div class="flex items-center mb-6">
|
|
<div class="flex-shrink-0">
|
|
<svg class="h-8 w-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z"/>
|
|
</svg>
|
|
</div>
|
|
<div class="ml-4">
|
|
<h3 class="text-lg font-medium text-gray-900">Credit Card Bill Information</h3>
|
|
<p class="text-sm text-gray-500">Enter the details for this credit card statement</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
|
|
<div class="lg:col-span-2">
|
|
<%= form.label :description, class: "block text-sm font-medium text-gray-700" %>
|
|
<%= form.text_field :description, class: "mt-1 block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm", placeholder: "e.g., Chase Sapphire - January 2024" %>
|
|
<p class="mt-1 text-sm text-gray-500">A description to identify this credit card bill</p>
|
|
</div>
|
|
|
|
<div>
|
|
<%= form.label :amount, class: "block text-sm font-medium text-gray-700" %>
|
|
<div class="mt-1 relative rounded-md shadow-sm">
|
|
<div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<span class="text-gray-500 sm:text-sm">$</span>
|
|
</div>
|
|
<%= form.text_field :amount, class: "pl-7 pr-3 py-2 block w-full border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 sm:text-sm", placeholder: "0.00" %>
|
|
</div>
|
|
<p class="mt-1 text-sm text-gray-500">Total amount on the credit card statement</p>
|
|
</div>
|
|
|
|
<div class="flex items-center">
|
|
<div class="bg-gray-50 rounded-lg p-4 w-full">
|
|
<div class="flex items-center">
|
|
<svg class="h-6 w-6 text-green-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 7h6m0 10v-3m-3 3h.01M9 17h.01M9 14h.01M12 14h.01M15 11h.01M12 11h.01M9 11h.01M7 21h10a2 2 0 002-2V5a2 2 0 00-2-2H7a2 2 0 00-2 2v14a2 2 0 002 2z"/>
|
|
</svg>
|
|
<div>
|
|
<p class="text-sm font-medium text-gray-700">Auto-calculated unpaid amount</p>
|
|
<p class="text-xs text-gray-500">Based on total minus accounted expenses</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end gap-3">
|
|
<%= link_to "Cancel", credit_card_bills_path, class: "inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500" %>
|
|
<%= form.submit class: "inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer" %>
|
|
</div>
|
|
<% end %>
|