Skip to content

Commit 3400380

Browse files
hotlonghotlong
committed
refactor: update dashboard to developer overview and object explorer
- Replaced the DashboardWelcome component with DeveloperOverview in App.tsx. - Introduced ObjectExplorer for object-specific data management. - Updated AppSidebar to reflect new view states and navigation. - Enhanced SiteHeader to display the current view and package label. - Created DeveloperOverview component to provide insights into packages and metadata. - Implemented ObjectExplorer for schema, data, and API exploration of objects. - Added ObjectSchemaInspector for detailed field definitions and metadata.
1 parent 75058b8 commit 3400380

6 files changed

Lines changed: 787 additions & 138 deletions

File tree

‎apps/console/src/App.tsx‎

Lines changed: 28 additions & 124 deletions
Original file line numberDiff line numberDiff line change
@@ -3,127 +3,20 @@ import { ObjectStackClient } from '@objectstack/client';
33
import { AppSidebar } from "./components/app-sidebar"
44
import { SiteHeader } from "@/components/site-header"
55
import { SidebarProvider } from "@/components/ui/sidebar"
6-
import { ObjectDataTable } from './components/ObjectDataTable';
6+
import { DeveloperOverview } from './components/DeveloperOverview';
7+
import { ObjectExplorer } from './components/ObjectExplorer';
78
import { ObjectDataForm } from './components/ObjectDataForm';
89
import { PackageManager } from './components/PackageManager';
910
import { Toaster } from "@/components/ui/toaster"
10-
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
11-
import { Database, Layers, Sparkles, Zap } from 'lucide-react';
1211
import { getApiBaseUrl, config } from './lib/config';
1312
import type { InstalledPackage } from '@objectstack/spec/kernel';
1413

