@appcorp/shadcn 1.1.88 → 1.1.90

package/components/ui/resizable.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 import * as ResizablePrimitive from "react-resizable-panels";
 declare const ResizablePanelGroup: ({ className, ...props }: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => React.JSX.Element;
-declare const ResizablePanel: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement | HTMLButtonElement | HTMLDivElement | HTMLFormElement | HTMLInputElement | HTMLObjectElement | HTMLSlotElement | HTMLStyleElement | HTMLTitleElement | HTMLSpanElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
+declare const ResizablePanel: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement | HTMLButtonElement | HTMLObjectElement | HTMLSlotElement | HTMLStyleElement | HTMLTitleElement | HTMLInputElement | HTMLSpanElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLabelElement | HTMLLegendElement | HTMLLIElement | HTMLLinkElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLParagraphElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLTableElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
     className?: string;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;

package/hooks/use-enhanced-combobox.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+interface UseEnhancedComboboxProps<T extends {
+    id: string;
+    name: string;
+}> {
+    emptyText?: string;
+    id: string;
+    info: string;
+    label: string;
+    onValueChange: (value: string) => void;
+    options: T[];
+    placeholder: string;
+    required?: boolean;
+    searchEndpoint: string;
+    searchPlaceholder?: string;
+    value: string;
+}
+export declare const useEnhancedCombobox: <T extends {
+    id: string;
+    name: string;
+}>({ emptyText, id, info, label, onValueChange, options, placeholder, required, searchEndpoint, searchPlaceholder, value, }: UseEnhancedComboboxProps<T>) => {
+    enhancedComboboxElement: React.JSX.Element;
+};
+export {};

package/hooks/use-enhanced-combobox.js

@@ -0,0 +1,145 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useEnhancedCombobox = void 0;
+var react_1 = __importStar(require("react"));
+var fetch_data_1 = require("@react-pakistan/util-functions/general/fetch-data");
+var api_methods_1 = require("@react-pakistan/util-functions/constants/api-methods");
+var use_debounce_1 = require("@react-pakistan/util-functions/hooks/use-debounce");
+var enhanced_combobox_1 = require("../components/enhanced-combobox");
+var useEnhancedCombobox = function (_a) {
+    var emptyText = _a.emptyText, id = _a.id, info = _a.info, label = _a.label, onValueChange = _a.onValueChange, options = _a.options, placeholder = _a.placeholder, required = _a.required, searchEndpoint = _a.searchEndpoint, searchPlaceholder = _a.searchPlaceholder, value = _a.value;
+    var _b = (0, react_1.useState)(""), searchQuery = _b[0], setSearchQuery = _b[1];
+    var _c = (0, react_1.useState)([]), searchOptions = _c[0], setSearchOptions = _c[1];
+    var _d = (0, react_1.useState)(false), loading = _d[0], setLoading = _d[1];
+    var debouncedSearchQuery = (0, use_debounce_1.useDebounce)(searchQuery, 800);
+    (0, react_1.useEffect)(function () {
+        if (!debouncedSearchQuery) {
+            setSearchOptions([]);
+            setLoading(false);
+            return;
+        }
+        setLoading(true);
+        (function () { return __awaiter(void 0, void 0, void 0, function () {
+            var data, error_1;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, 3, 4]);
+                        return [4 /*yield*/, (0, fetch_data_1.fetchData)({
+                                url: searchEndpoint,
+                                method: api_methods_1.API_METHODS.GET,
+                                params: { searchQuery: debouncedSearchQuery },
+                            })];
+                    case 1:
+                        data = (_a.sent()).data;
+                        setSearchOptions(data.items || []);
+                        return [3 /*break*/, 4];
+                    case 2:
+                        error_1 = _a.sent();
+                        console.error("Failed to fetch expense categories:", error_1);
+                        setSearchOptions([]);
+                        return [3 /*break*/, 4];
+                    case 3:
+                        setLoading(false);
+                        return [7 /*endfinally*/];
+                    case 4: return [2 /*return*/];
+                }
+            });
+        }); })();
+    }, [debouncedSearchQuery, searchEndpoint]);
+    var mappedOptions = (0, react_1.useMemo)(function () {
+        var opts = searchOptions.length > 0 ? searchOptions : options;
+        return ((opts === null || opts === void 0 ? void 0 : opts.map(function (category) { return ({
+            label: category.name,
+            value: category.id,
+        }); })) || []);
+    }, [searchOptions, options]);
+    var handleSearchChange = (0, react_1.useCallback)(function (query) {
+        setSearchQuery(query);
+    }, []);
+    var enhancedComboboxElement = (0, react_1.useMemo)(function () { return (react_1.default.createElement(enhanced_combobox_1.EnhancedCombobox, { emptyText: emptyText, id: id, info: info, label: label, loading: loading, onSearchChange: handleSearchChange, onValueChange: onValueChange, options: mappedOptions, placeholder: placeholder, required: required, searchPlaceholder: searchPlaceholder, value: value })); }, [
+        emptyText,
+        handleSearchChange,
+        id,
+        info,
+        label,
+        loading,
+        mappedOptions,
+        onValueChange,
+        placeholder,
+        required,
+        searchPlaceholder,
+        value,
+    ]);
+    return { enhancedComboboxElement: enhancedComboboxElement };
+};
+exports.useEnhancedCombobox = useEnhancedCombobox;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/shadcn",
-  "version": "1.1.88",
+  "version": "1.1.90",
   "scripts": {
     "build:next": "next build",
     "build:storybook": "mv ../.pnp.cjs ../.pnp.cjs.bak 2>/dev/null || true && storybook build -c .storybook -o .out && mv ../.pnp.cjs.bak ../.pnp.cjs 2>/dev/null || true",

package/templates/data/edupilotpro-v1.d.ts

@@ -0,0 +1,33 @@
+export interface DashboardMockupProps {
+    domain: string;
+    enrollmentHeading: string;
+    enrollmentList: {
+        name: string;
+        class: string;
+        status: string;
+    }[];
+    items: {
+        icon: React.ElementType;
+        label: string;
+        active: boolean;
+    }[];
+    schoolName: string;
+    stats: {
+        label: string;
+        value: string;
+        color: string;
+    }[];
+}
+export declare const dashboardMockupMenuList: DashboardMockupProps;
+export interface FeatureCardsProps {
+    items: {
+        icon: React.ElementType;
+        title: string;
+        description: string;
+        highlights: string[];
+        href: string;
+        accent: string;
+        bg: string;
+    }[];
+}
+export declare const featureCards: FeatureCardsProps;

package/templates/data/edupilotpro-v1.js

@@ -0,0 +1,116 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.featureCards = exports.dashboardMockupMenuList = void 0;
+var lucide_react_1 = require("lucide-react");
+exports.dashboardMockupMenuList = {
+    domain: "subdomain.edupilotpro.com",
+    items: [
+        { icon: lucide_react_1.LayoutDashboard, label: "Dashboard", active: true },
+        { icon: lucide_react_1.Users, label: "Students", active: false },
+        { icon: lucide_react_1.BookOpen, label: "Courses", active: false },
+        { icon: lucide_react_1.Calendar, label: "Attendance", active: false },
+        { icon: lucide_react_1.Receipt, label: "Finance", active: false },
+        { icon: lucide_react_1.BarChart3, label: "Analytics", active: false },
+    ],
+    schoolName: "Greenwood Academy",
+    stats: [
+        { label: "Students", value: "412", color: "text-blue-600" },
+        { label: "Teachers", value: "34", color: "text-purple-600" },
+        { label: "Attendance", value: "97%", color: "text-green-700" },
+        { label: "Fees Due", value: "$4.2k", color: "text-rose-600" },
+    ],
+    enrollmentHeading: "Recent Enrollments",
+    enrollmentList: [
+        { name: "Aisha Patel", class: "Grade 7A", status: "Active" },
+        { name: "Omar Faruk", class: "Grade 5B", status: "Active" },
+        { name: "Lena Müller", class: "Grade 9C", status: "Pending" },
+    ],
+};
+exports.featureCards = {
+    items: [
+        {
+            icon: lucide_react_1.Users,
+            title: "AI Admission Assistant",
+            description: "Automate your entire admissions pipeline. The AI Admission Assistant captures enquiries, collects documents, and moves students from application to enrolled — with no manual follow-up from your team.",
+            highlights: [
+                "Digital admission forms & document collection",
+                "AI-guided enrolment workflows",
+                "Family portal with sibling linking",
+                "Searchable student & family database",
+            ],
+            accent: "text-blue-700",
+            bg: "bg-blue-50 dark:bg-blue-950/30",
+            href: "/features/student-family",
+        },
+        {
+            icon: lucide_react_1.BookOpen,
+            title: "Academic Structure Engine",
+            description: "Configure your school's full academic hierarchy — year groups, sections, subjects, courses — once. Every module (attendance, grades, timetables) inherits this structure automatically.",
+            highlights: [
+                "Multi-level class & section hierarchy",
+                "Subject catalogue & course management",
+                "Teacher assignments & academic year config",
+                "Supports all curriculum frameworks",
+            ],
+            accent: "text-purple-700",
+            bg: "bg-purple-50 dark:bg-purple-950/30",
+            href: "/features/academic-structure",
+        },
+        {
+            icon: lucide_react_1.Calendar,
+            title: "AI Attendance Assistant",
+            description: "Teachers mark an entire class present in one tap. The AI Attendance Assistant records every entry, detects chronic absence patterns, and automatically notifies parents — all without lifting a finger.",
+            highlights: [
+                "One-tap bulk attendance marking",
+                "AI-powered absence pattern detection",
+                "Instant automated parent notifications",
+                "Conflict-free visual timetable builder",
+            ],
+            accent: "text-green-700",
+            bg: "bg-green-50 dark:bg-green-950/30",
+            href: "/features/attendance-schedules",
+        },
+        {
+            icon: lucide_react_1.BarChart3,
+            title: "AI Reporting Assistant",
+            description: "From test scores to polished report cards in one click. The AI Reporting Assistant calculates GPA, ranks students, flags underperformers, and generates print-ready PDFs at the end of every term.",
+            highlights: [
+                "Automatic GPA & class rank calculation",
+                "AI-flagged underperformance alerts",
+                "One-click PDF report card generation",
+                "Multi-term performance trend analytics",
+            ],
+            accent: "text-orange-700",
+            bg: "bg-orange-50 dark:bg-orange-950/30",
+            href: "/features/grades-assessments",
+        },
+        {
+            icon: lucide_react_1.CreditCard,
+            title: "AI Fee Reminder Automation",
+            description: "Build your fee structures once. EduPilotPro auto-generates invoices every term, sends escalating payment reminders automatically, and keeps your outstanding fee dashboard updated in real time.",
+            highlights: [
+                "Automated termly invoice generation",
+                "AI fee reminder sequences to parents",
+                "Real-time outstanding balance tracking",
+                "Discount, scholarship & exemption management",
+            ],
+            accent: "text-rose-700",
+            bg: "bg-rose-50 dark:bg-rose-950/30",
+            href: "/features/financial-management",
+        },
+        {
+            icon: lucide_react_1.Shield,
+            title: "Smart Role-Based Access",
+            description: "Every staff member, teacher, and parent sees exactly what they need. Five permission levels ensure data is protected, workflows are clean, and nothing leaks between roles.",
+            highlights: [
+                "5-tier role hierarchy (Admin → Parent)",
+                "Staff & workspace user management",
+                "Audit-ready access and activity logs",
+                "Secure, GDPR-compliant authentication",
+            ],
+            accent: "text-teal-700",
+            bg: "bg-teal-50 dark:bg-teal-950/30",
+            href: "/features/access-control",
+        },
+    ],
+};

package/templates/edupilotpro-v1/feature-card.d.ts

@@ -0,0 +1,13 @@
+import React, { FC } from "react";
+export interface FeatureCardProps {
+    accent: string;
+    bg: string;
+    description: string;
+    highlights: string[];
+    href: string;
+    Icon: React.ComponentType<{
+        className?: string;
+    }>;
+    title: string;
+}
+export declare const FeatureCard: FC<FeatureCardProps>;

package/templates/edupilotpro-v1/feature-card.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureCard = void 0;
+var react_1 = __importDefault(require("react"));
+var link_1 = __importDefault(require("next/link"));
+var lucide_react_1 = require("lucide-react");
+var card_1 = require("../../components/ui/card");
+var FeatureCard = function (_a) {
+    var accent = _a.accent, bg = _a.bg, description = _a.description, highlights = _a.highlights, href = _a.href, Icon = _a.Icon, title = _a.title;
+    return (react_1.default.createElement(link_1.default, { key: title, href: href, prefetch: false, className: "group flex" },
+        react_1.default.createElement(card_1.Card, { className: "flex w-full flex-col border-border/60 transition-all hover:shadow-lg hover:border-primary/40" },
+            react_1.default.createElement(card_1.CardHeader, { className: "pb-3" },
+                react_1.default.createElement("div", { className: "mb-4 inline-flex h-11 w-11 items-center justify-center rounded-xl ".concat(bg) },
+                    react_1.default.createElement(Icon, { className: "h-5 w-5 ".concat(accent) })),
+                react_1.default.createElement(card_1.CardTitle, { className: "text-lg" }, title)),
+            react_1.default.createElement(card_1.CardContent, { className: "flex flex-col flex-1 gap-4" },
+                react_1.default.createElement("p", { className: "text-sm text-muted-foreground leading-relaxed" }, description),
+                react_1.default.createElement("ul", { className: "mt-auto space-y-1.5" }, highlights.map(function (h) { return (react_1.default.createElement("li", { key: h, className: "flex items-start gap-2 text-sm text-foreground" },
+                    react_1.default.createElement(lucide_react_1.CheckCircle2, { className: "mt-0.5 h-4 w-4 shrink-0 ".concat(accent) }),
+                    h)); })),
+                react_1.default.createElement("div", { className: "mt-2 flex items-center gap-1 text-xs font-semibold ".concat(accent) },
+                    "Learn more",
+                    react_1.default.createElement(lucide_react_1.ArrowRight, { className: "h-3.5 w-3.5 transition-transform group-hover:translate-x-0.5" }))))));
+};
+exports.FeatureCard = FeatureCard;

package/templates/edupilotpro-v1/mockups/dashboard-mockup.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { DashboardMockupProps } from "../../data/edupilotpro-v1";
+export declare const DashboardMockup: FC<DashboardMockupProps>;

package/templates/edupilotpro-v1/mockups/dashboard-mockup.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DashboardMockup = void 0;
+var react_1 = __importDefault(require("react"));
+var lucide_react_1 = require("lucide-react");
+var DashboardMockup = function (_a) {
+    var domain = _a.domain, enrollmentHeading = _a.enrollmentHeading, enrollmentList = _a.enrollmentList, items = _a.items, schoolName = _a.schoolName, stats = _a.stats;
+    return (react_1.default.createElement("div", { className: "relative mx-auto w-full max-w-3xl" },
+        react_1.default.createElement("div", { className: "absolute inset-0 -z-10 scale-95 blur-3xl opacity-30 bg-gradient-to-br from-primary via-purple-500 to-blue-500 rounded-2xl" }),
+        react_1.default.createElement("div", { className: "rounded-xl border border-border/60 bg-background shadow-2xl overflow-hidden" },
+            react_1.default.createElement("div", { className: "flex items-center gap-2 border-b border-border/60 bg-muted/50 px-4 py-3" },
+                react_1.default.createElement("span", { className: "h-3 w-3 rounded-full bg-red-400" }),
+                react_1.default.createElement("span", { className: "h-3 w-3 rounded-full bg-yellow-400" }),
+                react_1.default.createElement("span", { className: "h-3 w-3 rounded-full bg-green-400" }),
+                react_1.default.createElement("div", { className: "ml-3 flex-1 rounded-md bg-background/70 border border-border/40 px-3 py-1 text-xs text-muted-foreground" }, domain)),
+            react_1.default.createElement("div", { className: "flex h-[340px] sm:h-[380px]" },
+                react_1.default.createElement("div", { className: "hidden w-44 flex-shrink-0 border-r border-border/40 bg-muted/30 p-3 sm:block" },
+                    react_1.default.createElement("div", { className: "mb-4 flex items-center gap-2" },
+                        react_1.default.createElement("span", { className: "flex h-6 w-6 items-center justify-center rounded bg-primary text-primary-foreground" },
+                            react_1.default.createElement(lucide_react_1.GraduationCap, { className: "h-4 w-4" })),
+                        react_1.default.createElement("span", { className: "text-xs font-bold" }, "EduPilotPro")),
+                    items.map(function (_a) {
+                        var Icon = _a.icon, label = _a.label, active = _a.active;
+                        return (react_1.default.createElement("div", { key: label, className: "mb-1 flex items-center gap-2 rounded-md px-2 py-1.5 text-xs ".concat(active
+                                ? "bg-primary/10 text-primary font-semibold"
+                                : "text-muted-foreground") },
+                            react_1.default.createElement(Icon, { className: "h-3.5 w-3.5 shrink-0" }),
+                            label));
+                    })),
+                react_1.default.createElement("div", { className: "flex-1 overflow-hidden p-4" },
+                    react_1.default.createElement("p", { className: "mb-3 text-sm font-semibold text-foreground" },
+                        "Overview \u2014 ",
+                        schoolName),
+                    react_1.default.createElement("div", { className: "grid grid-cols-2 gap-2 sm:grid-cols-4" }, stats.map(function (_a) {
+                        var label = _a.label, value = _a.value, color = _a.color;
+                        return (react_1.default.createElement("div", { key: label, className: "rounded-lg border border-border/50 bg-card p-3" },
+                            react_1.default.createElement("p", { className: "text-[10px] text-muted-foreground" }, label),
+                            react_1.default.createElement("p", { className: "text-lg font-bold ".concat(color) }, value)));
+                    })),
+                    react_1.default.createElement("div", { className: "mt-3 rounded-lg border border-border/50 bg-card p-3" },
+                        react_1.default.createElement("p", { className: "mb-2 text-xs font-semibold text-foreground" }, enrollmentHeading),
+                        react_1.default.createElement("div", { className: "space-y-1.5" }, enrollmentList.map(function (_a) {
+                            var name = _a.name, cls = _a.class, status = _a.status;
+                            return (react_1.default.createElement("div", { key: name, className: "flex items-center justify-between text-[10px]" },
+                                react_1.default.createElement("span", { className: "font-medium text-foreground" }, name),
+                                react_1.default.createElement("span", { className: "text-muted-foreground" }, cls),
+                                react_1.default.createElement("span", { className: "rounded-full px-1.5 py-0.5 text-[9px] font-medium ".concat(status === "Active"
+                                        ? "bg-green-100 text-green-700"
+                                        : "bg-yellow-100 text-yellow-700") }, status)));
+                        }))))))));
+};
+exports.DashboardMockup = DashboardMockup;