sirius-cli 0.1.0__py3-none-any.whl

sirius_cli/templates/frontend/src/TableCrud.tsx.jinja2

@@ -0,0 +1,567 @@
+import React, { useEffect, useState, useCallback } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Plus, Edit2, Trash2, X, ChevronLeft, ChevronRight, Loader2, Search, Download, ArrowUpDown, ArrowUp, ArrowDown, FileSpreadsheet } from 'lucide-react'
+
+const API_BASE = import.meta.env.VITE_API_URL || 'http://localhost:8000'
+
+interface RecordType {
+  id: number
+  [key: string]: any
+}
+
+export default function {{ table_name.replace('_', ' ').title().replace(' ', '') }}Crud() {
+  const navigate = useNavigate()
+  const [records, setRecords] = useState<RecordType[]>([])
+  const [loading, setLoading] = useState(true)
+  const [submitting, setSubmitting] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  // Pagination states
+  const [page, setPage] = useState(1)
+  const limit = 10
+  const offset = (page - 1) * limit
+
+  // Server-side search
+  const [search, setSearch] = useState('')
+  const [debouncedSearch, setDebouncedSearch] = useState('')
+
+  // Sort states
+  const [sortCol, setSortCol] = useState<string | null>(null)
+  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('asc')
+
+  // Modal states
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [editingRecord, setEditingRecord] = useState<RecordType | null>(null)
+  
+  // Options for foreign keys
+  {% for col in columns %}
+  {% if col.foreign_key %}
+  {% set target_table = col.foreign_key.split('.')[0] %}
+  const [{{ target_table }}Options, set{{ target_table.title().replace('_', '').replace(' ', '') }}Options] = useState<any[]>([])
+  const [{{ target_table }}OptionsError, set{{ target_table.title().replace('_', '').replace(' ', '') }}OptionsError] = useState<string | null>(null)
+  {% endif %}
+  {% endfor %}
+
+  // Form states
+  const [formData, setFormData] = useState<Record<string, any>>({
+    {% for col in columns %}
+    {% if not col.is_pk %}
+    {% if col.type == 'Boolean' %}
+    {{ col.name }}: false,
+    {% else %}
+    {{ col.name }}: '',
+    {% endif %}
+    {% endif %}
+    {% endfor %}
+  })
+
+  const [deleteConfirmId, setDeleteConfirmId] = useState<number | null>(null)
+
+  // Debounce search input
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setDebouncedSearch(search)
+      setPage(1)
+    }, 350)
+    return () => clearTimeout(timer)
+  }, [search])
+
+  const fetchRecords = useCallback(async () => {
+    try {
+      setLoading(true)
+      const params = new URLSearchParams({
+        limit: String(limit + 1),
+        offset: String(offset),
+      })
+      if (debouncedSearch) params.set('search', debouncedSearch)
+      if (sortCol) {
+        params.set('order_by', sortCol)
+        params.set('dir', sortDir)
+      }
+      const res = await fetch(`${API_BASE}/api/{{ table_name }}?${params}`)
+      if (!res.ok) throw new Error('Failed to load data from server')
+      const data = await res.json()
+      setRecords(data)
+      setError(null)
+    } catch (err: any) {
+      setError(err.message || 'Something went wrong')
+    } finally {
+      setLoading(false)
+    }
+  }, [page, debouncedSearch, sortCol, sortDir])
+
+  useEffect(() => {
+    fetchRecords()
+  }, [fetchRecords])
+
+  // Fetch Foreign Key Options
+  useEffect(() => {
+    {% for col in columns %}
+    {% if col.foreign_key %}
+    {% set target_table = col.foreign_key.split('.')[0] %}
+    fetch(`${API_BASE}/api/{{ target_table }}?limit=500`)
+      .then(res => {
+        if (!res.ok) throw new Error(`Server responded ${res.status}`)
+        return res.json()
+      })
+      .then(data => set{{ target_table.title().replace('_', '').replace(' ', '') }}Options(data))
+      .catch(err => {
+        console.error("Failed to load options for {{ target_table }}", err)
+        set{{ target_table.title().replace('_', '').replace(' ', '') }}OptionsError(err.message || 'Failed to load options')
+      })
+    {% endif %}
+    {% endfor %}
+  }, [])
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
+    const { name, type } = e.target
+    if (type === 'checkbox') {
+      const checked = (e.target as HTMLInputElement).checked
+      setFormData(prev => ({ ...prev, [name]: checked }))
+    } else {
+      const value = e.target.value
+      setFormData(prev => ({ ...prev, [name]: value }))
+    }
+  }
+
+  const openCreateModal = () => {
+    setEditingRecord(null)
+    setFormData({
+      {% for col in columns %}
+      {% if not col.is_pk %}
+      {% if col.type == 'Boolean' %}
+      {{ col.name }}: false,
+      {% else %}
+      {{ col.name }}: '',
+      {% endif %}
+      {% endif %}
+      {% endfor %}
+    })
+    setIsModalOpen(true)
+  }
+
+  const openEditModal = (record: RecordType) => {
+    setEditingRecord(record)
+    const mappedData = { ...record }
+    {% for col in columns %}
+    {% if col.type == 'DateTime' %}
+    if (record.{{ col.name }}) {
+      mappedData.{{ col.name }} = new Date(record.{{ col.name }}).toISOString().slice(0, 16)
+    }
+    {% endif %}
+    {% endfor %}
+    setFormData(mappedData)
+    setIsModalOpen(true)
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setSubmitting(true)
+    try {
+      const url = editingRecord 
+        ? `${API_BASE}/api/{{ table_name }}/${editingRecord.id}` 
+        : `${API_BASE}/api/{{ table_name }}`
+      const method = editingRecord ? 'PUT' : 'POST'
+
+      const payload: Record<string, any> = {}
+      {% for col in columns %}
+      {% if not col.is_pk %}
+      {% if col.type == 'Integer' %}
+      payload.{{ col.name }} = formData.{{ col.name }} !== '' && formData.{{ col.name }} !== null ? parseInt(formData.{{ col.name }}, 10) : null
+      {% elif col.type == 'Float' %}
+      payload.{{ col.name }} = formData.{{ col.name }} !== '' && formData.{{ col.name }} !== null ? parseFloat(formData.{{ col.name }}) : null
+      {% elif col.type == 'Boolean' %}
+      payload.{{ col.name }} = !!formData.{{ col.name }}
+      {% elif col.type == 'DateTime' %}
+      payload.{{ col.name }} = formData.{{ col.name }} !== '' && formData.{{ col.name }} !== null ? new Date(formData.{{ col.name }}).toISOString() : null
+      {% else %}
+      payload.{{ col.name }} = formData.{{ col.name }} || null
+      {% endif %}
+      {% endif %}
+      {% endfor %}
+
+      const res = await fetch(url, {
+        method,
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload)
+      })
+
+      if (!res.ok) throw new Error('Failed to save record')
+      
+      setIsModalOpen(false)
+      fetchRecords()
+    } catch (err: any) {
+      alert(err.message || 'Error saving record')
+    } finally {
+      setSubmitting(false)
+    }
+  }
+
+  const handleDelete = async (id: number) => {
+    try {
+      const res = await fetch(`${API_BASE}/api/{{ table_name }}/${id}`, {
+        method: 'DELETE'
+      })
+      if (!res.ok) throw new Error('Failed to delete record')
+      setDeleteConfirmId(null)
+      fetchRecords()
+    } catch (err: any) {
+      alert(err.message || 'Error deleting record')
+    }
+  }
+
+  const handleExport = (fmt: 'csv' | 'xlsx') => {
+    window.open(`${API_BASE}/api/{{ table_name }}/export?fmt=${fmt}`, '_blank')
+  }
+
+  const handleSort = (colName: string) => {
+    if (sortCol === colName) {
+      setSortDir(prev => prev === 'asc' ? 'desc' : 'asc')
+    } else {
+      setSortCol(colName)
+      setSortDir('asc')
+    }
+  }
+
+  const hasNextPage = records.length > limit
+  const displayedRecords = hasNextPage ? records.slice(0, limit) : records
+
+  const SortIcon = ({ col }: { col: string }) => {
+    if (sortCol !== col) return <ArrowUpDown className="w-3 h-3 text-slate-600" />
+    return sortDir === 'asc' ? <ArrowUp className="w-3 h-3 text-brand-400" /> : <ArrowDown className="w-3 h-3 text-brand-400" />
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Header Panel */}
+      <div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
+        <div>
+          <h2 className="text-2xl font-bold font-outfit text-white capitalize">
+            {{ table_name.replace('_', ' ') }}
+          </h2>
+          <p className="text-slate-400 text-xs mt-1 font-sans">
+            Create, update, and manage entries for {{ table_name }}.
+          </p>
+        </div>
+        
+        <div className="flex gap-2">
+          <button
+            onClick={() => handleExport('csv')}
+            className="flex items-center gap-2 px-4 py-2.5 bg-slate-900 border border-slate-805 hover:bg-slate-800 rounded-xl text-xs font-semibold text-slate-300 transition-all"
+          >
+            <Download className="w-4 h-4 text-slate-400" />
+            CSV
+          </button>
+          <button
+            onClick={() => handleExport('xlsx')}
+            className="flex items-center gap-2 px-4 py-2.5 bg-slate-900 border border-slate-805 hover:bg-slate-800 rounded-xl text-xs font-semibold text-slate-300 transition-all"
+          >
+            <FileSpreadsheet className="w-4 h-4 text-emerald-400" />
+            Excel
+          </button>
+          <button
+            onClick={openCreateModal}
+            className="flex items-center gap-2 px-4 py-2.5 bg-gradient-to-r from-brand-600 to-brand-700 hover:from-brand-500 hover:to-brand-600 rounded-xl text-xs font-semibold shadow-lg shadow-brand-500/20 text-white transition-all"
+          >
+            <Plus className="w-4 h-4" />
+            Add Record
+          </button>
+        </div>
+      </div>
+
+      {/* Search & Stats Bar */}
+      <div className="flex flex-col sm:flex-row gap-4 items-center justify-between bg-slate-900/30 p-4 border border-slate-900 rounded-xl">
+        <div className="relative w-full sm:w-85">
+          <Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-500" />
+          <input
+            type="text"
+            placeholder="Search all records..."
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            className="w-full pl-10 pr-4 py-2 bg-slate-950 border border-slate-800 rounded-xl text-xs focus:border-brand-500 focus:outline-none text-slate-300 transition-colors"
+          />
+        </div>
+        <div className="text-xs text-slate-500 font-medium flex items-center gap-2">
+          {debouncedSearch && (
+            <span className="px-2 py-0.5 rounded-md bg-brand-500/10 border border-brand-500/20 text-brand-400 text-[10px] font-semibold">
+              Server search
+            </span>
+          )}
+          Showing {displayedRecords.length} record{displayedRecords.length !== 1 ? 's' : ''} on this page
+        </div>
+      </div>
+
+      {/* Main Grid/Table */}
+      {loading ? (
+        <div className="h-64 flex flex-col items-center justify-center bg-slate-900/10 border border-slate-900 rounded-2xl gap-3">
+          <Loader2 className="w-8 h-8 text-brand-500 animate-spin" />
+          <span className="text-xs text-slate-500">Retrieving records from backend...</span>
+        </div>
+      ) : error ? (
+        <div className="p-6 border border-red-500/20 bg-red-500/5 text-red-400 rounded-2xl text-center">
+          <p className="font-semibold text-sm">Failed to connect to backend server</p>
+          <p className="text-xs mt-1 text-red-400/80">Make sure your FastAPI server is running.</p>
+        </div>
+      ) : displayedRecords.length === 0 ? (
+        <div className="p-12 border border-dashed border-slate-800 rounded-2xl text-center bg-slate-900/5">
+          <p className="text-slate-400 font-semibold text-sm">No records found</p>
+          <p className="text-xs mt-1 text-slate-500">Create a new record or adjust your search.</p>
+          <button
+            onClick={openCreateModal}
+            className="mt-4 px-4 py-2 bg-slate-900 hover:bg-slate-800 border border-slate-850 text-xs font-semibold text-slate-300 rounded-xl transition-all"
+          >
+            Add Record
+          </button>
+        </div>
+      ) : (
+        <div className="bg-slate-900/20 border border-slate-900 rounded-2xl overflow-hidden">
+          <div className="overflow-x-auto">
+            <table className="w-full text-left border-collapse">
+              <thead>
+                <tr className="border-b border-slate-900 bg-slate-900/50">
+                  {% for col in columns %}
+                  <th
+                    onClick={() => handleSort('{{ col.name }}')}
+                    className="px-6 py-4 text-xs font-bold text-slate-400 uppercase font-outfit tracking-wider cursor-pointer hover:text-slate-200 select-none transition-colors"
+                  >
+                    <div className="flex items-center gap-1.5">
+                      {{ col.name }}
+                      <SortIcon col="{{ col.name }}" />
+                    </div>
+                  </th>
+                  {% endfor %}
+                  <th className="px-6 py-4 text-xs font-bold text-slate-400 uppercase font-outfit tracking-wider text-right">
+                    Actions
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="divide-y divide-slate-900">
+                {displayedRecords.map((record) => (
+                  <tr key={record.id} className="hover:bg-slate-900/30 transition-colors">
+                    {% for col in columns %}
+                    <td className="px-6 py-4 text-xs font-medium text-slate-300 font-mono">
+                      {% if col.type == 'Boolean' %}
+                      <span className={`px-2 py-0.5 rounded-full text-[10px] font-bold ${
+                        record.{{ col.name }} 
+                          ? 'bg-emerald-500/10 text-emerald-400 border border-emerald-500/20' 
+                          : 'bg-slate-800 text-slate-400 border border-slate-700/50'
+                      }`}>
+                        {record.{{ col.name }} ? 'True' : 'False'}
+                      </span>
+                      {% elif col.type == 'DateTime' %}
+                      {record.{{ col.name }} ? new Date(record.{{ col.name }}).toLocaleString() : '-'}
+                      {% elif col.foreign_key %}
+                      {% set target_table = col.foreign_key.split('.')[0] %}
+                      <button
+                        onClick={() => record.{{ col.name }} !== null && navigate('/{{ target_table }}')}
+                        className="px-2 py-0.5 rounded bg-slate-800/80 text-brand-400 border border-slate-700/40 text-[10px] font-bold cursor-pointer hover:bg-slate-700/60 hover:border-brand-500/30 transition-all"
+                        title="Navigate to {{ target_table }}"
+                      >
+                        {(() => {
+                          const opt = {{ target_table }}Options.find((o: any) => o.id === record.{{ col.name }})
+                          if (!opt) return record.{{ col.name }} !== null ? `{{ target_table }} #${record.{{ col.name }}}` : '-'
+                          return opt.name || opt.username || opt.email || opt.title || opt.label || `{{ target_table }} #${opt.id}`
+                        })()}
+                      </button>
+                      {% else %}
+                      {record.{{ col.name }} !== null ? String(record.{{ col.name }}) : '-'}
+                      {% endif %}
+                    </td>
+                    {% endfor %}
+                    <td className="px-6 py-4 text-right">
+                      <div className="flex items-center justify-end gap-2">
+                        <button
+                          onClick={() => openEditModal(record)}
+                          className="p-1.5 hover:bg-slate-800 text-slate-400 hover:text-white rounded-lg transition-all"
+                        >
+                          <Edit2 className="w-3.5 h-3.5" />
+                        </button>
+                        {deleteConfirmId === record.id ? (
+                          <div className="flex items-center gap-1.5">
+                            <button
+                              onClick={() => handleDelete(record.id)}
+                              className="px-2 py-1 bg-red-600 hover:bg-red-500 text-[10px] text-white font-bold rounded-md"
+                            >
+                              Confirm
+                            </button>
+                            <button
+                              onClick={() => setDeleteConfirmId(null)}
+                              className="px-2 py-1 bg-slate-800 hover:bg-slate-700 text-[10px] text-slate-300 rounded-md"
+                            >
+                              Cancel
+                            </button>
+                          </div>
+                        ) : (
+                          <button
+                            onClick={() => setDeleteConfirmId(record.id)}
+                            className="p-1.5 hover:bg-red-950/40 text-slate-400 hover:text-red-400 rounded-lg transition-all"
+                          >
+                            <Trash2 className="w-3.5 h-3.5" />
+                          </button>
+                        )}
+                      </div>
+                    </td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          </div>
+
+          {/* Pagination Footer */}
+          <div className="px-6 py-4 border-t border-slate-900 bg-slate-900/10 flex items-center justify-between">
+            <button
+              onClick={() => setPage(p => Math.max(1, p - 1))}
+              disabled={page === 1}
+              className="flex items-center gap-1.5 px-3 py-1.5 bg-slate-900 border border-slate-800 hover:bg-slate-800 rounded-lg text-xs font-semibold text-slate-300 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+            >
+              <ChevronLeft className="w-3.5 h-3.5" />
+              Prev
+            </button>
+            <span className="text-xs text-slate-500 font-medium">
+              Page {page}
+            </span>
+            <button
+              onClick={() => setPage(p => p + 1)}
+              disabled={!hasNextPage}
+              className="flex items-center gap-1.5 px-3 py-1.5 bg-slate-900 border border-slate-800 hover:bg-slate-800 rounded-lg text-xs font-semibold text-slate-300 disabled:opacity-50 disabled:cursor-not-allowed transition-all"
+            >
+              Next
+              <ChevronRight className="w-3.5 h-3.5" />
+            </button>
+          </div>
+        </div>
+      )}
+
+      {/* Create / Edit Modal */}
+      {isModalOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-950/80 backdrop-blur-sm">
+          <div className="w-full max-w-lg bg-slate-900 border border-slate-850 rounded-2xl shadow-2xl flex flex-col max-h-[90vh]">
+            <header className="px-6 py-4 border-b border-slate-850 flex items-center justify-between">
+              <h3 className="font-outfit font-bold text-white text-base">
+                {editingRecord ? 'Update Record' : 'Create New Record'}
+              </h3>
+              <button
+                onClick={() => setIsModalOpen(false)}
+                className="text-slate-400 hover:text-white p-1 hover:bg-slate-800 rounded-lg transition-all"
+              >
+                <X className="w-4 h-4" />
+              </button>
+            </header>
+
+            <form onSubmit={handleSubmit} className="p-6 overflow-y-auto space-y-4 flex-1">
+              {% for col in columns %}
+              {% if not col.is_pk %}
+              <div className="flex flex-col gap-1.5">
+                <label className="text-[10px] font-bold text-slate-400 uppercase tracking-wider font-outfit">
+                  {{ col.name.replace('_', ' ') }}
+                </label>
+                
+                {% if col.foreign_key %}
+                {% set target_table = col.foreign_key.split('.')[0] %}
+                <select
+                  name="{{ col.name }}"
+                  value={formData.{{ col.name }} !== undefined && formData.{{ col.name }} !== null ? formData.{{ col.name }} : ''}
+                  onChange={handleInputChange}
+                  required
+                  className="px-3 py-2 bg-slate-950 border border-slate-800 rounded-xl text-xs focus:border-brand-500 focus:outline-none text-slate-200 transition-colors w-full"
+                >
+                  <option value="">Select {{ target_table.replace('_', ' ') }}</option>
+                  { {{ target_table }}OptionsError ? (
+                    <option disabled>âš  Failed to load options</option>
+                  ) : (
+                    {{ target_table }}Options.map(opt => (
+                      <option key={opt.id} value={opt.id}>
+                        { opt.name || opt.username || opt.email || opt.title || opt.label || `ID: ${opt.id}` }
+                      </option>
+                    ))
+                  )}
+                </select>
+
+                {% elif col.type == 'Boolean' %}
+                <div className="flex items-center gap-3 py-2">
+                  <input
+                    type="checkbox"
+                    id="{{ col.name }}_field"
+                    name="{{ col.name }}"
+                    checked={formData.{{ col.name }} || false}
+                    onChange={handleInputChange}
+                    className="w-4.5 h-4.5 accent-brand-650 bg-slate-950 border border-slate-800 rounded focus:ring-0 focus:outline-none"
+                  />
+                  <label htmlFor="{{ col.name }}_field" className="text-xs text-slate-300">
+                    Enable
+                  </label>
+                </div>
+
+                {% elif col.type == 'Integer' %}
+                <input
+                  type="number"
+                  step="1"
+                  min="0"
+                  name="{{ col.name }}"
+                  value={formData.{{ col.name }} !== undefined && formData.{{ col.name }} !== null ? formData.{{ col.name }} : ''}
+                  onChange={handleInputChange}
+                  required
+                  className="px-3 py-2 bg-slate-950 border border-slate-800 rounded-xl text-xs focus:border-brand-500 focus:outline-none text-slate-200 transition-colors"
+                />
+
+                {% elif col.type == 'Float' %}
+                <input
+                  type="number"
+                  step="any"
+                  min="0"
+                  name="{{ col.name }}"
+                  value={formData.{{ col.name }} !== undefined && formData.{{ col.name }} !== null ? formData.{{ col.name }} : ''}
+                  onChange={handleInputChange}
+                  required
+                  className="px-3 py-2 bg-slate-950 border border-slate-800 rounded-xl text-xs focus:border-brand-500 focus:outline-none text-slate-200 transition-colors"
+                />
+
+                {% elif col.type == 'DateTime' %}
+                <input
+                  type="datetime-local"
+                  name="{{ col.name }}"
+                  value={formData.{{ col.name }} || ''}
+                  onChange={handleInputChange}
+                  required
+                  className="px-3 py-2 bg-slate-950 border border-slate-800 rounded-xl text-xs focus:border-brand-500 focus:outline-none text-slate-200 transition-colors"
+                />
+
+                {% else %}
+                <input
+                  type="{% if 'email' in col.name %}email{% else %}text{% endif %}"
+                  name="{{ col.name }}"
+                  value={formData.{{ col.name }} || ''}
+                  onChange={handleInputChange}
+                  required
+                  className="px-3 py-2 bg-slate-950 border border-slate-800 rounded-xl text-xs focus:border-brand-500 focus:outline-none text-slate-200 transition-colors"
+                />
+                {% endif %}
+              </div>
+              {% endif %}
+              {% endfor %}
+
+              <div className="pt-4 border-t border-slate-850 flex items-center justify-end gap-3">
+                <button
+                  type="button"
+                  onClick={() => setIsModalOpen(false)}
+                  className="px-4 py-2 bg-slate-800 hover:bg-slate-750 text-slate-300 font-semibold text-xs rounded-xl transition-all"
+                >
+                  Cancel
+                </button>
+                <button
+                  type="submit"
+                  disabled={submitting}
+                  className="flex items-center gap-1.5 px-4 py-2 bg-brand-600 hover:bg-brand-500 text-white font-semibold text-xs rounded-xl disabled:opacity-50 transition-all shadow-lg shadow-brand-500/10"
+                >
+                  {submitting && <Loader2 className="w-3.5 h-3.5 animate-spin" />}
+                  Save
+                </button>
+              </div>
+            </form>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+

sirius_cli/templates/frontend/src/index.css.jinja2

@@ -0,0 +1,25 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  body {
+    @apply bg-slate-950 text-slate-100 selection:bg-cyan-500 selection:text-black;
+  }
+}
+
+/* Custom modern scrollbars */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: #020617;
+}
+::-webkit-scrollbar-thumb {
+  background: #1e293b;
+  border-radius: 9999px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: #334155;
+}

sirius_cli/templates/frontend/src/main.tsx.jinja2

@@ -0,0 +1,10 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+)

sirius_cli/templates/frontend/tailwind.config.js.jinja2

@@ -0,0 +1,21 @@
+import colors from 'tailwindcss/colors'
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./src/**/*.{js,ts,jsx,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        brand: colors.{{ theme | default('blue') }}
+      },
+      fontFamily: {
+        sans: ['Inter', 'sans-serif'],
+        outfit: ['Outfit', 'sans-serif']
+      }
+    }
+  },
+  plugins: []
+}

sirius_cli/templates/frontend/tsconfig.json.jinja2

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ES2020"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

sirius_cli/templates/frontend/vite.config.ts.jinja2

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 5173,
+    host: true
+  }
+})