jac-client 0.2.8__py3-none-any.whl → 0.2.11__py3-none-any.whl

jac_client/examples/all-in-one/pages/LandingPage.jac

@@ -1,101 +1,124 @@
 # Landing Page - Ledgerly Brand
 # Professional landing page with hero, features, and CTA sections
 # Demonstrates: routing with Link, dark theme design, responsive layout
-cl import from "@jac-client/utils" {
+cl import from "@jac/runtime" {
     Link,
-
 }
 
-
-
 cl {
-    def:pub LandingPage() -> any {
-    return <div className="landing-container">
-        <section className="hero-section">
-            <h1 className="brand-name">Ledgerly</h1>
-            <p className="tagline">Know your real income</p>
-
-            <h2 className="headline">
-                Track Business & Personal Finances Separately
-            </h2>
-            <p className="subheadline">
-                Built for freelancers who need to see their true income
-                after taxes and business expenses.
-            </p>
-
-            <div style={{"display": "flex", "gap": "15px", "justifyContent": "center"}}>
-                <Link to="/app">
-                    <button className="cta-button">
-                        Let's Plan
-                    </button>
-                </Link>
-                <Link to="/features">
-                    <button className="cta-button" style={{
-                        "backgroundColor": "#8b5cf6",
-                        "border": "2px solid #8b5cf6"
-                    }}>
-                        Test Features
-                    </button>
-                </Link>
-            </div>
-        </section>
-
-        <section className="features-section">
-            <h2 className="features-title">Built for Freelancers</h2>
-
-            <div className="features-grid">
-                <div className="feature-card">
-                    <div className="feature-icon">💼</div>
-                    <h3 className="feature-title">Business vs Personal</h3>
-                    <p className="feature-description">
-                        Tag every transaction as business or personal.
-                        See your income streams separately and understand where your money really comes from.
+    def:pub LandingPage -> any {
+        return
+            <div className="landing-container">
+                <section className="hero-section">
+                    <h1 className="brand-name">
+                        Ledgerly
+                    </h1>
+                    <p className="tagline">
+                        Know your real income
                     </p>
-                </div>
-
-                <div className="feature-card">
-                    <div className="feature-icon">📊</div>
-                    <h3 className="feature-title">Auto Tax Reserve</h3>
-                    <p className="feature-description">
-                        Automatically calculate 20% tax reserve on business income.
-                        Know your true net profit after taxes without surprises.
+                    <h2 className="headline">
+                        Track Business & Personal Finances Separately
+                    </h2>
+                    <p className="subheadline">
+                        Built for freelancers who need to see their true incomeafter taxes and business expenses.
                     </p>
-                </div>
-
-                <div className="feature-card">
-                    <div className="feature-icon">🏷️</div>
-                    <h3 className="feature-title">Client Tagging</h3>
-                    <p className="feature-description">
-                        Tag business income by client name. Track which clients
-                        are generating the most revenue for your business.
+                    <div
+                        style={{
+                            "display": "flex",
+                            "gap": "15px",
+                            "justifyContent": "center"
+                        }}
+                    >
+                        <Link to="/app">
+                            <button className="cta-button">
+                                Let's Plan
+                            </button>
+                        </Link>
+                        <Link to="/features">
+                            <button
+                                className="cta-button"
+                                style={{
+                                    "backgroundColor": "#8b5cf6",
+                                    "border": "2px solid #8b5cf6"
+                                }}
+                            >
+                                Test Features
+                            </button>
+                        </Link>
+                    </div>
+                </section>
+                <section className="features-section">
+                    <h2 className="features-title">
+                        Built for Freelancers
+                    </h2>
+                    <div className="features-grid">
+                        <div className="feature-card">
+                            <div className="feature-icon">
+                                💼
+                            </div>
+                            <h3 className="feature-title">
+                                Business vs Personal
+                            </h3>
+                            <p className="feature-description">
+                                Tag every transaction as business or personal.See your income streams separately and understand where your money really comes from.
+                            </p>
+                        </div>
+                        <div className="feature-card">
+                            <div className="feature-icon">
+                                📊
+                            </div>
+                            <h3 className="feature-title">
+                                Auto Tax Reserve
+                            </h3>
+                            <p className="feature-description">
+                                Automatically calculate 20% tax reserve on business income.Know your true net profit after taxes without surprises.
+                            </p>
+                        </div>
+                        <div className="feature-card">
+                            <div className="feature-icon">
+                                🏷️
+                            </div>
+                            <h3 className="feature-title">
+                                Client Tagging
+                            </h3>
+                            <p className="feature-description">
+                                Tag business income by client name. Track which clientsare generating the most revenue for your business.
+                            </p>
+                        </div>
+                    </div>
+                </section>
+                <section className="cta-section">
+                    <h2 className="cta-section-title">
+                        Ready to know your real income?
+                    </h2>
+                    <p className="cta-section-text">
+                        Start tracking your freelance finances the smart way.
                     </p>
-                </div>
-            </div>
-        </section>
-
-        <section className="cta-section">
-            <h2 className="cta-section-title">Ready to know your real income?</h2>
-            <p className="cta-section-text">
-                Start tracking your freelance finances the smart way.
-            </p>
-
-            <div style={{"display": "flex", "gap": "15px", "justifyContent": "center"}}>
-                <Link to="/app">
-                    <button className="cta-button">
-                        Get Started Free
-                    </button>
-                </Link>
-                <Link to="/features">
-                    <button className="cta-button" style={{
-                        "backgroundColor": "#8b5cf6",
-                        "border": "2px solid #8b5cf6"
-                    }}>
-                        Explore Features
-                    </button>
-                </Link>
-            </div>
-        </section>
-    </div>;
-}
-
+                    <div
+                        style={{
+                            "display": "flex",
+                            "gap": "15px",
+                            "justifyContent": "center"
+                        }}
+                    >
+                        <Link to="/app">
+                            <button className="cta-button">
+                                Get Started Free
+                            </button>
+                        </Link>
+                        <Link to="/features">
+                            <button
+                                className="cta-button"
+                                style={{
+                                    "backgroundColor": "#8b5cf6",
+                                    "border": "2px solid #8b5cf6"
+                                }}
+                            >
+                                Explore Features
+                            </button>
+                        </Link>
+                    </div>
+                </section>
+            </div>;
+    }
 }

jac_client/examples/all-in-one/pages/budget_planner_ui.cl.jac

@@ -0,0 +1,65 @@
+# Budget Planner Page
+# Main application page with budget tracking features
+
+# Local JAC file imports
+cl import from ..context.BudgetContext { useBudgetContext }
+cl import from ..components.Header { Header }
+cl import from ..components.Summary { Summary }
+cl import from ..components.ProfitOverview { ProfitOverview }
+cl import from ..components.TransactionForm { TransactionForm }
+cl import from ..components.TransactionList { TransactionList }
+cl import from ..components.CategoryFilter { CategoryFilter }
+cl import from ..constants.categories { CATEGORY_COLORS }
+
+# cl import from "..components.PieChart.tsx" { PieChart }
+cl def:pub BudgetPlanner -> any {
+    [filter, setFilter] = useState("ALL");
+    budget = useBudgetContext();
+
+    # Filter transactions based on selected category
+    filtered = budget["transactions"];
+    if filter != "ALL" {
+        filtered = filtered.filter(
+            lambda tx: dict  -> bool { return tx["category"] == filter; }
+        );
+    }
+
+    # Sort by date (newest first)
+    sorted = filtered.slice().sort(
+        lambda a: dict , b: dict  -> int { return Reflect.construct(Date, [b["date"]]).getTime() - Reflect.construct(
+            Date, [a["date"]]
+        ).getTime(); }
+    );
+
+    # Prepare chart data with colors
+    chartData = budget["expensesByCategory"].map(
+        lambda item: dict  -> dict { return {
+            "name": item["name"],
+            "value": item["value"],
+            "color": CATEGORY_COLORS[item["name"]]
+        }; }
+    );
+
+    return
+        <div className="app-container">
+            <Header />
+            <main className="main-content">
+                <div className="left-panel">
+                    <Summary />
+                    <ProfitOverview />
+                    <TransactionForm />
+                    <CategoryFilter selectedCategory={filter} onSelect={setFilter} />
+                    <TransactionList
+                        transactions={sorted}
+                        onDelete={budget["deleteTransaction"]}
+                    />
+                </div>
+                <div className="right-panel"></div>
+            </main>
+        </div>;
+}
+# <PieChart
+#     data={chartData}
+#     title="Expense Breakdown"
+#     colors={CATEGORY_COLORS}
+# />