Skip to content

Commit ef4a8e9

Browse files
xuliocxulioc
committed
after format
1 parent a036aa9 commit ef4a8e9

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+693
-714
lines changed

‎.vscode/settings.json

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
2-
"editor.formatOnSave": true,
3-
"editor.codeActionsOnSave": {
4-
"source.organizeImports": true,
5-
},
6-
"svg.preview.background": "editor"
7-
}
2+
"editor.formatOnSave": true,
3+
"editor.codeActionsOnSave": {
4+
"source.organizeImports": true
5+
},
6+
"svg.preview.background": "editor"
7+
}

‎README.md

+24-7
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
1-
2-
31
# SvelteKit Supabase Dashboard (BETA)
42

53
![alt text](/img/dashboard.png)
64

75
---
86

9-
## Simple dashboard inspired by Supabase UI made with [SvelteKit](https://kit.svelte.dev/) as frontend and [Supabase](https://supabase.com/) as backend.
7+
## Simple dashboard inspired by Supabase UI made with [SvelteKit](https://kit.svelte.dev/) as frontend and [Supabase](https://supabase.com/) as backend.
108

119
<h3>
1210
<span style="color:red">
@@ -15,18 +13,20 @@ DISCLAIMER: This project is not production ready. Role based access is not fully
1513
</span>
1614

