GitPad
How it works
Back to board

kargulstudio/calender-app-design

kargulstudio · personal account · GitHub id 245261909
GitHub

No description on GitHub.

tools
Verify the dev 171 followerson GitHub since 20254 public repos
@kargulstudiokargul.studio

Straight from the GitHub profile. The social links are the ones GitHub shows on github.com/kargulstudio: nothing here is submitted to GitPad.

Stars
738
Velocity
416.6★/day
Forks
90
Language
TypeScript
Created
2026-10-26 (3d)
Last push
2026-10-26
Category
tools
GitPad score
78/100
Fee lock

When this repo launches on GitPad, 100% of creator fees are locked on-chain to kargulstudio's GitHub vault. The split can never be changed after launch, by anyone. kargulstudio claims by connecting GitHub on pump.fun.

2xBAQwhQmm2A3JKEUNuFyeCA2PreSj6XpZkoEMS5ejGi
vault not created
Vault on Solscan How the lock works

In short

The kargulstudio/calender-app-design repository is a browser-only design prototype of a people-ops workspace called Kargul Workspace, built in TypeScript with Next.js, React, Tailwind CSS, shadcn/ui, and Zustand. Its Time off page reproduces a Figma design and lets users submit requests that count working days while skipping weekends and holidays, with balances, filters, and manager approval previews. The app also includes a calendar with week, day, and month views supporting drag-to-create and drag-to-resize events, along with other placeholder pages, and it persists all data to localStorage with no backend.

Written by GitPad research from the repo’s public material. The full text follows below.

README · straight from GitHub

Kargul Calender Design Prototype

A design prototype of Kargul Workspace, a people-ops workspace built from the "Dashboard – calendar" Figma design. Live at https://calender-app-design.vercel.app.

The Time off page (/time-off, the default route) reproduces the design pixel-for-pixel; every other page in the sidebar is built in the same visual language. Everything runs in the browser — there is no backend; data persists to localStorage.

Stack

  • Next.js 16 (App Router, Turbopack) · React 19 · TypeScript
  • Tailwind CSS v4 with design tokens mapped from the Figma variables
  • shadcn/ui (Radix primitives) themed to the design
  • Zustand for state (persist middleware → localStorage)
  • next-themes for dark mode, Sonner for toasts, cmdk for the command palette

Getting started

npm install
npm run dev

Open http://localhost:3000. To return to the exact design state, use Settings → Data → Reset demo data (or clear site data).

What works

  • Calendar — week / day / month views; drag on empty space to create, drag events to move (across days), drag the bottom edge to resize; overlapping events lay out side by side; all-day lane with public holidays; live now-line; origin-aware details popover.
  • Time off — request dialog that counts working days (skips weekends and holidays) and shows the balance after the request; stats computed from your requests and allowance; requests table with search, filters, sorting, details, edit/cancel/delete, and a manager approve/decline preview.
  • Shell — workspace switcher, ⌘K search across pages/events/requests/ documents/invoices, notifications, help menu, dark mode, account menu.
  • Keyboard — ⌘K search, N new event, R request time-off, T today, ←/→ previous/next, D/W/M views, ? shortcuts.
  • Other pages — Dashboard, Analytics, Personal details, Documents, Time tracking, Benefits, Invoice, Withdrawal methods, Settings.

Project layout

src/
  app/                 routes (one folder per sidebar page)
  components/
    ui/                shadcn/ui primitives, themed
    shell/             title bar, sidebar, search, notifications, shortcuts
    calendar/          header, time grid, all-day row, month view, popover
    time-off/          stats panel, requests table, status badge
    dialogs/           app-wide dialogs (request, event, details, holidays…)
    pages/             page bodies for the secondary routes
  stores/              Zustand stores (app data, calendar view, overlays)
  hooks/               client-only "today"/"now"
  lib/                 types, date helpers, leave rules, seed data

The seed in src/lib/seed.ts is what the design shows: the week of Nov 8–14, 2026 with Tue Nov 10 selected, and allowance figures of 7 available, 2 pending, 3 upcoming.

License

MIT © 2026 Kargul Studio