@appcorp/fusion-storybook 0.3.50 → 0.3.52

package/base-modules/admission/context/use-admission-module.js

@@ -14,7 +14,7 @@ import { ADMISSION_STATUS, GENDER, } from "../../../type";
 import { ADMISSION_API_ROUTES, DISCOUNT_CODE_API_ROUTES, } from "../../../constants";
 import { admissionFormValidation } from "../validate";
 import { getCachedWorkspaceSync } from "../../workspace/cache";
-import { generateAdmissionReceiptPDF, } from "../../../utils/admission-pdf";
+import { downloadAdmissionFormPDF, } from "../../../utils/admission-pdf";
 import { normalizeIdNumber } from "../../../utils/id-number";
 import { toE164Phone } from "../../../utils/to-e164-phone";
 import { formatPhoneDisplay } from "@react-pakistan/util-functions/general/format-phone-display";
@@ -469,7 +469,7 @@ export const useAdmissionModule = () => {
                 admissionStatus: admissionDetails.admissionStatus,
                 logo: logoBase64.base64,
             };
-            await generateAdmissionReceiptPDF(pdfData);
+            await downloadAdmissionFormPDF(pdfData);
         }
         catch (_h) {
             showToast(t("messagesPrintFailed"), TOAST_VARIANT.ERROR);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/fusion-storybook",
-  "version": "0.3.50",
+  "version": "0.3.52",
   "scripts": {
     "build-storybook": "storybook build",
     "build:next": "next build",
@@ -37,29 +37,25 @@
     ]
   },
   "devDependencies": {
-    "@appcorp/app-corp-vista": "^1.0.0",
-    "@appcorp/shadcn": "^1.1.99",
+    "@appcorp/shadcn": "^2.0.2",
     "@chromatic-com/storybook": "^5.1.2",
     "@commitlint/cli": "^20.5.0",
     "@commitlint/config-conventional": "^20.5.0",
-    "@pdfme/common": "^6",
-    "@pdfme/generator": "^6",
-    "@pdfme/schemas": "^6",
     "@playwright/test": "^1.59.1",
-    "@radix-ui/react-avatar": "^1.1.11",
-    "@radix-ui/react-checkbox": "^1.3.3",
-    "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-avatar": "^1.2.3",
+    "@radix-ui/react-checkbox": "^1.3.8",
+    "@radix-ui/react-dialog": "^1.1.20",
+    "@radix-ui/react-dropdown-menu": "^2.1.21",
     "@radix-ui/react-icons": "^1.3.2",
-    "@radix-ui/react-label": "^2.1.8",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-radio-group": "^1.3.8",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.8",
-    "@radix-ui/react-slider": "^1.3.6",
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-toast": "^1.2.15",
-    "@react-pakistan/util-functions": "^2.0.2",
+    "@radix-ui/react-label": "^2.1.12",
+    "@radix-ui/react-popover": "^1.1.20",
+    "@radix-ui/react-radio-group": "^1.4.4",
+    "@radix-ui/react-select": "^2.3.4",
+    "@radix-ui/react-separator": "^1.1.12",
+    "@radix-ui/react-slider": "^1.4.4",
+    "@radix-ui/react-slot": "^1.3.0",
+    "@radix-ui/react-toast": "^1.2.20",
+    "@react-pakistan/util-functions": "^3.0.1",
     "@storybook/addon-a11y": "^10.3.4",
     "@storybook/addon-docs": "^10.3.4",
     "@storybook/addon-onboarding": "^10.3.4",

package/pdf-templates/admission-form-template.d.ts

@@ -0,0 +1,37 @@
+export interface AdmissionPDFData {
+    firstName: string;
+    lastName: string;
+    studentIdNumber: string;
+    gender: string;
+    dob: string;
+    registrationCode: string;
+    discountCode?: string;
+    fatherFirstName: string;
+    fatherLastName: string;
+    fatherIdNumber: string;
+    fatherMobile: string;
+    fatherOccupation?: string;
+    fatherOrganization?: string;
+    motherFirstName: string;
+    motherLastName: string;
+    motherIdNumber: string;
+    motherMobile: string;
+    address: string;
+    city: string;
+    state: string;
+    country: string;
+    classForAdmission: string;
+    previousSchool?: string;
+    siblings?: string;
+    notes?: string;
+    admissionNotes?: string;
+    schoolName?: string;
+    schoolAddress?: string;
+    schoolPhone?: string;
+    schoolEmail?: string;
+    submissionDate?: string;
+    admissionStatus?: string;
+    logo?: string;
+    emergencyContact?: string;
+}
+export declare function buildAdmissionFormHtml(data: AdmissionPDFData): string;

package/pdf-templates/admission-form-template.js

@@ -0,0 +1,321 @@
+function escapeHtml(str) {
+    if (str == null)
+        return "";
+    return String(str)
+        .replace(/&/g, "&")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;");
+}
+function fmt(val) {
+    if (val == null || val === "")
+        return "—";
+    return escapeHtml(val);
+}
+function section(title, content) {
+    return `
+    <div class="section">
+      <div class="section-title">${escapeHtml(title)}</div>
+      <div class="section-body">${content}</div>
+    </div>`;
+}
+function row(label, value) {
+    return `
+      <div class="field-row">
+        <span class="field-label">${escapeHtml(label)}:</span>
+        <span class="field-value">${value}</span>
+      </div>`;
+}
+export function buildAdmissionFormHtml(data) {
+    const studentName = `${escapeHtml(data.firstName)} ${escapeHtml(data.lastName)}`;
+    const fatherName = `${escapeHtml(data.fatherFirstName)} ${escapeHtml(data.fatherLastName)}`;
+    const motherName = `${escapeHtml(data.motherFirstName)} ${escapeHtml(data.motherLastName)}`;
+    const homeAddress = `${fmt(data.address)}, ${fmt(data.city)}, ${fmt(data.state)}, ${fmt(data.country)}`;
+    const date = data.submissionDate || new Date().toLocaleDateString();
+    const emergencyContact = data.emergencyContact === "Mother" ? "Mother" : "Father";
+    const logoHtml = data.logo
+        ? `<img src="${data.logo.startsWith("data:") ? escapeHtml(data.logo) : `data:image/png;base64,${escapeHtml(data.logo)}`}" alt="School Logo" class="logo" />`
+        : "";
+    const html = `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Admission Form - ${escapeHtml(data.registrationCode)}</title>
+  <style>
+    @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap");
+
+    @page { margin: 12mm 15mm; size: A4 portrait; }
+
+    *, *::before, *::after {
+      font-family: "Roboto", system-ui, -apple-system, sans-serif;
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      padding: 0;
+      font-size: 10pt;
+      color: #1f2937;
+      line-height: 1.5;
+    }
+
+    .header {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      padding-bottom: 12px;
+      margin-bottom: 16px;
+      border-bottom: 2px solid #2563eb;
+    }
+
+    .logo {
+      width: 64px;
+      height: 64px;
+      object-fit: contain;
+    }
+
+    .school-info h1 {
+      margin: 0;
+      font-size: 14pt;
+      font-weight: 700;
+      color: #1e3a5f;
+    }
+
+    .school-info p {
+      margin: 2px 0 0;
+      font-size: 8.5pt;
+      color: #6b7280;
+    }
+
+    .form-title {
+      text-align: center;
+      font-size: 16pt;
+      font-weight: 700;
+      color: #1e3a5f;
+      margin: 0 0 16px;
+      text-transform: uppercase;
+      letter-spacing: 1px;
+    }
+
+    .reg-row {
+      display: flex;
+      justify-content: space-between;
+      font-size: 9pt;
+      color: #374151;
+      margin-bottom: 14px;
+      padding: 6px 10px;
+      background: #f9fafb;
+      border: 1px solid #e5e7eb;
+      border-radius: 4px;
+    }
+
+    .section {
+      margin-bottom: 12px;
+    }
+
+    .section-title {
+      font-size: 10pt;
+      font-weight: 700;
+      color: #1e3a5f;
+      border-bottom: 2px solid #d1d5db;
+      padding-bottom: 3px;
+      margin-bottom: 6px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .section-body {
+      padding: 2px 0;
+    }
+
+    .field-row {
+      display: flex;
+      padding: 2px 0;
+      font-size: 9.5pt;
+    }
+
+    .field-label {
+      font-weight: 600;
+      min-width: 140px;
+      color: #374151;
+      flex-shrink: 0;
+    }
+
+    .field-value {
+      color: #111827;
+    }
+
+    .two-col {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 0 16px;
+    }
+
+    .three-col {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 0 16px;
+    }
+
+    .parent-subsection {
+      margin-bottom: 4px;
+    }
+
+    .parent-subsection h4 {
+      margin: 4px 0 2px;
+      font-size: 9.5pt;
+      font-weight: 600;
+      color: #4b5563;
+    }
+
+    .terms {
+      margin-top: 18px;
+      padding: 10px 12px;
+      background: #f9fafb;
+      border: 1px solid #e5e7eb;
+      border-radius: 4px;
+      font-size: 8.5pt;
+      color: #4b5563;
+      line-height: 1.6;
+    }
+
+    .terms p {
+      margin: 0;
+    }
+    .terms p + p {
+      margin-top: 4px;
+    }
+
+    .signature-area {
+      display: flex;
+      justify-content: space-between;
+      margin-top: 28px;
+      padding-top: 8px;
+      border-top: 1px solid #d1d5db;
+    }
+
+    .signature-block {
+      text-align: center;
+      min-width: 120px;
+    }
+
+    .signature-block .label {
+      font-size: 9pt;
+      font-weight: 700;
+      color: #374151;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .signature-line {
+      margin-top: 32px;
+      border-top: 1px solid #9ca3af;
+      width: 160px;
+    }
+
+    .signature-block .hint {
+      font-size: 7.5pt;
+      color: #9ca3af;
+      margin-top: 2px;
+    }
+
+    .no-break {
+      break-inside: avoid;
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    ${logoHtml}
+    <div class="school-info">
+      <h1>${fmt(data.schoolName || "School Name")}</h1>
+      <p>${fmt(data.schoolAddress)}${data.schoolPhone ? ` &bull; ${fmt(data.schoolPhone)}` : ""}${data.schoolEmail ? ` &bull; ${fmt(data.schoolEmail)}` : ""}</p>
+    </div>
+  </div>
+
+  <h2 class="form-title">Admission Form</h2>
+
+  <div class="reg-row">
+    <span><strong>Registration Code:</strong> ${fmt(data.registrationCode)}</span>
+    <span><strong>Date:</strong> ${fmt(date)}</span>
+  </div>
+
+  ${section("Student Details", `
+    <div class="two-col">
+      ${row("Student Name", studentName)}
+      ${row("Class for Admission", fmt(data.classForAdmission))}
+      ${row("Government ID", fmt(data.studentIdNumber))}
+      <div class="field-row">
+        <span class="field-label">Gender:</span>
+        <span class="field-value">${fmt(data.gender)}</span>
+      </div>
+    </div>
+    <div class="two-col">
+      ${row("Date of Birth", fmt(data.dob))}
+      ${data.discountCode ? row("Discount Code", fmt(data.discountCode)) : ""}
+    </div>
+  `)}
+
+  ${section("Parent Details", `
+    <div class="parent-subsection">
+      <h4>Father</h4>
+      <div class="two-col">
+        ${row("Name", fatherName)}
+        ${row("ID / CNIC", fmt(data.fatherIdNumber))}
+        ${row("Occupation", fmt(data.fatherOccupation))}
+        ${row("Organization", fmt(data.fatherOrganization))}
+      </div>
+      ${row("Mobile", fmt(data.fatherMobile))}
+    </div>
+    <div class="parent-subsection">
+      <h4>Mother</h4>
+      <div class="two-col">
+        ${row("Name", motherName)}
+        ${row("ID / CNIC", fmt(data.motherIdNumber))}
+        ${row("Mobile", fmt(data.motherMobile))}
+      </div>
+    </div>
+  `)}
+
+  ${section("Home Address", `
+    <div class="field-row">
+      <span class="field-value">${homeAddress}</span>
+    </div>
+  `)}
+
+  ${section("Emergency Details", `
+    <div class="two-col">
+      ${row("Emergency Contact", emergencyContact)}
+      ${data.notes ? row("Notes", fmt(data.notes)) : ""}
+    </div>
+  `)}
+
+  ${section("Admission Details", `
+    <div class="two-col">
+      ${row("Student Name", studentName)}
+      ${row("Start Date", fmt(date))}
+      ${row("Section", "—")}
+    </div>
+  `)}
+
+  <div class="terms">
+    <p><strong>Terms &amp; Conditions:</strong></p>
+    <p>I confirm that the information provided above is true and correct to the best of my knowledge. I agree to abide by the rules and regulations of the institution. The management reserves the right to cancel admission if any information is found to be incorrect or incomplete.</p>
+  </div>
+
+  <div class="signature-area">
+    <div class="signature-block">
+      <div class="label">Principal</div>
+      <div class="signature-line"></div>
+      <div class="hint">Signature</div>
+    </div>
+    <div class="signature-block">
+      <div class="label">Parent / Guardian</div>
+      <div class="signature-line"></div>
+      <div class="hint">Signature</div>
+    </div>
+  </div>
+</body>
+</html>`;
+    return html;
+}