132 lines
		
	
	
		
			6.8 KiB
		
	
	
	
		
			HTML
		
	
	
	
			
		
		
	
	
			132 lines
		
	
	
		
			6.8 KiB
		
	
	
	
		
			HTML
		
	
	
	
{{define "beneficiary_wallet"}}
 | 
						|
<div class="py-6"
 | 
						|
  x-data="{
 | 
						|
    walletdialog: false
 | 
						|
  }">
 | 
						|
  <div class="py-5 text-center">
 | 
						|
    <p class="text-lg">Solde : {{ printf "%.2f" .ViewState.wallet_balance }} €</p>
 | 
						|
  <button  @click="walletdialog = !walletdialog"
 | 
						|
    class="rounded-2xl border border-transparent bg-co-blue px-4 py-2 my-4 mt-8 w-full text-sm font-medium text-white shadow-sm focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:w-auto">
 | 
						|
    Créditer le compte
 | 
						|
  </button>
 | 
						|
  <div class="relative z-10" aria-labelledby="modal-title" role="dialog" aria-modal="true"
 | 
						|
       x-show="walletdialog">
 | 
						|
    <div class="fixed inset-0 bg-gray-900 opacity-30 transition-opacity"></div>
 | 
						|
                                
 | 
						|
    <div class="fixed inset-0 z-10 overflow-y-auto">
 | 
						|
      <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
 | 
						|
        <div class="relative transform overflow-hidden rounded-lg bg-white px-4 pt-5 pb-4 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
 | 
						|
          <div>
 | 
						|
            <div class="mt-3 text-center sm:mt-5">
 | 
						|
              <h3 class="text-lg font-medium leading-6 text-gray-900" id="modal-title">Créditer le compte</h3>
 | 
						|
                <div class="mt-2">
 | 
						|
                  <p class="text-sm text-gray-500">Créditer le compte mobilité de l'utilisateur</p>
 | 
						|
                </div>
 | 
						|
              </div>
 | 
						|
            </div>
 | 
						|
          <form method="POST" action="/app/wallets/{{.ViewState.beneficiary.ID}}/credit" class="my-4">
 | 
						|
              <div class="space-y-4">
 | 
						|
                <div>
 | 
						|
                  <label for="amount" class="block text-sm font-medium text-gray-700">Montant</label>
 | 
						|
                  <input type="number" step="0.01" id="amount" name="amount" value="0"
 | 
						|
                         class="mt-1 w-full shadow-sm focus:ring-co-blue focus:border-co-blue px-3 py-2 sm:text-sm border-gray-300 rounded-2xl">
 | 
						|
                </div>
 | 
						|
 | 
						|
                <div>
 | 
						|
                  <label for="payment_method" class="block text-sm font-medium text-gray-700">Moyen de paiement</label>
 | 
						|
                  <select id="payment_method" name="payment_method"
 | 
						|
                          class="mt-1 w-full shadow-sm focus:ring-co-blue focus:border-co-blue px-3 py-2 sm:text-sm border-gray-300 rounded-2xl">
 | 
						|
                    <option value="Paiement en espèce (MMS)">Paiement en espèce (MMS)</option>
 | 
						|
                    <option value="Virement bancaire">Virement bancaire</option>
 | 
						|
                    <option value="Autre">Autre</option>
 | 
						|
                  </select>
 | 
						|
                </div>
 | 
						|
 | 
						|
                <div>
 | 
						|
                  <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
 | 
						|
                  <textarea id="description" name="description" rows="3" placeholder="Description de l'opération..."
 | 
						|
                            class="mt-1 w-full shadow-sm focus:ring-co-blue focus:border-co-blue px-3 py-2 sm:text-sm border-gray-300 rounded-2xl"></textarea>
 | 
						|
                </div>
 | 
						|
              </div>
 | 
						|
 | 
						|
              <div class="mt-6 flex flex-col space-y-3">
 | 
						|
                <button type="submit" class="inline-flex w-full justify-center rounded-2xl border border-transparent bg-co-blue px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-co-blue focus:outline-none focus:ring-2 focus:ring-co-blue focus:ring-offset-2 sm:text-sm">Ajouter</button>
 | 
						|
                <button @click="walletdialog=false" type="button" class="inline-flex w-full justify-center bg-white hover:bg-gray-50 border-gray-300 border px-4 py-2 text-gray-700 items-center text-sm rounded-2xl focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-co-blue">Annuler</button>
 | 
						|
              </div>
 | 
						|
            </form>
 | 
						|
          </div>
 | 
						|
        </div>
 | 
						|
      </div>
 | 
						|
    </div>
 | 
						|
  </div>
 | 
						|
 | 
						|
  <!-- Wallet Operations History -->
 | 
						|
  {{if .ViewState.beneficiary.Data.wallet_history}}
 | 
						|
  <div class="py-5">
 | 
						|
    <h4 class="text-lg font-medium text-gray-900 mb-4 text-center">Historique des opérations</h4>
 | 
						|
    <table class="min-w-full divide-y divide-gray-300 border-gray-300 border-t-1">
 | 
						|
      <thead class="bg-gray-50">
 | 
						|
        <tr>
 | 
						|
          <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Date</th>
 | 
						|
          <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Crédit</th>
 | 
						|
          <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Débit</th>
 | 
						|
          <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Moyen de paiement</th>
 | 
						|
          <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6">Description</th>
 | 
						|
        </tr>
 | 
						|
      </thead>
 | 
						|
      <tbody class="divide-y divide-gray-200 bg-white">
 | 
						|
        <!-- Initial Balance Row -->
 | 
						|
        <tr class="bg-gray-50">
 | 
						|
          <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm text-gray-500 italic sm:pl-6">
 | 
						|
            Solde initial
 | 
						|
          </td>
 | 
						|
          <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6">
 | 
						|
            {{if .ViewState.beneficiary.Data.wallet}}{{ printf "%.2f" .ViewState.beneficiary.Data.wallet }} €{{else}}0.00 €{{end}}
 | 
						|
          </td>
 | 
						|
          <td class="py-4 pl-4 pr-3 text-sm text-gray-500 sm:pl-6">
 | 
						|
            -
 | 
						|
          </td>
 | 
						|
          <td class="py-4 pl-4 pr-3 text-sm text-gray-500 sm:pl-6">
 | 
						|
            -
 | 
						|
          </td>
 | 
						|
          <td class="py-4 pl-4 pr-3 text-sm text-gray-500 sm:pl-6">
 | 
						|
            -
 | 
						|
          </td>
 | 
						|
        </tr>
 | 
						|
        {{range $index, $operation := .ViewState.beneficiary.Data.wallet_history}}
 | 
						|
        <tr>
 | 
						|
          <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm sm:pl-6">
 | 
						|
            {{if $operation.timestamp}}{{timeFormat $operation.timestamp "02/01/2006 15:04"}}{{end}}
 | 
						|
          </td>
 | 
						|
          <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-green-600 sm:pl-6">
 | 
						|
            {{if $operation.amount}}
 | 
						|
              {{if or (eq $operation.operation_type "credit") (not $operation.operation_type)}}
 | 
						|
                {{ printf "%.2f" $operation.amount }} €
 | 
						|
              {{end}}
 | 
						|
            {{end}}
 | 
						|
          </td>
 | 
						|
          <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-red-600 sm:pl-6">
 | 
						|
            {{if eq $operation.operation_type "debit"}}
 | 
						|
              {{ printf "%.2f" $operation.amount }} €
 | 
						|
            {{end}}
 | 
						|
          </td>
 | 
						|
          <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
 | 
						|
            {{$operation.payment_method}}
 | 
						|
          </td>
 | 
						|
          <td class="py-4 pl-4 pr-3 text-sm sm:pl-6">
 | 
						|
            {{$operation.description}}
 | 
						|
          </td>
 | 
						|
        </tr>
 | 
						|
        {{end}}
 | 
						|
      </tbody>
 | 
						|
    </table>
 | 
						|
  </div>
 | 
						|
  {{else}}
 | 
						|
  <div class="py-5">
 | 
						|
    <p class="text-sm text-gray-500 text-center">Aucune opération enregistrée</p>
 | 
						|
  </div>
 | 
						|
  {{end}}
 | 
						|
 | 
						|
</div>
 | 
						|
{{end}}
 |