@appcorp/fusion-storybook 0.2.39 → 0.2.42

package/base-modules/student-fee/form.js

@@ -9,195 +9,114 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { EnhancedInput } from "@appcorp/shadcn/components/enhanced-input";
 import { EnhancedCheckbox } from "@appcorp/shadcn/components/enhanced-checkbox";
 import { EnhancedTextarea } from "@appcorp/shadcn/components/enhanced-textarea";
-import { EnhancedCombobox } from "@appcorp/shadcn/components/enhanced-combobox";
-import { useDebounce } from "@react-pakistan/util-functions/hooks/use-debounce";
-import { useEffect, useMemo, useState } from "react";
+import { useEnhancedCombobox } from "@appcorp/shadcn/hooks/use-enhanced-combobox";
+import { useMemo } from "react";
 import { useStudentFeeModule } from "./context";
-import { PAYMENT_STATUS_OPTIONS } from "./constants";
-import { getCachedStudentProfiles, getCachedStudentProfilesSync, } from "../student-profile/cache";
-import { getCachedFeeStructures, getCachedFeeStructuresSync, } from "../fee-structure/cache";
-import { getCachedDiscountCodesSync } from "../discount-code/cache";
+import { PAYMENT_STATUS_OPTIONS, STUDENT_FEE_API_ROUTES } from "./constants";
 import { getCachedWorkspaceSync } from "../workspace/cache";
-import { DATE_FORMATS, formatDate } from "@react-pakistan/util-functions";
-import { DISCOUNT_TYPE } from "../../type";
+import { API_METHODS, DATE_FORMATS, formatDate, } from "@react-pakistan/util-functions";
+import { DISCOUNT_TYPE, } from "../../type";
 import { useTranslations } from "next-intl";
