Ak/issue 14 wip

.example.env

@@ -1,2 +1,3 @@
+# Need access to the database? Message us in the #phlask-data channel on Slack. 
 VITE_DB_URL=https://wantycfbnzzocsbthqzs.supabase.co
-VITE_DB_API_KEY=
+VITE_DB_API_KEY="Enter the API key provided by the team here"

.gitignore

@@ -5,3 +5,5 @@
 # React Router
 /.react-router/
 /build/
+
+

Dockerfile

@@ -1,22 +1,39 @@
-FROM node:20-alpine AS development-dependencies-env
+# Enable pnpm once for all stages
+FROM node:20-alpine AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
+
+# 2. Dependencies Stage - Install ALL deps (dev + prod)
+FROM base AS development-dependencies-env
 COPY . /app
 WORKDIR /app
-RUN npm ci
+# We copy only package manifests first to leverage Docker caching
+COPY package.json pnpm-lock.yaml /app/
+RUN pnpm install --frozen-lockfile
 
-FROM node:20-alpine AS production-dependencies-env
-COPY ./package.json package-lock.json /app/
+# 3. Production Deps Stage - Install ONLY prod deps
+FROM base AS production-dependencies-env
 WORKDIR /app
-RUN npm ci --omit=dev
+COPY package.json pnpm-lock.yaml /app/
+# --prod ensures devDependencies are skipped
+RUN pnpm install --prod --frozen-lockfile
 
-FROM node:20-alpine AS build-env
+# 4. Build Stage - Compile the source code
+FROM base AS build-env
+WORKDIR /app
 COPY . /app/
+# Copy node_modules from the development stage so we have TS/Build tools
 COPY --from=development-dependencies-env /app/node_modules /app/node_modules
-WORKDIR /app
-RUN npm run build
+RUN pnpm run build
 
-FROM node:20-alpine
-COPY ./package.json package-lock.json /app/
+# 5. Final Stage - The actual runner
+FROM base
+WORKDIR /app
+COPY ./package.json ./pnpm-lock.yaml /app/
+# Copy the "clean" production node_modules (no devDeps)
 COPY --from=production-dependencies-env /app/node_modules /app/node_modules
+# Copy the built artifacts
 COPY --from=build-env /app/build /app/build
-WORKDIR /app
-CMD ["npm", "run", "start"]
+
+CMD ["pnpm", "run", "start"]

README.md

@@ -1,83 +1,115 @@
-# Admin Dashboard
+# PHLASK Admin Dashboard
 