1715
## Demo
16+
1817
Try different access roles and views [here](https://sveltekit-supabase-dashboard.vercel.app/).
1918

2019
## Features
20+
2121
- Supabase inspired UI
2222
- Multi organization
2323
- Role based access
2424
- User creation and deletion in dashboard UI
2525
- Tables & Charts demo views
2626
- Demo mode (show hints and disable database updates)
2727

28-
2928
## Technologies
29+
3030
- [Svelte](https://svelte.dev/) and [SvelteKit](https://kit.svelte.dev/) as application framework
3131
- [Supabase](https://supabase.com/) as database and backend
3232
- [TailwindCSS](https://tailwindcss.com/) as CSS framework
@@ -39,6 +39,7 @@ Try different access roles and views [here](https://sveltekit-supabase-dashboard
3939
- [Vercel](https://vercel.com/) as deployment platform
4040

4141
## TODO
42+
4243
- Improve development docs
4344
- Fix TypeScript issues
4445
- Add more chart views
@@ -47,23 +48,30 @@ Try different access roles and views [here](https://sveltekit-supabase-dashboard
4748
- ~~Light/Dark mode~~
4849
- Improve mobile navigation
4950
- PWA
50-
51+
5152
## Installation
53+
5254
### Setup Supabase
55+
5356
Create new project at [supabase.com](https://supabase.com/) and go to Settings->API to check your project URL and API keys
5457

5558
### Clone the repo
59+
5660
```bash
5761
git clone https://github.com/xulioc/sveltekit-supabase-dashboard.git
5862
cd sveltekit-supabase-dashboard
59-
```
63+
```
6064

6165
### Setup environment variables
66+
6267
Create a new `.env` file
68+
6369
```bash
6470
cp .env.example .env
6571
```
72+
6673
Edit your `.env` file to match your project URL and API keys
74+
6775
```bash
6876
# SUPABASE
6977
PUBLIC_SUPABASE_URL="YOUR PROJECT URL"
@@ -72,31 +80,40 @@ PRIVATE_SUPABASE_SERVICE_KEY="YOUR PROJECT SERVICE KEY"
7280
```
7381

7482
### Initialize database
83+
7584
Execute `sql/init_databse.sql` and `sql/init_demo_data.sql` in Supabase SQL Editor.
7685

7786
### Install & run
7887

7988
```bash
8089
npm install
8190
```
91+
8292
To start in development mode:
93+
8394
```bash
8495
npm run dev
8596
```
97+
8698
To build and start in production mode:
99+
87100
```bash
88101
npm run build
89102
npm run preview
90103
```
91104

92105
### Deploy
106+
93107
To deploy to Vercel please follow instructions [here](https://vercel.com/guides/deploying-svelte-with-vercel).
94108

95109
## Development
110+
96111
Find more development details [here](https://github.com/xulioc/sveltekit-supabase-dashboard/blob/main/README_DEV.md).
97112

98113
## Contribute
114+
99115
Feel free to contribute. Issues and Pull Requests are welcome.
100116

101117
## License
102-
[MIT](https://github.com/xulioc/sveltekit-supabase-dashboard/blob/main/LICENSE)
118+
119+
[MIT](https://github.com/xulioc/sveltekit-supabase-dashboard/blob/main/LICENSE)

‎README_DEV.md

+9-6
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,28 @@
11
# SvelteKit Supabase Dashboard -- DEVELOPMENT
22

33
## Demo mode
4+
45
You can enable/disable **demo mode** using the environment variable `PUBLIC_DEMO_MODE` in your `.env` file.
6+
57
```bash
68
PUBLIC_DEMO_MODE="true" #ENABLE DEMO MODE
79
```
10+
811
If **demo mode** is enabled you will see some hints in the dashboard and the database updates will be disabled.
912

1013
## Organizations and Roles
11-
Multiple organizations and user roles are allowed using Supabase Custom Claims.
1214

13-
Custom Claims are special attributes attached to a user that you can use to control access to portions of your application.
15+
Multiple organizations and user roles are allowed using Supabase Custom Claims.
16+
17+
Custom Claims are special attributes attached to a user that you can use to control access to portions of your application.
1418

1519
Custom Claims are stored in the `auth.users` table, in the `raw_app_meta_data` column for a user.
1620

1721
Custom Claims are stored in the security token a user receives when logging in, and these claims are made available to the PostgreSQL database as a configuration parameter, so the database has access to these values immediately without needing to do any disk i/o.
1822

1923
This may sound trivial, but this could have a significant effect on scalability if you use claims in an RLS (Row Level Security) Policy, as it could potentially eliminate thousands (or even millions) of database calls.
2024

21-
More info [here](https://github.com/supabase-community/supabase-custom-claims
22-
) and [here](https://github.com/supabase/supabase/discussions/1148)
25+
More info [here](https://github.com/supabase-community/supabase-custom-claims) and [here](https://github.com/supabase/supabase/discussions/1148)
2326

2427
### Organizations
2528

@@ -28,7 +31,9 @@ Currently there is no UI to create **organizations**. You must create them direc
2831
![Organizations](/img/organizations.png)
2932

3033
### Roles
34+
3135
There are three roles: `User`, `Admin` and `Super`.
36+
3237
- `User` is the standard user with no privilleges.
3338
- `Admin` is the organization admin. `Admin` can add user to organizations. `Admin` can also acess the routes `/dhasboard/admin/...`
3439
- `Super` is the superuser. `Super` can do everything and also access the routes `/dashboard/super/...`
@@ -38,5 +43,3 @@ There are three roles: `User`, `Admin` and `Super`.
3843
User can be created/deleted using Dashboard UI, if you are `Admin` or `Super`. If you are `Admin` you can create only users in your organization. `Super` can create users in any organization.
3944

4045
![Users](/img/create_user.png)
41-
42-

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,4 +54,4 @@
5454
"svelte-table": "^0.5.5",
5555
"theme-change": "^2.3.0"
5656
}
57-
}
57+
}

‎playwright.config.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,4 @@ const config: PlaywrightTestConfig = {
88
testDir: 'tests'
99
};
1010

11-
export default config;
11+
export default config;

‎src/app.d.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@ declare global {
55
interface Supabase {
66
Database: import('./DatabaseDefinitions').Database;
77
SchemaName: 'public';
8-
}
9-
interface PageData {
8+
}
9+
interface PageData {
1010
session: import('@supabase/supabase-js').Session | null;
11-
}
11+
}
1212
// interface Error {}
1313
// interface Locals {}
1414
// interface PageData {}

‎src/hooks.server.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
import '$lib/supabase';
1+
import '$lib/supabase';

‎src/lib/components/dashboard/OrgTable.svelte

+31-31
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,31 @@
1-
<script lang="ts">
2-
import Time from "svelte-time";
3-
export let orgs: Array<any>;
4-
</script>
5-
6-
<table class="table w-full">
7-
<thead>
8-
<tr>
9-
<!-- <th>Id</th> -->
10-
<th>Logo</th>
11-
<th>Name</th>
12-
<th>Created</th>
13-
<th>Updated</th>
14-
</tr>
15-
</thead>
16-
<tbody>
17-
{#each orgs as org}
18-
<tr>
19-
<!-- <td>{org.id}</td> -->
20-
<td>
21-
{#if org.logo}
22-
<img alt={org.name} src={org.logo} width="30" height="30"/>
23-
{/if}
24-
</td>
25-
<td>{org.name.toUpperCase()}</td>
26-
<td><Time timestamp={org.created_at}/></td>
27-
<td><Time timestamp={org.updated_at}/></td>
28-
</tr>
29-
{/each}
30-
</tbody>
31-
</table>
1+
<script lang="ts">
2+
import Time from 'svelte-time';
3+
export let orgs: Array<any>;
4+
</script>
5+
6+
<table class="table w-full">
7+
<thead>
8+
<tr>
9+
<!-- <th>Id</th> -->
10+
<th>Logo</th>
11+
<th>Name</th>
12+
<th>Created</th>
13+
<th>Updated</th>
14+
</tr>
15+
</thead>
16+
<tbody>
17+
{#each orgs as org}
18+
<tr>
19+
<!-- <td>{org.id}</td> -->
20+
<td>
21+
{#if org.logo}
22+
<img alt={org.name} src={org.logo} width="30" height="30" />
23+
{/if}
24+
</td>
25+
<td>{org.name.toUpperCase()}</td>
26+
<td><Time timestamp={org.created_at} /></td>
27+
<td><Time timestamp={org.updated_at} /></td>
28+
</tr>
29+
{/each}
30+
</tbody>
31+
</table>

‎src/lib/components/dashboard/ProductTable.svelte

+34-34
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,34 @@
1-
<script lang=ts>
2-
import SvelteTable from 'svelte-table';
3-
export let products: Array<any>;
4-
5-
const columns = [
6-
{
7-
key: 'title',
8-
title: 'Name',
9-
value: (v) => v.title,
10-
sortable: true
11-
},
12-
{
13-
key: 'brand',
14-
title: 'Brand',
15-
value: (v) => v.brand,
16-
sortable: true
17-
},
18-
{
19-
key: 'price',
20-
title: 'Price',
21-
value: (v) => v.price,
22-
sortable: true
23-
}
24-
];
25-
// console.log(products)
26-
</script>
27-
28-
<!-- https://svelte.dev/repl/8b2264e66d9a456abeb5f2b9322605f7?version=3.49.0 -->
29-
<SvelteTable
30-
{columns}
31-
rows={products}
32-
classNameTable={['table table-compact table-zebra']}
33-
classNameRow="hover cursor-pointer"
34-
/>
1+
<script lang ts>
2+
import SvelteTable from 'svelte-table';
3+
export let products: Array<any>;
4+
5+
const columns = [
6+
{
7+
key: 'title',
8+
title: 'Name',
9+
value: (v) => v.title,
10+
sortable: true
11+
},
12+
{
13+
key: 'brand',
14+
title: 'Brand',
15+
value: (v) => v.brand,
16+
sortable: true
17+
},
18+
{
19+
key: 'price',
20+
title: 'Price',
21+
value: (v) => v.price,
22+
sortable: true
23+
}
24+
];
25+
// console.log(products)
26+
</script>
27+
28+
<!-- https://svelte.dev/repl/8b2264e66d9a456abeb5f2b9322605f7?version=3.49.0 -->
29+
<SvelteTable
30+
{columns}
31+
rows={products}
32+
classNameTable={['table table-compact table-zebra']}
33+
classNameRow="hover cursor-pointer"
34+
/>

0 commit comments

Comments
 (0)