+import { useFetch } from "@react-pakistan/util-functions/hooks/use-fetch";
 export const StudentFeeForm = () => {
-    var _a, _b, _c;
+    var _a, _b;
     const { state, handleChange } = useStudentFeeModule();
     const { amount, amountDue, amountPaid, discountAmount, discountCodeId, dueDate, enabled, errors, familyId, feeStructureId, remarks, status, studentProfileId, } = state;
     const workspace = getCachedWorkspaceSync();
     const currency = (_b = (_a = workspace === null || workspace === void 0 ? void 0 : workspace.school) === null || _a === void 0 ? void 0 : _a.currency) !== null && _b !== void 0 ? _b : "";
-    const schoolId = ((_c = workspace === null || workspace === void 0 ? void 0 : workspace.school) === null || _c === void 0 ? void 0 : _c.id) || "";
     const t = useTranslations("studentFee");
-    const cachedStudentProfiles = getCachedStudentProfilesSync();
-    const [studentSearchQuery, setStudentSearchQuery] = useState("");
-    const [remoteStudentOptions, setRemoteStudentOptions] = useState(() => cachedStudentProfiles.items.map((s) => {
-        var _a, _b;
-        return ({
-            label: `${s.computerNumber} - ${(_a = s.familyMember) === null || _a === void 0 ? void 0 : _a.firstName} ${(_b = s.familyMember) === null || _b === void 0 ? void 0 : _b.lastName}` ||
-                s.id,
-            value: s.id,
-        });
-    }));
-    const [studentOptionsLoading, setStudentOptionsLoading] = useState(false);
-    const debouncedStudentSearchQuery = useDebounce(studentSearchQuery, 300);
-    const trimmedStudentSearchQuery = debouncedStudentSearchQuery.trim();
-    const cachedStudentOptions = useMemo(() => cachedStudentProfiles.items
-        .filter((s) => {
+    const paymentStatusLabelMap = {
+        PENDING: t("formOptionPending"),
+        PARTIAL: t("formOptionPartial"),
+        PAID: t("formOptionPaid"),
+        OVERDUE: t("formOptionOverdue"),
+        CANCELLED: t("formOptionCancelled"),
+        REFUNDED: t("formOptionRefunded"),
+    };
+    const { data: studentProfiles } = useFetch("/api/v1/student-profile", {
+        params: { workspaceId: workspace === null || workspace === void 0 ? void 0 : workspace.id },
+        method: API_METHODS.GET,
+    });
+    const { data: feeStructures } = useFetch("/api/v1/fee-structure", {
+        params: { workspaceId: workspace === null || workspace === void 0 ? void 0 : workspace.id },
+        method: API_METHODS.GET,
+    });
+    const { data: discountCodes } = useFetch("/api/v1/discount-code", {
+        params: { workspaceId: workspace === null || workspace === void 0 ? void 0 : workspace.id },
+        method: API_METHODS.GET,
+    });
+    const filteredStudentOptions = useMemo(() => studentProfiles === null || studentProfiles === void 0 ? void 0 : studentProfiles.filter((s) => {
         var _a;
         if (!familyId)
             return true;
         return ((_a = s.familyMember) === null || _a === void 0 ? void 0 : _a.familyId) === familyId;
-    })
-        .map((s) => {
+    }).map((s) => {
         var _a, _b;
         return ({
-            label: `${s.computerNumber} - ${(_a = s.familyMember) === null || _a === void 0 ? void 0 : _a.firstName} ${(_b = s.familyMember) === null || _b === void 0 ? void 0 : _b.lastName}` ||
+            id: s.id,
+            name: `${s.computerNumber} - ${(_a = s.familyMember) === null || _a === void 0 ? void 0 : _a.firstName} ${(_b = s.familyMember) === null || _b === void 0 ? void 0 : _b.lastName}` ||
                 s.id,
-            value: s.id,
         });
-    }), [cachedStudentProfiles.items, familyId]);
-    const selectedStudentOption = useMemo(() => {
-        var _a, _b;
-        const selected = cachedStudentProfiles.items.find((s) => s.id === studentProfileId);
-        return selected
-            ? [
-                {
-                    label: `${selected.computerNumber} - ${(_a = selected.familyMember) === null || _a === void 0 ? void 0 : _a.firstName} ${(_b = selected.familyMember) === null || _b === void 0 ? void 0 : _b.lastName}` ||
-                        selected.id,
-                    value: selected.id,
-                },
-            ]
-            : [];
-    }, [cachedStudentProfiles.items, studentProfileId]);
-    const displayedStudentOptions = useMemo(() => {
-        const sourceOptions = trimmedStudentSearchQuery
-            ? remoteStudentOptions
-            : cachedStudentOptions;
-        const mergedOptions = [...selectedStudentOption, ...sourceOptions];
-        const uniqueOptions = new Map(mergedOptions.map((option) => [option.value, option]));
-        return [...uniqueOptions.values()];
-    }, [
-        cachedStudentOptions,
-        remoteStudentOptions,
-        selectedStudentOption,
-        trimmedStudentSearchQuery,
-    ]);
-    useEffect(() => {
-        if (!trimmedStudentSearchQuery || !schoolId)
-            return;
-        let isActive = true;
-        const fetchStudents = async () => {
-            setStudentOptionsLoading(true);
-            try {
-                const { items } = await getCachedStudentProfiles({
-                    params: {
-                        schoolId,
-                        searchQuery: trimmedStudentSearchQuery,
-                    },
-                });
-                if (!isActive)
-                    return;
-                setRemoteStudentOptions((items || []).map((s) => {
-                    var _a, _b;
-                    return ({
-                        label: `${s.computerNumber} - ${(_a = s.familyMember) === null || _a === void 0 ? void 0 : _a.firstName} ${(_b = s.familyMember) === null || _b === void 0 ? void 0 : _b.lastName}` ||
-                            s.id,
-                        value: s.id,
-                    });
-                }));
-            }
-            catch (_a) {
-                if (!isActive)
-                    return;
-                setRemoteStudentOptions([]);
-            }
-            finally {
-                if (isActive) {
-                    setStudentOptionsLoading(false);
-                }
-            }
-        };
-        void fetchStudents();
-        return () => {
-            isActive = false;
-        };
-    }, [schoolId, trimmedStudentSearchQuery]);
-    const cachedFeeStructures = getCachedFeeStructuresSync();
-    const [feeStructureSearchQuery, setFeeStructureSearchQuery] = useState("");
-    const [remoteFeeStructureOptions, setRemoteFeeStructureOptions] = useState(() => cachedFeeStructures.items.map((fs) => ({
-        label: fs.name || fs.id,
-        value: fs.id,
-    })));
-    const [feeStructureOptionsLoading, setFeeStructureOptionsLoading] = useState(false);
-    const debouncedFeeStructureSearchQuery = useDebounce(feeStructureSearchQuery, 300);
-    const trimmedFeeStructureSearchQuery = debouncedFeeStructureSearchQuery.trim();
-    const cachedFeeStructureOptions = useMemo(() => cachedFeeStructures.items.map((fs) => ({
-        label: fs.name || fs.id,
-        value: fs.id,
-    })), [cachedFeeStructures.items]);
-    const selectedFeeStructureOption = useMemo(() => {
-        const selected = cachedFeeStructures.items.find((fs) => fs.id === feeStructureId);
-        return selected
-            ? [{ label: selected.name || selected.id, value: selected.id }]
-            : [];
-    }, [cachedFeeStructures.items, feeStructureId]);
-    const displayedFeeStructureOptions = useMemo(() => {
-        const sourceOptions = trimmedFeeStructureSearchQuery
-            ? remoteFeeStructureOptions
-            : cachedFeeStructureOptions;
-        const mergedOptions = [...selectedFeeStructureOption, ...sourceOptions];
-        const uniqueOptions = new Map(mergedOptions.map((option) => [option.value, option]));
-        return [...uniqueOptions.values()];
-    }, [
-        cachedFeeStructureOptions,
-        remoteFeeStructureOptions,
-        selectedFeeStructureOption,
-        trimmedFeeStructureSearchQuery,
-    ]);
-    useEffect(() => {
-        if (!trimmedFeeStructureSearchQuery || !schoolId)
-            return;
-        let isActive = true;
-        const fetchFeeStructures = async () => {
-            setFeeStructureOptionsLoading(true);
-            try {
-                const { items } = await getCachedFeeStructures({
-                    params: {
-                        schoolId,
-                        searchQuery: trimmedFeeStructureSearchQuery,
-                    },
-                });
-                if (!isActive)
-                    return;
-                setRemoteFeeStructureOptions((items || []).map((fs) => ({
-                    label: fs.name || fs.id,
-                    value: fs.id,
-                })));
-            }
-            catch (_a) {
-                if (!isActive)
-                    return;
-                setRemoteFeeStructureOptions([]);
-            }
-            finally {
-                if (isActive) {
-                    setFeeStructureOptionsLoading(false);
-                }
-            }
-        };
-        void fetchFeeStructures();
-        return () => {
-            isActive = false;
-        };
-    }, [schoolId, trimmedFeeStructureSearchQuery]);
-    const discountCodes = getCachedDiscountCodesSync();
-    const discountCodeOptions = (discountCodes.items || [])
-        .filter((code) => code.enabled)
-        .map((code) => ({
-        label: `${code.code} - ${code.discountValue}${code.discountType === DISCOUNT_TYPE.PERCENTAGE ? "%" : currency}`,
-        value: code.id,
-        description: code.description || undefined,
-    }));
-    return (_jsxs("div", { className: "grid grid-cols-1 gap-4", children: [_jsx(EnhancedCombobox, { emptyText: t("formNoStudentEmpty"), error: errors.studentProfileId, id: "studentProfileId", info: t("formStudentInfo"), label: t("formStudentLabel"), loading: studentOptionsLoading && Boolean(trimmedStudentSearchQuery), onSearchChange: setStudentSearchQuery, onValueChange: (value) => handleChange("studentProfileId", value), options: displayedStudentOptions, placeholder: t("formStudentPlaceholder"), required: true, searchPlaceholder: t("formSearchStudentsPlaceholder"), value: studentProfileId || "" }), _jsx(EnhancedCombobox, { emptyText: t("formNoFeeStructureEmpty"), error: errors.feeStructureId, id: "feeStructureId", info: t("formFeeStructureInfo"), label: t("formFeeStructureLabel"), loading: feeStructureOptionsLoading && Boolean(trimmedFeeStructureSearchQuery), onSearchChange: setFeeStructureSearchQuery, onValueChange: (value) => handleChange("feeStructureId", value), options: displayedFeeStructureOptions, placeholder: t("formFeeStructurePlaceholder"), required: true, searchPlaceholder: t("formSearchFeeStructuresPlaceholder"), value: feeStructureId || "" }), _jsx(EnhancedCombobox, { emptyText: t("formNoDiscountCodeEmpty"), error: errors.discountCodeId, id: "discountCodeId", info: t("formDiscountCodeInfo"), label: t("formDiscountCodeLabel"), onValueChange: (value) => handleChange("discountCodeId", value), options: discountCodeOptions, placeholder: t("formDiscountCodePlaceholder"), searchPlaceholder: t("formSearchDiscountCodesPlaceholder"), value: discountCodeId || "" }), _jsx(EnhancedInput, { error: errors.discountAmount, id: "discountAmount", info: t("formDiscountAmountInfo"), label: t("formDiscountAmountLabel"), min: "0", onChange: (e) => handleChange("discountAmount", Number(e.target.value)), placeholder: "0.00", required: true, step: "0.01", type: "number", value: discountAmount || 0 }), _jsx(EnhancedInput, { error: errors.amount, id: "amount", info: t("formTotalAmountInfo"), label: t("formTotalAmountLabel"), min: "0", onChange: (e) => handleChange("amount", Number(e.target.value)), placeholder: "0.00", required: true, step: "0.01", type: "number", value: amount }), _jsx(EnhancedInput, { error: errors.amountPaid, id: "amountPaid", info: t("formAmountPaidInfo"), label: t("formAmountPaidLabel"), min: "0", onChange: (e) => handleChange("amountPaid", Number(e.target.value)), placeholder: "0.00", step: "0.01", type: "number", value: amountPaid }), _jsx(EnhancedInput, { disabled: true, error: errors.amountDue, id: "amountDue", info: t("formAmountDueInfo"), label: t("formAmountDueLabel"), min: "0", onChange: (e) => handleChange("amountDue", Number(e.target.value)), placeholder: "0.00", step: "0.01", type: "number", value: amountDue }), _jsx(EnhancedInput, { error: errors.dueDate, id: "dueDate", info: t("formDueDateInfo"), label: t("formDueDateLabel"), onChange: (e) => handleChange("dueDate", e.target.value), required: true, type: "date", value: formatDate(dueDate, DATE_FORMATS.YYYY_MM_DD) }), _jsx(EnhancedCombobox, { emptyText: t("formNoStatusEmpty"), error: errors.status, id: "status", info: t("formStatusInfo"), label: t("formOptionStatus"), onValueChange: (value) => handleChange("status", value), options: PAYMENT_STATUS_OPTIONS, placeholder: t("formStatusPlaceholder"), required: true, searchPlaceholder: t("formSearchStatusPlaceholder"), value: status }), _jsx(EnhancedTextarea, { error: errors.remarks, id: "remarks", label: t("formRemarksLabel"), onChange: (e) => handleChange("remarks", e.target.value), placeholder: t("formRemarksPlaceholder"), value: remarks || "" }), _jsx(EnhancedCheckbox, { checked: enabled, error: errors.enabled, id: "enabled", info: t("formEnabledInfo"), label: t("badgeActive"), onCheckedChange: (checked) => handleChange("enabled", !!checked) })] }));
+    }), [studentProfiles, familyId]);
+    const { enhancedComboboxElement: studentProfileIdCombo } = useEnhancedCombobox({
+        emptyText: t("formNoStudentEmpty"),
+        id: "studentProfileId",
+        info: t("formStudentInfo"),
+        label: t("formStudentLabel"),
+        onValueChange: (value) => handleChange("studentProfileId", value),
+        options: filteredStudentOptions,
+        placeholder: t("formStudentPlaceholder"),
+        required: true,
+        searchEndpoint: STUDENT_FEE_API_ROUTES.UNIT,
+        searchPlaceholder: t("formSearchStudentsPlaceholder"),
+        value: studentProfileId || "",
+    });
+    const { enhancedComboboxElement: feeStructureIdCombo } = useEnhancedCombobox({
+        emptyText: t("formNoFeeStructureEmpty"),
+        id: "feeStructureId",
+        info: t("formFeeStructureInfo"),
+        label: t("formFeeStructureLabel"),
+        onValueChange: (value) => handleChange("feeStructureId", value),
+        options: feeStructures === null || feeStructures === void 0 ? void 0 : feeStructures.map((fs) => ({
+            id: fs.id,
+            name: fs.name || fs.id,
+        })),
+        placeholder: t("formFeeStructurePlaceholder"),
+        required: true,
+        searchEndpoint: STUDENT_FEE_API_ROUTES.UNIT,
+        searchPlaceholder: t("formSearchFeeStructuresPlaceholder"),
+        value: feeStructureId || "",
+    });
+    const { enhancedComboboxElement: discountCodeIdCombo } = useEnhancedCombobox({
+        emptyText: t("formNoDiscountCodeEmpty"),
+        id: "discountCodeId",
+        info: t("formDiscountCodeInfo"),
+        label: t("formDiscountCodeLabel"),
+        onValueChange: (value) => handleChange("discountCodeId", value),
+        options: (discountCodes === null || discountCodes === void 0 ? void 0 : discountCodes.map((code) => ({
+            id: code.id,
+            name: `${code.code} - ${code.discountValue}${code.discountType === DISCOUNT_TYPE.PERCENTAGE ? "%" : currency}`,
+        }))) || [],
+        placeholder: t("formDiscountCodePlaceholder"),
+        searchEndpoint: STUDENT_FEE_API_ROUTES.UNIT,
+        searchPlaceholder: t("formSearchDiscountCodesPlaceholder"),
+        value: discountCodeId || "",
+    });
+    const { enhancedComboboxElement: statusCombo } = useEnhancedCombobox({
+        emptyText: t("formNoStatusEmpty"),
+        id: "status",
+        info: t("formStatusInfo"),
+        label: t("formOptionStatus"),
+        onValueChange: (value) => handleChange("status", value),
+        options: PAYMENT_STATUS_OPTIONS.map((opt) => ({
+            id: opt.value,
+            name: paymentStatusLabelMap[opt.value] || opt.label,
+        })),
+        placeholder: t("formStatusPlaceholder"),
+        required: true,
+        searchEndpoint: STUDENT_FEE_API_ROUTES.UNIT,
+        searchPlaceholder: t("formSearchStatusPlaceholder"),
+        value: status,
+    });
+    return (_jsxs("div", { className: "grid grid-cols-1 gap-4", children: [studentProfileIdCombo, feeStructureIdCombo, discountCodeIdCombo, _jsx(EnhancedInput, { error: errors.discountAmount, id: "discountAmount", info: t("formDiscountAmountInfo"), label: t("formDiscountAmountLabel"), min: "0", onChange: (e) => handleChange("discountAmount", Number(e.target.value)), placeholder: "0.00", required: true, step: "0.01", type: "number", value: discountAmount || 0 }), _jsx(EnhancedInput, { error: errors.amount, id: "amount", info: t("formTotalAmountInfo"), label: t("formTotalAmountLabel"), min: "0", onChange: (e) => handleChange("amount", Number(e.target.value)), placeholder: "0.00", required: true, step: "0.01", type: "number", value: amount }), _jsx(EnhancedInput, { error: errors.amountPaid, id: "amountPaid", info: t("formAmountPaidInfo"), label: t("formAmountPaidLabel"), min: "0", onChange: (e) => handleChange("amountPaid", Number(e.target.value)), placeholder: "0.00", step: "0.01", type: "number", value: amountPaid }), _jsx(EnhancedInput, { disabled: true, error: errors.amountDue, id: "amountDue", info: t("formAmountDueInfo"), label: t("formAmountDueLabel"), min: "0", onChange: (e) => handleChange("amountDue", Number(e.target.value)), placeholder: "0.00", step: "0.01", type: "number", value: amountDue }), _jsx(EnhancedInput, { error: errors.dueDate, id: "dueDate", info: t("formDueDateInfo"), label: t("formDueDateLabel"), onChange: (e) => handleChange("dueDate", e.target.value), required: true, type: "date", value: formatDate(dueDate, DATE_FORMATS.YYYY_MM_DD) }), statusCombo, _jsx(EnhancedTextarea, { error: errors.remarks, id: "remarks", label: t("formRemarksLabel"), onChange: (e) => handleChange("remarks", e.target.value), placeholder: t("formRemarksPlaceholder"), value: remarks || "" }), _jsx(EnhancedCheckbox, { checked: enabled, error: errors.enabled, id: "enabled", info: t("formEnabledInfo"), label: t("badgeActive"), onCheckedChange: (checked) => handleChange("enabled", !!checked) })] }));
 };

