@orhancodestudio/ocsm-core 0.1.0-alpha.1

package/src/admin/admin.types.ts

@@ -0,0 +1,85 @@
+import type { Block } from "../blocks/block.types";
+import type { LayoutRegion } from "../layout/layout-store";
+import type { OcsmPermission } from "../roles/role.types";
+import type { OcsmTheme } from "../theme/theme.types";
+
+/** Payload sent from the page builder when saving a document. */
+export interface SaveDocumentInput {
+  collection: string;
+  slug: string;
+  title: string;
+  blocks: Block[];
+}
+
+/** Result returned by admin server actions. */
+export interface ActionResult {
+  ok: boolean;
+  message?: string;
+}
+
+export type SaveDocumentAction = (
+  input: SaveDocumentInput,
+) => Promise<ActionResult>;
+export type DeleteDocumentAction = (
+  collection: string,
+  slug: string,
+) => Promise<ActionResult>;
+
+// --- Users ---
+export interface CreateUserActionInput {
+  username: string;
+  name: string;
+  role: string;
+  password: string;
+}
+export interface UpdateUserActionInput {
+  id: string;
+  name: string;
+  role: string;
+  password?: string;
+}
+export type CreateUserAction = (
+  input: CreateUserActionInput,
+) => Promise<ActionResult>;
+export type UpdateUserAction = (
+  input: UpdateUserActionInput,
+) => Promise<ActionResult>;
+export type DeleteUserAction = (id: string) => Promise<ActionResult>;
+
+// --- Roles ---
+export interface RoleActionInput {
+  name: string;
+  permissions: OcsmPermission[];
+}
+export type CreateRoleAction = (
+  input: RoleActionInput,
+) => Promise<ActionResult>;
+export type UpdateRoleAction = (
+  id: string,
+  input: RoleActionInput,
+) => Promise<ActionResult>;
+export type DeleteRoleAction = (id: string) => Promise<ActionResult>;
+
+export type SaveThemeAction = (theme: OcsmTheme) => Promise<ActionResult>;
+
+export type SaveLayoutAction = (
+  region: LayoutRegion,
+  blocks: Block[],
+) => Promise<ActionResult>;
+
+export type SignOutAction = () => Promise<void>;
+
+/** The full set of server actions the admin panel needs from the host app. */
+export interface OcsmAdminActions {
+  saveDocument: SaveDocumentAction;
+  deleteDocument: DeleteDocumentAction;
+  createUser: CreateUserAction;
+  updateUser: UpdateUserAction;
+  deleteUser: DeleteUserAction;
+  createRole: CreateRoleAction;
+  updateRole: UpdateRoleAction;
+  deleteRole: DeleteRoleAction;
+  saveTheme: SaveThemeAction;
+  saveLayout: SaveLayoutAction;
+  signOut: SignOutAction;
+}

package/src/admin/components/access-denied.tsx

@@ -0,0 +1,12 @@
+import styles from "../admin.module.css";
+
+export function AccessDenied() {
+  return (
+    <div className={styles.accessDenied}>
+      <h1 className={styles.pageTitle}>Erişim engellendi</h1>
+      <p className={styles.pageSubtitle}>
+        Bu bölümü görüntülemek için yeterli yetkiniz yok.
+      </p>
+    </div>
+  );
+}

package/src/admin/components/admin-shell.tsx

