GitHub - Childofnasdaq/Quick-Pro

Branches Tags

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
accordion.tsx		accordion.tsx
admin-store.ts		admin-store.ts
alert-dialog.tsx		alert-dialog.tsx
alert.tsx		alert.tsx
aspect-ratio.tsx		aspect-ratio.tsx
auth-forms.tsx		auth-forms.tsx
auth-store.ts		auth-store.ts
auth.ts		auth.ts
avatar.tsx		avatar.tsx
badge.tsx		badge.tsx
breadcrumb.tsx		breadcrumb.tsx
bull-icon.tsx		bull-icon.tsx
bull.svg		bull.svg
button.tsx		button.tsx
calendar.tsx		calendar.tsx
candlestick-chart.tsx		candlestick-chart.tsx
candlestick-icon.tsx		candlestick-icon.tsx
card.tsx		card.tsx
carousel.tsx		carousel.tsx
chart.tsx		chart.tsx
checkbox.tsx		checkbox.tsx
collapsible.tsx		collapsible.tsx
command.tsx		command.tsx
components.json		components.json
context-menu.tsx		context-menu.tsx
create-license-modal.tsx		create-license-modal.tsx
db.ts		db.ts
dialog.tsx		dialog.tsx
drawer.tsx		drawer.tsx
dropdown-menu.tsx		dropdown-menu.tsx
ea-icon-upload.tsx		ea-icon-upload.tsx
ea-profile-card.tsx		ea-profile-card.tsx
ea-store.ts		ea-store.ts
form.tsx		form.tsx
globals.css		globals.css
hover-card.tsx		hover-card.tsx
input-otp.tsx		input-otp.tsx
input.tsx		input.tsx
label.tsx		label.tsx
layout.tsx		layout.tsx
license-list.tsx		license-list.tsx
license-store.ts		license-store.ts
menubar.tsx		menubar.tsx
middleware.ts		middleware.ts
navigation-menu.tsx		navigation-menu.tsx
next.config.mjs		next.config.mjs
package.json		package.json
page.tsx		page.tsx
pagination.tsx		pagination.tsx
placeholder-logo.png		placeholder-logo.png
placeholder-logo.svg		placeholder-logo.svg
placeholder-user.jpg		placeholder-user.jpg
placeholder.jpg		placeholder.jpg
placeholder.svg		placeholder.svg
popover.tsx		popover.tsx
postcss.config.mjs		postcss.config.mjs
progress.tsx		progress.tsx
protected-layout.tsx		protected-layout.tsx
quick-pro-1.zip		quick-pro-1.zip
radio-group.tsx		radio-group.tsx
resizable.tsx		resizable.tsx
schema.prisma		schema.prisma
scroll-area.tsx		scroll-area.tsx
select.tsx		select.tsx
separator.tsx		separator.tsx
sheet.tsx		sheet.tsx
sidebar.tsx		sidebar.tsx
skeleton.tsx		skeleton.tsx
slider.tsx		slider.tsx
sonner.tsx		sonner.tsx
store.ts		store.ts
switch.tsx		switch.tsx
table.tsx		table.tsx
tabs.tsx		tabs.tsx
tailwind.config.ts		tailwind.config.ts
textarea.tsx		textarea.tsx
toast.tsx		toast.tsx
toaster.tsx		toaster.tsx
toggle-group.tsx		toggle-group.tsx
toggle.tsx		toggle.tsx
tooltip.tsx		tooltip.tsx
trading-strategy-form.tsx		trading-strategy-form.tsx
tsconfig.json		tsconfig.json
use-mobile.tsx		use-mobile.tsx
use-toast.ts		use-toast.ts
utils.ts		utils.ts
vercel.json		vercel.json

Repository files navigation

'use client'

import { useState } from 'react'
import { Copy } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'
import { Switch } from '@/components/ui/switch'
import { useLicenseStore } from '@/lib/stores/license-store'
import { CreateLicenseModal } from './create-license-modal'

export function LicenseList() {
  const [search, setSearch] = useState('')
  const [filter, setFilter] = useState('all')
  const [isModalOpen, setIsModalOpen] = useState(false)
  const licenses = useLicenseStore((state) => state.licenses)
  const toggleStatus = useLicenseStore((state) => state.toggleStatus)

  const filteredLicenses = licenses.filter((license) => {
    const matchesSearch =
      license.email.toLowerCase().includes(search.toLowerCase()) ||
      license.username.toLowerCase().includes(search.toLowerCase())
    const matchesFilter =
      filter === 'all' || license.status === filter
    return matchesSearch && matchesFilter
  })

  const copyToClipboard = (key: string) => {
    navigator.clipboard.writeText(key)
  }

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <h1 className="text-2xl font-bold">License Management</h1>
        <Button
           => setIsModalOpen(true)}
          className="bg-gradient-to-r from-blue-600 to-purple-600 text-white"
        >
          Add New License
        </Button>
      </div>

      <div className="flex gap-4">
        <Input
          placeholder="Search licenses..."
          value={search}
           => setSearch(e.target.value)}
          className="max-w-sm"
        />
        <Select value={filter} 
          <SelectTrigger className="w-[180px]">
            <SelectValue placeholder="Filter by status" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="all">All</SelectItem>
            <SelectItem value="active">Active</SelectItem>
            <SelectItem value="inactive">Inactive</SelectItem>
          </SelectContent>
        </Select>
      </div>

      <div className="rounded-md border">
        {filteredLicenses.map((license) => (
          <div
            key={license.id}
            className="flex items-center justify-between border-b p-4 last:border-0"
          >
            <div className="space-y-1">
              <p className="font-medium">{license.username}</p>
              <p className="text-sm text-gray-500">{license.email}</p>
              <div className="flex items-center gap-2">
                <code className="rounded bg-gray-100 px-2 py-1 text-sm">
                  {license.key}
                </code>
                <Button
                  variant="ghost"
                  size="icon"
                   => copyToClipboard(license.key)}
                >
                  <Copy className="h-4 w-4" />
                </Button>
              </div>
            </div>
            <div className="flex items-center gap-4">
              <Switch
                checked={license.status === 'active'}
                 => toggleStatus(license.id)}
              />
              <span className="text-sm">
                {license.status === 'active' ? 'Active' : 'Inactive'}
              </span>
            </div>
          </div>
        ))}
      </div>

      <CreateLicenseModal
        open={isModalOpen}
        
      />
    </div>
  )
}