@ansiversa/components 0.0.137 → 0.0.138

package/index.ts

@@ -39,6 +39,7 @@ export { default as ResumeBuilderSummary } from './src/Summary/ResumeBuilderSumm
 export { default as PortfolioCreatorSummary } from './src/Summary/PortfolioCreatorSummary.astro';
 export { default as AvImageUploader } from "./src/components/media/AvImageUploader.astro";
 export { default as AvAiAssist } from "./src/components/Ai/AvAiAssist.astro";
+export { default as FaqManager } from "./src/components/Admin/FaqManager.astro";
 export { AppLogo } from "./src/Logo";
 export type { AppLogoProps } from "./src/Logo";
 export { default as ResumeBuilderShell } from './src/resume-templates/ResumeBuilderShell.astro';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ansiversa/components",
-  "version": "0.0.137",
+  "version": "0.0.138",
   "description": "Shared UI components and layouts for the Ansiversa ecosystem",
   "type": "module",
   "exports": {

package/src/components/Admin/FaqManager.astro

@@ -0,0 +1,631 @@
+---
+import AvButton from "../../AvButton.astro";
+import AvCard from "../../AvCard.astro";
+import AvDrawer from "../../AvDrawer.astro";
+import AvInput from "../../AvInput.astro";
+import AvLoading from "../../AvLoading.astro";
+import AvSelect from "../../AvSelect.astro";
+import AvTable from "../../AvTable.astro";
+import AvTableToolbar from "../../AvTableToolbar.astro";
+import AvTextarea from "../../AvTextarea.astro";
+
+interface Props {
+  basePath?: string;
+  defaultAudience?: "user" | "admin";
+  showAudienceToggle?: boolean;
+  title?: string;
+}
+
+const {
+  basePath = "",
+  defaultAudience = "user",
+  showAudienceToggle = true,
+  title = "FAQs",
+} = Astro.props as Props;
+
+const normalizedBasePath = String(basePath).replace(/\/$/, "");
+const initialAudience = defaultAudience === "admin" ? "admin" : "user";
+---
+
+<div
+  class="av-admin-section av-auth-stack-lg"
+  x-data={`avFaqManager(${JSON.stringify({
+    basePath: normalizedBasePath,
+    defaultAudience: initialAudience,
+    showAudienceToggle,
+    title,
+  })})`}
+  x-init="init()"
+>
+  <AvCard variant="soft" className="av-auth-stack-sm">
+    <AvTableToolbar title={title}>
+      <div slot="title" class="av-admin-titlewrap">
+        <h1 class="av-table-toolbar__title" x-text="title"></h1>
+        <span class="av-admin-count-inline" x-text="`(${faqs.length})`"></span>
+      </div>
+
+      <div slot="search">
+        <div class="av-admin-toolbar-left">
+          <div class="av-admin-toolbar-top">
+            <p class="av-table-toolbar__subtitle av-m-0">Manage frequently asked questions.</p>
+            <div class="av-admin-toolbar-actions">
+              <AvButton
+                size="sm"
+                variant="ghost"
+                type="button"
+                @click.prevent="fetchFaqs()"
+                :disabled="loading || saving"
+              >
+                Refresh
+              </AvButton>
+              <AvButton
+                size="sm"
+                variant="primary"
+                type="button"
+                @click.prevent="openCreate()"
+                :disabled="loading || saving"
+              >
+                Add FAQ
+              </AvButton>
+            </div>
+          </div>
+
+          <div class="av-admin-filters" x-show="showAudienceToggle" x-cloak>
+            <div class="av-admin-filter av-admin-filter--sort">
+              <AvSelect label="Audience" name="faq-audience" x-model="audience" @change="setAudience($event.target.value)">
+                <option value="user">User</option>
+                <option value="admin">Admin</option>
+              </AvSelect>
+            </div>
+          </div>
+        </div>
+      </div>
+    </AvTableToolbar>
+
+    <template x-if="error">
+      <div class="av-alert av-alert-danger" role="status" x-text="error"></div>
+    </template>
+
+    <template x-if="notice">
+      <div class="av-alert av-alert-success" role="status" x-text="notice"></div>
+    </template>
+  </AvCard>
+
+  <template x-if="!loading && !faqs.length">
+    <AvCard variant="soft" className="av-auth-stack-sm">
+      <p class="av-text-soft av-m-0">No FAQs found for this audience.</p>
+    </AvCard>
+  </template>
+
+  <template x-if="faqs.length">
+    <AvCard variant="soft" className="av-auth-stack-sm">
+      <AvTable stickyHeader>
+        <thead>
+          <tr>
+            <th class="av-table__th-order">Order</th>
+            <th x-show="showAudienceColumn" x-cloak>Audience</th>
+            <th x-show="showCategoryColumn" x-cloak>Category</th>
+            <th>Question</th>
+            <th>Answer</th>
+            <th>Published</th>
+            <th x-show="showUpdatedColumn" x-cloak>Updated</th>
+            <th class="av-table__th-actions">Actions</th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <template x-for="(faq, index) in faqs" :key="faq.id || index">
+            <tr>
+              <td>
+                <div class="av-faq-manager__order-cell">
+                  <input
+                    class="av-input av-faq-manager__order-input"
+                    type="number"
+                    min="0"
+                    x-model.number="faq.sort_order"
+                    :disabled="loading || saving"
+                    aria-label="Sort order"
+                  />
+                  <AvButton
+                    size="sm"
+                    variant="ghost"
+                    type="button"
+                    @click.prevent="saveSort(faq)"
+                    :disabled="loading || saving || !faq.id"
+                  >
+                    Save
+                  </AvButton>
+                </div>
+              </td>
+              <td x-show="showAudienceColumn" x-cloak>
+                <span class="av-table__cell-muted" x-text="faq.audience || '-'" ></span>
+              </td>
+              <td x-show="showCategoryColumn" x-cloak>
+                <span class="av-table__cell-muted" x-text="faq.category || '-'" ></span>
+              </td>
+              <td>
+                <div class="av-table__cell-strong" x-text="faq.question || '-'" ></div>
+              </td>
+              <td class="av-table__cell-muted">
+                <span x-text="previewAnswer(faq.answer_md)"></span>
+              </td>
+              <td>
+                <AvButton
+                  size="sm"
+                  variant="ghost"
+                  type="button"
+                  @click.prevent="togglePublished(faq)"
+                  :disabled="loading || saving || !faq.id"
+                  x-text="faq.is_published ? 'Published' : 'Draft'"
+                />
+              </td>
+              <td x-show="showUpdatedColumn" x-cloak>
+                <span class="av-table__cell-muted" x-text="formatUpdatedAt(faq.updated_at)"></span>
+              </td>
+              <td class="av-table__td-actions">
+                <div class="av-table__cell-actions">
+                  <AvButton
+                    size="sm"
+                    variant="ghost"
+                    type="button"
+                    @click.prevent="openEdit(faq)"
+                    :disabled="loading || saving"
+                  >
+                    Edit
+                  </AvButton>
+                  <AvButton
+                    size="sm"
+                    variant="ghost"
+                    type="button"
+                    @click.prevent="removeFaq(faq)"
+                    :disabled="loading || saving || !faq.id"
+                  >
+                    Delete
+                  </AvButton>
+                </div>
+              </td>
+            </tr>
+          </template>
+        </tbody>
+      </AvTable>
+    </AvCard>
+  </template>
+
+  <template x-if="drawerOpen">
+    <div
+      class="av-drawer-overlay"
+      @click.self="closeDrawer()"
+      @keydown.escape.window="closeDrawer()"
+      @close-drawer="closeDrawer()"
+      x-cloak
+    >
+      <AvDrawer title="Manage FAQ" description="Create or update a frequently asked question.">
+        <form class="av-auth-stack-md" @submit.prevent="submitDrawer()">
+          <AvInput label="Question" name="question" required placeholder="Enter question" x-model="draftQuestion" />
+
+          <AvTextarea
+            label="Answer (Markdown)"
+            name="answer_md"
+            rows={7}
+            required
+            placeholder="Write answer in markdown"
+            x-model="draftAnswerMd"
+          />
+
+          <div x-show="showAudienceToggle" x-cloak>
+            <AvSelect label="Audience" name="draft-audience" x-model="draftAudience">
+              <option value="user">User</option>
+              <option value="admin">Admin</option>
+            </AvSelect>
+          </div>
+
+          <AvInput label="Category (optional)" name="category" placeholder="General" x-model="draftCategory" />
+
+          <AvInput
+            label="Sort order"
+            type="number"
+            min="0"
+            name="sort_order"
+            x-model.number="draftSortOrder"
+          />
+
+          <div class="av-faq-manager__publish-toggle">
+            <label class="av-label" for="faq-draft-published">Published</label>
+            <input
+              id="faq-draft-published"
+              type="checkbox"
+              x-model="draftIsPublished"
+              :disabled="saving"
+            />
+          </div>
+
+          <template x-if="drawerError">
+            <div class="av-alert av-alert-danger" role="status" x-text="drawerError"></div>
+          </template>
+        </form>
+
+        <div slot="footer">
+          <AvButton variant="ghost" type="button" @click.prevent="closeDrawer()" :disabled="saving">Cancel</AvButton>
+          <AvButton type="button" @click.prevent="submitDrawer()" :disabled="saving">
+            <span x-show="!saving" x-text="drawerMode === 'edit' ? 'Update' : 'Create'"></span>
+            <span x-show="saving">Saving...</span>
+          </AvButton>
+        </div>
+      </AvDrawer>
+    </div>
+  </template>
+
+  <AvLoading x-show="loading" x-cloak label="Loading FAQs..." />
+</div>
+
+<script is:inline>
+  if (typeof window !== "undefined" && !window.avFaqManager) {
+    window.avFaqManager = (config) => ({
+      title: typeof config.title === "string" && config.title.trim() ? config.title.trim() : "FAQs",
+      basePath: typeof config.basePath === "string" ? config.basePath.replace(/\/$/, "") : "",
+      showAudienceToggle: Boolean(config.showAudienceToggle),
+      audience: config.defaultAudience === "admin" ? "admin" : "user",
+      faqs: [],
+      loading: false,
+      saving: false,
+      error: "",
+      notice: "",
+      drawerOpen: false,
+      drawerMode: "create",
+      drawerError: "",
+      draftId: null,
+      draftAudience: "user",
+      draftCategory: "",
+      draftQuestion: "",
+      draftAnswerMd: "",
+      draftSortOrder: 0,
+      draftIsPublished: true,
+
+      get showAudienceColumn() {
+        if (this.showAudienceToggle) return true;
+        return this.faqs.some((faq) => typeof faq.audience === "string" && faq.audience.trim());
+      },
+
+      get showCategoryColumn() {
+        return this.faqs.some((faq) => typeof faq.category === "string" && faq.category.trim());
+      },
+
+      get showUpdatedColumn() {
+        return this.faqs.some((faq) => Boolean(faq.updated_at));
+      },
+
+      init() {
+        this.draftAudience = this.audience;
+        this.fetchFaqs();
+      },
+
+      endpoint(path) {
+        return `${this.basePath}${path}`;
+      },
+
+      async parseJson(response) {
+        const text = await response.text();
+        if (!text) return null;
+        try {
+          return JSON.parse(text);
+        } catch {
+          return null;
+        }
+      },
+
+      mapError(status, payload, fallback) {
+        if (payload && typeof payload.error === "string" && payload.error.trim()) {
+          return payload.error.trim();
+        }
+        if (status === 400) return "Invalid request.";
+        if (status === 401) return "Please sign in again.";
+        if (status === 403) return "You do not have permission for this action.";
+        if (status === 404) return "FAQ endpoint not found.";
+        return fallback;
+      },
+
+      normalizeFaq(item, index) {
+        const source = item && typeof item === "object" ? item : {};
+        const parsedOrder = Number(source.sort_order);
+        const answerMd = typeof source.answer_md === "string"
+          ? source.answer_md
+          : typeof source.answer === "string"
+            ? source.answer
+            : "";
+        return {
+          id: source.id ?? null,
+          audience: source.audience === "admin" ? "admin" : source.audience === "user" ? "user" : this.audience,
+          category: typeof source.category === "string" ? source.category : "",
+          question: typeof source.question === "string" ? source.question : "",
+          answer_md: answerMd,
+          sort_order: Number.isFinite(parsedOrder) ? parsedOrder : index + 1,
+          is_published: source.is_published !== false,
+          updated_at: typeof source.updated_at === "string" ? source.updated_at : "",
+        };
+      },
+
+      previewAnswer(value) {
+        const text = typeof value === "string" ? value.trim() : "";
+        if (!text) return "-";
+        return text.length > 120 ? `${text.slice(0, 120)}...` : text;
+      },
+
+      formatUpdatedAt(value) {
+        if (!value) return "-";
+        const date = new Date(value);
+        if (Number.isNaN(date.getTime())) return "-";
+        return date.toLocaleDateString();
+      },
+
+      setAudience(value) {
+        this.audience = value === "admin" ? "admin" : "user";
+        this.fetchFaqs();
+      },
+
+      clearMessages() {
+        this.error = "";
+        this.notice = "";
+      },
+
+      async fetchFaqs() {
+        this.loading = true;
+        this.clearMessages();
+
+        try {
+          const response = await fetch(
+            this.endpoint(`/api/admin/faqs.json?audience=${encodeURIComponent(this.audience)}`),
+            {
+              method: "GET",
+              credentials: "include",
+            },
+          );
+
+          const payload = await this.parseJson(response);
+
+          if (!response.ok) {
+            throw new Error(this.mapError(response.status, payload, "Failed to load FAQs."));
+          }
+
+          const items = Array.isArray(payload)
+            ? payload
+            : Array.isArray(payload?.items)
+              ? payload.items
+              : [];
+
+          this.faqs = items.map((item, index) => this.normalizeFaq(item, index));
+          this.faqs.sort((a, b) => (a.sort_order ?? 0) - (b.sort_order ?? 0));
+        } catch (loadError) {
+          this.faqs = [];
+          this.error = loadError?.message || "Failed to load FAQs.";
+        } finally {
+          this.loading = false;
+        }
+      },
+
+      resetDraft() {
+        this.draftId = null;
+        this.draftAudience = this.audience;
+        this.draftCategory = "";
+        this.draftQuestion = "";
+        this.draftAnswerMd = "";
+        this.draftSortOrder = this.faqs.length + 1;
+        this.draftIsPublished = true;
+        this.drawerError = "";
+      },
+
+      openCreate() {
+        this.clearMessages();
+        this.drawerMode = "create";
+        this.resetDraft();
+        this.drawerOpen = true;
+      },
+
+      openEdit(faq) {
+        this.clearMessages();
+        this.drawerMode = "edit";
+        this.draftId = faq?.id ?? null;
+        this.draftAudience = faq?.audience === "admin" ? "admin" : "user";
+        this.draftCategory = faq?.category ?? "";
+        this.draftQuestion = faq?.question ?? "";
+        this.draftAnswerMd = faq?.answer_md ?? "";
+        this.draftSortOrder = Number.isFinite(Number(faq?.sort_order)) ? Number(faq.sort_order) : 0;
+        this.draftIsPublished = faq?.is_published !== false;
+        this.drawerError = "";
+        this.drawerOpen = true;
+      },
+
+      closeDrawer() {
+        if (this.saving) return;
+        this.drawerOpen = false;
+        this.drawerError = "";
+      },
+
+      buildPayload() {
+        return {
+          audience: this.draftAudience === "admin" ? "admin" : "user",
+          category: String(this.draftCategory || "").trim(),
+          question: String(this.draftQuestion || "").trim(),
+          answer_md: String(this.draftAnswerMd || "").trim(),
+          sort_order: Number(this.draftSortOrder || 0),
+          is_published: Boolean(this.draftIsPublished),
+        };
+      },
+
+      async submitDrawer() {
+        const payload = this.buildPayload();
+
+        if (!payload.question || !payload.answer_md) {
+          this.drawerError = "Question and answer are required.";
+          return;
+        }
+
+        this.saving = true;
+        this.drawerError = "";
+        this.error = "";
+
+        try {
+          const isEdit = this.drawerMode === "edit";
+          const endpoint = isEdit
+            ? this.endpoint(`/api/admin/faqs/${encodeURIComponent(String(this.draftId || ""))}.json`)
+            : this.endpoint("/api/admin/faqs.json");
+
+          const response = await fetch(endpoint, {
+            method: isEdit ? "PATCH" : "POST",
+            credentials: "include",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify(payload),
+          });
+
+          const responsePayload = await this.parseJson(response);
+
+          if (!response.ok) {
+            throw new Error(this.mapError(response.status, responsePayload, "Failed to save FAQ."));
+          }
+
+          this.drawerOpen = false;
+          this.notice = isEdit ? "FAQ updated." : "FAQ created.";
+          await this.fetchFaqs();
+        } catch (saveError) {
+          this.drawerError = saveError?.message || "Failed to save FAQ.";
+        } finally {
+          this.saving = false;
+        }
+      },
+
+      async removeFaq(faq) {
+        if (!faq?.id) return;
+        if (!window.confirm("Delete this FAQ? This action cannot be undone.")) return;
+
+        this.saving = true;
+        this.error = "";
+        this.notice = "";
+
+        try {
+          const response = await fetch(
+            this.endpoint(`/api/admin/faqs/${encodeURIComponent(String(faq.id))}.json`),
+            {
+              method: "DELETE",
+              credentials: "include",
+            },
+          );
+
+          const responsePayload = await this.parseJson(response);
+
+          if (!response.ok) {
+            throw new Error(this.mapError(response.status, responsePayload, "Failed to delete FAQ."));
+          }
+
+          this.notice = "FAQ deleted.";
+          await this.fetchFaqs();
+        } catch (deleteError) {
+          this.error = deleteError?.message || "Failed to delete FAQ.";
+        } finally {
+          this.saving = false;
+        }
+      },
+
+      async togglePublished(faq) {
+        if (!faq?.id) return;
+
+        this.saving = true;
+        this.error = "";
+        this.notice = "";
+
+        try {
+          const response = await fetch(
+            this.endpoint(`/api/admin/faqs/${encodeURIComponent(String(faq.id))}.json`),
+            {
+              method: "PATCH",
+              credentials: "include",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify({ is_published: !faq.is_published }),
+            },
+          );
+
+          const responsePayload = await this.parseJson(response);
+
+          if (!response.ok) {
+            throw new Error(this.mapError(response.status, responsePayload, "Failed to update publish status."));
+          }
+
+          this.notice = "Publish status updated.";
+          await this.fetchFaqs();
+        } catch (toggleError) {
+          this.error = toggleError?.message || "Failed to update publish status.";
+        } finally {
+          this.saving = false;
+        }
+      },
+
+      async saveSort(faq) {
+        if (!faq?.id) return;
+
+        const nextSortOrder = Number(faq.sort_order);
+        if (!Number.isFinite(nextSortOrder)) {
+          this.error = "Sort order must be a valid number.";
+          return;
+        }
+
+        this.saving = true;
+        this.error = "";
+        this.notice = "";
+
+        try {
+          const response = await fetch(
+            this.endpoint(`/api/admin/faqs/${encodeURIComponent(String(faq.id))}.json`),
+            {
+              method: "PATCH",
+              credentials: "include",
+              headers: {
+                "Content-Type": "application/json",
+              },
+              body: JSON.stringify({ sort_order: nextSortOrder }),
+            },
+          );
+
+          const responsePayload = await this.parseJson(response);
+
+          if (!response.ok) {
+            throw new Error(this.mapError(response.status, responsePayload, "Failed to update sort order."));
+          }
+
+          this.notice = "Sort order updated.";
+          await this.fetchFaqs();
+        } catch (sortError) {
+          this.error = sortError?.message || "Failed to update sort order.";
+        } finally {
+          this.saving = false;
+        }
+      },
+    });
+  }
+</script>
+
+<style>
+  .av-faq-manager__order-cell {
+    display: inline-flex;
+    gap: 0.35rem;
+    align-items: center;
+  }
+
+  .av-faq-manager__order-input {
+    width: 88px;
+    min-height: 2.25rem;
+  }
+
+  .av-faq-manager__publish-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+  }
+
+  .av-faq-manager__publish-toggle input[type="checkbox"] {
+    width: 1rem;
+    height: 1rem;
+  }
+</style>