@@ -0,0 +1,168 @@
+import type { ReactNode } from "react";
+import type { SessionUser } from "../../auth/session";
+import type { ResolvedOcsmConfig } from "../../config/config.types";
+import { OCSM_VERSION } from "../../version";
+import type { SignOutAction } from "../admin.types";
+import styles from "../admin.module.css";
+import {
+  IconDashboard,
+  IconDocument,
+  IconInfo,
+  IconSettings,
+  IconUsers,
+} from "./icons";
+import { SignOutButton } from "./sign-out-button";
+
+export interface AdminShellProps {
+  brand: ResolvedOcsmConfig["brand"];
+  collections: ResolvedOcsmConfig["collections"];
+  currentUser: SessionUser;
+  active: string;
+  title: string;
+  canManageUsers: boolean;
+  canManageSettings: boolean;
+  signOut: SignOutAction;
+  updateLatest: string | null;
+  children: ReactNode;
+}
+
+/** Chrome for the admin panel: branded sidebar, top bar, navigation. */
+export function AdminShell({
+  brand,
+  collections,
+  currentUser,
+  active,
+  title,
+  canManageUsers,
+  canManageSettings,
+  signOut,
+  updateLatest,
+  children,
+}: AdminShellProps) {
+  return (
+    <div className={styles.app}>
+      <aside className={styles.sidebar}>
+        <div className={styles.brand}>
+          <span className={styles.brandName}>{brand.name}</span>
+          <span className={styles.brandMeta}>OCS Management</span>
+        </div>
+
+        <nav className={styles.nav}>
+          <NavLink
+            href="/ocsm-admin"
+            label="Panel"
+            icon={<IconDashboard className={styles.navIcon} />}
+            active={active === "dashboard"}
+          />
+
+          <div className={styles.navSectionTitle}>İçerik</div>
+          {collections.map((collection) => (
+            <NavLink
+              key={collection.name}
+              href={`/ocsm-admin/${collection.name}`}
+              label={collection.label}
+              icon={<IconDocument className={styles.navIcon} />}
+              active={active === collection.name}
+            />
+          ))}
+
+          <div className={styles.navSectionTitle}>Yönetim</div>
+          {canManageUsers ? (
+            <NavLink
+              href="/ocsm-admin/users"
+              label="Kullanıcılar"
+              icon={<IconUsers className={styles.navIcon} />}
+              active={active === "users"}
+            />
+          ) : null}
+          {canManageSettings ? (
+            <NavLink
+              href="/ocsm-admin/settings"
+              label="Yapılandırma"
+              icon={<IconSettings className={styles.navIcon} />}
+              active={active === "settings"}
+            />
+          ) : null}
+          <NavLink
+            href="/ocsm-admin/system"
+            label="Sistem"
+            icon={<IconInfo className={styles.navIcon} />}
+            active={active === "system"}
+          />
+        </nav>
+
+        <div className={styles.sidebarFooter}>
+          {updateLatest ? (
+            <a
+              className={styles.updateBadge}
+              href="/ocsm-admin/system"
+            >
+              Güncelleme mevcut: v{updateLatest}
+            </a>
+          ) : (
+            <div className={styles.versionTag}>OCSM v{OCSM_VERSION}</div>
+          )}
+        </div>
+      </aside>
+
+      <div className={styles.main}>
+        <header className={styles.topbar}>
+          <div className={styles.topbarTitle}>{title}</div>
+          <div className={styles.topbarRight}>
+            <div className={styles.userChip}>
+              <span className={styles.userAvatar}>
+                {initials(currentUser.name)}
+              </span>
+              <span className={styles.userMeta}>
+                <span className={styles.userName}>{currentUser.name}</span>
+                <span
+                  className={`${styles.roleBadge} ${
+                    currentUser.role === "admin"
+                      ? styles.roleAdmin
+                      : styles.roleEditor
+                  }`}
+                >
+                  {currentUser.roleName}
+                </span>
+              </span>
+            </div>
+            <SignOutButton signOut={signOut} />
+          </div>
+        </header>
+
+        <main className={styles.content}>{children}</main>
+      </div>
+    </div>
+  );
+}
+
+function NavLink({
+  href,
+  label,
+  icon,
+  active,
+}: {
+  href: string;
+  label: string;
+  icon: ReactNode;
+  active: boolean;
+}) {
+  return (
+    <a
+      href={href}
+      className={`${styles.navItem} ${active ? styles.navItemActive : ""}`}
+    >
+      {icon}
+      {label}
+    </a>
+  );
+}
+
+function initials(name: string): string {
+  return name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0]?.toUpperCase() ?? "")
+    .join("");
+}

package/src/admin/components/content-list-view.tsx