package/base-modules/student-fee/view.d.ts

@@ -1 +1,7 @@
-export declare const StudentFeeView: () => import("react").JSX.Element;
+/**
+ * StudentFee View
+ *
+ * Read-only detail view for a StudentFee record.
+ */
+import React from "react";
+export declare const StudentFeeView: () => React.JSX.Element;

package/base-modules/student-fee/view.js

@@ -1,35 +1,32 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * StudentFee View
- *
- * Read-only detail view for a StudentFee record.
- */
-import { useMemo } from "react";
 import { useStudentFeeModule } from "./context";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "@appcorp/shadcn/components/ui/card";
 import { Badge } from "@appcorp/shadcn/components/ui/badge";
 import { Separator } from "@appcorp/shadcn/components/ui/separator";
 import { Calendar, FileText, CheckCircle2, XCircle } from "lucide-react";
-import { getCachedFeeStructuresSync } from "../fee-structure/cache";
-import { getCachedStudentFeesSync } from "./cache";
 import { getCachedWorkspaceSync } from "../workspace/cache";
-import { formatDate, DATE_FORMATS } from "@react-pakistan/util-functions";
+import { formatDate, DATE_FORMATS, API_METHODS, } from "@react-pakistan/util-functions";
+import { useFetch } from "@react-pakistan/util-functions/hooks/use-fetch";
 import { useTranslations } from "next-intl";
 export const StudentFeeView = () => {
-    var _a, _b, _c, _d;
+    var _a, _b;
     const { state } = useStudentFeeModule();
-    const { amount, amountDue, amountPaid, dueDate, enabled, feeStructureId, id: studentFeeId, remarks, status, studentProfileId, } = state;
+    const { amount, amountDue, amountPaid, dueDate, enabled, feeStructureId, remarks, status, studentProfileId, } = state;
     const workspace = getCachedWorkspaceSync();
     const currency = (_b = (_a = workspace === null || workspace === void 0 ? void 0 : workspace.school) === null || _a === void 0 ? void 0 : _a.currency) !== null && _b !== void 0 ? _b : "";
     const t = useTranslations("studentFee");
-    const studentFee = getCachedStudentFeesSync().items.find(({ id }) => id === studentFeeId);
-    const studentMember = useMemo(() => {
-        var _a, _b, _c;
-        return (_c = (_b = (_a = studentFee === null || studentFee === void 0 ? void 0 : studentFee.family) === null || _a === void 0 ? void 0 : _a.members) === null || _b === void 0 ? void 0 : _b.filter(({ studentProfile }) => !!studentProfile)) === null || _c === void 0 ? void 0 : _c.find(({ studentProfile }) => (studentProfile === null || studentProfile === void 0 ? void 0 : studentProfile.id) === studentProfileId);
-    }, [studentFee, studentProfileId]);
-    const feeStructureName = (_c = getCachedFeeStructuresSync().items.find(({ id }) => id === feeStructureId)) === null || _c === void 0 ? void 0 : _c.name;
-    return (_jsx("div", { className: "space-y-4", children: _jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FileText, { className: "h-5 w-5 text-primary" }), _jsx(CardTitle, { className: "text-lg", children: t("viewSectionStudentFeeDetails") })] }), _jsx(CardDescription, { children: t("viewSectionReadOnlyStudentFeeInformation") })] }), _jsx(Separator, {}), _jsx(CardContent, { className: "pt-6", children: _jsxs("div", { className: "grid grid-cols-1 gap-6", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-medium text-muted-foreground", children: t("viewFieldStudent") }), _jsx("p", { className: "text-base", children: studentMember
-                                            ? `${studentMember.firstName} ${studentMember.lastName}`
-                                            : "—" })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-medium text-muted-foreground", children: t("viewFieldComputerNumber") }), _jsx("p", { className: "text-base", children: ((_d = studentMember === null || studentMember === void 0 ? void 0 : studentMember.studentProfile) === null || _d === void 0 ? void 0 : _d.computerNumber) || "—" })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-medium text-muted-foreground", children: t("viewFieldFeeStructure") }), _jsx("p", { className: "text-base", children: feeStructureName || "—" })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-medium text-muted-foreground", children: t("viewFieldTotalAmount") }), _jsxs("p", { className: "text-base", children: [currency, " ", (amount !== null && amount !== void 0 ? amount : 0).toFixed(2)] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-medium text-muted-foreground", children: t("viewFieldAmountPaid") }), _jsxs("p", { className: "text-base", children: [currency, " ", (amountPaid !== null && amountPaid !== void 0 ? amountPaid : 0).toFixed(2)] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-medium text-muted-foreground", children: t("viewFieldAmountDue") }), _jsxs("p", { className: "text-base", children: [currency, " ", (amountDue !== null && amountDue !== void 0 ? amountDue : 0).toFixed(2)] })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Calendar, { className: "h-4 w-4 text-muted-foreground" }), _jsx("p", { className: "text-sm font-medium text-muted-foreground", children: t("viewFieldDueDate") })] }), _jsx("p", { className: "text-base", children: formatDate(dueDate, DATE_FORMATS.LOCALE_DATE) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-medium text-muted-foreground", children: t("viewFieldStatus") }), _jsx(Badge, { variant: "secondary", children: status || "—" })] }), remarks && (_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-medium text-muted-foreground", children: t("viewFieldRemarks") }), _jsx("p", { className: "text-base", children: remarks })] })), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-sm font-medium text-muted-foreground", children: t("viewFieldRecordState") }), _jsxs(Badge, { className: "gap-1", variant: enabled ? "default" : "destructive", children: [enabled ? (_jsx(CheckCircle2, { className: "h-3 w-3" })) : (_jsx(XCircle, { className: "h-3 w-3" })), enabled ? t("viewFieldStatusActive") : t("viewFieldStatusInactive")] })] })] }) })] }) }));
+    const { data: studentProfile } = useFetch("/api/v1/student-profile", {
+        method: API_METHODS.GET,
+        params: { id: studentProfileId, workspaceId: workspace === null || workspace === void 0 ? void 0 : workspace.id },
+    });
+    const { data: feeStructure } = useFetch("/api/v1/fee-structure", {
+        method: API_METHODS.GET,
+        params: { id: feeStructureId, workspaceId: workspace === null || workspace === void 0 ? void 0 : workspace.id },
+    });
+    return (_jsx("div", { className: "space-y-4", children: _jsxs(Card, { children: [_jsxs(CardHeader, { className: "pb-3", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(FileText, { className: "text-primary h-5 w-5" }), _jsx(CardTitle, { className: "text-lg", children: t("viewSectionStudentFeeDetails") })] }), _jsx(CardDescription, { children: t("viewSectionReadOnlyStudentFeeInformation") })] }), _jsx(Separator, {}), _jsx(CardContent, { className: "pt-6", children: _jsxs("div", { className: "grid grid-cols-1 gap-6", children: [_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("viewFieldStudent") }), _jsx("p", { className: "text-base", children: studentProfile
+                                            ? `${studentProfile.firstName} ${studentProfile.lastName}`
+                                            : "—" })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("viewFieldComputerNumber") }), _jsx("p", { className: "text-base", children: (studentProfile === null || studentProfile === void 0 ? void 0 : studentProfile.computerNumber) || "—" })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("viewFieldFeeStructure") }), _jsx("p", { className: "text-base", children: (feeStructure === null || feeStructure === void 0 ? void 0 : feeStructure.name) || "—" })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("viewFieldTotalAmount") }), _jsxs("p", { className: "text-base", children: [currency, " ", (amount !== null && amount !== void 0 ? amount : 0).toFixed(2)] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("viewFieldAmountPaid") }), _jsxs("p", { className: "text-base", children: [currency, " ", (amountPaid !== null && amountPaid !== void 0 ? amountPaid : 0).toFixed(2)] })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("viewFieldAmountDue") }), _jsxs("p", { className: "text-base", children: [currency, " ", (amountDue !== null && amountDue !== void 0 ? amountDue : 0).toFixed(2)] })] }), _jsxs("div", { className: "space-y-1", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Calendar, { className: "text-muted-foreground h-4 w-4" }), _jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("viewFieldDueDate") })] }), _jsx("p", { className: "text-base", children: formatDate(dueDate, DATE_FORMATS.LOCALE_DATE) })] }), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("viewFieldStatus") }), _jsx(Badge, { variant: "secondary", children: status || "—" })] }), remarks && (_jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("viewFieldRemarks") }), _jsx("p", { className: "text-base", children: remarks })] })), _jsxs("div", { className: "space-y-1", children: [_jsx("p", { className: "text-muted-foreground text-sm font-medium", children: t("viewFieldRecordState") }), _jsxs(Badge, { className: "gap-1", variant: enabled ? "default" : "destructive", children: [enabled ? (_jsx(CheckCircle2, { className: "h-3 w-3" })) : (_jsx(XCircle, { className: "h-3 w-3" })), enabled
+                                                ? t("viewFieldStatusActive")
+                                                : t("viewFieldStatusInactive")] })] })] }) })] }) }));
 };

