File size: 6,836 Bytes
e12f538
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<!DOCTYPE html>
<html lang="pl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Generator faktur</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <main class="container">
    <h1>Generator faktur</h1>

    <section id="setup-section" class="panel hidden">
      <h2>Konfiguracja danych firmy</h2>
      <form id="setup-form" class="form">
        <div class="field-grid">
          <label>
            Nazwa firmy
            <input type="text" name="company_name" required>
          </label>
          <label>
            Imie i nazwisko wlasciciela
            <input type="text" name="owner_name" required>
          </label>
          <label>
            Ulica i numer
            <input type="text" name="address_line" required>
          </label>
          <label>
            Kod pocztowy
            <input type="text" name="postal_code" required>
          </label>
          <label>
            Miejscowosc
            <input type="text" name="city" required>
          </label>
          <label>
            NIP
            <input type="text" name="tax_id" required>
          </label>
          <label>
            Numer konta bankowego
            <input type="text" name="bank_account" required>
          </label>
          <label>
            Haslo
            <input type="password" name="password" required>
          </label>
          <label>
            Powtorz haslo
            <input type="password" name="confirm_password" required>
          </label>
        </div>
        <button type="submit">Zapisz dane</button>
        <p class="hint">Dane przechowywane sa na serwerze lokalnym.</p>
      </form>
      <p id="setup-feedback" class="feedback"></p>
    </section>

    <section id="login-section" class="panel hidden">
      <h2>Logowanie</h2>
      <form id="login-form" class="form">
        <label>
          Haslo
          <input type="password" name="password" required>
        </label>
        <button type="submit">Zaloguj</button>
      </form>
      <p id="login-feedback" class="feedback"></p>
    </section>

    <section id="app-section" class="panel hidden">
      <header class="invoice-header">
        <h2>Panel faktur</h2>
        <button id="logout-button" type="button" class="link-button">Wyloguj</button>
      </header>

      <section class="business-section">
        <div class="business-section-header">
          <h3>Dane sprzedawcy</h3>
          <button id="toggle-business-form" type="button" class="link-button">Edytuj dane</button>
        </div>
        <div id="business-display" class="business-display"></div>
        <form id="business-form" class="form hidden">
          <div class="field-grid">
            <label>
              Nazwa firmy
              <input type="text" name="company_name" required>
            </label>
            <label>
              Imie i nazwisko wlasciciela
              <input type="text" name="owner_name" required>
            </label>
            <label>
              Ulica i numer
              <input type="text" name="address_line" required>
            </label>
            <label>
              Kod pocztowy
              <input type="text" name="postal_code" required>
            </label>
            <label>
              Miejscowosc
              <input type="text" name="city" required>
            </label>
            <label>
              NIP
              <input type="text" name="tax_id" required>
            </label>
            <label>
              Numer konta bankowego
              <input type="text" name="bank_account" required>
            </label>
          </div>
          <div class="form-actions">
            <button type="submit">Zapisz</button>
            <button id="cancel-business-update" type="button" class="link-button">Anuluj</button>
          </div>
          <p id="business-feedback" class="feedback"></p>
        </form>
      </section>

      <form id="invoice-form" class="form">
        <fieldset>
          <legend>Informacje o fakturze</legend>
          <label>
            Data sprzedazy / wykonania uslugi
            <input type="date" name="saleDate">
          </label>
        </fieldset>

        <fieldset>
          <legend>Dane nabywcy</legend>
          <div class="field-grid">
            <label>
              Nazwa / Imie i nazwisko
              <input type="text" name="clientName">
            </label>
            <label>
              NIP
              <input type="text" name="clientTaxId">
            </label>
            <label>
              Ulica i numer
              <input type="text" name="clientAddress">
            </label>
            <label>
              Kod pocztowy
              <input type="text" name="clientPostalCode">
            </label>
            <label>
              Miejscowosc
              <input type="text" name="clientCity">
            </label>
          </div>
        </fieldset>

        <section class="items-section">
          <header class="items-header">
            <h3>Pozycje faktury</h3>
            <button type="button" id="add-item-button">Dodaj pozycje</button>
          </header>
          <div class="items-table-wrapper">
            <table class="items-table">
              <thead>
                <tr>
                  <th>Nazwa towaru/uslugi</th>
                  <th>Ilosc</th>
                  <th>Cena jedn. brutto (PLN)</th>
                  <th>Stawka VAT</th>
                  <th>Wartosc brutto (PLN)</th>
                  <th></th>
                </tr>
              </thead>
              <tbody id="items-body"></tbody>
            </table>
          </div>
        </section>

        <div id="totals-container" class="totals">
          <span id="total-net">Suma netto: 0.00 PLN</span>
          <span id="total-vat">Kwota VAT: 0.00 PLN</span>
          <span id="total-gross">Suma brutto: 0.00 PLN</span>
        </div>

        <section id="rate-summary" class="rate-summary"></section>

        <div id="exemption-note-wrapper" class="hidden">
          <label>
            Podstawa prawna zwolnienia (stosowana dla pozycji ZW)
            <textarea id="exemption-note" rows="3" placeholder="np. Art. 43 ust. 1 pkt 19 ustawy o VAT"></textarea>
          </label>
        </div>

        <button type="submit">Generuj fakture</button>
      </form>

      <section id="invoice-result" class="panel hidden">
        <h3>Podglad faktury</h3>
        <div id="invoice-output" class="invoice-preview"></div>
        <button id="download-button" type="button">Pobierz jako plik PDF</button>
      </section>
    </section>
  </main>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js" defer></script>
  <script src="main.js" defer></script>
</body>
</html>