@@ -0,0 +1,83 @@
+import type { DeleteDocumentAction } from "../admin.types";
+import styles from "../admin.module.css";
+import { DataTable, type DataTableColumn } from "./data-table";
+import { DocumentDeleteButton } from "./document-delete-button";
+import { IconPlus } from "./icons";
+
+export interface ContentListItem {
+  slug: string;
+  title: string;
+}
+
+export interface ContentListViewProps {
+  collection: string;
+  collectionLabel: string;
+  documents: ContentListItem[];
+  canDelete: boolean;
+  deleteAction: DeleteDocumentAction;
+}
+
+export function ContentListView({
+  collection,
+  collectionLabel,
+  documents,
+  canDelete,
+  deleteAction,
+}: ContentListViewProps) {
+  const columns: DataTableColumn<ContentListItem>[] = [
+    { key: "title", header: "Başlık", cell: (doc) => doc.title },
+    {
+      key: "slug",
+      header: "Slug",
+      cell: (doc) => <span className={styles.badge}>{doc.slug}</span>,
+    },
+    {
+      key: "actions",
+      header: "",
+      align: "right",
+      cell: (doc) => (
+        <div className={styles.tableActions}>
+          <a
+            className={`${styles.btn} ${styles.btnSm}`}
+            href={`/ocsm-admin/${collection}/${doc.slug}`}
+          >
+            Düzenle
+          </a>
+          {canDelete ? (
+            <DocumentDeleteButton
+              collection={collection}
+              slug={doc.slug}
+              title={doc.title}
+              deleteAction={deleteAction}
+            />
+          ) : null}
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      <div className={styles.pageHeader}>
+        <div>
+          <h1 className={styles.pageTitle}>{collectionLabel}</h1>
+          <p className={styles.pageSubtitle}>{documents.length} içerik</p>
+        </div>
+        <a
+          className={`${styles.btn} ${styles.btnPrimary}`}
+          href={`/ocsm-admin/${collection}/new`}
+        >
+          <IconPlus width={16} height={16} />
+          Yeni
+        </a>
+      </div>
+
+      <DataTable
+        columns={columns}
+        rows={documents}
+        rowKey={(doc) => doc.slug}
+        emptyText="Henüz içerik yok. “Yeni” ile ilk içeriğini oluştur."
+      />
+    </div>
+  );
+}

package/src/admin/components/dashboard-view.tsx

@@ -0,0 +1,113 @@
+import styles from "../admin.module.css";
+import { DataTable, type DataTableColumn } from "./data-table";
+import { IconDocument } from "./icons";
+
+export interface DashboardStat {
+  name: string;
+  label: string;
+  count: number;
+}
+
+export interface DashboardRecentItem {
+  collection: string;
+  collectionLabel: string;
+  slug: string;
+  title: string;
+}
+
+export interface DashboardViewProps {
+  currentUserName: string;
+  stats: DashboardStat[];
+  recent: DashboardRecentItem[];
+  version: string;
+  updateLatest: string | null;
+}
+
+export function DashboardView({
+  currentUserName,
+  stats,
+  recent,
+  version,
+  updateLatest,
+}: DashboardViewProps) {
+  const recentColumns: DataTableColumn<DashboardRecentItem>[] = [
+    { key: "title", header: "Başlık", cell: (item) => item.title },
+    {
+      key: "collection",
+      header: "Koleksiyon",
+      cell: (item) => (
+        <span className={styles.badge}>{item.collectionLabel}</span>
+      ),
+    },
+    {
+      key: "actions",
+      header: "",
+      align: "right",
+      cell: (item) => (
+        <div className={styles.tableActions}>
+          <a
+            className={`${styles.btn} ${styles.btnSm}`}
+            href={`/ocsm-admin/${item.collection}/${item.slug}`}
+          >
+            Düzenle
+          </a>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      <div className={styles.pageHeader}>
+        <div>
+          <h1 className={styles.pageTitle}>Hoş geldin, {currentUserName}</h1>
+          <p className={styles.pageSubtitle}>
+            İçeriklerini buradan yönetebilirsin.
+          </p>
+        </div>
+      </div>
+
+      <div className={styles.cardGrid}>
+        {stats.map((stat) => (
+          <a
+            key={stat.name}
+            href={`/ocsm-admin/${stat.name}`}
+            className={styles.card}
+          >
+            <span className={styles.cardLabel}>
+              <IconDocument width={15} height={15} />
+              {stat.label}
+            </span>
+            <span className={styles.cardValue}>{stat.count}</span>
+            <span className={styles.cardHint}>içerik</span>
+          </a>
+        ))}
+        <div className={styles.card}>
+          <span className={styles.cardLabel}>Sürüm</span>
+          <span className={styles.cardValue} style={{ fontSize: 18 }}>
+            v{version}
+          </span>
+          <span className={styles.cardHint}>
+            {updateLatest ? (
+              <span className={styles.badgeWarn} style={{ padding: "2px 8px" }}>
+                Güncelleme: v{updateLatest}
+              </span>
+            ) : (
+              <span className={styles.badgeOk} style={{ padding: "2px 8px" }}>
+                Güncel
+              </span>
+            )}
+          </span>
+        </div>
+      </div>
+
+      <DataTable
+        title="Son içerikler"
+        columns={recentColumns}
+        rows={recent}
+        rowKey={(item) => `${item.collection}/${item.slug}`}
+        emptyText="Henüz içerik eklenmemiş."
+      />
+    </div>
+  );
+}

package/src/admin/components/data-table.tsx

@@ -0,0 +1,80 @@
+import type { ReactNode } from "react";
+import styles from "../admin.module.css";
+
+export interface DataTableColumn<T> {
+  /** Stable key for the column. */
+  key: string;
+  /** Header label (empty string for an actions column). */
+  header: ReactNode;
+  /** Renders the cell content for a row. */
+  cell: (row: T) => ReactNode;
+  align?: "left" | "right";
+  width?: number | string;
+}
+
+export interface DataTableProps<T> {
+  columns: DataTableColumn<T>[];
+  rows: T[];
+  /** Stable React key for each row. */
+  rowKey: (row: T) => string;
+  /** Shown when there are no rows. */
+  emptyText?: string;
+  /** Optional panel header title above the table. */
+  title?: ReactNode;
+}
+
+/**
+ * Reusable table inside a panel — shared chrome (header, empty state, thead/tbody)
+ * for every admin list (content, users, dashboard…). Cell content is provided by
+ * the caller via each column's `cell` renderer.
+ */
+export function DataTable<T>({
+  columns,
+  rows,
+  rowKey,
+  emptyText = "Kayıt bulunamadı.",
+  title,
+}: DataTableProps<T>) {
+  return (
+    <div className={styles.panel}>
+      {title ? (
+        <div className={styles.panelHeader}>
+          <h2 className={styles.panelTitle}>{title}</h2>
+        </div>
+      ) : null}
+
+      {rows.length === 0 ? (
+        <div className={styles.emptyState}>{emptyText}</div>
+      ) : (
+        <table className={styles.table}>
+          <thead>
+            <tr>
+              {columns.map((column) => (
+                <th
+                  key={column.key}
+                  style={{ textAlign: column.align ?? "left", width: column.width }}
+                >
+                  {column.header}
+                </th>
+              ))}
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row) => (
+              <tr key={rowKey(row)}>
+                {columns.map((column) => (
+                  <td
+                    key={column.key}
+                    style={{ textAlign: column.align ?? "left" }}
+                  >
+                    {column.cell(row)}
+                  </td>
+                ))}
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      )}
+    </div>
+  );
+}

package/src/admin/components/document-delete-button.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useTransition } from "react";
+import type { DeleteDocumentAction } from "../admin.types";
+import styles from "../admin.module.css";
+import { IconTrash } from "./icons";
+
+export interface DocumentDeleteButtonProps {
+  collection: string;
+  slug: string;
+  title: string;
+  deleteAction: DeleteDocumentAction;
+}
+
+export function DocumentDeleteButton({
+  collection,
+  slug,
+  title,
+  deleteAction,
+}: DocumentDeleteButtonProps) {
+  const router = useRouter();
+  const [pending, startTransition] = useTransition();
+
+  function onClick() {
+    if (!window.confirm(`"${title}" silinsin mi?`)) return;
+    startTransition(async () => {
+      await deleteAction(collection, slug);
+      router.refresh();
+    });
+  }
+
+  return (
+    <button
+      type="button"
+      className={`${styles.btn} ${styles.btnSm} ${styles.btnDanger}`}
+      disabled={pending}
+      onClick={onClick}
+    >
+      <IconTrash width={14} height={14} />
+      {pending ? "…" : "Sil"}
+    </button>
+  );
+}