@orhancodestudio/ocsm-core 0.1.0-alpha.1

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

@@ -0,0 +1,334 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { type FormEvent, useState, useTransition } from "react";
+import {
+  ALL_PERMISSIONS,
+  type OcsmPermission,
+  type OcsmRole,
+  SYSTEM_ADMIN_ROLE_ID,
+} from "../../roles/role.types";
+import type {
+  CreateRoleAction,
+  DeleteRoleAction,
+  UpdateRoleAction,
+} from "../admin.types";
+import styles from "../admin.module.css";
+import { DataTable, type DataTableColumn } from "./data-table";
+import { IconPencil, IconPlus, IconTrash } from "./icons";
+import { Modal } from "./modal";
+
+export interface SettingsViewProps {
+  roles: OcsmRole[];
+  createRole: CreateRoleAction;
+  updateRole: UpdateRoleAction;
+  deleteRole: DeleteRoleAction;
+}
+
+type Tab = "roles";
+
+const TABS: Array<{ key: Tab; label: string }> = [
+  { key: "roles", label: "Roller ve Yetkiler" },
+];
+
+export function SettingsView({
+  roles,
+  createRole,
+  updateRole,
+  deleteRole,
+}: SettingsViewProps) {
+  const [tab, setTab] = useState<Tab>("roles");
+
+  return (
+    <div>
+      <div className={styles.pageHeader}>
+        <div>
+          <h1 className={styles.pageTitle}>Yapılandırma</h1>
+          <p className={styles.pageSubtitle}>
+            Sistem genelindeki ayarları buradan yönetin.
+          </p>
+        </div>
+      </div>
+
+      <div className={styles.tabs}>
+        {TABS.map((entry) => (
+          <button
+            key={entry.key}
+            type="button"
+            className={`${styles.tab} ${tab === entry.key ? styles.tabActive : ""}`}
+            onClick={() => setTab(entry.key)}
+          >
+            {entry.label}
+          </button>
+        ))}
+      </div>
+
+      {tab === "roles" ? (
+        <RolesTab
+          roles={roles}
+          createRole={createRole}
+          updateRole={updateRole}
+          deleteRole={deleteRole}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+type RoleDialog = { mode: "create" } | { mode: "edit"; role: OcsmRole } | null;
+
+function RolesTab({
+  roles,
+  createRole,
+  updateRole,
+  deleteRole,
+}: {
+  roles: OcsmRole[];
+  createRole: CreateRoleAction;
+  updateRole: UpdateRoleAction;
+  deleteRole: DeleteRoleAction;
+}) {
+  const router = useRouter();
+  const [dialog, setDialog] = useState<RoleDialog>(null);
+  const [pending, startTransition] = useTransition();
+
+  function onDelete(role: OcsmRole) {
+    if (!window.confirm(`"${role.name}" rolü silinsin mi?`)) return;
+    startTransition(async () => {
+      const result = await deleteRole(role.id);
+      if (!result.ok && result.message) window.alert(result.message);
+      router.refresh();
+    });
+  }
+
+  const columns: DataTableColumn<OcsmRole>[] = [
+    {
+      key: "name",
+      header: "Rol",
+      cell: (role) => (
+        <>
+          {role.name}
+          {role.system ? (
+            <span className={styles.badge} style={{ marginLeft: 8 }}>
+              sistem
+            </span>
+          ) : null}
+        </>
+      ),
+    },
+    {
+      key: "perms",
+      header: "Yetkiler",
+      cell: (role) => (
+        <span className={styles.cardHint}>
+          {role.permissions.length} / {ALL_PERMISSIONS.length} yetki
+        </span>
+      ),
+    },
+    {
+      key: "actions",
+      header: "",
+      align: "right",
+      cell: (role) => (
+        <div className={styles.tableActions}>
+          <button
+            type="button"
+            className={`${styles.btn} ${styles.btnSm}`}
+            onClick={() => setDialog({ mode: "edit", role })}
+            title="Düzenle"
+          >
+            <IconPencil width={14} height={14} />
+          </button>
+          <button
+            type="button"
+            className={`${styles.btn} ${styles.btnSm} ${styles.btnDanger}`}
+            onClick={() => onDelete(role)}
+            disabled={!!role.system}
+            title={role.system ? "Sistem rolü silinemez" : "Sil"}
+          >
+            <IconTrash width={14} height={14} />
+          </button>
+        </div>
+      ),
+    },
+  ];
+
+  return (
+    <div>
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "flex-end",
+          marginBottom: 14,
+        }}
+      >
+        <button
+          type="button"
+          className={`${styles.btn} ${styles.btnPrimary}`}
+          onClick={() => setDialog({ mode: "create" })}
+        >
+          <IconPlus width={16} height={16} />
+          Yeni rol
+        </button>
+      </div>
+
+      <DataTable
+        columns={columns}
+        rows={roles}
+        rowKey={(role) => role.id}
+        emptyText="Henüz rol yok."
+      />
+
+      {dialog?.mode === "create" ? (
+        <RoleDialogForm
+          title="Yeni rol"
+          pending={pending}
+          onClose={() => setDialog(null)}
+          onSubmit={(values, done) =>
+            startTransition(async () => {
+              const result = await createRole(values);
+              done(result.ok, result.message);
+              if (result.ok) {
+                setDialog(null);
+                router.refresh();
+              }
+            })
+          }
+        />
+      ) : null}
+
+      {dialog?.mode === "edit" ? (
+        <RoleDialogForm
+          title="Rolü düzenle"
+          pending={pending}
+          initial={dialog.role}
+          locked={dialog.role.id === SYSTEM_ADMIN_ROLE_ID}
+          onClose={() => setDialog(null)}
+          onSubmit={(values, done) =>
+            startTransition(async () => {
+              const result = await updateRole(dialog.role.id, values);
+              done(result.ok, result.message);
+              if (result.ok) {
+                setDialog(null);
+                router.refresh();
+              }
+            })
+          }
+        />
+      ) : null}
+    </div>
+  );
+}
+
+function RoleDialogForm({
+  title,
+  initial,
+  locked,
+  pending,
+  onClose,
+  onSubmit,
+}: {
+  title: string;
+  initial?: OcsmRole;
+  locked?: boolean;
+  pending: boolean;
+  onClose: () => void;
+  onSubmit: (
+    values: { name: string; permissions: OcsmPermission[] },
+    done: (ok: boolean, message?: string) => void,
+  ) => void;
+}) {
+  const [name, setName] = useState(initial?.name ?? "");
+  const [permissions, setPermissions] = useState<OcsmPermission[]>(
+    initial?.permissions ?? ["content:read"],
+  );
+  const [error, setError] = useState<string | null>(null);
+
+  function toggle(perm: OcsmPermission) {
+    if (locked) return;
+    setPermissions((current) =>
+      current.includes(perm)
+        ? current.filter((p) => p !== perm)
+        : [...current, perm],
+    );
+  }
+
+  function submit(event: FormEvent) {
+    event.preventDefault();
+    setError(null);
+    onSubmit({ name, permissions }, (ok, message) => {
+      if (!ok) setError(message ?? "İşlem başarısız");
+    });
+  }
+
+  return (
+    <Modal
+      open
+      title={title}
+      width={560}
+      onClose={onClose}
+      footer={
+        <>
+          <button
+            type="button"
+            className={styles.btn}
+            onClick={onClose}
+            disabled={pending}
+          >
+            Vazgeç
+          </button>
+          <button
+            type="submit"
+            form="ocsm-role-form"
+            className={`${styles.btn} ${styles.btnPrimary}`}
+            disabled={pending}
+          >
+            {pending ? "Kaydediliyor…" : "Kaydet"}
+          </button>
+        </>
+      }
+    >
+      <form id="ocsm-role-form" onSubmit={submit}>
+        <div className={styles.field}>
+          <label className={styles.label} htmlFor="r-name">
+            Rol adı
+          </label>
+          <input
+            id="r-name"
+            className={styles.input}
+            value={name}
+            onChange={(e) => setName(e.target.value)}
+            required
+          />
+        </div>
+
+        <span className={styles.label}>Yetkiler</span>
+        {locked ? (
+          <p className={styles.help}>
+            Bu sistem rolü her zaman tüm yetkilere sahiptir ve değiştirilemez.
+          </p>
+        ) : null}
+        <div className={styles.permList}>
+          {ALL_PERMISSIONS.map((perm) => {
+            const checked = locked || permissions.includes(perm.key);
+            return (
+              <label key={perm.key} className={styles.permItem}>
+                <input
+                  type="checkbox"
+                  checked={checked}
+                  disabled={locked}
+                  onChange={() => toggle(perm.key)}
+                />
+                <span>
+                  <span className={styles.permLabel}>{perm.label}</span>
+                  <span className={styles.permDesc}>{perm.description}</span>
+                </span>
+              </label>
+            );
+          })}
+        </div>
+        {error ? <p className={styles.errorText}>{error}</p> : null}
+      </form>
+    </Modal>
+  );
+}

package/src/admin/components/sign-out-button.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { useTransition } from "react";
+import type { SignOutAction } from "../admin.types";
+import styles from "../admin.module.css";
+import { IconLogout } from "./icons";
+
+export function SignOutButton({ signOut }: { signOut: SignOutAction }) {
+  const [pending, startTransition] = useTransition();
+
+  return (
+    <button
+      type="button"
+      className={`${styles.btn} ${styles.btnSm}`}
+      disabled={pending}
+      onClick={() => startTransition(() => signOut())}
+    >
+      <IconLogout width={15} height={15} />
+      {pending ? "Çıkılıyor…" : "Çıkış"}
+    </button>
+  );
+}

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

@@ -0,0 +1,77 @@
+import { OCSM_PACKAGE_NAME } from "../../version";
+import styles from "../admin.module.css";
+
+export interface SystemViewProps {
+  version: string;
+  updateLatest: string | null;
+  storageBackend: "filesystem" | "github";
+  userCount: number;
+  collectionCount: number;
+}
+
+export function SystemView({
+  version,
+  updateLatest,
+  storageBackend,
+  userCount,
+  collectionCount,
+}: SystemViewProps) {
+  const rows: Array<{ label: string; value: React.ReactNode }> = [
+    { label: "Paket", value: <code>{OCSM_PACKAGE_NAME}</code> },
+    { label: "Sürüm", value: `v${version}` },
+    {
+      label: "Güncelleme",
+      value: updateLatest ? (
+        <span className={styles.badgeWarn} style={{ padding: "2px 8px" }}>
+          v{updateLatest} mevcut
+        </span>
+      ) : (
+        <span className={styles.badgeOk} style={{ padding: "2px 8px" }}>
+          Güncel
+        </span>
+      ),
+    },
+    {
+      label: "Depolama",
+      value:
+        storageBackend === "github"
+          ? "GitHub (commit ile)"
+          : "Yerel dosya sistemi",
+    },
+    { label: "Kullanıcı sayısı", value: userCount },
+    { label: "Koleksiyon sayısı", value: collectionCount },
+  ];
+
+  return (
+    <div>
+      <div className={styles.pageHeader}>
+        <div>
+          <h1 className={styles.pageTitle}>Sistem</h1>
+          <p className={styles.pageSubtitle}>OCS Management kurulum bilgileri</p>
+        </div>
+      </div>
+
+      {updateLatest ? (
+        <div className={styles.notice}>
+          Yeni bir sürüm yayınlandı: <strong>v{updateLatest}</strong>. Çekirdek
+          paketini güncelleyerek son sürüme geçebilirsin.
+        </div>
+      ) : null}
+
+      <div className={styles.panel}>
+        <table className={styles.table}>
+          <tbody>
+            {rows.map((row) => (
+              <tr key={row.label}>
+                <td style={{ width: 220, color: "var(--p-muted)" }}>
+                  {row.label}
+                </td>
+                <td>{row.value}</td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}