feat: catch unknown

public/assets/i18n/en/period.json

@@ -1,7 +1,8 @@
 {
- "invoices": "Invoices have been or have to be invoices for a period from <strong>{{from}}</strong> to <strong>{{to}}</strong>.",
- "text": "If a part of this period is over and related invoices have been billed, you can close the timeframe.",
- "text-more": "This function can be useful for example when you want to close an accounting year.",
+ "invoices": "Invoices have been or need to be issued for the period from <strong>{{from}}</strong> to <strong>{{to}}</strong>.",
+ "no_invoices": "Invoices are issued or need to be issued for an unspecified period.",
+ "text": "If a portion of this period has elapsed and the related invoices have been issued, you may close the timeframe.",
+ "text-more": "This function can be useful, for instance, when you need to close an accounting year.",
  "close": "Close selected period",
  "alert": {
  "warning": "WARNING",

src/pages/period/Period.tsx

@@ -93,6 +93,24 @@ const Period: React.FC = () => {
  await initPeriod();
  };
 
+ const renderPeriod = () => {
+ if (period?.from === undefined && period?.to === undefined) {
+ return <p className={`${styles.text} ion-padding-top`}>{t('period:no_invoices')}</p>;
+ }
+
+ return (
+ <p
+ className={`${styles.text} ion-padding-top`}
+ dangerouslySetInnerHTML={{
+ __html: t('period:invoices', {
+ from: format(period?.from) ?? t('period:unknown'),
+ to: format(period?.to) ?? t('period:unknown'),
+ }),
+ }}
+ ></p>
+ );
+ };
+
  return (
  <IonPage>
  <IonContent>
@@ -106,15 +124,7 @@ const Period: React.FC = () => {
  </IonHeader>
 
  <LocalizationProvider dateAdapter={AdapterDateFns}>
- <p
- className={`${styles.text} ion-padding-top`}
- dangerouslySetInnerHTML={{
- __html: t('period:invoices', {
- from: format(period?.from) ?? t('period:unknown'),
- to: format(period?.to) ?? t('period:unknown'),
- }),
- }}
- ></p>
+ {renderPeriod()}
 
  <p>{t('period:text')}</p>