package/base-modules/student-profile/constants.d.ts

@@ -33,9 +33,6 @@ export declare const tableBodyCols: ({
     textFormatter?: undefined;
 })[];
 export declare const STATUS_OPTIONS: readonly [{
-    readonly label: "All Status";
-    readonly value: "";
-}, {
     readonly label: "Active";
     readonly value: "ACTIVE";
 }, {
@@ -53,9 +50,6 @@ export declare const STATUS_OPTIONS: readonly [{
 }];
 export declare const STATUS_BADGE_COLORS: Record<string, string>;
 export declare const GENDER_OPTIONS: readonly [{
-    readonly label: "All Genders";
-    readonly value: "";
-}, {
     readonly label: "Male";
     readonly value: "MALE";
 }, {

package/base-modules/student-profile/constants.js

@@ -68,7 +68,7 @@ export const tableBodyCols = [
                 const courseCount = (_b = (_a = section === null || section === void 0 ? void 0 : section.courses) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0;
                 return courseCount > 0
                     ? `${(_c = section === null || section === void 0 ? void 0 : section.name) !== null && _c !== void 0 ? _c : "Section"} (${courseCount} subjects)`
-                    : (_d = section === null || section === void 0 ? void 0 : section.name) !== null && _d !== void 0 ? _d : "Enrolled";
+                    : ((_d = section === null || section === void 0 ? void 0 : section.name) !== null && _d !== void 0 ? _d : "Enrolled");
             }
             return `${enrollments.length} sections`;
         },
@@ -89,7 +89,6 @@ export const tableBodyCols = [
 // STATUS OPTIONS
 // ============================================================================
 export const STATUS_OPTIONS = [
-    { label: "All Status", value: "" },
     { label: "Active", value: "ACTIVE" },
     { label: "Inactive", value: "INACTIVE" },
     { label: "Graduated", value: "GRADUATED" },
@@ -107,7 +106,6 @@ export const STATUS_BADGE_COLORS = {
 // GENDER OPTIONS
 // ============================================================================
 export const GENDER_OPTIONS = [
-    { label: "All Genders", value: "" },
     { label: "Male", value: "MALE" },
     { label: "Female", value: "FEMALE" },
     { label: "Other", value: "OTHER" },

package/base-modules/student-profile/context/use-student-profile-module.d.ts

@@ -29,6 +29,7 @@ export declare const useStudentProfileModule: () => {
     }[];
     listFetchNow: (url?: string, config?: import("@react-pakistan/util-functions/hooks/use-fetch").FetchConfig) => void;
     listLoading: boolean;
+    resetRecordFormState: () => void;
     rowActions: RowAction[];
     toggleStatus: (row?: TableRow) => void;
     updateLoading: boolean;