15-
function DashboardWelcome() {
16-
return (
17-
<div className="flex flex-1 flex-col gap-6 p-6">
18-
{/* Hero section */}
19-
<div className="flex flex-col gap-2">
20-
<h1 className="text-3xl font-bold tracking-tight">
21-
Welcome to ObjectStack
22-
</h1>
23-
<p className="text-muted-foreground max-w-2xl">
24-
A metadata-driven platform console. Select an object from the sidebar to view and manage your data, or explore the features below.
25-
</p>
26-
</div>
27-
28-
{/* Feature cards grid */}
29-
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
30-
<Card className="border-dashed">
31-
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
32-
<CardTitle className="text-sm font-medium">Data Objects</CardTitle>
33-
<Database className="h-4 w-4 text-muted-foreground" />
34-
</CardHeader>
35-
<CardContent>
36-
<div className="text-2xl font-bold">Dynamic</div>
37-
<CardDescription className="text-xs mt-1">
38-
Metadata-driven object definitions with auto-generated CRUD
39-
</CardDescription>
40-
</CardContent>
41-
</Card>
42-
43-
<Card className="border-dashed">
44-
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
45-
<CardTitle className="text-sm font-medium">API Layer</CardTitle>
46-
<Zap className="h-4 w-4 text-muted-foreground" />
47-
</CardHeader>
48-
<CardContent>
49-
<div className="text-2xl font-bold">REST</div>
50-
<CardDescription className="text-xs mt-1">
51-
Auto-generated REST endpoints via MSW interception
52-
</CardDescription>
53-
</CardContent>
54-
</Card>
55-
56-
<Card className="border-dashed">
57-
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
58-
<CardTitle className="text-sm font-medium">UI Components</CardTitle>
59-
<Layers className="h-4 w-4 text-muted-foreground" />
60-
</CardHeader>
61-
<CardContent>
62-
<div className="text-2xl font-bold">shadcn/ui</div>
63-
<CardDescription className="text-xs mt-1">
64-
Beautiful, accessible components built with Radix & Tailwind
65-
</CardDescription>
66-
</CardContent>
67-
</Card>
68-
69-
<Card className="border-dashed">
70-
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
71-
<CardTitle className="text-sm font-medium">Runtime</CardTitle>
72-
<Sparkles className="h-4 w-4 text-muted-foreground" />
73-
</CardHeader>
74-
<CardContent>
75-
<div className="text-2xl font-bold">Plugin</div>
76-
<CardDescription className="text-xs mt-1">
77-
Extensible plugin architecture with lifecycle hooks
78-
</CardDescription>
79-
</CardContent>
80-
</Card>
81-
</div>
82-
83-
{/* Getting started */}
84-
<Card>
85-
<CardHeader>
86-
<CardTitle>Getting Started</CardTitle>
87-
<CardDescription>
88-
Explore ObjectStack by navigating the sidebar
89-
</CardDescription>
90-
</CardHeader>
91-
<CardContent>
92-
<div className="grid gap-4 md:grid-cols-3">
93-
<div className="flex items-start gap-3">
94-
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary text-sm font-bold">1</div>
95-
<div>
96-
<p className="text-sm font-medium">Browse Objects</p>
97-
<p className="text-xs text-muted-foreground mt-0.5">Select an object from the sidebar to view its records in a data table.</p>
98-
</div>
99-
</div>
100-
<div className="flex items-start gap-3">
101-
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary text-sm font-bold">2</div>
102-
<div>
103-
<p className="text-sm font-medium">Create Records</p>
104-
<p className="text-xs text-muted-foreground mt-0.5">Use the "New" button to create records with auto-generated forms.</p>
105-
</div>
106-
</div>
107-
<div className="flex items-start gap-3">
108-
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary text-sm font-bold">3</div>
109-
<div>
110-
<p className="text-sm font-medium">Edit & Delete</p>
111-
<p className="text-xs text-muted-foreground mt-0.5">Inline actions let you edit or remove records with one click.</p>
112-
</div>
113-
</div>
114-
</div>
115-
</CardContent>
116-
</Card>
117-
</div>
118-
);
119-
}
120-
12114
export default function App() {
12215
const [client, setClient] = useState<ObjectStackClient | null>(null);
12316
const [packages, setPackages] = useState<InstalledPackage[]>([]);
12417
const [selectedPackage, setSelectedPackage] = useState<InstalledPackage | null>(null);
12518
const [selectedObject, setSelectedObject] = useState<string | null>(null);
126-
const [selectedView, setSelectedView] = useState<'dashboard' | 'packages' | 'object'>('dashboard');
19+
const [selectedView, setSelectedView] = useState<'overview' | 'packages' | 'object'>('overview');
12720
const [editingRecord, setEditingRecord] = useState<any>(null);
12821
const [showForm, setShowForm] = useState(false);
12922

@@ -186,7 +79,7 @@ export default function App() {
18679
function handleSelectPackage(pkg: InstalledPackage) {
18780
setSelectedPackage(pkg);
18881
setSelectedObject(null);
189-
setSelectedView('dashboard');
82+
setSelectedView('overview');
19083
setShowForm(false);
19184
setEditingRecord(null);
19285
}
@@ -197,11 +90,11 @@ export default function App() {
19790
setSelectedView('object');
19891
} else {
19992
setSelectedObject(null);
200-
setSelectedView('dashboard');
93+
setSelectedView('overview');
20194
}
20295
}
20396

204-
function handleSelectView(view: 'dashboard' | 'packages') {
97+
function handleSelectView(view: 'overview' | 'packages') {
20598
setSelectedView(view);
20699
setSelectedObject(null);
207100
setShowForm(false);
@@ -221,22 +114,33 @@ export default function App() {
221114
selectedView={selectedView}
222115
/>
223116
<main className="flex min-w-0 flex-1 flex-col bg-background">
224-
<SiteHeader selectedObject={selectedObject} appLabel={selectedPackage?.manifest?.name || selectedPackage?.manifest?.id} />
117+
<SiteHeader
118+
selectedObject={selectedObject}
119+
selectedView={selectedView}
120+
packageLabel={selectedPackage?.manifest?.name || selectedPackage?.manifest?.id}
121+
/>
225122
<div className="flex flex-1 flex-col overflow-hidden">
226123
{selectedView === 'object' && selectedObject ? (
227-
<div className="flex flex-1 flex-col gap-4 p-4">
228-
{client && (
229-
<ObjectDataTable
230-
client={client}
231-
objectApiName={selectedObject}
232-
onEdit={handleEdit}
233-
/>
234-
)}
235-
</div>
124+
client && (
125+
<ObjectExplorer
126+
client={client}
127+
objectApiName={selectedObject}
128+
onEdit={handleEdit}
129+
/>
130+
)
236131
) : selectedView === 'packages' ? (
237132
client && <PackageManager client={client} />
238133
) : (
239-
<DashboardWelcome />
134+
client && (
135+
<DeveloperOverview
136+
client={client}
137+
packages={packages}
138+
onNavigate={(view, detail) => {
139+
if (view === 'packages') handleSelectView('packages');
140+
else if (detail) handleSelectObject(detail);
141+
}}
142+
/>
143+
)
240144
)}
241145
</div>
242146
</main>

0 commit comments

Comments
 (0)