109 lines
4.6 KiB
JavaScript
109 lines
4.6 KiB
JavaScript
import React from 'react';
|
||
import PageHeader from '../components/PageHeader';
|
||
import { useStore } from '../stores/store';
|
||
|
||
const formulaires = [
|
||
{
|
||
titre: 'Rencontre hebdomadaire',
|
||
description: 'Présences informelles, collecte, ventes, jetons et notes de réunion.',
|
||
fichier: 'rencontre',
|
||
},
|
||
{
|
||
titre: "Assemblée d'affaires",
|
||
description: 'Ordre du jour, présences, propositions, décisions, postes et rapport du trésorier.',
|
||
fichier: 'assemblee',
|
||
},
|
||
{
|
||
titre: 'Trésorerie',
|
||
description: 'Collectes, dépôts, dépenses, réserves et rapprochement mensuel.',
|
||
fichier: 'tresorerie',
|
||
},
|
||
];
|
||
|
||
const lignes = (n) => Array.from({ length: n }, (_, i) => `<div class="line">${i + 1}.</div>`).join('');
|
||
|
||
function htmlFormulaire(type, groupe) {
|
||
const nomGroupe = groupe?.nom || 'Groupe';
|
||
const commun = `
|
||
<div class="head">
|
||
<h1>${nomGroupe}</h1>
|
||
<p>Formulaire papier de reprise en main</p>
|
||
</div>
|
||
<div class="meta">
|
||
<div>Date: ____________________</div>
|
||
<div>Responsable: ____________________</div>
|
||
</div>`;
|
||
const sections = {
|
||
rencontre: `
|
||
<h2>Rencontre hebdomadaire</h2>
|
||
<label>Sujet / thème</label><div class="box"></div>
|
||
<label>Collecte</label><div class="grid"><div>Montant: __________</div><div>Détenteur: __________</div></div>
|
||
<label>Ventes littérature / jetons / gâteau</label>${lignes(6)}
|
||
<label>Remises de jetons / anniversaires</label>${lignes(6)}
|
||
<label>Notes</label><div class="big"></div>`,
|
||
assemblee: `
|
||
<h2>Assemblée d'affaires</h2>
|
||
<label>Présences</label>${lignes(12)}
|
||
<label>Rapport du trésorier</label><div class="big"></div>
|
||
<label>Propositions / décisions</label>${lignes(10)}
|
||
<label>Postes à pourvoir</label>${lignes(6)}
|
||
<label>Suites à donner</label><div class="big"></div>`,
|
||
tresorerie: `
|
||
<h2>Trésorerie</h2>
|
||
<label>Encaisse / banque / réserves</label>${lignes(8)}
|
||
<label>Collectes et ventes reçues</label>${lignes(8)}
|
||
<label>Dépenses et contributions</label>${lignes(8)}
|
||
<label>Rapprochement / notes</label><div class="big"></div>`,
|
||
};
|
||
return `<!doctype html><html lang="fr"><head><meta charset="utf-8"><title>${nomGroupe} - ${type}</title>
|
||
<style>
|
||
@page{size:letter;margin:0.6in} body{font-family:Arial,sans-serif;color:#111;line-height:1.35}
|
||
.head{border-bottom:2px solid #111;padding-bottom:10px;margin-bottom:14px}.head h1{margin:0;font-size:22px}.head p{margin:4px 0 0;color:#555}
|
||
h2{font-size:18px;margin:14px 0 10px}.meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
|
||
label{display:block;font-weight:bold;margin-top:14px}.box{height:42px;border:1px solid #999;margin-top:6px}.big{height:120px;border:1px solid #999;margin-top:6px}
|
||
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;border:1px solid #999;padding:10px;margin-top:6px}
|
||
.line{height:28px;border-bottom:1px solid #bbb;padding-top:6px}
|
||
</style></head><body>${commun}${sections[type]}<script>window.print()</script></body></html>`;
|
||
}
|
||
|
||
export default function ModePapier() {
|
||
const { groupe } = useStore();
|
||
|
||
const imprimer = (type) => {
|
||
const win = window.open('', '_blank');
|
||
if (!win) return;
|
||
win.document.write(htmlFormulaire(type, groupe));
|
||
win.document.close();
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-100">
|
||
<PageHeader titre="Mode papier" sousTitre="Continuer même si l'informatique tombe" />
|
||
<div className="p-4 space-y-4">
|
||
<div className="bg-white rounded-2xl p-4 shadow-sm">
|
||
<p className="text-sm text-gray-700 leading-relaxed">
|
||
Ces formulaires vierges servent de plan de secours. Ils permettent de poursuivre une rencontre,
|
||
une assemblée ou une opération de trésorerie, puis de ressaisir les données plus tard.
|
||
</p>
|
||
</div>
|
||
{formulaires.map((formulaire) => (
|
||
<button
|
||
key={formulaire.fichier}
|
||
type="button"
|
||
onClick={() => imprimer(formulaire.fichier)}
|
||
className="w-full bg-white rounded-2xl p-4 shadow-sm text-left active:scale-[0.98] transition"
|
||
>
|
||
<div className="flex items-center gap-3">
|
||
<span className="text-2xl">🖨️</span>
|
||
<div className="flex-1">
|
||
<p className="font-bold text-gray-800">{formulaire.titre}</p>
|
||
<p className="text-sm text-gray-500 mt-1">{formulaire.description}</p>
|
||
</div>
|
||
<span className="text-gray-300">›</span>
|
||
</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|