-## Features
+This is the admin dashboard for the [PHLASK](https://github.com/phlask/phlask-map/tree/develop) project. It provides a web interface for reviewing, editing, and managing community resource data using Supabase as the backend.
 
-- 🚀 Server-side rendering
-- ⚡️ Hot Module Replacement (HMR)
-- 📦 Asset bundling and optimization
-- 🔄 Data loading and mutations
-- 🔒 TypeScript by default
-- 🎉 TailwindCSS for styling
-- 📖 [React Router docs](https://reactrouter.com/)
+### Key Features
+
+- View and manage resources from the Supabase database
+- Review and approve/reject suggested edits to resources
+- View and resolve reports on resources
+- View resource changelogs and roll back changes if needed
 
 ## Getting Started
 
+### Prerequisites
+
+- Ensure you have [nodejs](https://nodejs.org/en/download) installed on your machine.
+- Ensure you have [pnpm](https://pnpm.io/installation) installed globally for package management.
+- Have [Biome](https://biomejs.dev/guides/editors/first-party-extensions/) added to your code editor for consistent code formatting.
+
 ### Installation
 
-Install the dependencies:
+Once you are in the root directory of the project.
+Install dependencies with [pnpm](https://pnpm.io/installation):
 
 ```bash
 pnpm install
 ```
 
 ### Development
 
-Start the development server with HMR:
+Start the development server:
 
 ```bash
 pnpm run dev
 ```
 
-Your application will be available at `http://localhost:5174`.
+Visit [http://localhost:5174](http://localhost:5174) or as output in the terminal from pnpm run dev to view the app.
 
-## Building for Production
+### Environment Variables
 
-Create a production build:
+To see the data & tables create a `.env` file in the root directory with the following variables:
+For reference, check and copy from the `.env.example` file.
 
 ```bash
-npm run build
+cp .example.env .env
 ```
 
-## Deployment
+Your `.env` file should look like this:
 
-### Docker Deployment
+```env
+VITE_DB_NAME="resources"
+VITE_DB_URL="Check .example.env for the URL"
+VITE_DB_API_KEY="Message us in the #phlask-data channel on Slack"
+```
 
-To build and run using Docker:
+Need access to the database? Message us in the [#phlask-data](https://codeforphilly.org/chat) channel on Slack. Also, refer to the `.env.example` file for more details.
 
-```bash
-docker build -t my-app .
+### Docker
+
+To build and run with Docker: Have [Docker](https://docs.docker.com/get-docker/) installed and running.
 
-# Run the container
-docker run -p 3000:3000 my-app
+In the root directory of the project, run:
+
+```bash
+docker build -t phlask-admin-dashboard .
+docker run -p 3000:3000 phlask-admin-dashboard
 ```
 
-The containerized application can be deployed to any platform that supports Docker, including:
+Replace 3000:3000 with the actual port your application listens on if it is different.
+
+## Project Structure
+
+```text
+app/
+├── api/
+│   ├── resources/
+│   │   └── methods.ts      # API methods related to resources
+│   ├── client.ts           # API client setup
+│   └── types.ts            # Shared API request/response types
+├── assets/
+│   └── PHILASK_v2.svg      # Static assets (logos, images, etc.)
+├── constants/
+│   └── db.ts               # Database-related constants/config
+├── routes/
+│   ├── _layout.tsx         # Shared layout for route pages
+│   ├── dashboard.tsx       # Dashboard page component
+├── types/
+│   └── ResourceEntry.ts    # Domain-specific TypeScript types
+├── utils/
+│   └── distance.ts         # Distance calculation utilities
+├── app.css                 # Global application styles
+├── root.tsx                # App root component / Entry point
+└── routes.ts               # Route definitions and router configuration
+```
 
-- AWS ECS
-- Google Cloud Run
-- Azure Container Apps
-- Digital Ocean App Platform
-- Fly.io
-- Railway
+## How to Contribute / Next Steps
 
-### DIY Deployment
+- Please refer to contributing guidelines [here](https://github.com/phlask/phlask-map?tab=readme-ov-file#want-to-add-something-new-or-developreport-a-fix-for-a-bug-you-found).
 
-If you're familiar with deploying Node applications, the built-in app server is production-ready.
+- Please check our [https://github.com/phlask/admin-dashboard/issues](https://github.com/phlask/admin-dashboard/issues) for open issues and feature requests.
 
-Make sure to deploy the output of `npm run build`
+- Before submitting a PR, please ensure that your code adheres to the project's coding standards and passes all tests. We recommend running the following command to check for linting errors and run tests:
 
-```txt
-├── package.json
-├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
-├── build/
-│   ├── client/    # Static assets
-│   └── server/    # Server-side code
+```bash
+pnpm biome check --write ./
 ```
 
-## Styling
-
-This template comes with [Tailwind CSS](https://tailwindcss.com/) already configured for a simple default starting experience. You can use whatever CSS framework you prefer.
+| Command                        | Description        |
+| ------------------------------ | ------------------ |
+| `pnpm biome check --write ./`  | Check & Fix (Safe) |
+| `pnpm biome format --write ./` | Format Only        |
+| `pnpm biome lint --write ./`   | Lint Only          |
 
 ---
-
-Built with ❤️ using React Router.
+Building with ❤️ by the PHLASK team.

app/routes.ts

@@ -1,3 +1,5 @@
-import { index, type RouteConfig } from "@react-router/dev/routes";
+import { index, layout, type RouteConfig } from "@react-router/dev/routes";
 
-export default [index("routes/home.tsx")] satisfies RouteConfig;
+export default [
+  layout("routes/_layout.tsx", [index("routes/dashboard.tsx")]),
+] satisfies RouteConfig;

app/routes/_layout.tsx

@@ -0,0 +1,39 @@
+import { NavLink, Outlet } from "react-router";
+
+import phlasklogo from "../assets/PHLASK_v2.svg";
+
+export default function DashboardLayout() {
+  return (
+    <div className="flex h-screen bg-gray-50 text-gray-900">
+      <aside className="w-64 bg-white border-r border-gray-200 flex flex-col">
+        <div className="p-6 border-b border-gray-100">
+          <h1 className="text-xl font-bold text-blue-600 tracking-tight">
+            <img src={phlasklogo} alt="PHLASK Logo" />
+          </h1>
+        </div>
+
+        <nav className="flex-1 p-4 space-y-1">
+          <NavLink
+            to="/"
+            end
+            className={({ isActive }) =>
+              `block px-4 py-2.5 rounded-lg text-sm font-medium transition-colors ${
+                isActive
+                  ? "bg-blue-50 text-blue-700"
+                  : "text-gray-600 hover:bg-gray-100"
+              }`
+            }
+          >
+            Dashboard
+          </NavLink>
+        </nav>
+      </aside>
+
+      <main className="flex-1 overflow-auto">
+        <div className="p-8">
+          <Outlet />
+        </div>
+      </main>
+    </div>
+  );
+}

app/routes/dashboard.tsx

@@ -0,0 +1,9 @@
+export default function Dashboard() {
+  return (
+    <div>
+      <h1 className="text-3xl font-bold text-gray-900 mb-4">
+        Dashboard Overview
+      </h1>
+    </div>
+  );
+}

app/types/ResourceEntry.ts

@@ -186,6 +186,7 @@ export type BathroomInfo = {
  * This is the main type for a resource entry in the database.
  */
 export type ResourceEntry = {
+  id?: string;
   /** Represents the schema that this resource entry is following */
   version?: number;
   /** The date this resource was created, in ISO UTC format */