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/HelpCenterPage.tsx
+++ b/resources/js/guest/pages/HelpCenterPage.tsx
@@ -0,0 +1,153 @@
+import React from 'react';
+import { Link, useParams } from 'react-router-dom';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Loader2, RefreshCcw } from 'lucide-react';
+import { Page } from './_util';
+import { useLocale } from '../i18n/LocaleContext';
+import { useTranslation } from '../i18n/useTranslation';
+import { getHelpArticles, type HelpArticleSummary } from '../services/helpApi';
+
+export default function HelpCenterPage() {
+  const params = useParams<{ token?: string }>();
+  const { locale } = useLocale();
+  const { t } = useTranslation();
+  const [articles, setArticles] = React.useState<HelpArticleSummary[]>([]);
+  const [query, setQuery] = React.useState('');
+  const [state, setState] = React.useState<'idle' | 'loading' | 'ready' | 'error'>('loading');
+  const [servedFromCache, setServedFromCache] = React.useState(false);
+  const basePath = params.token ? `/e/${encodeURIComponent(params.token)}/help` : '/help';
+
+  const loadArticles = React.useCallback(async (forceRefresh = false) => {
+    setState('loading');
+    try {
+      const result = await getHelpArticles(locale, { forceRefresh });
+      setArticles(result.articles);
+      setServedFromCache(result.servedFromCache);
+      setState('ready');
+    } catch (error) {
+      console.error('[HelpCenter] Failed to load articles', error);
+      setState('error');
+    }
+  }, [locale]);
+
+  React.useEffect(() => {
+    loadArticles();
+  }, [loadArticles]);
+
+  const filteredArticles = React.useMemo(() => {
+    if (!query.trim()) {
+      return articles;
+    }
+    const needle = query.trim().toLowerCase();
+    return articles.filter((article) =>
+      `${article.title} ${article.summary}`.toLowerCase().includes(needle),
+    );
+  }, [articles, query]);
+
+  return (
+    <Page title={t('help.center.title')}>
+      <p className="mb-4 text-sm text-muted-foreground">{t('help.center.subtitle')}</p>
+
+      <div className="flex flex-col gap-2 rounded-xl border border-border/60 bg-background/50 p-3">
+        <div className="flex flex-col gap-3 sm:flex-row">
+          <Input
+            placeholder={t('help.center.searchPlaceholder')}
+            value={query}
+            onChange={(event) => setQuery(event.target.value)}
+            className="flex-1"
+            aria-label={t('help.center.searchPlaceholder')}
+          />
+          <Button
+            variant="outline"
+            className="sm:w-auto"
+            onClick={() => loadArticles(true)}
+            disabled={state === 'loading'}
+          >
+            {state === 'loading' ? (
+              <span className="flex items-center gap-2">
+                <Loader2 className="h-4 w-4 animate-spin" />
+                {t('common.actions.loading')}
+              </span>
+            ) : (
+              <span className="flex items-center gap-2">
+                <RefreshCcw className="h-4 w-4" />
+                {t('help.center.retry')}
+              </span>
+            )}
+          </Button>
+        </div>
+        {servedFromCache && (
+          <div className="flex items-center gap-2 rounded-lg bg-amber-50/70 px-3 py-2 text-xs text-amber-900 dark:bg-amber-400/10 dark:text-amber-200">
+            <Badge variant="secondary" className="bg-amber-200/80 text-amber-900 dark:bg-amber-500/40 dark:text-amber-100">
+              {t('help.center.offlineBadge')}
+            </Badge>
+            <span>{t('help.center.offlineDescription')}</span>
+          </div>
+        )}
+      </div>
+
+      <section className="mt-6 space-y-4">
+        <h2 className="text-base font-semibold text-foreground">{t('help.center.listTitle')}</h2>
+        {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="rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive">
+            <p>{t('help.center.error')}</p>
+            <Button
+              variant="secondary"
+              size="sm"
+              className="mt-3"
+              onClick={() => loadArticles(false)}
+            >
+              {t('help.center.retry')}
+            </Button>
+          </div>
+        )}
+        {state === 'ready' && filteredArticles.length === 0 && (
+          <div className="rounded-lg border border-dashed border-muted-foreground/30 p-4 text-sm text-muted-foreground">
+            {t('help.center.empty')}
+          </div>
+        )}
+        {state === 'ready' && filteredArticles.length > 0 && (
+          <div className="space-y-3">
+            {filteredArticles.map((article) => (
+              <Link
+                key={article.slug}
+                to={`${basePath}/${encodeURIComponent(article.slug)}`}
+                className="block rounded-2xl border border-border/60 bg-card/70 p-4 transition-colors hover:border-primary/60"
+              >
+                <div className="flex items-start justify-between gap-3">
+                  <div>
+                    <h3 className="text-base font-semibold text-foreground">{article.title}</h3>
+                    <p className="mt-1 text-sm text-muted-foreground line-clamp-3">{article.summary}</p>
+                  </div>
+                  <span className="text-xs text-muted-foreground">
+                    {article.updated_at ? formatDate(article.updated_at, locale) : ''}
+                  </span>
+                </div>
+              </Link>
+            ))}
+          </div>
+        )}
+      </section>
+    </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;
+  }
+}