added a help system, replaced the words "tenant" and "Pwa" with better alternatives. corrected and implemented cron jobs. prepared going live on a coolify-powered system.

2025-11-10 16:23:09 +01:00
parent ba9e64dfcb
commit 447a90a742
123 changed files with 6398 additions and 153 deletions
--- a/resources/js/guest/pages/HelpArticlePage.tsx
+++ b/resources/js/guest/pages/HelpArticlePage.tsx
@@ -0,0 +1,121 @@
+import React from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Loader2 } from 'lucide-react';
+import { Page } from './_util';
+import { useLocale } from '../i18n/LocaleContext';
+import { useTranslation } from '../i18n/useTranslation';
+import { getHelpArticle, type HelpArticleDetail } from '../services/helpApi';
+
+export default function HelpArticlePage() {
+  const params = useParams<{ token?: string; slug: string }>();
+  const slug = params.slug;
+  const { locale } = useLocale();
+  const { t } = useTranslation();
+  const [article, setArticle] = React.useState<HelpArticleDetail | null>(null);
+  const [state, setState] = React.useState<'loading' | 'ready' | 'error'>('loading');
+  const [servedFromCache, setServedFromCache] = React.useState(false);
+  const basePath = params.token ? `/e/${encodeURIComponent(params.token)}/help` : '/help';
+
+  const loadArticle = React.useCallback(async () => {
+    if (!slug) {
+      setState('error');
+      return;
+    }
+    setState('loading');
+    try {
+      const result = await getHelpArticle(slug, locale);
+      setArticle(result.article);
+      setServedFromCache(result.servedFromCache);
+      setState('ready');
+    } catch (error) {
+      console.error('[HelpArticle] Failed to load article', error);
+      setState('error');
+    }
+  }, [slug, locale]);
+
+  React.useEffect(() => {
+    loadArticle();
+  }, [loadArticle]);
+
+  const title = article?.title ?? t('help.article.unavailable');
+
+  return (
+    <Page title={title}>
+      <div className="mb-4">
+        <Button variant="ghost" size="sm" asChild>
+          <Link to={basePath}>
+            {t('help.article.back')}
+          </Link>
+        </Button>
+      </div>
+
+      {state === 'loading' && (
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <Loader2 className="h-4 w-4 animate-spin" />
+          {t('common.actions.loading')}
+        </div>
+      )}
+
+      {state === 'error' && (
+        <div className="space-y-3 rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive">
+          <p>{t('help.article.unavailable')}</p>
+          <Button variant="secondary" size="sm" onClick={loadArticle}>
+            {t('help.article.reload')}
+          </Button>
+        </div>
+      )}
+
+      {state === 'ready' && article && (
+        <article className="space-y-6">
+          <div className="space-y-2 text-sm text-muted-foreground">
+            {article.updated_at && (
+              <div>{t('help.article.updated', { date: formatDate(article.updated_at, locale) })}</div>
+            )}
+            {servedFromCache && (
+              <Badge variant="secondary" className="bg-amber-200/70 text-amber-900 dark:bg-amber-500/30 dark:text-amber-100">
+                {t('help.center.offlineBadge')}
+              </Badge>
+            )}
+          </div>
+          <div
+            className="prose prose-sm max-w-none dark:prose-invert"
+            dangerouslySetInnerHTML={{ __html: article.body_html ?? article.body_markdown ?? '' }}
+          />
+          {article.related && article.related.length > 0 && (
+            <section className="space-y-3">
+              <h3 className="text-base font-semibold text-foreground">{t('help.article.relatedTitle')}</h3>
+              <div className="flex flex-wrap gap-2">
+                {article.related.map((rel) => (
+                  <Button
+                    key={rel.slug}
+                    variant="outline"
+                    size="sm"
+                    asChild
+                  >
+                    <Link to={`${basePath}/${encodeURIComponent(rel.slug)}`}>
+                      {rel.slug}
+                    </Link>
+                  </Button>
+                ))}
+              </div>
+            </section>
+          )}
+        </article>
+      )}
+    </Page>
+  );
+}
+
+function formatDate(value: string, locale: string): string {
+  try {
+    return new Date(value).toLocaleDateString(locale, {
+      day: '2-digit',
+      month: 'short',
+      year: 'numeric',
+    });
+  } catch (error) {
+    return value;
+  }
+}