Val Town Code SearchReturn to Val Town

12      type="image/svg+xml"
13    />
14    <link rel="preconnect" href="https://fonts.googleapis.com" />
15    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
16    <link
17      href="https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400..700&display=swap"
18      rel="stylesheet"
19    />

85  console.log(e.text);
86
87  // Get Anthropic API key from environment
88  const apiKey = Deno.env.get("ANTHROPIC_API_KEY");
89  if (!apiKey) {
90    console.error("Anthropic API key is not configured for this val.");
91    return;
92  }
93
94  // Initialize Anthropic client
95  const anthropic = new Anthropic({ apiKey });
96
97  // Process each image attachment serially

92
93/**
94 * Format chat history for Anthropic API
95 */
96function formatChatHistoryForAI(history) {
321bot.on("message", async (ctx) => {
322  try {
323    // Get Anthropic API key from environment
324    const apiKey = Deno.env.get("ANTHROPIC_API_KEY");
325    if (!apiKey) {
326      console.error("Anthropic API key is not configured.");
327      ctx.reply(
328        "I apologize, but I'm not properly configured at the moment. Please inform the household administrator."
332
333    // Initialize Anthropic client
334    const anthropic = new Anthropic({ apiKey });
335
336    // Get message text and user info
502  // Set webhook if it is not set yet
503  if (!isEndpointSet) {
504    await bot.api.setWebhook(req.url, {
505      secret_token: SECRET_TOKEN,
506    });

27async function generateConciseWeatherSummary(weatherDay) {
28  try {
29    // Get API key from environment
30    const apiKey = Deno.env.get("ANTHROPIC_API_KEY");
31    if (!apiKey) {
32      console.error("Anthropic API key is not configured.");
33      return null;
34    }
35
36    // Initialize Anthropic client
37    const anthropic = new Anthropic({ apiKey });
38
39    const response = await anthropic.messages.create({

77async function generateFunFacts(previousFacts) {
78  try {
79    // Get API key from environment
80    const apiKey = Deno.env.get("ANTHROPIC_API_KEY");
81    if (!apiKey) {
82      console.error("Anthropic API key is not configured.");
83      return null;
84    }
85
86    // Initialize Anthropic client
87    const anthropic = new Anthropic({ apiKey });
88
89    // Format previous facts for the prompt

20### 2. HTTP Vals
21
22- Create web APIs and endpoints
23- Handle HTTP requests and responses
24- Example structure:
66- Generate code in TypeScript
67- Add appropriate TypeScript types and interfaces for all data structures
68- Prefer official SDKs or libraries than writing API calls directly
69- Ask the user to supply API or library documentation if you are at all unsure about it
70- **Never bake in secrets into the code** - always use environment variables
71- Include comments explaining complex logic (avoid commenting obvious operations)
190- For AI-generated images, use: `https://maxm-imggenurl.web.val.run/the-description-of-your-image`
191- **Storage:** DO NOT use the Deno KV module for storage
192- **Browser APIs:** DO NOT use the `alert()`, `prompt()`, or `confirm()` methods
193- **Weather Data:** Use open-meteo for weather data (doesn't require API keys) unless otherwise specified
194- **View Source:** Add a view source link with `import.meta.url.replace("esm.town", "val.town")` and include `target="_top"` attribute
195- **Error Debugging:** Add `<script src="https://esm.town/v/std/catch"></script>` to HTML to capture client-side errors
196- **Error Handling:** Only use try...catch when there's a clear local resolution; avoid catches that merely log or return 500s - let errors bubble up with full context
197- **Environment Variables:** Use `Deno.env.get('keyname')` and minimize their use - prefer APIs without keys
198- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser
199- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
230
231### Backend (Hono) Best Practices
232- Hono is the recommended API framework (similar to Express, Flask, or Sinatra)
233- Main entry point should be `backend/index.ts`
234- **Static asset serving:** Use the utility functions to read and serve project files:
251  });
252  ```
253- Create RESTful API routes for CRUD operations
254- Be careful with error handling as Hono tends to swallow errors
255- Always include this snippet at the top-level Hono app to re-throwing errors to see full stack traces:
268- Use React 18.2.0 consistently in all imports and the `@jsxImportSource` pragma
269- Follow the React component pattern from the example project
270- Handle API calls properly with proper error catching
271
272### Database Patterns
299   - For files in the project, use `readFile` helpers
300
3015. **API Design:**
302   - `fetch` handler is the entry point for HTTP vals
303   - Run the Hono app with `export default app.fetch // This is the entry point for HTTP vals`

10import { NotebookView } from "./NotebookView.tsx";
11
12const API_BASE = "/api/memories";
13const MEMORIES_PER_PAGE = 20; // Increased from 7 to 20 memories per page
14
90
91    // Fetch avatar image
92    fetch("/api/images/stevens.jpg")
93      .then((response) => {
94        if (response.ok) return response.blob();
104
105    // Fetch wood background
106    fetch("/api/images/wood.jpg")
107      .then((response) => {
108        if (response.ok) return response.blob();
133    setError(null);
134    try {
135      const response = await fetch(API_BASE);
136      if (!response.ok) {
137        throw new Error(`HTTP error! status: ${response.status}`);
176
177    try {
178      const response = await fetch(API_BASE, {
179        method: "POST",
180        headers: { "Content-Type": "application/json" },
199
200    try {
201      const response = await fetch(`${API_BASE}/${id}`, {
202        method: "DELETE",
203      });
231
232    try {
233      const response = await fetch(`${API_BASE}/${editingMemory.id}`, {
234        method: "PUT",
235        headers: { "Content-Type": "application/json" },
606    <div className="font-pixel text-[#f8f1e0]">
607      <style jsx>{`
608        @import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans&display=swap");
609
610        @tailwind base;

18- Tracks connected users in memory
19- Broadcasts user count updates to all connected clients
20- REST API endpoint at `/api/users` for current count
21
22### Frontend (`/frontend/`)
44- Server-side user tracking with Set data structure for connection management
45- Client-side automatic reconnection with exponential backoff
46- Initial data injection to avoid extra API calls on page load
47- Proper cleanup of closed connections to prevent memory leaks

6
7### ✅ Order Creation Issue Resolved
8- **Issue**: Orders were being created successfully in the database but the API was not returning the created order data, causing frontend errors
9- **Root Cause**: SQLite result handling inconsistency - the `createOrder` function wasn't properly extracting the created order from different possible result structures
10- **Solution**: Implemented robust result handling with fallback mechanisms to handle different SQLite response formats
13### ✅ Enhanced Product System & Inventory Management
14- **New Feature**: Complete product categorization system supporting Fish, Poultry, and Feed products
15- **Fish Products**: Catfish and Tilapia in multiple forms (Fresh, Frozen, Live, Fillet, Smoked, Dried)
16- **Poultry Products**: Chicken (Whole/Parts), Turkey, Guinea Fowl, and Eggs (Chicken/Duck)
17- **Feed Products**: Fish Feed and Poultry Feed
40- SQLite database for storing orders
41- Automatic email confirmations to clients
42- RESTful API for order management
43
44## Interfaces
75│   │   └── queries.ts       # Database operations
76│   ├── routes/
77│   │   ├── orders.ts        # Order API endpoints
78│   │   └── static.ts        # Static file serving & routing
79│   └── index.ts             # Main Hono app
94```
95
96## API Endpoints
97
98### Orders
99- `POST /api/orders` - Create a new order (with automatic stock deduction)
100- `GET /api/orders` - Get all orders (admin only)
101- `GET /api/orders/:id` - Get specific order
102- `PUT /api/orders/:id` - Update order
103- `DELETE /api/orders/:id` - Delete order
104
105### Products & Inventory
106- `GET /api/products` - Get all active products with current stock levels
107- `GET /api/products/low-stock` - Get products below minimum stock level
108- `GET /api/products/:id` - Get specific product details
109- `POST /api/products` - Create new product (admin only)
110- `PUT /api/products/:id` - Update product details (admin only)
111- `POST /api/products/:id/adjust-stock` - Manually adjust product stock (admin/manager only)
112- `GET /api/products/:id/movements` - Get stock movement history for specific product
113- `GET /api/products/movements/all` - Get all stock movements (admin only)
114
115### Financial Management
116- `POST /api/financial/expenses` - Add new expense
117- `GET /api/financial/expenses` - Get expenses (with date/category filters)
118- `GET /api/financial/expenses/:id` - Get specific expense
119- `PUT /api/financial/expenses/:id` - Update expense
120- `DELETE /api/financial/expenses/:id` - Delete expense
121- `POST /api/financial/revenue` - Add other revenue (non-sales)
122- `GET /api/financial/revenue` - Get revenue records
123- `GET /api/financial/summary` - Get comprehensive financial summary
124- `GET /api/financial/sales-report` - Get detailed sales analytics
125
126### Users
127- `POST /api/users/login` - User authentication
128- `GET /api/users` - Get all users (admin only)
129- `POST /api/users` - Create new user (admin only)
130- `PUT /api/users/:id` - Update user (admin only)
131- `DELETE /api/users/:id` - Delete user (admin only)
132
133## Routes
172
173### 🐟 Fish Products
174**Catfish & Tilapia** available in multiple forms:
175- Fresh Fish
176- Frozen Fish
235- ✅ **Visual status indicators** for delivery dates
236- ✅ **SQLite database** with proper schema
237- ✅ **RESTful API** with error handling
238- ✅ **TypeScript** for type safety
239- ✅ **Session-based authentication** for admin access

3import type { 
4  Expense, CreateExpenseRequest, Revenue, FinancialSummary, SalesReport, 
5  ApiResponse 
6} from '../../shared/types.ts';
7
70  const fetchExpenses = async () => {
71    try {
72      const response = await fetch(`/api/financial/expenses?startDate=${dateRange.startDate}&endDate=${dateRange.endDate}`);
73      const result: ApiResponse<Expense[]> = await response.json();
74      if (result.success && result.data) {
75        setExpenses(result.data);
82  const fetchRevenue = async () => {
83    try {
84      const response = await fetch(`/api/financial/revenue?startDate=${dateRange.startDate}&endDate=${dateRange.endDate}`);
85      const result: ApiResponse<Revenue[]> = await response.json();
86      if (result.success && result.data) {
87        setRevenue(result.data);
94  const fetchFinancialSummary = async () => {
95    try {
96      const response = await fetch(`/api/financial/summary?startDate=${dateRange.startDate}&endDate=${dateRange.endDate}`);
97      const result: ApiResponse<FinancialSummary> = await response.json();
98      if (result.success && result.data) {
99        setFinancialSummary(result.data);
106  const fetchSalesReport = async () => {
107    try {
108      const response = await fetch(`/api/financial/sales-report?startDate=${dateRange.startDate}&endDate=${dateRange.endDate}`);
109      const result: ApiResponse<SalesReport> = await response.json();
110      if (result.success && result.data) {
111        setSalesReport(result.data);
122
123    try {
124      const response = await fetch('/api/financial/expenses', {
125        method: 'POST',
126        headers: { 'Content-Type': 'application/json' },
128      });
129
130      const result: ApiResponse<Expense> = await response.json();
131
132      if (result.success) {
158
159    try {
160      const response = await fetch('/api/financial/revenue', {
161        method: 'POST',
162        headers: { 'Content-Type': 'application/json' },
164      });
165
166      const result: ApiResponse<Revenue> = await response.json();
167
168      if (result.success) {
313                  {financialSummary.expenseBreakdown.map((expense, index) => (
314                    <div key={index} className="flex justify-between items-center">
315                      <span className="text-sm text-gray-700 capitalize">{expense.category}</span>
316                      <div className="text-right">
317                        <div className="text-sm font-semibold">{formatCurrency(expense.amount)}</div>
342                  >
343                    {expenseCategories.map(category => (
344                      <option key={category} value={category} className="capitalize">{category}</option>
345                    ))}
346                  </select>
392                  >
393                    {paymentMethods.map(method => (
394                      <option key={method} value={method} className="capitalize">{method.replace('_', ' ')}</option>
395                    ))}
396                  </select>
448                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{formatDate(expense.date)}</td>
449                      <td className="px-6 py-4 whitespace-nowrap">
450                        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800 capitalize">
451                          {expense.category}
452                        </span>
454                      <td className="px-6 py-4 text-sm text-gray-900">{expense.description}</td>
455                      <td className="px-6 py-4 whitespace-nowrap text-sm font-semibold text-red-600">{formatCurrency(expense.amount)}</td>
456                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 capitalize">{expense.paymentMethod?.replace('_', ' ')}</td>
457                    </tr>
458                  ))}
529                  >
530                    {paymentMethods.map(method => (
531                      <option key={method} value={method} className="capitalize">{method.replace('_', ' ')}</option>
532                    ))}
533                  </select>
574                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">{formatDate(rev.date)}</td>
575                      <td className="px-6 py-4 whitespace-nowrap">
576                        <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800 capitalize">
577                          {rev.source}
578                        </span>
580                      <td className="px-6 py-4 text-sm text-gray-900">{rev.description}</td>
581                      <td className="px-6 py-4 whitespace-nowrap text-sm font-semibold text-green-600">{formatCurrency(rev.amount)}</td>
582                      <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500 capitalize">{rev.paymentMethod?.replace('_', ' ')}</td>
583                    </tr>
584                  ))}