ION — Work Clarity for Teams and Individuals

Focused time tracking, goal setting, and team collaboration—backed by clear analytics.

---

---

What is ION?

ION is a lightweight productivity companion that helps you:

• Log Core Work and Shared Work with accurate durations
• Enter a distraction‑free Hyperfocus mode for deep work
• Visualize trends and distributions in Analytics
• Align teams in Teamspaces with shared goals and visibility

Who is it for?

• Individuals who want a clear picture of how they spend time
• Teams that need a shared rhythm and goals without heavy process

---

Features at a Glance

• Daily goals with an elegant vertical time picker (hours/minutes)
• One‑click logging for Core and Shared work
• Hyperfocus mode to protect deep work
• Rich Analytics (trends, distributions, weekly stats)
• Teamspaces for collaboration

---

Product Screens

Core Work

• Set your daily goal and log focused sessions with minute precision
• See progress toward the goal right in the sidebar
• Quickly switch between Core and Shared work types

Plan the day, track progress, and keep momentum.

---

Hyperfocus

• A dedicated, minimal interface for deep work
• Keep context visible while eliminating noise

Protect focus. Reduce noise. Finish faster.

---

Analytics

• Productivity Trend: see how your output evolves over time
• Work Mode Distribution: balance Core/Shared/Hyperfocus time
• Daily & Weekly breakdowns to spot patterns and improve

Turn data into decisions with clear, actionable charts.

---

Teamspace

• Create teamspaces, invite teammates, and track shared goals
• View team activity and align on priorities

Shared visibility that keeps teams moving together.

---

Core Concepts

Core Work vs Shared Work

• Core Work: high‑value, individual focus time that moves your priorities forward.
• Shared Work: collaboration and support that keeps the team unblocked.

Daily Goals (Sidebar)

• Set a daily target in hours/minutes using a vertical time picker.
• See live progress as you log work entries.

Navigation

• Access all sections quickly from the left sidebar: Core, Shared, Hyperfocus, Analytics, Team, Profile.

---

Quickstart

Requirements: Node.js and npm.

1) Install

npm i

2) Configure Environment

• Copy .env.example to .env.local
• Set your Supabase values:
  • VITE_SUPABASE_URL
  • VITE_SUPABASE_ANON_KEY
• Keep server‑only secrets out of client code (e.g. SUPABASE_SERVICE_ROLE — do not prefix with VITE_).

3) Run

npm run dev

Open the printed local URL in your browser.

---

Project Structure

/ (repo root)
├─ public/
│  ├─ COREWORK.png
│  ├─ HYPERFOCUS.png
│  ├─ ANALYTICS.png
│  ├─ ANALYTICS2.png
│  ├─ TEAMSPACE.png
│  └─ favicon.ico
├─ src/
│  ├─ components/
│  │  └─ layout/
│  │     └─ Sidebar.tsx
│  ├─ integrations/
│  │  └─ supabase/
│  │     └─ client.ts
│  ├─ lib/
│  │  └─ supabaseClient.ts
│  └─ pages/
│     ├─ CoreWork.tsx
│     ├─ SharedWork.tsx
│     ├─ Hyperfocus.tsx
│     ├─ Team.tsx
│     ├─ TeamspaceDetail.tsx
│     ├─ Profile.tsx
│     ├─ Login.tsx, Auth.tsx, AuthCallback.tsx
│     └─ Analytics/
│        ├─ Analytics.tsx
│        ├─ ProductivityTrend.tsx
│        ├─ WorkModeDistribution.tsx
│        ├─ DailyWorkDistribution.tsx
│        └─ WeeklyStatistics.tsx
├─ .env.example
├─ CODEBASE_OVERVIEW.md
├─ tailwind.config.ts
├─ vite.config.ts
└─ package.json

---

Supabase Integration

We use the official @supabase/supabase-js client for authentication and data access.

Client configuration

• Reads VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY
• Persists auth session to localStorage
• Optional typed client in src/integrations/supabase/client.ts

Example (from src/lib/supabaseClient.ts):

import { createClient } from "@supabase/supabase-js";
const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
export const supabase = createClient(supabaseUrl!, supabaseAnonKey!);

Auth & Queries

// Current user
const { data: { user } } = await supabase.auth.getUser();

// Read today's work entries
const { data, error } = await supabase
  .from("work")
  .select("duration_minutes")
  .eq("user_id", user!.id)
  .eq("Date", new Date().toISOString().slice(0, 10));

Tables

• work — per‑user time logs with duration_minutes and Date
• userdailyGoal — per‑user daily goal (goal_hours) keyed by Date

Environment variables

VITE_SUPABASE_URL=...        # your project URL
VITE_SUPABASE_ANON_KEY=...   # anon (public) key for client
SUPABASE_SERVICE_ROLE=...    # server-only secret (never expose to the browser)

---

Routing

• Core Work — /
• Shared Work — /shared-work
• Hyperfocus — /hyperfocus
• Analytics — /analytics
• Team — /team
• Profile — /profile

---

Scripts

npm run dev      # start dev server
npm run build    # production build
npm run preview  # preview build
npm run lint     # lint source

---

Architecture Notes

• UI: React + TypeScript, Tailwind CSS, shadcn/ui components
• Data fetching: TanStack Query for caching and mutations
• Build: Vite
• Routing: react-router-dom

---

Tech Stack

• Vite + React + TypeScript
• Tailwind CSS + shadcn/ui
• Supabase (Auth + Database)
• TanStack Query for data fetching and caching

For a deeper tour of the code, see CODEBASE_OVERVIEW.md.